feat(legend): add legend item actions and margins (#749)

- adds legend actions at the end of the legend items - Adds margins on inner and outer sides of legend closes #717
elastic · Jul 17, 2020 · 8136dca · 8136dca
1 parent daff503
commit 8136dca
Show file tree

Hide file tree

Showing 104 changed files with 381 additions and 34 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -356,6 +356,8 @@ module.exports = {
     {
       files: ['stories/**/*.ts?(x)', '*.test.ts?(x)'],
       rules: {
+        'jsx-a11y/no-static-element-interactions': 0,
+        'jsx-a11y/click-events-have-key-events': 0,
         'no-restricted-properties': [
           process.env.NODE_ENV === 'production' ? 2 : 1,
           {

diff --git a/.storybook/style.scss b/.storybook/style.scss
@@ -57,3 +57,8 @@ html.echVisualTesting {
     padding-bottom: 200px;
   }
 }
+
+// for using EuiWrappingPopover in stories
+.euiPopover__anchor {
+  width: 100%;
+}
diff --git a/api/charts.api.md b/api/charts.api.md
@@ -738,10 +738,18 @@ export interface LayerValue {
     value: number;
 }
 
+// @public
+export type LegendAction = ComponentType<LegendActionProps>;
+
+// @public
+export interface LegendActionProps {
+    series: SeriesIdentifier;
+}
+
 // Warning: (ae-missing-release-tag) "LegendColorPicker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export type LegendColorPicker = React.ComponentType<LegendColorPickerProps>;
+export type LegendColorPicker = ComponentType<LegendColorPickerProps>;
 
 // Warning: (ae-missing-release-tag) "LegendColorPickerProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
@@ -764,6 +772,7 @@ export type LegendItemListener = (series: SeriesIdentifier | null) => void;
 // @public (undocumented)
 export interface LegendStyle {
     horizontalHeight: number;
+    margin: number;
     spacingBuffer: number;
     verticalWidth: number;
 }
@@ -1273,6 +1282,7 @@ export interface SettingsSpec extends Spec {
     externalPointerEvents: ExternalPointerEventsSettings;
     flatLegend?: boolean;
     hideDuplicateAxes: boolean;
+    legendAction?: LegendAction;
     // (undocumented)
     legendColorPicker?: LegendColorPicker;
     legendMaxDepth?: number;

diff --git a/integration/helpers.ts b/integration/helpers.ts
@@ -22,7 +22,7 @@ import { join, resolve } from 'path';
 
 import { getStorybook, configure } from '@storybook/react';
 
-export type StoryInfo = [string, string];
+export type StoryInfo = [string, string, number];
 
 export type StoryGroupInfo = [string, string, StoryInfo[]];
 
@@ -67,18 +67,35 @@ function encodeString(string: string) {
     .toLowerCase();
 }
 
+/**
+ * Stories to skip in all vrt based on group.
+ */
+const storiesToSkip: Record<string, string[]> = {
+  // Interactions: ['Some story name'],
+};
+
+/**
+ * Delays for stories to skip in all vrt based on group.
+ */
+const storiesToDelay: Record<string, Record<string, number>> = {
+  Legend: {
+    Actions: 200, // needed for icon to load
+  },
+};
+
 export function getStorybookInfo(): StoryGroupInfo[] {
   configure(requireAllStories(__dirname, '../stories'), module);
 
   return getStorybook()
     .filter(({ kind }) => kind)
     .map(({ kind: group, stories: storiesRaw }) => {
       const stories: StoryInfo[] = storiesRaw
-        .filter(({ name }) => name)
+        .filter(({ name }) => name && !storiesToSkip[group]?.includes(name))
         .map(({ name: title }) => {
           // cleans story name to match url params
           const encodedTitle = encodeString(title);
-          return [title, encodedTitle];
+          const delay = (storiesToDelay[group] ?? {})[title];
+          return [title, encodedTitle, delay];
         });
 
       const encodedGroup = encodeString(group);

diff --git a/...al-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png b/...al-tests-for-all-stories-area-chart-band-area-visually-looks-correct-1-snap.png
diff --git a/...tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png b/...tests-for-all-stories-area-chart-stacked-band-visually-looks-correct-1-snap.png
diff --git a/...for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png b/...for-all-stories-area-chart-stacked-percentage-visually-looks-correct-1-snap.png
diff --git a/...ries-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png b/...ries-area-chart-stacked-percentage-with-zeros-visually-looks-correct-1-snap.png
diff --git a/...or-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png b/...or-all-stories-area-chart-stacked-same-naming-visually-looks-correct-1-snap.png
diff --git a/...all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png b/...all-stories-area-chart-stacked-separate-specs-visually-looks-correct-1-snap.png
diff --git a/...sual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png b/...sual-tests-for-all-stories-area-chart-stacked-visually-looks-correct-1-snap.png
diff --git a/...s-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png b/...s-for-all-stories-bar-chart-bar-chart-1-y-1-g-visually-looks-correct-1-snap.png
diff --git a/...s-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png b/...s-for-all-stories-bar-chart-bar-chart-1-y-2-g-visually-looks-correct-1-snap.png
diff --git a/...s-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png b/...s-for-all-stories-bar-chart-bar-chart-2-y-0-g-visually-looks-correct-1-snap.png
diff --git a/...s-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png b/...s-for-all-stories-bar-chart-bar-chart-2-y-1-g-visually-looks-correct-1-snap.png
diff --git a/...s-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png b/...s-for-all-stories-bar-chart-bar-chart-2-y-2-g-visually-looks-correct-1-snap.png
diff --git a/...ies-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png b/...ies-bar-chart-clustered-multiple-series-specs-visually-looks-correct-1-snap.png
diff --git a/...ries-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png b/...ries-bar-chart-clustered-with-axis-and-legend-visually-looks-correct-1-snap.png
diff --git a/...r-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png b/...r-all-stories-bar-chart-stacked-as-percentage-visually-looks-correct-1-snap.png
diff --git a/...tories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png b/...tories-bar-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png
diff --git a/...l-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png b/...l-stories-bar-chart-tooltip-series-visibility-visually-looks-correct-1-snap.png
diff --git a/...ts-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png b/...ts-for-all-stories-bar-chart-with-value-label-visually-looks-correct-1-snap.png
diff --git a/...ests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png b/...ests-for-all-stories-bubble-chart-alpha-mixed-visually-looks-correct-1-snap.png
diff --git a/...s-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png b/...s-for-all-stories-bubble-chart-alpha-multiple-visually-looks-correct-1-snap.png
diff --git a/...tions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png b/...tions-click-hovers-on-legend-items-area-chart-visually-looks-correct-1-snap.png
diff --git a/...tions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png b/...tions-click-hovers-on-legend-items-line-chart-visually-looks-correct-1-snap.png
diff --git a/...ions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png b/...ions-click-hovers-on-legend-items-mixed-chart-visually-looks-correct-1-snap.png
diff --git a/...tions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png b/...tions-clicks-hovers-on-legend-items-bar-chart-visually-looks-correct-1-snap.png
diff --git a/...actions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png b/...actions-line-area-bar-point-clicks-and-hovers-visually-looks-correct-1-snap.png
diff --git a/...ll-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png b/...ll-stories-interactions-sunburst-slice-clicks-visually-looks-correct-1-snap.png
diff --git a/...e-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png b/...e-visual-tests-for-all-stories-legend-actions-visually-looks-correct-1-snap.png
diff --git a/...ual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png b/...ual-tests-for-all-stories-legend-color-picker-visually-looks-correct-1-snap.png
diff --git a/...ries-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png b/...ries-legend-display-values-in-legend-elements-visually-looks-correct-1-snap.png
diff --git a/...ll-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png b/...ll-stories-legend-hide-legend-items-by-series-visually-looks-correct-1-snap.png
diff --git a/...line-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png b/...line-visual-tests-for-all-stories-legend-left-visually-looks-correct-1-snap.png
diff --git a/...-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png b/...-for-all-stories-legend-legend-spacing-buffer-visually-looks-correct-1-snap.png
diff --git a/...e-visual-tests-for-all-stories-legend-margins-visually-looks-correct-1-snap.png b/...e-visual-tests-for-all-stories-legend-margins-visually-looks-correct-1-snap.png
diff --git a/...-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png b/...-visual-tests-for-all-stories-legend-piechart-visually-looks-correct-1-snap.png
diff --git a/...ine-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png b/...ine-visual-tests-for-all-stories-legend-right-visually-looks-correct-1-snap.png
diff --git a/...tories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png b/...tories-line-chart-curved-with-axis-and-legend-visually-looks-correct-1-snap.png
diff --git a/...ories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png b/...ories-line-chart-multi-series-with-log-values-visually-looks-correct-1-snap.png
diff --git a/...ries-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png b/...ries-line-chart-multiple-with-axis-and-legend-visually-looks-correct-1-snap.png
diff --git a/...ories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png b/...ories-line-chart-stacked-with-axis-and-legend-visually-looks-correct-1-snap.png
diff --git a/...s-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png b/...s-for-all-stories-mixed-charts-areas-and-bars-visually-looks-correct-1-snap.png
diff --git a/...s-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png b/...s-for-all-stories-mixed-charts-bars-and-lines-visually-looks-correct-1-snap.png
diff --git a/...-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png b/...-for-all-stories-mixed-charts-lines-and-areas-visually-looks-correct-1-snap.png
diff --git a/...ll-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png b/...ll-stories-mixed-charts-test-bar-lines-linear-visually-looks-correct-1-snap.png
diff --git a/...-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png b/...-all-stories-mixed-charts-test-bar-lines-time-visually-looks-correct-1-snap.png
diff --git a/...ll-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png b/...ll-stories-stylings-area-series-color-variant-visually-looks-correct-1-snap.png
diff --git a/...all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png b/...all-stories-stylings-bar-series-color-variant-visually-looks-correct-1-snap.png
diff --git a/...gs-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png b/...gs-custom-series-colors-via-accessor-function-visually-looks-correct-1-snap.png
diff --git a/...tylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png b/...tylings-custom-series-colors-via-colors-array-visually-looks-correct-1-snap.png
diff --git a/...ll-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png b/...ll-stories-stylings-custom-series-name-config-visually-looks-correct-1-snap.png
diff --git a/...tories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png b/...tories-stylings-custom-series-name-formatting-visually-looks-correct-1-snap.png
diff --git a/...s-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png b/...s-for-all-stories-stylings-custom-series-name-visually-looks-correct-1-snap.png
diff --git a/...ll-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png b/...ll-stories-stylings-custom-series-styles-area-visually-looks-correct-1-snap.png
diff --git a/...ll-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png b/...ll-stories-stylings-custom-series-styles-bars-visually-looks-correct-1-snap.png
diff --git a/...l-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png b/...l-stories-stylings-custom-series-styles-lines-visually-looks-correct-1-snap.png
diff --git a/...ual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png b/...ual-tests-for-all-stories-stylings-dark-theme-visually-looks-correct-1-snap.png
diff --git a/...ll-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png b/...ll-stories-stylings-line-series-color-variant-visually-looks-correct-1-snap.png
diff --git a/...ories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png b/...ories-stylings-multiple-custom-partial-themes-visually-looks-correct-1-snap.png
diff --git a/...for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png b/...for-all-stories-stylings-partial-custom-theme-visually-looks-correct-1-snap.png
diff --git a/...stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png b/...stylings-partial-custom-theme-with-base-theme-visually-looks-correct-1-snap.png
diff --git a/...-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png b/...-tests-for-all-stories-stylings-theme-styling-visually-looks-correct-1-snap.png
diff --git a/...ests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png b/...ests-for-all-stories-sunburst-single-sunburst-visually-looks-correct-1-snap.png
diff --git a/...l-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png b/...l-stories-sunburst-sunburst-with-three-layers-visually-looks-correct-1-snap.png
diff --git a/...all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png b/...all-stories-sunburst-sunburst-with-two-layers-visually-looks-correct-1-snap.png
diff --git a/...-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png b/...-tests-for-all-stories-treemap-mid-two-layers-visually-looks-correct-1-snap.png
diff --git a/...ual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png b/...ual-tests-for-all-stories-treemap-three-layer-visually-looks-correct-1-snap.png
diff --git a/...or-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png b/...or-all-stories-treemap-two-layers-stress-test-visually-looks-correct-1-snap.png
diff --git a/...st-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png b/...st-ts-area-series-stories-accessor-formats-should-show-custom-format-1-snap.png
diff --git a/...le-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png b/...le-to-extents-domain-fit-is-false-should-show-correct-extents-banded-1-snap.png
diff --git a/...e-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png b/...e-to-extents-domain-fit-is-false-should-show-correct-extents-stacked-1-snap.png
diff --git a/...ale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png b/...ale-to-extents-domain-fit-is-true-should-show-correct-extents-banded-1-snap.png
diff --git a/...le-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png b/...le-to-extents-domain-fit-is-true-should-show-correct-extents-stacked-1-snap.png
diff --git a/..._/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png b/..._/area-stories-test-ts-area-series-stories-stacked-as-not-percentage-1-snap.png
diff --git a/...ons-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png b/...ons-tooltips-should-render-corrent-tooltip-for-split-and-y-accessors-1-snap.png
diff --git a/...ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png b/...ts-interactions-tooltips-should-render-corrent-tooltip-in-dark-theme-1-snap.png
diff --git a/...eractions-test-ts-interactions-tooltips-should-render-custom-tooltip-1-snap.png b/...eractions-test-ts-interactions-tooltips-should-render-custom-tooltip-1-snap.png
diff --git a/...ctions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png b/...ctions-test-ts-interactions-tooltips-should-show-tooltip-on-sunburst-1-snap.png
diff --git a/...shots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png b/...shots__/legend-stories-test-ts-legend-stories-should-0-legend-buffer-1-snap.png
diff --git a/...ies-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png b/...ies-test-ts-legend-stories-should-render-color-picker-on-mouse-click-1-snap.png
diff --git a/...es-test-ts-legend-stories-should-render-legend-action-on-mouse-hover-1-snap.png b/...es-test-ts-legend-stories-should-render-legend-action-on-mouse-hover-1-snap.png
diff --git a/integration/tests/all.test.ts b/integration/tests/all.test.ts
@@ -29,10 +29,10 @@ const storyGroups = getStorybookInfo();
 
 describe('Baseline Visual tests for all stories', () => {
   describe.each(storyGroups)('%s', (_group, encodedGroup, stories) => {
-    describe.each(stories)('%s', (_title, encodedTitle) => {
+    describe.each(stories)('%s', (_title, encodedTitle, delay) => {
       it('visually looks correct', async() => {
         const url = `http://localhost:9001?id=${encodedGroup}--${encodedTitle}`;
-        await common.expectChartAtUrlToMatchScreenshot(url);
+        await common.expectChartAtUrlToMatchScreenshot(url, { delay });
       });
     });
   });

diff --git a/integration/tests/legend_stories.test.ts b/integration/tests/legend_stories.test.ts
@@ -54,4 +54,16 @@ describe('Legend stories', () => {
       },
     );
   });
+
+  it('should render legend action on mouse hover', async() => {
+    const action = async() =>
+      await common.moveMouseRelativeToDOMElement({ left: 30, top: 10 }, '.echLegendItem');
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/legend--actions',
+      {
+        action,
+        delay: 200, // needed for icon to load
+      },
+    );
+  });
 });
diff --git a/src/chart_types/xy_chart/utils/dimensions.test.ts b/src/chart_types/xy_chart/utils/dimensions.test.ts
@@ -73,6 +73,7 @@ describe('Computed chart dimensions', () => {
     verticalWidth: 10,
     horizontalHeight: 10,
     spacingBuffer: 10,
+    margin: 0,
   };
   const defaultTheme = LIGHT_THEME;
   const chartTheme = {

diff --git a/src/chart_types/xy_chart/utils/dimensions.ts b/src/chart_types/xy_chart/utils/dimensions.ts
@@ -32,8 +32,6 @@ import { AxisSpec } from './specs';
  * @param chartTheme the theme style of the chart
  * @param axisDimensions the axis dimensions
  * @param axisSpecs the axis specs
- * @param showLegend is the legend shown
- * @param legendPosition the optional legend position
  * @internal
  */
 export function computeChartDimensions(

diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\">test</div></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g transform=\\"translate(10, 10) rotate(0)\\"></g></svg></div></div></div>"`;
+exports[`Chart should render the legend name test 1`] = `"<div class=\\"echChart\\" style=\\"width: 100px; height: 100px;\\"><div class=\\"echChartBackground\\" style=\\"background-color: transparent;\\"></div><div class=\\"echChartStatus\\" data-ech-render-complete=\\"true\\" data-ech-render-count=\\"1\\"></div><div class=\\"echChartResizer\\"></div><div class=\\"echLegend echLegend--right echLegend--debug\\"><div style=\\"width: 50px; max-width: 50px; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\"><defs><circle id=\\"dot-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></use></g></svg></div><div class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\">test</div></li></ul></div></div><div class=\\"echContainer\\"><div class=\\"echChartPointerContainer\\" style=\\"cursor: default;\\"><div class=\\"echCrosshair\\"><div class=\\"echCrosshair__band\\" style=\\"top: -1px; left: -1px; width: 0px; height: 0px; background: rgb(245, 245, 245);\\"></div></div><canvas class=\\"echCanvasRenderer\\" width=\\"150\\" height=\\"200\\" style=\\"width: 150px; height: 200px;\\"></canvas><svg class=\\"echHighlighter\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g transform=\\"translate(10, 10) rotate(0)\\"></g></svg></div></div></div>"`;