UNPKG

react-financial-charts

Version:
71 lines 3.23 kB
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