{% extends "app_layout_wells.html" %}

{% block head_extra %}
<script type="text/javascript" src="/static/echarts.min.js"></script>
{% endblock %}

{% block header_title %}
{{ wells_title }} - Salinity
{% endblock %}

{% block title %}
Salinity - {{ wells_title }}
{% endblock %}

{% block wells_form_content %}

{{ super() }}

<b>Filter data:</b>
    <br />
        <input type="checkbox" name="ignore_anomalous" id="ignore_anomalous" value="1" {% if ignore_anomalous %}checked{% endif %} />
            <label for="ignore_anomalous">Ignore anomalous_ind = Y</label>
    <br />
        <label>Keep only measured_during</label>
            <input type="text" name="keep_measured_during" value="{{ keep_measured_during }}" />  - (e.g. M for monitoring), Separate codes with commas.
    <br />
        <label>Keep only extract_method</label>
            <input type="text" name="keep_extract_method" value="{{ keep_extract_method }}" />  - (e.g. PUMP,AIRL for pumped and airlifted samples). Separate codes with commas.
    <br />
        <label>Parameter:</label>
        <input type="text" name="param" value="{{ param }}" /> (ec or tds)
    <br>

{% endblock %}

{% block wells_content %}

    {% if wells|length <= 9 %}
        <p>Click the "Open query/filter/sort form" button above and see the "Filter data"
            section for options to adjust the chart.</p>
        <div id="sal_chart" style="width: 1200px; height: 500px;"></div>
    {% else %}
        <p>(A chart will appear here if you have queried for up to 9 wells.)</p>
    {% endif %}

    {{ table|safe }}

{% if wells|length <= 9 %}

<script type="text/javascript">
// Dynamic Width (Build Regex)
const wrap = (s, w) => s.replace(
    new RegExp(`(?![^\\n]{1,${w}}$)([^\\n]{1,${w}})\\s`, 'g'), '$1<br />'
);

var salChartDom = document.getElementById('sal_chart');
var salChart = echarts.init(salChartDom);
var salOption;

var salData = {{ sal_js_dataset|safe }};
var salDataCols = [
            'title',
            'collected_date',
            'ec', 
            'tds',
            'anomalous_ind',
            'measured_during',
            'extract_method',
            'depth_from',
            'comments'
        ];

salOption = {
    animation: false,
    dataset: {{ sal_js_datasets_spec|safe }},
    tooltip: {
        trigger: 'item',
        axisPointer: {
            type: 'cross',
            crossStyle: {
                color: '#999'
            }
        },
        formatter: function (params, ticket, callback) {
            p = params;
            var wellLabel = p.data[0];
            var dateLabel = new Date(p.data[1]).toLocaleDateString("en-GB");
            label = '<span style="font-size: 0.9em;"><b>' + wellLabel + '<br>' + dateLabel + '</b><br />';
            for (i = 2; i < p.data.length; i++) {
                valueLabel = p.data[i];
                if (typeof valueLabel !== "undefined") {
                    fieldName = p.dimensionNames[i];
                    valueLabel = valueLabel.toString();
                    if (valueLabel.length > 0) {
                        if (fieldName == 'comments') {
                            valueLabel = wrap(valueLabel, 40);
                        }
                        label += fieldName + ': <b>' + valueLabel + '</b><br />';
                    }
                }
            }
            return label + '</span>';
        }
    },
    toolbox: {
        show: true,
        feature: {
            dataZoom: { 
                show: true,
                filterMode: 'none'
            },
            restore: { show: true },
            saveAsImage: { show: true }
        }
    },
    xAxis: {
        type: 'time'
    },
    yAxis: [
        {
            type: 'value',
            scale: true,
            {% if param == 'ec' %}name: 'EC (uS/cm @ 25C)' {% else %}name: 'TDS (mg/L)' {% endif %},
            nameLocation: 'middle',
            nameGap: 50,
        }
    ],  
    dataZoom: [
        {
            type: 'inside',
            start: 0,
            end: 100
        },
        {
            start: 100,
            end: 100
        }
    ],
    legend: {
        orient: 'horizontal',
        selected: {
            'EC': true,
            'TDS': true
        }
    },
    series: [
        {{ sal_js_series_spec|safe }}
    ]
};

salOption && salChart.setOption(salOption);

</script>

{% endif %}

{% endblock %}