@politicalwatch/tipi-uikit 1.9.26 → 1.9.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@politicalwatch/tipi-uikit",
-  "version": "1.9.26",
+  "version": "1.9.28",
   "main": "src/components/index.js",
   "scripts": {
     "dev": "vite",

package/src/components/Charts/Sunburst/d3.sunburst.js

@@ -138,7 +138,7 @@ class d3sunburst extends d3chart {
         default: '#AAA',
         axis: '#000',
       },
-      tooltip: { label: false, suffix: false, suffixPlural: false },
+      tooltip: { label: false, suffix: false, suffixPlural: false, humanReadable: false },
       transition: { duration: 350, ease: 'easeLinear' },
       charSpace: 8,
     });
@@ -237,6 +237,19 @@ class d3sunburst extends d3chart {
     }
   }
 
+  /**
+   * Format durations
+   */
+  formatDuration(seconds) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    const secs = seconds % 60;
+
+    return [hours, minutes, secs]
+      .map((v) => String(v).padStart(2, '0')) // Ensures two-digit format
+      .join(':');
+  }
+
   /**
    * Add new chart's elements
    */
@@ -259,9 +272,11 @@ class d3sunburst extends d3chart {
         const label = this.cfg.tooltip.suffixPlural
           ? pluralize(this.cfg.tooltip.suffix, d.value)
           : this.cfg.tooltip.suffix;
-        const text = this.cfg.tooltip.suffix
-          ? `<div>${d.data[this.cfg.key]}: ${d.value} ${label}</div>`
-          : `<div>${d.data[this.cfg.key]}: ${d.value}</div>`;
+        const text = this.cfg.humanReadable
+          ? this.formatDuration(d.value)
+          : this.cfg.tooltip.suffix
+            ? `<div>${d.data[this.cfg.key]}: ${d.value} ${label}</div>`
+            : `<div>${d.data[this.cfg.key]}: ${d.value}</div>`;
         this.tooltip.html(text).classed('active', true);
       })
       .on('mouseout', () => {