Skip to content

Commit

Permalink
fix(chart): fix duplicated keys for chart elements (#115)
Browse files Browse the repository at this point in the history
  • Loading branch information
@markov00
markov00 authored Mar 25, 2019
1 parent d498484 commit 6f12067
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 35 deletions.
31 changes: 18 additions & 13 deletions src/components/react_canvas/area_geometries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { animated, Spring } from 'react-spring/renderprops-konva';
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';

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

return areaPoints.map((areaPoint, index) => {
const { x, y, color, transform } = areaPoint;
if (this.props.animated) {
return (
<Group key={`area-point-group-${i}-${index}`} x={transform.x}>
<Group key={`area-point-group-${areaIndex}-${index}`} x={transform.x}>
<Spring native from={{ y }} to={{ y }}>
{(props: { y: number }) => (
<animated.Circle
key={`area-point-${index}`}
key={`area-point-${areaIndex}-${index}`}
x={x}
y={y}
radius={radius}
Expand All @@ -72,9 +73,7 @@ export class AreaGeometries extends React.PureComponent<
stroke={color}
fill={'white'}
opacity={opacity}
strokeHitEnabled={false}
listening={false}
perfectDrawEnabled={false}
{...GlobalKonvaElementProps}
/>
)}
</Spring>
Expand All @@ -83,17 +82,15 @@ export class AreaGeometries extends React.PureComponent<
} else {
return (
<Circle
key={`area-point-${index}`}
key={`area-point-${areaIndex}-${index}`}
x={transform.x + x}
y={y}
radius={radius}
strokeWidth={strokeWidth}
stroke={stroke}
fill={color}
opacity={opacity}
strokeHitEnabled={false}
listening={false}
perfectDrawEnabled={false}
{...GlobalKonvaElementProps}
/>
);
}
Expand All @@ -119,6 +116,7 @@ export class AreaGeometries extends React.PureComponent<
lineCap="round"
lineJoin="round"
opacity={opacity}
{...GlobalKonvaElementProps}
/>
)}
</Spring>
Expand All @@ -133,6 +131,7 @@ export class AreaGeometries extends React.PureComponent<
opacity={opacity}
lineCap="round"
lineJoin="round"
{...GlobalKonvaElementProps}
/>
);
}
Expand All @@ -157,22 +156,28 @@ export class AreaGeometries extends React.PureComponent<
<Spring native from={{ line }} to={{ line }}>
{(props: { line: string }) => (
<animated.Path
key={`line-${i}`}
key={`area-line-${i}`}
data={props.line}
stroke={color}
strokeWidth={strokeWidth}
listening={false}
lineCap="round"
lineJoin="round"
{...geometryStyle}
{...GlobalKonvaElementProps}
/>
)}
</Spring>
</Group>
);
} else {
return (
<Path key={`line-${i}`} data={line} fill={color} listening={false} {...geometryStyle} />
<Path
key={`area-line-${i}`}
data={line}
fill={color}
{...geometryStyle}
{...GlobalKonvaElementProps}
/>
);
}
});
Expand Down
5 changes: 3 additions & 2 deletions src/components/react_canvas/bar_geometries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { animated, Spring } from 'react-spring/renderprops-konva';
import { LegendItem } from '../../lib/series/legend';
import { BarGeometry, getGeometryStyle } from '../../lib/series/rendering';
import { BarSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
import { GlobalKonvaElementProps } from './globals';

interface BarGeometriesDataProps {
animated?: boolean;
Expand Down Expand Up @@ -81,7 +82,7 @@ export class BarGeometries extends React.PureComponent<
strokeWidth={border.strokeWidth}
stroke={border.stroke}
strokeEnabled={borderEnabled}
perfectDrawEnabled={true}
{...GlobalKonvaElementProps}
{...geometryStyle}
/>
)}
Expand All @@ -100,7 +101,7 @@ export class BarGeometries extends React.PureComponent<
strokeWidth={border.strokeWidth}
stroke={border.stroke}
strokeEnabled={borderEnabled}
perfectDrawEnabled={false}
{...GlobalKonvaElementProps}
{...geometryStyle}
/>
);
Expand Down
7 changes: 7 additions & 0 deletions src/components/react_canvas/globals.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { ShapeConfig } from 'konva';

