agentscape/io/Histogram.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

import ChartJS from 'chart.js/auto';
export default class Histogram {
    constructor(opts) {
        this.width = opts.width || 400;
        const title = opts.title || 'Histogram';
        const axisLabels = opts.axisLabels || { x: 'Bins', y: 'Frequency' };
        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 defaultChartOptions = {
            type: 'bar',
            data: {
                labels: [],
                datasets: [{
                        label: title,
                        data: [],
                        backgroundColor: 'rgba(54, 162, 235, 0.2)',
                        borderColor: 'rgba(54, 162, 235, 1)',
                        borderWidth: 1
                    }]
            },
            options: {
                scales: {
                    x: {
                        title: {
                            display: true,
                            text: axisLabels.x
                        }
                    },
                    y: {
                        title: {
                            display: true,
                            text: axisLabels.y
                        },
                        beginAtZero: true
                    }
                }
            }
        };
        this.chart = new ChartJS(canvas, defaultChartOptions);
    }
    applyData(data, binSize) {
        const { bins, frequencies } = this.calculateBins(data, binSize);
        this.chart.data.labels = bins;
        this.chart.data.datasets[0].data = frequencies;
        this.chart.update();
    }
    calculateBins(data, binSize) {
        var _a;
        const max = Math.max(...data);
        const min = Math.min(...data);
        // `bins` used as labels for the chart
        const bins = [];
        const frequencies = [];
        // gets the precision of the bin size float
        const precision = ((_a = binSize.toString().split('.')[1]) === null || _a === void 0 ? void 0 : _a.length) || 1;
        for (let start = min; start <= max; start += binSize) {
            bins.push(`${+(start).toFixed(precision)}-${+(start + binSize).toFixed(precision)}`);
            frequencies.push(0);
        }
        data.forEach(value => {
            const binIndex = Math.floor((value - min) / binSize);
            frequencies[binIndex]++;
        });
        return { bins, frequencies };
    }
}
//# sourceMappingURL=Histogram.js.map