import dayjs from 'dayjs';
import { DashboardVisualisationType } from '../../../_dashboards/dashboard-visualisation/types.js';
import DatasetHelper from '../../../../utils/Dashboards/VisualisationDatasetHelper.js';
import { Buckets } from '../buckets/Buckets.js';
import MatrixTimeseriesSchema from './validate.js';
import chartConfig from '../chart-config.js';

/* eslint-disable prefer-destructuring */
class HeatmapChart {
    definition;
    measures;
    responseData = [];
    granularity;
    data = [];
    dayDateFormat = 'DD/MM/YYYY';
    valueKey = '';
    label = '';
    unit;
    bucketsHelper;
    datasets = [];
    config = chartConfig;
    xLabels = [];
    yLabels = [];
    withDefinition = (definition) => {
        this.definition = MatrixTimeseriesSchema.parse(definition);
        this.init();
        return this;
    };
    withData = (responseData) => {
        this.responseData = responseData;
        this.bucketsHelper = new Buckets(this.responseData, this.definition, this.valueKey, true);
        return this;
    };
    withGranularity = (granularity) => {
        this.granularity = granularity;
        return this;
    };
    init = () => {
        this.measures = this.definition.columns.measures;
        this.setLabel();
        this.initUnit();
    };
    initUnit = () => {
        this.unit = this.measures[0].unit ? this.measures[0].unit : undefined;
    };
    setLabel = () => {
        const { id, display } = this.measures[1];
        this.valueKey = id;
        this.label = display || '';
    };
    initTimeseriesData = () => {
        const timeBlockData = DatasetHelper.groupRowsByTimestamp(this.responseData);
        this.data = timeBlockData.map((tsData) => {
            const { raw, rag } = tsData[0][this.valueKey];
            const tsRaw = tsData[0]['ts'].raw;
            const v = Number(raw);
            const r = rag !== undefined ? Number(tsData[0][this.valueKey].rag) : undefined;
            let x = 0;
            let y = 0;
            switch (this.granularity) {
                case 'hourly':
                    break;
                case 'weekly':
                    x = dayjs(tsRaw, this.dayDateFormat).format('ddd');
                    y = dayjs(tsRaw, this.dayDateFormat).week();
                    break;
                case 'daily':
                    x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY');
                    y = dayjs(tsRaw, this.dayDateFormat).format('D');
                    break;
                case 'monthly':
                    {
                        const ts = tsRaw.split(' ');
                        x = ts[1];
                        y = ts[0];
                    }
                    break;
                case 'annually':
                    x = 'year';
                    y = tsRaw;
                    break;
                default:
                    x = dayjs(tsRaw, this.dayDateFormat).format('MMM YY');
                    y = dayjs(tsRaw, this.dayDateFormat).format('D');
                    break;
            }
            return { y, x, v, r };
        });
        this.bucketData();
        this.datasets = [
            {
                label: this.label,
                data: this.data,
            },
        ];
    };
    bucketData = () => {
        this.data = this.data.map((d) => {
            const { v, r } = d;
            const bucketData = this.bucketsHelper.getBucketForValue(v, r);
            return { ...d, c: bucketData.colour };
        });
    };
    setBespokeOptions = () => {
        this.config = {
            ...this.config,
            scales: this.setScales(),
        };
    };
    setScales() {
        this.xLabels = [
            ...new Set(this.datasets[0].data.map((d) => {
                return d.x;
            })),
        ];
        this.yLabels = [
            ...new Set(this.datasets[0].data.map((d) => {
                return d.y;
            })),
        ];
        const grid = {
            display: false,
            drawBorder: false,
        };
        const ticks = {
            padding: 1,
            maxRotation: 0,
            stepSize: 1,
        };
        const offset = true;
        const common = {
            offset,
            ticks,
            grid,
        };
        return {
            y: {
                position: 'left',
                type: 'category',
                ...(this.yLabels && { labels: this.yLabels }),
                ...common,
            },
            x: {
                position: 'top',
                type: 'category',
                ...(this.xLabels && { labels: this.xLabels }),
                ...common,
            },
        };
    }
    getCanvasHeight = () => {
        return this.yLabels.length / 2;
    };
    build = () => {
        this.initTimeseriesData();
        this.bucketData();
        this.setBespokeOptions();
        const height = this.getCanvasHeight();
        return {
            type: DashboardVisualisationType.MATRIX,
            options: {
                unit: this.unit,
                timeseries: true,
                height,
            },
            data: {
                datasets: this.datasets,
                config: this.config,
            },
        };
    };
}

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