Merge branch 'big-numbers' into bigint

getredash · May 6, 2024 · 4169508 · 4169508
2 parents 156362d + f5fbffa
commit 4169508
Show file tree

Hide file tree

Showing 38 changed files with 239 additions and 157 deletions.
diff --git a/viz-lib/package.json b/viz-lib/package.json
@@ -45,7 +45,6 @@
     "@types/enzyme": "^3.10.8",
     "@types/jest": "^26.0.18",
     "@types/leaflet": "^1.5.19",
-    "@types/numeral": "0.0.28",
     "@types/plotly.js": "^1.54.22",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
@@ -90,7 +89,6 @@
     "leaflet-fullscreen": "^1.0.2",
     "leaflet.markercluster": "^1.1.0",
     "lodash": "^4.17.10",
-    "numeral": "^2.0.6",
     "plotly.js": "1.58.5",
     "react-pivottable": "^0.9.0",
     "react-sortable-hoc": "^1.10.1",

diff --git a/viz-lib/src/lib/value-format.tsx b/viz-lib/src/lib/value-format.tsx
@@ -1,12 +1,9 @@
 import React from "react";
 import ReactDOMServer from "react-dom/server";
 import moment from "moment/moment";
-import numeral from "numeral";
 import { isString, isArray, isUndefined, isFinite, isNil, toString } from "lodash";
 import { visualizationsSettings } from "@/visualizations/visualizationsSettings";
 
