feat(legend): add keyboard navigation

.playground/playground.tsx

@@ -17,91 +17,149 @@
  * under the License.
  */
 
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
 import React from 'react';
 
-import {
-  AnnotationDomainTypes,
-  Axis,
-  BarSeries,
-  Chart,
-  LineAnnotation,
-  LineAnnotationDatum,
-  ScaleType,
-  Settings,
-} from '../src';
-import { Icon } from '../src/components/icons/icon';
-import { Position } from '../src/utils/commons';
-import { arrayKnobs } from '../stories/utils/knobs';
-
-function generateAnnotationData(values: any[]): LineAnnotationDatum[] {
-  return values.map((value, index) => ({ dataValue: value, details: `detail-${index}` }));
+interface Food {
+  label: string;
+  count: number;
+  actionLabel: string;
 }
-const data = arrayKnobs('data values', [2.5, 7.2]);
-const dataValues = generateAnnotationData(data);
+
+type Foods = Array<Food>;
+
+type FoodArray = Array<string>;
 
 export class Playground extends React.Component {
+  foods: Foods = [
+    { label: 'pie', count: 2, actionLabel: 'tab' },
+    { label: 'asparagus', count: 5, actionLabel: 'tab' },
+    { label: 'brownies', count: 0, actionLabel: 'enter' },
+    { label: 'popsicles', count: 3, actionLabel: 'enter' },
+  ];
+
+  foodsAsAnArray: FoodArray = ['tab', 'tab', 'tab', 'enter'];
+
+  getFoodsArrayAction = (foodsArray: FoodArray) => {
+    for (let i = 0; i < foodsArray.length; i++) {
+      if (foodsArray[i] === 'tab') {
+        // alert('tab!');
+      } else if (foodsArray[i] === 'enter') {
+        // alert('enter!');
+      }
+    }
+  };
+
+  getFoodAction = (foodLabel: Food[keyof Food]) => {
+    // eslint-disable-next-line array-callback-return
+    return this.foods.map(({ label, count, actionLabel }) => {
+      if (foodLabel === label && actionLabel === 'tab') {
+        let c = 0;
+        while (c < count) {
+          // alert(`${label} Tab!`);
+          c++;
+        }
+      } else if (foodLabel === label && actionLabel === 'enter') {
+        let c = 0;
+        while (c < count) {
+          // alert(`${label} Enter!`);
+          c++;
+        }
+      }
+    });
+  };
+
+  makingFood = (ms: number, food: string) => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        // console.log(`resolving the promise ${food}`, new Date());
+        resolve(`done with ${food}`);
+      }, ms);
+      // console.log(`starting the promise ${food}`, new Date());
+    });
+  };
+
+  getNumberOfFood = (food: any) => {
+    return this.makingFood(1000, food).then(() => this.getFoodAction(food));
+  };
+
+  getNumberOfFoodArray = () => {
+    return this.makingFood(1000, 'apple').then(() => this.getFoodsArrayAction(this.foodsAsAnArray));
+  };
+
+  getAsyncNumberOfFoodArray = async () => {
+    // const result = await this.makingFood(2000).then(() => this.getFoodsArrayAction(this.foodsAsAnArray));
+    // alert(result);
+  };
+
+  // forLoop = async () => {
+  // alert('start');
+  // for (let index = 0; index < this.foods.length; index++) {
+  //   const foodLabel = this.foods[index].label;
+  //   const numFood = await this.getFoodNumber(foodLabel);
+  //   alert(numFood);
+  // }
+  // const foodsPromiseArray = this.foods.map(async (foodObject) => {
+  //   for (let i = 0; i < foodObject.length; i++) {
+  //     const numFoodAction = foodObject[i].actionLabel;
+  //     if (numFoodAction === 'enter') {
+  //       alert ('Enter!');
+  //     } else if (numFoodAction === 'tab') {
+  //       alert('tab!');
+  //     }
+  //   }
+  // });
+  // const numberOfFoods = await Promise.all(foodsPromiseArray);
+  // alert(numberOfFoods);
+  // alert('End');
+  // };
+
+  // getFoodArray =
+  // async() => {
+  // console.log(await this.makingFood(1000, 'apricot'));
+  // console.log(await this.makingFood(50, 'apple'));
+  // const foodTimeArray = [
+  //   { ms: 1000, food: 'a', count: 2 },
+  //   { ms: 50, food: 'b', count: 1 },
+  //   { ms: 500, food: 'c', count: 3 },
+  // ];
+
+  // for (let i = 0; i < foodTimeArray.length; i++) {
+  //   void this.makingFood(foodTimeArray[i].ms, foodTimeArray[i].food);
+  // }
+
+  // const foodMap = foodTimeArray.map(({ ms, food }) => {
+  //   return this.makingFood(ms, food);
+  // });
+
+  // console.log('before the promise');
+  // for (const i of foodTimeArray) {
+  //   const j = 0;
+  //   while (j < i.count) {
+  //     await this.makingFood(i.ms, i.food);
+  //     j++;
+  //   }
+  // }
+
+  // await Promise.all();
+  // console.log('after the promise');
+  // };
+
   render() {
-    return (
-      <div className="chart">
-        <Chart className="story-chart">
-          <Settings showLegend showLegendExtra />
-          <LineAnnotation
-            id="annotation_1"
-            domainType={AnnotationDomainTypes.XDomain}
-            dataValues={dataValues}
-            marker={<Icon type="alert" />}
-          />
-          <LineAnnotation id="1" domainType={AnnotationDomainTypes.YDomain} dataValues={dataValues} />
-          <Axis id="horizontal" position={Position.Bottom} title="x-domain axis" />
-          <Axis id="left" title="y-domain axis left" position={Position.Left} />
-          <Axis id="right" title="y-domain axis right" position={Position.Right} />
-          <BarSeries
-            id="bars"
-            groupId="group1"
-            xScaleType={ScaleType.Linear}
-            yScaleType={ScaleType.Linear}
-            xAccessor="x"
-            yAccessors={['y']}
-            data={[
-              { x: 0, y: 0 },
-              { x: 1, y: 5 },
-              { x: 3, y: 20 },
-            ]}
-          />
-          <BarSeries
-            id="bars1"
-            groupId="group2"
-            xScaleType={ScaleType.Linear}
-            yScaleType={ScaleType.Linear}
-            xAccessor="x"
-            yAccessors={['y']}
-            data={[
-              { x: 0, y: 100 },
-              { x: 1, y: 50 },
-              { x: 3, y: 200 },
-            ]}
-          />
-        </Chart>
-      </div>
-    );
+    // console.log(this.makingFood(1000, 'apricot'));
+    // console.log(this.makingFood(50, 'apple'));
+    // void this.getFoodArray();
+
+    return null;
+    // <>
+    //   <div className="page" style={{ width: 5000, height: 5000, backgroundColor: 'yellow' }}>
+    //     <div id="root" style={{ backgroundColor: 'blueviolet' }}>
+    //       {/* <div>{this.foods.map(({ label }) => this.getNumberOfFood(label))}</div> */}
+    //       {/* <div>{alert(this.makingFood(50000).then(this.getFoodsArrayAction(this.foodsAsAnArray)))}</div> */}
+    //       {/* <div>{alert(this.getNumberOfFoodArray())}</div> */}
+    //       {/* <div>{alert(this.getAsyncNumberOfFoodArray())}</div> */}
+    //       <div>{this.makingFood(50)}</div>
+    //     </div>
+    //   </div>
+    // </>
   }
 }

