agentscape/io/TimeSeries.js

Agentscape is a library for creating agent-based simulations. It provides a simple API for defining agents and their behavior, and for defining the environment in which the agents interact. Agentscape is designed to be flexible and extensible, allowing

/* eslint-disable @typescript-eslint/no-explicit-any */
import ChartJS from 'chart.js/auto';
import { Color } from '../numbers';
/**
 * Creates a time series chart.
 * The x-axis is time and the y-axis is a number.
*/
export default class TimeSeries {
    constructor(opts) {
        var _a, _b, _c, _d;
        const axisLabels = (_a = opts.axisLabels) !== null && _a !== void 0 ? _a : { x: 'time', y: 'Y' };
        const title = (_b = opts.title) !== null && _b !== void 0 ? _b : 'Time Series';
        this.maxDataSize = (_c = opts.maxDataSize) !== null && _c !== void 0 ? _c : Infinity;
        this.width = (_d = opts.width) !== null && _d !== void 0 ? _d : 400;
        const canvas = document.createElement('canvas');
        const draggable = document.createElement('drag-pane');
        draggable.setAttribute('heading', title);
        draggable.setAttribute('key', title);
        draggable.appendChild(canvas);
        opts.root.appendChild(draggable);
        canvas.width = this.width;
        const datasets = opts.datasets.map((dataset) => {
            var _a, _b;
            const borderColor = (_b = (_a = dataset.color) === null || _a === void 0 ? void 0 : _a.toRGB()) !== null && _b !== void 0 ? _b : Color.fromName('blue').toRGB();
            return {
                type: 'line',
                label: dataset.label,
                data: [],
                fill: false,
                borderColor,
                tension: 0.1
            };
        });
        const chartOptions = {
            type: 'line',
            data: {
                labels: [],
                datasets
            },
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: axisLabels.x
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: axisLabels.y
                        },
                        beginAtZero: true
                    }
                }
            }
        };
        this.chart = new ChartJS(canvas, chartOptions);
    }
    /**
     * Pushes data to the chart.
     * The data should be an array of numbers, where each array corresponds to a dataset
     * in the order they were added.
     */
    pushData(data) {
        let didShift = false;
        this.chart.data.datasets.forEach(dataset => {
            if (dataset.data.length > this.maxDataSize) {
                dataset.data.shift();
                didShift = true;
            }
        });
        if (didShift) {
            this.chart.data.labels.shift();
        }
        this.chart.data.datasets.forEach((dataset, i) => {
            dataset.data.push(data[i]);
        });
        this.chart.data.labels.push('');
        this.chart.update();
    }
}
//# sourceMappingURL=TimeSeries.js.map