// Illustrative delivery-time chart: a plain line of one example shop's recent
// deliveries. No markers, no band. Minimal x and y axes. Rendered full size on
// the Intro page (#example-chart) and as a compact reminder on ChoiceSetIntro /
// FinalDecision (#example-chart-mini). Values come from window.js_vars.example.

(function () {
    var V = window.js_vars || {};
    if (typeof Highcharts === 'undefined') return;

    var data = (V.example || []).map(Number);
    var n = data.length;
    if (!n) return;

    var BASE = {
        chart: { backgroundColor: 'transparent' },
        title: { text: null },
        credits: { enabled: false },
        accessibility: { enabled: false },
        legend: { enabled: false },
        tooltip: { enabled: false },
        yAxis: {
            // A visible axis line with only two ticks (0 and 10) and no
            // gridlines: enough to orient, without cluttering the plot.
            min: 0, max: 10,
            startOnTick: true,
            endOnTick: true,
            tickPositions: [0, 10],
            title: { text: null },
            gridLineWidth: 0,
            lineColor: '#cbd5e1',
            lineWidth: 1,
            tickColor: '#cbd5e1',
            tickWidth: 1,
            tickLength: 4,
            labels: { style: { color: '#9ca3af', fontSize: '10px' } },
        },
        plotOptions: {
            series: {
                animation: false,
                enableMouseTracking: false,
                states: { hover: { enabled: false } },
                marker: { enabled: false },
            },
            line: { color: '#334155' },
        },
    };

    if (document.getElementById('example-chart')) {
        var cats = [];
        for (var k = 1; k <= n; k++) cats.push(String(k));
        cats.push('Next');
        Highcharts.chart('example-chart', Highcharts.merge(BASE, {
            chart: { height: 280, style: { fontFamily: 'inherit' }, spacing: [14, 16, 10, 6] },
            yAxis: {
                title: { text: 'Business days', style: { color: '#9ca3af', fontSize: '11px' } },
            },
            xAxis: {
                categories: cats,
                title: { text: 'Delivery', style: { color: '#9ca3af', fontSize: '11px' } },
                lineColor: '#e5e7eb',
                tickColor: '#e5e7eb',
                labels: { style: { color: '#6b7280', fontSize: '11px' } },
                plotLines: [{
                    value: n - 0.5,
                    color: '#cbd5e1',
                    dashStyle: 'Dash',
                    width: 1,
                    label: {
                        text: 'next order',
                        rotation: 0, x: 6, y: 14,
                        style: { color: '#9ca3af', fontSize: '10px' },
                    },
                }],
            },
            series: [{ type: 'line', lineWidth: 2, data: data.concat([null]) }],
        }));
    }

    if (document.getElementById('example-chart-mini')) {
        var mcats = [];
        for (var j = 1; j <= n; j++) mcats.push(String(j));
        Highcharts.chart('example-chart-mini', Highcharts.merge(BASE, {
            chart: { height: 130, style: { fontFamily: 'inherit' }, spacing: [6, 8, 4, 4] },
            yAxis: {
                title: { text: 'Business days', style: { color: '#9ca3af', fontSize: '9px' } },
                labels: { style: { fontSize: '9px' } },
            },
            xAxis: {
                categories: mcats,
                title: { text: 'Previous deliveries', style: { color: '#9ca3af', fontSize: '9px' } },
                lineColor: '#cbd5e1',
                tickLength: 0,
                labels: { enabled: false },
            },
            series: [{ type: 'line', lineWidth: 1.5, data: data }],
        }));
    }
})();