From 9acb1d586d8ed600975a7c90f31b5779edf9ea8e Mon Sep 17 00:00:00 2001 From: boygirl Date: Mon, 13 Nov 2017 14:52:12 -0800 Subject: [PATCH 1/7] correct min / max for negative data --- src/victory-util/domain.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/victory-util/domain.js b/src/victory-util/domain.js index 8be2a1d..ab7616c 100644 --- a/src/victory-util/domain.js +++ b/src/victory-util/domain.js @@ -78,8 +78,8 @@ export default { const maxData = flatData.map((datum) => { return datum[`_${currentAxis}1`] || datum[`_${currentAxis}`] || 0; }); - const min = Collection.getMinValue([...domain, ...minData]); - const max = Collection.getMaxValue([...domain, ...maxData]); + const min = Collection.getMinValue([...domain, ...minData, ...maxData]); + const max = Collection.getMaxValue([...domain, ...maxData, ...minData]); return [min, max]; }; const categoryDomain = this.getDomainFromCategories(props, axis); From 488bb315b26d9994d631e6092d494ce19a3770aa Mon Sep 17 00:00:00 2001 From: boygirl Date: Mon, 13 Nov 2017 15:16:41 -0800 Subject: [PATCH 2/7] don't round bar paths --- src/victory-primitives/bar.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/victory-primitives/bar.js b/src/victory-primitives/bar.js index c8b675c..5a15116 100644 --- a/src/victory-primitives/bar.js +++ b/src/victory-primitives/bar.js @@ -64,13 +64,11 @@ export default class Bar extends React.Component { const alignment = props.alignment || "middle"; const size = alignment === "middle" ? width / 2 : width; const sign = horizontal ? -1 : 1; - const x0 = alignment === "start" ? x : x - (sign * size); - const x1 = alignment === "end" ? x : x + (sign * size); return { - y0: Math.round(y0), - y1: Math.round(y), - x0: Math.round(x0), - x1: Math.round(x1) + x0: alignment === "start" ? x : x - (sign * size), + x1: alignment === "end" ? x : x + (sign * size), + y0, + y1: y }; } @@ -190,7 +188,7 @@ export default class Bar extends React.Component { const barRatio = 0.5; // eslint-disable-next-line no-magic-numbers const defaultWidth = data.length < 2 ? 8 : (barRatio * extent / bars); - return Math.max(1, Math.round(defaultWidth)); + return Math.max(1, defaultWidth); } // Overridden in victory-core-native From fcfae0bce85521440f3d375b3684c1aa6de7243a Mon Sep 17 00:00:00 2001 From: boygirl Date: Mon, 13 Nov 2017 15:24:28 -0800 Subject: [PATCH 3/7] remove all rounding --- src/victory-primitives/flyout.js | 44 +++++++++++++------------- src/victory-primitives/path-helpers.js | 18 ++--------- 2 files changed, 24 insertions(+), 38 deletions(-) diff --git a/src/victory-primitives/flyout.js b/src/victory-primitives/flyout.js index a40f458..696b3cb 100644 --- a/src/victory-primitives/flyout.js +++ b/src/victory-primitives/flyout.js @@ -76,18 +76,18 @@ export default class Flyout extends React.Component { const rightEdge = x + (width / 2); const leftEdge = x - (width / 2); const direction = orientation === "top" ? "0 0 0" : "0 0 1"; - const arc = `${Math.round(cornerRadius)} ${Math.round(cornerRadius)} ${direction}`; - return `M ${Math.round(x - pointerWidth / 2)}, ${Math.round(pointerEdge)} - L ${Math.round(x)}, ${Math.round(y)} - L ${Math.round(x + pointerWidth / 2)}, ${Math.round(pointerEdge)} - L ${Math.round(rightEdge - cornerRadius)}, ${Math.round(pointerEdge)} - A ${arc} ${Math.round(rightEdge)}, ${Math.round(pointerEdge - sign * cornerRadius)} - L ${Math.round(rightEdge)}, ${Math.round(oppositeEdge + sign * cornerRadius)} - A ${arc} ${Math.round(rightEdge - cornerRadius)}, ${Math.round(oppositeEdge)} - L ${Math.round(leftEdge + cornerRadius)}, ${Math.round(oppositeEdge)} - A ${arc} ${Math.round(leftEdge)}, ${Math.round(oppositeEdge + sign * cornerRadius)} - L ${Math.round(leftEdge)}, ${Math.round(pointerEdge - sign * cornerRadius)} - A ${arc} ${Math.round(leftEdge + cornerRadius)}, ${Math.round(pointerEdge)} + const arc = `${cornerRadius} ${cornerRadius} ${direction}`; + return `M ${x - pointerWidth / 2}, ${pointerEdge} + L ${x}, ${y} + L ${x + pointerWidth / 2}, ${pointerEdge} + L ${rightEdge - cornerRadius}, ${pointerEdge} + A ${arc} ${rightEdge}, ${pointerEdge - sign * cornerRadius} + L ${rightEdge}, ${oppositeEdge + sign * cornerRadius} + A ${arc} ${rightEdge - cornerRadius}, ${oppositeEdge} + L ${leftEdge + cornerRadius}, ${oppositeEdge} + A ${arc} ${leftEdge}, ${oppositeEdge + sign * cornerRadius} + L ${leftEdge}, ${pointerEdge - sign * cornerRadius} + A ${arc} ${leftEdge + cornerRadius}, ${pointerEdge} z`; } @@ -101,18 +101,18 @@ export default class Flyout extends React.Component { const bottomEdge = y + height / 2; const topEdge = y - height / 2; const direction = orientation === "right" ? "0 0 0" : "0 0 1"; - const arc = `${Math.round(cornerRadius)} ${Math.round(cornerRadius)} ${direction}`; - return `M ${Math.round(pointerEdge)}, ${Math.round(y - pointerWidth / 2)} - L ${Math.round(x)}, ${Math.round(y)} - L ${Math.round(pointerEdge)}, ${Math.round(y + pointerWidth / 2)} - L ${Math.round(pointerEdge)}, ${Math.round(bottomEdge - cornerRadius)} - A ${arc} ${Math.round(pointerEdge + sign * cornerRadius)}, ${Math.round(bottomEdge)} + const arc = `${cornerRadius} ${cornerRadius} ${direction}`; + return `M ${pointerEdge}, ${y - pointerWidth / 2} + L ${x}, ${y} + L ${pointerEdge}, ${y + pointerWidth / 2} + L ${pointerEdge}, ${bottomEdge - cornerRadius} + A ${arc} ${pointerEdge + sign * cornerRadius}, ${bottomEdge} L ${oppositeEdge - sign * cornerRadius}, ${bottomEdge} - A ${arc} ${Math.round(oppositeEdge)}, ${Math.round(bottomEdge - cornerRadius)} + A ${arc} ${oppositeEdge}, ${bottomEdge - cornerRadius} L ${oppositeEdge}, ${topEdge + cornerRadius} - A ${arc} ${Math.round(oppositeEdge - sign * cornerRadius)}, ${Math.round(topEdge)} - L ${Math.round(pointerEdge + sign * cornerRadius)}, ${Math.round(topEdge)} - A ${arc} ${Math.round(pointerEdge)}, ${Math.round(topEdge + cornerRadius)} + A ${arc} ${oppositeEdge - sign * cornerRadius}, ${topEdge} + L ${pointerEdge + sign * cornerRadius}, ${topEdge} + A ${arc} ${pointerEdge}, ${topEdge + cornerRadius} z`; } diff --git a/src/victory-primitives/path-helpers.js b/src/victory-primitives/path-helpers.js index 7c6599d..eaf2ada 100644 --- a/src/victory-primitives/path-helpers.js +++ b/src/victory-primitives/path-helpers.js @@ -3,8 +3,6 @@ import { range } from "lodash"; export default { circle(x, y, size) { - x = Math.round(x); - y = Math.round(y); return `M ${x}, ${y} m ${-size}, 0 a ${size}, ${size} 0 1,0 ${size * 2},0 @@ -13,12 +11,10 @@ export default { square(x, y, size) { - x = Math.round(x); - y = Math.round(y); const baseSize = 0.87 * size; // eslint-disable-line no-magic-numbers const x0 = x - baseSize; const y1 = y + baseSize; - const distance = Math.floor(x + baseSize - x0); + const distance = x + baseSize - x0; return `M ${x0}, ${y1} h${distance} v-${distance} @@ -27,8 +23,6 @@ export default { }, diamond(x, y, size) { - x = Math.round(x); - y = Math.round(y); const baseSize = 0.87 * size; // eslint-disable-line no-magic-numbers const length = Math.sqrt(2 * (baseSize * baseSize)); return `M ${x}, ${y + length} @@ -40,8 +34,6 @@ export default { }, triangleDown(x, y, size) { - x = Math.round(x); - y = Math.round(y); const height = size / 2 * Math.sqrt(3); const x0 = x - size; const x1 = x + size; @@ -54,8 +46,6 @@ export default { }, triangleUp(x, y, size) { - x = Math.round(x); - y = Math.round(y); const height = size / 2 * Math.sqrt(3); const x0 = x - size; const x1 = x + size; @@ -68,8 +58,6 @@ export default { }, plus(x, y, size) { - x = Math.round(x); - y = Math.round(y); const baseSize = 1.1 * size; // eslint-disable-line no-magic-numbers const distance = baseSize / 1.5; // eslint-disable-line no-magic-numbers return ` @@ -89,9 +77,7 @@ export default { }, star(x, y, size) { - x = Math.round(x); - y = Math.round(y); - const baseSize = Math.round(1.35 * size); // eslint-disable-line no-magic-numbers + const baseSize = 1.35 * size; // eslint-disable-line no-magic-numbers const angle = Math.PI / 5; // eslint-disable-line no-magic-numbers const starCoords = range(10).map((index) => { // eslint-disable-line no-magic-numbers const length = index % 2 === 0 ? baseSize : baseSize / 2; From 052206b1fe9d5ccfd763ab644943a27a8908e6c9 Mon Sep 17 00:00:00 2001 From: boygirl Date: Mon, 13 Nov 2017 15:26:20 -0800 Subject: [PATCH 4/7] add barRatio prop for Bar primitive --- src/victory-primitives/bar.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/victory-primitives/bar.js b/src/victory-primitives/bar.js index 5a15116..8244dc9 100644 --- a/src/victory-primitives/bar.js +++ b/src/victory-primitives/bar.js @@ -11,6 +11,7 @@ export default class Bar extends React.Component { static propTypes = { ...CommonProps, alignment: PropTypes.oneOf(["start", "middle", "end"]), + barRatio: PropTypes.number, datum: PropTypes.object, horizontal: PropTypes.bool, padding: PropTypes.oneOfType([ @@ -185,7 +186,7 @@ export default class Bar extends React.Component { const range = scale.x.range(); const extent = Math.abs(range[1] - range[0]); const bars = data.length + 2; - const barRatio = 0.5; + const barRatio = props.barRatio || 0.5; // eslint-disable-next-line no-magic-numbers const defaultWidth = data.length < 2 ? 8 : (barRatio * extent / bars); return Math.max(1, defaultWidth); From ab6b762ab75a81beb3965a263265ac8d3f3541ed Mon Sep 17 00:00:00 2001 From: boygirl Date: Mon, 13 Nov 2017 16:20:29 -0800 Subject: [PATCH 5/7] add cornerRadius prop for Bar primitive --- src/victory-primitives/bar.js | 27 +++++++++++++++++++++------ 1 file changed, 21 insertions(+), 6 deletions(-) diff --git a/src/victory-primitives/bar.js b/src/victory-primitives/bar.js index 8244dc9..c301866 100644 --- a/src/victory-primitives/bar.js +++ b/src/victory-primitives/bar.js @@ -12,6 +12,7 @@ export default class Bar extends React.Component { ...CommonProps, alignment: PropTypes.oneOf(["start", "middle", "end"]), barRatio: PropTypes.number, + cornerRadius: PropTypes.number, datum: PropTypes.object, horizontal: PropTypes.bool, padding: PropTypes.oneOfType([ @@ -75,9 +76,15 @@ export default class Bar extends React.Component { getVerticalBarPath(props, width) { const { x0, x1, y0, y1 } = this.getPosition(props, width); + const cornerRadius = props.cornerRadius || 0; + const sign = y0 > y1 ? 1 : -1; + const direction = sign > 0 ? "0 0 1" : "0 0 0"; + const arc = `${cornerRadius} ${cornerRadius} ${direction}`; return `M ${x0}, ${y0} - L ${x0}, ${y1} - L ${x1}, ${y1} + L ${x0}, ${y1 + sign * cornerRadius} + A ${arc}, ${x0 + cornerRadius}, ${y1} + L ${x1 - cornerRadius}, ${y1} + A ${arc}, ${x1}, ${y1 + sign * cornerRadius} L ${x1}, ${y0} L ${x0}, ${y0} z`; @@ -85,10 +92,16 @@ export default class Bar extends React.Component { getHorizontalBarPath(props, width) { const { x0, x1, y0, y1 } = this.getPosition(props, width); + const cornerRadius = props.cornerRadius || 0; + const sign = y1 > y0 ? 1 : -1; + const direction = sign > 0 ? "0 0 1" : "0 0 0"; + const arc = `${cornerRadius} ${cornerRadius} ${direction}`; return `M ${y0}, ${x0} L ${y0}, ${x1} - L ${y1}, ${x1} - L ${y1}, ${x0} + L ${y1 - sign * cornerRadius}, ${x1} + A ${arc}, ${y1}, ${x1 + cornerRadius} + L ${y1}, ${x0 - cornerRadius} + A ${arc}, ${y1 - sign * cornerRadius}, ${x0} L ${y0}, ${x0} z`; } @@ -144,7 +157,7 @@ export default class Bar extends React.Component { } } - getVerticalPolarBarPath(props) { + getVerticalPolarBarPath(props) { // eslint-disable-line max-statements const { datum, scale, style, index, alignment } = props; const r1 = scale.y(datum._y0 || 0); const r2 = scale.y(datum._y1 !== undefined ? datum._y1 : datum._y); @@ -160,11 +173,13 @@ export default class Bar extends React.Component { start = this.getStartAngle(props, index); end = this.getEndAngle(props, index); } + const cornerRadius = props.cornerRadius || 0; const path = d3Shape.arc() .innerRadius(r1) .outerRadius(r2) .startAngle(this.transformAngle(start)) - .endAngle(this.transformAngle(end)); + .endAngle(this.transformAngle(end)) + .cornerRadius(cornerRadius); return path(); } From b5aef989babd8c5d4a2e7ff8c4bf2ba3f4cc5122 Mon Sep 17 00:00:00 2001 From: boygirl Date: Tue, 14 Nov 2017 15:28:15 -0800 Subject: [PATCH 6/7] polar bars with corner radius only on top --- src/victory-primitives/bar.js | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/victory-primitives/bar.js b/src/victory-primitives/bar.js index c301866..349491f 100644 --- a/src/victory-primitives/bar.js +++ b/src/victory-primitives/bar.js @@ -157,6 +157,12 @@ export default class Bar extends React.Component { } } + getPathMoves(path) { + const moves = path.match(/[A-Z]/g); + const coords = path.split(/[A-Z]/); + return moves.map((m, i) => ({ command: m, coords: coords[i + 1].split(",") })); + } + getVerticalPolarBarPath(props) { // eslint-disable-line max-statements const { datum, scale, style, index, alignment } = props; const r1 = scale.y(datum._y0 || 0); @@ -178,8 +184,23 @@ export default class Bar extends React.Component { .innerRadius(r1) .outerRadius(r2) .startAngle(this.transformAngle(start)) - .endAngle(this.transformAngle(end)) - .cornerRadius(cornerRadius); + .endAngle(this.transformAngle(end)); + if (cornerRadius) { + const withCorners = d3Shape.arc() + .innerRadius(r1) + .outerRadius(r2) + .startAngle(this.transformAngle(start)) + .endAngle(this.transformAngle(end)) + .cornerRadius(cornerRadius); + const moves = this.getPathMoves(path()); + const cornerMoves = this.getPathMoves(withCorners()); + // eslint-disable-next-line no-magic-numbers + const totalMoves = cornerMoves.slice(0, 4).concat(moves.slice(2)); + return totalMoves.reduce((memo, move) => { + memo += `${move.command} ${move.coords.join()}`; + return memo; + }, ""); + } return path(); } From 4e23a90c0d3b00c031beb6230671c34d623edd36 Mon Sep 17 00:00:00 2001 From: boygirl Date: Tue, 14 Nov 2017 15:43:16 -0800 Subject: [PATCH 7/7] update specs --- test/client/spec/svg-test-helper.js | 3 --- test/client/spec/victory-primitives/bar.spec.js | 11 +++++------ .../spec/victory-primitives/path-helper.spec.js | 2 +- 3 files changed, 6 insertions(+), 10 deletions(-) diff --git a/test/client/spec/svg-test-helper.js b/test/client/spec/svg-test-helper.js index bccc137..e9e9f11 100644 --- a/test/client/spec/svg-test-helper.js +++ b/test/client/spec/svg-test-helper.js @@ -1,7 +1,6 @@ import { property, max, min } from "lodash"; const FLYOUT_SEQUENCE = ["M", "L", "L", "L", "A", "L", "A", "L", "A", "L", "A", "z"]; -const RECTANGLE_SEQUENCE = ["M", "L", "L", "L", "L", "z"]; const parseSvgPathCommands = (commandStr) => { const matches = commandStr.match( @@ -54,8 +53,6 @@ const expectations = { getBarShape(wrapper) { const commands = getPathCommandsFromWrapper(wrapper); - expect(exhibitsShapeSequence(wrapper, RECTANGLE_SEQUENCE, commands)).to.equal(true); - const points = commands.filter((command) => { return command.name !== "z"; }); const verticalPoints = points.map(property("args.1")); const horizontalPoints = points.map(property("args.0")); diff --git a/test/client/spec/victory-primitives/bar.spec.js b/test/client/spec/victory-primitives/bar.spec.js index a07ba59..0abdfb6 100644 --- a/test/client/spec/victory-primitives/bar.spec.js +++ b/test/client/spec/victory-primitives/bar.spec.js @@ -26,8 +26,7 @@ describe("victory-primitives/bar", () => { it("should render a vertical bar", () => { const wrapper = shallow(); const barShape = SvgTestHelper.getBarShape(wrapper); - - expect(barShape.height).to.eql(10); + expect(Math.round(barShape.height)).to.eql(10); }); it("should render a horizontal bar", () => { @@ -36,7 +35,7 @@ describe("victory-primitives/bar", () => { const wrapper = shallow(); const barShape = SvgTestHelper.getBarShape(wrapper); - expect(barShape.width).to.eql(10); + expect(Math.round(barShape.width)).to.eql(10); }); it("should render a default bar width when one is not provided", () => { @@ -49,15 +48,15 @@ describe("victory-primitives/bar", () => { const wrapper = shallow(); const barShape = SvgTestHelper.getBarShape(wrapper); - expect(barShape.width).to.eql(1); + expect(Math.floor(barShape.width)).to.eql(2); }); it("should allow override of width by passing a style", () => { - const props = Object.assign({}, baseProps, { style: { width: 1 } }); + const props = Object.assign({}, baseProps, { style: { width: 3 } }); const wrapper = shallow(); const barShape = SvgTestHelper.getBarShape(wrapper); - expect(barShape.width).to.eql(1); + expect(Math.floor(barShape.width)).to.eql(3); }); }); diff --git a/test/client/spec/victory-primitives/path-helper.spec.js b/test/client/spec/victory-primitives/path-helper.spec.js index bdc9dd3..3e70d2c 100644 --- a/test/client/spec/victory-primitives/path-helper.spec.js +++ b/test/client/spec/victory-primitives/path-helper.spec.js @@ -58,7 +58,7 @@ describe("path-helpers", () => { it("draws a path for a star at the correct location", () => { const pathResult = PathHelpers.star(0, 0, 1); const angle = Math.PI / 5; - const baseSize = Math.round(1.35 * size); + const baseSize = 1.35 * size; expect(pathResult).to.contain(`M ${(baseSize) * Math.sin(angle) + x }, ${(baseSize) * Math.cos(angle) + y}`); });