node.chartjs.ssr/chartGenerator.js

const { createCanvas, registerFont } = require('canvas');
const Chart = require('chart.js/auto');

const {testData} = require("./trash/testData");
const {formatSeconds} = require("./utils");
const moment = require('moment');
const fs = require("fs");

function prepareData(data) {
    const result = [];

    const grabFirstValue = (container) => {
        if (!container) return 0;
        for (const mapName of Object.keys(container)) {
            return container[mapName];
        }
        return 0;
    }

    const grabMapName = (container) => {
        if (!container) return "";
        for (const mapName of Object.keys(container)) {
            return mapName;
        }
        return "";
    }
    //console.log(data)
    for (const srvId of Object.keys(data.lastplay)) {
        const obj = {}
        obj["srv_id"] = srvId;
        obj["server_name"] = data.servers[srvId].name;
        obj["lastplay"] = grabFirstValue(data.lastplay[srvId])
        obj["lastplay_moment"] = moment.unix(obj["lastplay"]).format("DD-MM-YYYY HH:mm")
        obj["gametime"] = grabFirstValue(data.gametime[srvId])
        obj["map_name"] = grabMapName(data.lastplay[srvId])
        result.push(obj);
    }
    return result;
}

function generateChartData(d) {
    const maxGametime = d.sort((a, b) => a.gametime - b.gametime).at(d.length - 1)["gametime"]
    console.log(maxGametime)

    let gametimeDelimiter = 1;
    for (const delimiter of [60, 3600, 3600 * 24]) {
        if (maxGametime > delimiter)
            gametimeDelimiter = delimiter;
    }
    console.log(gametimeDelimiter)

    const chartData = {
        labels: [],
        datasets: []
    }
    const data = []
    d.sort((a, b) => b.gametime - a.gametime).forEach(
        (val) => {
            chartData.labels.push(`${val['server_name']}\n${val['lastplay_moment']}\nНаиграно: ${formatSeconds(val['gametime'])}`)
            data.push(val['gametime'] / gametimeDelimiter)
        }
    )
    chartData.datasets.push({
        label: "Наиграно времени",
        data: data,
    })

    const chartConfig = {
        type: 'radar',
        data: chartData,
        options: {
            responsive: false,
            maintainAspectRatio: false,

            borderColor: '#bd3b3b',
            //backgroundColor: '#FFFFFF',

            plugins: {
                legend: {
                    position: 'top',
                    display: false
                },
                title: {
                    display: false,
                    text: 'Chart.js Polar Area Chart With Centered Point Labels'
                }
            },
            scales: {
                r: {
                    grid: {
                        color: '#ef9849'
                    },
                    angleLines: {
                        color: '#f08149'
                    },
                    pointLabels: {
                        display: true,
                        //centerPointLabels: true,
                        padding: 44,
                        font: {
                            size: 16
                        },
                        backdropColor: "#395c78",
                        backdropPadding: "1",
                        color: "#f5e7de"
                    },

                }
            }
        },
    };
    return chartConfig;
}

function createChartOnData(testData) {

// Create a canvas and chart
    const width = 800;
    const height = 800;

    const canvas = createCanvas(width, height);
    const ctx = canvas.getContext('2d');

    const d = prepareData(testData);
    const chartConfig = generateChartData(d);

    new Chart(ctx, chartConfig);

    return  canvas.createPNGStream();
}

module.exports = {createChartOnData}

function test() {
    const stream = createChartOnData(testData);
// Save the chart image as a file
    const fs = require('fs');
    const out = fs.createWriteStream('chart.png');
    stream.pipe(out);
    out.on('finish', () => console.log('The chart image was saved.'));
}