Add demo for box plot, clean up label prop defs for box plot

demo/ts/app.tsx

@@ -5,6 +5,7 @@ import { keys } from "lodash";
 import AreaDemo from "./components/victory-area-demo";
 import AxisDemo from "./components/victory-axis-demo";
 import BarDemo from "./components/victory-bar-demo";
+import BoxPlotDemo from "./components/victory-box-plot-demo";
 import ChartDemo from "./components/victory-chart-demo";
 import LegendDemo from "./components/victory-legend-demo";
 import LineDemo from "./components/victory-line-demo";
@@ -15,6 +16,7 @@ const MAP = {
   "/axis": { component: AxisDemo, name: "AxisDemo" },
   "/area": { component: AreaDemo, name: "AreaDemo" },
   "/bar": { component: BarDemo, name: "BarDemo" },
+  "/box-plot": { component: BoxPlotDemo, name: "BoxPlotDemo" },
   "/chart": { component: ChartDemo, name: "ChartDemo" },
   "/line": { component: LineDemo, name: "LineDemo" },
   "/tooltip": { component: TooltipDemo, name: "TooltipDemo" },

demo/ts/components/victory-box-plot-demo.tsx

@@ -0,0 +1,207 @@
+/*global window:false */
+/*eslint-disable no-magic-numbers */
+import React from "react";
+import { VictoryChart } from "@packages/victory-chart/src/index";
+import { VictoryBoxPlot } from "@packages/victory-box-plot/src/index";
+import { VictoryTheme } from "@packages/victory-core/src/index";
+import { range, random } from "lodash";
+
+interface VictoryBoxPlotDemoState {
+  data: {
+    x: number;
+    y: number[];
+  }[];
+}
+
+export default class VictoryBoxPlotDemo extends React.Component<any, VictoryBoxPlotDemoState> {
+  setStateInterval?: number = undefined;
+
+  constructor(props: any) {
+    super(props);
+    this.state = {
+      data: this.getData()
+    };
+  }
+
+  componentDidMount() {
+    this.setStateInterval = window.setInterval(() => {
+      this.setState({
+        data: this.getData()
+      });
+    }, 3000);
+  }
+
+  componentWillUnmount() {
+    window.clearInterval(this.setStateInterval);
+  }
+
+  getData() {
+    return range(5).map((i) => {
+      return {
+        x: i,
+        y: range(20).map(() => random(1, 100))
+      };
+    });
+  }
+
+  render() {
+    const containerStyle: React.CSSProperties = {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      alignItems: "center",
+      justifyContent: "center"
+    };
+
+    const chartStyle = { parent: { border: "1px solid #ccc", margin: "2%", maxWidth: "40%" } };
+
+    return (
+      <div className="demo" style={containerStyle}>
+        <VictoryChart style={chartStyle} minDomain={0} theme={VictoryTheme.material}>
+          <VictoryBoxPlot
+            minLabels
+            maxLabels
+            data={[
+              { x: "red", y: [5, 10, 9, 2] },
+              { x: "blue", y: [1, 15, 6, 8] },
+              { x: "green", y: [3, 5, 6, 9] },
+              { x: "yellow", y: [5, 20, 8, 12] },
+              { x: "white", y: [2, 11, 12, 13] }
+            ]}
+          />
+        </VictoryChart>
+        <VictoryChart style={chartStyle}>
+          <VictoryBoxPlot
+            data={[{ x: 1, y: 10 }, { x: 1, y: 7 }, { x: 1, y: 3 }, { x: 1, y: 5 }]}
+          />
+        </VictoryChart>
+        <VictoryChart style={chartStyle} domain={{ x: [0, 3], y: [0, 20] }}>
+          <VictoryBoxPlot
+            boxWidth={20}
+            labels
+            data={[{ x: 1, y: [5, 10, 9, 2] }, { x: 2, y: [1, 15, 6, 8] }]}
+            style={{
+              min: { stroke: "black", strokeWidth: 2 },
+              max: { stroke: "black", strokeWidth: 2 },
+              q1: { fill: "#FF530D", fillOpacity: "0.5" },
+              q3: { fill: "#2bbee0", fillOpacity: "0.5" },
+              median: { stroke: "#fff", strokeWidth: "4" },
+              minLabels: { fill: "green", padding: 10 },
+              maxLabels: { fill: "orange", padding: 10 },
+              q1Labels: { padding: 10 },
+              q3Labels: { padding: 10 },
+              medianLabels: { padding: 10 }
+            }}
+          />
+        </VictoryChart>
+
+        <VictoryChart horizontal style={chartStyle} domain={{ y: [0, 20], x: [0, 3] }}>
+          <VictoryBoxPlot
+            minLabels
+            maxLabels
+            q1Labels={({ datum }) => `x: ${datum.x}`}
+            whiskerWidth={50}
+            data={[{ x: 1, y: [5, 10, 9, 2] }, { x: 2, y: [1, 15, 6, 8] }]}
+            boxWidth={20}
+            labelOrientation={"top"}
+            events={[
+              {
+                target: "q1",
+                eventHandlers: {
+                  onClick: () => {
+                    return [
+                      {
+                        target: "q1Labels",
+                        mutation: () => ({ text: "LABEL!" })
+                      }
+                    ];
+                  }
+                }
+              }
+            ]}
+            style={{
+              min: { stroke: "black", strokeWidth: 2 },
+              max: { stroke: "black", strokeWidth: 2 },
+              q1: { fill: "#FF530D", fillOpacity: 0.5 },
+              q3: { fill: "#2bbee0", fillOpacity: 0.5 },
+              median: { stroke: "#fff", strokeWidth: 2 },
+              minLabels: { fill: "green", padding: 10 },
+              maxLabels: { fill: "orange", padding: 10 }
+            }}
+          />
+        </VictoryChart>
+
+        <VictoryChart style={chartStyle} horizontal domainPadding={50}>
+          <VictoryBoxPlot
+            minLabels
+            maxLabels
+            boxWidth={10}
+            data={[
+              { x: new Date(1980, 1, 1), y: [5, 10, 9, 2] },
+              { x: new Date(1990, 1, 1), y: [1, 15, 6, 8] },
+              { x: new Date(2000, 1, 1), y: [3, 5, 6, 9] },
+              { x: new Date(2010, 1, 1), y: [5, 20, 8, 12] },
+              { x: new Date(2020, 1, 1), y: [2, 11, 12, 13] }
+            ]}
+          />
+        </VictoryChart>
+        <VictoryChart style={chartStyle} domainPadding={50}>
+          <VictoryBoxPlot
+            minLabels
+            maxLabels
+            boxWidth={10}
+            data={[
+              { x: "red", y: [5, 10, 9, 2] },
+              { x: "blue", y: [1, 15, 6, 8] },
+              { x: "green", y: [3, 5, 6, 9] },
+              { x: "yellow", y: [5, 20, 8, 12] },
+              { x: "white", y: [2, 11, 12, 13] }
+            ]}
+          />
+        </VictoryChart>
+        <VictoryChart style={chartStyle} domainPadding={50}>
+          <VictoryBoxPlot
+            minLabels
+            maxLabels
+            boxWidth={10}
+            data={[
+              { x: 1, y: 5 },
+              { x: 1, y: 10 },
+              { x: 1, y: 8 },
+              { x: 2, y: 1 },
+              { x: 2, y: 15 },
+              { x: 2, y: 7 },
+              { x: 3, y: 3 },
+              { x: 3, y: 8 },
+              { x: 3, y: 5 }
+            ]}
+          />
+        </VictoryChart>
+        <VictoryChart style={chartStyle} domainPadding={50}>
+          <VictoryBoxPlot
+            labels
+            boxWidth={10}
+            horizontal
+            x="type"
+            data={[
+              { type: 1, min: 1, max: 18, median: 8, q1: 5, q3: 15 },
+              { type: 2, min: 4, max: 20, median: 10, q1: 7, q3: 15 },
+              { type: 3, min: 3, max: 12, median: 6, q1: 5, q3: 10 }
+            ]}
+            labelOrientation={{
+              q1: "top",
+              q3: "top",
+              min: "bottom",
+              max: "bottom",
+              median: "bottom"
+            }}
+          />
+        </VictoryChart>
+        <VictoryChart horizontal animate style={chartStyle} domainPadding={50}>
+          <VictoryBoxPlot boxWidth={10} data={this.state.data} />
+        </VictoryChart>
+        <VictoryBoxPlot animate style={chartStyle} boxWidth={10} data={this.state.data} />
+      </div>
+    );
+  }
+}

packages/victory-box-plot/src/index.d.ts

@@ -14,13 +14,20 @@ import {
   EventPropTypeInterface,
   DomainPropType,
   DomainPaddingPropType,
+  OrientationTypes,
   StringOrNumberOrCallback,
   VictoryDatableProps,
   VictoryCommonProps,
   VictoryStyleInterface,
   VictoryStyleObject
 } from "victory-core";
 
+export type VictoryBoxPlotLabelType =
+  | boolean
+  | (string | number)[]
+  | Function
+  | { (data: any): string | null };
+
 export interface VictoryBoxPlotStyleInterface extends VictoryStyleInterface {
   max?: VictoryStyleObject;
   maxLabels?: VictoryStyleObject;
@@ -34,30 +41,43 @@ export interface VictoryBoxPlotStyleInterface extends VictoryStyleInterface {
   q3Labels?: VictoryStyleObject;
 }
 
+export interface VictoryBoxPlotLabelOrientationInterface extends VictoryStyleInterface {
+  max?: OrientationTypes;
+  min?: OrientationTypes;
+  median?: OrientationTypes;
+  q1?: OrientationTypes;
+  q3?: OrientationTypes;
+}
+
 export interface VictoryBoxPlotProps extends VictoryCommonProps, VictoryDatableProps {
   boxWidth?: number;
   domain?: DomainPropType;
   domainPadding?: DomainPaddingPropType;
   events?: EventPropTypeInterface<string, StringOrNumberOrCallback>[];
   eventKey?: StringOrNumberOrCallback;
   horizontal?: boolean;
-  labelOrientation?: "top" | "bottom" | "left" | "right";
+  labelOrientation?: OrientationTypes | VictoryBoxPlotLabelOrientationInterface;
   labels?: boolean;
   max?: StringOrNumberOrCallback | string[];
   maxComponent?: React.ReactElement;
   maxLabelComponent?: React.ReactElement;
+  maxLabels?: VictoryBoxPlotLabelType;
   median?: StringOrNumberOrCallback | string[];
   medianComponent?: React.ReactElement;
   medianLabelComponent?: React.ReactElement;
+  medianLabels?: VictoryBoxPlotLabelType;
   min?: StringOrNumberOrCallback | string[];
   minComponent?: React.ReactElement;
   minLabelComponent?: React.ReactElement;
+  minLabels?: VictoryBoxPlotLabelType;
   q1?: StringOrNumberOrCallback | string[];
   q1Component?: React.ReactElement;
   q1LabelComponent?: React.ReactElement;
+  q1Labels?: VictoryBoxPlotLabelType;
   q3?: StringOrNumberOrCallback | string[];
   q3Component?: React.ReactElement;
   q3LabelComponent?: React.ReactElement;
+  q3Labels?: VictoryBoxPlotLabelType;
   style?: VictoryBoxPlotStyleInterface;
   whiskerWidth?: number;
 }

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

@@ -72,7 +72,7 @@ export interface FlyoutProps extends VictoryCommonProps {
   height?: number;
   id?: string | number;
   index?: number;
-  orientation?: "top" | "bottom" | "left" | "right";
+  orientation?: OrientationTypes;
   origin?: object;
   pathComponent?: React.ReactElement;
   pointerLength?: number;