fix(heatmap): reuse the valueFormatter in legend (#1318)

elastic · Aug 20, 2021 · e6a75d7 · e6a75d7
1 parent 107617a
commit e6a75d7
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 10 deletions.
diff --git a/...ual-tests-for-all-stories-heatmap-alpha-basic-visually-looks-correct-1-snap.png b/...ual-tests-for-all-stories-heatmap-alpha-basic-visually-looks-correct-1-snap.png
diff --git a/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts b/packages/charts/src/chart_types/heatmap/scales/band_color_scale.ts
@@ -7,23 +7,28 @@
  */
 
 import { getPredicateFn } from '../../../common/predicate';
-import { Color } from '../../../utils/common';
+import { Color, safeFormat, ValueFormatter } from '../../../utils/common';
 import { ColorBand, HeatmapBandsColorScale } from '../specs/heatmap';
 import { ColorScale } from '../state/selectors/get_color_scale';
 
 const TRANSPARENT_COLOR: Color = 'rgba(0, 0, 0, 0)';
 
-function defaultColorBandFormatter(start: number, end: number) {
-  const finiteStart = Number.isFinite(start);
-  const finiteEnd = Number.isFinite(end);
-  return !finiteStart && finiteEnd ? `< ${end}` : finiteStart && !finiteEnd ? `≥ ${start}` : `${start} - ${end}`;
+function defaultColorBandFormatter(valueFormatter?: ValueFormatter) {
+  return (startValue: number, endValue: number) => {
+    const finiteStart = Number.isFinite(startValue);
+    const finiteEnd = Number.isFinite(endValue);
+    const start = safeFormat(startValue, valueFormatter);
+    const end = safeFormat(endValue, valueFormatter);
+    return !finiteStart && finiteEnd ? `< ${end}` : finiteStart && !finiteEnd ? `≥ ${start}` : `${start} - ${end}`;
+  };
 }
 
 /** @internal */
 export function getBandsColorScale(
   colorScale: HeatmapBandsColorScale,
+  valueFormatter?: ValueFormatter,
 ): { scale: ColorScale; bands: Required<ColorBand>[] } {
-  const labelFormatter = colorScale.labelFormatter ?? defaultColorBandFormatter;
+  const labelFormatter = colorScale.labelFormatter ?? defaultColorBandFormatter(valueFormatter);
   const ascendingSortFn = getPredicateFn('numAsc', 'start');
   const bands = colorScale.bands
     .reduce<Required<ColorBand>[]>((acc, { start, end, color, label }) => {

diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_color_scale.ts
@@ -22,4 +22,4 @@ export type ColorScale = (value: number) => Color;
 export const getColorScale = createCustomCachedSelector([getHeatmapSpecSelector], (spec): {
   scale: ColorScale;
   bands: Required<ColorBand>[];
-} => getBandsColorScale(spec.colorScale));
+} => getBandsColorScale(spec.colorScale, spec.valueFormatter));
diff --git a/storybook/stories/heatmap/1_basic.tsx b/storybook/stories/heatmap/1_basic.tsx
@@ -116,8 +116,8 @@ export const Example = () => {
         colorScale={{
           type: 'bands',
           bands: [
-            { start: -Infinity, end: 3, color: '#d2e9f7' },
-            { start: 3, end: 25, color: '#8bc8fb' },
+            { start: -Infinity, end: 3.5, color: '#d2e9f7' },
+            { start: 3.5, end: 25, color: '#8bc8fb' },
             { start: 25, end: 50, color: '#fdec25' },
             { start: 50, end: 75, color: '#fba740' },
             { start: 75, end: Infinity, color: '#fe5050' },
@@ -127,7 +127,7 @@ export const Example = () => {
         xAccessor={(d) => d.time}
         yAccessor={(d) => d.laneLabel}
         valueAccessor={(d) => d.value}
-        valueFormatter={(d) => d.toFixed(0.2)}
+        valueFormatter={(d) => `${Number(d.toFixed(2))}℃`}
         ySortPredicate="numAsc"
         xScaleType={ScaleType.Time}
         config={config}