@mxtommy/kip 3.10.0 → 3.10.3

package/dist/out-tsc/src/app/widgets/widget-data-chart/widget-data-chart.component.js

@@ -0,0 +1,678 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, ElementRef, viewChild, inject, effect, NgZone } from '@angular/core';
+import { BaseWidgetComponent } from '../../core/utils/base-widget.component';
+import { WidgetHostComponent } from '../../core/components/widget-host/widget-host.component';
+import { DatasetService } from '../../core/services/data-set.service';
+import { CanvasService } from '../../core/services/canvas.service';
+import { Chart, TimeScale, LinearScale, LineController, PointElement, LineElement, Filler, Title, SubTitle } from 'chart.js';
+import annotationPlugin from 'chartjs-plugin-annotation';
+import 'chartjs-adapter-date-fns';
+Chart.register(annotationPlugin, TimeScale, LinearScale, LineController, PointElement, LineElement, Filler, Title, SubTitle);
+let WidgetDataChartComponent = class WidgetDataChartComponent extends BaseWidgetComponent {
+    dsService = inject(DatasetService);
+    ngZone = inject(NgZone);
+    canvasService = inject(CanvasService);
+    widgetDataChart = viewChild('widgetDataChart', { read: ElementRef });
+    lineChartData = {
+        datasets: []
+    };
+    lineChartOptions = {
+        parsing: false,
+        datasets: {
+            line: {
+                pointRadius: 0, // disable for all `'line'` datasets
+                pointHoverRadius: 0, // disable for all `'line'` datasets
+                tension: 0.4,
+            }
+        },
+        animations: {
+            tension: {
+                easing: "easeInOutCubic"
+            }
+        }
+    };
+    lineChartType = 'line';
+    chart;
+    dsServiceSub = null;
+    datasetConfig = null;
+    dataSourceInfo = null;
+    constructor() {
+        super();
+        this.defaultConfig = {
+            displayName: 'Chart Label',
+            filterSelfPaths: true,
+            convertUnitTo: "unitless",
+            datasetUUID: null,
+            inverseYAxis: false,
+            datasetAverageArray: 'sma',
+            showAverageData: true,
+            trackAgainstAverage: false,
+            showDatasetMinimumValueLine: false,
+            showDatasetMaximumValueLine: false,
+            showDatasetAverageValueLine: true,
+            showDatasetAngleAverageValueLine: false,
+            showLabel: false,
+            showTimeScale: false,
+            startScaleAtZero: false,
+            verticalChart: false,
+            showYScale: false,
+            yScaleSuggestedMin: null,
+            yScaleSuggestedMax: null,
+            enableMinMaxScaleLimit: false,
+            yScaleMin: null,
+            yScaleMax: null,
+            numDecimal: 1,
+            color: 'contrast',
+        };
+        effect(() => {
+            if (this.theme()) {
+                if (this.datasetConfig) {
+                    this.setChartOptions();
+                    this.setDatasetsColors();
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this.validateConfig();
+    }
+    ngAfterViewInit() {
+        this.startWidget();
+    }
+    startWidget() {
+        this.datasetConfig = this.dsService.getDatasetConfig(this.widgetProperties.config.datasetUUID);
+        this.dataSourceInfo = this.dsService.getDataSourceInfo(this.widgetProperties.config.datasetUUID);
+        if (this.datasetConfig) {
+            this.createDatasets();
+            this.setChartOptions();
+            if (!this.chart) {
+                this.chart = new Chart(this.widgetDataChart().nativeElement.getContext('2d'), {
+                    type: this.lineChartType,
+                    data: this.lineChartData,
+                    options: this.lineChartOptions
+                });
+            }
+            else {
+                this.chart.update();
+            }
+            this.startStreaming();
+        }
+    }
+    updateConfig(config) {
+        this.widgetProperties.config = config;
+        this.startWidget();
+    }
+    setChartOptions() {
+        this.lineChartOptions.maintainAspectRatio = false;
+        this.lineChartOptions.animation = false;
+        this.lineChartOptions.indexAxis = this.widgetProperties.config.verticalChart ? 'y' : 'x';
+        if (this.widgetProperties.config.verticalChart) {
+            this.lineChartOptions.scales = {
+                y: {
+                    type: "time",
+                    display: this.widgetProperties.config.showTimeScale,
+                    position: this.widgetProperties.config.verticalChart ? "right" : "left",
+                    suggestedMin: "",
+                    suggestedMax: "",
+                    title: {
+                        display: true,
+                        text: `Last ${this.datasetConfig.period} ${this.datasetConfig.timeScaleFormat}`,
+                        align: "center"
+                    },
+                    time: {
+                        unit: this.datasetConfig.timeScaleFormat,
+                        minUnit: "second",
+                        round: "second",
+                        displayFormats: {
+                            // eslint-disable-next-line no-useless-escape
+                            hour: `k:mm\''`,
+                            // eslint-disable-next-line no-useless-escape
+                            minute: `mm\''`,
+                            second: `ss"`,
+                            millisecond: "SSS"
+                        },
+                    },
+                    ticks: {
+                        autoSkip: false,
+                        color: this.getThemeColors().averageChartLine,
+                        major: {
+                            enabled: true
+                        }
+                    },
+                    grid: {
+                        display: true,
+                        color: this.theme().contrastDimmer
+                    }
+                },
+                x: {
+                    type: "linear",
+                    display: this.widgetProperties.config.showYScale,
+                    position: this.widgetProperties.config.verticalChart ? "top" : "bottom",
+                    suggestedMin: this.widgetProperties.config.enableMinMaxScaleLimit ? null : this.widgetProperties.config.yScaleSuggestedMin,
+                    suggestedMax: this.widgetProperties.config.enableMinMaxScaleLimit ? null : this.widgetProperties.config.yScaleSuggestedMax,
+                    min: this.widgetProperties.config.enableMinMaxScaleLimit ? this.widgetProperties.config.yScaleMin : null,
+                    max: this.widgetProperties.config.enableMinMaxScaleLimit ? this.widgetProperties.config.yScaleMax : null,
+                    beginAtZero: this.widgetProperties.config.startScaleAtZero,
+                    reverse: this.widgetProperties.config.inverseYAxis,
+                    title: {
+                        display: false,
+                        text: "Value Axis",
+                        align: "center"
+                    },
+                    ticks: {
+                        maxTicksLimit: 8,
+                        precision: this.widgetProperties.config.numDecimal,
+                        color: this.getThemeColors().averageChartLine,
+                        major: {
+                            enabled: true,
+                        }
+                    },
+                    grid: {
+                        display: true,
+                        color: this.theme().contrastDimmer,
+                    }
+                }
+            };
+        }
+        else {
+            this.lineChartOptions.scales = {
+                x: {
+                    type: "time",
+                    display: this.widgetProperties.config.showTimeScale,
+                    title: {
+                        display: true,
+                        text: `Last ${this.datasetConfig.period} ${this.datasetConfig.timeScaleFormat}`,
+                        align: "center"
+                    },
+                    time: {
+                        unit: this.datasetConfig.timeScaleFormat,
+                        minUnit: "second",
+                        round: "second",
+                        displayFormats: {
+                            // eslint-disable-next-line no-useless-escape
+                            hour: `k:mm\''`,
+                            // eslint-disable-next-line no-useless-escape
+                            minute: `mm\''`,
+                            second: `ss"`,
+                            millisecond: "SSS"
+                        },
+                    },
+                    ticks: {
+                        autoSkip: false,
+                        color: this.getThemeColors().averageChartLine,
+                        major: {
+                            enabled: true
+                        }
+                    },
+                    grid: {
+                        display: true,
+                        color: this.theme().contrastDimmer
+                    }
+                },
+                y: {
+                    display: this.widgetProperties.config.showYScale,
+                    position: "right",
+                    suggestedMin: this.widgetProperties.config.enableMinMaxScaleLimit ? null : this.widgetProperties.config.yScaleSuggestedMin,
+                    suggestedMax: this.widgetProperties.config.enableMinMaxScaleLimit ? null : this.widgetProperties.config.yScaleSuggestedMax,
+                    min: this.widgetProperties.config.enableMinMaxScaleLimit ? this.widgetProperties.config.yScaleMin : null,
+                    max: this.widgetProperties.config.enableMinMaxScaleLimit ? this.widgetProperties.config.yScaleMax : null,
+                    beginAtZero: this.widgetProperties.config.startScaleAtZero,
+                    reverse: this.widgetProperties.config.inverseYAxis,
+                    title: {
+                        display: false,
+                        text: "Value Axis",
+                        align: "center"
+                    },
+                    ticks: {
+                        maxTicksLimit: 8,
+                        precision: this.widgetProperties.config.numDecimal,
+                        color: this.getThemeColors().averageChartLine,
+                        major: {
+                            enabled: true,
+                        }
+                    },
+                    grid: {
+                        display: true,
+                        color: this.theme().contrastDimmer,
+                    }
+                }
+            };
+        }
+        this.lineChartOptions.plugins = {
+            title: {
+                display: true,
+                align: "end",
+                padding: {
+                    top: 3,
+                    bottom: 0
+                },
+                text: "",
+                font: {
+                    size: 32,
+                },
+                color: this.getThemeColors().chartValue
+            },
+            subtitle: {
+                display: this.widgetProperties.config.showLabel,
+                align: "start",
+                padding: {
+                    top: -35,
+                    bottom: 20
+                },
+                text: `  ${this.widgetProperties.config.displayName}`,
+                font: {
+                    size: 22,
+                },
+                color: this.getThemeColors().chartLabel
+            },
+            annotation: {
+                annotations: {
+                    minimumLine: {
+                        type: 'line',
+                        scaleID: this.widgetProperties.config.verticalChart ? 'x' : 'y',
+                        display: this.widgetProperties.config.showDatasetMinimumValueLine,
+                        value: null,
+                        drawTime: 'afterDatasetsDraw',
+                        label: {
+                            display: true,
+                            position: "start",
+                            yAdjust: 12,
+                            padding: 4,
+                            color: this.getThemeColors().averageChartLine,
+                            backgroundColor: 'rgba(63,63,63,0.0)'
+                        }
+                    },
+                    maximumLine: {
+                        type: 'line',
+                        scaleID: this.widgetProperties.config.verticalChart ? 'x' : 'y',
+                        display: this.widgetProperties.config.showDatasetMaximumValueLine,
+                        value: null,
+                        drawTime: 'afterDatasetsDraw',
+                        label: {
+                            display: true,
+                            position: "start",
+                            yAdjust: -12,
+                            padding: 4,
+                            color: this.getThemeColors().averageChartLine,
+                            backgroundColor: 'rgba(63,63,63,0.0)'
+                        }
+                    },
+                    averageLine: {
+                        type: 'line',
+                        scaleID: this.widgetProperties.config.verticalChart ? 'x' : 'y',
+                        display: this.widgetProperties.config.showDatasetAverageValueLine,
+                        value: null,
+                        borderDash: [6, 6],
+                        borderColor: this.getThemeColors().averageChartLine,
+                        drawTime: 'afterDatasetsDraw',
+                        label: {
+                            display: true,
+                            position: "start",
+                            padding: 4,
+                            color: this.getThemeColors().chartValue,
+                            backgroundColor: 'rgba(63,63,63,0.7)'
+                        }
+                    }
+                }
+            },
+            legend: {
+                display: false
+            }
+        };
+    }
+    createDatasets() {
+        let valueFillDirection;
+        let averageFillDirection;
+        if (this.widgetProperties.config.inverseYAxis && this.widgetProperties.config.trackAgainstAverage) {
+            valueFillDirection = "start";
+            averageFillDirection = false;
+        }
+        else if (this.widgetProperties.config.inverseYAxis && !this.widgetProperties.config.trackAgainstAverage) {
+            valueFillDirection = false;
+            averageFillDirection = "start";
+        }
+        else if (!this.widgetProperties.config.inverseYAxis && this.widgetProperties.config.trackAgainstAverage) {
+            valueFillDirection = true;
+            averageFillDirection = false;
+        }
+        else {
+            valueFillDirection = false;
+            averageFillDirection = true;
+        }
+        this.lineChartData.datasets = [];
+        this.lineChartData.datasets.push({
+            label: 'Value',
+            data: [],
+            order: this.widgetProperties.config.trackAgainstAverage ? 1 : 0,
+            parsing: false,
+            tension: 0,
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            pointHitRadius: 0,
+            borderWidth: this.widgetProperties.config.trackAgainstAverage ? 0 : 3,
+            fill: valueFillDirection,
+        });
+        this.lineChartData.datasets.push({
+            label: 'Average',
+            data: [],
+            order: this.widgetProperties.config.trackAgainstAverage ? 0 : 1,
+            parsing: false,
+            tension: 0.4,
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            pointHitRadius: 0,
+            borderWidth: this.widgetProperties.config.trackAgainstAverage ? 3 : 0,
+            fill: averageFillDirection,
+        });
+        this.setDatasetsColors();
+    }
+    setDatasetsColors() {
+        this.lineChartData.datasets.forEach((dataset) => {
+            if (dataset.label === 'Value') {
+                dataset.borderColor = this.getThemeColors().valueLine;
+                dataset.backgroundColor = this.getThemeColors().valueFill;
+            }
+            else if (dataset.label === 'Average') {
+                dataset.borderColor = this.getThemeColors().averageLine;
+                dataset.backgroundColor = this.getThemeColors().averageFill;
+            }
+        });
+    }
+    getThemeColors() {
+        const widgetColor = this.widgetProperties.config.color;
+        const colors = {
+            valueLine: null,
+            valueFill: null,
+            averageLine: null,
+            averageFill: null,
+            averageChartLine: null,
+            chartLabel: null,
+            chartValue: null
+        };
+        switch (widgetColor) {
+            case "contrast":
+                if (this.widgetProperties.config.trackAgainstAverage) {
+                    colors.valueLine = this.theme().contrastDimmer;
+                    colors.valueFill = this.theme().contrastDimmer;
+                    colors.averageLine = this.theme().contrast;
+                    colors.averageFill = this.theme().contrast;
+                    colors.chartValue = colors.averageLine;
+                }
+                else {
+                    colors.valueLine = this.theme().contrast;
+                    colors.valueFill = this.theme().contrast;
+                    colors.averageLine = this.theme().contrastDimmer;
+                    colors.averageFill = this.theme().contrastDimmer;
+                    colors.chartValue = this.theme().contrast;
+                }
+                colors.averageChartLine = this.theme().contrastDim;
+                colors.chartLabel = this.theme().contrastDim;
+                break;
+            case "blue":
+                if (this.widgetProperties.config.trackAgainstAverage) {
+                    colors.valueLine = this.theme().blueDimmer;
+                    colors.valueFill = this.theme().blueDimmer;
+                    colors.averageLine = this.theme().blue;
+                    colors.averageFill = this.theme().blue;
+                    colors.chartValue = colors.averageLine;
+                }
+                else {
+                    colors.valueLine = this.theme().blue;
+                    colors.valueFill = this.theme().blue;
+                    colors.averageLine = this.theme().blueDimmer;
+                    colors.averageFill = this.theme().blueDimmer;
+                    colors.chartValue = colors.valueFill;
+                }
+                colors.averageChartLine = this.theme().blueDim;
+                colors.chartLabel = this.theme().contrastDim;
+                break;
+            case "green":
+                if (this.widgetProperties.config.trackAgainstAverage) {
+                    colors.valueLine = this.theme().greenDimmer;
+                    colors.valueFill = this.theme().greenDimmer;
+                    colors.averageLine = this.theme().green;
+                    colors.averageFill = this.theme().green;
+                    colors.chartValue = colors.averageLine;
+                }
+                else {
+                    colors.valueLine = this.theme().green;
+                    colors.valueFill = this.theme().green;
+                    colors.averageLine = this.theme().greenDimmer;
+                    colors.averageFill = this.theme().greenDimmer;
+                    colors.chartValue = colors.valueFill;
+                }
+                colors.averageChartLine = this.theme().greenDim;
+                colors.chartLabel = this.theme().contrastDim;
+                break;
+            case "pink":
+                if (this.widgetProperties.config.trackAgainstAverage) {
+                    colors.valueLine = this.theme().pinkDimmer;
+                    colors.valueFill = this.theme().pinkDimmer;
+                    colors.averageLine = this.theme().pink;
+                    colors.averageFill = this.theme().pink;
+                    colors.chartValue = colors.averageLine;
+                }
+                else {
+                    colors.valueLine = this.theme().pink;
+                    colors.valueFill = this.theme().pink;
+                    colors.averageLine = this.theme().pinkDimmer;
+                    colors.averageFill = this.theme().pinkDimmer;
+                    colors.chartValue = colors.valueFill;
+                }
+                colors.averageChartLine = this.theme().pinkDim;
+                colors.chartLabel = this.theme().contrastDim;
+                break;
+            case "orange":
+                if (this.widgetProperties.config.trackAgainstAverage) {
+                    colors.valueLine = this.theme().orangeDimmer;
+                    colors.valueFill = this.theme().orangeDimmer;
+                    colors.averageLine = this.theme().orange;
+                    colors.averageFill = this.theme().orange;
+                    colors.chartValue = colors.averageLine;
+                }
+                else {
+                    colors.valueLine = this.theme().orange;
+                    colors.valueFill = this.theme().orange;
+                    colors.averageLine = this.theme().orangeDimmer;
+                    colors.averageFill = this.theme().orangeDimmer;
+                    colors.chartValue = colors.valueFill;
+                }
+                colors.averageChartLine = this.theme().orangeDim;
+                colors.chartLabel = this.theme().contrastDim;
+                break;
+            case "purple":
+                if (this.widgetProperties.config.trackAgainstAverage) {
+                    colors.valueLine = this.theme().purpleDimmer;
+                    colors.valueFill = this.theme().purpleDimmer;
+                    colors.averageLine = this.theme().purple;
+                    colors.averageFill = this.theme().purple;
+                    colors.chartValue = colors.averageLine;
+                }
+                else {
+                    colors.valueLine = this.theme().purple;
+                    colors.valueFill = this.theme().purple;
+                    colors.averageLine = this.theme().purpleDimmer;
+                    colors.averageFill = this.theme().purpleDimmer;
+                    colors.chartValue = colors.valueFill;
+                }
+                colors.averageChartLine = this.theme().purpleDim;
+                colors.chartLabel = this.theme().contrastDim;
+                break;
+            case "grey":
+                if (this.widgetProperties.config.trackAgainstAverage) {
+                    colors.valueLine = this.theme().greyDimmer;
+                    colors.valueFill = this.theme().greyDimmer;
+                    colors.averageLine = this.theme().grey;
+                    colors.averageFill = this.theme().grey;
+                    colors.chartValue = colors.averageLine;
+                }
+                else {
+                    colors.valueLine = this.theme().grey;
+                    colors.valueFill = this.theme().grey;
+                    colors.averageLine = this.theme().greyDimmer;
+                    colors.averageFill = this.theme().greyDimmer;
+                    colors.chartValue = colors.valueFill;
+                }
+                colors.averageChartLine = this.theme().greyDim;
+                colors.chartLabel = this.theme().contrastDim;
+                break;
+            case "yellow":
+                if (this.widgetProperties.config.trackAgainstAverage) {
+                    colors.valueLine = this.theme().yellowDimmer;
+                    colors.valueFill = this.theme().yellowDimmer;
+                    colors.averageLine = this.theme().yellow;
+                    colors.averageFill = this.theme().yellow;
+                    colors.chartValue = colors.averageLine;
+                }
+                else {
+                    colors.valueLine = this.theme().yellow;
+                    colors.valueFill = this.theme().yellow;
+                    colors.averageLine = this.theme().yellowDimmer;
+                    colors.averageFill = this.theme().yellowDimmer;
+                    colors.chartValue = colors.valueFill;
+                }
+                colors.averageChartLine = this.theme().yellowDim;
+                colors.chartLabel = this.theme().contrastDim;
+                break;
+        }
+        return colors;
+    }
+    getUnitsLabel() {
+        let label = null;
+        switch (this.widgetProperties.config.convertUnitTo) {
+            case "percent":
+            case "percentraw":
+                label = "%";
+                break;
+            case "latitudeMin":
+                label = "latitude in minutes";
+                break;
+            case "latitudeSec":
+                label = "latitude in secondes";
+                break;
+            case "longitudeMin":
+                label = "longitude in minutes";
+                break;
+            case "longitudeSec":
+                label = "longitude in secondes";
+                break;
+            default:
+                label = this.widgetProperties.config.convertUnitTo;
+                break;
+        }
+        return label;
+    }
+    startStreaming() {
+        this.dsServiceSub?.unsubscribe();
+        const batchThenLive$ = this.dsService.getDatasetBatchThenLiveObservable(this.widgetProperties.config.datasetUUID);
+        this.dsServiceSub = batchThenLive$?.subscribe(dsPointOrBatch => {
+            if (Array.isArray(dsPointOrBatch)) {
+                // Initial batch: fill the chart with the last N points
+                const valueRows = this.transformDatasetRows(dsPointOrBatch, 0);
+                this.chart.data.datasets[0].data.push(...valueRows);
+                if (this.widgetProperties.config.showAverageData) {
+                    const avgRows = this.transformDatasetRows(dsPointOrBatch, this.widgetProperties.config.datasetAverageArray);
+                    this.chart.data.datasets[1].data.push(...avgRows);
+                }
+            }
+            else {
+                // Live: handle new single datapoint
+                const valueRow = this.transformDatasetRows([dsPointOrBatch], 0)[0];
+                this.chart.data.datasets[0].data.push(valueRow);
+                if (this.chart.data.datasets[0].data.length > this.dataSourceInfo.maxDataPoints) {
+                    this.chart.data.datasets[0].data.shift();
+                }
+                if (this.widgetProperties.config.showAverageData) {
+                    const avgRow = this.transformDatasetRows([dsPointOrBatch], this.widgetProperties.config.datasetAverageArray)[0];
+                    this.chart.data.datasets[1].data.push(avgRow);
+                    if (this.chart.data.datasets[1].data.length > this.dataSourceInfo.maxDataPoints) {
+                        this.chart.data.datasets[1].data.shift();
+                    }
+                }
+                // ... (rest of your live update logic for title, annotation, etc.)
+                const trackValue = this.widgetProperties.config.trackAgainstAverage ? dsPointOrBatch.data.sma : dsPointOrBatch.data.value;
+                this.chart.options.plugins.title.text = `${this.unitsService.convertToUnit(this.widgetProperties.config.convertUnitTo, trackValue).toFixed(this.widgetProperties.config.numDecimal)} ${this.getUnitsLabel()} `;
+                const lastAverage = this.unitsService.convertToUnit(this.widgetProperties.config.convertUnitTo, dsPointOrBatch.data.lastAverage);
+                const lastMinimum = this.unitsService.convertToUnit(this.widgetProperties.config.convertUnitTo, dsPointOrBatch.data.lastMinimum);
+                const lastMaximum = this.unitsService.convertToUnit(this.widgetProperties.config.convertUnitTo, dsPointOrBatch.data.lastMaximum);
+                if (this.chart.options.plugins.annotation.annotations.averageLine.value != lastAverage) {
+                    this.chart.options.plugins.annotation.annotations.averageLine.value = lastAverage;
+                    this.chart.options.plugins.annotation.annotations.averageLine.label.content = `${lastAverage.toFixed(this.widgetProperties.config.numDecimal)}`;
+                }
+                if (this.chart.options.plugins.annotation.annotations.minimumLine.value != lastMinimum) {
+                    this.chart.options.plugins.annotation.annotations.minimumLine.value = lastMinimum;
+                    this.chart.options.plugins.annotation.annotations.minimumLine.label.content = `${lastMinimum.toFixed(this.widgetProperties.config.numDecimal)}`;
+                }
+                if (this.chart.options.plugins.annotation.annotations.maximumLine.value != lastMaximum) {
+                    this.chart.options.plugins.annotation.annotations.maximumLine.value = lastMaximum;
+                    this.chart.options.plugins.annotation.annotations.maximumLine.label.content = `${lastMaximum.toFixed(this.widgetProperties.config.numDecimal)}`;
+                }
+            }
+            this.ngZone.runOutsideAngular(() => {
+                this.chart?.update('quiet');
+            });
+        });
+    }
+    transformDatasetRows(rows, datasetType) {
+        const convert = (v) => this.unitsService.convertToUnit(this.widgetProperties.config.convertUnitTo, v);
+        const verticalChart = this.widgetProperties.config.verticalChart;
+        const avgKey = this.widgetProperties.config.datasetAverageArray;
+        return rows.map(row => {
+            if (verticalChart) {
+                if (datasetType === 0) {
+                    return { x: convert(row.data.value), y: row.timestamp };
+                }
+                else {
+                    const avgMap = {
+                        sma: row.data.sma,
+                        ema: row.data.ema,
+                        dema: row.data.doubleEma,
+                        avg: row.data.lastAverage
+                    };
+                    return { x: convert(avgMap[avgKey]), y: row.timestamp };
+                }
+            }
+            else {
+                if (datasetType === 0) {
+                    return { x: row.timestamp, y: convert(row.data.value) };
+                }
+                else {
+                    const avgMap = {
+                        sma: row.data.sma,
+                        ema: row.data.ema,
+                        dema: row.data.doubleEma,
+                        avg: row.data.lastAverage
+                    };
+                    return { x: row.timestamp, y: convert(avgMap[avgKey]) };
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroyDataStreams();
+        this.dsServiceSub?.unsubscribe();
+        // we need to destroy when moving Pages to remove Chart Objects
+        this.chart?.destroy();
+        const canvas = this.widgetDataChart?.()?.nativeElement;
+        this.canvasService.releaseCanvas(canvas, { clear: true, removeFromDom: true });
+    }
+};
+WidgetDataChartComponent = __decorate([
+    Component({
+        selector: 'widget-data-chart',
+        imports: [WidgetHostComponent],
+        templateUrl: './widget-data-chart.component.html',
+        styleUrl: './widget-data-chart.component.scss'
+    }),
+    __metadata("design:paramtypes", [])
+], WidgetDataChartComponent);
+export { WidgetDataChartComponent };
+//# sourceMappingURL=widget-data-chart.component.js.map