Skip to content

Commit 9694b5b

Browse files
markov00markov00
authored
fix(areachart): fix misaligned rendering props (#141)
There was a misalignment between the animated props and the non animated ones that causes the area line to use the fill instead of stroke wrongly rendering the line on the chart. We also aligned the animated and not animated props for line and bars. React Spring also distributes ES6 by default, which breaks jest tests unless it's imported explicitly using the cjs extension. see pmndrs/react-spring#555 fix #140
1 parent 56b173d commit 9694b5b

File tree

6 files changed

+555
-174
lines changed

6 files changed

+555
-174
lines changed

‎src/components/react_canvas/area_geometries.tsx‎

Lines changed: 67 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
import { Group as KonvaGroup } from 'konva';
22
import React from 'react';
33
import { Circle, Group, Path } from 'react-konva';
4-
import { animated, Spring } from 'react-spring/renderprops-konva';
4+
import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
55
import { LegendItem } from '../../lib/series/legend';
66
import { AreaGeometry, getGeometryStyle, PointGeometry } from '../../lib/series/rendering';
77
import { AreaSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
8-
import { GlobalKonvaElementProps } from './globals';
8+
import {
9+
buildAreaLineProps,
10+
buildAreaPointProps,
11+
buildAreaProps,
12+
} from './utils/rendering_props_utils';
913

1014
interface AreaGeometriesDataProps {
1115
animated?: boolean;
@@ -54,45 +58,42 @@ export class AreaGeometries extends React.PureComponent<
5458
);
5559
}
5660
private renderPoints = (areaPoints: PointGeometry[], areaIndex: number): JSX.Element[] => {
57-
const { radius, stroke, strokeWidth, opacity } = this.props.style.point;
61+
const { radius, strokeWidth, opacity } = this.props.style.point;
5862

59-
return areaPoints.map((areaPoint, index) => {
63+
return areaPoints.map((areaPoint, pointIndex) => {
6064
const { x, y, color, transform } = areaPoint;
6165
if (this.props.animated) {
6266
return (
63-
<Group key={`area-point-group-${areaIndex}-${index}`} x={transform.x}>
67+
<Group key={`area-point-group-${areaIndex}-${pointIndex}`} x={transform.x}>
6468
<Spring native from={{ y }} to={{ y }}>
65-
{(props: { y: number }) => (
66-
<animated.Circle
67-
key={`area-point-${areaIndex}-${index}`}
68-
x={x}
69-
y={y}
70-
radius={radius}
71-
strokeWidth={strokeWidth}
72-
strokeEnabled={strokeWidth !== 0}
73-
stroke={color}
74-
fill={'white'}
75-
opacity={opacity}
76-
{...GlobalKonvaElementProps}
77-
/>
78-
)}
69+
{(props: { y: number }) => {
70+
const pointProps = buildAreaPointProps({
71+
areaIndex,
72+
pointIndex,
73+
x,
74+
y,
75+
radius,
76+
strokeWidth,
77+
color,
78+
opacity,
79+
});
80+
return <animated.Circle {...pointProps} />;
81+
}}
7982
</Spring>
8083
</Group>
8184
);
8285
} else {
83-
return (
84-
<Circle
85-
key={`area-point-${areaIndex}-${index}`}
86-
x={transform.x + x}
87-
y={y}
88-
radius={radius}
89-
strokeWidth={strokeWidth}
90-
stroke={stroke}
91-
fill={color}
92-
opacity={opacity}
93-
{...GlobalKonvaElementProps}
94-
/>
95-
);
86+
const pointProps = buildAreaPointProps({
87+
areaIndex,
88+
pointIndex,
89+
x: transform.x + x,
90+
y,
91+
radius,
92+
strokeWidth,
93+
color,
94+
opacity,
95+
});
96+
return <Circle {...pointProps} />;
9697
}
9798
});
9899
}
@@ -108,32 +109,26 @@ export class AreaGeometries extends React.PureComponent<
108109
return (
109110
<Group key={`area-group-${i}`} x={transform.x}>
110111
<Spring native from={{ area }} to={{ area }}>
111-
{(props: { area: string }) => (
112-
<animated.Path
113-
key={`area-${i}`}
114-
data={props.area}
115-
fill={color}
116-
lineCap="round"
117-
lineJoin="round"
118-
opacity={opacity}
119-
{...GlobalKonvaElementProps}
120-
/>
121-
)}
112+
{(props: { area: string }) => {
113+
const areaProps = buildAreaProps({
114+
index: i,
115+
areaPath: props.area,
116+
color,
117+
opacity,
118+
});
119+
return <animated.Path {...areaProps} />;
120+
}}
122121
</Spring>
123122
</Group>
124123
);
125124
} else {
126-
return (
127-
<Path
128-
key={`area-${i}`}
129-
data={area}
130-
fill={color}
131-
opacity={opacity}
132-
lineCap="round"
133-
lineJoin="round"
134-
{...GlobalKonvaElementProps}
135-
/>
136-
);
125+
const areaProps = buildAreaProps({
126+
index: i,
127+
areaPath: area,
128+
color,
129+
opacity,
130+
});
131+
return <Path {...areaProps} />;
137132
}
138133
});
139134
}
@@ -154,31 +149,28 @@ export class AreaGeometries extends React.PureComponent<
154149
return (
155150
<Group key={`area-line-group-${i}`} x={transform.x}>
156151
<Spring native from={{ line }} to={{ line }}>
157-
{(props: { line: string }) => (
158-
<animated.Path
159-
key={`area-line-${i}`}
160-
data={props.line}
161-
stroke={color}
162-
strokeWidth={strokeWidth}
163-
lineCap="round"
164-
lineJoin="round"
165-
{...geometryStyle}
166-
{...GlobalKonvaElementProps}
167-
/>
168-
)}
152+
{(props: { line: string }) => {
153+
const lineProps = buildAreaLineProps({
154+
index: i,
155+
linePath: props.line,
156+
color,
157+
strokeWidth,
158+
geometryStyle,
159+
});
160+
return <animated.Path {...lineProps} />;
161+
}}
169162
</Spring>
170163
</Group>
171164
);
172165
} else {
173-
return (
174-
<Path
175-
key={`area-line-${i}`}
176-
data={line}
177-
fill={color}
178-
{...geometryStyle}
179-
{...GlobalKonvaElementProps}
180-
/>
181-
);
166+
const lineProps = buildAreaLineProps({
167+
index: i,
168+
linePath: line,
169+
color,
170+
strokeWidth,
171+
geometryStyle,
172+
});
173+
return <Path {...lineProps} />;
182174
}
183175
});
184176
}

