feat: percentage display in partitioning charts

src/chart_types/partition_chart/layout/config/config.ts

@@ -28,18 +28,18 @@ export function ratioValueGetter(node: ShapeTreeNode): number {
 export const VALUE_GETTERS = Object.freeze({ percent: percentValueGetter, ratio: ratioValueGetter } as const);
 export type ValueGetterName = keyof typeof VALUE_GETTERS;
 
-function defaultFormatter(d: any): string {
-  return typeof d === 'string'
-    ? d
-    : typeof d === 'number'
-    ? Math.abs(d) >= 10000000 || Math.abs(d) < 0.001
-      ? d.toExponential(Math.min(2, Math.max(0, significantDigitCount(d) - 1)))
-      : d.toLocaleString(void 0, {
-          maximumSignificantDigits: 4,
-          maximumFractionDigits: 3,
-          useGrouping: true,
-        })
-    : String(d);
+function defaultFormatter(d: number): string {
+  return Math.abs(d) >= 10000000 || Math.abs(d) < 0.001
+    ? d.toExponential(Math.min(2, Math.max(0, significantDigitCount(d) - 1)))
+    : d.toLocaleString(void 0, {
+        maximumSignificantDigits: 4,
+        maximumFractionDigits: 3,
+        useGrouping: true,
+      });
+}
+
+export function percentFormatter(d: number): string {
+  return Math.round(d) + '%';
 }
 
 const valueFont = {

src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts

@@ -45,6 +45,7 @@ import {
   sortIndexAccessor,
 } from '../utils/group_by_rollup';
 import { ValueAccessor, ValueFormatter } from '../../../../utils/commons';
+import { percentFormatter, percentValueGetter } from '../config/config';
 
 function paddingAccessor(n: ArrayEntry) {
   return entryValue(n).depth > 1 ? 1 : [0, 2][entryValue(n).depth];
@@ -128,7 +129,7 @@ export function shapeViewModel(
   facts: Relation,
   rawTextGetter: RawTextGetter,
   valueAccessor: ValueAccessor,
-  valueFormatter: ValueFormatter,
+  specifiedValueFormatter: ValueFormatter,
   valueGetter: ValueGetterFunction,
   groupByRollupAccessors: IndexedAccessorFn[],
 ): ShapeViewModel {
@@ -231,6 +232,8 @@ export function shapeViewModel(
 
   const textFillOrigins = nodesWithRoom.map(treemapLayout ? rectangleFillOrigins : sectorFillOrigins(fillOutside));
 
+  const valueFormatter = valueGetter === percentValueGetter ? percentFormatter : specifiedValueFormatter;
+
   const rowSets: RowSet[] = fillTextLayout(
     textMeasure,
     rawTextGetter,

src/chart_types/partition_chart/state/selectors/tooltip.ts

@@ -9,6 +9,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';
 
 function getCurrentPointerPosition(state: GlobalChartState) {
   return state.interactions.pointer.current.position;
@@ -60,9 +61,11 @@ export const getTooltipInfoSelector = createCachedSelector(
       values: [],
     };
     const valueGetterFun = valueGetterFunction(valueGetter);
+    const primaryValueGetterFun = valueGetterFun === percentValueGetter ? sumValueGetter : valueGetterFun;
     pickedShapes.forEach((shape) => {
       const node = shape.parent;
-      const formatter = labelFormatters[shape.depth - 1] && labelFormatters[shape.depth - 1].nodeLabel;
+      const labelFormatter = labelFormatters[shape.depth - 1];
+      const formatter = labelFormatter?.nodeLabel;
 
       tooltipInfo.values.push({
         label: formatter ? formatter(shape.dataName) : shape.dataName,
@@ -73,7 +76,7 @@ export const getTooltipInfoSelector = createCachedSelector(
           specId: pieSpec.id,
           key: pieSpec.id,
         },
-        value: valueFormatter(valueGetterFun(shape)),
+        value: valueFormatter(primaryValueGetterFun(shape)) + ' (' + percentFormatter(percentValueGetter(shape)) + ')',
         valueAccessor: shape.depth,
       });
       const shapeNode = node.children.find(([key]) => key === shape.dataName);

stories/sunburst/26_percentage.tsx

@@ -9,6 +9,7 @@ import {
   productLookup,
   regionLookup,
 } from '../utils/utils';
+import { config } from '../../src/chart_types/partition_chart/layout/config/config';
 
 export const example = () => (
   <Chart className="story-chart">
@@ -17,7 +18,7 @@ export const example = () => (
       data={mocks.miniSunburst}
       valueAccessor={(d: Datum) => d.exportVal as number}
       valueGetter="percent"
-      valueFormatter={(d: number) => `${Math.round(d)}%`}
+      valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
       layers={[
         {
           groupByRollup: (d: Datum) => d.sitc1,

stories/treemap/7_percentage.tsx

@@ -1,6 +1,6 @@
 import { Chart, Datum, Partition, PartitionLayout } from '../../src';
 import { mocks } from '../../src/mocks/hierarchical/index';
-import { percentValueGetter } from '../../src/chart_types/partition_chart/layout/config/config';
+import { config, percentValueGetter } from '../../src/chart_types/partition_chart/layout/config/config';
 import { arrayToLookup, hueInterpolator } from '../../src/chart_types/partition_chart/layout/utils/calcs';
 import { countryDimension, regionDimension } from '../../src/mocks/hierarchical/dimension_codes';
 import { palettes } from '../../src/mocks/hierarchical/palettes';
@@ -26,7 +26,7 @@ export const example = () => (
       data={mocks.sunburst}
       valueAccessor={(d: Datum) => d.exportVal as number}
       valueGetter={percentValueGetter}
-      valueFormatter={(d: number) => `${Math.round(d)}%`}
+      valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\xa0Bn`}
       layers={[
         {
           groupByRollup: (d: Datum) => countryLookup[d.dest].continentCountry.substr(0, 2),