Merge pull request #282 from gisce/feature/add_thousand_separator_gra…

…phs_tooltip Add thousand separator to graphs tooltip
gisce · Apr 14, 2023 · 92fa326 · 92fa326
2 parents abd4ca9 + cd1cd39
commit 92fa326
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 6 deletions.
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.1.36",
+  "version": "1.1.37",
   "files": [
     "dist",
     "src",

diff --git a/src/widgets/views/Graph/GraphDefaults.ts b/src/widgets/views/Graph/GraphDefaults.ts
@@ -1,3 +1,13 @@
+const formatter = (graphType: "pie" | "default" | "barGrouped") => {
+  return (object: any) => {
+    const formattedValue = object.value.toLocaleString("es-ES", {
+      useGrouping: true,
+    });
+    const name = graphType === "pie" ? object.x : object.type;
+    return { name, value: formattedValue };
+  };
+};
+
 const DefaultGraphOptions = {
   default: {
     padding: "auto",
@@ -8,6 +18,9 @@ const DefaultGraphOptions = {
       maxWidthRatio: 0.5,
       maxItemWidth: 1000,
     },
+    tooltip: {
+      formatter: formatter("default"),
+    },
   },
   pie: {
     appendPadding: 10,
@@ -25,6 +38,9 @@ const DefaultGraphOptions = {
       maxWidthRatio: 0.5,
       maxItemWidth: 1000,
     },
+    tooltip: {
+      formatter: formatter("pie"),
+    },
     interactions: [
       {
         type: "element-active",
@@ -37,6 +53,9 @@ const DefaultGraphOptions = {
       maxWidthRatio: 0.5,
       maxItemWidth: 1000,
     },
+    tooltip: {
+      formatter: formatter("barGrouped"),
+    },
     label: {
       position: "middle",
       layout: [

diff --git a/src/widgets/views/Graph/GraphIndicator.tsx b/src/widgets/views/Graph/GraphIndicator.tsx
@@ -273,7 +273,11 @@ function CommonIndicator({
       ? minFontSize
       : height * fontGrowFactor;
 
-  let finalValue = total ? `${value}/${total}` : `${value}`;
+  const localeValue = value?.toLocaleString("es-ES", {
+    useGrouping: true,
+  });
+
+  let finalValue = total ? `${localeValue}/${total}` : `${localeValue}`;
 
   if (suffix) {
     finalValue += " " + suffix;
@@ -342,13 +346,23 @@ function PercentageIndicator({
       ? minFontSize
       : twoLinesHeight * fontGrowFactor;
 
-  let finalValue = total ? `${value}/${total}` : `${value}`;
+  const localeValue = value?.toLocaleString("es-ES", {
+    useGrouping: true,
+  });
+
+  let finalValue = total
+    ? `${localeValue}/${total?.toLocaleString("es-ES", {
+        useGrouping: true,
+      })}`
+    : `${localeValue}`;
 
   if (suffix) {
     finalValue += " " + suffix;
   }
 
-  const percentValue = `${percent}%`;
+  const percentValue = `${percent?.toLocaleString("es-ES", {
+    useGrouping: true,
+  })}%`;
 
   let tw = getTextWidth(
     percentValue,