Skip to content

Commit f0973b2

Browse files
williasterwilliaster
committed
[xy-chart] add disableMouseEvents to all series
1 parent eed8c51 commit f0973b2

20 files changed

+448
-135
lines changed

‎packages/demo/examples/01-xy-chart/LinkedXYCharts.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ class LinkedXYCharts extends React.Component {
9494
}
9595

9696
render() {
97-
const { screenWidth } = this.props;
97+
const { screenWidth } = this.props; // eslint-disable-line react/prop-types
9898
const { mousedOverDatum, mousedOverKey, selectedDatum } = this.state;
9999
const width = Math.max(400, Math.min(700, screenWidth / 1.5));
100100
const height = 100;
@@ -161,7 +161,7 @@ class LinkedXYCharts extends React.Component {
161161
data={[selectedDatum]}
162162
stackKeys={['y']}
163163
stackFills={[`url(#${PATTERN_ID})`]}
164-
onClick={this.onClick}
164+
disableMouseEvents
165165
/>}
166166
{stackCrossHairData &&
167167
<CrossHair

‎packages/demo/examples/01-xy-chart/index.jsx‎

Lines changed: 35 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -96,31 +96,41 @@ export default {
9696
y: Math.random() > 0.5 ? d.y * 2 : d.y / 2,
9797
}));
9898
return (
99-
<WithToggle id="lineseries_toggle" label="Show voronoi" initialChecked>
100-
{showVoronoi => (
101-
<ResponsiveXYChart
102-
ariaLabel="Required label"
103-
xScale={{ type: 'time' }}
104-
yScale={{ type: 'linear' }}
105-
useVoronoi
106-
showVoronoi={showVoronoi}
107-
>
108-
<YAxis label="Price ($)" numTicks={4} />
109-
<LineSeries
110-
data={timeSeriesData}
111-
label="Apple Stock"
112-
showPoints
113-
/>
114-
<LineSeries
115-
data={data2}
116-
label="Apple Stock 2"
117-
stroke={colors.categories[2]}
118-
strokeDasharray="3 3"
119-
strokeLinecap="butt"
120-
/>
121-
<CrossHair />
122-
<XAxis label="Time" numTicks={5} />
123-
</ResponsiveXYChart>
99+
<WithToggle id="line_use_voronoi_toggle" label="Use voronoi" initialChecked>
100+
{useVoronoi => (
101+
<WithToggle id="line_show_voronoi_toggle" label="Show voronoi" initialChecked>
102+
{showVoronoi => (
103+
<WithToggle id="line_m_events_toggle" label="Disable mouse events" initialChecked>
104+
{disableMouseEvents => (
105+
<ResponsiveXYChart
106+
ariaLabel="Required label"
107+
xScale={{ type: 'time' }}
108+
yScale={{ type: 'linear' }}
109+
useVoronoi={useVoronoi}
110+
showVoronoi={showVoronoi}
111+
>
112+
<YAxis label="Price ($)" numTicks={4} />
113+
<LineSeries
114+
data={timeSeriesData}
115+
label="Apple Stock"
116+
showPoints
117+
disableMouseEvents={disableMouseEvents}
118+
/>
119+
<LineSeries
120+
data={data2}
121+
label="Apple Stock 2"
122+
stroke={colors.categories[2]}
123+
strokeDasharray="3 3"
124+
strokeLinecap="butt"
125+
disableMouseEvents={disableMouseEvents}
126+
/>
127+
<CrossHair />
128+
<XAxis label="Time" numTicks={5} />
129+
</ResponsiveXYChart>
130+
)}
131+
</WithToggle>
132+
)}
133+
</WithToggle>
124134
)}
125135
</WithToggle>
126136
);

‎packages/xy-chart/src/chart/XYChart.jsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ class XYChart extends React.PureComponent {
7575
static collectScalesFromProps(props) {
7676
const { xScale: xScaleObject, yScale: yScaleObject, children } = props;
7777
const { innerWidth, innerHeight } = XYChart.getDimmensions(props);
78-
const { allData, dataBySeriesType } = collectDataFromChildSeries(children);
78+
const { allData, dataBySeriesType, dataByIndex, data } = collectDataFromChildSeries(children);
7979

8080
const xScale = getScaleForAccessor({
8181
allData,
@@ -97,7 +97,8 @@ class XYChart extends React.PureComponent {
9797
const name = componentName(Child);
9898
if (isBarSeries(name) && xScale.type !== 'band') {
9999
const dummyBand = getScaleForAccessor({
100-
allData: dataBySeriesType[name],
100+
// allData: dataBySeriesType[name],
101+
allData,
101102
minAccessor: xString,
102103
maxAccessor: xString,
103104
type: 'band',
@@ -116,7 +117,7 @@ class XYChart extends React.PureComponent {
116117
});
117118

118119
return {
119-
allData,
120+
dataByIndex,
120121
xScale,
121122
yScale,
122123
};
@@ -134,15 +135,24 @@ class XYChart extends React.PureComponent {
134135

135136
static getStateFromProps(props) {
136137
const { margin, innerWidth, innerHeight } = XYChart.getDimmensions(props);
137-
const { allData, xScale, yScale } = XYChart.collectScalesFromProps(props);
138+
const { xScale, yScale } = XYChart.collectScalesFromProps(props);
139+
140+
const voronoiData = React.Children.toArray(props.children).reduce((result, Child) => {
141+
if (isSeries(componentName(Child)) && !Child.props.disableMouseEvents) {
142+
return result.concat(
143+
Child.props.data.filter(d => isDefined(getX(d)) && isDefined(getY(d))),
144+
);
145+
}
146+
return result;
147+
}, []);
138148

139149
return {
140-
allData,
141150
innerHeight,
142151
innerWidth,
143152
margin,
144153
xScale,
145154
yScale,
155+
voronoiData,
146156
voronoiX: d => xScale(getX(d)),
147157
voronoiY: d => yScale(getY(d)),
148158
};
@@ -203,10 +213,10 @@ class XYChart extends React.PureComponent {
203213
} = this.props;
204214

205215
const {
206-
allData,
207216
innerWidth,
208217
innerHeight,
209218
margin,
219+
voronoiData,
210220
voronoiX,
211221
voronoiY,
212222
xScale,
@@ -252,14 +262,13 @@ class XYChart extends React.PureComponent {
252262
tickStyles: { ...theme[`${styleKey}TickStyles`], ...Child.props.tickStyles },
253263
});
254264
} else if (isSeries(name)) {
255-
const { disableMouseEvents: noMouseEvents } = Child.props;
256265
return React.cloneElement(Child, {
257266
xScale,
258267
yScale,
259268
barWidth,
260-
onClick: noMouseEvents ? null : (Child.props.onClick || onClick),
261-
onMouseLeave: noMouseEvents ? null : (Child.props.onMouseLeave || onMouseLeave),
262-
onMouseMove: noMouseEvents ? null : (Child.props.onMouseMove || onMouseMove),
269+
onClick: Child.props.onClick || onClick,
270+
onMouseLeave: Child.props.onMouseLeave || onMouseLeave,
271+
onMouseMove: Child.props.onMouseMove || onMouseMove,
263272
});
264273
} else if (isCrossHair(name)) {
265274
CrossHairs.push(Child);
@@ -272,7 +281,7 @@ class XYChart extends React.PureComponent {
272281

273282
{useVoronoi &&
274283
<Voronoi
275-
data={allData.filter(d => isDefined(d.x) && isDefined(d.y))}
284+
data={voronoiData}
276285
x={voronoiX}
277286
y={voronoiY}
278287
width={innerWidth}

‎packages/xy-chart/src/series/AreaSeries.jsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,10 @@ import { areaSeriesDataShape, interpolationShape } from '../utils/propShapes';
1313

1414
const propTypes = {
1515
data: areaSeriesDataShape.isRequired,
16+
disableMouseEvents: PropTypes.bool,
1617
fill: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
1718
fillOpacity: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
1819
interpolation: interpolationShape,
19-
label: PropTypes.string.isRequired,
2020
stroke: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
2121
strokeDasharray: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
2222
strokeWidth: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
@@ -30,6 +30,7 @@ const propTypes = {
3030
};
3131

3232
const defaultProps = {
33+
disableMouseEvents: false,
3334
interpolation: 'monotoneX',
3435
stroke: color.default,
3536
strokeWidth: 3,
@@ -50,11 +51,13 @@ const getY0 = d => d.y0;
5051
const getY1 = d => d.y1;
5152
const definedClosed = d => isDefined(getY(d));
5253
const definedOpen = d => isDefined(getY0(d)) && isDefined(getY1(d));
54+
const noEventsStyles = { pointerEvents: 'none' };
5355

5456
export default class AreaSeries extends React.PureComponent {
5557
render() {
5658
const {
5759
data,
60+
disableMouseEvents,
5861
xScale,
5962
yScale,
6063
stroke,
@@ -64,7 +67,6 @@ export default class AreaSeries extends React.PureComponent {
6467
fill,
6568
fillOpacity,
6669
interpolation,
67-
label,
6870
onClick,
6971
onMouseMove,
7072
onMouseLeave,
@@ -83,16 +85,16 @@ export default class AreaSeries extends React.PureComponent {
8385
const curve = interpolatorLookup[interpolation] || interpolatorLookup.monotoneX;
8486
return (
8587
<Group
86-
key={label}
87-
onClick={onClick && ((event) => {
88+
style={disableMouseEvents ? noEventsStyles : null}
89+
onClick={disableMouseEvents ? null : onClick && ((event) => {
8890
const d = findClosestDatum({ data, getX: x, event, xScale });
8991
onClick({ event, data, datum: d, color: fillValue });
9092
})}
91-
onMouseMove={onMouseMove && ((event) => {
93+
onMouseMove={disableMouseEvents ? null : onMouseMove && ((event) => {
9294
const d = findClosestDatum({ data, getX: x, event, xScale });
9395
onMouseMove({ event, data, datum: d, color: fillValue });
9496
})}
95-
onMouseLeave={onMouseLeave}
97+
onMouseLeave={disableMouseEvents ? null : onMouseLeave}
9698
>
9799
<Area
98100
data={data}

‎packages/xy-chart/src/series/BarSeries.jsx‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ import { callOrValue, isDefined } from '../utils/chartUtils';
1010

1111
const propTypes = {
1212
data: barSeriesDataShape.isRequired,
13-
label: PropTypes.string.isRequired,
14-
13+
disableMouseEvents: PropTypes.bool,
1514
// overridden by data props
1615
fill: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
1716
fillOpacity: PropTypes.oneOfType([PropTypes.func, PropTypes.number]),
@@ -30,6 +29,7 @@ const propTypes = {
3029

3130
const defaultProps = {
3231
barWidth: null,
32+
disableMouseEvents: false,
3333
fill: themeColors.default,
3434
fillOpacity: null,
3535
stackBy: null,
@@ -44,17 +44,18 @@ const defaultProps = {
4444

4545
const x = d => d.x;
4646
const y = d => d.y;
47+
const noEventsStyles = { pointerEvents: 'none' };
4748

4849
export default class BarSeries extends React.PureComponent {
4950
render() {
5051
const {
5152
barWidth,
5253
data,
54+
disableMouseEvents,
5355
fill,
5456
fillOpacity,
5557
stroke,
5658
strokeWidth,
57-
label,
5859
xScale,
5960
yScale,
6061
onClick,
@@ -67,13 +68,13 @@ export default class BarSeries extends React.PureComponent {
6768
const maxHeight = (yScale.range() || [0])[0];
6869
const offset = xScale.offset || 0;
6970
return (
70-
<Group key={label}>
71+
<Group style={disableMouseEvents ? noEventsStyles : null}>
7172
{data.map((d, i) => {
7273
const barHeight = maxHeight - yScale(y(d));
7374
const color = d.fill || callOrValue(fill, d, i);
7475
return isDefined(d.y) && (
7576
<Bar
76-
key={`bar-${label}-${xScale(x(d))}`}
77+
key={`bar-${xScale(x(d))}`}
7778
x={xScale(x(d)) - offset}
7879
y={maxHeight - barHeight}
7980
width={barWidth}
@@ -82,13 +83,13 @@ export default class BarSeries extends React.PureComponent {
8283
fillOpacity={d.fillOpacity || callOrValue(fillOpacity, d, i)}
8384
stroke={d.stroke || callOrValue(stroke, d, i)}
8485
strokeWidth={d.strokeWidth || callOrValue(strokeWidth, d, i)}
85-
onClick={onClick && (() => (event) => {
86+
onClick={disableMouseEvents ? null : onClick && (() => (event) => {
8687
onClick({ event, data, datum: d, color, index: i });
8788
})}
88-
onMouseMove={onMouseMove && (() => (event) => {
89+
onMouseMove={disableMouseEvents ? null : onMouseMove && (() => (event) => {
8990
onMouseMove({ event, data, datum: d, color, index: i });
9091
})}
91-
onMouseLeave={onMouseLeave && (() => onMouseLeave)}
92+
onMouseLeave={disableMouseEvents ? null : onMouseLeave && (() => onMouseLeave)}
9293
/>
9394
);
9495
})}

‎packages/xy-chart/src/series/GroupedBarSeries.jsx‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import { scaleTypeToScale } from '../utils/chartUtils';
99

1010
const propTypes = {
1111
data: groupedBarSeriesDataShape.isRequired,
12+
disableMouseEvents: PropTypes.bool,
1213
groupKeys: PropTypes.arrayOf(PropTypes.string).isRequired,
1314
groupFills: PropTypes.arrayOf(PropTypes.string),
1415
stroke: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
@@ -24,6 +25,7 @@ const propTypes = {
2425
};
2526

2627
const defaultProps = {
28+
disableMouseEvents: false,
2729
groupKeys: null,
2830
groupFills: color.categories,
2931
groupPadding: 0.1,
@@ -37,11 +39,13 @@ const defaultProps = {
3739
};
3840

3941
const x = d => d.x;
42+
const noEventsStyles = { pointerEvents: 'none' };
4043

4144
export default class GroupedBarSeries extends React.PureComponent {
4245
render() {
4346
const {
4447
data,
48+
disableMouseEvents,
4549
groupKeys,
4650
groupFills,
4751
groupPadding,
@@ -67,6 +71,7 @@ export default class GroupedBarSeries extends React.PureComponent {
6771
const zScale = scaleTypeToScale.ordinal({ range: groupFills, domain: groupKeys });
6872
return (
6973
<BarGroup
74+
style={disableMouseEvents ? noEventsStyles : null}
7075
data={data}
7176
keys={groupKeys}
7277
height={maxHeight}
@@ -78,15 +83,15 @@ export default class GroupedBarSeries extends React.PureComponent {
7883
rx={2}
7984
stroke={stroke}
8085
strokeWidth={strokeWidth}
81-
onClick={onClick && (d => (event) => {
86+
onClick={disableMouseEvents ? null : onClick && (d => (event) => {
8287
const { key: seriesKey, data: datum } = d;
8388
onClick({ event, data, datum, seriesKey, color: zScale(seriesKey) });
8489
})}
85-
onMouseMove={onMouseMove && (d => (event) => {
90+
onMouseMove={disableMouseEvents ? null : onMouseMove && (d => (event) => {
8691
const { key, data: datum } = d;
8792
onMouseMove({ event, data, datum, key, color: zScale(key) });
8893
})}
89-
onMouseLeave={onMouseLeave && (() => onMouseLeave)}
94+
onMouseLeave={disableMouseEvents ? null : onMouseLeave && (() => onMouseLeave)}
9095
/>
9196
);
9297
}

0 commit comments

Comments
 (0)