feat(legend): add point shape styles to legend item

packages/charts/src/chart_types/heatmap/state/selectors/compute_legend.ts

@@ -20,6 +20,7 @@
 import { LegendItem } from '../../../../common/legend';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
 import { getDeselectedSeriesSelector } from '../../../../state/selectors/get_deselected_data_series';
+import { PointShape } from '../../../../utils/themes/theme';
 import { getColorScale } from './get_color_scale';
 import { getSpecOrNull } from './heatmap_spec';
 
@@ -48,6 +49,7 @@ export const computeLegendSelector = createCustomCachedSelector(
         isToggleable: true,
         path: [{ index: 0, value: seriesIdentifier.key }],
         keys: [],
+        shape: PointShape.Circle,
       };
     });
   },

packages/charts/src/chart_types/xy_chart/legend/legend.ts

@@ -19,11 +19,13 @@
 
 import { LegendItem } from '../../../common/legend';
 import { SeriesKey, SeriesIdentifier } from '../../../common/series_id';
+import { IconType } from '../../../components/icons/icon';
 import { ScaleType } from '../../../scales/constants';
 import { SortSeriesByConfig, TickFormatterOptions } from '../../../specs';
 import { Color } from '../../../utils/common';
 import { BandedAccessorType } from '../../../utils/geometry';
 import { getLegendCompareFn, SeriesCompareFn } from '../../../utils/series_sort';
+import { PointShape, Theme } from '../../../utils/themes/theme';
 import { getXScaleTypeFromSpec } from '../scales/get_api_scales';
 import { getAxesSpecForSpecId, getSpecsById } from '../state/utils/spec';
 import { LastValues } from '../state/utils/types';
@@ -39,7 +41,15 @@ import {
   isDataSeriesBanded,
   getSeriesIdentifierFromDataSeries,
 } from '../utils/series';
-import { AxisSpec, BasicSeriesSpec, Postfixes, isAreaSeriesSpec, isBarSeriesSpec } from '../utils/specs';
+import {
+  AxisSpec,
+  BasicSeriesSpec,
+  Postfixes,
+  isAreaSeriesSpec,
+  isBarSeriesSpec,
+  isBubbleSeriesSpec,
+  isLineSeriesSpec,
+} from '../utils/specs';
 
 /** @internal */
 export interface FormattedLastValues {
@@ -101,6 +111,7 @@ export function computeLegend(
   showLegendExtra: boolean,
   serialIdentifierDataSeriesMap: Record<string, DataSeries>,
   deselectedDataSeries: SeriesIdentifier[] = [],
+  theme: Theme,
   sortSeriesBy?: SeriesCompareFn | SortSeriesByConfig,
 ): LegendItem[] {
   const legendItems: LegendItem[] = [];
@@ -139,6 +150,15 @@ export function computeLegend(
     const lastValue = lastValues.get(key);
     const seriesIdentifier = getSeriesIdentifierFromDataSeries(series);
     const xScaleType = getXScaleTypeFromSpec(spec.xScaleType);
+
+    let shape = PointShape.Circle as IconType;
+    if (isBubbleSeriesSpec(spec)) {
+      shape = spec.bubbleSeriesStyle?.point?.shape ?? theme.bubbleSeriesStyle.point.shape;
+    } else if (isLineSeriesSpec(spec)) {
+      shape = spec.lineSeriesStyle?.point?.shape ?? theme.lineSeriesStyle.point.shape;
+    } else if (isAreaSeriesSpec(spec)) {
+      shape = spec.areaSeriesStyle?.point?.shape ?? theme.areaSeriesStyle.point.shape;
+    }
     legendItems.push({
       color,
       label: labelY1,
@@ -150,6 +170,7 @@ export function computeLegend(
       defaultExtra: getLegendExtra(showLegendExtra, xScaleType, formatter, 'y1', lastValue),
       path: [{ index: 0, value: seriesIdentifier.key }],
       keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()],
+      shape,
     });
     if (banded) {
       const labelY0 = getBandedLegendItemLabel(name, BandedAccessorType.Y0, postFixes);
@@ -164,6 +185,7 @@ export function computeLegend(
         defaultExtra: getLegendExtra(showLegendExtra, xScaleType, formatter, 'y0', lastValue),
         path: [{ index: 0, value: seriesIdentifier.key }],
         keys: [specId, spec.groupId, yAccessor, ...series.splitAccessors.values()],
+        shape,
       });
     }
   });

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

