Add display value of bar chart (#114)

* Add display value of bar chart

* Change names on Bar from text to labels

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.aeeaaf0490977d768c29.js"></script></body>
+<script type="text/javascript" src="bundle.0d2a53147bad1d2a78f8.js"></script></body>
 </html>

docs/src/docs/Bar/propDocs.json

@@ -153,6 +153,38 @@
       },
       "required": false,
       "description": "D3 scale for Y axis - provided by XYPlot."
+    },
+    "showLabel": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Conditional if column should display values above/beside bar."
+    },
+    "labelFormat": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Format to use for the values or accessor that returns the updated value."
+    },
+    "labelDistance": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "The distance from the column the label appears in pixels - default is 24.",
+      "defaultValue": {
+        "value": "24",
+        "computed": false
+      }
+    },
+    "labelClassName": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Class name(s) to be included on the bar's <text> element."
     }
   }
 }

docs/src/docs/RangeBarChart/propDocs.json

@@ -168,6 +168,34 @@
       },
       "required": false,
       "description": "`mouseleave` event handler callback, called when user's mouse leaves a bar."
+    },
+    "showLabels": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Conditional if column should display values above/beside each bar."
+    },
+    "barLabelFormat": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Format to use for the values or accessor that returns the updated value on each bar."
+    },
+    "labelDistance": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "The distance from the column the text appears in pixels - default is 24."
+    },
+    "labelClassName": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Class name(s) to be included on each bar's <text> element."
     }
   }
 }

src/Bar.js

@@ -83,14 +83,31 @@ export default class Bar extends React.Component {
     /**
      * D3 scale for Y axis - provided by XYPlot.
      */
-    yScale: PropTypes.func
+    yScale: PropTypes.func,
+    /**
+     * Conditional if column should display values above/beside bar.
+     */
+    showLabel: PropTypes.bool,
+    /**
+     * Format to use for the values or accessor that returns the updated value.
+     */
+    labelFormat: PropTypes.func,
+    /**
+     * The distance from the column the label appears in pixels - default is 24.
+     */
+    labelDistance: PropTypes.number,
+    /**
+     * Class name(s) to be included on the bar's <text> element.
+     */
+    labelClassName: PropTypes.string
   };
   static defaultProps = {
     x: 0,
     y: 0,
     thickness: 8,
     className: "",
-    style: {}
+    style: {},
+    labelDistance: 24
   };
 
   render() {
@@ -106,7 +123,11 @@ export default class Bar extends React.Component {
       style,
       onMouseEnter,
       onMouseMove,
-      onMouseLeave
+      onMouseLeave,
+      showLabel,
+      labelFormat,
+      labelDistance,
+      labelClassName
     } = this.props;
 
     invariant(
@@ -117,15 +138,22 @@ export default class Bar extends React.Component {
     const orientation = isUndefined(xEnd) ? "vertical" : "horizontal";
     const className = `rct-chart-bar rct-chart-bar-${orientation} ${this.props
       .className || ""}`;
+    const labelClass = `rct-chart-bar-label ${this.props.labelClassName || ""}`;
 
-    let rectX, rectY, width, height;
+    let rectX, rectY, width, height, xText, yText, textAnchor, textValue;
     if (orientation === "horizontal") {
       rectY = yScale(y) - thickness / 2;
       const x0 = xScale(x);
       const x1 = xScale(xEnd);
       rectX = Math.min(x0, x1);
       width = Math.abs(x1 - x0);
       height = thickness;
+
+      // horizontal text formatting to right of bar
+      xText = Math.max(x0, x1) + labelDistance;
+      yText = rectY + thickness / 2 + 5;
+      textAnchor = "";
+      textValue = xEnd;
     } else {
       // vertical
       rectX = xScale(x) - thickness / 2;
@@ -134,9 +162,15 @@ export default class Bar extends React.Component {
       rectY = Math.min(y0, y1);
       height = Math.abs(y1 - y0);
       width = thickness;
+
+      // vertical text formatting
+      xText = rectX + thickness / 2;
+      yText = rectY - labelDistance;
+      textAnchor = "middle";
+      textValue = yEnd;
     }
 
-    return (
+    const rect = (
       <rect
         {...{
           x: rectX,
@@ -151,5 +185,29 @@ export default class Bar extends React.Component {
         }}
       />
     );
+
+    const text = (
+      <text
+        {...{
+          textAnchor,
+          x: xText,
+          y: yText,
+          className: labelClass
+        }}
+      >
+        {labelFormat ? labelFormat(textValue) : textValue}
+      </text>
+    );
+
+    if (showLabel) {
+      return (
+        <g>
+          {rect}
+          {text}
+        </g>
+      );
+    }
+
+    return rect;
   }
 }

src/RangeBarChart.js

@@ -91,7 +91,23 @@ export default class RangeBarChart extends React.Component {
     /**
      * `mouseleave` event handler callback, called when user's mouse leaves a bar.
      */
-    onMouseLeaveBar: PropTypes.func
+    onMouseLeaveBar: PropTypes.func,
+    /**
+     * Conditional if column should display values above/beside each bar.
+     */
+    showLabels: PropTypes.bool,
+    /**
+     * Format to use for the values or accessor that returns the updated value on each bar.
+     */
+    barLabelFormat: PropTypes.func,
+    /**
+     * The distance from the column the text appears in pixels - default is 24.
+     */
+    labelDistance: PropTypes.number,
+    /**
+     * Class name(s) to be included on each bar's <text> element.
+     */
+    labelClassName: PropTypes.string
   };
   static defaultProps = {
     data: [],
@@ -203,7 +219,11 @@ export default class RangeBarChart extends React.Component {
       yEnd,
       barThickness,
       barClassName,
-      barStyle
+      barStyle,
+      showLabels,
+      barLabelFormat,
+      labelDistance,
+      labelClassName
     } = this.props;
     // invariant(hasOneOfTwo(xEnd, yEnd), `RangeBarChart expects a xEnd *or* yEnd prop, but not both.`);
 
@@ -232,6 +252,10 @@ export default class RangeBarChart extends React.Component {
             onMouseMove,
             onMouseLeave,
             thickness: barThickness,
+            showLabel: showLabels,
+            labelFormat: barLabelFormat,
+            labelDistance,
+            labelClassName: getValue(labelClassName, d, i),
             className: `rct-chart-bar ${getValue(barClassName, d, i) || ""}`,
             style: getValue(barStyle, d, i)
           };