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 fill_charts() {
    const style = getComputedStyle(document.body);
    const red_color = style.getPropertyValue("--pf-red");
    const green_color = style.getPropertyValue("--pf-green");
    document.querySelectorAll(".chartjs-chart").forEach(function (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 => {
            const config = {
                type: type,
                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("#888888");
                                        } else {
                                            labels[key].fillStyle = "#88888840"
                                        }

                                      labels[key].strokeStyle = "rgba(33, 44, 22, 0.7)"; 
                                    }
                                    return labels;
                                  }
                            }
                        }
                    }
                }
            };
            new Chart(el, config);
        }).catch(error => {
            console.error("Unable to set up chart: ", error)
        });
        
    });
}

export {fill_charts}