@politicalwatch/tipi-uikit 1.9.27 → 1.9.28

package/package.json

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

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

@@ -1,5 +1,4 @@
 import d3chart from '../d3.chart';
-import { formatDuration } from 'date-fns';
 import { select, selectAll } from 'd3-selection';
 import { scaleLinear, scaleOrdinal, scaleSqrt } from 'd3-scale';
 import { hierarchy, partition } from 'd3-hierarchy';
@@ -238,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
    */
@@ -257,14 +269,14 @@ class d3sunburst extends d3chart {
       .attr('class', 'chart__slice chart__slice--sunburst')
       .style('fill', (d) => this.colorElement(d.data))
       .on('mouseover', (event, d) => {
-        const label = this.cfg.tooltip.humanReadable
-          ? formatDuration({ seconds: d.value })
-          : 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 label = this.cfg.tooltip.suffixPlural
+          ? pluralize(this.cfg.tooltip.suffix, d.value)
+          : this.cfg.tooltip.suffix;
+        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', () => {