react-financial-charts
Version:
React charts specific to finance.
71 lines • 3.23 kB
JavaScript
import { group } from "d3-array";
import * as React from "react";
import GenericChartComponent from "../GenericChartComponent";
import { getAxisCanvas } from "../GenericComponent";
import { colorToRGBA, functor } from "../utils";
export class ScatterSeries extends React.Component {
constructor() {
super(...arguments);
this.renderSVG = (moreProps) => {
const { className, markerProps } = this.props;
const { xAccessor } = moreProps;
const points = this.helper(this.props, moreProps, xAccessor);
return (React.createElement("g", { className: className }, points.map((point, idx) => {
const { marker: Marker } = point;
return React.createElement(Marker, Object.assign({ key: idx }, markerProps, { point: point }));
})));
};
this.drawOnCanvas = (ctx, moreProps) => {
const { xAccessor } = moreProps;
const points = this.helper(this.props, moreProps, xAccessor);
this.drawOnCanvasHelper(ctx, this.props, points);
};
this.helper = (props, moreProps, xAccessor) => {
const { yAccessor, markerProvider, markerProps } = props;
let { marker: Marker } = props;
const { xScale, chartConfig: { yScale }, plotData } = moreProps;
if (!(markerProvider || Marker)) {
throw new Error("required prop, either marker or markerProvider missing");
}
return plotData.map((d) => {
if (markerProvider) {
Marker = markerProvider(d);
}
const mProps = Object.assign(Object.assign({}, Marker.defaultProps), markerProps);
const fill = functor(mProps.fill);
const stroke = functor(mProps.stroke);
return {
x: xScale(xAccessor(d)),
y: yScale(yAccessor(d)),
fill: colorToRGBA(fill(d), mProps.opacity),
stroke: stroke(d),
datum: d,
marker: Marker,
};
});
};
this.drawOnCanvasHelper = (ctx, props, points) => {
const { markerProps } = props;
// @ts-ignore
const nest = group(points, (d) => d.fill, (d) => d.stroke);
nest.forEach((fillValues, fillKey) => {
if (fillKey !== "none") {
ctx.fillStyle = fillKey;
}
fillValues.forEach((strokeValues) => {
strokeValues.forEach((point) => {
const { marker } = point;
marker.drawOnCanvas(Object.assign(Object.assign(Object.assign({}, marker.defaultProps), markerProps), { fill: fillKey }), point, ctx);
});
});
});
};
}
render() {
return (React.createElement(GenericChartComponent, { svgDraw: this.renderSVG, canvasDraw: this.drawOnCanvas, canvasToDraw: getAxisCanvas, drawOn: ["pan"] }));
}
}
ScatterSeries.defaultProps = {
className: "react-financial-charts-scatter",
};
//# sourceMappingURL=ScatterSeries.js.map