From ed98481bb2cd70aeb83c003d436580210129704c Mon Sep 17 00:00:00 2001
From: Rachel Shen <rachelwshen@gmail.com>
Date: Wed, 13 Jan 2021 09:45:55 -0700
Subject: [PATCH] fix(legend): remove ids for circles (#973)

---
 .../src/components/__snapshots__/chart.test.tsx.snap   |  2 +-
 .../osd-charts/src/components/icons/assets/dot.tsx     | 10 ++--------
 .../legend/__snapshots__/legend.test.tsx.snap          |  6 +++---
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap b/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
index fce65eefa4bd..2d4e865b1342 100644
--- a/packages/osd-charts/src/components/__snapshots__/chart.test.tsx.snap
+++ b/packages/osd-charts/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; margin-left: 0px; margin-right: 0px;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"test\\"><div class=\\"echLegendItem__color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\" aria-label=\\"series color: #1EA593\\"><defs><circle id=\\"dot-#1EA593\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-#1EA593\\"></use></g></svg></div><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\" aria-label=\\"test; Activate to hide series in graph\\">test</button></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\\" style=\\"z-index: 0;\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></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\\" data-ech-series-name=\\"test\\"><div class=\\"echLegendItem__color\\" title=\\"series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#1EA593\\" focusable=\\"false\\" aria-label=\\"series color: #1EA593\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></div><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"test\\" aria-label=\\"test; Activate to hide series in graph\\">test</button></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\\" style=\\"z-index: 0;\\"><defs><clipPath id=\\"echHighlighterClipPath__chart1\\"><rect x=\\"0\\" y=\\"0\\" width=\\"130\\" height=\\"180\\"></rect></clipPath></defs><g></g></svg></div></div></div>"`;
diff --git a/packages/osd-charts/src/components/icons/assets/dot.tsx b/packages/osd-charts/src/components/icons/assets/dot.tsx
index 3c4321869e01..28e78788f8c4 100644
--- a/packages/osd-charts/src/components/icons/assets/dot.tsx
+++ b/packages/osd-charts/src/components/icons/assets/dot.tsx
@@ -29,15 +29,9 @@ export class DotIcon extends React.Component<IconComponentProps> {
   }
 
   render() {
-    const { color } = this.props;
     return (
-      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" {...this.props}>
-        <defs>
-          <circle id={`dot-${color}`} cx="8" cy="8" r="4" />
-        </defs>
-        <g>
-          <use xlinkHref={`#dot-${color}`} />
-        </g>
+      <svg width={16} height={16} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" {...this.props}>
+        <circle cx={8} cy={8} r={4} />
       </svg>
     );
   }
diff --git a/packages/osd-charts/src/components/legend/__snapshots__/legend.test.tsx.snap b/packages/osd-charts/src/components/legend/__snapshots__/legend.test.tsx.snap
index a64f4750d2c7..73439392f5a1 100644
--- a/packages/osd-charts/src/components/legend/__snapshots__/legend.test.tsx.snap
+++ b/packages/osd-charts/src/components/legend/__snapshots__/legend.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><defs><circle id=\\"dot-#0c7b93\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-#0c7b93\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><defs><circle id=\\"dot-#0c7b93\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-#0c7b93\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><defs><circle id=\\"dot-#0c7b93\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-#0c7b93\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><defs><circle id=\\"dot-#0c7b93\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-#0c7b93\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
+exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"#0c7b93\\" focusable=\\"false\\" aria-label=\\"Change series color, currently #0c7b93\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
 
-exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><defs><circle id=\\"dot-red\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-red\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><defs><circle id=\\"dot-red\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-red\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><defs><circle id=\\"dot-red\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-red\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><defs><circle id=\\"dot-red\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-red\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
+exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
 
 exports[`Legend #legendColorPicker should render colorPicker when color is clicked 1`] = `"<div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\" type=\\"button\\">#0c7b93</button><button id=\\"close\\" type=\\"button\\">close</button></div>"`;
 
-exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><defs><circle id=\\"dot-red\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-red\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\" type=\\"button\\">#0c7b93</button><button id=\\"close\\" type=\\"button\\">close</button></div><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><defs><circle id=\\"dot-red\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-red\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><defs><circle id=\\"dot-red\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-red\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><defs><circle id=\\"dot-red\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-red\\"></use></g></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;
+exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"<li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splita\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splita\\" aria-label=\\"splita; Activate to hide series in graph\\">splita</button></li><div id=\\"colorPicker\\"><span>Custom Color Picker</span><button id=\\"change\\" type=\\"button\\">#0c7b93</button><button id=\\"close\\" type=\\"button\\">close</button></div><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitb\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitb\\" aria-label=\\"splitb; Activate to hide series in graph\\">splitb</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitc\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitc\\" aria-label=\\"splitc; Activate to hide series in graph\\">splitc</button></li><li class=\\"echLegendItem echLegendItem--right\\" data-ech-series-name=\\"splitd\\"><button type=\\"button\\" class=\\"echLegendItem__color echLegendItem__color--changable\\" title=\\"change series color\\"><svg width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 16 16\\" xmlns=\\"http://www.w3.org/2000/svg\\" class=\\"echIcon\\" color=\\"red\\" focusable=\\"false\\" aria-label=\\"Change series color, currently red\\"><circle cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></svg></button><button type=\\"button\\" class=\\"echLegendItem__label echLegendItem__label--clickable\\" title=\\"splitd\\" aria-label=\\"splitd; Activate to hide series in graph\\">splitd</button></li>"`;