refactor: use redux in favour of mobx (#281)

This commit remove MobX state manager and replace it with a Redux implementation. 

BREAKING CHANGE: `SpecId`,`AxisId`, `AnnotationId` types are down-casted to a `string` type. The `getSpecId`, `getAxisId` and `getAnnotationId` methods still exist and but return just the same passed string until deprecated in a future version. The spec ids, previously `id`, `axisId`,`annotationId` etc are now aligned to use the same prop name: `id`. The chart rendering status `data-ech-render-complete` and `data-ech-render-count` is no more at the root level of the `echChart` div, but on its child element: `echChartStatus`. The `Spec` has two new private properties called `chartType` and `specType`.

.playground/index.html

@@ -19,22 +19,15 @@
         position: absolute;
         top: 0px;
         left: 0px;
+        width: 100%;
       }
       .chart {
         background: white;
         display: inline-block;
         position: relative;
-        width: 900px;
-        height: 600px;
-        margin: 10px;
-        /* overflow: hidden; */
-      }
-      button {
-        padding: 10px !important;
-        background: black !important;
-        border: 1px solid white !important;
-        color: white !important;
-        margin: 4px !important;
+        width: 1000px;
+        height: 350px;
+        margin: 0px;
       }
     </style>
   </head>

.playground/playgroud.tsx

