Skip to content

Commit

Permalink
Merge pull request #1295 from FormidableLabs/feature-labelsCandlestick
Browse files Browse the repository at this point in the history 
add diff labels and orientation support
  • Loading branch information
@boygirl
boygirl authored Apr 22, 2019
2 parents d37fe4a + 5ccb0a9 commit dcfa586
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 47 deletions.
2 changes: 1 addition & 1 deletion packages/victory-box-plot/src/helper-methods.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -288,7 +288,7 @@ const getLabelProps = (props, text, type) => {
text,
datum,
index,
orientation: labelOrientation,
orientation,
style: labelStyle,
y: horizontal ? getDefaultPosition("y") : positions[type],
x: horizontal ? positions[type] : getDefaultPosition("x"),
Expand Down
17 changes: 15 additions & 2 deletions packages/victory-candlestick/src/candle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import React from "react";
import PropTypes from "prop-types";
import { Helpers, CommonProps, Rect, Line } from "victory-core";
import { assign, defaults } from "lodash";
import { assign, defaults, isFunction } from "lodash";

export default class Candle extends React.Component {
static propTypes = {
Expand All @@ -28,8 +28,21 @@ export default class Candle extends React.Component {
rectComponent: <Rect />
};

getCandleWidth(props, style) {
const { active, datum, candleWidth } = props;
if (candleWidth) {
return isFunction(candleWidth)
? Helpers.evaluateProp(candleWidth, datum, active)
: candleWidth;
} else if (style.width) {
return style.width;
}
return candleWidth;
}

getCandleProps(props, style) {
const { id, x, close, open, horizontal, candleWidth } = props;
const { id, x, close, open, horizontal } = props;
const candleWidth = this.getCandleWidth(props, style);
const candleLength = Math.abs(close - open);
return {
key: `${id}-candle`,
Expand Down
68 changes: 33 additions & 35 deletions packages/victory-candlestick/src/helper-methods.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,9 +127,9 @@ const getText = (props, type) => {
};

const getCandleWidth = (props, style) => {
const { active, datum, data, candleWidth, scale, defaultCandleWidth } = props;
const { datum, data, candleWidth, scale, defaultCandleWidth } = props;
if (candleWidth) {
return isFunction(candleWidth) ? Helpers.evaluateProp(candleWidth, datum, active) : candleWidth;
return isFunction(candleWidth) ? Helpers.evaluateProp(candleWidth, datum) : candleWidth;
} else if (style && style.width) {
return style.width;
}
Expand All @@ -145,7 +145,7 @@ const getOrientation = (labelOrientation, type) =>
(typeof labelOrientation === "object" && labelOrientation[type]) || labelOrientation;

/* eslint-disable complexity*/
const calculateAxisValues = (props) => {
const calculatePlotValues = (props) => {
const { positions, labelStyle, x, horizontal, computedType, candleWidth, orientation } = props;
positions.labels = (positions.open + positions.close) / 2;

Expand Down Expand Up @@ -180,7 +180,7 @@ const calculateAxisValues = (props) => {
/* eslint-enable complexity*/

/* eslint-disable max-params*/
const getLabelProps = (dataProps, text, style, type) => {
const getLabelProps = (props, text, style, type) => {
const {
x,
high,
Expand All @@ -194,7 +194,7 @@ const getLabelProps = (dataProps, text, style, type) => {
horizontal,
candleWidth,
labelOrientation
} = dataProps;
} = props;

const orientation = getOrientation(labelOrientation, type);
const positions = { high, low, open, close };
Expand All @@ -204,7 +204,7 @@ const getLabelProps = (dataProps, text, style, type) => {
const defaultTextAnchors = { left: "end", right: "start", top: "middle", bottom: "middle" };
const computedType = type ? type : "labels";

const axisProps = {
const plotProps = {
positions,
labelStyle,
x,
Expand All @@ -213,7 +213,7 @@ const getLabelProps = (dataProps, text, style, type) => {
candleWidth,
orientation
};
const { yValue, xValue } = calculateAxisValues(axisProps);
const { yValue, xValue } = calculatePlotValues(plotProps);

return {
style: labelStyle,
Expand All @@ -224,7 +224,7 @@ const getLabelProps = (dataProps, text, style, type) => {
scale,
datum,
data,
orientation: labelOrientation,
orientation,
textAnchor: labelStyle.textAnchor || defaultTextAnchors[orientation],
verticalAnchor: labelStyle.verticalAnchor || defaultVerticalAnchors[orientation],
angle: labelStyle.angle,
Expand Down Expand Up @@ -281,31 +281,29 @@ const getBaseProps = (props, fallbackProps) => {
const open = scale.y(datum._open);
const low = scale.y(datum._low);
const dataStyle = getDataStyles(datum, style.data, props);
const dataProps = defaults(
{
x,
high,
low,
candleWidth,
candleRatio,
scale,
data,
datum,
groupComponent,
index,
style: dataStyle,
width,
polar,
origin,
wickStrokeWidth,
open,
close,
horizontal,
labelOrientation
},
props
);
const dataProps = {
x,
high,
low,
candleWidth,
candleRatio,
scale,
data,
datum,
groupComponent,
index,
style: dataStyle,
width,
polar,
origin,
wickStrokeWidth,
open,
close,
horizontal,
labelOrientation
};
dataProps.candleWidth = getCandleWidth(dataProps);
const extendedProps = defaults(Object.assign({}, dataProps), props);

childProps[eventKey] = {
data: dataProps
Expand All @@ -314,19 +312,19 @@ const getBaseProps = (props, fallbackProps) => {
if (labels) {
const text = LabelHelpers.getText(props, datum, index);
if ((text !== undefined && text !== null) || (labels && (events || sharedEvents))) {
childProps[eventKey].labels = getLabelProps(dataProps, text, style);
childProps[eventKey].labels = getLabelProps(extendedProps, text, style);
}
}

TYPES.forEach((type) => {
const labelText = getText(dataProps, type);
const labelText = getText(extendedProps, type);
const labelProp = props.labels || props[`${type}Labels`];
if (
(labelText !== null && labelText !== undefined) ||
(labelProp && (events || sharedEvents))
) {
const target = `${type}Labels`;
childProps[eventKey][target] = getLabelProps(dataProps, labelText, style, type);
childProps[eventKey][target] = getLabelProps(extendedProps, labelText, style, type);
}
});

Expand Down
2 changes: 1 addition & 1 deletion packages/victory-candlestick/src/victory-candlestick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ class VictoryCandlestick extends React.Component {
openLabelComponent: PropTypes.element,
openLabels: PropTypes.oneOfType([PropTypes.func, PropTypes.array, PropTypes.bool]),
style: PropTypes.shape({
data: PropTypes.obeject,
data: PropTypes.object,
labels: PropTypes.object,
close: PropTypes.object,
closeLabels: PropTypes.object,
Expand Down
54 changes: 46 additions & 8 deletions stories/victory-candlestick.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,13 @@ import seedrandom from "seedrandom";
import { getChartDecorator } from "./decorators";
import { fromJS } from "immutable";

const sampleData = [
{ x: 1, open: 9, close: 30, high: 56, low: 7 },
{ x: 2, open: 80, close: 40, high: 120, low: 10 },
{ x: 3, open: 50, close: 80, high: 90, low: 20 },
{ x: 4, open: 70, close: 22, high: 70, low: 5 },
{ x: 5, open: 20, close: 35, high: 50, low: 10 }
];
const getTimeData = (num, seed) => {
seed = seed || "getTimeData";
const baseSeed = seedrandom(seed);
Expand Down Expand Up @@ -128,18 +135,18 @@ storiesOf("VictoryCandlestick.labels", module)
.add("function labels", () => (
<VictoryCandlestick data={getData(7)} labels={(d) => `x: ${d.x}`} />
))
.add("openLabels and closeLabels", () => (
<VictoryCandlestick data={sampleData} openLabels={(d) => d.open} closeLabels={(d) => d.close} />
))
.add("highLabels and lowLabels", () => (
<VictoryCandlestick data={sampleData} highLabels={(d) => d.high} lowLabels={(d) => d.low} />
))
.add("array labels", () => (
<VictoryCandlestick data={getData(7)} labels={["", "", "three", "four", 5, "six"]} />
))
.add("function labels with orientation", () => (
.add("labels with orientation", () => (
<VictoryCandlestick
data={[
{ x: 1, open: 9, close: 30, high: 56, low: 7 },
{ x: 2, open: 80, close: 40, high: 120, low: 10 },
{ x: 3, open: 50, close: 80, high: 90, low: 20 },
{ x: 4, open: 70, close: 22, high: 70, low: 5 },
{ x: 5, open: 20, close: 35, high: 50, low: 10 }
]}
data={sampleData}
openLabels={(d) => d.open}
labelOrientation={{ open: "top" }}
/>
Expand All @@ -154,6 +161,7 @@ storiesOf("VictoryCandlestick.labels", module)
{ x: 4, open: 70, close: 22, high: 70, low: 5 },
{ x: 5, open: 20, close: 35, high: 50, low: 10, label: ["last", "label"] }
]}
labels={(d) => d.label}
/>
));

Expand All @@ -174,6 +182,36 @@ storiesOf("VictoryCandlestick.tooltips", module)
labelComponent={<VictoryTooltip active />}
/>
))
.add("openLabels tooltips", () => (
<VictoryCandlestick
data={sampleData}
openLabels={(d) => d.open}
openLabelComponent={<VictoryTooltip active />}
labelOrientation="top"
/>
))
.add("closeLabels tooltips", () => (
<VictoryCandlestick
data={sampleData}
closeLabels={(d) => d.close}
closeLabelComponent={<VictoryTooltip active />}
labelOrientation={{ close: "left" }}
/>
))
.add("lowLabels tooltips", () => (
<VictoryCandlestick
data={sampleData}
lowLabels={(d) => d.low}
lowLabelComponent={<VictoryTooltip active />}
/>
))
.add("highLabels tooltips", () => (
<VictoryCandlestick
data={sampleData}
highLabels={(d) => d.high}
highLabelComponent={<VictoryTooltip active />}
/>
))
.add("tooltips with long and short strings", () => (
<VictoryCandlestick
data={getData(5)}
Expand Down

0 comments on commit dcfa586

Please sign in to comment.