@mxtommy/kip 3.10.0 → 3.10.3

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

@@ -0,0 +1,1067 @@
+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 'chartjs-adapter-date-fns';
+Chart.register(TimeScale, LinearScale, LineController, PointElement, LineElement, Filler, Title, SubTitle);
+let WidgetWindTrendsChartComponent = class WidgetWindTrendsChartComponent extends BaseWidgetComponent {
+    ngZone = inject(NgZone);
+    _dataset = inject(DatasetService);
+    canvasService = inject(CanvasService);
+    widgetDataChart = viewChild('widgetDataChart', { read: ElementRef });
+    lineChartData = {
+        datasets: []
+    };
+    lineChartOptions = {
+        parsing: false,
+        datasets: {
+            line: {
+                pointRadius: 0,
+                pointHoverRadius: 0,
+                tension: 0.3,
+            }
+        },
+        animations: {
+            tension: {
+                easing: "easeInOutCubic"
+            }
+        }
+    };
+    lineChartType = 'line';
+    chart;
+    _dsDirectionSub = null;
+    _dsSpeedSub = null;
+    datasetConfig = null;
+    dataSourceInfo = null;
+    xCenter = null;
+    xStep = null;
+    xCenterSpeed = null;
+    xStepSpeed = null;
+    // Visual constants
+    CENTER_LINE_WIDTH = 4;
+    GRID_LINE_WIDTH = 1;
+    EDGE_EXTEND_UP_PX = 42; // extension height above top scale
+    EDGE_SPEED_LABEL_OFFSET = 5; // px left shift for rightmost speed label
+    EDGE_DIR_LABEL_OFFSET = 5; // px right shift for leftmost direction label
+    TICK_LABEL_FONT_SIZE = 20;
+    CENTER_LABEL_FONT_SIZE = 22;
+    SPEED_VALUE_FONT_SIZE = 62;
+    TOP_VALUE_Y_OFFSET = 62; // px above area.top for big top values
+    TOP_UNIT_Y_OFFSET = 51; // px above area.top for units
+    UNIT_FONT_SIZE = 28;
+    UNIT_PADDING = 8; // px between speed value and 'kts'
+    // Helper: robust near-equality to avoid suppressing non-target ticks
+    nearlyEqual(a, b, eps = 1e-6) {
+        if (!Number.isFinite(a) || !Number.isFinite(b))
+            return false;
+        const scale = Math.max(1, Math.max(Math.abs(a), Math.abs(b)));
+        return Math.abs(a - b) <= eps * scale;
+    }
+    // Helper: resolve tick color from scale ticks.color (string or function)
+    resolveTickColor(chart, scale, tickValue) {
+        const ticksOpt = scale.options.ticks;
+        const col = ticksOpt?.color;
+        if (typeof col === 'function') {
+            const resolved = col({ chart, scale, tick: { value: tickValue } });
+            return resolved ?? Chart.defaults.color;
+        }
+        return typeof col === 'string' ? col : Chart.defaults.color;
+    }
+    // Helper: y position for top scale labels relative to an axis scale
+    axisTopLabelY(scale) {
+        const pos = scale.options?.position;
+        return pos === 'top' ? (scale.top + 4) : (scale.bottom + 2);
+    }
+    // Paint background under grid lines (chartArea only) so it appears beneath grids
+    gridBackgroundPlugin = {
+        id: 'xSpeedGridBackground',
+        beforeDraw: (chart) => {
+            const area = chart.chartArea;
+            if (!area)
+                return;
+            const ctx = chart.ctx;
+            const theme = this.theme();
+            ctx.save();
+            ctx.globalCompositeOperation = 'destination-over';
+            ctx.fillStyle = theme.background;
+            // Fill exactly the plotting area where grid lines are drawn
+            ctx.fillRect(area.left, area.top, area.width / 2, area.height);
+            ctx.restore();
+        }
+    };
+    centerTickPlugin = {
+        id: 'centerTickStyle',
+        afterDraw: (chart) => {
+            const ctx = chart.ctx;
+            const area = chart.chartArea;
+            const theme = this.theme();
+            const chartColors = this.getThemeColors();
+            const def = Chart.defaults.font;
+            const scaleMap = chart.scales;
+            const optScales = chart.options?.scales;
+            // Loading overlay flag; do not skip drawings so all lines are visible on load
+            const dirVals = chart.data?.datasets?.[0]?.data;
+            const spdVals = chart.data?.datasets?.[5]?.data;
+            const ready = (dirVals?.length ?? 0) >= 2 && (spdVals?.length ?? 0) >= 2;
+            const drawForAxis = (axisKey, format) => {
+                const scale = scaleMap?.[axisKey];
+                const scales = optScales;
+                if (!scale)
+                    return;
+                // Use configured min/max if present, else fall back to built scale bounds
+                const sAny = scale;
+                const min = scales?.[axisKey]?.min ?? sAny.min;
+                const max = scales?.[axisKey]?.max ?? sAny.max;
+                if (typeof min !== 'number' || typeof max !== 'number' || !isFinite(min) || !isFinite(max))
+                    return;
+                const center = (min + max) / 2;
+                const px = scale.getPixelForValue(center);
+                ctx.save();
+                // Center guideline for the given axis
+                ctx.strokeStyle = theme.contrastDim;
+                ctx.lineWidth = this.CENTER_LINE_WIDTH;
+                ctx.beginPath();
+                ctx.moveTo(px, area.top);
+                ctx.lineTo(px, area.bottom);
+                ctx.stroke();
+                ctx.restore();
+                ctx.save();
+                ctx.fillStyle = theme.contrastDim;
+                ctx.font = `bold ${this.CENTER_LABEL_FONT_SIZE}px ${def.family}`;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'top';
+                const y = this.axisTopLabelY(scale);
+                ctx.fillText(format(center), px, y);
+                ctx.restore();
+            };
+            drawForAxis('x', (v) => `${(((v % 360) + 360) % 360).toFixed(0)}°`);
+            drawForAxis('xSpeed', (v) => `${v.toFixed(1)}`);
+            // Draw xSpeed rightmost tick label shifted slightly left (custom label)
+            const xSpeedScale = scaleMap?.['xSpeed'];
+            if (xSpeedScale) {
+                const scales = optScales;
+                const sAny = xSpeedScale;
+                const xmax = scales?.['xSpeed']?.max ?? sAny.max;
+                if (typeof xmax === 'number' && isFinite(xmax)) {
+                    const px = xSpeedScale.getPixelForValue(xmax);
+                    ctx.save();
+                    // Match tick label color for xSpeed axis
+                    ctx.fillStyle = this.resolveTickColor(chart, xSpeedScale, xmax);
+                    ctx.font = `normal ${this.TICK_LABEL_FONT_SIZE}px ${def.family}`;
+                    ctx.textAlign = 'right';
+                    ctx.textBaseline = 'top';
+                    const y = this.axisTopLabelY(xSpeedScale);
+                    const step = this.xStepSpeed ?? 1;
+                    const dp = Math.max(0, Math.min(3, Math.ceil(-Math.log10(step))));
+                    ctx.fillText(`${xmax.toFixed(dp)}`, px - this.EDGE_SPEED_LABEL_OFFSET, y);
+                    ctx.restore();
+                    // Extend the rightmost xSpeed tick vertical line 10px above the top time scale line
+                    ctx.save();
+                    ctx.strokeStyle = theme.contrastDim;
+                    ctx.lineWidth = this.GRID_LINE_WIDTH;
+                    ctx.beginPath();
+                    const xLine = Math.round(px) + 0.5;
+                    ctx.moveTo(xLine, area.bottom);
+                    ctx.lineTo(xLine, area.top - this.EDGE_EXTEND_UP_PX);
+                    ctx.stroke();
+                    ctx.restore();
+                }
+            }
+            // Draw x leftmost tick label shifted slightly right (custom label)
+            const xScale = scaleMap?.['x'];
+            if (xScale) {
+                const scales = optScales;
+                const sAny = xScale;
+                const xmin = scales?.['x']?.min ?? sAny.min;
+                if (typeof xmin === 'number' && isFinite(xmin)) {
+                    const px = xScale.getPixelForValue(xmin);
+                    ctx.save();
+                    // Match tick label color for x axis
+                    ctx.fillStyle = this.resolveTickColor(chart, xScale, xmin);
+                    ctx.font = `normal ${this.TICK_LABEL_FONT_SIZE}px ${def.family}`;
+                    ctx.textAlign = 'left';
+                    ctx.textBaseline = 'top';
+                    const y = this.axisTopLabelY(xScale);
+                    const wrapped = this.normalizeAngle(xmin);
+                    ctx.fillText(`${wrapped.toFixed(0)}°`, px + this.EDGE_DIR_LABEL_OFFSET, y);
+                    ctx.restore();
+                }
+            }
+            // Top-right speed value
+            const ds = chart.data?.datasets;
+            const speedVal = ds?.[5]?.data; // first speed dataset index (see dataset order)
+            const last = speedVal?.length ? speedVal.length - 1 : -1;
+            const lastSpeed = last >= 0 ? speedVal[last]?.x : undefined;
+            if (typeof lastSpeed === 'number' && isFinite(lastSpeed)) {
+                ctx.save();
+                ctx.fillStyle = chartColors.chartValue;
+                // Draw speed value centered
+                ctx.font = `bold ${this.SPEED_VALUE_FONT_SIZE}px ${def.family}`;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                const speedText = `${lastSpeed.toFixed(1)}`;
+                const speedX = area.left + (area.width / 4);
+                const speedY = area.top - this.TOP_VALUE_Y_OFFSET;
+                ctx.fillText(speedText, speedX, speedY);
+                // Measure speed text to place unit right after it
+                const metrics = ctx.measureText(speedText);
+                const unitX = speedX + (metrics.width / 2) + this.UNIT_PADDING;
+                const unitY = area.top - this.TOP_UNIT_Y_OFFSET;
+                ctx.font = `bold ${this.UNIT_FONT_SIZE}px ${def.family}`;
+                ctx.textAlign = 'left';
+                ctx.fillText('kts', unitX, unitY);
+                ctx.restore();
+            }
+            // Top direction value
+            const dirVal = ds?.[0]?.data; // first direction dataset index
+            const lastDirIdx = dirVal?.length ? dirVal.length - 1 : -1;
+            const lastDir = lastDirIdx >= 0 ? dirVal[lastDirIdx]?.x : undefined;
+            if (typeof lastDir === 'number' && isFinite(lastDir)) {
+                const dir = this.normalizeAngle(lastDir);
+                ctx.save();
+                ctx.fillStyle = chartColors.chartValue;
+                ctx.font = `bold ${this.SPEED_VALUE_FONT_SIZE}px ${def.family}`;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(`${dir.toFixed(0)}°`, area.left + (3 * area.width / 4), area.top - this.TOP_VALUE_Y_OFFSET);
+                ctx.restore();
+            }
+            // Draw loading overlay box/text visible above background; keep lines visible via semi-transparent fill
+            if (!ready) {
+                const boxW = Math.min(area.width * 0.7, 420);
+                const boxH = 90;
+                const x = area.left + (area.width - boxW) / 2;
+                const y = area.top + (area.height - boxH) / 2;
+                // Background with slight transparency so lines remain visible
+                ctx.save();
+                ctx.globalAlpha = 0.82;
+                ctx.fillStyle = theme.background;
+                ctx.fillRect(x, y, boxW, boxH);
+                ctx.restore();
+                // Border on top
+                ctx.save();
+                ctx.strokeStyle = theme.contrastDim;
+                ctx.lineWidth = 2;
+                ctx.strokeRect(x, y, boxW, boxH);
+                ctx.restore();
+                // Text over everything
+                ctx.save();
+                ctx.fillStyle = this.getThemeColors().chartLabel;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.font = `bold 18px ${def.family}`;
+                ctx.fillText('Data acquisition...', x + boxW / 2, y + boxH / 2);
+                ctx.restore();
+            }
+        }
+    };
+    constructor() {
+        super();
+        this.defaultConfig = {
+            filterSelfPaths: true,
+            color: "contrast",
+            timeScale: "Last 30 Minutes"
+        };
+        effect(() => {
+            if (this.theme()) {
+                if (this.datasetConfig) {
+                    this.setChartOptions();
+                    this.setDatasetsColors();
+                }
+            }
+        });
+    }
+    ngOnInit() {
+        this.validateConfig();
+        this.createServiceDataset();
+    }
+    ngAfterViewInit() {
+        this.startWidget();
+    }
+    startWidget() {
+        this.datasetConfig = this._dataset.getDatasetConfig(`${this.widgetProperties.uuid}-twd`);
+        this.dataSourceInfo = this._dataset.getDataSourceInfo(`${this.widgetProperties.uuid}-twd`);
+        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,
+                    plugins: [this.gridBackgroundPlugin, this.centerTickPlugin]
+                });
+                // Render once so initial axes and plugin drawings appear before data
+                this.ngZone.runOutsideAngular(() => {
+                    this.chart?.update();
+                });
+            }
+            else {
+                this.ngZone.runOutsideAngular(() => {
+                    this.chart?.update('quiet');
+                });
+            }
+            this.startStreaming();
+        }
+    }
+    updateConfig(config) {
+        this.widgetProperties.config = config;
+        // remove dataset if they exists and recreate
+        if (this._dataset.list().filter(ds => ds.uuid === `${this.widgetProperties.uuid}-twd`).length > 0) {
+            this._dataset.remove(`${this.widgetProperties.uuid}-twd`);
+        }
+        if (this._dataset.list().filter(ds => ds.uuid === `${this.widgetProperties.uuid}-tws`).length > 0) {
+            this._dataset.remove(`${this.widgetProperties.uuid}-tws`);
+        }
+        this.createServiceDataset();
+        this.startWidget();
+    }
+    createServiceDataset() {
+        if (this.widgetProperties.config.timeScale === '')
+            return;
+        const pathDirection = "self.environment.wind.directionTrue";
+        const pathSpeed = "self.environment.wind.speedTrue";
+        const source = "default";
+        // Create datasets if it does not exist
+        if (this._dataset.list().filter(ds => ds.uuid === `${this.widgetProperties.uuid}-twd`).length === 0) {
+            this._dataset.create(pathDirection, source, this.widgetProperties.config.timeScale, 30, `windtrends-${this.widgetProperties.uuid}`, true, false, `${this.widgetProperties.uuid}-twd`);
+        }
+        if (this._dataset.list().filter(ds => ds.uuid === `${this.widgetProperties.uuid}-tws`).length === 0) {
+            this._dataset.create(pathSpeed, source, this.widgetProperties.config.timeScale, 30, `speedtrends-${this.widgetProperties.uuid}`, true, false, `${this.widgetProperties.uuid}-tws`);
+        }
+    }
+    setChartOptions() {
+        this.lineChartOptions.maintainAspectRatio = false;
+        this.lineChartOptions.animation = false;
+        this.lineChartOptions.indexAxis = 'y';
+        // Provide initial x (direction) range so ticks/center line render before data arrives
+        const xDefaultMin = 0;
+        const xDefaultMax = 360;
+        const xDefaultStep = (xDefaultMax - xDefaultMin) / 4; // 5 ticks
+        // Provide initial xSpeed (knots) range as well
+        const xsDefaultMin = 0;
+        const xsDefaultMax = 20;
+        const xsDefaultStep = (xsDefaultMax - xsDefaultMin) / 4; // 5 ticks
+        this.lineChartOptions.scales = {
+            y: {
+                type: "linear",
+                display: true,
+                position: "right",
+                reverse: true, // 0 (now) at top; older increases downward
+                title: {
+                    display: true,
+                    text: `${this.datasetConfig.timeScaleFormat}`,
+                    align: "center"
+                },
+                ticks: {
+                    count: 6, // 6 lines including start/end
+                    autoSkip: false,
+                    includeBounds: true,
+                    align: 'inner',
+                    major: { enabled: true },
+                    font: { size: 16 },
+                    callback: (value) => {
+                        const ms = Number(value);
+                        const fmt = this.datasetConfig?.timeScaleFormat;
+                        const windowMs = this.getWindowMs(fmt);
+                        // 5-minute scale: show whole minutes
+                        if (fmt === 'Last 5 Minutes') {
+                            const m = Math.round(ms / 60_000);
+                            return `${m}'`;
+                        }
+                        // >= 10 minutes → minutes; else seconds
+                        if (windowMs >= 10 * 60_000) {
+                            const m = Math.round(ms / 60_000);
+                            return `${m}'`;
+                        }
+                        const s = Math.round(ms / 1000);
+                        return `${s}"`;
+                    }
+                },
+                grid: {
+                    display: true,
+                    color: this.theme().contrastDimmer
+                }
+            },
+            x: {
+                type: "linear",
+                position: "top",
+                stack: 'trends',
+                beginAtZero: false,
+                bounds: 'ticks',
+                min: xDefaultMin,
+                max: xDefaultMax,
+                // min/max will be set dynamically in updateChartAfterDataChange
+                title: { display: false },
+                ticks: {
+                    count: 5,
+                    align: 'inner',
+                    autoSkip: false,
+                    includeBounds: true,
+                    stepSize: xDefaultStep,
+                    minRotation: 0,
+                    maxRotation: 0,
+                    callback: (value) => {
+                        // Hide the default center tick label; plugin will draw a bold themed label there
+                        const center = this.xCenter ?? Number.NaN;
+                        if (this.nearlyEqual(value, center))
+                            return '';
+                        // Hide leftmost label (at min) to avoid overlap with custom shifted label
+                        const scales = this.chart?.options?.scales;
+                        const minOpt = scales?.x?.min;
+                        if (typeof minOpt === 'number' && this.nearlyEqual(value, minOpt))
+                            return '';
+                        const wrapped = ((value % 360 + 360) % 360);
+                        return `${wrapped.toFixed(0)}°`;
+                    },
+                    // Make the center tick bold and themed using precomputed midpoint/step
+                    font: (ctx) => {
+                        const tickVal = ctx.tick?.value ?? Number.NaN;
+                        const center = this.xCenter ?? Number.NaN;
+                        const isCenter = this.nearlyEqual(tickVal, center);
+                        return { size: 20, weight: isCenter ? 'bold' : 'normal' };
+                    },
+                    color: (ctx) => {
+                        const tickVal = ctx.tick?.value ?? Number.NaN;
+                        const center = this.xCenter ?? Number.NaN;
+                        const isCenter = this.nearlyEqual(tickVal, center);
+                        return isCenter ? this.theme().contrast : undefined;
+                    },
+                },
+                grid: {
+                    display: true,
+                    color: (ctx) => {
+                        const tickVal = ctx.tick?.value ?? Number.NaN;
+                        const scale = ctx.scale;
+                        const scales = this.chart?.options?.scales;
+                        const sAny = scale;
+                        const min = scales?.x?.min ?? sAny.min;
+                        const isMin = this.nearlyEqual(tickVal, min);
+                        return isMin ? 'rgba(0,0,0,0)' : this.theme().contrastDimmer;
+                    },
+                    lineWidth: 1
+                }
+            },
+            xSpeed: {
+                type: "linear",
+                position: "top",
+                stack: 'trends',
+                beginAtZero: false,
+                bounds: 'ticks',
+                min: xsDefaultMin,
+                max: xsDefaultMax,
+                title: { display: false },
+                ticks: {
+                    count: 5,
+                    align: 'inner',
+                    autoSkip: false,
+                    includeBounds: true,
+                    stepSize: xsDefaultStep,
+                    minRotation: 0,
+                    maxRotation: 0,
+                    callback: (value) => {
+                        const center = this.xCenterSpeed ?? Number.NaN;
+                        if (this.nearlyEqual(value, center))
+                            return '';
+                        // Hide rightmost label (at max) to avoid overlap with custom shifted label
+                        const scales = this.chart?.options?.scales;
+                        const maxOpt = scales?.xSpeed?.max;
+                        if (typeof maxOpt === 'number' && this.nearlyEqual(value, maxOpt))
+                            return '';
+                        // Derive decimals from step so adjacent ticks remain distinct
+                        const stepS = this.xStepSpeed ?? Number.NaN;
+                        const s = Number.isFinite(stepS) ? stepS : 1;
+                        const dp = Math.max(0, Math.min(3, Math.ceil(-Math.log10(s))));
+                        return `${value.toFixed(dp)}`;
+                    },
+                    font: (ctx) => {
+                        const tickVal = ctx.tick?.value ?? Number.NaN;
+                        const center = this.xCenterSpeed ?? Number.NaN;
+                        const isCenter = this.nearlyEqual(tickVal, center);
+                        return { size: 20, weight: isCenter ? 'bold' : 'normal' };
+                    },
+                    color: (ctx) => {
+                        const tickVal = ctx.tick?.value ?? Number.NaN;
+                        const center = this.xCenterSpeed ?? Number.NaN;
+                        const isCenter = this.nearlyEqual(tickVal, center);
+                        return isCenter ? this.theme().contrast : undefined;
+                    },
+                },
+                grid: {
+                    display: true,
+                    color: (ctx) => {
+                        const tickVal = ctx.tick?.value ?? Number.NaN;
+                        const scale = ctx.scale;
+                        const scales = this.chart?.options?.scales;
+                        const sAny = scale;
+                        const max = scales?.xSpeed?.max ?? sAny.max;
+                        const isMax = this.nearlyEqual(tickVal, max);
+                        return isMax ? 'rgba(0,0,0,0)' : this.theme().contrastDimmer;
+                    },
+                    lineWidth: 1
+                }
+            }
+        };
+        this.lineChartOptions.plugins = {
+            title: {
+                display: true,
+                align: "end",
+                padding: { top: 3, bottom: 0 },
+                text: `TWD `,
+                font: { size: 35, weight: 'normal' },
+                color: this.getThemeColors().chartLabel
+            },
+            subtitle: {
+                display: true,
+                align: "start",
+                padding: { top: -41, bottom: 12 },
+                text: ` TWS`,
+                font: { size: 35 },
+                color: this.getThemeColors().chartLabel
+            },
+            annotation: {},
+            legend: { display: false }
+        };
+        // Cache initial centers/steps for tick styling before first data update
+        this.xCenter = (xDefaultMin + xDefaultMax) / 2;
+        this.xStep = xDefaultStep;
+        this.xCenterSpeed = (xsDefaultMin + xsDefaultMax) / 2;
+        this.xStepSpeed = xsDefaultStep;
+    }
+    createDatasets() {
+        this.lineChartData.datasets = [];
+        this.lineChartData.datasets.push({
+            label: 'Value',
+            data: [],
+            order: 2,
+            parsing: false,
+            normalized: true,
+            tension: 0,
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            pointHitRadius: 0,
+            borderWidth: 1,
+            fill: false,
+            xAxisID: 'x'
+        }, {
+            label: 'SMA',
+            data: [],
+            order: 0,
+            parsing: false,
+            normalized: true,
+            tension: 0.3,
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            pointHitRadius: 0,
+            borderWidth: 10,
+            fill: false,
+            borderColor: (context) => {
+                const chart = context.chart;
+                const { ctx } = chart;
+                return this.lineGradientForAxis(ctx, chart, 'x');
+            },
+            backgroundColor: 'red',
+            xAxisID: 'x'
+        }, {
+            label: 'lastAverage',
+            data: [],
+            order: 1,
+            parsing: false,
+            normalized: true,
+            tension: 0,
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            pointHitRadius: 0,
+            borderWidth: 0,
+            borderColor: '',
+            fill: false,
+            hidden: true,
+            xAxisID: 'x'
+        }, {
+            label: 'lastMinimum',
+            data: [],
+            order: 3,
+            parsing: false,
+            normalized: true,
+            hidden: true,
+            xAxisID: 'x'
+        }, {
+            label: 'lastMaximum',
+            data: [],
+            order: 4,
+            parsing: false,
+            normalized: true,
+            hidden: true,
+            xAxisID: 'x'
+        }, 
+        // Speed datasets (5..9)
+        {
+            label: 'Value Speed',
+            data: [],
+            order: 2,
+            parsing: false,
+            normalized: true,
+            tension: 0,
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            pointHitRadius: 0,
+            borderWidth: 1,
+            fill: false,
+            xAxisID: 'xSpeed'
+        }, {
+            label: 'SMA Speed',
+            data: [],
+            order: 0,
+            parsing: false,
+            normalized: true,
+            tension: 0.2,
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            pointHitRadius: 0,
+            borderWidth: 3,
+            fill: false,
+            borderColor: (context) => {
+                const chart = context.chart;
+                const { ctx } = chart;
+                return this.lineGradientForAxis(ctx, chart, 'xSpeed');
+            },
+            xAxisID: 'xSpeed'
+        }, {
+            label: 'lastAverage Speed',
+            data: [],
+            order: 1,
+            parsing: false,
+            normalized: true,
+            tension: 0,
+            pointRadius: 0,
+            pointHoverRadius: 0,
+            pointHitRadius: 0,
+            borderWidth: 0,
+            borderColor: '',
+            fill: false,
+            hidden: true,
+            xAxisID: 'xSpeed'
+        }, {
+            label: 'lastMinimum Speed',
+            data: [],
+            order: 3,
+            parsing: false,
+            normalized: true,
+            hidden: true,
+            xAxisID: 'xSpeed'
+        }, {
+            label: 'lastMaximum Speed',
+            data: [],
+            order: 4,
+            parsing: false,
+            normalized: true,
+            hidden: true,
+            xAxisID: 'xSpeed'
+        });
+        this.setDatasetsColors();
+    }
+    startStreaming() {
+        this._dsDirectionSub?.unsubscribe();
+        this._dsSpeedSub?.unsubscribe();
+        const batchThenLiveDir$ = this._dataset.getDatasetBatchThenLiveObservable(`${this.widgetProperties.uuid}-twd`);
+        const batchThenLiveSpd$ = this._dataset.getDatasetBatchThenLiveObservable(`${this.widgetProperties.uuid}-tws`);
+        this._dsDirectionSub = batchThenLiveDir$?.subscribe(dsPointOrBatch => {
+            if (Array.isArray(dsPointOrBatch)) {
+                this.pushRowsToDatasets(dsPointOrBatch);
+            }
+            else {
+                this.pushRowsToDatasets([dsPointOrBatch]);
+                if (this.chart.data.datasets[0].data.length > this.dataSourceInfo.maxDataPoints) {
+                    for (let i = 0; i <= 4; i++)
+                        this.chart.data.datasets[i].data.shift();
+                }
+            }
+            this.updateChartAfterDataChange();
+            this.ngZone.runOutsideAngular(() => { this.chart?.update('quiet'); });
+        });
+        this._dsSpeedSub = batchThenLiveSpd$?.subscribe(dsPointOrBatch => {
+            if (Array.isArray(dsPointOrBatch)) {
+                this.pushRowsToSpeedDatasets(dsPointOrBatch);
+            }
+            else {
+                this.pushRowsToSpeedDatasets([dsPointOrBatch]);
+                if (this.chart.data.datasets[5].data.length > this.dataSourceInfo.maxDataPoints) {
+                    for (let i = 5; i <= 9; i++)
+                        this.chart.data.datasets[i].data.shift();
+                }
+            }
+            this.updateChartAfterDataChange();
+            this.ngZone.runOutsideAngular(() => { this.chart?.update('quiet'); });
+        });
+    }
+    unwrapAngles(degrees) {
+        if (degrees.length === 0)
+            return [];
+        const unwrapped = [];
+        let prev = null;
+        for (const val of degrees) {
+            if (val == null) {
+                unwrapped.push(null);
+                continue;
+            }
+            if (prev == null) {
+                unwrapped.push(val);
+                prev = val;
+                continue;
+            }
+            let delta = val - prev;
+            if (delta > 180)
+                delta -= 360;
+            if (delta < -180)
+                delta += 360;
+            unwrapped.push(unwrapped[unwrapped.length - 1] + delta);
+            prev = val;
+        }
+        return unwrapped;
+    }
+    pushRowsToDatasets(rows) {
+        this.pushRowsGeneric(rows, 0, 'deg', true);
+    }
+    pushRowsToSpeedDatasets(rows) {
+        this.pushRowsGeneric(rows, 5, 'knots', false);
+    }
+    getRowValue(row, datasetType) {
+        switch (datasetType) {
+            case 'value': return row.data.value ?? null;
+            case 'sma': return row.data.sma ?? null;
+            case 'ema': return row.data.ema ?? null;
+            case 'dema': return row.data.doubleEma ?? null;
+            case 'avg': return row.data.lastAverage ?? null;
+            case 'min': return row.data.lastMinimum ?? null;
+            case 'max': return row.data.lastMaximum ?? null;
+            default: return null;
+        }
+    }
+    // Generic transform for degree/knots series
+    transformRows(rows, datasetType, toUnit, unwrap) {
+        const vals = rows.map(row => {
+            const raw = this.getRowValue(row, datasetType);
+            return raw == null ? null : this.unitsService.convertToUnit(toUnit, raw);
+        });
+        const xs = unwrap ? this.unwrapAngles(vals) : vals;
+        return rows.map((row, idx) => ({
+            x: xs[idx],
+            y: row.timestamp,
+            ts: row.timestamp,
+        }));
+    }
+    // Push a batch of rows into 5 consecutive datasets starting at baseIndex
+    pushRowsGeneric(rows, baseIndex, toUnit, unwrap) {
+        const types = ['value', 'sma', 'avg', 'min', 'max'];
+        types.forEach((type, i) => {
+            this.chart.data.datasets[baseIndex + i].data
+                .push(...this.transformRows(rows, type, toUnit, unwrap));
+        });
+    }
+    normalizeAngle(angle) {
+        return ((angle % 360) + 360) % 360;
+    }
+    // Minimal absolute angular distance in degrees [0, 180]
+    angularDiff(a, b) {
+        const d = ((a - b + 540) % 360) - 180; // [-180, 180)
+        return Math.abs(d);
+    }
+    // More flexible: choose from provided mantissas (ascending) for a nice step
+    niceStepFromMantissas(step, mantissas) {
+        if (!isFinite(step) || step <= 0)
+            return 1;
+        const exp = Math.floor(Math.log10(step));
+        const base = step / Math.pow(10, exp);
+        const chosen = mantissas.find(m => base <= m) ?? mantissas[mantissas.length - 1];
+        return chosen * Math.pow(10, exp);
+    }
+    updateChartAfterDataChange() {
+        // Calculate dynamic x (direction) scale range based on lastAverage center and lastMin/Max distances (with wrap-around)
+        const dirAvgArr = this.chart.data.datasets[2]?.data;
+        const dirSmaArr = this.chart.data.datasets[1]?.data;
+        const dirValArr = this.chart.data.datasets[0]?.data;
+        const hasAvg = !!dirAvgArr?.length;
+        const hasSma = !!dirSmaArr?.length;
+        const hasVal = !!dirValArr?.length;
+        // Center MUST be the latest lastAverage value when available, else fall back to SMA, else Value
+        const centerVal = hasAvg
+            ? dirAvgArr[dirAvgArr.length - 1].x
+            : hasSma
+                ? dirSmaArr[dirSmaArr.length - 1].x
+                : hasVal
+                    ? dirValArr[dirValArr.length - 1].x
+                    : undefined;
+        if (typeof centerVal === 'number' && isFinite(centerVal)) {
+            // Try to use lastMinimum/Maximum if available; else derive half-range from recent window using angular distance
+            const minDs = this.chart.data.datasets[3]?.data;
+            const maxDs = this.chart.data.datasets[4]?.data;
+            const lastMin = minDs?.length ? minDs[minDs.length - 1].x : undefined;
+            const lastMax = maxDs?.length ? maxDs[maxDs.length - 1].x : undefined;
+            const minDiff = typeof lastMin === 'number' && isFinite(lastMin) ? this.angularDiff(centerVal, lastMin) : Number.NaN;
+            const maxDiff = typeof lastMax === 'number' && isFinite(lastMax) ? this.angularDiff(centerVal, lastMax) : Number.NaN;
+            let halfRange = Number.isFinite(minDiff) || Number.isFinite(maxDiff)
+                ? Math.max(Number.isFinite(minDiff) ? minDiff : 0, Number.isFinite(maxDiff) ? maxDiff : 0)
+                : Number.NaN;
+            if (!Number.isFinite(halfRange)) {
+                const src = hasAvg ? dirAvgArr : hasSma ? dirSmaArr : dirValArr;
+                const take = Math.min(30, src?.length ?? 0);
+                if (take > 1) {
+                    const slice = src.slice(src.length - take);
+                    const xs = slice.map(p => p.x).filter(v => typeof v === 'number' && isFinite(v));
+                    if (xs.length) {
+                        halfRange = xs.reduce((m, v) => Math.max(m, this.angularDiff(centerVal, v)), 0);
+                    }
+                }
+            }
+            // Ensure a sensible minimum half-range so the axis doesn't collapse on first point
+            const minHalfRangeDeg = 15; // shows a 30° window initially
+            halfRange = Math.max(halfRange || 0, minHalfRangeDeg);
+            // 5 ticks (4 intervals) with a nice step, snapped to grid around the chosen center
+            const requestedStep = (2 * halfRange) / 4; // = halfRange / 2
+            // Allow 15° by including 1.5 mantissa; also support 7.5
+            const dStep = this.niceStepFromMantissas(requestedStep, [1, 1.5, 2, 2.5, 5, 7.5, 10]);
+            // Place center exactly at lastAverage
+            const xMin = centerVal - 2 * dStep;
+            const xMax = centerVal + 2 * dStep;
+            this.chart.options.scales.x.min = xMin;
+            this.chart.options.scales.x.max = xMax;
+            const xScale = this.chart.options.scales;
+            xScale.x.ticks = { ...(xScale.x.ticks ?? {}), stepSize: dStep };
+            // Cache for tick styling
+            this.xCenter = centerVal;
+            this.xStep = dStep;
+        }
+        // Calculate dynamic xSpeed (knots) scale range based on lastAverage center and lastMin/Max distances
+        const sAvgArr = this.chart.data.datasets[7]?.data;
+        if (sAvgArr && sAvgArr.length) {
+            const sIdx = sAvgArr.length - 1;
+            const sAvg = sAvgArr[sIdx]?.x ?? 0;
+            const sMin = this.chart.data.datasets[8].data[sIdx]?.x ?? sAvg;
+            const sMax = this.chart.data.datasets[9].data[sIdx]?.x ?? sAvg;
+            const sDiffMin = Math.abs(sAvg - sMin);
+            const sDiffMax = Math.abs(sMax - sAvg);
+            let halfRangeS = Math.max(sDiffMin, sDiffMax);
+            // Guard minimum half-range to avoid collapse
+            const minHalfRangeS = 0.5; // knots
+            halfRangeS = Math.max(halfRangeS, minHalfRangeS);
+            // Target 5 ticks (4 intervals) with a nice step (ceiling)
+            const requestedStep = (2 * halfRangeS) / 4; // = halfRangeS / 2
+            // Preserve previous speed behavior (no 1.5/7.5 mantissas)
+            const spStep = this.niceStepFromMantissas(requestedStep, [1, 2, 2.5, 5, 10]);
+            // Keep center exactly at lastAverage Speed
+            const spMin = sAvg - 2 * spStep;
+            const spMax = sAvg + 2 * spStep;
+            const scales = this.chart.options.scales;
+            scales.xSpeed.min = spMin;
+            scales.xSpeed.max = spMax;
+            scales.xSpeed.ticks = { ...(scales.xSpeed.ticks ?? {}), stepSize: spStep };
+            // cache for tick styling on speed axis
+            this.xCenterSpeed = sAvg;
+            this.xStepSpeed = spStep;
+        }
+        // Fixed, non-scrolling y-axis window (relative age)
+        const windowMs = this.getWindowMs(this.datasetConfig?.timeScaleFormat);
+        const data0 = this.chart.data.datasets[0].data;
+        if (data0.length > 0) {
+            const nowTs = Date.now();
+            // Recompute y for all datasets as age (ms) relative to now
+            this.chart.data.datasets.forEach(ds => {
+                ds.data.forEach(p => {
+                    const ts = p.ts ?? p.y;
+                    p.y = Math.max(0, Math.min(windowMs, nowTs - ts));
+                });
+            });
+            // Lock y scale to [0, window]
+            this.chart.options.scales.y.min = 0;
+            this.chart.options.scales.y.max = windowMs;
+            // Explicit step per selected window
+            let step;
+            const fmt = this.datasetConfig?.timeScaleFormat;
+            switch (fmt) {
+                case 'Last Minute':
+                    step = 15_000; // 15 seconds
+                    break;
+                case 'Last 5 Minutes':
+                    step = 60_000; // 1 minute
+                    break;
+                case 'Last 30 Minutes':
+                    step = 5 * 60_000; // 5 minutes
+                    break;
+                default:
+                    // fallback keeps 6 ticks => 5 intervals
+                    step = windowMs / 5;
+                    break;
+            }
+            const yScale = this.chart.options.scales;
+            const ticksCopy = { ...(yScale.y.ticks ?? {}) };
+            delete ticksCopy.count;
+            ticksCopy.stepSize = step;
+            yScale.y.ticks = ticksCopy;
+        }
+    }
+    getWindowMs(fmt) {
+        switch (fmt) {
+            case 'Last 30 Minutes':
+                return 30 * 60_000;
+            case 'Last 5 Minutes':
+                return 5 * 60_000;
+            case 'Last Minute':
+                return 60_000;
+            default:
+                return 60_000; // fallback 1 minute
+        }
+    }
+    lineGradientForAxis(ctx, chart, axisKey) {
+        const chartArea = chart.chartArea;
+        if (!chartArea)
+            return null;
+        const scale = chart.scales?.[axisKey];
+        if (!scale)
+            return null;
+        const scales = chart.options?.scales;
+        const sAny = scale;
+        const min = scales?.[axisKey]?.min ?? sAny.min;
+        const max = scales?.[axisKey]?.max ?? sAny.max;
+        if (typeof min !== 'number' || typeof max !== 'number' || !isFinite(min) || !isFinite(max))
+            return null;
+        const center = (min + max) / 2;
+        const centerPx = scale.getPixelForValue(center);
+        const offset = Math.max(0, Math.min(1, (centerPx - chartArea.left) / chartArea.width));
+        const gradient = ctx.createLinearGradient(chartArea.left, 0, chartArea.right, 0);
+        gradient.addColorStop(0, this.theme().port);
+        gradient.addColorStop(offset, this.theme().port);
+        gradient.addColorStop(offset, this.theme().starboard);
+        gradient.addColorStop(1, this.theme().starboard);
+        return gradient;
+    }
+    setDatasetsColors() {
+        this.lineChartData.datasets.forEach((dataset) => {
+            if (dataset.label === 'Value') {
+                dataset.borderColor = this.getThemeColors().valueLine;
+                dataset.backgroundColor = this.getThemeColors().valueFill;
+            }
+            if (dataset.label === 'Value Speed') {
+                dataset.borderColor = this.getThemeColors().valueLine;
+                dataset.backgroundColor = this.getThemeColors().valueFill;
+            }
+        });
+    }
+    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":
+                colors.valueLine = this.theme().contrastDim;
+                colors.valueFill = this.theme().contrastDimmer;
+                colors.averageLine = this.theme().contrast;
+                colors.averageFill = this.theme().contrast;
+                colors.chartValue = this.theme().contrast;
+                colors.averageChartLine = this.theme().contrast;
+                colors.chartLabel = this.theme().contrastDim;
+                break;
+            case "blue":
+                colors.valueLine = this.theme().blueDim;
+                colors.valueFill = this.theme().blueDimmer;
+                colors.averageLine = this.theme().blue;
+                colors.averageFill = this.theme().blue;
+                colors.chartValue = this.theme().blue;
+                colors.averageChartLine = this.theme().blueDim;
+                colors.chartLabel = this.theme().blueDim;
+                break;
+            case "green":
+                colors.valueLine = this.theme().greenDim;
+                colors.valueFill = this.theme().greenDimmer;
+                colors.averageLine = this.theme().green;
+                colors.averageFill = this.theme().green;
+                colors.chartValue = this.theme().green;
+                colors.averageChartLine = this.theme().greenDim;
+                colors.chartLabel = this.theme().greenDim;
+                break;
+            case "pink":
+                colors.valueLine = this.theme().pinkDim;
+                colors.valueFill = this.theme().pinkDimmer;
+                colors.averageLine = this.theme().pink;
+                colors.averageFill = this.theme().pink;
+                colors.chartValue = this.theme().pink;
+                colors.averageChartLine = this.theme().pinkDim;
+                colors.chartLabel = this.theme().pinkDim;
+                break;
+            case "orange":
+                colors.valueLine = this.theme().orangeDim;
+                colors.valueFill = this.theme().orangeDimmer;
+                colors.averageLine = this.theme().orange;
+                colors.averageFill = this.theme().orange;
+                colors.chartValue = this.theme().orange;
+                colors.averageChartLine = this.theme().orangeDim;
+                colors.chartLabel = this.theme().orangeDim;
+                break;
+            case "purple":
+                colors.valueLine = this.theme().purpleDim;
+                colors.valueFill = this.theme().purpleDimmer;
+                colors.averageLine = this.theme().purple;
+                colors.averageFill = this.theme().purple;
+                colors.chartValue = this.theme().purple;
+                colors.averageChartLine = this.theme().purpleDim;
+                colors.chartLabel = this.theme().purpleDim;
+                break;
+            case "grey":
+                colors.valueLine = this.theme().greyDim;
+                colors.valueFill = this.theme().greyDimmer;
+                colors.averageLine = this.theme().grey;
+                colors.averageFill = this.theme().grey;
+                colors.chartValue = this.theme().grey;
+                colors.averageChartLine = this.theme().greyDim;
+                colors.chartLabel = this.theme().greyDim;
+                break;
+            case "yellow":
+                colors.valueLine = this.theme().yellowDim;
+                colors.valueFill = this.theme().yellowDimmer;
+                colors.averageLine = this.theme().yellow;
+                colors.averageFill = this.theme().yellow;
+                colors.chartValue = this.theme().yellow;
+                colors.averageChartLine = this.theme().yellowDim;
+                colors.chartLabel = this.theme().yellowDim;
+                break;
+        }
+        return colors;
+    }
+    ngOnDestroy() {
+        this.destroyDataStreams();
+        this._dsDirectionSub?.unsubscribe();
+        this._dsSpeedSub?.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 });
+    }
+};
+WidgetWindTrendsChartComponent = __decorate([
+    Component({
+        selector: 'widget-windtrends-chart',
+        imports: [WidgetHostComponent],
+        templateUrl: './widget-windtrends-chart.component.html',
+        styleUrl: './widget-windtrends-chart.component.scss'
+    }),
+    __metadata("design:paramtypes", [])
+], WidgetWindTrendsChartComponent);
+export { WidgetWindTrendsChartComponent };
+//# sourceMappingURL=widget-windtrends-chart.component.js.map