jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix statistics chart stacking and colors (#23922)

Browse Source
This commit is contained in:
Petar Petrov 2025-01-29 13:46:59 +02:00 committed by GitHub
parent 4b5c7fc2de
commit fcdcbbda05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/chart/statistics-chart.ts
View File

@ -181,11 +181,11 @@ export class StatisticsChart extends LitElement {
this.requestUpdate("_hiddenStats"); this.requestUpdate("_hiddenStats");
} }
private _renderTooltip(params: any) { private _renderTooltip = (params: any) =>
return params params
.map((param, index: number) => { .map((param, index: number) => {
const value = `${formatNumber( const value = `${formatNumber(
// max series has 3 values, as the second value is the max-min to form a band // max series can have 3 values, as the second value is the max-min to form a band
(param.value[2] ?? param.value[1]) as number, (param.value[2] ?? param.value[1]) as number,
this.hass.locale, this.hass.locale,
getNumberFormatOptions( getNumberFormatOptions(
@ -206,7 +206,6 @@ export class StatisticsChart extends LitElement {
`; `;
}) })
.join("<br>"); .join("<br>");
}
private _createOptions() { private _createOptions() {
const splitLineStyle = this.hass.themes?.darkMode ? { opacity: 0.15 } : {}; const splitLineStyle = this.hass.themes?.darkMode ? { opacity: 0.15 } : {};
@ -266,7 +265,7 @@ export class StatisticsChart extends LitElement {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
appendTo: document.body, appendTo: document.body,
formatter: this._renderTooltip.bind(this), formatter: this._renderTooltip,
}, },
}; };
} }
@ -438,10 +437,21 @@ export class StatisticsChart extends LitElement {
lineStyle: { lineStyle: {
width: 1.5, width: 1.5,
}, },
color: band && hasMean ? color + "3F" : color, itemStyle:
this.chartType === "bar"
? {
borderRadius: [4, 4, 0, 0],
borderColor:
band && hasMean
? color + (this.hideLegend ? "00" : "7F")
: color,
borderWidth: 1.5,
}
: undefined,
color: band ? color + "3F" : color + "7F",
}; };
if (band) { if (band && this.chartType === "line") {
series.stack = "band"; series.stack = `band-${statistic_id}`;
(series as LineSeriesOption).symbol = "none"; (series as LineSeriesOption).symbol = "none";
(series as LineSeriesOption).lineStyle = { (series as LineSeriesOption).lineStyle = {
opacity: 0, opacity: 0,
@ -476,7 +486,7 @@ export class StatisticsChart extends LitElement {
} else { } else {
val.push((stat.sum || 0) - firstSum); val.push((stat.sum || 0) - firstSum);
} }
} else if (type === "max") { } else if (type === "max" && this.chartType === "line") {
const max = stat.max || 0; const max = stat.max || 0;
val.push(max - (stat.min || 0)); val.push(max - (stat.min || 0));
val.push(max); val.push(max);