(pre-release) Data accessors for victory-bar

demo/demo.jsx

@@ -2,6 +2,7 @@
 import _ from "lodash";
 import React from "react";
 import {VictoryBar} from "../src/index";
+import {VictoryChart} from "victory-chart";
 
 export default class App extends React.Component {
   constructor() {
@@ -12,7 +13,6 @@ export default class App extends React.Component {
     };
   }
 
-
   getBarData() {
     return _.map(_.range(5), () => {
       return [
@@ -63,35 +63,121 @@ export default class App extends React.Component {
   render() {
     return (
       <div className="demo">
-        <p>
+        <h1>Victory Bar</h1>
+
+        <ChartWrap>
           <VictoryBar
-            style={{parent: {border: "1px solid", margin: 10}}}
-            height={500}
-            data={this.state.numericBarData}
-            dataAttributes={[
-              {fill: "cornflowerblue"},
-              {fill: "orange"},
-              {fill: "greenyellow"},
-              {fill: "gold"},
-              {fill: "tomato"}
-            ]}
-            labels={["low", "medium", "high"]}
-            horizontal
-            categories={[[1, 3], [4, 7], [9, 11]]}
-            animate={{velocity: 0.02}}
+            stacked
+            data={_.times(5, () => _.range(32))}
+            x={null}
+            y={(d) => Math.sin(d * 0.2)}
+            colorScale="warm"
+          />
+        </ChartWrap>
+
+        <ChartWrap>
+          <VictoryBar
+            colorScale={"cool"}
+            stacked
+            height={250}
+            data={this.getBarData()}
+          />
+        </ChartWrap>
+
+        <ChartWrap>
+          <VictoryBar
+            grouped
+            colorScale={"qualitative"}
+            height={250}
+            data={this.getBarData()}
           />
+        </ChartWrap>
 
+        <ChartWrap>
           <VictoryBar
-            style={{parent: {border: "1px solid", margin: 10, overflow: "visible"}}}
-            data={this.state.barData}
-            colorScale={"greyscale"}
-            labels={["one", "two", "three"]}
             stacked
-            animate={{velocity: 0.02}}
+            colorScale={"qualitative"}
+            height={250}
+            data={this.getNumericBarData()}
+          />
+        </ChartWrap>
+
+        <ChartWrap>
+          <VictoryBar
+            data={[[0, 1], [2, 3], [4, 5]]}
+            x={0}
+            y={1}
           />
+        </ChartWrap>
 
-            <VictoryBar/>
-        </p>
+        <ChartWrap>
+          <VictoryBar
+            height={250}
+            data={[["a", 1], ["b", 3], ["c", 5]]}
+            x={0}
+            y={1}
+          />
+        </ChartWrap>
+
+        <ChartWrap>
+          <VictoryBar
+            height={250}
+            data={[{a: {b: {c: 1, d: 1}}}, {a: {b: {c: 2, d: 3}}}]}
+            x={"a.b.c"}
+            y={"a.b.d"}
+          />
+        </ChartWrap>
+
+        <ChartWrap>
+          <VictoryBar
+            stacked
+            data={[[["a", 1], ["b", 2], ["c", 3]], [["b", 1], ["c", 2], ["d", 3]]]}
+            x={0}
+            y={1}
+            colorScale="qualitative"
+          />
+        </ChartWrap>
+
+        <ChartWrap>
+          <VictoryBar
+            stacked
+            data={[
+              [
+                {x: "a", y: 2},
+                {x: "b", y: 3},
+                {x: "c", y: 4}
+              ],
+              [
+                {x: "c", y: 2},
+                {x: "d", y: 3},
+                {x: "e", y: 4}
+              ]
+            ]}
+            colorScale="warm"
+          />
+        </ChartWrap>
+      </div>
+    );
+  }
+}
+
+class ChartWrap extends React.Component {
+  static propTypes = {
+    width: React.PropTypes.number,
+    height: React.PropTypes.number,
+    children: React.PropTypes.any
+  };
+  static defaultProps = {
+    width: 350,
+    height: 250
+  };
+  // renders both a standalone chart, and a version wrapped in VictoryChart,
+  // to test both cases at once
+  render() {
+    return (
+      <div>
+        {React.cloneElement(this.props.children, this.props)}
+        <VictoryChart {...this.props}>{this.props.children}</VictoryChart>
       </div>
     );
   }

package.json

@@ -34,6 +34,7 @@
     "react-addons-test-utils": "^0.14.0",
     "react-dom": "0.14.x",
     "sinon": "^1.15.4",
-    "sinon-chai": "^2.8.0"
+    "sinon-chai": "^2.8.0",
+    "victory-chart": "^2.2.0"
   }
 }

src/components/bar-label.jsx

@@ -11,13 +11,13 @@ export default class BarLabel extends React.Component {
     position: PropTypes.object,
     horizontal: PropTypes.bool,
     style: PropTypes.object,
-    data: PropTypes.object,
+    datum: PropTypes.object,
     labelText: PropTypes.string,
     labelComponent: PropTypes.any
   };
 
   getLabelAnchors(props) {
-    const sign = props.data.y >= 0 ? 1 : -1;
+    const sign = props.datum.y >= 0 ? 1 : -1;
     if (!props.horizontal) {
       return {
         vertical: sign >= 0 ? "end" : "start",
@@ -41,13 +41,13 @@ export default class BarLabel extends React.Component {
   renderLabelComponent(props, position, anchors) {
     const component = props.labelComponent;
     const baseStyle = merge({padding: 0}, props.style, component.props.style);
-    const style = Chart.evaluateStyle(baseStyle, props.data);
+    const style = Chart.evaluateStyle(baseStyle, props.datum);
     const padding = this.getlabelPadding(props, style);
     const children = component.props.children || props.labelText;
     const newProps = {
       x: component.props.x || position.x + padding.x,
       y: component.props.y || position.y - padding.y,
-      data: props.data, // Pass data for custom label component to access
+      data: props.datum, // Pass data for custom label component to access - todo: rename to datum
       textAnchor: component.props.textAnchor || anchors.text,
       verticalAnchor: component.props.verticalAnchor || anchors.vertical,
       style
@@ -57,13 +57,13 @@ export default class BarLabel extends React.Component {
 
   renderVictoryLabel(props, position, anchors) {
     const baseStyle = merge({padding: 0}, props.style);
-    const style = Chart.evaluateStyle(baseStyle, props.data);
+    const style = Chart.evaluateStyle(baseStyle, props.datum);
     const padding = this.getlabelPadding(props, style);
     return (
       <VictoryLabel
         x={position.x + padding.x}
         y={position.y - padding.y}
-        data={props.data}
+        data={props.datum} // todo: rename to datum
         textAnchor={anchors.text}
         verticalAnchor={anchors.vertical}
         style={style}

src/components/bar.jsx

@@ -9,7 +9,7 @@ export default class Bar extends React.Component {
     position: PropTypes.object,
     horizontal: PropTypes.bool,
     style: PropTypes.object,
-    data: PropTypes.object
+    datum: PropTypes.object
   };
 
   getVerticalBarPath(position, width) {
@@ -38,7 +38,7 @@ export default class Bar extends React.Component {
   }
 
   renderBar(props) {
-    const style = Chart.evaluateStyle(props.style, props.data);
+    const style = Chart.evaluateStyle(props.style, props.datum);
     // TODO better bar width calculation
     const barWidth = style.width;
     const path = props.position.independent ?