From 0b3e00f9ffe8c90614a2b28cc76b32bf2cef38fb Mon Sep 17 00:00:00 2001
From: Rachel Shen <rachelwshen@gmail.com>
Date: Tue, 12 Jan 2021 12:30:53 -0700
Subject: [PATCH] fix: create unique ids for dot icons (#971)

---
 .../src/components/__snapshots__/chart.test.tsx.snap        | 2 +-
 packages/osd-charts/src/components/icons/assets/dot.tsx     | 5 +++--
 .../components/legend/__snapshots__/legend.test.tsx.snap    | 6 +++---
 3 files changed, 7 insertions(+), 6 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 75b1cc181a2f..fce65eefa4bd 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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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 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>"`;
diff --git a/packages/osd-charts/src/components/icons/assets/dot.tsx b/packages/osd-charts/src/components/icons/assets/dot.tsx
index d9e99d030532..3c4321869e01 100644
--- a/packages/osd-charts/src/components/icons/assets/dot.tsx
+++ b/packages/osd-charts/src/components/icons/assets/dot.tsx
@@ -29,13 +29,14 @@ 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-a" cx="8" cy="8" r="4" />
+          <circle id={`dot-${color}`} cx="8" cy="8" r="4" />
         </defs>
         <g>
-          <use xlinkHref="#dot-a" />
+          <use xlinkHref={`#dot-${color}`} />
         </g>
       </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 1eef6397b678..a64f4750d2c7 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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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 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 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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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 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 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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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-a\\" cx=\\"8\\" cy=\\"8\\" r=\\"4\\"></circle></defs><g><use xlink:href=\\"#dot-a\\"></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 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>"`;