fix: group legend items by label and color

.playground/index.html

@@ -8,7 +8,7 @@
     <style>
       html,
       body {
-        background: blanchedalmond !important;
+        background: white !important;
         width: 100%;
         height: 100%;
         overflow: hidden;

.playground/index.tsx

@@ -22,6 +22,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import '../src/theme_light.scss';
+import '../node_modules/@elastic/eui/dist/eui_theme_light.css';
 import { Playground } from './playground';
 
 ReactDOM.render(<Playground />, document.getElementById('root') as HTMLElement);

.playground/webpack.config.js

@@ -35,6 +35,16 @@ module.exports = {
           transpileOnly: true,
         },
       },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: { importLoaders: 1 },
+          },
+        ],
+      },
       {
         test: /\.scss$/,
         use: [

api/charts.api.md

@@ -1778,6 +1778,11 @@ export type SeriesIdentifier = {
     key: SeriesKey;
 };
 
+// Warning: (ae-missing-release-tag) "SeriesKey" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export type SeriesKey = CategoryKey;
+
 // @public (undocumented)
 export type SeriesName = string | number | null;
 
@@ -2163,6 +2168,11 @@ export type TickStyle = StrokeStyle & Visible & {
 // @public (undocumented)
 export function timeFormatter(format: string): TickFormatter;
 
+// Warning: (ae-missing-release-tag) "toEntries" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
+//
+// @public
+export function toEntries<T extends Record<string, string>, S>(array: T[], accessor: keyof T, staticValue: S): Record<string, S>;
+
 // @public
 export interface TooltipInfo {
     header: TooltipValue | null;
@@ -2348,7 +2358,6 @@ export type YDomainRange = YDomainBase & DomainRange;
 // src/chart_types/heatmap/layout/types/config_types.ts:62:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:130:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:131:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
-// src/common/series_id.ts:40:3 - (ae-forgotten-export) The symbol "SeriesKey" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

src/chart_types/partition_chart/partition.test.tsx

@@ -104,6 +104,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 0,
           label: 'A',
           seriesIdentifiers: [{ key: 'A', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'A',
@@ -116,6 +117,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 1,
           label: 'A',
           seriesIdentifiers: [{ key: 'A', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'B',
@@ -128,6 +130,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 1,
           label: 'B',
           seriesIdentifiers: [{ key: 'B', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'B',
@@ -139,6 +142,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 0,
           label: 'B',
           seriesIdentifiers: [{ key: 'B', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'A',
@@ -151,6 +155,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 1,
           label: 'A',
           seriesIdentifiers: [{ key: 'A', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'B',
@@ -163,6 +168,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 1,
           label: 'B',
           seriesIdentifiers: [{ key: 'B', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'C',
@@ -174,6 +180,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 0,
           label: 'C',
           seriesIdentifiers: [{ key: 'C', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'A',
@@ -186,6 +193,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 1,
           label: 'A',
           seriesIdentifiers: [{ key: 'A', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'B',
@@ -198,6 +206,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 1,
           label: 'B',
           seriesIdentifiers: [{ key: 'B', specId: 'spec1' }],
+          keys: [],
         },
       ]);
     });
@@ -221,6 +230,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 0,
           label: 'A',
           seriesIdentifiers: [{ key: 'A', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'A',
@@ -243,6 +253,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 1,
           label: 'A',
           seriesIdentifiers: [{ key: 'A', specId: 'spec1' }],
+          keys: [],
         },
       ]);
     });
@@ -266,6 +277,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 0,
           label: 'C',
           seriesIdentifiers: [{ key: 'C', specId: 'spec1' }],
+          keys: [],
         },
         {
           childId: 'B',
@@ -287,6 +299,7 @@ describe('Retain hierarchy even with arbitrary names', () => {
           depth: 1,
           label: 'B',
           seriesIdentifiers: [{ key: 'B', specId: 'spec1' }],
+          keys: [],
         },
       ]);
     });

src/chart_types/xy_chart/legend/legend.ts

@@ -172,11 +172,10 @@ export function computeLegend(
     return defaultXYLegendSeriesSort(aDs, bDs);
   });
 
-  // return legendItems.sort((a, b) => legendSortFn(a.seriesIdentifiers[0], b.seriesIdentifiers[0]));
   return groupBy(
     legendItems.sort((a, b) => legendSortFn(a.seriesIdentifiers[0], b.seriesIdentifiers[0])),
-    ({ keys }) => {
-      return keys.join('__');
+    ({ keys, childId }) => {
+      return [...keys, childId].join('__'); // childId is used for band charts
     },
     true,
   ).map((d) => {

src/components/legend/legend_item.tsx

@@ -70,11 +70,9 @@ export function renderLegendItem(
   totalItems: number,
   index: number,
 ) {
-  const { seriesIdentifiers, childId } = item;
-
   return (
     <LegendListItem
-      key={`${seriesIdentifiers.map(({ key }) => key).join('-')}-${childId}-${index}`}
+      key={`${index}`}
       item={item}
       totalItems={totalItems}
       position={props.position}

src/index.ts

@@ -25,10 +25,11 @@ export { SpecId, GroupId, AxisId, AnnotationId } from './utils/ids';
 // Everything related to the specs types and react-components
 export * from './specs';
 export { DebugState } from './state/types';
+export { toEntries } from './utils/common';
 export { CurveType } from './utils/curves';
 export { SimplePadding } from './utils/dimensions';
 export { timeFormatter, niceTimeFormatter, niceTimeFormatByDay } from './utils/data/formatters';
-export { SeriesIdentifier } from './common/series_id';
+export { SeriesIdentifier, SeriesKey } from './common/series_id';
 export { XYChartSeriesIdentifier, DataSeriesDatum, FilledValues } from './chart_types/xy_chart/utils/series';
 export { AnnotationTooltipFormatter, CustomAnnotationTooltip } from './chart_types/xy_chart/annotations/types';
 export { GeometryValue, BandedAccessorType } from './utils/geometry';

src/specs/settings.tsx

@@ -270,7 +270,7 @@ export interface ExternalPointerEventsSettings {
  */
 export interface LegendActionProps {
   /**
-   * Series identifier for the given series
+   * Series identifiers for the given series
    */
   series: SeriesIdentifier[];
   /**
@@ -309,7 +309,7 @@ export interface LegendColorPickerProps {
    */
   onChange: (color: Color | null) => void;
   /**
-   * Series id for the active series
+   * Series ids for the active series
    */
   seriesIdentifiers: SeriesIdentifier[];
 }

src/state/reducers/interactions.ts

@@ -17,6 +17,8 @@
  * under the License.
  */
 
+import { ChartTypes } from '../../chart_types';
+import { getPickedShapesLayerValues } from '../../chart_types/partition_chart/state/selectors/picked_shapes';
 import { LegendItem } from '../../common/legend';
 import { SeriesIdentifier } from '../../common/series_id';
 import { LayerValue } from '../../specs';

src/utils/common.ts

@@ -549,6 +549,10 @@ export const getPercentageValue = <T>(ratio: string | number, relativeValue: num
  */
 export const keepDistinct = <T>(d: T, i: number, a: T[]): boolean => a.indexOf(d) === i;
 
+/**
+ * Return an object which keys are values of an object and the value is the
+ * static one provided
+ */
 export function toEntries<T extends Record<string, string>, S>(
   array: T[],
   accessor: keyof T,

stories/legend/9_color_picker.tsx

@@ -21,9 +21,18 @@ import { EuiColorPicker, EuiWrappingPopover, EuiButton, EuiSpacer, EuiFlexItem,
 import { action } from '@storybook/addon-actions';
 import React, { useState, useMemo } from 'react';
 
-import { Axis, BarSeries, Chart, Position, ScaleType, Settings, LegendColorPicker } from '../../src';
-import { SeriesKey } from '../../src/common/series_id';
-import { Color, toEntries } from '../../src/utils/common';
+import {
+  Axis,
+  BarSeries,
+  Chart,
+  Position,
+  ScaleType,
+  Settings,
+  LegendColorPicker,
+  Color,
+  SeriesKey,
+  toEntries,
+} from '../../src';
 import { BARCHART_1Y1G } from '../../src/utils/data_samples/test_dataset';
 
 const onChangeAction = action('onChange');

stories/small_multiples/3_grid_lines.tsx

@@ -130,15 +130,13 @@ export const Example = () => {
 
       <LineSeries
         id="line"
+        name={({ splitAccessors }) => `Host ${splitAccessors.get('h')}`}
         xScaleType={ScaleType.Time}
         yScaleType={ScaleType.Linear}
         timeZone="UTC"
         xAccessor="x"
         yAccessors={['y']}
-        // color={({ smHorizontalAccessorValue }) => {
-        //   const val = Number(`${smHorizontalAccessorValue}`.split('host ')[1]);
-        //   return LIGHT_THEME.colors.vizColors[val];
-        // }}
+        splitSeriesAccessors={['h']}
         data={data}
       />
     </Chart>

stories/small_multiples/4_horizontal_bars.tsx

@@ -107,7 +107,8 @@ export const Example = () => {
       />
       <BarSeries
         id="website a"
-        xScaleType={ScaleType.Time}
+        name={({ splitAccessors }) => `WebA - ${splitAccessors.get('g')}`}
+        xScaleType={ScaleType.Ordinal}
         yScaleType={ScaleType.Linear}
         timeZone="local"
         xAccessor="x"
@@ -118,7 +119,8 @@ export const Example = () => {
       />
       <BarSeries
         id="website b"
-        xScaleType={ScaleType.Time}
+        name={({ splitAccessors }) => `WebB - ${splitAccessors.get('g')}`}
+        xScaleType={ScaleType.Ordinal}
         yScaleType={ScaleType.Linear}
         timeZone="local"
         xAccessor="x"
@@ -129,7 +131,8 @@ export const Example = () => {
       />
       <BarSeries
         id="website c"
-        xScaleType={ScaleType.Time}
+        name={({ splitAccessors }) => `WebC - ${splitAccessors.get('g')}`}
+        xScaleType={ScaleType.Ordinal}
         yScaleType={ScaleType.Linear}
         timeZone="local"
         xAccessor="x"

stories/small_multiples/4_vertical_bars.tsx

@@ -81,13 +81,12 @@ export const Example = () => {
   );
   const showLegend = boolean('Show Legend', true);
   const onElementClick = action('onElementClick');
-  const disableSmallMultiples = boolean('Disable small multiples', false);
 
   return (
     <Chart className="story-chart">
-      <Settings onElementClick={onElementClick} rotation={0} showLegend={showLegend} />
-      <Axis id="time" title="metric" position={Position.Bottom} gridLine={{ visible: false }} />
-      <Axis id="y" title="Day of week" position={Position.Left} gridLine={{ visible: false }} />
+      <Settings onElementClick={onElementClick} showLegend={showLegend} />
+      <Axis id="time" title="Day of week" position={Position.Bottom} gridLine={{ visible: false }} />
+      <Axis id="y" title="Count of logins" position={Position.Left} gridLine={{ visible: false }} />
 
       <GroupBy
         id="h_split"
@@ -96,7 +95,7 @@ export const Example = () => {
         }}
         sort="alphaAsc"
       />
-      {!disableSmallMultiples && <SmallMultiples splitVertically="h_split" />}
+      <SmallMultiples splitVertically="h_split" />
       <LineAnnotation
         dataValues={[
           {
@@ -118,19 +117,19 @@ export const Example = () => {
       />
       <BarSeries
         id="website a"
-        xScaleType={ScaleType.Time}
+        xScaleType={ScaleType.Ordinal}
         yScaleType={ScaleType.Linear}
         timeZone="local"
         xAccessor="x"
         yAccessors={['y']}
         stackAccessors={['x']}
-        splitSeriesAccessors={disableSmallMultiples ? ['site', 'g'] : ['g']}
+        splitSeriesAccessors={['g']}
         data={[...data1, ...data2]}
         color={[LIGHT_THEME.colors.vizColors[0], 'lightgray']}
       />
       <LineSeries
         id="avg"
-        xScaleType={ScaleType.Time}
+        xScaleType={ScaleType.Ordinal}
         yScaleType={ScaleType.Linear}
         timeZone="local"
         xAccessor="x"