diff --git a/package.json b/package.json index a23062c..af8a61c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "power-distribution-card", - "version": "2.6.2", - "description": "A power distribution card for Home Assistant", + "name": "power-flow-card-plus", + "version": "0.0.8", + "description": "A power flow card for Home Assistant", "keywords": [ "home-assistant", "homeassistant", @@ -12,14 +12,14 @@ "main": "index.js", "repository": { "type": "git", - "url": "git+https://github.com/ulic75/power-distribution-card.git" + "url": "git+https://github.com/flixlix/power-flow-card-plus.git" }, "author": "", "license": "ISC", "bugs": { - "url": "https://github.com/ulic75/power-distribution-card/issues" + "url": "https://github.com/flixlix/power-flow-card-plus/issues" }, - "homepage": "https://github.com/ulic75/power-distribution-card#readme", + "homepage": "https://github.com/flixlix/power-flow-card-plus#readme", "scripts": { "build": "rollup -c", "lint": "eslint src/*", diff --git a/src/logging.ts b/src/logging.ts index 19c0f71..65487f8 100644 --- a/src/logging.ts +++ b/src/logging.ts @@ -4,7 +4,7 @@ import { version } from "../package.json"; // Log Version console.groupCollapsed( - `%c⚡ Power Flow Card v${version} is installed`, + `%c⚡ Power Flow Card Plus v${version} is installed`, "color: #488fc2; font-weight: bold" ); console.log("Readme:", "https://github.com/flixlix/power-flow-card-plus"); @@ -16,4 +16,4 @@ export const logError = debounce((error: string) => { "color: #488fc2; font-weight: bold", "color: #b33a3a; font-weight: normal" ); -}, 500); +}, 60000); diff --git a/src/power-flow-card-plus-config.ts b/src/power-flow-card-plus-config.ts index c7fd846..f1675ec 100644 --- a/src/power-flow-card-plus-config.ts +++ b/src/power-flow-card-plus-config.ts @@ -8,6 +8,15 @@ export interface PowerFlowCardConfig extends LovelaceCardConfig { grid: string | ComboEntity; solar?: string; home?: string; + fossil_fuel_percentage?: { + entity?: string; + name?: string; + icon?: string; + color?: string; + display_zero?: boolean; + state_type?: "percentage" | "power"; + color_icon?: boolean; + }; individual2?: { entity?: string; name?: string; diff --git a/src/power-flow-card-plus.ts b/src/power-flow-card-plus.ts index d906ce9..811a4bf 100644 --- a/src/power-flow-card-plus.ts +++ b/src/power-flow-card-plus.ts @@ -111,6 +111,43 @@ export class PowerFlowCard extends LitElement { return value * 1000; }; + private displayNonFossilState = (entity: string | undefined): string => { + if (!entity || !this.entityAvailable(entity)) { + this.unavailableOrMisconfiguredError(entity); + return "NaN"; + } + const unitOfMeasurement: "W" | "%" = + this._config!.entities.fossil_fuel_percentage?.state_type === "percentage" + ? "%" + : "W" || "W"; + const nonFossilFuelDecimal: number = 1 - this.getEntityState(entity) / 100; + let gridConsumption: number; + if (typeof this._config!.entities.grid === "string") { + gridConsumption = + this.getEntityStateWatts(this._config!.entities!.grid) > 0 + ? this.getEntityStateWatts(this._config!.entities!.grid) + : 0; + } else { + gridConsumption = + this.getEntityStateWatts(this._config!.entities!.grid!.consumption) > 0 + ? this.getEntityStateWatts(this._config!.entities!.grid!.consumption) + : 0; + } + /* based on choice, change output from watts to % */ + let result: string; + if (unitOfMeasurement === "W") { + const nonFossilFuelWatts = gridConsumption * nonFossilFuelDecimal; + result = this.displayValue(nonFossilFuelWatts); + } else { + const nonFossilFuelPercentage: number = 100 - this.getEntityState(entity); + result = nonFossilFuelPercentage + .toFixed(0) + .toString() + .concat(unitOfMeasurement); + } + return result; + }; + private displayValue = (value: number | null) => { if (value === null) return "0"; const isKW = value >= this._config!.watt_threshold; @@ -395,12 +432,100 @@ export class PowerFlowCard extends LitElement { this.previousDur[flowName] = newDur[flowName]; }); + const hasNonFossilFuelUsage = + gridConsumption * 1 - + this.getEntityState(entities.fossil_fuel_percentage?.entity) / 100 > + 0 && + entities.fossil_fuel_percentage?.entity !== undefined && + this.entityAvailable(entities.fossil_fuel_percentage?.entity); + + const hasFossilFuelPercentage = + (entities.fossil_fuel_percentage?.entity !== undefined && + entities.fossil_fuel_percentage?.display_zero === true) || + hasNonFossilFuelUsage; + + this.style.setProperty( + "--non-fossil-color", + this._config.entities.fossil_fuel_percentage?.color || + "var(--energy-non-fossil-color)" + ); + this.style.setProperty( + "--icon-non-fossil-color", + this._config.entities.fossil_fuel_percentage?.color_icon === true + ? "var(--non-fossil-color)" + : "var(--primary-text-color)" || "var(--non-fossil-color)" + ); + return html`
${hasSolarProduction || hasIndividual2 || hasIndividual1 ? html`
-
+ ${!hasFossilFuelPercentage + ? html`
` + : html`
+ ${!entities.fossil_fuel_percentage?.name + ? this.hass.localize( + "ui.panel.lovelace.cards.energy.energy_distribution.low_carbon" + ) + : entities.fossil_fuel_percentage?.name} +
void }) => { + e.stopPropagation(); + this.openDetails( + entities.fossil_fuel_percentage?.entity + ); + }} + @keyDown=${(e: { + key: string; + stopPropagation: () => void; + }) => { + if (e.key === "Enter") { + e.stopPropagation(); + this.openDetails( + entities.fossil_fuel_percentage?.entity + ); + } + }} + > + + ${this.displayNonFossilState( + entities!.fossil_fuel_percentage!.entity + )} +
+ + + ${hasNonFossilFuelUsage + ? svg` + + + + ` + : ""} + +
`} ${hasSolarProduction ? html`
${individual2Usage ? svg` @@ -508,7 +633,7 @@ export class PowerFlowCard extends LitElement { ${individual1Usage ? svg` @@ -832,15 +957,9 @@ export class PowerFlowCard extends LitElement { ${individual1Usage ? svg` { - e.stopPropagation(); - this.openDetails( - entities.individual1?.entity - ); - }} + vector-effect="non-scaling-stroke" >