CartoDB · eamador · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021 · Oct 28, 2021
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,14 +1,15 @@
 # CHANGELOG
 
 ## Not released
+- Histogram tooltip's intervals formatter [#308](https://github.com/CartoDB/carto-react-template/pull/308)
 
 ## (prerelease) 1.1.0-beta.3 (2021-10-27)
 
 - Remove specific credentials from collisions source in sample-app-2 template [#301](https://github.com/CartoDB/carto-react-template/pull/301)
 - Fixes in ts template (types and cleanup) [#302](https://github.com/CartoDB/carto-react-template/pull/302)
 - Update getLineColor prop in layer code generator [#303](https://github.com/CartoDB/carto-react-template/pull/302)
 - Improve platform names in env [#304](https://github.com/CartoDB/carto-react-template/pull/304)
-– Clean empty asset folders, yarn-error.log, package.dev.json [#305](https://github.com/CartoDB/carto-react/pull/305)
+- Clean empty asset folders, yarn-error.log, package.dev.json [#305](https://github.com/CartoDB/carto-react/pull/305)
 - Fix source backticks in hygen [#306](https://github.com/CartoDB/carto-react/pull/306)
 
 ## (prerelease) 1.1.0-beta.2 (2021-10-22)

diff --git a/template-base-2/template/src/utils/formatter.js b/template-base-2/template/src/utils/formatter.js
@@ -14,6 +14,9 @@ import '@formatjs/intl-numberformat/polyfill';
 import '@formatjs/intl-numberformat/locale-data/en';
 
 const DEFAULT_LOCALE = 'en-US';
+const CIRCLE_SVG = `<svg width="10px" height="10px" fill="#47db99" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="5" r="5"/>
+</svg>`;
 
 export const currencyFormatter = (value) => {
   const _value = parseLogicalOperation(value);
@@ -41,6 +44,13 @@ export const numberFormatter = (value) => {
   );
 };
 
+export const intervalsFormatter = (value, dataIndex, ticks) => {
+  const _value = numberFormatter(value);
+  if (!ticks || dataIndex === undefined) return _value;
+  const intervals = moneyInterval(dataIndex, ticks);
+  return `${intervals} <br/> ${CIRCLE_SVG} ${_value}`;
+};
+
 const parseLogicalOperation = (value) => {
   if (!isNaN(value)) return { value, operation: '' };
 
@@ -61,3 +71,25 @@ const parseLogicalOperation = (value) => {
     throw new Error(`You are using a numberFormatter on a not valid value: ${value}`);
   }
 };
+
+const moneyInterval = (dataIndex, ticks) => {
+  const isFirst = dataIndex === 0;
+  try {
+    if (isFirst || dataIndex === ticks.length) {
+      const comparison = isFirst ? '<' : '≥';
+      const formattedValue = isFirst
+        ? currencyFormatter(ticks[dataIndex])
+        : currencyFormatter(ticks[dataIndex - 1]);
+      return `${comparison} ${formattedValue.prefix}${formattedValue.value}`;
+    } else {
+      dataIndex = dataIndex - 1;
+      const prevTick = currencyFormatter(ticks[dataIndex]);
+      const nextTick = currencyFormatter(ticks[dataIndex + 1]);
+      return `${prevTick.prefix}${prevTick.value} — ${nextTick.prefix}${nextTick.value}`;
+    }
+  } catch {
+    throw new Error(
+      `You are using an "intervalsFormatter" on a not valid index: ${dataIndex} & for the ticks ${ticks}`
+    );
+  }
+};
diff --git a/template-base-3-typescript/template/src/utils/formatter.ts b/template-base-3-typescript/template/src/utils/formatter.ts
@@ -14,6 +14,9 @@ import '@formatjs/intl-numberformat/polyfill';
 import '@formatjs/intl-numberformat/locale-data/en';
 
 const DEFAULT_LOCALE = 'en-US';
+const CIRCLE_SVG = `<svg width="10px" height="10px" fill="#47db99" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="5" r="5"/>
+</svg>`;
 
 export function currencyFormatter(value: number): {
   prefix: string;
@@ -30,6 +33,17 @@ export function currencyFormatter(value: number): {
   };
 }
 
+export const intervalsFormatter = (
+  value: number,
+  dataIndex: number,
+  ticks: number[],
+): string => {
+  const _value = numberFormatter(value);
+  if (!ticks || dataIndex === undefined) return _value;
+  const intervals = moneyInterval(dataIndex, ticks);
+  return `${intervals} <br/> ${CIRCLE_SVG} ${_value}`;
+};
+
 export function numberFormatter(value: number): string {
   return Intl.NumberFormat(DEFAULT_LOCALE, {
     maximumFractionDigits: 1,
@@ -38,3 +52,25 @@ export function numberFormatter(value: number): string {
     compactDisplay: 'short',
   }).format(value);
 }
+
+const moneyInterval = (dataIndex: number, ticks: number[]): string => {
+  const isFirst = dataIndex === 0;
+  try {
+    if (isFirst || dataIndex === ticks.length) {
+      const comparison = isFirst ? '<' : '≥';
+      const formattedValue = isFirst
+        ? currencyFormatter(ticks[dataIndex])
+        : currencyFormatter(ticks[dataIndex - 1]);
+      return `${comparison} ${formattedValue.prefix}${formattedValue.value}`;
+    } else {
+      dataIndex = dataIndex - 1;
+      const prevTick = currencyFormatter(ticks[dataIndex]);
+      const nextTick = currencyFormatter(ticks[dataIndex + 1]);
+      return `${prevTick.prefix}${prevTick.value} — ${nextTick.prefix}${nextTick.value}`;
+    }
+  } catch {
+    throw new Error(
+      `You are using an "intervalsFormatter" on a not valid index: ${dataIndex} & for the ticks ${ticks}`,
+    );
+  }
+};
diff --git a/template-base-3/template/src/utils/formatter.js b/template-base-3/template/src/utils/formatter.js
@@ -14,6 +14,9 @@ import '@formatjs/intl-numberformat/polyfill';
 import '@formatjs/intl-numberformat/locale-data/en';
 
 const DEFAULT_LOCALE = 'en-US';
+const CIRCLE_SVG = `<svg width="10px" height="10px" fill="#47db99" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="5" r="5"/>
+</svg>`;
 
 export const currencyFormatter = (value) => {
   const _value = parseLogicalOperation(value);
@@ -41,6 +44,13 @@ export const numberFormatter = (value) => {
   );
 };
 
+export const intervalsFormatter = (value, dataIndex, ticks) => {
+  const _value = numberFormatter(value);
+  if (!ticks || dataIndex === undefined) return _value;
+  const intervals = moneyInterval(dataIndex, ticks);
+  return `${intervals} <br/> ${CIRCLE_SVG} ${_value}`;
+};
+
 const parseLogicalOperation = (value) => {
   if (!isNaN(value)) return { value, operation: '' };
 
@@ -61,3 +71,25 @@ const parseLogicalOperation = (value) => {
     throw new Error(`You are using a numberFormatter on a not valid value: ${value}`);
   }
 };
+
+const moneyInterval = (dataIndex, ticks) => {
+  const isFirst = dataIndex === 0;
+  try {
+    if (isFirst || dataIndex === ticks.length) {
+      const comparison = isFirst ? '<' : '≥';
+      const formattedValue = isFirst
+        ? currencyFormatter(ticks[dataIndex])
+        : currencyFormatter(ticks[dataIndex - 1]);
+      return `${comparison} ${formattedValue.prefix}${formattedValue.value}`;
+    } else {
+      dataIndex = dataIndex - 1;
+      const prevTick = currencyFormatter(ticks[dataIndex]);
+      const nextTick = currencyFormatter(ticks[dataIndex + 1]);
+      return `${prevTick.prefix}${prevTick.value} — ${nextTick.prefix}${nextTick.value}`;
+    }
+  } catch {
+    throw new Error(
+      `You are using an "intervalsFormatter" on a not valid index: ${dataIndex} & for the ticks ${ticks}`
+    );
+  }
+};
diff --git a/template-sample-app-2/template/src/components/views/Kpi.js b/template-sample-app-2/template/src/components/views/Kpi.js
@@ -14,7 +14,7 @@ import { KPI_LAYER_ID } from 'components/layers/KpiLayer';
 import { AggregationTypes } from '@carto/react-core';
 import { CategoryWidget, FormulaWidget, HistogramWidget } from '@carto/react-widgets';
 
-import { currencyFormatter, numberFormatter } from 'utils/formatter';
+import { currencyFormatter, intervalsFormatter } from 'utils/formatter';
 
 const useStyles = makeStyles((theme) => ({
   title: {
@@ -101,7 +101,7 @@ function Kpi() {
         id='revenueByStateHistogram'
         title='Revenue by state histogram'
         dataSource={kpiSource.id}
-        formatter={numberFormatter}
+        formatter={intervalsFormatter}
         xAxisFormatter={currencyFormatter}
         operation={AggregationTypes.COUNT}
         column='revenue'

diff --git a/template-sample-app-2/template/src/components/views/Tileset.js b/template-sample-app-2/template/src/components/views/Tileset.js
@@ -11,7 +11,7 @@ import {
 } from '@carto/react-redux';
 import { AggregationTypes } from '@carto/react-core';
 import { FormulaWidget, HistogramWidget } from '@carto/react-widgets';
-import { numberFormatter } from 'utils/formatter';
+import { numberFormatter, intervalsFormatter } from 'utils/formatter';
 import { TILESET_LAYER_ID } from 'components/layers/TilesetLayer';
 import tilesetSource from 'data/sources/tilesetSource';
 
@@ -86,6 +86,7 @@ function Tileset() {
         title='Total aggregated count'
         dataSource={tilesetSource.id}
         xAxisFormatter={numberFormatter}
+        formatter={intervalsFormatter}
         operation={AggregationTypes.COUNT}
         column='aggregated_total'
         ticks={[10, 100, 1e3, 1e4, 1e5, 1e6]}

diff --git a/template-sample-app-2/template/src/components/views/stores/StoresList.js b/template-sample-app-2/template/src/components/views/stores/StoresList.js
@@ -15,7 +15,7 @@ import {
   HistogramWidget,
   ScatterPlotWidget,
 } from '@carto/react-widgets';
-import { currencyFormatter, numberFormatter } from 'utils/formatter';
+import { currencyFormatter, intervalsFormatter } from 'utils/formatter';
 import storesSource from 'data/sources/storesSource';
 
 const useStyles = makeStyles((theme) => ({
@@ -87,7 +87,7 @@ function StoresList() {
         id='storesByRevenue'
         title='Stores by revenue'
         dataSource={storesSource.id}
-        formatter={numberFormatter}
+        formatter={intervalsFormatter}
         xAxisFormatter={currencyFormatter}
         operation={AggregationTypes.COUNT}
         column='revenue'

diff --git a/template-sample-app-2/template/src/utils/formatter.js b/template-sample-app-2/template/src/utils/formatter.js
@@ -14,6 +14,9 @@ import '@formatjs/intl-numberformat/polyfill';
 import '@formatjs/intl-numberformat/locale-data/en';
 
 const DEFAULT_LOCALE = 'en-US';
+const CIRCLE_SVG = `<svg width="10px" height="10px" fill="#47db99" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="5" r="5"/>
+</svg>`;
 
 export const currencyFormatter = (value) => {
   const _value = parseLogicalOperation(value);
@@ -41,6 +44,13 @@ export const numberFormatter = (value) => {
   );
 };
 
+export const intervalsFormatter = (value, dataIndex, ticks) => {
+  const _value = numberFormatter(value);
+  if (!ticks || dataIndex === undefined) return _value;
+  const intervals = moneyInterval(dataIndex, ticks);
+  return `${intervals} <br/> ${CIRCLE_SVG} ${_value}`;
+};
+
 const parseLogicalOperation = (value) => {
   if (!isNaN(value)) return { value, operation: '' };
 
@@ -61,3 +71,25 @@ const parseLogicalOperation = (value) => {
     throw new Error(`You are using a numberFormatter on a not valid value: ${value}`);
   }
 };
+
+const moneyInterval = (dataIndex, ticks) => {
+  const isFirst = dataIndex === 0;
+  try {
+    if (isFirst || dataIndex === ticks.length) {
+      const comparison = isFirst ? '<' : '≥';
+      const formattedValue = isFirst
+        ? currencyFormatter(ticks[dataIndex])
+        : currencyFormatter(ticks[dataIndex - 1]);
+      return `${comparison} ${formattedValue.prefix}${formattedValue.value}`;
+    } else {
+      dataIndex = dataIndex - 1;
+      const prevTick = currencyFormatter(ticks[dataIndex]);
+      const nextTick = currencyFormatter(ticks[dataIndex + 1]);
+      return `${prevTick.prefix}${prevTick.value} — ${nextTick.prefix}${nextTick.value}`;
+    }
+  } catch {
+    throw new Error(
+      `You are using an "intervalsFormatter" on a not valid index: ${dataIndex} & for the ticks ${ticks}`
+    );
+  }
+};
diff --git a/template-sample-app-3/template/src/components/views/Stores.js b/template-sample-app-3/template/src/components/views/Stores.js
@@ -5,7 +5,7 @@ import {
   HistogramWidget,
   ScatterPlotWidget,
 } from '@carto/react-widgets';
-import { currencyFormatter, numberFormatter } from 'utils/formatter';
+import { currencyFormatter, intervalsFormatter } from 'utils/formatter';
 
 import { useEffect } from 'react';
 import storesSource from 'data/sources/storesSource';
@@ -117,7 +117,7 @@ export default function Stores() {
           column='revenue'
           operation={AggregationTypes.COUNT}
           ticks={[1200000, 1300000, 1400000, 1500000, 1600000, 1700000, 1800000]}
-          formatter={numberFormatter}
+          formatter={intervalsFormatter}
           xAxisFormatter={currencyFormatter}
           onError={onStoresByRevenueWidgetError}
         />

diff --git a/template-sample-app-3/template/src/components/views/Tileset.js b/template-sample-app-3/template/src/components/views/Tileset.js
@@ -15,7 +15,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { Grid, Divider, Typography } from '@material-ui/core';
 
 import { FormulaWidget, HistogramWidget } from '@carto/react-widgets';
-import { numberFormatter } from 'utils/formatter';
+import { numberFormatter, intervalsFormatter } from 'utils/formatter';
 import { AggregationTypes } from '@carto/react-core';
 
 const useStyles = makeStyles((theme) => ({
@@ -92,6 +92,7 @@ export default function Tileset() {
         title='Total aggregated count'
         dataSource={tilesetSource.id}
         xAxisFormatter={numberFormatter}
+        formatter={intervalsFormatter}
         operation={AggregationTypes.COUNT}
         column='aggregated_total'
         ticks={[10, 100, 1e3, 1e4, 1e5, 1e6]}

diff --git a/template-sample-app-3/template/src/utils/formatter.js b/template-sample-app-3/template/src/utils/formatter.js
@@ -14,6 +14,9 @@ import '@formatjs/intl-numberformat/polyfill';
 import '@formatjs/intl-numberformat/locale-data/en';
 
 const DEFAULT_LOCALE = 'en-US';
+const CIRCLE_SVG = `<svg width="10px" height="10px" fill="#47db99" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="5" cy="5" r="5"/>
+</svg>`;
 
 export const currencyFormatter = (value) => {
   const _value = parseLogicalOperation(value);
@@ -41,6 +44,13 @@ export const numberFormatter = (value) => {
   );
 };
 
+export const intervalsFormatter = (value, dataIndex, ticks) => {
+  const _value = numberFormatter(value);
+  if (!ticks || dataIndex === undefined) return _value;
+  const intervals = moneyInterval(dataIndex, ticks);
+  return `${intervals} <br/> ${CIRCLE_SVG} ${_value}`;
+};
+
 const parseLogicalOperation = (value) => {
   if (!isNaN(value)) return { value, operation: '' };
 
@@ -61,3 +71,25 @@ const parseLogicalOperation = (value) => {
     throw new Error(`You are using a numberFormatter on a not valid value: ${value}`);
   }
 };
+
+const moneyInterval = (dataIndex, ticks) => {
+  const isFirst = dataIndex === 0;
+  try {
+    if (isFirst || dataIndex === ticks.length) {
+      const comparison = isFirst ? '<' : '≥';
+      const formattedValue = isFirst
+        ? currencyFormatter(ticks[dataIndex])
+        : currencyFormatter(ticks[dataIndex - 1]);
+      return `${comparison} ${formattedValue.prefix}${formattedValue.value}`;
+    } else {
+      dataIndex = dataIndex - 1;
+      const prevTick = currencyFormatter(ticks[dataIndex]);
+      const nextTick = currencyFormatter(ticks[dataIndex + 1]);
+      return `${prevTick.prefix}${prevTick.value} — ${nextTick.prefix}${nextTick.value}`;
+    }
+  } catch {
+    throw new Error(
+      `You are using an "intervalsFormatter" on a not valid index: ${dataIndex} & for the ticks ${ticks}`
+    );
+  }
+};