export const GlobalKonvaElementProps: ShapeConfig = {
strokeHitEnabled: false,
perfectDrawEnabled: false,
listening: false,
};
32 changes: 15 additions & 17 deletions src/components/react_canvas/line_geometries.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { animated, Spring } from 'react-spring/renderprops-konva';
import { LegendItem } from '../../lib/series/legend';
import { getGeometryStyle, LineGeometry, PointGeometry } from '../../lib/series/rendering';
import { LineSeriesStyle, SharedGeometryStyle } from '../../lib/themes/theme';
import { GlobalKonvaElementProps } from './globals';

interface LineGeometriesDataProps {
animated?: boolean;
Expand Down Expand Up @@ -55,7 +56,7 @@ export class LineGeometries extends React.PureComponent<
}

private renderPoints = (linePoints: PointGeometry[], i: number): JSX.Element[] => {
const { radius, stroke, strokeWidth, opacity } = this.props.style.point;
const { radius, strokeWidth, opacity } = this.props.style.point;

return linePoints.map((areaPoint, index) => {
const { x, y, color, transform } = areaPoint;
Expand All @@ -69,14 +70,12 @@ export class LineGeometries extends React.PureComponent<
x={x}
y={y}
radius={radius}
stroke={color}
strokeWidth={strokeWidth}
strokeEnabled={strokeWidth !== 0}
stroke={color}
fill={'white'}
opacity={opacity}
strokeHitEnabled={false}
listening={false}
perfectDrawEnabled={false}
{...GlobalKonvaElementProps}
/>
)}
</Spring>
Expand All @@ -89,13 +88,12 @@ export class LineGeometries extends React.PureComponent<
x={transform.x + x}
y={y}
radius={radius}
stroke={color}
strokeWidth={strokeWidth}
stroke={stroke}
fill={color}
strokeEnabled={strokeWidth !== 0}
fill={'white'}
opacity={opacity}
strokeHitEnabled={false}
listening={false}
perfectDrawEnabled={false}
{...GlobalKonvaElementProps}
/>
);
}
Expand All @@ -120,15 +118,15 @@ export class LineGeometries extends React.PureComponent<
<Spring native reset from={{ opacity: 0 }} to={{ opacity: 1 }}>
{(props: { opacity: number }) => (
<animated.Path
opacity={props.opacity}
key="line"
key={`line-${i}`}
data={line}
strokeWidth={strokeWidth}
stroke={color}
listening={false}
strokeWidth={strokeWidth}
opacity={props.opacity}
lineCap="round"
lineJoin="round"
{...geometryStyle}
{...GlobalKonvaElementProps}
/>
)}
</Spring>
Expand All @@ -137,14 +135,14 @@ export class LineGeometries extends React.PureComponent<
} else {
return (
<Path
key={i}
key={`line-${i}`}
data={line}
strokeWidth={strokeWidth}
stroke={color}
listening={false}
strokeWidth={strokeWidth}
lineCap="round"
lineJoin="round"
{...geometryStyle}
{...GlobalKonvaElementProps}
/>
);
}
Expand Down
10 changes: 7 additions & 3 deletions src/components/react_canvas/reactive_chart.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -299,7 +299,7 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
}}
{...brushProps}
>
<Layer hitGraphEnabled={false} {...gridClippings}>
<Layer hitGraphEnabled={false} listening={false} {...gridClippings}>
{this.renderGrids()}
</Layer>

Expand All @@ -315,14 +315,18 @@ class Chart extends React.Component<ReactiveChartProps, ReactiveChartState> {
{this.renderAreaSeries()}
{this.renderLineSeries()}
</Layer>
<Layer hitGraphEnabled={false}>{debug && this.renderDebugChartBorders()}</Layer>
<Layer hitGraphEnabled={false} listening={false}>
{debug && this.renderDebugChartBorders()}
</Layer>
{isBrushEnabled && (
<Layer hitGraphEnabled={false} listening={false}>
{this.renderBrushTool()}
</Layer>
)}

<Layer hitGraphEnabled={false}>{this.renderAxes()}</Layer>
<Layer hitGraphEnabled={false} listening={false}>
{this.renderAxes()}
</Layer>
</Stage>
</div>
);
Expand Down

0 comments on commit 6f12067

Please sign in to comment.