From 786ff787d1b10a75dfed4a5f6b7586c8657af61d Mon Sep 17 00:00:00 2001 From: Petar Petrov Date: Wed, 5 Feb 2025 11:22:31 +0200 Subject: [PATCH] Fix spacing & colors in statistics-graph chart (#24068) * Fix statistic chart colors * Fix spacing in statistics-graph * set start time based on data --- src/components/chart/ha-chart-base.ts | 78 +++++++++++++----------- src/components/chart/statistics-chart.ts | 61 ++++++++++-------- 2 files changed, 77 insertions(+), 62 deletions(-) diff --git a/src/components/chart/ha-chart-base.ts b/src/components/chart/ha-chart-base.ts index e83bb757a8..9c9e24c4c1 100644 --- a/src/components/chart/ha-chart-base.ts +++ b/src/components/chart/ha-chart-base.ts @@ -248,43 +248,49 @@ export class HaChartBase extends LitElement { private _createOptions(): ECOption { let xAxis = this.options?.xAxis; - if (xAxis && !Array.isArray(xAxis) && xAxis.type === "time") { - if (xAxis.max && xAxis.min) { - this._minutesDifference = differenceInMinutes( - xAxis.max as Date, - xAxis.min as Date - ); - } - const dayDifference = this._minutesDifference / 60 / 24; - let minInterval: number | undefined; - if (dayDifference) { - minInterval = - dayDifference >= 89 // quarter - ? 28 * 3600 * 24 * 1000 - : dayDifference > 2 - ? 3600 * 24 * 1000 - : undefined; - } - xAxis = { - ...xAxis, - axisLabel: { - formatter: this._formatTimeLabel, - rich: { - bold: { - fontWeight: "bold", - }, + if (xAxis) { + xAxis = Array.isArray(xAxis) ? xAxis : [xAxis]; + xAxis = xAxis.map((axis: XAXisOption) => { + if (axis.type !== "time" || axis.show === false) { + return axis; + } + if (axis.max && axis.min) { + this._minutesDifference = differenceInMinutes( + axis.max as Date, + axis.min as Date + ); + } + const dayDifference = this._minutesDifference / 60 / 24; + let minInterval: number | undefined; + if (dayDifference) { + minInterval = + dayDifference >= 89 // quarter + ? 28 * 3600 * 24 * 1000 + : dayDifference > 2 + ? 3600 * 24 * 1000 + : undefined; + } + return { + axisLine: { + show: false, }, - hideOverlap: true, - ...xAxis.axisLabel, - }, - axisLine: { - show: false, - }, - splitLine: { - show: true, - }, - minInterval, - } as XAXisOption; + splitLine: { + show: true, + }, + ...axis, + axisLabel: { + formatter: this._formatTimeLabel, + rich: { + bold: { + fontWeight: "bold", + }, + }, + hideOverlap: true, + ...axis.axisLabel, + }, + minInterval, + } as XAXisOption; + }); } const options = { animation: !this._reducedMotion, diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts index f6a03bd9c8..2ade954598 100644 --- a/src/components/chart/statistics-chart.ts +++ b/src/components/chart/statistics-chart.ts @@ -128,7 +128,8 @@ export class StatisticsChart extends LitElement { changedProps.has("hideLegend") || changedProps.has("startTime") || changedProps.has("endTime") || - changedProps.has("_legendData") + changedProps.has("_legendData") || + changedProps.has("_chartData") ) { this._createOptions(); } @@ -246,29 +247,38 @@ export class StatisticsChart extends LitElement { let startTime = this.startTime; if (!startTime) { - // Calculate default start time based on dayDifference - startTime = new Date( - endTime.getTime() - dayDifference * 24 * 3600 * 1000 - ); - - // Check chart data for earlier points + // set start time to the earliest point in the chart data this._chartData.forEach((series) => { - if (!Array.isArray(series.data)) return; - series.data.forEach((point) => { - const timestamp = Array.isArray(point) ? point[0] : point.value?.[0]; - if (new Date(timestamp) < startTime!) { - startTime = new Date(timestamp); - } - }); + if (!Array.isArray(series.data) || !series.data[0]) return; + const firstPoint = series.data[0] as any; + const timestamp = Array.isArray(firstPoint) + ? firstPoint[0] + : firstPoint.value?.[0]; + if (timestamp && (!startTime || new Date(timestamp) < startTime)) { + startTime = new Date(timestamp); + } }); + + if (!startTime) { + // Calculate default start time based on dayDifference + startTime = new Date( + endTime.getTime() - dayDifference * 24 * 3600 * 1000 + ); + } } this._chartOptions = { - xAxis: { - type: "time", - min: startTime, - max: endTime, - }, + xAxis: [ + { + type: "time", + min: startTime, + max: endTime, + }, + { + type: "time", + show: false, + }, + ], yAxis: { type: this.logarithmicScale ? "log" : "value", name: this.unit, @@ -462,6 +472,9 @@ export class StatisticsChart extends LitElement { displayedLegend = displayedLegend || showLegend; } statTypes.push(type); + const borderColor = + band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color; + const backgroundColor = band ? color + "3F" : color + "7F"; const series: LineSeriesOption | BarSeriesOption = { id: `${statistic_id}-${type}`, type: this.chartType, @@ -485,21 +498,16 @@ export class StatisticsChart extends LitElement { this.chartType === "bar" ? { borderRadius: [4, 4, 0, 0], - borderColor: - band && hasMean - ? color + (this.hideLegend ? "00" : "7F") - : color, + borderColor, borderWidth: 1.5, } : undefined, - color: - band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color, + color: this.chartType === "bar" ? backgroundColor : borderColor, }; if (band && this.chartType === "line") { series.stack = `band-${statistic_id}`; series.stackStrategy = "all"; (series as LineSeriesOption).symbol = "none"; - (series as LineSeriesOption).lineStyle = { width: 1.5 }; if (drawBands && type === "max") { (series as LineSeriesOption).areaStyle = { color: color + "3F", @@ -561,6 +569,7 @@ export class StatisticsChart extends LitElement { color, type: this.chartType, data: [], + xAxisIndex: 1, }); });