Merge pull request #334 from FormidableLabs/feature/victory-boxplot

WiP: Initial work for primitives used in VictoryBoxPlot

package.json

@@ -37,7 +37,7 @@
     "d3-scale": "^1.0.0",
     "d3-shape": "^1.2.0",
     "d3-timer": "^1.0.0",
-    "lodash": "^4.17.4"
+    "lodash": "^4.17.5"
   },
   "devDependencies": {
     "builder-victory-component-dev": "^5.1.2",

src/index.js

@@ -22,6 +22,7 @@ export { default as Point } from "./victory-primitives/point";
 export { default as Slice } from "./victory-primitives/slice";
 export { default as Voronoi } from "./victory-primitives/voronoi";
 export { default as Flyout } from "./victory-primitives/flyout";
+export { default as Whisker } from "./victory-primitives/whisker";
 export { default as addEvents } from "./victory-util/add-events";
 export { default as Collection } from "./victory-util/collection";
 export { default as Data } from "./victory-util/data";

src/victory-primitives/whisker.js

@@ -0,0 +1,42 @@
+import React from "react";
+import PropTypes from "prop-types";
+import CommonProps from "./common-props";
+import Line from "./line";
+import { assign } from "lodash";
+
+export default class Whisker extends React.Component {
+
+  static propTypes = {
+    ...CommonProps,
+    groupComponent: PropTypes.element,
+    lineComponent: PropTypes.element,
+    majorWhisker: PropTypes.shape({
+      x1: PropTypes.number,
+      x2: PropTypes.number,
+      y1: PropTypes.number,
+      y2: PropTypes.number
+    }),
+    minorWhisker: PropTypes.shape({
+      x1: PropTypes.number,
+      x2: PropTypes.number,
+      y1: PropTypes.number,
+      y2: PropTypes.number
+    })
+  }
+
+  static defaultProps = {
+    groupComponent: <g />,
+    lineComponent: <Line/>
+  }
+
+  render() {
+    const {
+      groupComponent, lineComponent, style, events, className, majorWhisker, minorWhisker
+    } = this.props;
+    const baseProps = { style, events, className };
+    return React.cloneElement(groupComponent, {}, [
+      React.cloneElement(lineComponent, assign({ key: "major-whisker" }, baseProps, majorWhisker)),
+      React.cloneElement(lineComponent, assign({ key: "minor-whisker" }, baseProps, minorWhisker))
+    ]);
+  }
+}

src/victory-theme/grayscale.js

@@ -14,6 +14,7 @@ const colors = [
 ];
 
 const charcoal = "#252525";
+const grey = "#969696";
 // *
 // * Typography
 // *
@@ -92,6 +93,21 @@ export default {
       labels: baseLabelStyles
     }
   }, baseProps),
+  boxplot: assign({
+    style: {
+      max: { padding: 8, stroke: charcoal, strokeWidth: 1 },
+      maxLabel: baseLabelStyles,
+      median: { padding: 8, stroke: charcoal, strokeWidth: 1 },
+      medianLabel: baseLabelStyles,
+      min: { padding: 8, stroke: charcoal, strokeWidth: 1 },
+      minLabel: baseLabelStyles,
+      q1: { padding: 8, fill: grey },
+      q1Label: baseLabelStyles,
+      q3: { padding: 8, fill: grey },
+      q3Label: baseLabelStyles
+    },
+    boxWidth: 20
+  }, baseProps),
   candlestick: assign({
     style: {
       data: {
@@ -120,6 +136,19 @@ export default {
   group: assign({
     colorScale: colors
   }, baseProps),
+  legend: {
+    colorScale: colors,
+    gutter: 10,
+    orientation: "vertical",
+    titleOrientation: "top",
+    style: {
+      data: {
+        type: "circle"
+      },
+      labels: baseLabelStyles,
+      title: assign({}, baseLabelStyles, { padding: 5 })
+    }
+  },
   line: assign({
     style: {
       data: {
@@ -183,18 +212,5 @@ export default {
         pointerEvents: "none"
       }
     }
-  }, baseProps),
-  legend: {
-    colorScale: colors,
-    gutter: 10,
-    orientation: "vertical",
-    titleOrientation: "top",
-    style: {
-      data: {
-        type: "circle"
-      },
-      labels: baseLabelStyles,
-      title: assign({}, baseLabelStyles, { padding: 5 })
-    }
-  }
+  }, baseProps)
 };

src/victory-theme/material.js

@@ -110,6 +110,20 @@ export default {
       labels: baseLabelStyles
     }
   }, baseProps),
+  boxplot: assign({
+    style: {
+      max: { padding, stroke: blueGrey700, strokeWidth: 1 },
+      maxLabel: baseLabelStyles,
+      median: { padding, stroke: blueGrey700, strokeWidth: 1 },
+      medianLabel: baseLabelStyles,
+      min: { padding, stroke: blueGrey700, strokeWidth: 1 },
+      minLabel: baseLabelStyles,
+      q1: { padding, fill: blueGrey700 },
+      q1Label: baseLabelStyles,
+      q3: { padding, fill: blueGrey700 },
+      q3Label: baseLabelStyles
+    }
+  }, baseProps),
   candlestick: assign({
     style: {
       data: {
@@ -138,6 +152,19 @@ export default {
   group: assign({
     colorScale: colors
   }, baseProps),
+  legend: {
+    colorScale: colors,
+    gutter: 10,
+    orientation: "vertical",
+    titleOrientation: "top",
+    style: {
+      data: {
+        type: "circle"
+      },
+      labels: baseLabelStyles,
+      title: assign({}, baseLabelStyles, { padding: 5 })
+    }
+  },
   line: assign({
     style: {
       data: {
@@ -200,18 +227,5 @@ export default {
         pointerEvents: "none"
       }
     }
-  }, baseProps),
-  legend: {
-    colorScale: colors,
-    gutter: 10,
-    orientation: "vertical",
-    titleOrientation: "top",
-    style: {
-      data: {
-        type: "circle"
-      },
-      labels: baseLabelStyles,
-      title: assign({}, baseLabelStyles, { padding: 5 })
-    }
-  }
+  }, baseProps)
 };