-numeral.options.scalePercentBy100 = false;
-
 // eslint-disable-next-line
 const urlPattern = /(^|[\s\n]|<br\/?>)((?:https?|ftp):\/\/[\-A-Z0-9+\u0026\u2019@#\/%?=()~_|!:,.;]*[\-A-Z0-9+\u0026@#\/%=~()_|])/gi;
 
@@ -77,11 +74,8 @@ export function createBooleanFormatter(values: any) {
 }
 
 export function createNumberFormatter(format: any) {
-  if (isString(format) && format !== "") {
-    const n = numeral(0); // cache `numeral` instance
-    return (value: any) => (value === null || value === "" ? "" : n.set(value).format(format));
-  }
-  return (value: any) => toString(value);
+  const formatter = new Intl.NumberFormat("en-US", format);
+  return (value: any) => (value === null || value === "" ? "" : formatter.format(value));
 }
 
 export function formatSimpleTemplate(str: any, data: any) {

diff --git a/viz-lib/src/visualizations/chart/Editor/DataLabelsSettings.test.tsx b/viz-lib/src/visualizations/chart/Editor/DataLabelsSettings.test.tsx
@@ -43,7 +43,10 @@ describe("Visualizations -> Chart -> Editor -> Data Labels Settings", () => {
     const el = mount(
       {
         globalSeriesType: "column",
-        numberFormat: "0[.]0000",
+        numberFormat: {
+          style: "decimal",
+          maximumFractionDigits: 4,
+        },
       },
       done
     );
@@ -57,7 +60,10 @@ describe("Visualizations -> Chart -> Editor -> Data Labels Settings", () => {
     const el = mount(
       {
         globalSeriesType: "column",
-        percentFormat: "0[.]00%",
+        percentFormat: {
+          style: "percent",
+          maximumFractionDigits: "2",
+        },
       },
       done
     );

diff --git a/viz-lib/src/visualizations/chart/Editor/GeneralSettings.test.tsx b/viz-lib/src/visualizations/chart/Editor/GeneralSettings.test.tsx
@@ -227,6 +227,4 @@ describe("Visualizations -> Chart -> Editor -> General Settings", () => {
       .find("input")
       .simulate("change", { target: { checked: true } });
   });
-
-
 });
diff --git a/viz-lib/src/visualizations/chart/Editor/GeneralSettings.tsx b/viz-lib/src/visualizations/chart/Editor/GeneralSettings.tsx
@@ -359,8 +359,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }: any)
           data-test="Chart.EnableClickEvents.NewTab"
           defaultChecked={options.linkOpenNewTab}
           onChange={event => onOptionsChange({ linkOpenNewTab: event.target.checked })}
-          disabled={!(options.enableLink === true)}
-        >
+          disabled={!(options.enableLink === true)}>
           Open in new tab
         </Checkbox>
       </Section>
@@ -378,15 +377,16 @@ export default function GeneralSettings({ options, data, onOptionsChange }: any)
                 // @ts-expect-error ts-migrate(2322) FIXME: Type 'Element' is not assignable to type 'null | u... Remove this comment to see the full error message
                 icon={ContextHelp.defaultIcon}>
                 <div>
-                  Every curve can be referenced using <code>{"{{ @@x1 }} {{ @@y1 }} {{ @@x2 }} {{ @@y2 }} ..."}</code> syntax:<br/>
+                  Every curve can be referenced using <code>{"{{ @@x1 }} {{ @@y1 }} {{ @@x2 }} {{ @@y2 }} ..."}</code>{" "}
+                  syntax:
+                  <br />
                   axis with any curve number according to the Series config.
                 </div>
                 <div>
-                  The first met curve X and Y values can be referenced by just<code>{"{{ @@x }} {{ @@y }}"}</code> syntax.
-                </div>
-                <div>
-                  Any unresolved reference would be replaced with an empty string.
+                  The first met curve X and Y values can be referenced by just<code>{"{{ @@x }} {{ @@y }}"}</code>{" "}
+                  syntax.
                 </div>
+                <div>Any unresolved reference would be replaced with an empty string.</div>
               </ContextHelp>
             </React.Fragment>
           }

diff --git a/viz-lib/src/visualizations/chart/Editor/XAxisSettings.test.tsx b/viz-lib/src/visualizations/chart/Editor/XAxisSettings.test.tsx
@@ -59,7 +59,7 @@ describe("Visualizations -> Chart -> Editor -> X-Axis Settings", () => {
     const el = mount(
       {
         globalSeriesType: "column",
-        xAxis: { },
+        xAxis: {},
       },
       done
     );

diff --git a/viz-lib/src/visualizations/chart/Renderer/initChart.ts b/viz-lib/src/visualizations/chart/Renderer/initChart.ts
@@ -4,9 +4,7 @@ import { Plotly, prepareData, prepareLayout, updateData, updateAxes, updateChart
 import { formatSimpleTemplate } from "@/lib/value-format";
 
 const navigateToUrl = (url: string, shouldOpenNewTab: boolean = true) =>
-  shouldOpenNewTab
-    ? window.open(url, "_blank")
-    : window.location.href = url;
+  shouldOpenNewTab ? window.open(url, "_blank") : (window.location.href = url);
 
 function createErrorHandler(errorHandler: any) {
   return (error: any) => {
@@ -116,28 +114,32 @@ export default function initChart(container: any, options: any, data: any, addit
         );
         options.onHover && container.on("plotly_hover", options.onHover);
         options.onUnHover && container.on("plotly_unhover", options.onUnHover);
-        container.on('plotly_click',
+        container.on(
+          "plotly_click",
           createSafeFunction((data: any) => {
             if (options.enableLink === true) {
               try {
-                var templateValues: { [k: string]: any } = {}
+                var templateValues: { [k: string]: any } = {};
                 data.points.forEach((point: any, i: number) => {
-                  var sourceDataElement = [...point.data?.sourceData?.entries()][point.pointNumber ?? 0]?.[1]?.row ?? {};
+                  var sourceDataElement =
+                    [...point.data?.sourceData?.entries()][point.pointNumber ?? 0]?.[1]?.row ?? {};
 
-                  if (isNil(templateValues['@@x'])) templateValues['@@x'] = sourceDataElement.x;
-                  if (isNil(templateValues['@@y'])) templateValues['@@y'] = sourceDataElement.y;
+                  if (isNil(templateValues["@@x"])) templateValues["@@x"] = sourceDataElement.x;
+                  if (isNil(templateValues["@@y"])) templateValues["@@y"] = sourceDataElement.y;
 
                   templateValues[`@@y${i + 1}`] = sourceDataElement.y;
                   templateValues[`@@x${i + 1}`] = sourceDataElement.x;
-                })
+                });
                 navigateToUrl(
-                  formatSimpleTemplate(options.linkFormat, templateValues).replace(/{{\s*([^\s]+?)\s*}}/g, () => ''),
-                  options.linkOpenNewTab);
+                  formatSimpleTemplate(options.linkFormat, templateValues).replace(/{{\s*([^\s]+?)\s*}}/g, () => ""),
+                  options.linkOpenNewTab
+                );
               } catch (error) {
-                console.error('Click error: [%s]', error.message, { error });
+                console.error("Click error: [%s]", error.message, { error });
               }
             }
-          }));
+          })
+        );
 
         unwatchResize = resizeObserver(
           container,

diff --git a/viz-lib/src/visualizations/chart/getOptions.ts b/viz-lib/src/visualizations/chart/getOptions.ts
@@ -18,8 +18,14 @@ const DEFAULT_OPTIONS = {
   coefficient: 1,
 
   // showDataLabels: false, // depends on chart type
-  numberFormat: "0,0[.]00000",
-  percentFormat: "0[.]00%",
+  numberFormat: {
+    style: "decimal",
+    maximumFractionDigits: 5,
+  },
+  percentFormat: {
+    style: "percent",
+    maximumFractionDigits: 2,
+  },
   // dateTimeFormat: 'DD/MM/YYYY HH:mm', // will be set from visualizationsSettings
   textFormat: "", // default: combination of {{ @@yPercent }} ({{ @@y }} ± {{ @@yError }})
 

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/default.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/default.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "column",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/normalized.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/normalized.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "column",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/stacked.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bar/stacked.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "column",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/box/default.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/box/default.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "box",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/box/with-points.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/box/with-points.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "box",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bubble/default.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/bubble/default.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "bubble",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/default.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/default.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "line",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/...b/src/visualizations/chart/plotly/fixtures/prepareData/line-area/keep-missing-values.json b/...b/src/visualizations/chart/plotly/fixtures/prepareData/line-area/keep-missing-values.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "line",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/missing-values-0.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/missing-values-0.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "line",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/...ib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized-stacked.json b/...ib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized-stacked.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "line",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/normalized.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "line",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },

diff --git a/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/stacked.json b/viz-lib/src/visualizations/chart/plotly/fixtures/prepareData/line-area/stacked.json
@@ -2,8 +2,14 @@
   "input": {
     "options": {
       "globalSeriesType": "line",
-      "numberFormat": "0,0[.]00000",
-      "percentFormat": "0[.]00%",
+      "numberFormat": {
+        "style": "decimal",
+        "maximumFractionDigits": 5
+      },
+      "percentFormat": {
+        "style": "percent",
+        "maximumFractionDigits": 2
+      },
       "textFormat": "",
       "showDataLabels": true,
       "direction": { "type": "counterclockwise" },