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.e5ac480999f4b5380760.js"></script></body>
+<script type="text/javascript" src="bundle.0d2a53147bad1d2a78f8.js"></script></body>
 </html>

docs/src/docs/Bar/propDocs.json

@@ -154,32 +154,32 @@
       "required": false,
       "description": "D3 scale for Y axis - provided by XYPlot."
     },
-    "displayValue": {
+    "showLabel": {
       "type": {
         "name": "bool"
       },
       "required": false,
       "description": "Conditional if column should display values above/beside bar."
     },
-    "textFormat": {
+    "labelFormat": {
       "type": {
         "name": "func"
       },
       "required": false,
       "description": "Format to use for the values or accessor that returns the updated value."
     },
-    "textDistance": {
+    "labelDistance": {
       "type": {
         "name": "number"
       },
       "required": false,
-      "description": "The distance from the column the text appears in pixels - default is 24.",
+      "description": "The distance from the column the label appears in pixels - default is 24.",
       "defaultValue": {
         "value": "24",
         "computed": false
       }
     },
-    "textClassName": {
+    "labelClassName": {
       "type": {
         "name": "string"
       },

docs/src/docs/RangeBarChart/propDocs.json

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

src/Bar.js

@@ -87,27 +87,27 @@ export default class Bar extends React.Component {
     /**
      * Conditional if column should display values above/beside bar.
      */
-    displayValue: PropTypes.bool,
+    showLabel: PropTypes.bool,
     /**
      * Format to use for the values or accessor that returns the updated value.
      */
-    textFormat: PropTypes.func,
+    labelFormat: PropTypes.func,
     /**
-     * The distance from the column the text appears in pixels - default is 24.
+     * The distance from the column the label appears in pixels - default is 24.
      */
-    textDistance: PropTypes.number,
+    labelDistance: PropTypes.number,
     /**
      * Class name(s) to be included on the bar's <text> element.
      */
-    textClassName: PropTypes.string
+    labelClassName: PropTypes.string
   };
   static defaultProps = {
     x: 0,
     y: 0,
     thickness: 8,
     className: "",
     style: {},
-    textDistance: 24
+    labelDistance: 24
   };
 
   render() {
@@ -124,10 +124,10 @@ export default class Bar extends React.Component {
       onMouseEnter,
       onMouseMove,
       onMouseLeave,
-      displayValue,
-      textFormat,
-      textDistance,
-      textClassName
+      showLabel,
+      labelFormat,
+      labelDistance,
+      labelClassName
     } = this.props;
 
     invariant(
@@ -138,7 +138,7 @@ 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 textClass = `rct-chart-bar-text ${this.props.textClassName || ""}`;
+    const labelClass = `rct-chart-bar-label ${this.props.labelClassName || ""}`;
 
     let rectX, rectY, width, height, xText, yText, textAnchor, textValue;
     if (orientation === "horizontal") {
@@ -150,7 +150,7 @@ export default class Bar extends React.Component {
       height = thickness;
 
       // horizontal text formatting to right of bar
-      xText = Math.max(x0, x1) + textDistance;
+      xText = Math.max(x0, x1) + labelDistance;
       yText = rectY + thickness / 2 + 5;
       textAnchor = "";
       textValue = xEnd;
@@ -165,12 +165,12 @@ export default class Bar extends React.Component {
 
       // vertical text formatting
       xText = rectX + thickness / 2;
-      yText = rectY - textDistance;
+      yText = rectY - labelDistance;
       textAnchor = "middle";
       textValue = yEnd;
     }
 
-    const RECT = (
+    const rect = (
       <rect
         {...{
           x: rectX,
@@ -186,28 +186,28 @@ export default class Bar extends React.Component {
       />
     );
 
-    const TEXT = (
+    const text = (
       <text
         {...{
           textAnchor,
           x: xText,
           y: yText,
-          className: textClass
+          className: labelClass
         }}
       >
-        {textFormat ? textFormat(textValue) : textValue}
+        {labelFormat ? labelFormat(textValue) : textValue}
       </text>
     );
 
-    if (displayValue) {
+    if (showLabel) {
       return (
         <g>
-          {RECT}
-          {TEXT}
+          {rect}
+          {text}
         </g>
       );
     }
 
-    return RECT;
+    return rect;
   }
 }

src/RangeBarChart.js

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

tests/jsdom/spec/Bar.spec.js

@@ -245,10 +245,10 @@ describe("Bar", () => {
     }).not.to.throw(Error);
   });
 
-  it("displays the x values when displayValue is true", () => {
+  it("displays the x values when showLabel is true", () => {
     const horizontalBarWithText = {
       ...horizontalBarProps,
-      displayValue: true
+      showLabel: true
     };
 
     const horizontalBar = shallow(<Bar {...horizontalBarWithText} />);
@@ -258,7 +258,7 @@ describe("Bar", () => {
 
     const verticalBarWithText = {
       ...verticalBarProps,
-      displayValue: true
+      showLabel: true
     };
 
     const verticalBar = shallow(<Bar {...verticalBarWithText} />);
@@ -267,11 +267,11 @@ describe("Bar", () => {
     expect(horizontalBar.find("text")).to.have.length(1);
   });
 
-  it("passes textClassName through to the bar's text element", () => {
+  it("passes labelClassName through to the bar's text element", () => {
     const verticalProps = {
       ...verticalBarProps,
-      textClassName: "foo-bar-test-class",
-      displayValue: true
+      labelClassName: "foo-bar-test-class",
+      showLabel: true
     };
 
     const verticalBar = shallow(<Bar {...verticalProps} />);
@@ -280,11 +280,11 @@ describe("Bar", () => {
     expect(text.props().className).to.include("foo-bar-test-class");
   });
 
-  it("passes textFormat through to the bar's text value", () => {
+  it("passes labelFormat through to the bar's text value", () => {
     const verticalProps = {
       ...verticalBarProps,
-      displayValue: true,
-      textFormat: d => `${d}%`
+      showLabel: true,
+      labelFormat: d => `${d}%`
     };
 
     const verticalBar = shallow(<Bar {...verticalProps} />);