Skip to content

Commit

Permalink
feat(charts): default tooltip value can be changed
Browse files Browse the repository at this point in the history 
Currently tooltips default to "n/a", this can now be changed by
using the displayInit prop.
  • Loading branch information
@markmcdowell
markmcdowell committed Jan 7, 2020
1 parent 0fd9c08 commit f19ec61
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 71 deletions.
30 changes: 20 additions & 10 deletions packages/charts/src/tooltip/BollingerBandTooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
interface BollingerBandTooltipProps {
readonly className?: string;
readonly displayFormat: any; // Func
readonly displayInit?: string;
readonly displayValuesFor?: any; // Func
readonly fontFamily?: string;
readonly fontSize?: number;
Expand All @@ -33,6 +34,7 @@ export class BollingerBandTooltip extends React.Component<BollingerBandTooltipPr
className: "react-financial-charts-tooltip react-financial-charts-bollingerband-tooltip",
displayFormat: format(".2f"),
displayValuesFor: defaultDisplayValuesFor,
displayInit: "n/a",
origin: [8, 8],
yAccessor: (data: any) => data.bb,
};
Expand All @@ -49,7 +51,7 @@ export class BollingerBandTooltip extends React.Component<BollingerBandTooltipPr

private readonly renderSVG = (moreProps) => {
const { onClick, displayFormat, yAccessor, options, textFill, labelFill } = this.props;
const { displayValuesFor } = this.props;
const { displayValuesFor, displayInit } = this.props;

const { chartConfig: { width, height } } = moreProps;

Expand All @@ -58,10 +60,9 @@ export class BollingerBandTooltip extends React.Component<BollingerBandTooltipPr
let top;
let middle;
let bottom;
top = middle = bottom = "n/a";
top = middle = bottom = displayInit;

if (isDefined(currentItem)
&& isDefined(yAccessor(currentItem))) {
if (isDefined(currentItem) && isDefined(yAccessor(currentItem))) {
const item = yAccessor(currentItem);
top = displayFormat(item.top);
middle = displayFormat(item.middle);
Expand All @@ -77,12 +78,21 @@ export class BollingerBandTooltip extends React.Component<BollingerBandTooltipPr
const tooltipValue = `${top}, ${middle}, ${bottom}`;

return (
<g transform={`translate(${x}, ${y})`}
className={this.props.className} onClick={onClick}>
<ToolTipText x={0} y={0}
fontFamily={this.props.fontFamily} fontSize={this.props.fontSize}>
<ToolTipTSpanLabel fill={labelFill}>{tooltipLabel}</ToolTipTSpanLabel>
<tspan fill={textFill}>{tooltipValue}</tspan>
<g
transform={`translate(${x}, ${y})`}
className={this.props.className}
onClick={onClick}>
<ToolTipText
x={0}
y={0}
fontFamily={this.props.fontFamily}
fontSize={this.props.fontSize}>
<ToolTipTSpanLabel fill={labelFill}>
{tooltipLabel}
</ToolTipTSpanLabel>
<tspan fill={textFill}>
{tooltipValue}
</tspan>
</ToolTipText>
</g>
);
Expand Down
24 changes: 13 additions & 11 deletions packages/charts/src/tooltip/GroupTooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,27 +7,28 @@ import { ToolTipText } from "./ToolTipText";

interface GroupTooltipProps {
readonly className?: string;
readonly layout: layouts;
readonly position: "topRight" | "bottomLeft" | "bottomRight";
readonly fontFamily?: string;
readonly fontSize?: number;
readonly displayFormat: any; // func
readonly origin: number[];
readonly displayInit?: string;
readonly displayValuesFor: any; // func
readonly labelFill?: string;
readonly layout: layouts;
readonly onClick?: ((event: React.MouseEvent<SVGGElement, MouseEvent>) => void);
readonly fontFamily?: string;
readonly fontSize?: number;
readonly width?: number; // "width" only be used, if layout is "horizontal" or "horizontalRows".
readonly verticalSize?: number; // "verticalSize" only be used, if layout is "vertical", "verticalRows".
readonly options: Array<{
labelFill?: string;
yLabel: string | any; // func
yAccessor: any;
valueFill?: string;
withShape?: boolean;
}>;
readonly yAccessor: any; // func
readonly labelFill?: string;
readonly origin: number[];
readonly position: "topRight" | "bottomLeft" | "bottomRight";
readonly valueFill?: string;
readonly verticalSize?: number; // "verticalSize" only be used, if layout is "vertical", "verticalRows".
readonly width?: number; // "width" only be used, if layout is "horizontal" or "horizontalRows".
readonly withShape: boolean; // "withShape" is ignored, if layout is "horizontalInline" or "vertical".
readonly yAccessor: any; // func
}

export class GroupTooltip extends React.Component<GroupTooltipProps> {
Expand All @@ -36,6 +37,7 @@ export class GroupTooltip extends React.Component<GroupTooltipProps> {
className: "react-financial-charts-tooltip react-financial-charts-group-tooltip",
layout: "horizontal",
displayFormat: format(".2f"),
displayInit: "n/a",
displayValuesFor: defaultDisplayValuesFor,
origin: [0, 0],
width: 60,
Expand Down Expand Up @@ -89,7 +91,7 @@ export class GroupTooltip extends React.Component<GroupTooltipProps> {
const { displayValuesFor } = this.props;
const { chartId } = moreProps;

const { className, onClick, width = 60, verticalSize = 13, fontFamily, fontSize, layout } = this.props;
const { className, displayInit, onClick, width = 60, verticalSize = 13, fontFamily, fontSize, layout } = this.props;
const { origin, displayFormat, options } = this.props;
const currentItem = displayValuesFor(this.props, moreProps);
const { xyPos, textAnchor } = this.getPosition(moreProps);
Expand All @@ -100,7 +102,7 @@ export class GroupTooltip extends React.Component<GroupTooltipProps> {
const singleTooltip = options.map((each, idx) => {

const yValue = currentItem && each.yAccessor(currentItem);
const yDisplayValue = yValue ? displayFormat(yValue) : "n/a";
const yDisplayValue = yValue ? displayFormat(yValue) : displayInit;

const orig = () => {
if (layout === "horizontal" || layout === "horizontalRows") {
Expand Down
10 changes: 6 additions & 4 deletions packages/charts/src/tooltip/MACDTooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ interface MACDTooltipProps {
},
};
readonly displayFormat: any; // func
readonly displayInit?: string;
readonly displayValuesFor: any; // func
readonly onClick?: any; // func
}
Expand All @@ -39,6 +40,7 @@ export class MACDTooltip extends React.Component<MACDTooltipProps> {
public static defaultProps = {
className: "react-financial-charts-tooltip",
displayFormat: format(".2f"),
displayInit: "n/a",
displayValuesFor: defaultDisplayValuesFor,
origin: [0, 0],
};
Expand All @@ -54,7 +56,7 @@ export class MACDTooltip extends React.Component<MACDTooltipProps> {
}

private readonly renderSVG = (moreProps) => {
const { onClick, fontFamily, fontSize, displayFormat, className } = this.props;
const { onClick, displayInit, fontFamily, fontSize, displayFormat, className } = this.props;
const { yAccessor, options, appearance, labelFill } = this.props;
const { displayValuesFor } = this.props;

Expand All @@ -63,9 +65,9 @@ export class MACDTooltip extends React.Component<MACDTooltipProps> {
const currentItem = displayValuesFor(this.props, moreProps);
const macdValue = currentItem && yAccessor(currentItem);

const macd = (macdValue && macdValue.macd && displayFormat(macdValue.macd)) || "n/a";
const signal = (macdValue && macdValue.signal && displayFormat(macdValue.signal)) || "n/a";
const divergence = (macdValue && macdValue.divergence && displayFormat(macdValue.divergence)) || "n/a";
const macd = (macdValue && macdValue.macd && displayFormat(macdValue.macd)) || displayInit;
const signal = (macdValue && macdValue.signal && displayFormat(macdValue.signal)) || displayInit;
const divergence = (macdValue && macdValue.divergence && displayFormat(macdValue.divergence)) || displayInit;

const { origin: originProp } = this.props;
const origin = functor(originProp);
Expand Down
65 changes: 35 additions & 30 deletions packages/charts/src/tooltip/MovingAverageTooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,31 +10,38 @@ import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";
import { functor } from "../utils";

interface SingleMAToolTipProps {
readonly origin: number[];
readonly color: string;
readonly displayName: string;
readonly value: string;
readonly onClick?: ((details: any, event: React.MouseEvent<SVGRectElement, MouseEvent>) => void);
readonly fontFamily?: string;
readonly textFill?: string;
readonly labelFill?: string;
readonly fontSize?: number;
readonly forChart: number | string;
readonly labelFill?: string;
readonly onClick?: ((details: any, event: React.MouseEvent<SVGRectElement, MouseEvent>) => void);
readonly options: any;
readonly origin: number[];
readonly textFill?: string;
readonly value: string;
}

export class SingleMAToolTip extends React.Component<SingleMAToolTipProps> {

public render() {
const { textFill, labelFill } = this.props;
const { color, displayName, fontSize, fontFamily, textFill, labelFill, value } = this.props;
const translate = "translate(" + this.props.origin[0] + ", " + this.props.origin[1] + ")";
return (
<g transform={translate}>
<line x1={0} y1={2} x2={0} y2={28} stroke={this.props.color} strokeWidth="4px" />
<ToolTipText x={5} y={11}
fontFamily={this.props.fontFamily} fontSize={this.props.fontSize}>
<ToolTipTSpanLabel fill={labelFill}>{this.props.displayName}</ToolTipTSpanLabel>
<tspan x="5" dy="15" fill={textFill}>{this.props.value}</tspan>
<line x1={0} y1={2} x2={0} y2={28} stroke={color} strokeWidth={4} />
<ToolTipText
x={5}
y={11}
fontFamily={fontFamily}
fontSize={fontSize}>
<ToolTipTSpanLabel fill={labelFill}>
{displayName}
</ToolTipTSpanLabel>
<tspan x={5} dy={15} fill={textFill}>
{value}
</tspan>
</ToolTipText>
<rect
x={0}
Expand All @@ -58,17 +65,18 @@ export class SingleMAToolTip extends React.Component<SingleMAToolTipProps> {
}

interface MovingAverageTooltipProps {
className?: string;
displayFormat: any; // func
origin: number[];
displayValuesFor?: any; // func
onClick?: ((event: React.MouseEvent<SVGRectElement, MouseEvent>) => void);
textFill?: string;
labelFill?: string;
fontFamily?: string;
fontSize?: number;
width?: number;
options: Array<{
readonly className?: string;
readonly displayFormat: any; // func
readonly origin: number[];
readonly displayInit?: string;
readonly displayValuesFor?: any; // func
readonly onClick?: ((event: React.MouseEvent<SVGRectElement, MouseEvent>) => void);
readonly textFill?: string;
readonly labelFill?: string;
readonly fontFamily?: string;
readonly fontSize?: number;
readonly width?: number;
readonly options: Array<{
yAccessor: any; // func
type: string;
stroke: string;
Expand All @@ -83,6 +91,7 @@ export class MovingAverageTooltip extends React.Component<MovingAverageTooltipPr
public static defaultProps = {
className: "react-financial-charts-tooltip react-financial-charts-moving-average-tooltip",
displayFormat: format(".2f"),
displayInit: "n/a",
displayValuesFor: defaultDisplayValuesFor,
origin: [0, 10],
width: 65,
Expand All @@ -99,14 +108,10 @@ export class MovingAverageTooltip extends React.Component<MovingAverageTooltipPr
}

private readonly renderSVG = (moreProps) => {
const { displayValuesFor } = this.props;

const { chartId } = moreProps;
const { chartConfig } = moreProps;
const { chartId, chartConfig, chartConfig: { height } } = moreProps;

const { className, onClick, width = 65, fontFamily, fontSize, textFill, labelFill } = this.props;
const { origin: originProp, displayFormat, options } = this.props;
const { chartConfig: { height } } = moreProps;
const { className, displayInit, onClick, width = 65, fontFamily, fontSize, textFill, labelFill } = this.props;
const { origin: originProp, displayFormat, displayValuesFor, options } = this.props;

const currentItem = displayValuesFor(this.props, moreProps);
const config = chartConfig;
Expand All @@ -122,7 +127,7 @@ export class MovingAverageTooltip extends React.Component<MovingAverageTooltipPr
const yValue = currentItem && each.yAccessor(currentItem);

const tooltipLabel = `${each.type} (${each.windowSize})`;
const yDisplayValue = yValue ? displayFormat(yValue) : "n/a";
const yDisplayValue = yValue ? displayFormat(yValue) : displayInit;
return (
<SingleMAToolTip
key={idx}
Expand Down
25 changes: 13 additions & 12 deletions packages/charts/src/tooltip/RSITooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,27 @@ import { ToolTipText } from "./ToolTipText";
import { ToolTipTSpanLabel } from "./ToolTipTSpanLabel";

interface RSITooltipProps {
readonly origin: number[] | any; // func
readonly options: {
windowSize: number;
};
readonly className?: string;
readonly displayFormat: any; // func
readonly displayInit?: string;
readonly displayValuesFor?: any; // func
readonly fontFamily?: string;
readonly fontSize?: number;
readonly labelFill?: string;
readonly onClick?: ((event: React.MouseEvent<SVGGElement, MouseEvent>) => void);
readonly yAccessor: any; // func
readonly displayFormat: any; // func
readonly displayValuesFor?: any; // func
readonly origin: number[] | any; // func
readonly options: {
windowSize: number;
};
readonly textFill?: string;
readonly labelFill?: string;
readonly yAccessor: any; // func
}

export class RSITooltip extends React.Component<RSITooltipProps> {

public static defaultProps = {
displayFormat: format(".2f"),
displayInit: "n/a",
displayValuesFor: defaultDisplayValuesFor,
origin: [0, 0],
className: "react-financial-charts-tooltip",
Expand All @@ -43,15 +45,14 @@ export class RSITooltip extends React.Component<RSITooltipProps> {
}

private readonly renderSVG = (moreProps) => {
const { onClick, fontFamily, fontSize, yAccessor, displayFormat, className } = this.props;
const { options, labelFill, textFill } = this.props;
const { displayValuesFor } = this.props;
const { onClick, displayInit, fontFamily, fontSize, yAccessor, displayFormat, className } = this.props;
const { options, labelFill, textFill, displayValuesFor } = this.props;

const { chartConfig: { width, height } } = moreProps;

const currentItem = displayValuesFor(this.props, moreProps);
const rsi = isDefined(currentItem) && yAccessor(currentItem);
const value = (rsi && displayFormat(rsi)) || "n/a";
const value = (rsi && displayFormat(rsi)) || displayInit;

const { origin: originProp } = this.props;
const origin = functor(originProp);
Expand Down
9 changes: 5 additions & 4 deletions packages/charts/src/tooltip/StochasticTooltip.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ interface StochasticTooltipProps {
},
};
readonly displayFormat: any; // func
readonly displayInit?: string;
readonly displayValuesFor?: any; // func
readonly label: string;
}
Expand All @@ -36,6 +37,7 @@ export class StochasticTooltip extends React.Component<StochasticTooltipProps> {

public static defaultProps = {
displayFormat: format(".2f"),
displayInit: "n/a",
displayValuesFor: defaultDisplayValuesFor,
origin: [0, 0],
className: "react-financial-charts-tooltip",
Expand All @@ -54,16 +56,15 @@ export class StochasticTooltip extends React.Component<StochasticTooltipProps> {

private readonly renderSVG = (moreProps) => {
const { onClick, fontFamily, fontSize, yAccessor, displayFormat, label } = this.props;
const { className, options, appearance, labelFill } = this.props;
const { displayValuesFor } = this.props;
const { className, displayInit, displayValuesFor, options, appearance, labelFill } = this.props;
const { chartConfig: { width, height } } = moreProps;

const currentItem = displayValuesFor(this.props, moreProps);
const { stroke } = appearance;
const stochastic = currentItem && yAccessor(currentItem);

const K = (stochastic && stochastic.K && displayFormat(stochastic.K)) || "n/a";
const D = (stochastic && stochastic.D && displayFormat(stochastic.D)) || "n/a";
const K = (stochastic && stochastic.K && displayFormat(stochastic.K)) || displayInit;
const D = (stochastic && stochastic.D && displayFormat(stochastic.D)) || displayInit;

const { origin: originProp } = this.props;
const origin = functor(originProp);
Expand Down

0 comments on commit f19ec61

Please sign in to comment.