diff --git a/src/components/chart/chart-date-adapter.ts b/src/components/chart/chart-date-adapter.ts index c9f9003e71..fac7819453 100644 --- a/src/components/chart/chart-date-adapter.ts +++ b/src/components/chart/chart-date-adapter.ts @@ -134,7 +134,7 @@ _adapters._date.override({ this.options.config ); case "week": - return formatDate( + return formatDateVeryShort( new Date(time), this.options.locale, this.options.config diff --git a/src/components/chart/statistics-chart.ts b/src/components/chart/statistics-chart.ts index f518d0db73..89c6905eac 100644 --- a/src/components/chart/statistics-chart.ts +++ b/src/components/chart/statistics-chart.ts @@ -73,6 +73,8 @@ export class StatisticsChart extends LitElement { @property({ type: Boolean }) public isLoadingData = false; + @property() public period?: string; + @state() private _chartData: ChartData = { datasets: [] }; @state() private _statisticIds: string[] = []; @@ -92,7 +94,12 @@ export class StatisticsChart extends LitElement { } public willUpdate(changedProps: PropertyValues) { - if (!this.hasUpdated || changedProps.has("unit")) { + if ( + !this.hasUpdated || + changedProps.has("unit") || + changedProps.has("period") || + changedProps.has("chartType") + ) { this._createOptions(); } if ( @@ -160,6 +167,7 @@ export class StatisticsChart extends LitElement { }, }, ticks: { + source: this.chartType === "bar" ? "data" : undefined, maxRotation: 0, sampleSize: 5, autoSkipPadding: 20, @@ -173,6 +181,12 @@ export class StatisticsChart extends LitElement { }, time: { tooltipFormat: "datetime", + unit: + this.chartType === "bar" && + this.period && + ["hour", "day", "week", "month"].includes(this.period) + ? this.period + : undefined, }, }, y: { diff --git a/src/panels/lovelace/cards/hui-statistics-graph-card.ts b/src/panels/lovelace/cards/hui-statistics-graph-card.ts index 32806d002e..691123ab7d 100644 --- a/src/panels/lovelace/cards/hui-statistics-graph-card.ts +++ b/src/panels/lovelace/cards/hui-statistics-graph-card.ts @@ -193,6 +193,7 @@ export class HuiStatisticsGraphCard extends LitElement implements LovelaceCard { .isLoadingData=${!this._statistics} .statisticsData=${this._statistics} .metadata=${this._metadata} + .period=${this._config.period} .chartType=${this._config.chart_type || "line"} .statTypes=${this._statTypes!} .names=${this._names}