feat(partition): linked text maximum length config (#665)

Adds a config option to limit the length of linked label text in character count
elastic · May 7, 2020 · 7166e42 · 7166e42
1 parent 4421748
commit 7166e42
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 4 deletions.
diff --git a/...ests-for-all-stories-sunburst-value-formatted-visually-looks-correct-1-snap.png b/...ests-for-all-stories-sunburst-value-formatted-visually-looks-correct-1-snap.png
diff --git a/src/chart_types/partition_chart/layout/config/config.ts b/src/chart_types/partition_chart/layout/config/config.ts
@@ -210,6 +210,12 @@ export const configMetadata = {
         type: 'number',
         documentation: 'Limits the total count of linked labels. The first N largest slices are kept.',
       },
+      maxTextLength: {
+        dflt: 100,
+        min: 2,
+        max: 200,
+        documentation: 'Limits the total number of characters in linked labels.',
+      },
       textColor: { dflt: '#000000', type: 'color' },
       textInvertible: { dflt: false, type: 'boolean' },
       textOpacity: { dflt: 1, min: 0, max: 1, type: 'number' },

diff --git a/src/chart_types/partition_chart/layout/types/config_types.ts b/src/chart_types/partition_chart/layout/types/config_types.ts
@@ -55,6 +55,7 @@ export interface LinkLabelConfig extends LabelConfig {
   radiusPadding: Distance;
   lineWidth: Pixels;
   maxCount: number;
+  maxTextLength: number;
 }
 
 export interface FillFontSizeRange {

diff --git a/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts b/src/chart_types/partition_chart/layout/viewmodel/link_text_layout.ts
@@ -19,7 +19,7 @@
 import { Distance } from '../types/geometry_types';
 import { Config } from '../types/config_types';
 import { TAU, trueBearingToStandardPositionAngle } from '../utils/math';
-import { LinkLabelVM, ShapeTreeNode, ValueGetterFunction } from '../types/viewmodel_types';
+import { LinkLabelVM, RawTextGetter, ShapeTreeNode, ValueGetterFunction } from '../types/viewmodel_types';
 import { meanAngle } from '../geometry';
 import { TextMeasure } from '../types/types';
 import { ValueFormatter } from '../../../../utils/commons';
@@ -31,9 +31,10 @@ export function linkTextLayout(
   nodesWithoutRoom: ShapeTreeNode[],
   currentY: Distance[],
   anchorRadius: Distance,
-  rawTextGetter: Function,
+  rawTextGetter: RawTextGetter,
   valueGetter: ValueGetterFunction,
   valueFormatter: ValueFormatter,
+  maxTextLength: number,
 ): LinkLabelVM[] {
   const { linkLabel } = config;
   const maxDepth = nodesWithoutRoom.reduce((p: number, n: ShapeTreeNode) => Math.max(p, n.depth), 0);
@@ -69,7 +70,8 @@ export function linkTextLayout(
       const stemFromY = y;
       const stemToX = x + north * west * cy - west * relativeY;
       const stemToY = cy;
-      const text = rawTextGetter(node);
+      const rawText = rawTextGetter(node);
+      const text = rawText.length <= maxTextLength ? rawText : `${rawText.substr(0, maxTextLength - 1)}…`; // ellipsis is one char
       const valueText = valueFormatter(valueGetter(node));
       const labelFontSpec = {
         fontStyle: 'normal',

diff --git a/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts b/src/chart_types/partition_chart/layout/viewmodel/viewmodel.ts
@@ -308,6 +308,8 @@ export function shapeViewModel(
           return !(foundInFillText && foundInFillText.rows.length !== 0);
         });
 
+  const maxLinkedLabelTextLength = config.linkLabel.maxTextLength;
+
   const linkLabelViewModels = linkTextLayout(
     textMeasure,
     config,
@@ -317,6 +319,7 @@ export function shapeViewModel(
     rawTextGetter,
     valueGetter,
     valueFormatter,
+    maxLinkedLabelTextLength,
   );
 
   const pickQuads: PickFunction = (x, y) => {

diff --git a/stories/sunburst/2_value_formatted.tsx b/stories/sunburst/2_value_formatted.tsx
@@ -21,6 +21,7 @@ import { mocks } from '../../src/mocks/hierarchical/index';
 import { config } from '../../src/chart_types/partition_chart/layout/config/config';
 import React from 'react';
 import { indexInterpolatedFillColor, interpolatorTurbo, productLookup } from '../utils/utils';
+import { number } from '@storybook/addon-knobs';
 
 export const example = () => (
   <Chart className="story-chart">
@@ -48,7 +49,14 @@ export const example = () => (
           },
         },
       ]}
-      config={{ outerSizeRatio: 0.9, linkLabel: { fontStyle: 'italic', valueFont: { fontWeight: 900 } } }}
+      config={{
+        outerSizeRatio: 0.9,
+        linkLabel: {
+          fontStyle: 'italic',
+          valueFont: { fontWeight: 900 },
+          maxTextLength: number('maxTextLength', 20, { range: true, min: 1, max: 100 }),
+        },
+      }}
     />
   </Chart>
 );