fix(brush): rotate brush on rotated charts (#528)

This commit fix the brush values when the chart is rotated. fix #527 Co-authored-by: Nick Partridge <nick.ryan.partridge@gmail.com>
elastic · Jan 30, 2020 · 985ac21 · 985ac21
1 parent b9d10ee
commit 985ac21
Show file tree

Hide file tree

Showing 9 changed files with 305 additions and 116 deletions.
diff --git a/.playground/index.html b/.playground/index.html
@@ -29,11 +29,9 @@
         /*display: inline-block;
         position: relative;
         */
-        width: 100%;
-        height: 480px;
-        /*
-        margin: 0;
-*/
+        width: 800px;
+        height: 400px;
+        margin: 20px;
       }
     </style>
   </head>

diff --git a/.playground/playground.tsx b/.playground/playground.tsx
@@ -1,48 +1,112 @@
 import React from 'react';
-import { Chart, Datum, Partition } from '../src';
+import { Chart, LineSeries, ScaleType, Settings, Position, Axis, BarSeries, HistogramBarSeries } from '../src';
 export class Playground extends React.Component<{}, { isSunburstShown: boolean }> {
   chartRef: React.RefObject<Chart> = React.createRef();
   state = {
     isSunburstShown: true,
   };
+  onBrushEnd = (min: number, max: number) => {
+    // eslint-disable-next-line no-console
+    console.log({ min, max });
+  };
 
   render() {
     return (
       <>
         <div className="chart">
           <Chart ref={this.chartRef}>
-            <Partition
-              id={'piechart'}
+            <Settings rotation={90} onBrushEnd={this.onBrushEnd} />
+            <Axis id="y" position={Position.Left} title={'y'} />
+            <Axis id="x" position={Position.Bottom} title={'x'} />
+            <LineSeries
+              id={'aaa'}
+              xScaleType={ScaleType.Linear}
+              xAccessor={0}
+              yAccessors={[1]}
+              data={[
+                [0, 1],
+                [1, 2],
+                [2, 5],
+                [3, 5],
+                [4, 2],
+                [5, 6],
+              ]}
+            />
+          </Chart>
+        </div>
+        <div className="chart">
+          <Chart ref={this.chartRef}>
+            <Settings rotation={0} onBrushEnd={this.onBrushEnd} theme={{ chartMargins: { left: 30 } }} />
+            <Axis id="x" position={Position.Bottom} title={'x'} />
+            <Axis id="y" position={Position.Left} title={'y'} />
+            <LineSeries
+              id={'aaa'}
+              xScaleType={ScaleType.Linear}
+              xAccessor={0}
+              yAccessors={[1]}
+              data={[
+                [0, 1],
+                [1, 2],
+                [2, 5],
+                [3, 5],
+                [4, 2],
+                [5, 6],
+              ]}
+            />
+          </Chart>
+        </div>
+        <div className="chart">
+          <Chart ref={this.chartRef}>
+            <Settings rotation={90} onBrushEnd={this.onBrushEnd} theme={{ chartMargins: { left: 30 } }} />
+            <Axis id="x" position={Position.Bottom} title={'x'} />
+            <Axis id="y" position={Position.Left} title={'y'} />
+            <BarSeries
+              id={'aaa'}
+              xScaleType={ScaleType.Linear}
+              xAccessor={0}
+              yAccessors={[1]}
               data={[
-                { id: 'Item\u00A00', g: 'A', v: 30 },
-                { id: 'Item\u00A01', g: 'A', v: 20 },
-                { id: 'Item\u00A02', g: 'B', v: 50 },
+                [0, 1],
+                [1, 2],
+                [2, 5],
+                [3, 5],
+                // [4, 2],
+                [5, 6],
               ]}
-              valueAccessor={(d: Datum) => d.v}
-              valueFormatter={(d: Datum) => `${d}%`}
-              layers={[
-                { groupByRollup: (d: Datum) => d.g, nodeLabel: (d: Datum) => `Group ${d}` },
-                {
-                  groupByRollup: (d: Datum) => d.id,
-                  nodeLabel: (d: Datum) => d,
-                  fillLabel: { valueFormatter: (d: Datum) => `${d} pct` },
-                },
+            />
+            <LineSeries
+              id={'aaa1'}
+              xScaleType={ScaleType.Linear}
+              xAccessor={0}
+              yAccessors={[1]}
+              data={[
+                [0, 1],
+                [1, 2],
+                [2, 5],
+                [3, 5],
+                // [4, 2],
+                [5, 6],
               ]}
             />
           </Chart>
         </div>
         <div className="chart">
           <Chart ref={this.chartRef}>
-            <Partition
-              id={'piechart'}
-              data={[30, 20, 50]}
-              valueFormatter={(d: Datum) => `${d}%`}
-              layers={[
-                {
-                  groupByRollup: (d: Datum, i: number) => (i < 2 ? 'A' : 'B'),
-                  nodeLabel: (d: Datum) => `Group ${d}`,
-                },
-                { groupByRollup: (d: Datum, i: number) => i, nodeLabel: (d: Datum) => `Item\u00A0${d}` },
+            <Settings rotation={90} onBrushEnd={this.onBrushEnd} theme={{ chartMargins: { left: 30 } }} />
+            <Axis id="x" position={Position.Bottom} title={'x'} />
+            <Axis id="y" position={Position.Left} title={'y'} />
+            <HistogramBarSeries
+              id={'aaa'}
+              xScaleType={ScaleType.Linear}
+              xAccessor={0}
+              yAccessors={[1]}
+              data={[
+                [0, 1],
+                [1, 2],
+                [2, 5],
+                [3, 5],
+                [4, 2],
+                [5, 6],
               ]}
             />
           </Chart>

diff --git a/src/chart_types/xy_chart/renderer/dom/brush.tsx b/src/chart_types/xy_chart/renderer/dom/brush.tsx
@@ -3,8 +3,6 @@ import { Layer, Rect, Stage } from 'react-konva';
 import { connect } from 'react-redux';
 import { Dimensions } from '../../../../utils/dimensions';
 import { isInitialized } from '../../../../state/selectors/is_initialized';
-import { computeChartTransformSelector } from '../../state/selectors/compute_chart_transform';
-import { Transform } from '../../state/utils';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { getBrushAreaSelector } from '../../state/selectors/get_brush_area';
 import { isBrushAvailableSelector } from '../../state/selectors/is_brush_available';
@@ -14,7 +12,6 @@ import { isBrushingSelector } from '../../state/selectors/is_brushing';
 interface Props {
   initialized: boolean;
   chartDimensions: Dimensions;
-  chartTransform: Transform;
   isBrushing: boolean | undefined;
   isBrushAvailable: boolean | undefined;
   brushArea: Dimensions | null;
@@ -32,7 +29,7 @@ class BrushToolComponent extends React.Component<Props> {
   };
 
   render() {
-    const { initialized, isBrushAvailable, isBrushing, chartDimensions, chartTransform, brushArea } = this.props;
+    const { initialized, isBrushAvailable, isBrushing, chartDimensions, brushArea } = this.props;
     if (!initialized || !isBrushAvailable || !isBrushing) {
       return null;
     }
@@ -43,8 +40,8 @@ class BrushToolComponent extends React.Component<Props> {
         height={chartDimensions.height}
         className="echBrushTool"
         style={{
-          top: chartDimensions.top + chartTransform.x,
-          left: chartDimensions.left + chartTransform.y,
+          top: chartDimensions.top,
+          left: chartDimensions.left,
           width: chartDimensions.width,
           height: chartDimensions.height,
         }}
@@ -70,19 +67,13 @@ const mapStateToProps = (state: GlobalChartState): Props => {
         width: 0,
         height: 0,
       },
-      chartTransform: {
-        x: 0,
-        y: 0,
-        rotate: 0,
-      },
     };
   }
   return {
     initialized: state.specsInitialized,
     brushArea: getBrushAreaSelector(state),
     isBrushAvailable: isBrushAvailableSelector(state),
     chartDimensions: computeChartDimensionsSelector(state).chartDimensions,
-    chartTransform: computeChartTransformSelector(state),
     isBrushing: isBrushingSelector(state),
   };
 };