feat: alphabetical sorting of formatted labels for flat legend

elastic · Mar 30, 2021 · d899405 · d899405
1 parent 448b601
commit d899405
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 26 deletions.
diff --git a/...tests-for-all-stories-flame-alpha-flame-chart-visually-looks-correct-1-snap.png b/...tests-for-all-stories-flame-alpha-flame-chart-visually-looks-correct-1-snap.png
diff --git a/...ests-for-all-stories-flame-alpha-icicle-chart-visually-looks-correct-1-snap.png b/...ests-for-all-stories-flame-alpha-icicle-chart-visually-looks-correct-1-snap.png
diff --git a/...-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png b/...-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png
diff --git a/...r-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png b/...r-all-stories-small-multiples-alpha-sunbursts-visually-looks-correct-1-snap.png
diff --git a/...ies-extra-values-should-display-flat-legend-extra-values-on-sunburst-1-snap.png b/...ies-extra-values-should-display-flat-legend-extra-values-on-sunburst-1-snap.png
diff --git a/...ries-extra-values-should-display-flat-legend-extra-values-on-treemap-1-snap.png b/...ries-extra-values-should-display-flat-legend-extra-values-on-treemap-1-snap.png
diff --git a/src/chart_types/partition_chart/layout/utils/legend.ts b/src/chart_types/partition_chart/layout/utils/legend.ts
@@ -21,7 +21,6 @@ import { CategoryKey } from '../../../../common/category';
 import { map } from '../../../../common/iterables';
 import { LegendItem } from '../../../../common/legend';
 import { LegendPositionConfig } from '../../../../specs/settings';
-import { identity } from '../../../../utils/common';
 import { isHierarchicalLegend } from '../../../../utils/legend';
 import { Layer } from '../../specs';
 import { QuadViewModel } from '../types/viewmodel_types';
@@ -45,10 +44,6 @@ function compareTreePaths(
   return a.length - b.length; // if one path is fully contained in the other, then parent (shorter) goes first
 }
 
-function compareNames({ dataName: a }: QuadViewModel, { dataName: b }: QuadViewModel): number {
-  return a < b ? -1 : a > b ? 1 : 0;
-}
-
 /** @internal */
 export function getLegendItems(
   id: string,
@@ -61,6 +56,17 @@ export function getLegendItems(
   const uniqueNames = new Set(map(({ dataName, fillColor }) => makeKey(dataName, fillColor), quadViewModel));
   const useHierarchicalLegend = isHierarchicalLegend(flatLegend, legendPosition);
 
+  const formattedLabel = ({ dataName, depth }: QuadViewModel) => {
+    const formatter = layers[depth - 1]?.nodeLabel;
+    return formatter ? formatter(dataName) : dataName;
+  };
+
+  function compareNames(aItem: QuadViewModel, bItem: QuadViewModel): number {
+    const a = formattedLabel(aItem);
+    const b = formattedLabel(bItem);
+    return a < b ? -1 : a > b ? 1 : 0;
+  }
+
   const excluded: Set<string> = new Set();
   const items = quadViewModel.filter(({ depth, dataName, fillColor }) => {
     if (legendMaxDepth !== null && depth > legendMaxDepth) {
@@ -78,11 +84,11 @@ export function getLegendItems(
 
   items.sort(flatLegend ? compareNames : compareTreePaths);
 
-  return items.map<LegendItem>(({ dataName, fillColor, depth, path }) => {
-    const formatter = layers[depth - 1]?.nodeLabel ?? identity;
+  return items.map<LegendItem>((item) => {
+    const { dataName, fillColor, depth, path } = item;
     return {
       color: fillColor,
-      label: formatter(dataName),
+      label: formattedLabel(item),
       childId: dataName,
       depth: useHierarchicalLegend ? depth - 1 : 0,
       path,

diff --git a/stories/small_multiples/7_sunbursts.tsx b/stories/small_multiples/7_sunbursts.tsx
@@ -125,26 +125,24 @@ export const Example = () => {
         valueAccessor={(d: Datum) => d.exportVal as number}
         valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
         smallMultiples="sm"
-        layers={
-          [
-            {
-              groupByRollup: (d: Datum) => d.sitc1,
-              nodeLabel: (d: any) => productLookup[d].name,
-              fillLabel: { maximizeFontSize: true },
-              shape: {
-                fillColor: (d: ShapeTreeNode) => productToColor.get(d.dataName)!,
-              },
+        layers={[
+          {
+            groupByRollup: (d: Datum) => d.sitc1,
+            nodeLabel: (d: any) => productLookup[d].name,
+            fillLabel: { maximizeFontSize: true },
+            shape: {
+              fillColor: (d: ShapeTreeNode) => productToColor.get(d.dataName)!,
             },
-            {
-              groupByRollup: (d: Datum) => d.dest,
-              nodeLabel: (d: any) => countryLookup[d].name,
-              fillLabel: { maximizeFontSize: true },
-              shape: {
-                fillColor: (d: ShapeTreeNode) => countryToColor.get(d.dataName)!,
-              },
+          },
+          {
+            groupByRollup: (d: Datum) => d.dest,
+            nodeLabel: (d: any) => countryLookup[d].name,
+            fillLabel: { maximizeFontSize: true },
+            shape: {
+              fillColor: (d: ShapeTreeNode) => countryToColor.get(d.dataName)!,
             },
-          ] /* .slice(layerFrom, layerTo) */
-        }
+          },
+        ]}
         config={{
           partitionLayout: PartitionLayout.sunburst,
           linkLabel: {