Task/audit victory candlestick typescript props

demo/js/components/victory-candlestick-demo.js

@@ -131,7 +131,7 @@ export default class App extends React.Component {
           horizontal
           style={{ parent: style.parent }}
           labels={({ datum }) => `x: ${datum.x.getDate()}`}
-          labelOrientation={{ low: "left", high: "right", labels: "bottom" }}
+          labelOrientation={{ low: "left", high: "right" }}
           openLabels={({ datum }) => datum.open}
           closeLabels={({ datum }) => datum.close}
           lowLabels={({ datum }) => datum.low}

demo/ts/app.tsx

@@ -7,6 +7,7 @@ import AxisDemo from "./components/victory-axis-demo";
 import BarDemo from "./components/victory-bar-demo";
 import BoxPlotDemo from "./components/victory-box-plot-demo";
 import BrushLineDemo from "./components/victory-brush-line-demo";
+import CandlestickDemo from "./components/victory-candlestick-demo";
 import ChartDemo from "./components/victory-chart-demo";
 import LegendDemo from "./components/victory-legend-demo";
 import LineDemo from "./components/victory-line-demo";
@@ -21,6 +22,7 @@ const MAP = {
   "/bar": { component: BarDemo, name: "BarDemo" },
   "/box-plot": { component: BoxPlotDemo, name: "BoxPlotDemo" },
   "/brush-line": { component: BrushLineDemo, name: "BrushLineDemo" },
+  "/candlestick": { component: CandlestickDemo, name: "CandlestickDemo" },
   "/chart": { component: ChartDemo, name: "ChartDemo" },
   "/line": { component: LineDemo, name: "LineDemo" },
   "/tooltip": { component: TooltipDemo, name: "TooltipDemo" },

demo/ts/components/victory-candlestick-demo.tsx

@@ -0,0 +1,236 @@
+/*global window:false */
+/*eslint-disable no-magic-numbers */
+import React from "react";
+import { random, range, merge } from "lodash";
+import { VictoryChart } from "@packages/victory-chart";
+import { VictoryCandlestick } from "@packages/victory-candlestick";
+import { VictoryTheme } from "@packages/victory-core";
+
+interface VictoryCandlestickDemoState {
+  data: {
+    x?: number;
+    open?: number;
+    close?: number;
+    high?: number;
+    low?: number;
+    size?: number;
+    fill?: string;
+    opacity?: number;
+  }[];
+}
+
+const getData = () => {
+  const colors = [
+    "violet",
+    "cornflowerblue",
+    "gold",
+    "orange",
+    "turquoise",
+    "tomato",
+    "greenyellow"
+  ];
+  return range(50).map(() => {
+    return {
+      x: random(600),
+      open: random(600),
+      close: random(600),
+      high: random(450, 600),
+      low: random(0, 150),
+      size: random(15) + 3,
+      fill: colors[random(0, 6)],
+      opacity: random(0.3, 1)
+    };
+  });
+};
+
+const containerStyle: React.CSSProperties = {
+  display: "flex",
+  flexDirection: "row",
+  flexWrap: "wrap",
+  alignItems: "center",
+  justifyContent: "center"
+};
+
+const style: { [key: string]: React.CSSProperties } = {
+  parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" }
+};
+
+const data = [
+  { x: new Date(2016, 6, 1), open: 9, close: 30, high: 56, low: 7 },
+  { x: new Date(2016, 6, 2), open: 80, close: 40, high: 120, low: 10 },
+  { x: new Date(2016, 6, 3), open: 50, close: 80, high: 90, low: 20 },
+  { x: new Date(2016, 6, 4), open: 70, close: 22, high: 70, low: 5 }
+];
+
+export default class VictoryCandlestickDemo extends React.Component<
+  any,
+  VictoryCandlestickDemoState
+> {
+  setStateInterval?: number = undefined;
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      data: props.data
+    };
+  }
+
+  componentDidMount() {
+    /* eslint-disable react/no-did-mount-set-state */
+    this.setStateInterval = window.setInterval(() => {
+      this.setState({
+        data: getData()
+      });
+    }, 2000);
+  }
+
+  componentWillUnmount() {
+    window.clearInterval(this.setStateInterval);
+  }
+
+  render() {
+    return (
+      <div className="demo" style={containerStyle}>
+        <svg height={500} width={500}>
+          <VictoryCandlestick
+            style={{ data: { width: 10 }, parent: style.parent }}
+            labels={({ datum }) => `x: ${datum.x.getDate()}`}
+            labelOrientation={{ low: "bottom", high: "top" }}
+            openLabels={({ datum }) => datum.open}
+            closeLabels={({ datum }) => datum.close}
+            lowLabels={({ datum }) => datum.low}
+            highLabels={({ datum }) => datum.high}
+            data={data}
+            size={8}
+            standalone={false}
+            events={[
+              {
+                target: "highLabels",
+                eventHandlers: {
+                  onClick: () => {
+                    return [
+                      {
+                        mutation: (props) => {
+                          return {
+                            style: merge({}, props.style.labels, { fill: "orange" })
+                          };
+                        }
+                      }
+                    ];
+                  }
+                }
+              },
+              {
+                target: "data",
+                eventHandlers: {
+                  onClick: () => {
+                    return [
+                      {
+                        mutation: (props) => {
+                          return {
+                            style: merge({}, props.style, { fill: "blue" })
+                          };
+                        }
+                      }
+                    ];
+                  }
+                }
+              }
+            ]}
+          />
+        </svg>
+
+        <VictoryCandlestick
+          horizontal
+          style={{ parent: style.parent }}
+          labels={({ datum }) => `x: ${datum.x.getDate()}`}
+          labelOrientation={{ low: "left", high: "right" }}
+          openLabels={({ datum }) => datum.open}
+          closeLabels={({ datum }) => datum.close}
+          lowLabels={({ datum }) => datum.low}
+          highLabels={({ datum }) => datum.high}
+          data={data}
+          theme={VictoryTheme.material}
+          size={8}
+          events={[
+            {
+              target: "labels",
+              eventHandlers: {
+                onClick: () => {
+                  return [
+                    {
+                      mutation: (props) => {
+                        return {
+                          style: merge({}, props.style.labels, { fill: "orange" })
+                        };
+                      }
+                    }
+                  ];
+                }
+              }
+            },
+            {
+              target: "data",
+              eventHandlers: {
+                onClick: () => {
+                  return [
+                    {
+                      mutation: (props) => {
+                        return {
+                          style: merge({}, props.style, { fill: "blue" })
+                        };
+                      }
+                    }
+                  ];
+                }
+              }
+            }
+          ]}
+        />
+
+        <VictoryChart scale={{ x: "time" }} style={style} domainPadding={{ x: [20, 50] }}>
+          <VictoryCandlestick
+            candleColors={{ positive: "#8BC34A", negative: "#C62828" }}
+            data={data}
+            style={{ data: { stroke: "none" } }}
+            size={8}
+          />
+        </VictoryChart>
+
+        <VictoryCandlestick
+          animate={{ duration: 2000 }}
+          data={this.state.data}
+          candleWidth={50}
+          style={{
+            data: {
+              stroke: "transparent",
+              fill: ({ datum }) => datum.fill,
+              opacity: ({ datum }) => datum.opacity
+            },
+            parent: style.parent
+          }}
+        />
+
+        <VictoryChart scale={{ x: "time" }} style={style} domainPadding={{ x: [20, 50] }}>
+          <VictoryCandlestick
+            candleColors={{ positive: "#8BC34A", negative: "#C62828" }}
+            data={data}
+            style={{ data: { stroke: "none" }, closeLabels: { fill: "blue" } }}
+            size={8}
+            openLabels={({ datum }) => datum.open}
+            closeLabels={({ datum }) => datum.close}
+            lowLabels={({ datum }) => datum.low}
+            highLabels={({ datum }) => datum.high}
+            labelOrientation={{ open: "top", high: "top" }}
+          />
+        </VictoryChart>
+
+        <VictoryCandlestick style={style} size={1} />
+
+        <VictoryChart style={style}>
+          <VictoryCandlestick data={[]} />
+        </VictoryChart>
+      </div>
+    );
+  }
+}

