Skip to content

Commit

Permalink
feat(elder-ray): allowing stroke dash to be set on the zero line
Browse files Browse the repository at this point in the history
Added strokeOpacity for consistency.
Added straightLineStrokeDasharray.
  • Loading branch information
markmcdowell committed Sep 12, 2019
1 parent fb96940 commit 71e9a9b
Showing 1 changed file with 27 additions and 18 deletions.
45 changes: 27 additions & 18 deletions packages/charts/src/series/ElderRaySeries.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,50 @@
import * as React from "react";

import { strokeDashTypes } from "../utils";
import { OverlayBarSeries } from "./OverlayBarSeries";
import { StraightLine } from "./StraightLine";

interface ElderRaySeriesProps {
readonly bearPowerFill?: string;
readonly bullPowerFill?: string;
readonly className?: string;
readonly yAccessor: any; // func
readonly opacity?: number;
readonly clip?: boolean;
readonly stroke?: boolean;
readonly bullPowerFill?: string;
readonly bearPowerFill?: string;
readonly strokeOpacity?: number;
readonly straightLineStroke?: string;
readonly straightLineOpacity?: number;
readonly straightLineStrokeDasharray?: strokeDashTypes;
readonly widthRatio?: number;
readonly clip?: boolean;
readonly yAccessor: (data: any) => { bearPower: number, bullPower: number };
}

export class ElderRaySeries extends React.Component<ElderRaySeriesProps> {

public static defaultProps = {
bearPowerFill: "#ef5350",
bullPowerFill: "#26a69a",
className: "react-financial-charts-elderray-series",
straightLineStroke: "#000000",
straightLineOpacity: 0.3,
opacity: 0.5,
clip: true,
opacity: 0.7,
stroke: true,
bullPowerFill: "#6BA583",
bearPowerFill: "#FF0000",
strokeOpacity: 0.7,
straightLineStroke: "#000000",
straightLineStrokeDasharray: "Dash",
straightLineOpacity: 0.7,
widthRatio: 0.8,
clip: true,
};

public render() {
const { className, opacity, stroke,
const {
className,
clip,
stroke,
strokeOpacity,
straightLineStroke,
straightLineStrokeDasharray,
straightLineOpacity,
widthRatio,
} = this.props;
const { clip } = this.props;

return (
<g className={className}>
Expand All @@ -45,35 +53,36 @@ export class ElderRaySeries extends React.Component<ElderRaySeriesProps> {
className="react-financial-charts-elderray-bar"
stroke={stroke}
fill={this.fillForEachBar}
opacity={opacity}
opacity={strokeOpacity}
widthRatio={widthRatio}
clip={clip}
yAccessor={[this.yAccessorBullTop, this.yAccessorBearTop, this.yAccessorBullBottom, this.yAccessorBearBottom]} />
<StraightLine
className="react-financial-charts-elderray-straight-line"
yValue={0}
stroke={straightLineStroke}
strokeDasharray={straightLineStrokeDasharray}
opacity={straightLineOpacity} />
</g>
);
}

private readonly yAccessorBullTop = (d) => {
private readonly yAccessorBullTop = (d: any) => {
const { yAccessor } = this.props;
return yAccessor(d) && (yAccessor(d).bullPower > 0 ? yAccessor(d).bullPower : undefined);
}

private readonly yAccessorBearTop = (d) => {
private readonly yAccessorBearTop = (d: any) => {
const { yAccessor } = this.props;
return yAccessor(d) && (yAccessor(d).bearPower > 0 ? yAccessor(d).bearPower : undefined);
}

private readonly yAccessorBullBottom = (d) => {
private readonly yAccessorBullBottom = (d: any) => {
const { yAccessor } = this.props;
return yAccessor(d) && (yAccessor(d).bullPower < 0 ? 0 : undefined);
}

private readonly yAccessorBearBottom = (d) => {
private readonly yAccessorBearBottom = (d: any) => {
const { yAccessor } = this.props;
return yAccessor(d) && (yAccessor(d).bullPower < 0
|| yAccessor(d).bullPower * yAccessor(d).bearPower < 0 // bullPower is +ve and bearPower is -ve
Expand Down

0 comments on commit 71e9a9b

Please sign in to comment.