feat(goal): add valueFormatter for tooltip

packages/charts/api/charts.api.md

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

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

@@ -9,6 +9,7 @@
 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';
@@ -44,6 +45,7 @@ export interface BulletViewModel {
   belowBaseCount: number;
   angleStart: number;
   angleEnd: number;
+  valueFormatter?: ValueFormatter;
 }
 
 /** @internal */
@@ -80,6 +82,7 @@ export const defaultGoalSpec = {
   bandLabels: [],
   angleStart: Math.PI + Math.PI / 4,
   angleEnd: -Math.PI / 4,
+  valueFormatter: (value: any) => value,
 };
 
 /** @internal */
@@ -97,6 +100,7 @@ export const nullGoalViewModel = {
   belowBaseCount: 0,
   angleStart: 0,
   angleEnd: 0,
+  valueFormatter: undefined,
 };
 
 /** @internal */

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[];
+  valueFormatter: ValueFormatter;
 }
 
 type SpecRequiredProps = Pick<GoalSpec, 'id' | 'actual'>;
@@ -84,5 +85,6 @@ export const Goal: React.FunctionComponent<SpecRequiredProps & SpecOptionalProps
     | 'centralMinor'
     | 'angleStart'
     | 'angleEnd'
+    | 'valueFormatter'
   >(defaultProps),
 );

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

@@ -30,7 +30,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
     if (!spec) {
       return EMPTY_TOOLTIP;
     }
-
+    const { valueFormatter } = spec;
     const tooltipInfo: TooltipInfo = {
       header: null,
       values: [],
@@ -47,7 +47,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector(
           key: spec.id,
         },
         value,
-        formattedValue: `${value}`,
+        formattedValue: valueFormatter ? valueFormatter(value) : `${value}`,
         datum: value,
       });
     });

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

@@ -74,6 +74,7 @@ export const Example = () => {
         centralMinor=""
         angleStart={angleStart}
         angleEnd={angleEnd}
+        valueFormatter={(d: any) => `${d}`}
       />
     </Chart>
   );