diff --git a/ts_web/elements/00group-chart/dees-chart-area/component.ts b/ts_web/elements/00group-chart/dees-chart-area/component.ts index 9cfabc4..765ce3c 100644 --- a/ts_web/elements/00group-chart/dees-chart-area/component.ts +++ b/ts_web/elements/00group-chart/dees-chart-area/component.ts @@ -468,16 +468,16 @@ export class DeesChartArea extends DeesElement { if (!this.chart) { return; } - + try { // Store the new data first this.internalChartData = newSeries; - + // Handle rolling window if enabled if (this.rollingWindow > 0 && this.realtimeMode) { const now = Date.now(); const cutoffTime = now - this.rollingWindow; - + // Filter data to only include points within the rolling window const filteredSeries = newSeries.map(series => ({ name: series.name, @@ -488,25 +488,41 @@ export class DeesChartArea extends DeesElement { return false; }) })); - + // Only update if we have data if (filteredSeries.some(s => s.data.length > 0)) { - // Handle y-axis scaling first + // Build a single options update with series, x-axis window, and y-axis + const isDark = !this.goBright; + const options: ApexCharts.ApexOptions = { + series: filteredSeries, + xaxis: { + min: cutoffTime, + max: now, + labels: { + format: 'HH:mm:ss', + datetimeUTC: false, + style: { + colors: [isDark ? 'hsl(0 0% 63.9%)' : 'hsl(0 0% 20%)'], + fontSize: '12px', + fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif', + fontWeight: '400', + }, + }, + tickAmount: 6, + }, + }; + + // Handle y-axis scaling if (this.yAxisScaling === 'dynamic') { const allValues = filteredSeries.flatMap(s => (s.data as any[]).map(d => d.y)); if (allValues.length > 0) { const maxValue = Math.max(...allValues); const dynamicMax = Math.ceil(maxValue * 1.1); - await this.chart.updateOptions({ - yaxis: { - min: 0, - max: dynamicMax - } - }, false, false); + options.yaxis = { min: 0, max: dynamicMax }; } } - - await this.chart.updateSeries(filteredSeries, false); + + await this.chart.updateOptions(options, false, false); } } else { await this.chart.updateSeries(newSeries, animate);