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

packages/charts/api/charts.api.md

@@ -1167,6 +1167,7 @@ export type LegendPositionConfig = {
 
 // @public
 export interface LegendSpec {
+    alignLegendPointStyles?: boolean;
     flatLegend?: boolean;
     legendAction?: LegendAction;
     // (undocumented)

packages/charts/src/chart_types/xy_chart/renderer/shapes_paths.ts

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { getRadians } from '../../../utils/common';
 import { PointShape, TextureShape } from '../../../utils/themes/theme';
 
 /** @internal */
@@ -14,30 +15,32 @@ export type SVGPath = string;
 /** @internal */
 export type SVGPathFn = (radius: number) => SVGPath;
 
-/** @internal */
-export const cross: SVGPathFn = (r: number) => {
+const cross: SVGPathFn = (r: number) => {
   return `M ${-r} 0 L ${r} 0 M 0 ${r} L 0 ${-r}`;
 };
 
-/** @internal */
-export const triangle: SVGPathFn = (r: number) => {
+const triangle: SVGPathFn = (r: number) => {
   const h = (r * Math.sqrt(3)) / 2;
   const hr = r / 2;
   return `M ${-h} ${hr} L ${h} ${hr} L 0 ${-r} Z`;
 };
 
-/** @internal */
-export const square: SVGPathFn = (r: number) => {
-  return `M ${-r} ${-r} L ${-r} ${r} L ${r} ${r} L ${r} ${-r} Z`;
+/**
+ * Returns shape function based on rotation of square in degrees
+ */
+const square = (rotation = 0): SVGPathFn => (r: number) => {
+  const d = getRadians(rotation);
+  const s = Math.abs(Math.cos(d) + Math.sin(d));
+  // scaled r to account for rotation;
+  const sr = s > 0 ? r / s : r;
+  return `M ${-sr} ${-sr} L ${-sr} ${sr} L ${sr} ${sr} L ${sr} ${-sr} Z`;
 };
 
-/** @internal */
-export const circle: SVGPathFn = (r: number) => {
+const circle: SVGPathFn = (r: number) => {
   return `M ${-r} 0 a ${r},${r} 0 1,0 ${r * 2},0 a ${r},${r} 0 1,0 ${-r * 2},0`;
 };
 
-/** @internal */
-export const line: SVGPathFn = (r: number) => {
+const line: SVGPathFn = (r: number) => {
   return `M 0 ${-r} l 0 ${r * 2}`;
 };
 
@@ -46,8 +49,8 @@ export const ShapeRendererFn: Record<PointShape, [SVGPathFn, number]> = {
   [PointShape.Circle]: [circle, 0],
   [PointShape.X]: [cross, 45],
   [PointShape.Plus]: [cross, 0],
-  [PointShape.Diamond]: [square, 45],
-  [PointShape.Square]: [square, 0],
+  [PointShape.Diamond]: [square(45), 45],
+  [PointShape.Square]: [square(0), 0],
   [PointShape.Triangle]: [triangle, 0],
 };
 

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

@@ -20,19 +20,19 @@ exports[`Chart should render the legend name test 1`] = `
         </Resizer>
       </Connect(Resizer)>
       <Connect(LegendComponent)>
-        <LegendComponent debug={true} chartDimensions={{...}} containerDimensions={{...}} chartTheme={{...}} size={{...}} items={{...}} extraValues={{...}} config={{...}} onToggleDeselectSeriesAction={[Function (anonymous)]} onItemOutAction={[Function (anonymous)]} onItemOverAction={[Function (anonymous)]} clearTemporaryColors={[Function (anonymous)]} setTemporaryColor={[Function (anonymous)]} setPersistedColor={[Function (anonymous)]}>
+        <LegendComponent debug={true} alignLegendPointStyles={[undefined]} chartDimensions={{...}} containerDimensions={{...}} chartTheme={{...}} size={{...}} items={{...}} extraValues={{...}} config={{...}} onToggleDeselectSeriesAction={[Function (anonymous)]} onItemOutAction={[Function (anonymous)]} onItemOverAction={[Function (anonymous)]} clearTemporaryColors={[Function (anonymous)]} setTemporaryColor={[Function (anonymous)]} setPersistedColor={[Function (anonymous)]}>
           <div className=\\"echLegend echLegend--debug echLegend--vertical echLegend--right echLegend--top\\" style={{...}}>
             <div style={{...}} className=\\"echLegendListContainer\\">
               <ul style={{...}} className=\\"echLegendList\\">
-                <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]}>
+                <LegendItem item={{...}} positionConfig={{...}} alignLegendPointStyles={[undefined]} 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]} pointStyle={[undefined]}>
                       <div className=\\"echLegendItem__color\\" title=\\"series color\\">
                         <LegendIcon pointStyle={[undefined]} color=\\"#1EA593\\">
                           <svg width={16} height={16} aria-label=\\"series color: #1EA593\\">
-                            <g transform=\\"\\\\n            translate(8, 8)\\\\n            rotate(0)\\">
-                              <path d=\\"M -3.5 0 a 3.5,3.5 0 1,0 7,0 a 3.5,3.5 0 1,0 -7,0\\" stroke=\\"#1EA593\\" strokeWidth={1} fill=\\"#1EA593\\" opacity={1} />
+                            <g transform=\\"\\\\n          translate(8, 8)\\\\n          rotate(0)\\\\n        \\">
+                              <path d=\\"M -4 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0\\" stroke={[undefined]} strokeWidth={[undefined]} fill=\\"#1EA593\\" opacity={[undefined]} />
                             </g>
                           </svg>
                         </LegendIcon>