jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix spacing & colors in statistics-graph chart (#24068)

Browse Source 
* Fix statistic chart colors

* Fix spacing in statistics-graph

* set start time based on data
This commit is contained in:
Petar Petrov 2025-02-05 11:22:31 +02:00 committed by GitHub
parent f0507a88a6
commit b4a3f4cb2c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 77 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/chart/ha-chart-base.ts
View File

@ -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,

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

@ -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();
}
@ -249,29 +250,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,
@ -465,6 +475,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,
@ -488,21 +501,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",
@ -564,6 +572,7 @@ export class StatisticsChart extends LitElement {
color,
type: this.chartType,
data: [],
xAxisIndex: 1,
});
});