feat: add percentFormatter

elastic · Mar 10, 2020 · ae26259 · ae26259
1 parent 12d35ab
commit ae26259
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 8 deletions.
diff --git a/...ual-tests-for-all-stories-sunburst-percentage-visually-looks-correct-1-snap.png b/...ual-tests-for-all-stories-sunburst-percentage-visually-looks-correct-1-snap.png
diff --git a/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
@@ -63,7 +63,7 @@ import {
   sortIndexAccessor,
 } from '../utils/group_by_rollup';
 import { ValueAccessor, ValueFormatter } from '../../../../utils/commons';
-import { percentFormatter, percentValueGetter } from '../config/config';
+import { percentValueGetter } from '../config/config';
 
 function paddingAccessor(n: ArrayEntry) {
   return entryValue(n).depth > 1 ? 1 : [0, 2][entryValue(n).depth];
@@ -148,6 +148,7 @@ export function shapeViewModel(
   rawTextGetter: RawTextGetter,
   valueAccessor: ValueAccessor,
   specifiedValueFormatter: ValueFormatter,
+  specifiedPercentFormatter: ValueFormatter,
   valueGetter: ValueGetterFunction,
   groupByRollupAccessors: IndexedAccessorFn[],
 ): ShapeViewModel {
@@ -250,7 +251,7 @@ export function shapeViewModel(
 
   const textFillOrigins = nodesWithRoom.map(treemapLayout ? rectangleFillOrigins : sectorFillOrigins(fillOutside));
 
-  const valueFormatter = valueGetter === percentValueGetter ? percentFormatter : specifiedValueFormatter;
+  const valueFormatter = valueGetter === percentValueGetter ? specifiedPercentFormatter : specifiedValueFormatter;
 
   const rowSets: RowSet[] = fillTextLayout(
     textMeasure,

diff --git a/src/chart_types/partition_chart/specs/index.ts b/src/chart_types/partition_chart/specs/index.ts
@@ -17,7 +17,7 @@
  * under the License. */
 
 import { ChartTypes } from '../../index';
-import { config } from '../layout/config/config';
+import { config, percentFormatter } from '../layout/config/config';
 import { FunctionComponent } from 'react';
 import { getConnect, specComponentFactory } from '../../../state/spec_factory';
 import { IndexedAccessorFn } from '../../../utils/accessor';
@@ -43,6 +43,7 @@ const defaultProps = {
   valueAccessor: (d: Datum) => (typeof d === 'number' ? d : 0),
   valueGetter: (n: ShapeTreeNode): number => n[AGGREGATE_KEY],
   valueFormatter: (d: number): string => String(d),
+  percentFormatter,
   layers: [
     {
       groupByRollup: (d: Datum, i: number) => i,
@@ -60,14 +61,16 @@ export interface PartitionSpec extends Spec {
   valueAccessor: ValueAccessor;
   valueFormatter: ValueFormatter;
   valueGetter: ValueGetter;
+  percentFormatter: ValueFormatter;
   layers: Layer[];
 }
 
 type SpecRequiredProps = Pick<PartitionSpec, 'id' | 'data'>;
 type SpecOptionalProps = Partial<Omit<PartitionSpec, 'chartType' | 'specType' | 'id' | 'data'>>;
 
 export const Partition: FunctionComponent<SpecRequiredProps & SpecOptionalProps> = getConnect()(
-  specComponentFactory<PartitionSpec, 'valueAccessor' | 'valueGetter' | 'valueFormatter' | 'layers' | 'config'>(
-    defaultProps,
-  ),
+  specComponentFactory<
+    PartitionSpec,
+    'valueAccessor' | 'valueGetter' | 'valueFormatter' | 'layers' | 'config' | 'percentFormatter'
+  >(defaultProps),
 );
diff --git a/src/chart_types/partition_chart/state/selectors/scenegraph.ts b/src/chart_types/partition_chart/state/selectors/scenegraph.ts
@@ -62,6 +62,7 @@ export function render(partitionSpec: PartitionSpec, parentDimensions: Dimension
     rawTextGetter(layers),
     partitionSpec.valueAccessor,
     partitionSpec.valueFormatter,
+    partitionSpec.percentFormatter,
     valueGetter,
     [() => null, ...layers.map(({ groupByRollup }) => groupByRollup)],
   );

diff --git a/src/chart_types/partition_chart/state/selectors/tooltip.ts b/src/chart_types/partition_chart/state/selectors/tooltip.ts
@@ -27,7 +27,7 @@ import { SpecTypes } from '../../../../specs';
 import { getSpecsFromStore } from '../../../../state/utils';
 import { PartitionSpec } from '../../specs';
 import { valueGetterFunction } from './scenegraph';
-import { percentFormatter, percentValueGetter, sumValueGetter } from '../../layout/config/config';
+import { percentValueGetter, sumValueGetter } from '../../layout/config/config';
 
 function getCurrentPointerPosition(state: GlobalChartState) {
   return state.interactions.pointer.current.position;
@@ -94,7 +94,9 @@ export const getTooltipInfoSelector = createCachedSelector(
           specId: pieSpec.id,
           key: pieSpec.id,
         },
-        value: `${valueFormatter(primaryValueGetterFun(shape))} (${percentFormatter(percentValueGetter(shape))})`,
+        value: `${valueFormatter(primaryValueGetterFun(shape))} (${pieSpec.percentFormatter(
+          percentValueGetter(shape),
+        )})`,
         valueAccessor: shape.depth,
       });
       const shapeNode = node.children.find(([key]) => key === shape.dataName);

diff --git a/stories/sunburst/26_percentage.tsx b/stories/sunburst/26_percentage.tsx
@@ -37,6 +37,7 @@ export const example = () => (
       valueAccessor={(d: Datum) => d.exportVal as number}
       valueGetter="percent"
       valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
+      percentFormatter={(d: number) => `${Math.round((d + Number.EPSILON) * 100) / 100}%`}
       layers={[
         {
           groupByRollup: (d: Datum) => d.sitc1,