@ministryofjustice/hmpps-digital-prison-reporting-frontend/dpr/components/_charts/chart/line/LineChart.js

The Digital Prison Reporting Frontend contains templates and code to help display data effectively in UI applications.

import { DashboardVisualisationType } from '../../../_dashboards/dashboard-visualisation/types.js';
import { Chart } from '../Chart.js';
import LineChartSchemas from './validate.js';

/* eslint-disable prefer-destructuring */
class LineChart extends Chart {
    definition;
    measures;
    keys;
    isList = false;
    withDefinition = (definition) => {
        this.definition = LineChartSchemas.LineSchema.parse(definition);
        this.initFromDefinitionData();
        return this;
    };
    initFromDefinitionData = () => {
        this.measures = this.definition.columns.measures;
        this.keys = this.definition.columns.keys || [];
        this.isList = !!this.measures.find(col => col.axis);
        this.initUnit(this.measures);
    };
    build = () => {
        if (!this.isList) {
            this.createDatasets(this.measures, this.keys);
        }
        else {
            this.createListDatasets(this.measures, this.keys);
        }
        // Augment the datasets with chart specific config
        this.augmentDataset();
        // Set the bespoke chart.js options for the chart
        this.setBespokeOptions();
        return {
            type: DashboardVisualisationType.LINE,
            options: {
                unit: this.unit,
            },
            data: {
                labels: this.labels,
                datasets: this.datasets,
                config: this.config,
            },
        };
    };
    augmentDataset = (datasets) => {
        const ds = datasets || this.datasets;
        this.datasets = ds.map(set => {
            return {
                ...set,
                pointStyle: 'circle',
                pointRadius: 4,
                pointHoverRadius: 10,
                pointHitRadius: 20,
                datalabels: {
                    display: false,
                },
            };
        });
        return this.datasets;
    };
    setBespokeOptions = () => {
        this.setScales();
        this.config = {
            ...this.config,
            scales: {
                y: {
                    ...this.config.scales.y,
                    min: 0,
                    ticks: {
                        fontSize: 12,
                    },
                },
                x: {
                    ...this.config.scales.x,
                    ticks: {
                        fontSize: 12,
                    },
                },
            },
        };
        return this.config;
    };
}

export { LineChart, LineChart as default };
//# sourceMappingURL=LineChart.js.map