fix(legend): avoid re-rendering

packages/charts/src/chart_types/xy_chart/state/selectors/get_legend_item_extra_values.ts

@@ -13,12 +13,15 @@ import { EMPTY_LEGEND_ITEM_EXTRA_VALUES } from '../../../../common/legend';
 import type { SeriesKey } from '../../../../common/series_id';
 import { ScaleType } from '../../../../scales/constants';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getLegendConfigSelector } from '../../../../state/selectors/get_legend_config_selector';
 import { getLegendItemExtraValues } from '../../tooltip/tooltip';
 
 /** @internal */
 export const getLegendItemExtraValuesSelector = createCustomCachedSelector(
-  [getTooltipInfoAndGeomsSelector, getComputedScalesSelector],
-  ({ tooltip: { values } }, { xScale: { type } }): Map<SeriesKey, LegendItemExtraValues> =>
+  [getTooltipInfoAndGeomsSelector, getComputedScalesSelector, getLegendConfigSelector],
+  ({ tooltip: { values } }, { xScale: { type } }, { legendValues }): Map<SeriesKey, LegendItemExtraValues> =>
     // See https://github.com/elastic/elastic-charts/issues/2050
-    type === ScaleType.Ordinal ? EMPTY_LEGEND_ITEM_EXTRA_VALUES : getLegendItemExtraValues(values),
+    type === ScaleType.Ordinal || legendValues.length === 0
+      ? EMPTY_LEGEND_ITEM_EXTRA_VALUES
+      : getLegendItemExtraValues(values),
 );

packages/charts/src/state/chart_selectors.ts

@@ -27,9 +27,6 @@ export interface LegendItemLabel {
   depth: number;
 }
 
-/** @internal */
-export const EMPTY_LEGEND_ITEM_LIST: LegendItemLabel[] = [];
-
 /**
  * A set of chart-type-dependant functions that are required by all chart types
  * @internal
@@ -148,10 +145,19 @@ export interface ChartSelectors {
   canDisplayChartTitles(globalState: GlobalChartState): boolean;
 }
 
-/** @internal */
-export type ChartSelectorsFactory = () => ChartSelectors;
+type ChartSelectorsFactory = () => ChartSelectors;
 
+const EMPTY_LEGEND_ITEM_LIST: LegendItemLabel[] = [];
 const EMPTY_TOOLTIP = Object.freeze({ header: null, values: [] });
+const EMPTY_DIMENSION = Object.freeze({ top: 0, left: 0, width: 0, height: 0 });
+const EMPTY_SM_DOMAINS: SmallMultiplesSeriesDomains = Object.freeze({ smVDomain: [], smHDomain: [] });
+const EMPTY_OBJ = Object.freeze({});
+const EMPTY_TOOLTIP_VISIBILITY: TooltipVisibility = Object.freeze({
+  visible: false,
+  isExternal: false,
+  displayOnly: false,
+  isPinnable: false,
+});
 
 type CallbackCreator = () => (state: GlobalChartState) => void;
 
@@ -173,20 +179,15 @@ export const createChartSelectorsFactory =
       getLegendItemsLabels: () => EMPTY_LEGEND_ITEM_LIST,
       getLegendExtraValues: () => EMPTY_LEGEND_ITEM_EXTRA_VALUES,
       getPointerCursor: () => DEFAULT_CSS_CURSOR,
-      isTooltipVisible: () => ({
-        visible: false,
-        isExternal: false,
-        displayOnly: false,
-        isPinnable: false,
-      }),
+      isTooltipVisible: () => EMPTY_TOOLTIP_VISIBILITY,
       getTooltipInfo: () => EMPTY_TOOLTIP,
       getTooltipAnchor: () => null,
-      getProjectionContainerArea: () => ({ top: 0, left: 0, width: 0, height: 0 }),
-      getMainProjectionArea: () => ({ top: 0, left: 0, width: 0, height: 0 }),
+      getProjectionContainerArea: () => EMPTY_DIMENSION,
+      getMainProjectionArea: () => EMPTY_DIMENSION,
       getBrushArea: () => null,
-      getDebugState: () => ({}),
+      getDebugState: () => EMPTY_OBJ,
       getChartTypeDescription: () => '',
-      getSmallMultiplesDomains: () => ({ smVDomain: [], smHDomain: [] }),
+      getSmallMultiplesDomains: () => EMPTY_SM_DOMAINS,
       canDisplayChartTitles: () => true,
       ...overrides,
       eventCallbacks: (state: GlobalChartState) => {