react-financial-charts
Version:
React charts specific to finance.
76 lines • 3.8 kB
JavaScript
import * as React from "react";
import { AreaSeries } from "./AreaSeries";
import { SVGComponent } from "./SVGComponent";
export class AlternatingFillAreaSeries extends React.Component {
constructor() {
super(...arguments);
this.clipPathId1 = `alternating-area-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
this.clipPathId2 = `alternating-area-clip-${String(Math.round(Math.random() * 10000 * 10000))}`;
this.baseAt = (yScale) => {
return yScale(this.props.baseAt);
};
this.renderClip = (moreProps) => {
const { chartConfig } = moreProps;
const { baseAt } = this.props;
const { yScale, width, height } = chartConfig;
return (React.createElement("defs", null,
React.createElement("clipPath", { id: this.clipPathId1 },
React.createElement("rect", { x: 0, y: 0, width: width, height: yScale(baseAt) })),
React.createElement("clipPath", { id: this.clipPathId2 },
React.createElement("rect", { x: 0, y: yScale(baseAt), width: width, height: height - yScale(baseAt) }))));
};
this.bottomClip = (ctx, moreProps) => {
const { chartConfig } = moreProps;
const { baseAt } = this.props;
const { yScale, width, height } = chartConfig;
ctx.beginPath();
ctx.rect(0, yScale(baseAt), width, height - yScale(baseAt));
ctx.clip();
};
this.topClip = (ctx, moreProps) => {
const { chartConfig } = moreProps;
const { baseAt } = this.props;
const { yScale, width } = chartConfig;
ctx.beginPath();
ctx.rect(0, 0, width, yScale(baseAt));
ctx.clip();
};
}
render() {
const { className, yAccessor, interpolation, stroke = AlternatingFillAreaSeries.defaultProps.stroke, strokeWidth = AlternatingFillAreaSeries.defaultProps.strokeWidth, strokeOpacity = AlternatingFillAreaSeries.defaultProps.strokeOpacity, strokeDasharray = AlternatingFillAreaSeries.defaultProps.strokeDasharray, fill = AlternatingFillAreaSeries.defaultProps.fill, fillOpacity = AlternatingFillAreaSeries.defaultProps.fillOpacity, } = this.props;
const style1 = { clipPath: `url(#${this.clipPathId1})` };
const style2 = { clipPath: `url(#${this.clipPathId2})` };
return (React.createElement("g", { className: className },
React.createElement(SVGComponent, null, this.renderClip),
React.createElement(AreaSeries, { style: style1, canvasClip: this.topClip, yAccessor: yAccessor, interpolation: interpolation, baseAt: this.baseAt, fill: fill.top, opacity: fillOpacity.top, stroke: stroke.top, strokeOpacity: strokeOpacity.top, strokeDasharray: strokeDasharray.top, strokeWidth: strokeWidth.top }),
React.createElement(AreaSeries, { style: style2, canvasClip: this.bottomClip, yAccessor: yAccessor, interpolation: interpolation, baseAt: this.baseAt, fill: fill.bottom, opacity: fillOpacity.bottom, stroke: stroke.bottom, strokeOpacity: strokeOpacity.bottom, strokeDasharray: strokeDasharray.bottom, strokeWidth: strokeWidth.bottom })));
}
}
AlternatingFillAreaSeries.defaultProps = {
className: "react-financial-charts-alternating-area",
fill: {
top: "#26a69a",
bottom: "#ef5350",
},
fillOpacity: {
top: 0.1,
bottom: 0.1,
},
stroke: {
top: "#26a69a",
bottom: "#ef5350",
},
strokeWidth: {
top: 2,
bottom: 2,
},
strokeOpacity: {
top: 1,
bottom: 1,
},
strokeDasharray: {
top: "Solid",
bottom: "Solid",
},
};
//# sourceMappingURL=AlternatingFillAreaSeries.js.map