molikk · molikk · Feb 21, 2025 · Feb 21, 2025
diff --git a/dist/mlk-power-flow-card.js b/dist/mlk-power-flow-card.js
diff --git a/src/cards/compact-card.ts b/src/cards/compact-card.ts
@@ -82,15 +82,15 @@ export const compactCard = (config: PowerFlowCardConfig, inverterImg: string, da
 	Grid.gridColour = data.gridColour;
 	Grid.decimalPlaces = data.decimalPlaces;
 
-	let calculated_minX = calculateMinX(config);
-	let calculated_minY = calculateMinY(config);
-	let calculated_width = calculateWidth(config);
-	let calculated_height = calculateHeight(config);
+	const calculated_minX = calculateMinX(config);
+	const calculated_minY = calculateMinY(config);
+	const calculated_width = calculateWidth(config);
+	const calculated_height = calculateHeight(config);
 
-	let minX = config.viewbox?.viewbox_min_x ? config.viewbox.viewbox_min_x : config.wide_view_mode ? 0 : calculated_minX;
-	let minY = config.viewbox?.viewbox_min_y ? config.viewbox.viewbox_min_y : calculated_minY;
-	let width = config.viewbox?.viewbox_width ? config.viewbox.viewbox_width : config.wide_view_mode ? 720 - minX : calculated_width - minX;
-	let height = config.viewbox?.viewbox_height ? config.viewbox.viewbox_height : calculated_height - calculated_minY;
+	const minX = config.viewbox?.viewbox_min_x ? config.viewbox.viewbox_min_x : config.wide_view_mode ? 0 : calculated_minX;
+	const minY = config.viewbox?.viewbox_min_y ? config.viewbox.viewbox_min_y : calculated_minY;
+	const width = config.viewbox?.viewbox_width ? config.viewbox.viewbox_width : config.wide_view_mode ? 720 - minX : calculated_width - minX;
+	const height = config.viewbox?.viewbox_height ? config.viewbox.viewbox_height : calculated_height - calculated_minY;
 
 	function gridXTransform() {
 		return config.wide_view_mode ? calculated_minX - minX : 0;

diff --git a/src/cards/compact/auxLoad.ts b/src/cards/compact/auxLoad.ts
@@ -110,7 +110,7 @@ export class AuxLoad {
 		return svg`
 			${data.stateAuxPower.isValid() ?
 			svg`
-				<a href="#" @click=${(e:Event) => Utils.handlePopup(e, config.stateAuxPower.entity_id)}>
+				<a href="#" @click=${(e: Event) => Utils.handlePopup(e, config.stateAuxPower.entity_id)}>
 					<text id="aux_power" x="${x}" y="155.5" class="${data.largeFont !== true ? 'st14' : 'st4'} st8" 
 						  fill="${data.auxLoadMainDynamicColour}">
 						  ${value}
@@ -126,21 +126,26 @@ export class AuxLoad {
 	}
 
 	static generateDailyLoad(data: DataDto, config: PowerFlowCardConfig) {
-		return svg`
-			<a href="#" @click=${(e:Event) => Utils.handlePopup(e, config.entities.day_aux_energy)}>
+		const dailyLoadValue = config.load?.show_daily_aux && data.stateDayAuxEnergy.isValid() ? svg`
+			<a href="#" @click=${(e: Event) => Utils.handlePopup(e, config.entities.day_aux_energy)}>
 				<text id="daily_load_value" x="${this.mainX + 10}" y="87"
-					  class="st10 left-align" display="${!config.load?.show_daily_aux || !data.stateDayAuxEnergy.isValid() ? 'none' : ''}"
-					  fill="${data.auxLoadMainDynamicColour}">
+						class="st10 left-align"
+					  	fill="${data.auxLoadMainDynamicColour}">
 					${data.stateDayAuxEnergy?.toPowerString(true, data.decimalPlacesEnergy)}
 				</text>
-			</a>
+			</a>`
+			: svg``;
+		const dailyLoadName = svg`
 			<text id="daily_load" 
 					x="${this.mainX + 10}" y="100"
 				    class="st3 left-align"
-				    fill="${!config.load?.show_daily_aux ? 'transparent' : `${data.auxLoadMainDynamicColour}`}">
+				    fill="${(config.load?.show_daily_aux ? `${data.auxLoadMainDynamicColour}` : 'transparent')}">
 				${config.load?.aux_daily_name ? config.load?.aux_daily_name : localize('common.daily_aux')}
-			</text>
-		`;
+			</text>`;
 
+		return svg`
+			${dailyLoadValue}
+			${dailyLoadName}
+		`;
 	}
 }
diff --git a/src/cards/compact/battery.ts b/src/cards/compact/battery.ts
@@ -163,7 +163,7 @@ export class Battery {
 		let keyPoints = data.batteryPower > 0 ? '1;0' : '0;1';
 		keyPoints = config.battery.invert_flow ? Utils.invertKeyPoints(keyPoints) : keyPoints;
 
-		let circle = data.batteryPower != 0 && config.low_resources.animations ? svg`
+		const circle = data.batteryPower != 0 && config.low_resources.animations ? svg`
 			<circle id="power-dot" cx="0" cy="0"
 					r="${Math.min(2 + data.batLineWidth + Math.max(data.minLineWidth - 2, 0), 8)}"
 					fill="${Battery.batteryColour(data, config)}">
@@ -212,8 +212,8 @@ export class Battery {
 				</a>`;
 		}
 
-		let shutdown = config.battery.shutdown_soc_offgrid || config.battery.shutdown_soc || 0;
-		let storage = config.battery.remaining_energy_to_shutdown
+		const shutdown = config.battery.shutdown_soc_offgrid || config.battery.shutdown_soc || 0;
+		const storage = config.battery.remaining_energy_to_shutdown
 			? Utils.toNum((data.batteryEnergy * ((data.stateBatterySoc.toNum(2) - shutdown) / 100) / 1000), 2).toFixed(2)
 			: Utils.toNum((data.batteryEnergy * (data.stateBatterySoc.toNum(2) / 100) / 1000), 2).toFixed(2);
 
@@ -228,48 +228,54 @@ export class Battery {
 
 	static generateSOC(data: DataDto, config: PowerFlowCardConfig) {
 		const y = Battery.showOuterBatteryBanks(config) ? 335 : 351;
-		return svg`
-			<a href="#" @click=${(e:Event) => Utils.handlePopup(e, config.entities.battery_soc_184)}>
-				<text id="battery_prog_soc_184" x="330" y="${y + 7}" fill=${data.batteryColour}
+		const batterySoc = svg`
+			<a href="#" @click=${(e: Event) => Utils.handlePopup(e, data.stateBatterySoc.entity_id)}>
+          		<text id="battery_soc_184" x="270" y="${y + 7}" fill=${data.batteryColour} 
+	                class="${config.battery.hide_soc ? 'st12' : 'st13 st8 left-align'}"
+	                display="${data.stateBatterySoc.isValid() ? '' : 'none'}" >
+	              ${data.stateBatterySoc.toStr(data.stateBatterySoc.toNum(1) === 100.0 ? 0 : 1)}%
+          		</text>
+	      	</a>`;
+		const batterySocProg = data.inverterProg.show?svg`
+			<a href="#" @click=${(e: Event) => Utils.handlePopup(e, config.entities.battery_soc_184)}>
+				<text id="battery_prog_soc_184_capacity" x="330" y="${y + 7}" fill=${data.batteryColour}
 						class="st13 st8 left-align"
-						display="${!data.inverterProg.show || config.entities.battery_soc_184 === 'none' || config.battery.hide_soc ? 'none' : ''}">
+						display="${config.entities.battery_soc_184 === 'none' || config.battery.hide_soc ? 'none' : ''}">
 					| ${data.inverterProg.capacity || 0}%
 				</text>
 			</a>
-			<a href="#" @click=${(e:Event) => Utils.handlePopup(e, config.entities.battery_soc_184)}>
-				<text id="battery_prog_soc_184" x="330" y="${y + 7}" fill=${data.batteryColour}
+			<a href="#" @click=${(e: Event) => Utils.handlePopup(e, config.entities.battery_soc_184)}>
+				<text id="battery_prog_soc_184_soc_shutdown" x="330" y="${y + 7}" fill=${data.batteryColour}
 				    	class="${config.battery.hide_soc ? 'st12' : 'st13 st8 left-align'}"
-				    	display="${!data.inverterProg.show && config.battery?.shutdown_soc && !config.battery?.shutdown_soc_offgrid ? '' : 'none'}">
+				    	display="${config.battery?.shutdown_soc && !config.battery?.shutdown_soc_offgrid ? '' : 'none'}">
 			  		| ${data.batteryShutdown || 0}%
 				</text>
 			</a>
-        	<a href="#" @click=${(e:Event) => Utils.handlePopup(e, data.stateBatterySoc.entity_id)}>
-          		<text id="battery_soc_184" x="270" y="${y + 7}" fill=${data.batteryColour} 
-	                class="${config.battery.hide_soc ? 'st12' : 'st13 st8 left-align'}"
-	                display="${data.stateBatterySoc.isValid() ? '' : 'none'}" >
-	              ${data.stateBatterySoc.toStr(data.stateBatterySoc.toNum(1) === 100.0 ? 0 : 1)}%
-          		</text>
-	      	</a>
-			<text id="battery_soc_184" x="331" y="${y + 7}" fill=${data.batteryColour}
+			<text id="battery_prog_soc_184_line" x="331" y="${y + 7}" fill=${data.batteryColour}
               		class="${config.battery.hide_soc ? 'st12' : 'st13 st8 left-align'}"
-              		display="${!data.inverterProg.show && config.battery.shutdown_soc_offgrid ? '' : 'none'}" >
+              		display="${config.battery.shutdown_soc_offgrid ? '' : 'none'}" >
                 |
         	</text>
-		    <text id="battery_prog_soc_184" x="343" y="${y}" fill=${data.batteryColour}
+		    <text id="battery_prog_soc_184_shutdown" x="343" y="${y}" fill=${data.batteryColour}
 		  			class="${config.battery.hide_soc ? 'st12' : 'st14 left-align'}"
-				  	display="${!data.inverterProg.show && config.battery?.shutdown_soc_offgrid ? '' : 'none'}">
+				  	display="${config.battery?.shutdown_soc_offgrid ? '' : 'none'}">
 				${data.batteryShutdown}%
 			</text>
-			<text id="battery_prog_soc_184" x="343" y="${y + 13}" fill=${data.batteryColour}
+			<text id="battery_prog_soc_184_offgrid" x="343" y="${y + 13}" fill=${data.batteryColour}
 		  			class="${config.battery.hide_soc ? 'st12' : 'st14 left-align'}"
-				  	display="${!data.inverterProg.show && config.battery?.shutdown_soc_offgrid ? '' : 'none'}">
+				  	display="${config.battery?.shutdown_soc_offgrid ? '' : 'none'}">
 				${data.shutdownOffGrid}%
-			</text>`;
+			</text>`
+			:svg``;
+		return svg `
+			${batterySoc}
+			${batterySocProg}
+        	`;
 	}
 
 	static generateBatteryGradient(data: DataDto, config: PowerFlowCardConfig) {
 		const y = Battery.showOuterBatteryBanks(config) ? 312.5 : 325.5;
-		let bat = svg`
+		const bat = svg`
 			<svg xmlns="http://www.w3.org/2000/svg" id="bat-frame" x="212.5"
 				 y="${y}" width="78.75"
 				 height="78.75" preserveAspectRatio="none"

diff --git a/src/cards/compact/batteryBank.ts b/src/cards/compact/batteryBank.ts
@@ -50,7 +50,7 @@ export class BatteryBank {
 			return svg``;
 		}
 		const banks = config.battery.battery_banks;
-		let width = 40,
+		const width = 40,
 			startX = 195 - (width + 3) * (banks > 4 ? banks - 4 : 0);
 
 		let result = svg`${this.generateOuterTitle(config.battery.battery_banks, startX + 5, data.batteryColour)}`;
@@ -202,7 +202,7 @@ export class BatteryBank {
 	}
 
 	private static getStorage(storageEntity: CustomEntity, config: PowerFlowCardConfig, batteryEnergy: number, socEntity: CustomEntity) {
-		let shutdown = config.battery.shutdown_soc_offgrid || config.battery.shutdown_soc || 0;
+		const shutdown = config.battery.shutdown_soc_offgrid || config.battery.shutdown_soc || 0;
 		return storageEntity?.isValid()
 			? storageEntity.toStr(2)
 			: config.battery.remaining_energy_to_shutdown

diff --git a/src/cards/compact/essentialLoad.ts b/src/cards/compact/essentialLoad.ts
@@ -82,15 +82,15 @@ export class EssentialLoad {
 							fill="${data.dynamicColourEssentialLoad1}">
 						${config.load?.load1_name ? `${config.load.load1_name}` : ''}
 					</text>
-					<a href="#" @click=${(e:Event) => Utils.handlePopup(e, data.stateEssentialLoad1.entity_id)}>
+					<a href="#" @click=${(e: Event) => Utils.handlePopup(e, data.stateEssentialLoad1.entity_id)}>
 						<text id="ess_load1" x="${powerColumn0}" y="${isAux ? '158' : '143'}"
 								display="${data.additionalLoads <= 3 && data.stateEssentialLoad1.isValid() ? '' : 'none'}"
 								class="${data.largeFont !== true ? 'st14' : 'st4'} st8"
 								fill="${data.dynamicColourEssentialLoad1}">
 							${data.stateEssentialLoad1?.toPowerString(config.load.auto_scale, data.decimalPlaces)}
 						</text>
 					</a>				
-					<a href="#" @click=${(e:Event) => Utils.handlePopup(e, data.stateEssentialLoad1Extra.entity_id)}>
+					<a href="#" @click=${(e: Event) => Utils.handlePopup(e, data.stateEssentialLoad1Extra.entity_id)}>
 						<text id="ess_load1_extra" x="${extraColumn2}" y="${isAux ? '182' : '167'}"
 									display="${(data.stateEssentialLoad1Extra.entity_id && data.additionalLoads <= 3) && data.stateEssentialLoad1Extra.isValid() ? '' : 'none'}"
 									class="st3 left-align" fill="${data.dynamicColourEssentialLoad1}">
@@ -147,15 +147,15 @@ export class EssentialLoad {
 							fill="${data.dynamicColourEssentialLoad2}">
 						${config.load?.load2_name ? `${config.load.load2_name}` : ''}
 					</text>
-					<a href="#" @click=${(e:Event) => Utils.handlePopup(e, data.stateEssentialLoad2.entity_id)}>
+					<a href="#" @click=${(e: Event) => Utils.handlePopup(e, data.stateEssentialLoad2.entity_id)}>
 						<text id="ess_load2" x="${powerColumn0}" y="302.5"
 									display="${data.stateEssentialLoad2.isValid() ? '' : 'none'}"
 									class="${data.largeFont !== true ? 'st14' : 'st4'} st8"
 									fill="${data.dynamicColourEssentialLoad2}">
 							${data.stateEssentialLoad2?.toPowerString(config.load.auto_scale, data.decimalPlaces)}
 						</text>
 					</a>
-					<a href="#" @click=${(e:Event) => Utils.handlePopup(e, data.stateEssentialLoad2Extra.entity_id)}>
+					<a href="#" @click=${(e: Event) => Utils.handlePopup(e, data.stateEssentialLoad2Extra.entity_id)}>
 						<text id="ess_load2_extra" x="${extraColumn2}" y="278"
 									display="${data.stateEssentialLoad2Extra.isValid() ? '' : 'none'}"
 									class="st3 left-align" fill="${data.dynamicColourEssentialLoad2}">
@@ -184,7 +184,7 @@ export class EssentialLoad {
 			)}`;
 		}
 
-		svg`
+		return svg`
 		${LoadUtils.generateEssentialLoadInternal(3, data.iconEssentialLoad3,
 			data.dynamicColourEssentialLoad3,
 			config.load?.load3_name,

diff --git a/src/cards/compact/grid.ts b/src/cards/compact/grid.ts
@@ -89,8 +89,8 @@ export class Grid {
 
 		const isEnergyFlowing = Math.abs(data.totalGridPower) > Utils.toNum(config.grid?.off_threshold, 0)
 
-		let circle1 = this.getCircle(isEnergyFlowing && config.low_resources.animations, 'grid-dot1', data, animationDuration, keyPoints, '#grid-line1');
-		let circle2 = this.getCircle(isEnergyFlowing && config.low_resources.animations, 'grid-dot2', data, data.durationCur['grid'], keyPoints, '#grid-line2');
+		const circle1 = this.getCircle(isEnergyFlowing && config.low_resources.animations, 'grid-dot1', data, animationDuration, keyPoints, '#grid-line1');
+		const circle2 = this.getCircle(isEnergyFlowing && config.low_resources.animations, 'grid-dot2', data, data.durationCur['grid'], keyPoints, '#grid-line2');
 
 		return svg`
 			<svg id="grid-flow1" style="overflow: visible">

diff --git a/src/cards/compact/inverter.ts b/src/cards/compact/inverter.ts
@@ -8,7 +8,7 @@ import { LoadUtils } from './loadUtils';
 export class Inverter {
 
 	static generateInverterImage(data: DataDto, config: PowerFlowCardConfig, inverterImg: string) {
-		let inverter = svg`
+		const inverter = svg`
 			${data.genericInverterImage ?
 			svg`<svg xmlns="http://www.w3.org/2000/svg" x="213.5" y="179.5" width="54"
 					 height="79" viewBox="0 0 74 91" preserveAspectRatio="xMidYMid meet"
@@ -129,14 +129,14 @@ export class Inverter {
 	}
 
 	static generateTemperatures(data: DataDto, config: PowerFlowCardConfig) {
-		let ac = config.inverter?.ac_icon
+		const ac = config.inverter?.ac_icon
 			? LoadUtils.getIconWithStyle(178, 218, config.inverter.ac_icon, data.inverterColour, 16, 10)
 			: svg`
 				<text id="ac_temp" x="190" y="229" class="st3 right-align" fill="${data.inverterColour}"
                       display="${config.entities?.radiator_temp_91 && data.stateRadiatorTemp.isValid() ? '' : 'none'}">
                     AC:
                 </text>`;
-		let dc = config.inverter?.dc_icon
+		const dc = config.inverter?.dc_icon
 			? LoadUtils.getIconWithStyle(178, 230, config.inverter.dc_icon, data.inverterColour, 16, 10)
 			: svg`
 			<text id="dc_temp" x="190" y="241" class="st3 right-align" fill="${data.inverterColour}"

diff --git a/src/cards/compact/load.ts b/src/cards/compact/load.ts
@@ -91,11 +91,11 @@ export class Load {
 			? svg`<text id="load-power-L1" x="${x}" y="241" class="st3 left-align" fill="${data.loadColour}">
 				${config.load.auto_scale ? `${Utils.convertValue(data.loadPowerL1, data.decimalPlaces) || 0}` : `${data.loadPowerL1 || 0} ${UnitOfPower.WATT}`}
 			</text>` : svg``;
-		let l2 = config.entities?.load_power_L2
+		const l2 = config.entities?.load_power_L2
 			? svg`<text id="load-power-L2" x="${x}" y="254" class="st3 left-align" fill="${data.loadColour}">
 				${config.load.auto_scale ? `${Utils.convertValue(data.loadPowerL2, data.decimalPlaces) || 0}` : `${data.loadPowerL2 || 0} ${UnitOfPower.WATT}`}
 			</text>` : svg``;
-		let l3 = config.entities?.load_power_L3
+		const l3 = config.entities?.load_power_L3
 			? svg`<text id="load-power-L3" x="${x}" y="267" class="st3 left-align" fill="${data.loadColour}">
 				${config.load.auto_scale ? `${Utils.convertValue(data.loadPowerL3, data.decimalPlaces) || 0}` : `${data.loadPowerL3 || 0} ${UnitOfPower.WATT}`}
 			</text>` : svg``;
@@ -139,7 +139,7 @@ export class Load {
 
 	static generateIcon(data: DataDto, config: PowerFlowCardConfig) {
 
-		let grid = svg`
+		const grid = svg`
 			<svg xmlns="http://www.w3.org/2000/svg" id="essen" x="${data.essIconSize === 1 ? this.LOAD_X + 5 : this.LOAD_X + 2}"
 				 y="${data.essIconSize === 1 ? '186' : '177.5'}" width="${data.essIconSize === 1 ? '75' : '79'}"
 				 height="${data.essIconSize === 1 ? '75' : '79'}"

diff --git a/src/cards/compact/loadUtils.ts b/src/cards/compact/loadUtils.ts
@@ -73,7 +73,7 @@ export class LoadUtils {
 					${localize('common.' + (toggle?.toOnOff() || 'off'))}
 				</text>
 			</a>`;
-		let powerStr = power?.isValidElectric()
+		const powerStr = power?.isValidElectric()
 			? power?.toPowerString(loadAutoScale, decimalPlaces)
 			: power?.isValidTime()
 				? power.toShortTime(true)
@@ -87,7 +87,7 @@ export class LoadUtils {
 				${powerStr}
 				</text>
 			</a>` : svg``;
-		let energyStr = energy?.isValidElectric()
+		const energyStr = energy?.isValidElectric()
 			? energy?.toPowerString(loadAutoScale, decimalPlaces)
 			: energy?.isValidTime()
 				? energy.toShortTime(true)

diff --git a/src/cards/compact/solar.ts b/src/cards/compact/solar.ts
@@ -105,7 +105,7 @@ export class Solar {
 
 		let daily = svg``, monthly = svg``, yearly = svg``, total = svg``, remaining = svg``, tomorrow = svg``;
 
-		let no: number = this.countGenerationElements(data);
+		const no: number = this.countGenerationElements(data);
 		if (no == 0) {
 			return svg``;
 		}