.storybook/style.scss

@@ -25,6 +25,18 @@ html {
   position: relative;
   box-sizing: border-box;
   background-color: blanchedalmond;
+
+  // *,
+  // *::after,
+  // *::before,
+  // .echLegendItem {
+  //   transition-delay: 0s !important;
+  //   transition-duration: 0s !important;
+  //   animation-delay: -0.0001s !important;
+  //   animation-duration: 0s !important;
+  //   animation-play-state: paused !important;
+  //   caret-color: transparent !important;
+  // }
 }
 
 #story-root + div table {

.storybook/style_test.scss

@@ -0,0 +1,76 @@
+@import '../node_modules/@elastic/eui/src/theme_light.scss';
+
+html {
+  background-color: white;
+}
+
+.story-chart {
+  box-sizing: border-box;
+  background: white;
+}
+
+.story-chart-dark {
+  box-sizing: border-box;
+  background: #1a1b20;
+}
+
+.echInvisible {
+  visibility: hidden;
+}
+
+#story-root {
+  padding: 20px;
+  width: 100%;
+  height: 400px;
+  position: relative;
+  box-sizing: border-box;
+  background-color: blanchedalmond;
+
+  *,
+  *::after,
+  *::before,
+  .echLegendItem {
+    transition-delay: 0s !important;
+    transition-duration: 0s !important;
+    animation-delay: -0.0001s !important;
+    animation-duration: 0s !important;
+    animation-play-state: paused !important;
+    caret-color: transparent !important;
+  }
+}
+
+#story-root + div table {
+  border: 1px solid gray;
+}
+
+#story-root + div table th {
+  border: 1px solid gray;
+  padding: 5px;
+}
+
+#story-root + div table td {
+  border: 1px solid gray;
+  padding: 5px;
+}
+
+.Pane.vertical.Pane1 {
+  background: red;
+}
+
+html.echVisualTesting {
+  background-color: blanchedalmond;
+
+  #root > div:not(#story-root) {
+    display: none;
+  }
+
+  #root {
+    padding-top: 200px;
+    padding-bottom: 200px;
+  }
+}
+
+// for using EuiWrappingPopover in stories
+.euiPopover__anchor {
+  width: 100%;
+}

integration/defaults.js

@@ -21,4 +21,5 @@ module.exports = {
   PORT: '9009',
   HOST: process.env.DEBUG === 'true' ? 'localhost' : 'host.docker.internal',
   LOCAL_STORYBOOK_VRT: false,
+  global_setup: '../../.storybook/style_test.scss',
 };