‎src/components/react_canvas/bar_geometries.tsx‎

Lines changed: 33 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Group as KonvaGroup } from 'konva';
22
import React from 'react';
33
import { Group, Rect } from 'react-konva';
4-
import { animated, Spring } from 'react-spring/renderprops-konva';
4+
import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
55
import { LegendItem } from '../../lib/series/legend';
66
import { BarGeometry, getGeometryStyle } from '../../lib/series/rendering';
77
import { BarSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
8-
import { GlobalKonvaElementProps } from './globals';
8+
import { buildBarProps } from './utils/rendering_props_utils';
99

1010
interface BarGeometriesDataProps {
1111
animated?: boolean;
@@ -47,7 +47,7 @@ export class BarGeometries extends React.PureComponent<
4747
style: { border },
4848
sharedStyle,
4949
} = this.props;
50-
return bars.map((bar, i) => {
50+
return bars.map((bar, index) => {
5151
const { x, y, width, height, color } = bar;
5252

5353
// Properties to determine if we need to highlight individual bars depending on hover state
@@ -69,42 +69,41 @@ export class BarGeometries extends React.PureComponent<
6969
const borderEnabled = border.visible && width > border.strokeWidth * 7;
7070
if (this.props.animated) {
7171
return (
72-
<Group key={i}>
72+
<Group key={index}>
7373
<Spring native from={{ y: y + height, height: 0 }} to={{ y, height }}>
74-
{(props: { y: number; height: number }) => (
75-
<animated.Rect
76-
key="animatedRect"
77-
x={x}
78-
y={props.y}
79-
width={width}
80-
height={props.height}
81-
fill={color}
82-
strokeWidth={border.strokeWidth}
83-
stroke={border.stroke}
84-
strokeEnabled={borderEnabled}
85-
{...GlobalKonvaElementProps}
86-
{...geometryStyle}
87-
/>
88-
)}
74+
{(props: { y: number; height: number }) => {
75+
const barProps = buildBarProps({
76+
index,
77+
x,
78+
y: props.y,
79+
width,
80+
height: props.height,
81+
fill: color,
82+
stroke: border.stroke,
83+
strokeWidth: border.strokeWidth,
84+
borderEnabled,
85+
geometryStyle,
86+
});
87+
88+
return <animated.Rect {...barProps} />;
89+
}}
8990
</Spring>
9091
</Group>
9192
);
9293
} else {
93-
return (
94-
<Rect
95-
key={i}
96-
x={x}
97-
y={y}
98-
width={width}
99-
height={height}
100-
fill={color}
101-
strokeWidth={border.strokeWidth}
102-
stroke={border.stroke}
103-
strokeEnabled={borderEnabled}
104-
{...GlobalKonvaElementProps}
105-
{...geometryStyle}
106-
/>
107-
);
94+
const barProps = buildBarProps({
95+
index,
96+
x,
97+
y,
98+
width,
99+
height,
100+
fill: color,
101+
stroke: border.stroke,
102+
strokeWidth: border.strokeWidth,
103+
borderEnabled,
104+
geometryStyle,
105+
});
106+
return <Rect {...barProps} />;
108107
}
109108
});
110109
}

0 commit comments

Comments
 (0)