@politicalwatch/tipi-uikit 1.9.31 → 1.9.33

package/package.json

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

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

@@ -1,3 +1,4 @@
+import { to_duration } from '../../../utils';
 import d3chart from '../d3.chart';
 import { select, selectAll } from 'd3-selection';
 import { scaleLinear, scaleOrdinal, scaleSqrt } from 'd3-scale';
@@ -237,48 +238,6 @@ class d3sunburst extends d3chart {
     }
   }
 
-  /**
-   * Format durations
-   */
-  to_duration(duration) {
-    console.log('duration', duration);
-    if (duration > 60 * 60 * 1000) {
-      return this.to_hour_duration(duration);
-    } else if (duration > 60 * 1000) {
-      return this.to_min_duration(duration);
-    }
-
-    return this.to_secs_duration(duration);
-  }
-
-  to_secs_duration(duration) {
-    const total_secs = duration / 1000;
-    const secs = total_secs % 60;
-
-    return `${Math.floor(secs)} segundos`;
-  }
-
-  to_min_duration(duration) {
-    const total_secs = duration / 1000;
-    const minutes = total_secs / 60;
-    const secs = total_secs % 60;
-
-    return `${Math.floor(minutes)}:${('' + Math.floor(secs)).padStart(2, 0)} min`;
-  }
-
-  to_hour_duration(duration) {
-    const total_secs = duration / 1000;
-    const total_minutes = total_secs / 60;
-    const hours = total_minutes / 60;
-    const minutes = total_minutes % 60;
-    const secs = total_secs % 60;
-
-    return `${('' + Math.floor(hours)).padStart(2, 0)}:${('' + Math.floor(minutes)).padStart(
-      2,
-      0
-    )}:${('' + Math.floor(secs)).padStart(2, 0)} horas`;
-  }
-
   /**
    * Add new chart's elements
    */
@@ -302,7 +261,7 @@ class d3sunburst extends d3chart {
           ? pluralize(this.cfg.tooltip.suffix, d.value)
           : this.cfg.tooltip.suffix;
         const text = this.cfg.tooltip.humanReadable
-          ? `<div>${d.data[this.cfg.key]}: ${this.to_duration(d.value)}</div>`
+          ? `<div>${d.data[this.cfg.key]}: ${to_duration(d.value)}</div>`
           : this.cfg.tooltip.suffix
             ? `<div>${d.data[this.cfg.key]}: ${d.value} ${label}</div>`
             : `<div>${d.data[this.cfg.key]}: ${d.value}</div>`;

package/src/components/Charts/WordsCloud/d3.wordscloud.js

@@ -1,3 +1,4 @@
+import { to_duration } from '../../../utils';
 import d3chart from '../d3.chart';
 import { select, selectAll } from 'd3-selection';
 import { scaleOrdinal, scaleLinear } from 'd3-scale';
@@ -137,7 +138,7 @@ class d3wordscloud extends d3chart {
         default: '#AAA',
         axis: '#000',
       },
-      tooltip: { label: false, suffix: false, suffixPlural: false },
+      tooltip: { label: false, suffix: false, suffixPlural: false, humanReadable: false },
       transition: { duration: 500, ease: 'easeLinear' },
     });
   }
@@ -261,9 +262,12 @@ class d3wordscloud 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.text}: ${d.value} ${label}</div>`
-          : `<div>${d.text}: ${d.value}</div>`;
+        const text = this.cfg.tooltip.humanReadable
+          ? `<div>${to_duration(d.value)}</div>`
+          : this.cfg.tooltip.suffix
+            ? `<div>${d.text}: ${d.value} ${label}</div>`
+            : `<div>${d.text}: ${d.value}</div>`;
+
         this.tooltip.html(text).classed('active', true);
       })
       .on('mouseout', () => {

package/src/utils/index.js

@@ -1,7 +1,12 @@
 // case insensitive, digits to number interpolation
 export const naturalSort = function (as, bs) {
-  let a, b, a1, b1, i = 0,
-    L, rx = /(\d+)|(\D+)/g,
+  let a,
+    b,
+    a1,
+    b1,
+    i = 0,
+    L,
+    rx = /(\d+)|(\D+)/g,
     rd = /\d/;
   if (isFinite(as) && isFinite(bs)) return as - bs;
   a = String(as).toLowerCase();
@@ -16,11 +21,52 @@ export const naturalSort = function (as, bs) {
     b1 = b[i++];
     if (a1 !== b1) {
       if (isFinite(a1) && isFinite(b1)) {
-        if (a1.charAt(0) === "0") a1 = "." + a1;
-        if (b1.charAt(0) === "0") b1 = "." + b1;
+        if (a1.charAt(0) === '0') a1 = '.' + a1;
+        if (b1.charAt(0) === '0') b1 = '.' + b1;
         return a1 - b1;
       } else return a1 > b1 ? 1 : -1;
     }
   }
   return a.length - b.length;
 };
+
+/**
+ * Format durations
+ */
+export const to_duration = function (duration) {
+  if (duration > 60 * 60 * 1000) {
+    return to_hour_duration(duration);
+  } else if (duration > 60 * 1000) {
+    return to_min_duration(duration);
+  }
+
+  return to_secs_duration(duration);
+};
+
+export const to_secs_duration = function (duration) {
+  const total_secs = duration / 1000;
+  const secs = total_secs % 60;
+
+  return `${Math.floor(secs)} segundos`;
+};
+
+export const to_min_duration = function (duration) {
+  const total_secs = duration / 1000;
+  const minutes = total_secs / 60;
+  const secs = total_secs % 60;
+
+  return `${Math.floor(minutes)}:${('' + Math.floor(secs)).padStart(2, 0)} min`;
+};
+
+export const to_hour_duration = function (duration) {
+  const total_secs = duration / 1000;
+  const total_minutes = total_secs / 60;
+  const hours = total_minutes / 60;
+  const minutes = total_minutes % 60;
+  const secs = total_secs % 60;
+
+  return `${('' + Math.floor(hours)).padStart(2, 0)}:${('' + Math.floor(minutes)).padStart(
+    2,
+    0
+  )}:${('' + Math.floor(secs)).padStart(2, 0)} horas`;
+};