@@ -63,6 +63,7 @@ export const computeLegendSelector = createCustomCachedSelector(
       settings.showLegendExtra,
       siDataSeriesMap,
       deselectedDataSeries,
+      chartTheme,
       // @ts-ignore
       settings.sortSeriesBy,
     );

packages/charts/src/common/legend.ts

@@ -18,6 +18,7 @@
  */
 
 import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup';
+import { IconType } from '../components/icons/icon';
 import { LegendPath } from '../state/actions/legend';
 import { Color } from '../utils/common';
 import { CategoryKey, CategoryLabel } from './category';
@@ -47,6 +48,7 @@ export type LegendItem = {
   // TODO: Remove when partition layers are toggleable
   isToggleable?: boolean;
   keys: Array<string | number>;
+  shape?: IconType;
 };
 
 /** @internal */

packages/charts/src/components/__snapshots__/chart.test.tsx.snap

@@ -27,9 +27,9 @@ exports[`Chart should render the legend name test 1`] = `
                 <LegendItem item={{...}} positionConfig={{...}} totalItems={1} extraValues={{...}} showExtra={false} onMouseOut={[undefined]} onMouseOver={[undefined]} onClick={[undefined]} clearTemporaryColorsAction={[Function (anonymous)]} setPersistedColorAction={[Function (anonymous)]} setTemporaryColorAction={[Function (anonymous)]} mouseOutAction={[Function (anonymous)]} mouseOverAction={[Function (anonymous)]} toggleDeselectSeriesAction={[Function (anonymous)]} colorPicker={[undefined]} action={[undefined]}>
                   <li className=\\"echLegendItem echLegendItem--vertical\\" onMouseEnter={[Function (anonymous)]} onMouseLeave={[Function (anonymous)]} style={[undefined]} data-ech-series-name=\\"test\\">
                     <div className=\\"background\\" />
-                    <ForwardRef color=\\"#1EA593\\" seriesName=\\"test\\" isSeriesHidden={false} hasColorPicker={false} onClick={[undefined]}>
+                    <ForwardRef color=\\"#1EA593\\" seriesName=\\"test\\" isSeriesHidden={false} hasColorPicker={false} onClick={[undefined]} shape=\\"circle\\">
                       <div className=\\"echLegendItem__color\\" title=\\"series color\\">
-                        <Icon type=\\"dot\\" color=\\"#1EA593\\" aria-label=\\"series color: #1EA593\\">
+                        <Icon type=\\"circle\\" color=\\"#1EA593\\" aria-label=\\"series color: #1EA593\\">
                           <DotIcon className=\\"echIcon\\" color=\\"#1EA593\\" tabIndex={[undefined]} focusable=\\"false\\" aria-label=\\"series color: #1EA593\\">
                             <svg width={16} height={16} viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" className=\\"echIcon\\" color=\\"#1EA593\\" tabIndex={[undefined]} focusable=\\"false\\" aria-label=\\"series color: #1EA593\\">
                               <circle cx={8} cy={8} r={4} />

packages/charts/src/components/icons/assets/diamond.tsx

@@ -0,0 +1,31 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { IconComponentProps } from '../icon';
+
+/** @internal */
+export function DiamondIcon(extraProps: IconComponentProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" {...extraProps}>
+      <path d="M 8 13 L 13 7 L 13 7 L 8 1 L 3 7 Z M 8 -1 L 15 7 L 8 15 L 1 7 L 8 -1 Z" />
+    </svg>
+  );
+}

packages/charts/src/components/icons/assets/plus.tsx

@@ -0,0 +1,31 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { IconComponentProps } from '../icon';
+
+/** @internal */
+export function PlusIcon(extraProps: IconComponentProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" {...extraProps}>
+      <path d="M8.25,3 C8.52614237,3 8.75,3.22385763 8.75,3.5 L8.75,7.25 L12.5,7.25 C12.7761424,7.25 13,7.47385763 13,7.75 L13,8.25 C13,8.52614237 12.7761424,8.75 12.5,8.75 L8.75,8.75 L8.75,12.5 C8.75,12.7761424 8.52614237,13 8.25,13 L7.75,13 C7.47385763,13 7.25,12.7761424 7.25,12.5 L7.25,8.75 L3.5,8.75 C3.22385763,8.75 3,8.52614237 3,8.25 L3,7.75 C3,7.47385763 3.22385763,7.25 3.5,7.25 L7.25,7.25 L7.25,3.5 C7.25,3.22385763 7.47385763,3 7.75,3 L8.25,3 Z" />
+    </svg>
+  );
+}

packages/charts/src/components/icons/assets/square.tsx

@@ -0,0 +1,31 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { IconComponentProps } from '../icon';
+
+/** @internal */
+export function SquareIcon(extraProps: IconComponentProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" {...extraProps}>
+      <rect width="12" height="12" x="2" y="2" rx="2" fillRule="evenodd" />
+    </svg>
+  );
+}

packages/charts/src/components/icons/assets/triangle.tsx

@@ -0,0 +1,35 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { IconComponentProps } from '../icon';
+
+/** @internal */
+export function TriangleIcon(extraProps: IconComponentProps) {
+  // https://codepen.io/knod/pen/YqLgwR
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" {...extraProps}>
+      <path
+        fillRule="evenodd"
+        d="M 2 14 A 1 1 0 0 1 1.122 12.521 L 7.122 1.521 A 1 1 0 0 1 8.878 1.521 L 14.878 12.521 A 1 1 0 0 1 14 14 H 2 Z M 2 13 H 14 L 8 2 L 2 13 Z"
+      />
+    </svg>
+  );
+}

packages/charts/src/components/icons/assets/x.tsx

@@ -0,0 +1,31 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+
+import { IconComponentProps } from '../icon';
+
+/** @internal */
+export function XIcon(extraProps: IconComponentProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" {...extraProps}>
+      <path d="M7.29289322,8 L3.14644661,3.85355339 C2.95118446,3.65829124 2.95118446,3.34170876 3.14644661,3.14644661 C3.34170876,2.95118446 3.65829124,2.95118446 3.85355339,3.14644661 L8,7.29289322 L12.1464466,3.14644661 C12.3417088,2.95118446 12.6582912,2.95118446 12.8535534,3.14644661 C13.0488155,3.34170876 13.0488155,3.65829124 12.8535534,3.85355339 L8.70710678,8 L12.8535534,12.1464466 C13.0488155,12.3417088 13.0488155,12.6582912 12.8535534,12.8535534 C12.6582912,13.0488155 12.3417088,13.0488155 12.1464466,12.8535534 L8,8.70710678 L3.85355339,12.8535534 C3.65829124,13.0488155 3.34170876,13.0488155 3.14644661,12.8535534 C2.95118446,12.6582912 2.95118446,12.3417088 3.14644661,12.1464466 L7.29289322,8 Z" />
+    </svg>
+  );
+}

packages/charts/src/components/icons/icon.tsx

@@ -22,12 +22,17 @@ import React, { SVGAttributes, memo } from 'react';
 
 import { deepEqual } from '../../utils/fast_deep_equal';
 import { AlertIcon } from './assets/alert';
+import { DiamondIcon } from './assets/diamond';
 import { DotIcon } from './assets/dot';
 import { EmptyIcon } from './assets/empty';
 import { EyeIcon } from './assets/eye';
 import { EyeClosedIcon } from './assets/eye_closed';
 import { ListIcon } from './assets/list';
+import { PlusIcon } from './assets/plus';
 import { QuestionInCircle } from './assets/question_in_circle';
+import { SquareIcon } from './assets/square';
+import { TriangleIcon } from './assets/triangle';
+import { XIcon } from './assets/x';
 
 const typeToIconMap = {
   alert: AlertIcon,
@@ -37,13 +42,19 @@ const typeToIconMap = {
   eyeClosed: EyeClosedIcon,
   list: ListIcon,
   questionInCircle: QuestionInCircle,
+  circle: DotIcon,
+  x: XIcon,
+  plus: PlusIcon,
+  diamond: DiamondIcon,
+  square: SquareIcon,
+  triangle: TriangleIcon,
 };
 
 /** @internal */
 export type IconColor = string;
 
 /** @internal */
-export type IconType = keyof typeof typeToIconMap;
+export type IconType = keyof typeof typeToIconMap | undefined;
 
 interface IconProps {
   className?: string;
@@ -64,7 +75,6 @@ function IconComponent({ type, color, className, tabIndex, ...rest }: IconCompon
   }
 
   const classes = classNames('echIcon', className);
-
   const Svg = (type && typeToIconMap[type]) || EmptyIcon;
 
   /*