Recount-Server/web/static/chart_functions.js

function createDiagonalPattern(color = '#ffffff') {
    // create a 10x10 px canvas for the pattern's base shape
    let shape = document.createElement('canvas')
    shape.width = 10
    shape.height = 10

    // get the context for drawing
    let c = shape.getContext('2d')

    c.fillStyle = color + "60";
    c.fillRect(0, 0, shape.width, shape.height);

    // draw 1st line of the shape 
    c.strokeStyle = color;
    c.lineWidth = 3;
    c.lineCap = "round";
    c.beginPath()
    c.moveTo(2, 0)
    c.lineTo(10, 8)
    c.stroke()
    // draw 2nd line of the shape 
    c.beginPath()
    c.moveTo(0, 8)
    c.lineTo(2, 10)
    c.stroke()
    // create the pattern from the shape
    return c.createPattern(shape, 'repeat')
}

function historical_vs_current_chart(jsonData, element) {
    const style = getComputedStyle(document.body);
    const red_color = style.getPropertyValue("--pf-red");
    const green_color = style.getPropertyValue("--pf-green");
    const legend_bg = style.getPropertyValue("--pf-overlay2");
    const config = {
        type: "bar",
        data: {
            labels: jsonData.labels,
            datasets: [{
                label: "Historical",
                data: [
                    jsonData.income_data[0],
                    jsonData.expenses_data[0]
                ],
                backgroundColor: [
                    createDiagonalPattern(green_color),
                    createDiagonalPattern(red_color)
                ]
            },
            {
                label: "Last 30 Days",
                data: [
                    jsonData.income_data[1],
                    jsonData.expenses_data[1]
                ],
                backgroundColor: [
                    green_color,
                    red_color
                ]
            }]
        },
        options: {
            maintainAspectRatio: false,
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }      
            },
            plugins: {
                legend: {
                    display: true,
                    labels: {
                        boxWidth: 20,
                        position: "bottom",
                        generateLabels: function(chart) {
                            var labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
                            for (var key in labels) {
                                if (labels[key].text == "Historical") {
                                    labels[key].fillStyle  = createDiagonalPattern(legend_bg);
                                } else {
                                    labels[key].fillStyle = legend_bg;
                                }

                              labels[key].strokeStyle = "rgba(33, 44, 22, 0.7)"; 
                            }
                            return labels;
                          }
                    }
                }
            }
        }
    };
    new Chart(element, config);

}

function sparkline_summary_chart(jsonData, element) {
    const style = getComputedStyle(document.body);
    const red_color = style.getPropertyValue("--pf-red");
    const green_color = style.getPropertyValue("--pf-green");
    const line_color = style.getPropertyValue("--pf-overlay2");
    const config = {
        type: "line",
        data: {
            labels: jsonData.labels,
            datasets: [{
                label: "Historical",
                data: jsonData.data,
                borderColor: line_color,
                backgroundColor: function(context) {
                    var value = context.dataset.data[context.dataIndex];
                    return value < 0 ? red_color : green_color;
                },
            }]
        },
        options: {
            maintainAspectRatio: false,
            responsive: true,
            scales: {
                y: {
                    ticks: {
                        display: true,
                        callback: function(value, index, values) {
                            if (value === 0) {
                                return value;
                            } else {
                                return null;
                            }
                        },
                    },
                    suggestedMin: 5
                }
            },
            plugins: {
                legend: {
                    display: false
                }
            }
        },
    };
    new Chart(element, config);
}

function fill_charts() {
    document.querySelectorAll(".chartjs-chart").forEach(function (el) {
        fill_chart(el);
    });
}

function fill_chart(el) {
    var url = el.dataset.chartEndpoint;
    var type = el.dataset.chartType;

    fetch(url)
        .then(response => {
        if (!response.ok) {
            console.log(response);
            throw new Error("Fetch response was not ok!")
        }
        return response.json();
    }).then(jsonData => {
            if (type == "historical_vs_current") {
                historical_vs_current_chart(jsonData, el);
            } else if (type == "sparkline_summary") {
                sparkline_summary_chart(jsonData, el);
            }
    }).catch(error => {
        console.error("Unable to set up chart: ", error)
    });
}

export {fill_charts, fill_chart}