- `${context.dataset.label}: ${context.parsed.y} kWh`,
+ `${context.dataset.label}: ${formatNumber(
+ context.parsed.y,
+ this.hass.locale
+ )} kWh`,
},
},
filler: {
@@ -212,6 +220,8 @@ export class HuiEnergySolarGraphCard
hitRadius: 5,
},
},
+ // @ts-expect-error
+ locale: numberFormatToLocale(this.hass.locale),
};
}
@@ -219,6 +229,7 @@ export class HuiEnergySolarGraphCard
if (this._fetching) {
return;
}
+
const startDate = new Date();
startDate.setHours(0, 0, 0, 0);
startDate.setTime(startDate.getTime() - 1000 * 60 * 60); // subtract 1 hour to get a startpoint
@@ -273,20 +284,25 @@ export class HuiEnergySolarGraphCard
endTime = new Date();
}
+ const computedStyles = getComputedStyle(this);
+ const solarColor = computedStyles
+ .getPropertyValue("--energy-solar-color")
+ .trim();
+
solarSources.forEach((source, idx) => {
const data: ChartDataset<"bar" | "line">[] = [];
const entity = this.hass.states[source.stat_energy_from];
const borderColor =
idx > 0
- ? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(SOLAR_COLOR)), idx)))
- : SOLAR_COLOR;
+ ? rgb2hex(lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx)))
+ : solarColor;
data.push({
label: `Production ${
entity ? computeStateName(entity) : source.stat_energy_from
}`,
- borderColor: borderColor,
+ borderColor,
backgroundColor: borderColor + "7F",
data: [],
});
@@ -307,7 +323,7 @@ export class HuiEnergySolarGraphCard
if (prevStart === point.start) {
continue;
}
- const value = Math.round((point.sum - prevValue) * 100) / 100;
+ const value = point.sum - prevValue;
const date = new Date(point.start);
data[0].data.push({
x: date.getTime(),
@@ -347,7 +363,9 @@ export class HuiEnergySolarGraphCard
}`,
fill: false,
stepped: false,
- borderColor: "#000",
+ borderColor: computedStyles.getPropertyValue(
+ "--primary-text-color"
+ ),
borderDash: [7, 5],
pointRadius: 0,
data: [],
@@ -386,6 +404,9 @@ export class HuiEnergySolarGraphCard
ha-card {
height: 100%;
}
+ .card-header {
+ padding-bottom: 0;
+ }
.content {
padding: 16px;
}
diff --git a/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
new file mode 100644
index 0000000000..44f4336609
--- /dev/null
+++ b/src/panels/lovelace/cards/energy/hui-energy-sources-table-card.ts
@@ -0,0 +1,426 @@
+// @ts-ignore
+import dataTableStyles from "@material/data-table/dist/mdc.data-table.min.css";
+import {
+ css,
+ CSSResultGroup,
+ html,
+ LitElement,
+ TemplateResult,
+ unsafeCSS,
+} from "lit";
+import { customElement, property, state } from "lit/decorators";
+import { styleMap } from "lit/directives/style-map";
+import {
+ rgb2hex,
+ lab2rgb,
+ rgb2lab,
+ hex2rgb,
+} from "../../../../common/color/convert-color";
+import { labDarken } from "../../../../common/color/lab";
+import { computeStateName } from "../../../../common/entity/compute_state_name";
+import { formatNumber } from "../../../../common/string/format_number";
+import "../../../../components/chart/statistics-chart";
+import "../../../../components/ha-card";
+import {
+ EnergyInfo,
+ energySourcesByType,
+ getEnergyInfo,
+} from "../../../../data/energy";
+import {
+ calculateStatisticSumGrowth,
+ fetchStatistics,
+ Statistics,
+} from "../../../../data/history";
+import { HomeAssistant } from "../../../../types";
+import { LovelaceCard } from "../../types";
+import { EnergySourcesTableCardConfig } from "../types";
+
+@customElement("hui-energy-sources-table-card")
+export class HuiEnergySourcesTableCard
+ extends LitElement
+ implements LovelaceCard
+{
+ @property({ attribute: false }) public hass!: HomeAssistant;
+
+ @state() private _config?: EnergySourcesTableCardConfig;
+
+ @state() private _stats?: Statistics;
+
+ @state() private _energyInfo?: EnergyInfo;
+
+ public getCardSize(): Promise
| number {
+ return 3;
+ }
+
+ public setConfig(config: EnergySourcesTableCardConfig): void {
+ this._config = config;
+ }
+
+ public willUpdate() {
+ if (!this.hasUpdated) {
+ this._getEnergyInfo().then(() => this._getStatistics());
+ }
+ }
+
+ protected render(): TemplateResult {
+ if (!this.hass || !this._config) {
+ return html``;
+ }
+
+ if (!this._stats) {
+ return html`Loading...`;
+ }
+
+ let totalGrid = 0;
+ let totalSolar = 0;
+ let totalCost = 0;
+
+ const types = energySourcesByType(this._config.prefs);
+
+ const computedStyles = getComputedStyle(this);
+ const solarColor = computedStyles
+ .getPropertyValue("--energy-solar-color")
+ .trim();
+ const returnColor = computedStyles
+ .getPropertyValue("--energy-grid-return-color")
+ .trim();
+ const consumptionColor = computedStyles
+ .getPropertyValue("--energy-grid-consumption-color")
+ .trim();
+
+ const showCosts =
+ types.grid?.[0].flow_from.some(
+ (flow) =>
+ flow.stat_cost || flow.entity_energy_price || flow.number_energy_price
+ ) ||
+ types.grid?.[0].flow_to.some(
+ (flow) =>
+ flow.stat_compensation ||
+ flow.entity_energy_price ||
+ flow.number_energy_price
+ );
+
+ return html`
+ ${this._config.title
+ ? html``
+ : ""}
+
+
+
+
+
+
+
+ ${types.solar?.map((source, idx) => {
+ const entity = this.hass.states[source.stat_energy_from];
+ const energy =
+ calculateStatisticSumGrowth(
+ this._stats![source.stat_energy_from]
+ ) || 0;
+ totalSolar += energy;
+ const color =
+ idx > 0
+ ? rgb2hex(
+ lab2rgb(labDarken(rgb2lab(hex2rgb(solarColor)), idx))
+ )
+ : solarColor;
+ return html`
+ |
+
+ |
+
+ ${entity
+ ? computeStateName(entity)
+ : source.stat_energy_from}
+ |
+
+ ${formatNumber(energy, this.hass.locale)} kWh
+ |
+ ${showCosts
+ ? html` | `
+ : ""}
+
`;
+ })}
+ ${types.solar
+ ? html`
+ |
+
+ Solar total
+ |
+
+ ${formatNumber(totalSolar, this.hass.locale)} kWh
+ |
+ ${showCosts
+ ? html` | `
+ : ""}
+
`
+ : ""}
+ ${types.grid?.map(
+ (source) => html`${source.flow_from.map((flow, idx) => {
+ const entity = this.hass.states[flow.stat_energy_from];
+ const energy =
+ calculateStatisticSumGrowth(
+ this._stats![flow.stat_energy_from]
+ ) || 0;
+ totalGrid += energy;
+ const cost_stat =
+ flow.stat_cost ||
+ this._energyInfo!.cost_sensors[flow.stat_energy_from];
+ const cost = cost_stat
+ ? calculateStatisticSumGrowth(this._stats![cost_stat])
+ : null;
+ if (cost !== null) {
+ totalCost += cost;
+ }
+ const color =
+ idx > 0
+ ? rgb2hex(
+ lab2rgb(
+ labDarken(rgb2lab(hex2rgb(consumptionColor)), idx)
+ )
+ )
+ : consumptionColor;
+ return html`
+ |
+
+ |
+
+ ${entity
+ ? computeStateName(entity)
+ : flow.stat_energy_from}
+ |
+
+ ${formatNumber(energy, this.hass.locale)} kWh
+ |
+ ${showCosts
+ ? html`
+ ${cost !== null
+ ? formatNumber(cost, this.hass.locale, {
+ style: "currency",
+ currency: this.hass.config.currency!,
+ })
+ : ""}
+ | `
+ : ""}
+
`;
+ })}
+ ${source.flow_to.map((flow, idx) => {
+ const entity = this.hass.states[flow.stat_energy_to];
+ const energy =
+ (calculateStatisticSumGrowth(
+ this._stats![flow.stat_energy_to]
+ ) || 0) * -1;
+ totalGrid += energy;
+ const cost_stat =
+ flow.stat_compensation ||
+ this._energyInfo!.cost_sensors[flow.stat_energy_to];
+ const cost = cost_stat
+ ? calculateStatisticSumGrowth(this._stats![cost_stat])
+ : null;
+ if (cost !== null) {
+ totalCost += cost;
+ }
+ const color =
+ idx > 0
+ ? rgb2hex(
+ lab2rgb(labDarken(rgb2lab(hex2rgb(returnColor)), idx))
+ )
+ : returnColor;
+ return html`
+ |
+
+ |
+
+ ${entity ? computeStateName(entity) : flow.stat_energy_to}
+ |
+
+ ${formatNumber(energy, this.hass.locale)} kWh
+ |
+ ${showCosts
+ ? html`
+ ${cost !== null
+ ? formatNumber(cost, this.hass.locale, {
+ style: "currency",
+ currency: this.hass.config.currency!,
+ })
+ : ""}
+ | `
+ : ""}
+
`;
+ })}`
+ )}
+ ${types.grid
+ ? html`
+ |
+ Grid total |
+
+ ${formatNumber(totalGrid, this.hass.locale)} kWh
+ |
+ ${showCosts
+ ? html`
+ ${formatNumber(totalCost, this.hass.locale, {
+ style: "currency",
+ currency: this.hass.config.currency!,
+ })}
+ | `
+ : ""}
+
`
+ : ""}
+
+
+
+
-
-
- ${this._chartData.datasets.map(
- (dataset) => html`-
-
- ${formatNumber(
- Math.abs(
- dataset.data.reduce(
- (total, point) => total + (point as any).y,
- 0
- ) as number
- ),
- this.hass.locale
- )}
- kWh
-
`
- )}
-
-