rrag / react-stockcharts

Highly customizable stock charts with ReactJS and d3
http://rrag.github.io/react-stockcharts
MIT License
3.84k stars 956 forks source link

ScatterSeries bug - not using functor in stroke and fill #784

Open Boorj opened 3 years ago

Boorj commented 3 years ago

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} />;