[Enhancement] improve tooltip format label, make it more intuitive (#…

…1954)
keplergl · Aug 27, 2022 · f948501 · f948501
1 parent a42aae3
commit f948501
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 13 deletions.
diff --git a/src/constants/src/tooltip.ts b/src/constants/src/tooltip.ts
@@ -47,13 +47,19 @@ export const TOOLTIP_FORMATS = {
   },
   DECIMAL_SHORT: {
     id: 'DECIMAL_SHORT',
-    label: '10k',
+    label: '12345 → 10k',
     format: '.1s',
     type: TOOLTIP_FORMAT_TYPES.DECIMAL
   },
+  DECIMAL_COMMA: {
+    id: 'DECIMAL_COMMA',
+    label: '12345 → 12,345',
+    format: ',',
+    type: TOOLTIP_FORMAT_TYPES.DECIMAL
+  },
   DECIMAL_SHORT_COMMA: {
     id: 'DECIMAL_SHORT_COMMA',
-    label: '12.3k',
+    label: '12345 → 12.3k',
     format: '.3~s',
     type: TOOLTIP_FORMAT_TYPES.DECIMAL
   },
@@ -77,14 +83,14 @@ export const TOOLTIP_FORMATS = {
   },
   DECIMAL_DECIMAL_FIXED_2: {
     id: 'DECIMAL_DECIMAL_FIXED_2',
-    label: '1.23',
-    format: '.2f',
+    label: '1.2345 → 1.23',
+    format: '.2~f',
     type: TOOLTIP_FORMAT_TYPES.DECIMAL
   },
   DECIMAL_DECIMAL_FIXED_3: {
     id: 'DECIMAL_DECIMAL_FIXED_3',
-    label: '1.234',
-    format: '.3f',
+    label: '1.2345 → 1.234',
+    format: '.3~f',
     type: TOOLTIP_FORMAT_TYPES.DECIMAL
   },
   DECIMAL_INT: {
@@ -95,19 +101,19 @@ export const TOOLTIP_FORMATS = {
   },
   DECIMAL_THREE: {
     id: 'DECIMAL_THREE',
-    label: '12,345.432',
-    format: ',.3f',
+    label: '12345.4321 → 12,345.432',
+    format: ',.3~f',
     type: TOOLTIP_FORMAT_TYPES.DECIMAL
   },
   DECIMAL_DELTA: {
     id: 'DECIMAL_DELTA',
-    label: '+12,345.432',
+    label: '12345.4321 → +12,345.432',
     format: '+,.3f',
     type: TOOLTIP_FORMAT_TYPES.DECIMAL
   },
   DECIMAL_CURRENCY: {
     id: 'DECIMAL_CURRENCY',
-    label: '$12,345.43',
+    label: '12345.4321 → $12,345.43',
     format: '$,.2f',
     type: TOOLTIP_FORMAT_TYPES.DECIMAL
   },

diff --git a/src/reducers/interaction-utils.ts b/src/reducers/interaction-utils.ts
@@ -39,9 +39,12 @@ import {
 
 /**
  * Minus sign used in tooltip formatting.
- * \u2212 is the minus sign that d3-format uses for decimal number formatting
+ * \u2212 or \u002D is the minus sign that d3-format uses for decimal number formatting
+ * d3-format 2.0 uses \u002D
  */
 export const TOOLTIP_MINUS_SIGN = '\u2212';
+// both are posible negative signs
+export const NEGATIVE_SIGNS = ['\u002D', '\u2212'];
 
 export const BRUSH_CONFIG: {
   range: [number, number];
@@ -134,12 +137,13 @@ export function getTooltipDisplayDeltaValue({
           ? TOOLTIP_FORMATS.DECIMAL_PERCENT_FULL_2[TOOLTIP_KEY]
           : item.format || TOOLTIP_FORMATS.DECIMAL_DECIMAL_FIXED_3[TOOLTIP_KEY];
 
-      displayDeltaValue = getFormatter(deltaFormat)(deltaValue);
+      displayDeltaValue = getFormatter(deltaFormat, field)(deltaValue);
 
       // safely cast string
       displayDeltaValue = defaultFormatter(displayDeltaValue) as string;
       const deltaFirstChar = displayDeltaValue.charAt(0);
-      if (deltaFirstChar !== '+' && deltaFirstChar !== TOOLTIP_MINUS_SIGN) {
+
+      if (deltaFirstChar !== '+' && !NEGATIVE_SIGNS.includes(deltaFirstChar)) {
         displayDeltaValue = `+${displayDeltaValue}`;
       }
     } else {