packages/victory-candlestick/src/index.d.ts

@@ -0,0 +1,99 @@
+// Definitions by: Alexey Svetliakov <https://github.com/asvetliakov>
+//                 snerks <https://github.com/snerks>
+//                 Krzysztof Cebula <https://github.com/Havret>
+//                 Vitaliy Polyanskiy <https://github.com/alreadyExisted>
+//                 James Lismore <https://github.com/jlismore>
+//                 Stack Builders <https://github.com/stackbuilders>
+//                 Esteban Ibarra <https://github.com/ibarrae>
+//                 Dominic Lee <https://github.com/dominictwlee>
+//                 Dave Vedder <https://github.com/veddermatic>
+//                 Alec Flett <https://github.com/alecf>
+
+import * as React from "react";
+import {
+  EventPropTypeInterface,
+  OrientationTypes,
+  OriginType,
+  StringOrNumberOrCallback,
+  VictoryCommonProps,
+  VictoryDatableProps,
+  VictoryStyleObject,
+  VictoryLabableProps,
+  VictoryMultiLabeableProps,
+  VictoryStyleInterface
+} from "victory-core";
+
+export interface VictoryCandlestickStyleInterface extends VictoryStyleInterface {
+  close?: VictoryStyleObject;
+  closeLabels?: VictoryStyleObject;
+  data?: VictoryStyleObject;
+  high?: VictoryStyleObject;
+  highLabels?: VictoryStyleObject;
+  labels?: VictoryStyleObject;
+  low?: VictoryStyleObject;
+  lowLabels?: VictoryStyleObject;
+  open?: VictoryStyleObject;
+  openLabels?: VictoryStyleObject;
+  parent?: VictoryStyleObject;
+}
+
+export type VictoryCandlestickLabelsType = (string | number)[] | boolean | ((datum: any) => number);
+
+export interface VictoryCandlestickProps
+  extends VictoryCommonProps,
+    VictoryDatableProps,
+    VictoryLabableProps,
+    VictoryMultiLabeableProps {
+  candleColors?: {
+    positive?: string;
+    negative?: string;
+  };
+  candleRatio?: number;
+  candleWidth?: number | Function;
+  close?: StringOrNumberOrCallback | string[];
+  closeLabelComponent?: React.ReactElement;
+  closeLabels?: VictoryCandlestickLabelsType;
+  eventKey?: StringOrNumberOrCallback | string[];
+  events?: EventPropTypeInterface<
+    | "data"
+    | "labels"
+    | "open"
+    | "openLabels"
+    | "close"
+    | "closeLabels"
+    | "low"
+    | "lowLabels"
+    | "high"
+    | "highLabels",
+    StringOrNumberOrCallback | string[]
+  >[];
+  high?: StringOrNumberOrCallback | string[];
+  highLabelComponenet?: React.ReactElement;
+  highLabels?: VictoryCandlestickLabelsType;
+  labelOrientation?:
+    | OrientationTypes
+    | {
+        open?: OrientationTypes;
+        close?: OrientationTypes;
+        low?: OrientationTypes;
+        high?: OrientationTypes;
+      };
+  low?: StringOrNumberOrCallback | string[];
+  lowLabelComponent?: React.ReactElement;
+  lowLabels?: VictoryCandlestickLabelsType;
+  open?: StringOrNumberOrCallback | string[];
+  openLabelComponent?: React.ReactElement;
+  openLabels?: VictoryCandlestickLabelsType;
+  origin?: OriginType;
+  polar?: boolean;
+  size?: number;
+  style?: VictoryCandlestickStyleInterface;
+  wickStrokeWidth?: number;
+}
+
+/**
+ * VictoryCandlestick renders a dataset as a series of candlesticks.
+ * VictoryCandlestick can be composed with VictoryChart to create candlestick charts.
+ */
+
+export class VictoryCandlestick extends React.Component<VictoryCandlestickProps, any> {}