From 9850414804542f83d914b5e3663d60fa68b59394 Mon Sep 17 00:00:00 2001 From: Danielle Blank Date: Wed, 12 Sep 2018 17:09:35 -0400 Subject: [PATCH] Change names on Bar from text to labels --- docs/build/index.html | 2 +- docs/src/docs/Bar/propDocs.json | 10 +++--- docs/src/docs/RangeBarChart/propDocs.json | 8 ++--- src/Bar.js | 42 +++++++++++------------ src/RangeBarChart.js | 24 ++++++------- tests/jsdom/spec/Bar.spec.js | 18 +++++----- 6 files changed, 52 insertions(+), 52 deletions(-) diff --git a/docs/build/index.html b/docs/build/index.html index 3ca11f22..61a939c6 100644 --- a/docs/build/index.html +++ b/docs/build/index.html @@ -31,5 +31,5 @@
Loading...
- + \ No newline at end of file diff --git a/docs/src/docs/Bar/propDocs.json b/docs/src/docs/Bar/propDocs.json index d893f7e5..1f02b9c1 100644 --- a/docs/src/docs/Bar/propDocs.json +++ b/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" }, diff --git a/docs/src/docs/RangeBarChart/propDocs.json b/docs/src/docs/RangeBarChart/propDocs.json index 223a064e..4ea5d688 100644 --- a/docs/src/docs/RangeBarChart/propDocs.json +++ b/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" }, diff --git a/src/Bar.js b/src/Bar.js index 2fe28aea..b7a386fb 100644 --- a/src/Bar.js +++ b/src/Bar.js @@ -87,19 +87,19 @@ 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 element. */ - textClassName: PropTypes.string + labelClassName: PropTypes.string }; static defaultProps = { x: 0, @@ -107,7 +107,7 @@ export default class Bar extends React.Component { 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 = ( ); - const TEXT = ( + const text = ( - {textFormat ? textFormat(textValue) : textValue} + {labelFormat ? labelFormat(textValue) : textValue} ); - if (displayValue) { + if (showLabel) { return ( - {RECT} - {TEXT} + {rect} + {text} ); } - return RECT; + return rect; } } diff --git a/src/RangeBarChart.js b/src/RangeBarChart.js index 01215701..132d9d91 100644 --- a/src/RangeBarChart.js +++ b/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 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) }; diff --git a/tests/jsdom/spec/Bar.spec.js b/tests/jsdom/spec/Bar.spec.js index 7009118e..6ec7069e 100644 --- a/tests/jsdom/spec/Bar.spec.js +++ b/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(); @@ -258,7 +258,7 @@ describe("Bar", () => { const verticalBarWithText = { ...verticalBarProps, - displayValue: true + showLabel: true }; const verticalBar = shallow(); @@ -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(); @@ -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();