// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily =
    '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = "#292b2c";

d3.csv("/static/data/alimentary_historical.csv").then(function (data) {
    supply_date = get_data('supply_date', data)
    
    price = get_data('price', data)

    d3.csv("/static/data/alimentary_forecast.csv").then(function (fore) {
        forecast_data = get_mix_data('index', 'predicted_mean', fore)
        future_date = get_data('index', fore)
        supply_date = supply_date.concat(future_date)
        plotSarimaChart()
    })
});


function get_mix_data(x, y, data){
    var result = []
    for (let index = 0; index < data.length; index++) {
        result.push({"x": data[index][x], "y": data[index][y]});
    }
    return result;
}

function get_data(column, data) {
    var result = [];
    for (let index = 0; index < data.length; index++) {
        result.push(data[index][column]);
    }
    return result;
}


/*  Plots FB Prophet graph for the revenue of a medicine  */
function plotSarimaChart() {
    var chartOptions = {
        scales: {
            xAxes: [
                {
                    time: {
                        unit: "date",
                    },
                    gridLines: {
                        display: false,
                    },
                    ticks: {
                        maxTicksLimit: 11,
                    },
                },
            ],
            yAxes: [
                {
                    ticks: {
                        min: 200,
                        max: 750,
                        maxTicksLimit: 5,
                    },
                    gridLines: {
                        color: "rgba(0, 0, 0, .125)",
                    },
                },
            ],
        },
        legend: {
            display: true,
        },
    };

    var historical = {
        label: "Historical",

        lineTension: 0.2,
        backgroundColor: "#e9fffc",
        borderColor: "#21baa4",
        pointRadius: 1,
        pointBackgroundColor: "#21baa4",
        pointBorderColor: "#21baa4",
        pointHoverRadius: 2,
        pointHoverBackgroundColor: "#e9fffc",
        pointHitRadius: 50,
        pointBorderWidth: 1,
        data: price,
    };

    var forecast = {
        label: "Forecast",
        lineTension: 0.2,
        borderColor: "#f7b5b5",
        pointRadius: 1,
        backgroundColor: "transparent",
        pointBackgroundColor: "#f7b5b5",
        pointBorderColor: "#f7b5b5",
        pointHoverRadius: 5,
        pointHoverBackgroundColor: "#e9fffc",
        pointHitRadius: 50,
        pointBorderWidth: 1,
        data: forecast_data,
    };

    // Area Prophet Chart
    var ctx = document.getElementById("mySarimaAreaChart");
    var chart = new Chart([ctx], {
        type: "line",
        data: {
            labels: supply_date,
            datasets: [historical, forecast],
        },
        options: chartOptions,
    });
}

