feat(goal): add valueFormatter for tooltip (#1529)

integration/tests/goal_stories.test.ts

@@ -42,6 +42,13 @@ describe('Goal stories', () => {
         'http://localhost:9001/?path=/story/goal-alpha--gauge-with-target&knob-angleStart (n * π/8)=11&knob-angleEnd (n * π/8)=-3',
       );
     });
+
+    it('should show custom value formatter in tooltip', async () => {
+      await common.expectChartWithMouseAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/goal-alpha--gauge-with-target&knob-test tooltip value formatter=true',
+        { right: 245, bottom: 120 },
+      );
+    });
   });
 
   eachTheme.describe((_, params) => {

packages/charts/api/charts.api.md

@@ -980,6 +980,8 @@ export interface GoalSpec extends Spec {
     ticks: number[];
     // (undocumented)
     tickValueFormatter: GoalLabelAccessor;
+    // (undocumented)
+    tooltipValueFormatter: ValueFormatter;
 }
 
 // @public (undocumented)

packages/charts/src/chart_types/goal_chart/layout/types/viewmodel_types.ts

@@ -9,9 +9,10 @@
 import { getGreensColorScale } from '../../../../common/color_library_wrappers';
 import { Pixels, PointObject } from '../../../../common/geometry';
 import { SpecType } from '../../../../specs/constants';
+import { ValueFormatter } from '../../../../utils/common';
 import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
 import { Theme } from '../../../../utils/themes/theme';
-import { BandFillColorAccessorInput } from '../../specs';
+import { BandFillColorAccessorInput, GoalLabelAccessor } from '../../specs';
 import { GoalSubtype } from '../../specs/constants';
 
 /** @internal */
@@ -36,14 +37,15 @@ export interface BulletViewModel {
   ticks: Array<TickViewModel>;
   labelMajor: string;
   labelMinor: string;
-  centralMajor: string;
+  centralMajor: string | GoalLabelAccessor;
   centralMinor: string;
   highestValue: number;
   lowestValue: number;
   aboveBaseCount: number;
   belowBaseCount: number;
   angleStart: number;
   angleEnd: number;
+  tooltipValueFormatter: ValueFormatter;
 }
 
 /** @internal */
@@ -80,6 +82,7 @@ export const defaultGoalSpec = {
   bandLabels: [],
   angleStart: Math.PI + Math.PI / 4,
   angleEnd: -Math.PI / 4,
+  tooltipValueFormatter: (value: number) => String(value),
 };
 
 /** @internal */
@@ -97,6 +100,7 @@ export const nullGoalViewModel = {
   belowBaseCount: 0,
   angleStart: 0,
   angleEnd: 0,
+  tooltipValueFormatter: () => '',
 };
 
 /** @internal */

packages/charts/src/chart_types/goal_chart/layout/viewmodel/viewmodel.ts

@@ -39,7 +39,6 @@ export function shapeViewModel(spec: GoalSpec, theme: Theme, chartDimensions: Di
     angleStart,
     angleEnd,
   } = spec;
-
   const [lowestValue, highestValue] = [base, ...(target ? [target] : []), actual, ...bands, ...ticks].reduce(
     ([min, max], value) => [Math.min(min, value), Math.max(max, value)],
     [Infinity, -Infinity],
@@ -84,6 +83,7 @@ export function shapeViewModel(spec: GoalSpec, theme: Theme, chartDimensions: Di
     belowBaseCount,
     angleStart,
     angleEnd,
+    tooltipValueFormatter: () => '',
   };
 
   const pickQuads: PickFunction = (x, y) =>

packages/charts/src/chart_types/goal_chart/specs/index.ts

@@ -13,7 +13,7 @@ import { Color } from '../../../common/colors';
 import { Spec } from '../../../specs';
 import { SpecType } from '../../../specs/constants';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
-import { LabelAccessor } from '../../../utils/common';
+import { LabelAccessor, ValueFormatter } from '../../../utils/common';
 import { defaultGoalSpec } from '../layout/types/viewmodel_types';
 import { GoalSubtype } from './constants';
 
@@ -59,6 +59,7 @@ export interface GoalSpec extends Spec {
   angleStart: number;
   angleEnd: number;
   bandLabels: string[];
+  tooltipValueFormatter: ValueFormatter;
 }
 
 type SpecRequiredProps = Pick<GoalSpec, 'id' | 'actual'>;
@@ -84,5 +85,6 @@ export const Goal: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps
     | 'centralMinor'
     | 'angleStart'
     | 'angleEnd'
+    | 'tooltipValueFormatter'
   >(defaultProps),
 );

packages/charts/src/chart_types/goal_chart/state/selectors/tooltip.ts

@@ -30,6 +30,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
     if (!spec) {
       return EMPTY_TOOLTIP;
     }
+    const { tooltipValueFormatter, id } = spec;
 
     const tooltipInfo: TooltipInfo = {
       header: null,
@@ -43,11 +44,11 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
         isHighlighted: false,
         isVisible: true,
         seriesIdentifier: {
-          specId: spec.id,
-          key: spec.id,
+          specId: id,
+          key: id,
         },
         value,
-        formattedValue: `${value}`,
+        formattedValue: tooltipValueFormatter(value),
         datum: value,
       });
     });

packages/charts/src/components/accessibility/types.tsx

@@ -31,7 +31,7 @@ export function ScreenReaderTypes({
     <dl>
       <dt>Chart type:</dt>
       <dd id={defaultSummaryId}>{chartTypeDescription}</dd>
-      {validGoalChart && goalChartData ? (
+      {validGoalChart && goalChartData && !isNaN(goalChartData.maximum) ? (
         <>
           <dt>Minimum:</dt>
           <dd>{goalChartData.minimum}</dd>

storybook/stories/goal/2_gauge_with_target.story.tsx

@@ -70,10 +70,11 @@ export const Example = () => {
         bandFillColor={useColors ? ({ value }: BandFillColorAccessorInput) => bandFillColor(value) : undefined}
         labelMajor="Revenue 2020 YTD  "
         labelMinor="(thousand USD)  "
-        centralMajor={`${actual}`}
+        centralMajor={() => `$${actual}k USD`}
         centralMinor=""
         angleStart={angleStart}
         angleEnd={angleEnd}
+        tooltipValueFormatter={(d) => `$${d}k USD`}
       />
     </Chart>
   );