feat(legend): add legend item actions

.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,
           {

integration/tests/legend_stories.test.ts

@@ -54,4 +54,15 @@ 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,
+      },
+    );
+  });
 });

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;\\" class=\\"echLegendListContainer\\"><ul style=\\"padding-top: 10px; padding-bottom: 10px;\\" class=\\"echLegendList\\"><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><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></div><div class=\\"echLegendItem__action\\"></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>"`;

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\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" 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=\\"splita\\">splita</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" 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=\\"splitb\\">splitb</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" 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=\\"splitc\\">splitc</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" 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=\\"splitd\\">splitd</div></li>"`;
+exports[`Legend #legendColorPicker should match snapshot after onChange is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" 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=\\"splita\\">splita</div></div><div class=\\"echLegendItem__action\\"></div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" 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=\\"splitb\\">splitb</div></div><div class=\\"echLegendItem__action\\"></div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" 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=\\"splitc\\">splitc</div></div><div class=\\"echLegendItem__action\\"></div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"#0c7b93\\" 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=\\"splitd\\">splitd</div></div><div class=\\"echLegendItem__action\\"></div></li>"`;
 
-exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splita\\">splita</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitb\\">splitb</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitc\\">splitc</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitd\\">splitd</div></li>"`;
+exports[`Legend #legendColorPicker should match snapshot after onClose is called 1`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splita\\">splita</div></div><div class=\\"echLegendItem__action\\"></div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitb\\">splitb</div></div><div class=\\"echLegendItem__action\\"></div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitc\\">splitc</div></div><div class=\\"echLegendItem__action\\"></div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitd\\">splitd</div></div><div class=\\"echLegendItem__action\\"></div></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\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splita\\">splita</div></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\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitb\\">splitb</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitc\\">splitc</div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitd\\">splitd</div></li>"`;
+exports[`Legend #legendColorPicker should render colorPicker when color is clicked 2`] = `"<li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splita\\">splita</div></div><div class=\\"echLegendItem__action\\"></div></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\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitb\\">splitb</div></div><div class=\\"echLegendItem__action\\"></div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitc\\">splitc</div></div><div class=\\"echLegendItem__action\\"></div></li><li class=\\"echLegendItem echLegendItem--right\\"><div class=\\"echLegendItem__main\\"><div class=\\"echLegendItem__color echLegendItem__color--changable\\" aria-label=\\"series color\\" title=\\"series color\\"><svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" class=\\"echIcon\\" color=\\"red\\" 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=\\"splitd\\">splitd</div></div><div class=\\"echLegendItem__action\\"></div></li>"`;