Merge pull request #461 from flixlix/452-disable-moving-dots

feat: ✨ disable dots

src/components/flows/batteryGrid.ts

@@ -5,6 +5,7 @@ import { html, svg } from "lit";
 import { styleLine } from "../../utils/styleLine";
 import { type Flows } from "./index";
 import { checkHasRightIndividual } from "../../utils/computeIndividualPosition";
+import { checkShouldShowDots } from "../../utils/checkShouldShowDots";
 
 type FlowBatteryGridFlows = Pick<Flows, Exclude<keyof Flows, "solar">>;
 
@@ -24,7 +25,7 @@ export const flowBatteryGrid = (config: PowerFlowCardPlusConfig, { battery, grid
             d="M45,100 v-15 c0,-30 -10,-30 -30,-30 h-20"
             vector-effect="non-scaling-stroke"
           ></path>
-          ${grid.state.toBattery
+          ${checkShouldShowDots(config) && grid.state.toBattery
             ? svg`<circle
           r="1"
           class="battery-from-grid"

src/components/flows/batteryToHome.ts

@@ -5,6 +5,7 @@ import { html, svg } from "lit";
 import { styleLine } from "../../utils/styleLine";
 import { type Flows } from "./index";
 import { checkHasRightIndividual } from "../../utils/computeIndividualPosition";
+import { checkShouldShowDots } from "../../utils/checkShouldShowDots";
 
 type FlowBatteryToHomeFlows = Pick<Flows, Exclude<keyof Flows, "solar">>;
 
@@ -24,7 +25,7 @@ export const flowBatteryToHome = (config: PowerFlowCardPlusConfig, { battery, gr
             d="M55,100 v-${grid.has ? 15 : 17} c0,-30 10,-30 30,-30 h20"
             vector-effect="non-scaling-stroke"
           ></path>
-          ${battery.state.toHome
+          ${checkShouldShowDots(config) && battery.state.toHome
             ? svg`<circle
             r="1"
             class="battery-home"

src/components/flows/gridToHome.ts

@@ -5,6 +5,7 @@ import { html, svg } from "lit";
 import { styleLine } from "../../utils/styleLine";
 import { type Flows } from "./index";
 import { checkHasRightIndividual } from "../../utils/computeIndividualPosition";
+import { checkShouldShowDots } from "../../utils/checkShouldShowDots";
 
 export const flowGridToHome = (config: PowerFlowCardPlusConfig, { battery, grid, individual, solar, newDur }: Flows) => {
   return grid.has && showLine(config, grid.state.fromGrid)
@@ -22,7 +23,7 @@ export const flowGridToHome = (config: PowerFlowCardPlusConfig, { battery, grid,
             d="M0,${battery.has ? 50 : solar.has ? 56 : 53} H100"
             vector-effect="non-scaling-stroke"
           ></path>
-          ${grid.state.toHome
+          ${checkShouldShowDots(config) && grid.state.toHome
             ? svg`<circle
           r="1"
           class="grid"

src/components/flows/solarToBattery.ts

@@ -5,6 +5,7 @@ import { html, svg } from "lit";
 import { styleLine } from "../../utils/styleLine";
 import { type Flows } from "./index";
 import { checkHasRightIndividual } from "../../utils/computeIndividualPosition";
+import { checkShouldShowDots } from "../../utils/checkShouldShowDots";
 
 type FlowSolarToBatteryFlows = Pick<Flows, Exclude<keyof Flows, "grid">>;
 
@@ -24,7 +25,7 @@ export const flowSolarToBattery = (config: PowerFlowCardPlusConfig, { battery, i
             d="M50,0 V100"
             vector-effect="non-scaling-stroke"
           ></path>
-          ${solar.state.toBattery
+          ${checkShouldShowDots(config) && solar.state.toBattery
             ? svg`<circle
                 r="1"
                 class="battery-solar"

src/components/flows/solarToGrid.ts

@@ -5,6 +5,7 @@ import { html, svg } from "lit";
 import { styleLine } from "../../utils/styleLine";
 import { type Flows } from "./index";
 import { checkHasRightIndividual } from "../../utils/computeIndividualPosition";
+import { checkShouldShowDots } from "../../utils/checkShouldShowDots";
 
 export const flowSolarToGrid = (config: PowerFlowCardPlusConfig, { battery, grid, individual, solar, newDur }: Flows) => {
   return grid.hasReturnToGrid && solar.has && showLine(config, solar.state.toGrid || 0)
@@ -22,7 +23,7 @@ export const flowSolarToGrid = (config: PowerFlowCardPlusConfig, { battery, grid
             d="M${battery.has ? 45 : 47},0 v15 c0,${battery.has ? "30 -10,30 -30,30" : "35 -10,35 -30,35"} h-20"
             vector-effect="non-scaling-stroke"
           ></path>
-          ${solar.state.toGrid && solar.has
+          ${checkShouldShowDots(config) && solar.state.toGrid && solar.has
             ? svg`<circle
                 r="1"
                 class="return"

src/components/flows/solarToHome.ts

@@ -5,6 +5,7 @@ import { html, svg } from "lit";
 import { styleLine } from "../../utils/styleLine";
 import { type Flows } from "./index";
 import { checkHasBottomIndividual, checkHasRightIndividual } from "../../utils/computeIndividualPosition";
+import { checkShouldShowDots } from "../../utils/checkShouldShowDots";
 
 export const flowSolarToHome = (config: PowerFlowCardPlusConfig, { battery, grid, individual, solar, newDur }: Flows) => {
   return solar.has && showLine(config, solar.state.toHome || 0)
@@ -22,7 +23,7 @@ export const flowSolarToHome = (config: PowerFlowCardPlusConfig, { battery, grid
             d="M${battery.has ? 55 : 53},0 v${grid.has ? 15 : 17} c0,${battery.has ? "30 10,30 30,30" : "35 10,35 30,35"} h25"
             vector-effect="non-scaling-stroke"
           ></path>
-          ${solar.state.toHome
+          ${checkShouldShowDots(config) && solar.state.toHome
             ? svg`<circle
                         r="1"
                         class="solar"

src/components/individualLeftBottomElement.ts

@@ -8,6 +8,7 @@ import { styleLine } from "../utils/styleLine";
 import { individualSecondarySpan } from "./spans/individualSecondarySpan";
 import { HomeAssistant } from "custom-card-helpers";
 import { computeIndividualFlowRate } from "../utils/computeFlowRate";
+import { checkShouldShowDots } from "../utils/checkShouldShowDots";
 
 interface IndividualBottom {
   newDur: NewDur;
@@ -30,7 +31,7 @@ export const individualLeftBottomElement = (
       ? html`
           <svg width="80" height="30">
             <path d="M40 40 v-40" id="individual-bottom" class="${styleLine(individualObj?.state || 0, config)}" />
-            ${individualObj?.state
+            ${checkShouldShowDots(config) && individualObj?.state
               ? svg`<circle
                                 r="1.75"
                                 class="individual-bottom"

src/components/individualLeftTopElement.ts

@@ -7,6 +7,7 @@ import { showLine } from "../utils/showLine";
 import { IndividualObject } from "../states/raw/individual/getIndividualObject";
 import { PowerFlowCardPlus } from "../power-flow-card-plus";
 import { styleLine } from "../utils/styleLine";
+import { checkShouldShowDots } from "../utils/checkShouldShowDots";
 
 interface TopIndividual {
   newDur: NewDur;
@@ -57,7 +58,7 @@ export const individualLeftTopElement = (
       ? html`
           <svg width="80" height="30">
             <path d="M40 -10 v50" id="individual-top" class="${styleLine(individualObj.state || 0, config)}" />
-            ${individualObj.state
+            ${checkShouldShowDots(config) && individualObj.state
               ? svg`<circle
           r="1.75"
           class="individual-top"

src/components/individualRightBottomElement.ts

@@ -8,6 +8,7 @@ import { IndividualObject } from "../states/raw/individual/getIndividualObject";
 import { PowerFlowCardPlus } from "../power-flow-card-plus";
 import { styleLine } from "../utils/styleLine";
 import { checkHasBottomIndividual } from "../utils/computeIndividualPosition";
+import { checkShouldShowDots } from "../utils/checkShouldShowDots";
 
 interface TopIndividual {
   newDur: NewDur;
@@ -72,7 +73,7 @@ export const individualRightBottomElement = (
                 d="M45,100 v-15 c0,-30 -10,-30 -30,-30 h-20"
                 vector-effect="non-scaling-stroke"
               />
-              ${individualObj.state
+              ${checkShouldShowDots(config) && individualObj.state
                 ? svg`<circle
                     r="1"
                     class="individual-bottom"

src/components/individualRightTopElement.ts

@@ -8,6 +8,7 @@ import { IndividualObject } from "../states/raw/individual/getIndividualObject";
 import { PowerFlowCardPlus } from "../power-flow-card-plus";
 import { styleLine } from "../utils/styleLine";
 import { checkHasBottomIndividual } from "../utils/computeIndividualPosition";
+import { checkShouldShowDots } from "../utils/checkShouldShowDots";
 
 interface TopIndividual {
   newDur: NewDur;
@@ -72,7 +73,7 @@ export const individualRightTopElement = (
                 d="M${hasBottomRow ? 45 : 47},0 v15 c0,${hasBottomRow ? "30 -10,30 -30,30" : "35 -10,35 -30,35"} h-20"
                 vector-effect="non-scaling-stroke"
               />
-              ${individualObj.state
+              ${checkShouldShowDots(config) && individualObj.state
                 ? svg`<circle
                     r="1"
                     class="individual-top"

src/components/nonFossil.ts

@@ -7,6 +7,7 @@ import { NewDur, TemplatesObj } from "../type";
 import { styleLine } from "../utils/styleLine";
 import { computeIndividualFlowRate } from "../utils/computeFlowRate";
 import { showLine } from "../utils/showLine";
+import { checkShouldShowDots } from "../utils/checkShouldShowDots";
 
 interface NonFossil {
   newDur: NewDur;
@@ -59,7 +60,7 @@ export const nonFossilElement = (
           ? html`
               <svg width="80" height="30">
                 <path d="M40 -10 v40" class="low-carbon ${styleLine(nonFossil.state.power || 0, config)}" id="low-carbon" />
-                ${nonFossil.has
+                ${checkShouldShowDots(config) && nonFossil.has
                   ? svg`<circle
                 r="1.75"
                 class="low-carbon"

src/localize/languages/cs.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Práh wattů na kilowatty",
         "display_zero_lines": "Zobrazit nulové řádky",
         "clickable_entities": "Entity, na které se dá kliknout",
+        "disable_dots": "Vypnout tečky",
         "use_new_flow_rate_model": "Nový model průtoku",
         "use_metadata": "Použít Metadata",
         "mode": "Režim",
@@ -70,4 +71,4 @@
         "transparency": "Průhlednost",
         "grey_color": "Šedá barva"
     }
-}
+}

src/localize/languages/de.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Watt-zu-Kilowatt-Schwelle",
         "display_zero_lines": "Nulllinien anzeigen",
         "clickable_entities": "Klickbare Entitäten",
+        "disable_dots": "Punkte deaktivieren",
         "use_new_flow_rate_model": "Neues Fluss-Modell verwenden",
         "use_metadata": "Metadaten verwenden",
         "mode": "Modus",

src/localize/languages/dk.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Watt til Kilowatt Grænse",
         "display_zero_lines": "Vis Nul Linjer",
         "clickable_entities": "Klikbar enheder",
+        "disable_dots": "Deaktiver prikker",
         "use_new_flow_rate_model": "Ny flowhastighedsmodel",
         "use_metadata": "Brug Metadata",
         "mode": "Tilstand",

src/localize/languages/en.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Watt to Kilowatt Threshold",
         "display_zero_lines": "Display Zero Lines",
         "clickable_entities": "Clickable Entities",
+        "disable_dots": "Disable Dots",
         "use_new_flow_rate_model": "New Flow Rate Model",
         "use_metadata": "Use Metadata",
         "mode": "Mode",

src/localize/languages/es.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Umbral de Vatio a Kilovatio",
         "display_zero_lines": "Mostrar Líneas de Cero",
         "clickable_entities": "Entidades Clicables",
+        "disable_dots": "Desactivar Puntos",
         "use_new_flow_rate_model": "Utilizar Nuevo Modelo de Tasa de Flujo",
         "use_metadata": "Utilizar Metadatos",
         "mode": "Modo",

src/localize/languages/fi.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Wattin ja kilowatin kynnysarvo",
         "display_zero_lines": "Näytä nolla-viivat",
         "clickable_entities": "Napautettavat kohteet",
+        "disable_dots": "Poista pisteet",
         "use_new_flow_rate_model": "Uusi virtausnopeusmalli",
         "use_metadata": "Käytä metatietoja",
         "mode": "Tila",

src/localize/languages/fr.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Seuil de watt vers kilowatt",
         "display_zero_lines": "Afficher les lignes zéro",
         "clickable_entities": "Entités cliquables",
+        "disable_dots": "Désactiver les points",
         "use_new_flow_rate_model": "Nouveau modèle de débit",
         "use_metadata": "Utiliser les métadonnées",
         "mode": "Mode",

src/localize/languages/it.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Soglia Watt per Kilowatt",
         "display_zero_lines": "Mostra Linee Zero",
         "clickable_entities": "Entità Cliccabili",
+        "disable_dots": "Disabilita Punti",
         "use_new_flow_rate_model": "Utilizza Nuovo Modello di Tasso di Flusso",
         "use_metadata": "Utilizza Metadati",
         "mode": "Modalità",

src/localize/languages/nl.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Watt naar Kilowatt Drempelwaarde",
         "display_zero_lines": "Nullijnen Weergeven",
         "clickable_entities": "Klikbare Entiteiten",
+        "disable_dots": "Punten Uitschakelen",
         "use_new_flow_rate_model": "Nieuw Stroomsnelheid Model Gebruiken",
         "use_metadata": "Metadata Gebruiken",
         "mode": "Modus",

src/localize/languages/pl.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Próg watów na kilowaty",
         "display_zero_lines": "Wyświetl linie zera",
         "clickable_entities": "Klikalne jednostki",
+        "disable_dots": "Wyłącz kropki",
         "use_new_flow_rate_model": "Nowy model wskaźnika przepływu",
         "use_metadata": "Użyj metadanych",
         "mode": "Tryb",

src/localize/languages/pt-BR.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Limiar de Watts para Quilowatts",
         "display_zero_lines": "Exibir Linhas Zero",
         "clickable_entities": "Entidades Clicáveis",
+        "disable_dots": "Desativar Pontos",
         "use_new_flow_rate_model": "Utilizar Novo Modelo de Velocidade",
         "use_metadata": "Utilizar Metadados",
         "mode": "Modo",

src/localize/languages/pt-PT.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Limiar de Watt para Quilowatt",
         "display_zero_lines": "Mostrar Linhas Zero",
         "clickable_entities": "Entidades Clicáveis",
+        "disable_dots": "Desativar Pontos",
         "use_new_flow_rate_model": "Utilizar Novo Modelo de Velocidade",
         "use_metadata": "Utilizar Metadados",
         "mode": "Modo",

src/localize/languages/ru.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Пороговое значение ватт в киловатты",
         "display_zero_lines": "Отображать нулевые линии",
         "clickable_entities": "Кликабельные сущности",
+        "disable_dots": "Отключить точки",
         "use_new_flow_rate_model": "Использовать новую модель скорости потока",
         "use_metadata": "Использовать метаданные",
         "mode": "Режим",

src/localize/languages/sk.json

@@ -60,6 +60,7 @@
         "watt_threshold": "Prah wattov na kilowatty",
         "display_zero_lines": "Zobraziť nulové riadky",
         "clickable_entities": "Entity, na ktoré sa dá kliknúť",
+        "disable_dots": "Vypnúť bodky",
         "use_new_flow_rate_model": "Nový model prietoku",
         "use_metadata": "Použiť Metadata",
         "mode": "Mód",

src/power-flow-card-plus-config.ts

@@ -24,6 +24,7 @@ interface mainConfigOptions {
   style_ha_card?: any;
   style_card_content?: any;
   individual_mode_config?: IndividualModeConfig;
+  disable_dots?: boolean;
   display_zero_lines?: {
     mode?: DisplayZeroLinesMode;
     transparency?: number;

src/ui-editor/schema/_schema-all.ts

@@ -41,14 +41,13 @@ export const cardConfigStruct = assign(
     full_size: optional(boolean()),
     style_ha_card: optional(any()),
     style_card_content: optional(any()),
+    disable_dots: optional(boolean()),
     entities: object({
       battery: optional(any()),
       grid: optional(any()),
       solar: optional(any()),
       home: optional(any()),
       fossil_fuel_percentage: optional(any()),
-      individual1: optional(any()),
-      individual2: optional(any()),
       individual: optional(any()),
     }),
   })
@@ -185,6 +184,11 @@ export const advancedOptionsSchema = memoizeOne((localize, displayZeroLinesMode:
         label: "Clickable Entities",
         selector: { boolean: {} },
       },
+      {
+        name: "disable_dots",
+        label: "Disable Moving Dots",
+        selector: { boolean: {} },
+      },
       {
         name: "use_new_flow_rate_model",
         label: "New Flow Model?",

src/utils/checkShouldShowDots.ts

@@ -0,0 +1,5 @@
+import { PowerFlowCardPlusConfig } from "../power-flow-card-plus-config";
+
+export const checkShouldShowDots = (config: PowerFlowCardPlusConfig) => {
+  return config.disable_dots !== true;
+};