Fix statistics echarts with negative values (#23983)

* Fix statistics echarts with negative values

* fix border-radius of negative bar values

* revert timeline label width to previous max values
This commit is contained in:
Petar Petrov 2025-01-31 12:02:39 +02:00 committed by GitHub
parent a8712e3b8e
commit 938855e13c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 18 additions and 9 deletions

View File

@ -183,7 +183,7 @@ export class StateHistoryChartTimeline extends LitElement {
private _createOptions() {
const narrow = this.narrow;
const showNames = this.chunked || this.showNames;
const maxInternalLabelWidth = narrow ? 70 : 165;
const maxInternalLabelWidth = narrow ? 105 : 185;
const labelWidth = showNames
? Math.max(this.paddingYAxis, this._yWidth)
: 0;

View File

@ -375,10 +375,12 @@ export class StatisticsChart extends LitElement {
) {
// if the end of the previous data doesn't match the start of the current data,
// we have to draw a gap so add a value at the end time, and then an empty value.
d.data!.push([prevEndTime, ...prevValues[i]!]);
d.data!.push(
this._transformDataValue([prevEndTime, ...prevValues[i]!])
);
d.data!.push([prevEndTime, null]);
}
d.data!.push([start, ...dataValues[i]!]);
d.data!.push(this._transformDataValue([start, ...dataValues[i]!]));
});
prevValues = dataValues;
prevEndTime = end;
@ -455,14 +457,14 @@ export class StatisticsChart extends LitElement {
borderWidth: 1.5,
}
: undefined,
color: band ? color + "3F" : color + "7F",
color:
band && hasMean ? color + (this.hideLegend ? "00" : "7F") : color,
};
if (band && this.chartType === "line") {
series.stack = `band-${statistic_id}`;
series.stackStrategy = "all";
(series as LineSeriesOption).symbol = "none";
(series as LineSeriesOption).lineStyle = {
opacity: 0,
};
(series as LineSeriesOption).lineStyle = { width: 1.5 };
if (drawBands && type === "max") {
(series as LineSeriesOption).areaStyle = {
color: color + "3F",
@ -495,7 +497,7 @@ export class StatisticsChart extends LitElement {
}
} else if (type === "max" && this.chartType === "line") {
const max = stat.max || 0;
val.push(max - (stat.min || 0));
val.push(Math.abs(max - (stat.min || 0)));
val.push(max);
} else {
val.push(stat[type] ?? null);
@ -535,6 +537,13 @@ export class StatisticsChart extends LitElement {
this._statisticIds = statisticIds;
}
private _transformDataValue(val: [Date, ...(number | null)[]]) {
if (this.chartType === "bar" && val[1] && val[1] < 0) {
return { value: val, itemStyle: { borderRadius: [0, 0, 4, 4] } };
}
return val;
}
static styles = css`
:host {
display: block;

View File

@ -244,7 +244,7 @@ export class HuiHistoryGraphCard extends LitElement implements LovelaceCard {
})}`;
const columns = this._config.grid_options?.columns ?? 12;
const narrow = Number.isNaN(columns) || Number(columns) < 12;
const narrow = Number.isNaN(columns) || Number(columns) <= 12;
return html`
<ha-card>