#6: Update icon border progress to 1.6.0 - invert progress support (#8)

Author: lsmarsden

modules/icon_border_progress/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+### v1.6.0
+
+<details><summary>See Changes</summary>
+
+- Added ability to invert progress using `invert: true`.
+
+</details>
+
 ### v1.5.0
 
 <details><summary>See Changes</summary>

modules/icon_border_progress/CONFIG_OPTIONS.md

@@ -279,6 +279,24 @@ describe("icon_border_progress", () => {
       );
     });
 
+    it("should invert progress percentage correctly", () => {
+      // setup
+      mockHass.states["sensor.progress"].state = "75";
+      mockThis.config.icon_border_progress[0].invert = true;
+
+      // exercise
+      icon_border_progress.call(mockThis, mockCard, mockHass);
+
+      // Verify SVG helper was called with correct progress value (75%)
+      expect(strokeDashProgress.createProgressBorder).toHaveBeenCalledWith(
+        mockElement,
+        25, // 25% progress
+        "rgb(255, 255, 0)",
+        "white",
+        { animationDuration: 800, borderRadiusOverride: undefined, offsetPercent: 0, strokeWidth: 3 },
+      );
+    });
+
     // https://github.com/Clooos/Bubble-Card/discussions/1525#discussioncomment-13732526
     // Ensure inputs accept floats
     it("should calculate progress percentage correctly for floats", () => {

modules/icon_border_progress/__tests__/code.test.js

@@ -437,6 +437,7 @@ describe("icon_border_progress - Integration Tests", () => {
         {
           button: "sub-button-1",
           source: "sensor.saros_10_battery",
+          invert: true,
           start: "sensor.start_value",
           end: "sensor.end_value",
           color_stops: [
@@ -448,7 +449,7 @@ describe("icon_border_progress - Integration Tests", () => {
         },
       ];
 
-      // Battery is at 75, with start=0 and end=200, progress should be 37.5%
+      // Battery is at 75, with start=0 and end=200, and invert=true, progress should be 62.5%
       mockHass.states["sensor.saros_10_battery"].state = "75";
       mockHass.states["sensor.start_value"] = { state: "0" };
       mockHass.states["sensor.end_value"] = { state: "200" };
@@ -467,7 +468,7 @@ describe("icon_border_progress - Integration Tests", () => {
       const progressPath = svg.querySelector(".progress-path");
       expect(progressPath).toBeTruthy();
       expect(progressPath.getAttribute("stroke")).not.toBe("transparent");
-      verifyStrokeDashArray(progressPath, 0, 0, 112.5, 187.5);
+      verifyStrokeDashArray(progressPath, 0, 0, 187.5, 112.5);
       expect(subButton1.style.background).toBe("rgb(10, 10, 10)"); // JSDOM converts #0a0a0a to rgb
     });
 

modules/icon_border_progress/__tests__/integration.test.js

@@ -76,11 +76,13 @@ export function icon_border_progress(card, hass) {
 
   function updateProgressDisplay(progressSource, buttonConfig, buttonElement) {
     const progressValue = calculateProgressValue(progressSource, buttonConfig);
+    const inverted = buttonConfig?.invert || false;
+    const adjustedProgress = inverted ? 100 - progressValue : progressValue;
     const colorStops = buttonConfig.color_stops || [];
-    const progressColor = resolveColorFromStops(progressValue, colorStops, buttonConfig.interpolate_colors);
+    const progressColor = resolveColorFromStops(adjustedProgress, colorStops, buttonConfig.interpolate_colors);
     const colors = resolveColorConfigs(buttonConfig);
 
-    applyProgressStyling(buttonElement, progressValue, progressColor, colors, buttonConfig);
+    applyProgressStyling(buttonElement, adjustedProgress, progressColor, colors, buttonConfig);
   }
 
   // Main processing loop

modules/icon_border_progress/code.js

@@ -20,6 +20,11 @@ editor:
         label: "✨Source entity"
         selector:
           entity: {}
+      - name: invert
+        label: "Invert the progress direction"
+        selector:
+          boolean:
+            default: false
       - name: condition
         label: "Condition to show progress (see docs for additional condition configuration)"
         selector:
@@ -106,6 +111,11 @@ editor:
         label: "✨Source entity"
         selector:
           entity: {}
+      - name: invert
+        label: "Invert the progress direction"
+        selector:
+          boolean:
+            default: false
       - name: condition
         label: "Condition to show progress (see docs for additional condition configuration)"
         selector:

modules/icon_border_progress/editor.yaml

@@ -1,7 +1,7 @@
 module_info:
   id: icon_border_progress
   name: Icon Border Progress
-  version: 1.5.0
+  version: 1.6.0
   creator: lsmarsden
   link: >-
     https://github.com/lsmarsden/bubble-card-modules/tree/main/icon_border_progress

modules/icon_border_progress/module.yaml

@@ -8,6 +8,11 @@ items:
 
 definitions:
   icon_progress_config:
+    type: array
+    items:
+      $ref: "#/definitions/button_config"
+
+  button_config:
     type: object
     properties:
       button:
@@ -21,6 +26,10 @@ definitions:
         type: string
         description: "[DEPRECATED] Use 'source' instead. Source entity for progress value"
         format: "entity[attribute]"
+      invert:
+        type: boolean
+        description: "Invert the progress direction (default: false)"
+        default: false
       start:
         oneOf:
           - type: number