fix(waffle): fix strange 0 text in legend item extra when label is 0 (#…

…1538)

packages/charts/src/components/legend/utils.ts

@@ -18,6 +18,6 @@ export function getExtra(extraValues: Map<string, LegendItemExtraValues>, item:
   const [{ key }] = seriesIdentifiers;
   const extraValueKey = path.map(({ index }) => index).join('__');
   const itemExtraValues = extraValues.has(extraValueKey) ? extraValues.get(extraValueKey) : extraValues.get(key);
-  const actionExtra = childId && itemExtraValues?.get(childId);
+  const actionExtra = childId !== undefined && itemExtraValues?.get(childId);
   return actionExtra ?? (extraValues.size === totalItems ? defaultExtra?.formatted : null) ?? '';
 }

packages/charts/src/mocks/hierarchical/dimension_codes.ts

@@ -6,6 +6,18 @@
  * Side Public License, v 1.
  */
 
+/**@internal */
+export const productPriceNames = [
+  { products_price: 0.0, name: '0' },
+  { products_price: 50.0, name: '50' },
+  { products_price: 100.0, name: '100' },
+  { products_price: 150.0, name: '150' },
+  { products_price: 200.0, name: '200' },
+  { products_price: 350.0, name: '350' },
+  { products_price: 400.0, name: '400' },
+  { products_price: 1050.0, name: '1050' },
+];
+
 /** @internal */
 export const productDimension = [
   {

storybook/stories/utils/utils.ts

@@ -11,12 +11,14 @@ import {
   countryDimension,
   productDimension,
   regionDimension,
+  productPriceNames,
 } from '@elastic/charts/src/mocks/hierarchical/dimension_codes';
 import { palettes } from '@elastic/charts/src/mocks/hierarchical/palettes';
 
 export const productLookup = arrayToLookup((d: any) => d.sitc1, productDimension);
 export const regionLookup = arrayToLookup((d: any) => d.region, regionDimension);
 export const countryLookup = arrayToLookup((d: any) => d.country, countryDimension);
+export const productPriceLookup = arrayToLookup((d: any) => d.products_price, productPriceNames);
 
 type ColorMaker = (x: number) => string;
 

storybook/stories/waffle/2_test.story.tsx

@@ -0,0 +1,55 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { Chart, Datum, Partition, PartitionLayout, Settings, ShapeTreeNode } from '@elastic/charts';
+
+import { useBaseTheme } from '../../use_base_theme';
+import { colorBrewerCategoricalStark9, discreteColor, productPriceLookup } from '../utils/utils';
+
+export const Example = () => {
+  return (
+    <Chart className="story-chart">
+      <Settings
+        theme={{
+          chartMargins: { top: 0, left: 0, bottom: 0, right: 0 },
+          chartPaddings: { left: 170, right: 170, top: 70, bottom: 70 },
+        }}
+        baseTheme={useBaseTheme()}
+        showLegend
+        flatLegend
+        showLegendExtra
+      />
+      <Partition
+        id="spec_1"
+        data={[
+          { products_price: 0.0, median_day_of_week_i: 13 },
+          { products_price: 50.0, median_day_of_week_i: 3 },
+          { products_price: 100.0, median_day_of_week_i: 4 },
+          { products_price: 150.0, median_day_of_week_i: 3 },
+          { products_price: 200.0, median_day_of_week_i: 4 },
+          { products_price: 350.0, median_day_of_week_i: 0 },
+          { products_price: 400.0, median_day_of_week_i: 0 },
+          { products_price: 1050.0, median_day_of_week_i: 0 },
+        ]}
+        layout={PartitionLayout.waffle}
+        valueAccessor={(d: Datum) => d.median_day_of_week_i as number}
+        layers={[
+          {
+            groupByRollup: (d: Datum) => d.products_price,
+            nodeLabel: (d: Datum) => productPriceLookup[d].name,
+            shape: {
+              fillColor: (d: ShapeTreeNode) => discreteColor(colorBrewerCategoricalStark9.slice(1))(d.sortIndex),
+            },
+          },
+        ]}
+      />
+    </Chart>
+  );
+};

storybook/stories/waffle/waffle.stories.tsx

@@ -11,3 +11,4 @@ export default {
 };
 
 export { Example as simple } from './1_simple.story';
+export { Example as test } from './2_test.story';