agentscape/io/ScatterPlot.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 an X-Y scatter plot.
 */
export default class ScatterPlot {
    constructor(opts) {
        var _a, _b, _c;
        const axisLabels = (_a = opts.axisLabels) !== null && _a !== void 0 ? _a : { x: 'time', y: 'Y' };
        const title = (_b = opts.title) !== null && _b !== void 0 ? _b : 'Scatter Plot';
        this.width = (_c = opts.width) !== null && _c !== void 0 ? _c : 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 {
                label: dataset.label,
                data: [],
                backgroundColor: 'rgba(54, 162, 235, 0.2)',
                borderColor,
                borderWidth: 1
            };
        });
        const chartOptions = {
            type: 'scatter',
            data: {
                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 an array of data point arrays to the chart.
     *
     * The ith array of points corresponds to the ith dataset
     * defined for the chart.
     */
    pushData(data) {
        // this.chart.data.datasets[0].data.push(...data)
        data.forEach((data, index) => {
            this.chart.data.datasets[index].data.push(...data);
        });
        this.chart.update();
    }
}
//# sourceMappingURL=ScatterPlot.js.map