Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Jan 30, 2020
Merged

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

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
02eedcc
fix(brush): rotate brush on rotated charts
markov00 Jan 28, 2020
89acbfd
Merge branch 'master' into 2020-01-28_fix-rotated-brush
markov00 Jan 29, 2020
9da6cc2
Merge branch 'master' into 2020-01-28_fix-rotated-brush
markov00 Jan 29, 2020
c3c8ff6
fix: -90 and 180 degree rotation brush
markov00 Jan 29, 2020
c538c3c
Merge branch 'master' into 2020-01-28_fix-rotated-brush
markov00 Jan 29, 2020
9a18304
Merge branch 'master' into 2020-01-28_fix-rotated-brush
nickofthyme Jan 30, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions .playground/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,9 @@
/*display: inline-block;
position: relative;
*/
width: 100%;
height: 480px;
/*
margin: 0;
*/
width: 800px;
height: 400px;
margin: 20px;
}
</style>
</head>
Expand Down
114 changes: 89 additions & 25 deletions .playground/playground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
15 changes: 3 additions & 12 deletions src/chart_types/xy_chart/renderer/dom/brush.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -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;
}
Expand All @@ -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,
}}
Expand All @@ -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),
};
};
Expand Down
Loading