refactor: move config string to pseudo enum object

elastic · Jan 19, 2021 · 8e6bd45 · 8e6bd45
1 parent 0300e6a
commit 8e6bd45
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 18 deletions.
diff --git a/api/charts.api.md b/api/charts.api.md
@@ -1062,7 +1062,17 @@ export interface LegendColorPickerProps {
 export type LegendItemListener = (series: SeriesIdentifier | null) => void;
 
 // @public (undocumented)
-export type LegendStrategy = 'node' | 'path' | 'key' | 'keyInLayer' | 'nodeWithDescendants' | 'pathWithDescendants';
+export const LegendStrategy: Readonly<{
+    Node: "node";
+    Path: "path";
+    KeyInLayer: "keyInLayer";
+    Key: "key";
+    NodeWithDescendants: "nodeWithDescendants";
+    PathWithDescendants: "pathWithDescendants";
+}>;
+
+// @public (undocumented)
+export type LegendStrategy = $Values<typeof LegendStrategy>;
 
 // Warning: (ae-missing-release-tag) "LegendStyle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //

diff --git a/src/chart_types/partition_chart/state/selectors/get_highlighted_shapes.ts b/src/chart_types/partition_chart/state/selectors/get_highlighted_shapes.ts
@@ -18,6 +18,7 @@
  */
 
 import createCachedSelector from 're-reselect';
+import { $Values } from 'utility-types';
 
 import { LegendPath } from '../../../../state/actions/legend';
 import { GlobalChartState } from '../../../../state/chart_state';
@@ -58,9 +59,36 @@ const legendStrategies = Object.freeze({
 });
 
 /** @public */
-export type LegendStrategy = 'node' | 'path' | 'key' | 'keyInLayer' | 'nodeWithDescendants' | 'pathWithDescendants'; // keyof typeof legendStrategies
+export const LegendStrategy = Object.freeze({
+  /**
+   * Highlight the specific node(s) that the legend item stands for.
+   */
+  Node: 'node' as const,
+  /**
+   * Highlight members of the exact path; ie. like `Node`, plus all its ancestors
+   */
+  Path: 'path' as const,
+  /**
+   * Highlight all identically named (labelled) items within the tree layer (depth or ring) of the specific node(s) that the legend item stands for
+   */
+  KeyInLayer: 'keyInLayer' as const,
+  /**
+   * Highlight all identically named (labelled) items, no matter where they are
+   */
+  Key: 'key' as const,
+  /**
+   * Highlight the specific node(s) that the legend item stands for, plus all descendants
+   */
+  NodeWithDescendants: 'nodeWithDescendants' as const,
+  /**
+   * Highlight the specific node(s) that the legend item stands for, plus all ancestors and descendants
+   */
+  PathWithDescendants: 'pathWithDescendants' as const,
+});
 
-const defaultStrategy: LegendStrategy = 'key';
+/** @public */
+export type LegendStrategy = $Values<typeof LegendStrategy>;
+const defaultStrategy: LegendStrategy = LegendStrategy.Key;
 
 /** @internal */
 // why is it called highlighted... when it's a legend hover related thing, not a hover over the slices?

diff --git a/stories/icicle/02_unix_flame.tsx b/stories/icicle/02_unix_flame.tsx
@@ -19,7 +19,7 @@
 
 import React from 'react';
 
-import { Chart, Datum, Partition, PartitionLayout, Settings } from '../../src';
+import { Chart, Datum, LegendStrategy, Partition, PartitionLayout, Settings } from '../../src';
 import { STORYBOOK_LIGHT_THEME } from '../shared';
 import { config, getFlatData, getLayerSpec, maxDepth } from '../utils/hierarchical_input_utils';
 import { plasma18 as palette } from '../utils/utils';
@@ -32,7 +32,7 @@ export const Example = () => {
       <Settings
         showLegend
         flatLegend
-        legendStrategy="pathWithDescendants"
+        legendStrategy={LegendStrategy.PathWithDescendants}
         legendMaxDepth={maxDepth}
         theme={STORYBOOK_LIGHT_THEME}
       />

diff --git a/stories/legend/10_sunburst.tsx b/stories/legend/10_sunburst.tsx
@@ -20,7 +20,7 @@
 import { boolean, number, select } from '@storybook/addon-knobs';
 import React from 'react';
 
-import { Chart, Datum, Partition, PartitionLayout, Settings } from '../../src';
+import { Chart, Datum, LegendStrategy, Partition, PartitionLayout, Settings } from '../../src';
 import { config } from '../../src/chart_types/partition_chart/layout/config/config';
 import { ShapeTreeNode } from '../../src/chart_types/partition_chart/layout/types/viewmodel_types';
 import { mocks } from '../../src/mocks/hierarchical';
@@ -40,18 +40,7 @@ export const Example = () => {
     max: 3,
     step: 1,
   });
-  const legendStrategy = select(
-    'legendStrategy',
-    {
-      node: 'node',
-      path: 'path',
-      keyInLayer: 'keyInLayer',
-      key: 'key',
-      nodeWithDescendants: 'nodeWithDescendants',
-      pathWithDescendants: 'pathWithDescendants',
-    },
-    'key',
-  );
+  const legendStrategy = select('legendStrategy', LegendStrategy, LegendStrategy.Key);
 
   return (
     <Chart className="story-chart">