@mxtommy/kip 4.1.0-beta.1 → 4.1.0-beta.10

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

@@ -1,1067 +0,0 @@
-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