refactor: add selector

elastic · Apr 7, 2021 · 9e036d3 · 9e036d3
1 parent 947b29f
commit 9e036d3
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 33 deletions.
diff --git a/.playground/playground.tsx b/.playground/playground.tsx
@@ -19,25 +19,33 @@
 
 import React from 'react';
 
-import { Chart, BarSeries, ScaleType } from '../src';
+import { Chart, AreaSeries, LineSeries, BarSeries, ScaleType } from '../src';
 
 export class Playground extends React.Component {
   render() {
     return (
       <div className="App">
         <Chart size={[500, 200]}>
-          {/* <AreaSeries id="lines" name="test2" data={[
+          <AreaSeries
+            id="lines"
+            name="test2"
+            data={[
               { x: 'trousers', y: 300, val: 1232 },
               { x: 'watches', y: 20, val: 1232 },
               { x: 'bags', y: 700, val: 1232 },
               { x: 'cocktail dresses', y: 804, val: 1232 },
-            ]}/>
-            <LineSeries id="lines2" name="test" data={[
+            ]}
+          />
+          <LineSeries
+            id="lines2"
+            name="test"
+            data={[
               { x: 'trousers', y: 300, val: 1232 },
               { x: 'watches', y: 20, val: 1232 },
               { x: 'bags', y: 700, val: 1232 },
               { x: 'cocktail dresses', y: 804, val: 1232 },
-            ]}/> */}
+            ]}
+          />
           <BarSeries
             id="bars"
             name="amount"

diff --git a/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx b/src/chart_types/xy_chart/renderer/canvas/xy_chart.tsx
@@ -48,14 +48,14 @@ import {
 import { computeSeriesGeometriesSelector } from '../../state/selectors/compute_series_geometries';
 import { getAxesStylesSelector } from '../../state/selectors/get_axis_styles';
 import { getHighlightedSeriesSelector } from '../../state/selectors/get_highlighted_series';
+import { getSeriesTypes } from '../../state/selectors/get_series_types';
 import { getAnnotationSpecsSelector, getAxisSpecsSelector } from '../../state/selectors/get_specs';
 import { isChartEmptySelector } from '../../state/selectors/is_chart_empty';
 import { Geometries, Transform } from '../../state/utils/types';
 import { LinesGrid } from '../../utils/grid_lines';
 import { IndexedGeometryMap } from '../../utils/indexed_geometry_map';
-import { AxisSpec, AnnotationSpec } from '../../utils/specs';
+import { AxisSpec, AnnotationSpec, SeriesType } from '../../utils/specs';
 import { renderXYChartCanvas2d } from './renderers';
-import { getNameFunction } from './utils/types';
 
 /** @internal */
 export interface ReactiveChartStateProps {
@@ -77,6 +77,7 @@ export interface ReactiveChartStateProps {
   annotationDimensions: Map<AnnotationId, AnnotationDimensions>;
   annotationSpecs: AnnotationSpec[];
   panelGeoms: PanelGeoms;
+  seriesTypes: Set<SeriesType>;
 }
 
 interface ReactiveChartDispatchProps {
@@ -153,27 +154,17 @@ class XYChartComponent extends React.Component<XYChartProps> {
       initialized,
       isChartEmpty,
       chartContainerDimensions: { width, height },
-      geometries,
+      seriesTypes,
     } = this.props;
 
     if (!initialized || isChartEmpty) {
       this.ctx = null;
       return null;
     }
-
-    const seriesTypes: string[] = [];
-    Object.entries(geometries).forEach((value) => {
-      if (value[1].length > 0 && value[0]) {
-        seriesTypes.push(getNameFunction(value[0]));
-      }
-    });
-
-    const series: string[] = [];
-    seriesTypes.map((value: string, index: number) => {
-      return index < seriesTypes.length - 1 ? series.push(value, ' and') : series.push(value);
-    });
-
-    const chartSeriesTypes = seriesTypes.length > 1 ? `Mixed chart: ${series.join(' ')}` : `${seriesTypes[0]}`;
+    const multipleSeriesTypes: string[] = [];
+    seriesTypes.forEach((value) => multipleSeriesTypes.push(value));
+    const chartSeriesTypes =
+      seriesTypes.size > 1 ? `Mixed chart: ${[...seriesTypes].join(' and ')} chart` : `${[...seriesTypes]} chart`;
 
     return (
       <figure>
@@ -246,6 +237,7 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
   annotationDimensions: new Map(),
   annotationSpecs: [],
   panelGeoms: [],
+  seriesTypes: new Set(),
 };
 
 const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
@@ -274,6 +266,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
     annotationDimensions: computeAnnotationDimensionsSelector(state),
     annotationSpecs: getAnnotationSpecsSelector(state),
     panelGeoms: computePanelsSelectors(state),
+    seriesTypes: getSeriesTypes(state),
   };
 };
 

diff --git a/...s/xy_chart/renderer/canvas/utils/types.ts → ...chart/state/selectors/get_series_types.ts b/...s/xy_chart/renderer/canvas/utils/types.ts → ...chart/state/selectors/get_series_types.ts
@@ -17,13 +17,18 @@
  * under the License.
  */
 
+import createCachedSelector from 're-reselect';
+
+import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { SeriesType } from '../../utils/specs';
+import { getSeriesSpecsSelector } from './get_specs';
+
 /** @internal */
-export const getNameFunction = (key: string): string => {
-  const screenReader: Map<string, string> = new Map();
-  screenReader
-    .set('bars', 'Bar chart')
-    .set('areas', 'Area chart')
-    .set('lines', 'Line chart')
-    .set('bubbles', 'Bubble chart');
-  return screenReader.get(key) ?? 'unknown chart';
-};
+export const getSeriesTypes = createCachedSelector(
+  [getSeriesSpecsSelector],
+  (specs): Set<SeriesType> => {
+    const seriesTypes = new Set<SeriesType>();
+    specs.forEach((value) => seriesTypes.add(value.seriesType));
+    return seriesTypes;
+  },
+)(getChartIdSelector);
diff --git a/src/components/__snapshots__/chart.test.tsx.snap b/src/components/__snapshots__/chart.test.tsx.snap
@@ -72,15 +72,15 @@ exports[`Chart should render the legend name test 1`] = `
                   </Crosshair>
                 </Connect(Crosshair)>
                 <Connect(XYChart) forwardStageRef={{...}}>
-                  <XYChart forwardStageRef={{...}} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} onChartRendered={[Function (anonymous)]}>
+                  <XYChart forwardStageRef={{...}} initialized={true} isChartEmpty={false} debug={true} geometries={{...}} geometriesIndex={{...}} theme={{...}} chartContainerDimensions={{...}} highlightedLegendItem={[undefined]} rotation={0} renderingArea={{...}} chartTransform={{...}} axesSpecs={{...}} perPanelAxisGeoms={{...}} perPanelGridLines={{...}} axesStyles={{...}} annotationDimensions={{...}} annotationSpecs={{...}} panelGeoms={{...}} seriesTypes={{...}} onChartRendered={[Function (anonymous)]}>
                     <figure>
                       <canvas className=\\"echCanvasRenderer\\" width={150} height={200} style={{...}} role=\\"presentation\\">
                         <dl className=\\"echScreen-reader\\">
                           <dt>
                              Chart type 
                           </dt>
                           <dd>
-                            Bar chart
+                            bar chart
                           </dd>
                         </dl>
                       </canvas>