Skip to content

Commit

Permalink
fix(areachart): fix misaligned rendering props (#141)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
markov00 authored Apr 1, 2019
1 parent 56b173d commit 9694b5b
Show file tree
Hide file tree
Showing 6 changed files with 555 additions and 174 deletions.
142 changes: 67 additions & 75 deletions src/components/react_canvas/area_geometries.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,15 @@
import { Group as KonvaGroup } from 'konva';
import React from 'react';
import { Circle, Group, Path } from 'react-konva';
import { animated, Spring } from 'react-spring/renderprops-konva';
import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
import { LegendItem } from '../../lib/series/legend';
import { AreaGeometry, getGeometryStyle, PointGeometry } from '../../lib/series/rendering';
import { AreaSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
import { GlobalKonvaElementProps } from './globals';
import {
buildAreaLineProps,
buildAreaPointProps,
buildAreaProps,
} from './utils/rendering_props_utils';

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

return areaPoints.map((areaPoint, index) => {
return areaPoints.map((areaPoint, pointIndex) => {
const { x, y, color, transform } = areaPoint;
if (this.props.animated) {
return (
<Group key={`area-point-group-${areaIndex}-${index}`} x={transform.x}>
<Group key={`area-point-group-${areaIndex}-${pointIndex}`} x={transform.x}>
<Spring native from={{ y }} to={{ y }}>
{(props: { y: number }) => (
<animated.Circle
key={`area-point-${areaIndex}-${index}`}
x={x}
y={y}
radius={radius}
strokeWidth={strokeWidth}
strokeEnabled={strokeWidth !== 0}
stroke={color}
fill={'white'}
opacity={opacity}
{...GlobalKonvaElementProps}
/>
)}
{(props: { y: number }) => {
const pointProps = buildAreaPointProps({
areaIndex,
pointIndex,
x,
y,
radius,
strokeWidth,
color,
opacity,
});
return <animated.Circle {...pointProps} />;
}}
</Spring>
</Group>
);
} else {
return (
<Circle
key={`area-point-${areaIndex}-${index}`}
x={transform.x + x}
y={y}
radius={radius}
strokeWidth={strokeWidth}
stroke={stroke}
fill={color}
opacity={opacity}
{...GlobalKonvaElementProps}
/>
);
const pointProps = buildAreaPointProps({
areaIndex,
pointIndex,
x: transform.x + x,
y,
radius,
strokeWidth,
color,
opacity,
});
return <Circle {...pointProps} />;
}
});
}
Expand All @@ -108,32 +109,26 @@ export class AreaGeometries extends React.PureComponent<
return (
<Group key={`area-group-${i}`} x={transform.x}>
<Spring native from={{ area }} to={{ area }}>
{(props: { area: string }) => (
<animated.Path
key={`area-${i}`}
data={props.area}
fill={color}
lineCap="round"
lineJoin="round"
opacity={opacity}
{...GlobalKonvaElementProps}
/>
)}
{(props: { area: string }) => {
const areaProps = buildAreaProps({
index: i,
areaPath: props.area,
color,
opacity,
});
return <animated.Path {...areaProps} />;
}}
</Spring>
</Group>
);
} else {
return (
<Path
key={`area-${i}`}
data={area}
fill={color}
opacity={opacity}
lineCap="round"
lineJoin="round"
{...GlobalKonvaElementProps}
/>
);
const areaProps = buildAreaProps({
index: i,
areaPath: area,
color,
opacity,
});
return <Path {...areaProps} />;
}
});
}
Expand All @@ -154,31 +149,28 @@ export class AreaGeometries extends React.PureComponent<
return (
<Group key={`area-line-group-${i}`} x={transform.x}>
<Spring native from={{ line }} to={{ line }}>
{(props: { line: string }) => (
<animated.Path
key={`area-line-${i}`}
data={props.line}
stroke={color}
strokeWidth={strokeWidth}
lineCap="round"
lineJoin="round"
{...geometryStyle}
{...GlobalKonvaElementProps}
/>
)}
{(props: { line: string }) => {
const lineProps = buildAreaLineProps({
index: i,
linePath: props.line,
color,
strokeWidth,
geometryStyle,
});
return <animated.Path {...lineProps} />;
}}
</Spring>
</Group>
);
} else {
return (
<Path
key={`area-line-${i}`}
data={line}
fill={color}
{...geometryStyle}
{...GlobalKonvaElementProps}
/>
);
const lineProps = buildAreaLineProps({
index: i,
linePath: line,
color,
strokeWidth,
geometryStyle,
});
return <Path {...lineProps} />;
}
});
}
Expand Down
67 changes: 33 additions & 34 deletions src/components/react_canvas/bar_geometries.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Group as KonvaGroup } from 'konva';
import React from 'react';
import { Group, Rect } from 'react-konva';
import { animated, Spring } from 'react-spring/renderprops-konva';
import { animated, Spring } from 'react-spring/renderprops-konva.cjs';
import { LegendItem } from '../../lib/series/legend';
import { BarGeometry, getGeometryStyle } from '../../lib/series/rendering';
import { BarSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
import { GlobalKonvaElementProps } from './globals';
import { buildBarProps } from './utils/rendering_props_utils';

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

// Properties to determine if we need to highlight individual bars depending on hover state
Expand All @@ -69,42 +69,41 @@ export class BarGeometries extends React.PureComponent<
const borderEnabled = border.visible && width > border.strokeWidth * 7;
if (this.props.animated) {
return (
<Group key={i}>
<Group key={index}>
<Spring native from={{ y: y + height, height: 0 }} to={{ y, height }}>
{(props: { y: number; height: number }) => (
<animated.Rect
key="animatedRect"
x={x}
y={props.y}
width={width}
height={props.height}
fill={color}
strokeWidth={border.strokeWidth}
stroke={border.stroke}
strokeEnabled={borderEnabled}
{...GlobalKonvaElementProps}
{...geometryStyle}
/>
)}
{(props: { y: number; height: number }) => {
const barProps = buildBarProps({
index,
x,
y: props.y,
width,
height: props.height,
fill: color,
stroke: border.stroke,
strokeWidth: border.strokeWidth,
borderEnabled,
geometryStyle,
});

return <animated.Rect {...barProps} />;
}}
</Spring>
</Group>
);
} else {
return (
<Rect
key={i}
x={x}
y={y}
width={width}
height={height}
fill={color}
strokeWidth={border.strokeWidth}
stroke={border.stroke}
strokeEnabled={borderEnabled}
{...GlobalKonvaElementProps}
{...geometryStyle}
/>
);
const barProps = buildBarProps({
index,
x,
y,
width,
height,
fill: color,
stroke: border.stroke,
strokeWidth: border.strokeWidth,
borderEnabled,
geometryStyle,
});
return <Rect {...barProps} />;
}
});
}
Expand Down
Loading

0 comments on commit 9694b5b

Please sign in to comment.