Skip to content

Commit

Permalink
Detail view for energy devices graph (#19068)
Browse files Browse the repository at this point in the history
* Detail view for energy devices graph

* Use getCommonOptions

* Remove visibility toggle on horizontal bar chart

* make a new card

* unneeded translations

* graph titles

* Update src/translations/en.json

Co-authored-by: Paul Bottein <[email protected]>

---------

Co-authored-by: Paul Bottein <[email protected]>
  • Loading branch information
karwosts and piitaya authored Feb 20, 2024
1 parent 50cf6d2 commit 2a803e0
Show file tree
Hide file tree
Showing 6 changed files with 447 additions and 5 deletions.
21 changes: 17 additions & 4 deletions src/components/chart/ha-chart-base.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,8 @@ export class HaChartBase extends LitElement {

private _paddingYAxisInternal = 0;

private _datasetOrder: number[] = [];

public disconnectedCallback() {
super.disconnectedCallback();
this._releaseCanvas();
Expand Down Expand Up @@ -165,7 +167,17 @@ export class HaChartBase extends LitElement {
}
}

// put the legend labels in sorted order if provided
if (changedProps.has("data")) {
this._datasetOrder = this.data.datasets.map((_, index) => index);
if (this.data?.datasets.some((dataset) => dataset.order)) {
this._datasetOrder.sort(
(a, b) =>
(this.data.datasets[a].order || 0) -
(this.data.datasets[b].order || 0)
);
}

if (this.externalHidden) {
this._hiddenDatasets = new Set();
if (this.data?.datasets) {
Expand Down Expand Up @@ -205,8 +217,9 @@ export class HaChartBase extends LitElement {
${this.options?.plugins?.legend?.display === true
? html`<div class="chartLegend">
<ul>
${this.data.datasets.map((dataset, index) =>
this.extraData?.[index]?.show_legend === false
${this._datasetOrder.map((index) => {
const dataset = this.data.datasets[index];
return this.extraData?.[index]?.show_legend === false
? nothing
: html`<li
.datasetIndex=${index}
Expand All @@ -228,8 +241,8 @@ export class HaChartBase extends LitElement {
${this.extraData?.[index]?.legend_label ??
dataset.label}
</div>
</li>`
)}
</li>`;
})}
</ul>
</div>`
: ""}
Expand Down
7 changes: 7 additions & 0 deletions src/panels/energy/strategies/energy-view-strategy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,13 @@ export class EnergyViewStrategy extends ReactiveElement {

// Only include if we have at least 1 device in the config.
if (prefs.device_consumption.length) {
view.cards!.push({
title: hass.localize(
"ui.panel.energy.cards.energy_devices_detail_graph_title"
),
type: "energy-devices-detail-graph",
collection_key: "energy_dashboard",
});
view.cards!.push({
title: hass.localize(
"ui.panel.energy.cards.energy_devices_graph_title"
Expand Down
Loading

0 comments on commit 2a803e0

Please sign in to comment.