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

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

import logger from '../../../utils/logger.js';
import DatasetHelper, { getTimestampMeasure, getDateValue } from '../../../utils/Dashboards/VisualisationDatasetHelper.js';
import ChartColoursHelper from './ChartColours.js';
import chartConfig from './chart-config.js';
import ChartLabelsHelper from './ChartLabels.js';

class TimeseriesChart {
    id;
    labels = [];
    datasets = [];
    unit;
    responseData = [];
    measures = [];
    keys = [];
    timeBlockData = [];
    groupKey;
    datasetCount = 0;
    hexColours = [];
    config = chartConfig;
    partialDate;
    chartColoursHelper;
    chartLabelsHelper;
    withData = (responseData) => {
        this.responseData = responseData;
        this.initHelpers();
        this.initFromData();
        return this;
    };
    initHelpers = () => {
        this.chartColoursHelper = new ChartColoursHelper();
        this.chartLabelsHelper = new ChartLabelsHelper();
    };
    initFromDefinition = (definition) => {
        logger.debug('Building Dashboard Visualisation: ', JSON.stringify(definition));
        this.id = definition.id;
        this.measures = definition.columns.measures;
        this.keys = definition.columns.keys || [];
        this.unit = this.measures.find(m => m.unit)?.unit;
    };
    withPartialDate = (partialDate) => {
        this.partialDate = partialDate;
        return this;
    };
    initFromData = () => {
        this.groupKey = DatasetHelper.getGroupKey(this.responseData, this.keys);
        const dateMeasure = DatasetHelper.getTimestampMeasure(this.measures);
        if (!dateMeasure) {
            logger.debug(this.id, JSON.stringify(this.measures));
            throw new Error(`${this.id}: No timestamp field in definition`);
        }
        this.timeBlockData = DatasetHelper.groupRowsByTimestamp(this.responseData, dateMeasure);
        this.labels = this.getLabels();
        this.datasetCount = this.timeBlockData[0]?.length;
    };
    buildDatasets = () => {
        this.chartColoursHelper = new ChartColoursHelper();
        for (let index = 0; index < this.datasetCount; index += 1) {
            const data = this.timeBlockData.map(timeperiod => {
                const valueId = this.measures[1]?.id;
                const value = timeperiod[index]?.[valueId]?.raw;
                if (value == null || valueId == null) {
                    return 0;
                }
                const numericValue = Number(value);
                return Number.isNaN(numericValue) ? 0 : numericValue;
            });
            const total = data.reduce((a, c) => a + c, 0);
            const label = this.chartLabelsHelper.getDatasetLabel(this.keys, this.timeBlockData[0][index]);
            this.datasets.push({
                data,
                label,
                total,
            });
        }
    };
    getLabels = () => {
        return this.timeBlockData
            .map((data) => {
            const dateColumn = getTimestampMeasure(this.measures);
            const dateData = getDateValue(data, dateColumn);
            if (!dateData)
                return undefined;
            return dateData.value;
        })
            .filter((v) => Boolean(v));
    };
}

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