@@ -6,10 +6,13 @@ import {
   getSpecId,
   Position,
   ScaleType,
-  HistogramBarSeries,
   Settings,
   LIGHT_THEME,
   niceTimeFormatter,
+  LineAnnotation,
+  AnnotationDomainTypes,
+  BarSeries,
+  RectAnnotation,
 } from '../src';
 import { KIBANA_METRICS } from '../src/utils/data_samples/test_dataset_kibana';
 export class Playground extends React.Component {
@@ -39,7 +42,7 @@ export class Playground extends React.Component {
     }
   };
   render() {
-    const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 100);
+    const data = KIBANA_METRICS.metrics.kibana_os_load[0].data.slice(0, 7);
 
     return (
       <>
@@ -53,8 +56,29 @@ export class Playground extends React.Component {
               tickFormat={niceTimeFormatter([data[0][0], data[data.length - 1][0]])}
             />
             <Axis id={getAxisId('count')} position={Position.Left} />
-
-            <HistogramBarSeries
+            <LineAnnotation
+              id="line annotation"
+              dataValues={[
+                {
+                  dataValue: data[5][0],
+                  details: 'hello tooltip',
+                },
+              ]}
+              domainType={AnnotationDomainTypes.XDomain}
+              marker={<div style={{ width: 10, height: 10, background: 'red' }} />}
+            />
+            <RectAnnotation
+              id="rect annotation"
+              dataValues={[
+                {
+                  coordinates: {
+                    x1: data[3][0],
+                  },
+                  details: 'hello',
+                },
+              ]}
+            />
+            <BarSeries
               id={getSpecId('series bars chart')}
               xScaleType={ScaleType.Linear}
               yScaleType={ScaleType.Linear}

.playground/webpack.config.js

@@ -13,6 +13,7 @@ module.exports = {
         exclude: /node_modules/,
         options: {
           configFile: 'tsconfig.json',
+          transpileOnly: true,
         },
       },
       {

integration/page_objects/common.ts

@@ -21,7 +21,7 @@ class CommonPage {
 
     return `${baseUrl}?${query}${query ? '&' : ''}knob-debug=false`;
   }
-  async getBoundingClientRect(selector = '.echChart[data-ech-render-complete=true]') {
+  async getBoundingClientRect(selector = '.echChart') {
     return await page.evaluate((selector) => {
       const element = document.querySelector(selector);
 
@@ -37,10 +37,7 @@ class CommonPage {
   /**
    * Capture screenshot or chart element only
    */
-  async screenshotDOMElement(
-    selector = '.echChart[data-ech-render-complete=true]',
-    opts?: ScreenshotDOMElementOptions,
-  ) {
+  async screenshotDOMElement(selector = '.echChart', opts?: ScreenshotDOMElementOptions) {
     const padding: number = opts && opts.padding ? opts.padding : 0;
     const path: string | undefined = opts && opts.path ? opts.path : undefined;
     const rect = await this.getBoundingClientRect(selector);
@@ -56,10 +53,7 @@ class CommonPage {
     });
   }
 
-  async moveMouseRelativeToDOMElement(
-    mousePosition: { x: number; y: number },
-    selector = '.echChart[data-ech-render-complete=true]',
-  ) {
+  async moveMouseRelativeToDOMElement(mousePosition: { x: number; y: number }, selector = '.echChart') {
     const chartContainer = await this.getBoundingClientRect(selector);
     await page.mouse.move(chartContainer.left + mousePosition.x, chartContainer.top + mousePosition.y);
   }
@@ -113,9 +107,14 @@ class CommonPage {
   async loadChartFromURL(url: string) {
     const cleanUrl = CommonPage.parseUrl(url);
     await page.goto(cleanUrl);
+    this.waitForElement();
   }
-
-  async waitForElement(selector = '.echChart[data-ech-render-complete=true]', timeout = 10000) {
+  /**
+   * Wait for an element to be on the DOM
+   * @param {string} [selector] the DOM selector to wait for, default to '.echChartStatus[data-ech-render-complete=true]'
+   * @param {number} [timeout] - the timeout for the operation, default to 10000ms
+   */
+  async waitForElement(selector = '.echChartStatus[data-ech-render-complete=true]', timeout = 10000) {
     await page.waitForSelector(selector, { timeout });
   }
 }

package.json

@@ -83,10 +83,11 @@
     "@types/puppeteer": "^1.19.1",
     "@types/react": "^16.8.5",
     "@types/react-dom": "^16.8.2",
+    "@types/react-redux": "^7.1.1",
     "@types/seedrandom": "^2.4.28",
     "@types/storybook__addon-actions": "^3.4.3",
     "@types/storybook__addon-info": "^4.1.2",
-    "@types/storybook__addon-knobs": "^5.0.3",
+    "@types/storybook__addon-knobs": "5.0.4",
     "@types/storybook__react": "^4.0.2",
     "@types/url-parse": "^1.4.3",
     "@types/uuid": "^3.4.4",
@@ -126,6 +127,7 @@
     "puppeteer": "^1.20.0",
     "react-docgen-typescript-loader": "^3.0.1",
     "react-docgen-typescript-webpack-plugin": "^1.1.0",
+    "redux-devtools-extension": "^2.13.8",
     "sass-graph": "^3.0.4",
     "sass-loader": "^7.1.0",
     "seedrandom": "^3.0.5",
@@ -147,16 +149,17 @@
     "d3-collection": "^1.0.7",
     "d3-scale": "^1.0.7",
     "d3-shape": "^1.3.4",
-    "fp-ts": "^1.14.2",
     "konva": "^2.6.0",
-    "mobx": "^4.9.2",
-    "mobx-react": "^5.4.3",
     "newtype-ts": "^0.2.4",
     "prop-types": "^15.7.2",
+    "re-reselect": "^3.4.0",
     "react": "^16.8.3",
     "react-dom": "^16.8.3",
     "react-konva": "16.8.3",
+    "react-redux": "^7.1.0",
     "react-spring": "^8.0.8",
+    "redux": "^4.0.4",
+    "reselect": "^4.0.0",
     "resize-observer-polyfill": "^1.5.1",
     "ts-debounce": "^1.0.0",
     "uuid": "^3.3.2"

scripts/custom_matchers.ts

@@ -15,7 +15,8 @@ type MatcherParameters<T extends (this: any, received: any, ...args: any[]) => a
   : never;
 
 declare global {
-  namespace jest { // eslint-disable-line
+  // eslint-disable-next-line
+  namespace jest {
     interface Matchers<R> {
       /**
        * Expect array to be filled with value, and optionally length

src/chart_types/index.ts

@@ -0,0 +1,9 @@
+import { $Values } from 'utility-types';
+
+export const ChartTypes = Object.freeze({
+  Global: 'global' as 'global',
+  Pie: 'pie' as 'pie',
+  XYAxis: 'xy_axis' as 'xy_axis',
+});
+
+export type ChartTypes = $Values<typeof ChartTypes>;

src/chart_types/specs.ts

@@ -0,0 +1,9 @@
+export {
+  AreaSeries,
+  BarSeries,
+  LineSeries,
+  Axis,
+  LineAnnotation,
+  RectAnnotation,
+  HistogramBarSeries,
+} from './xy_chart/specs';

src/chart_types/xy_chart/annotations/annotation_marker.test.tsx

@@ -1,20 +1,16 @@
 import * as React from 'react';
 
-import { AnnotationDomainTypes, AnnotationSpec, Position, Rotation } from '../utils/specs';
+import { AnnotationDomainTypes, AnnotationSpec, Position, Rotation, SpecTypes, AnnotationTypes } from '../utils/specs';
 import { DEFAULT_ANNOTATION_LINE_STYLE } from '../../../utils/themes/theme';
 import { Dimensions } from '../../../utils/dimensions';
-import { getAnnotationId, getGroupId, GroupId } from '../../../utils/ids';
+import { GroupId } from '../../../utils/ids';
 import { ScaleContinuous } from '../../../utils/scales/scale_continuous';
 import { Scale, ScaleType } from '../../../utils/scales/scales';
-import {
-  computeLineAnnotationDimensions,
-  isWithinLineMarkerBounds,
-  AnnotationMarker,
-  AnnotationLineProps,
-} from './annotation_utils';
+import { computeLineAnnotationDimensions, AnnotationLineProps } from './line_annotation_tooltip';
+import { ChartTypes } from '../..';
 
 describe('annotation marker', () => {
-  const groupId = getGroupId('foo-group');
+  const groupId = 'foo-group';
 
   const minRange = 0;
   const maxRange = 100;
@@ -41,10 +37,12 @@ describe('annotation marker', () => {
   test('should compute line annotation dimensions with marker if defined (y domain)', () => {
     const chartRotation: Rotation = 0;
 
-    const annotationId = getAnnotationId('foo-line');
+    const id = 'foo-line';
     const lineAnnotation: AnnotationSpec = {
-      annotationType: 'line',
-      annotationId,
+      chartType: ChartTypes.XYAxis,
+      specType: SpecTypes.Annotation,
+      annotationType: AnnotationTypes.Line,
+      id,
       domainType: AnnotationDomainTypes.YDomain,
       dataValues: [{ dataValue: 2, details: 'foo' }],
       groupId,
@@ -95,10 +93,11 @@ describe('annotation marker', () => {
   test('should compute line annotation dimensions with marker if defined (y domain: 180 deg rotation)', () => {
     const chartRotation: Rotation = 180;
 
-    const annotationId = getAnnotationId('foo-line');
     const lineAnnotation: AnnotationSpec = {
-      annotationType: 'line',
-      annotationId,
+      chartType: ChartTypes.XYAxis,
+      specType: SpecTypes.Annotation,
+      annotationType: AnnotationTypes.Line,
+      id: 'foo-line',
       domainType: AnnotationDomainTypes.YDomain,
       dataValues: [{ dataValue: 2, details: 'foo' }],
       groupId,
@@ -148,10 +147,11 @@ describe('annotation marker', () => {
   test('should compute line annotation dimensions with marker if defined (x domain)', () => {
     const chartRotation: Rotation = 0;
 
-    const annotationId = getAnnotationId('foo-line');
     const lineAnnotation: AnnotationSpec = {
-      annotationType: 'line',
-      annotationId,
+      chartType: ChartTypes.XYAxis,
+      specType: SpecTypes.Annotation,
+      annotationType: AnnotationTypes.Line,
+      id: 'foo-line',
       domainType: AnnotationDomainTypes.XDomain,
       dataValues: [{ dataValue: 2, details: 'foo' }],
       groupId,
@@ -197,26 +197,4 @@ describe('annotation marker', () => {
     ];
     expect(dimensions).toEqual(expectedDimensions);
   });
-
-  test('should compute if a point is within an annotation line marker bounds', () => {
-    const marker: AnnotationMarker = {
-      icon: <div />,
-      color: 'custom-color',
-      position: { top: 0, left: 0 },
-      dimension: { width: 10, height: 10 },
-    };
-    expect(isWithinLineMarkerBounds({ x: -1, y: 0 }, marker)).toBe(false);
-
-    expect(isWithinLineMarkerBounds({ x: 0, y: -1 }, marker)).toBe(false);
-
-    expect(isWithinLineMarkerBounds({ x: 0, y: 0 }, marker)).toBe(true);
-
-    expect(isWithinLineMarkerBounds({ x: 10, y: 10 }, marker)).toBe(true);
-
-    expect(isWithinLineMarkerBounds({ x: 11, y: 10 }, marker)).toBe(false);
-
-    expect(isWithinLineMarkerBounds({ x: 11, y: 10 }, { ...marker, position: { top: 0, left: 1 } })).toBe(true);
-
-    expect(isWithinLineMarkerBounds({ x: 15, y: 15 }, { ...marker, position: { top: 10, left: 10 } })).toBe(true);
-  });
 });