react-stockcharts
react-stockcharts copied to clipboard
ScatterSeries bug - not using functor in stroke and fill
Problem appears when you call Scatter Series this way:
<ScatterSeries yAccessor={d=>d.y}
marker={CircleMarker}
markerProps={{
r: 3,
opacity: 0.4,
stroke: d=>(d.y > 5 ? '#b213ff' : '#13b2ff') // <-- here's functor for stroke
}}/>
Stroke (and fill) functors are applied to datums here: https://github.com/rrag/react-stockcharts/blob/master/src/lib/series/ScatterSeries.js#L80
and here it is forgotten: https://github.com/rrag/react-stockcharts/blob/master/src/lib/series/ScatterSeries.js#L34
renderSVG(moreProps) {
//...
const points = helper(this.props, moreProps, xAccessor);
return <g className={className}>
{points.map((point, idx) => {
// `point` contains stroke and fill with already applied function call
// and markerProps still contain possible functors
const { marker: Marker } = point; // <-- stroke, fill are ignored here
return <Marker key={idx} {...markerProps} point={point} />; //
// using this way - `<circle>` marker will get stroke===functor ((d)=>...), which is error.
})}
</g>;
}
So the solutions will be next:
const { marker: Marker, stroke, fill, ...restPointData} = point;
return <Marker key={idx} {...markerProps} stroke={stroke} fill={fill} point={restPointData} />;