Skip to content
This repository has been archived by the owner on Feb 19, 2022. It is now read-only.

(pre-release) Improvement/react art #97

Closed
wants to merge 12 commits into from
Closed

(pre-release) Improvement/react art #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
4b5423a
switch to react-art
Jan 25, 2016
3949c28
fix tests
Jan 25, 2016
79c2a12
lint
Jan 25, 2016
f754a28
use updated victory-util
Jan 25, 2016
063c1f4
merge master
Jan 27, 2016
ca6c90c
update builder versions
Jan 27, 2016
391d86e
update victory-util
Jan 27, 2016
69cf14d
merge pre-release
Jan 27, 2016
399c641
punt on testing
Jan 28, 2016
0ba4fd9
lint
Jan 28, 2016
d5ec8b0
turn off chart wrapper
Jan 28, 2016
af7526f
lint
Jan 28, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion demo/demo.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import _ from "lodash";
import React from "react";
import {VictoryBar} from "../src/index";
import {VictoryChart} from "victory-chart";
// import {VictoryChart} from "victory-chart";
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yeah, I haven't updated victory-chart to work with react-art yet, so that is all temporarily broken


export default class App extends React.Component {
constructor() {
Expand Down Expand Up @@ -64,6 +64,31 @@ export default class App extends React.Component {
return (
<div className="demo">
<h1>Victory Bar</h1>
<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}}
/>

<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}}
/>

<ChartWrap>
<VictoryBar
Expand Down Expand Up @@ -177,7 +202,9 @@ class ChartWrap extends React.Component {
return (
<div>
{React.cloneElement(this.props.children, this.props)}
{/* turn off chart wrapper until converted to react-art
<VictoryChart {...this.props}>{this.props.children}</VictoryChart>
*/}
</div>
);
}
Expand Down
7 changes: 4 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,14 @@
"test": "builder run npm:test"
},
"dependencies": {
"builder": "~2.2.2",
"builder": "~2.4.0",
"builder-victory-component": "~0.2.1",
"lodash": "^3.10.1",
"radium": "^0.16.2",
"react-art": "git+https://github.com/formidablelabs/react-art#supportBrowserColors",
"victory-animation": "^0.0.13",
"victory-label": "^0.1.8",
"victory-util": "^2.1.0"
"victory-label": "^0.3.0",
"victory-util": "^2.1.2"
},
"devDependencies": {
"builder-victory-component-dev": "~0.2.1",
Expand Down
5 changes: 3 additions & 2 deletions src/components/bar-label.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import React, { PropTypes } from "react";
import Radium from "radium";
import { VictoryLabel } from "victory-label";
import { Chart } from "victory-util";
import { Group } from "react-art";

@Radium
export default class BarLabel extends React.Component {
Expand Down Expand Up @@ -86,9 +87,9 @@ export default class BarLabel extends React.Component {

render() {
return (
<g>
<Group>
{this.renderLabel(this.props)}
</g>
</Group>
);
}
}
11 changes: 4 additions & 7 deletions src/components/bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React, { PropTypes } from "react";
import Radium from "radium";
import { Chart } from "victory-util";
import { Group, Shape } from "react-art";

@Radium
export default class Bar extends React.Component {
Expand Down Expand Up @@ -44,19 +45,15 @@ export default class Bar extends React.Component {
const path = props.position.independent ?
this.getBarPath(props.position, barWidth) : undefined;
return (
<path
d={path}
style={style}
shapeRendering="optimizeSpeed"
/>
<Shape d={path} {...style}/>
);
}

render() {
return (
<g>
<Group>
{this.renderBar(this.props)}
</g>
</Group>
);
}
}
10 changes: 5 additions & 5 deletions src/components/victory-bar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ import Bar from "./bar";
import BarLabel from "./bar-label";
import DomainHelpers from "../domain-helpers";
import LayoutHelpers from "../layout-helpers";
import { Surface, Group} from "react-art";

const defaultStyles = {
data: {
width: 8,
padding: 6,
stroke: "transparent",
strokeWidth: 0,
fill: "#756f6a",
opacity: 1
},
Expand Down Expand Up @@ -267,7 +267,7 @@ export default class VictoryBar extends React.Component {
const labelComponent = this.props.labelComponents ?
this.props.labelComponents[labelIndex] || this.props.labelComponents[0] : undefined;
return (
<g key={`series-${index}-bar-${barIndex}`}>
<Group key={`series-${index}-bar-${barIndex}`}>
{barComponent}
<BarLabel key={`label-series-${index}-bar-${barIndex}`}
horizontal={this.props.horizontal}
Expand All @@ -277,7 +277,7 @@ export default class VictoryBar extends React.Component {
labelText={labelText}
labelComponent={labelComponent}
/>
</g>
</Group>
);
}
return barComponent;
Expand Down Expand Up @@ -334,7 +334,7 @@ export default class VictoryBar extends React.Component {
);
}
const style = Chart.getStyles(this.props, defaultStyles);
const group = <g style={style.parent}>{this.renderData(this.props, style)}</g>;
return this.props.standalone ? <svg style={style.parent}>{group}</svg> : group;
const group = <Group {...style.parent}>{this.renderData(this.props, style)}</Group>;
return this.props.standalone ? <Surface {...style.parent}>{group}</Surface> : group;
}
}
186 changes: 89 additions & 97 deletions test/client/spec/components/victory-bar.spec.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,114 +2,106 @@
* Client tests
*/
/*eslint-disable max-nested-callbacks */
/* global sinon */

import React from "react";
import ReactDOM from "react-dom";
import _ from "lodash";
// import _ from "lodash";
import VictoryBar from "src/components/victory-bar";
import DomainHelpers from "src/domain-helpers";
// import DomainHelpers from "src/domain-helpers";
// Use `TestUtils` to inject into DOM, simulate events, etc.
// See: https://facebook.github.io/react/docs/test-utils.html
import TestUtils from "react-addons-test-utils";

const getElement = function (output, tagName) {
return ReactDOM.findDOMNode(
TestUtils.findRenderedDOMComponentWithTag(output, tagName)
);
};

let renderedComponent;
import { Surface } from "react-art";

describe("components/victory-bar", () => {
describe("default component rendering", () => {
before(() => {
renderedComponent = TestUtils.renderIntoDocument(<VictoryBar/>);
});

it("renders an svg with the correct width and height", () => {
const svg = getElement(renderedComponent, "svg");
it("renders a Surface component with the default width and height", () => {
const renderer = TestUtils.createRenderer();
renderer.render(<VictoryBar/>);
const output = renderer.getRenderOutput();
expect(output.type).to.equal(Surface);
// default width and height
expect(svg.style.width).to.equal(`${VictoryBar.defaultProps.width}px`);
expect(svg.style.height).to.equal(`${VictoryBar.defaultProps.height}px`);
expect(output.props.width).to.equal(VictoryBar.defaultProps.width);
expect(output.props.height).to.equal(VictoryBar.defaultProps.height);
});
});

describe("rendering data", () => {
it("renders bars for {x, y} shaped data (default)", () => {
const data = _.range(10).map((i) => ({x: i, y: i}));
renderedComponent = TestUtils.renderIntoDocument(<VictoryBar data={data}/>);
const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
expect(path.length).to.equal(10);
});

it("renders bars for array-shaped data", () => {
const data = _.range(20).map((i) => [i, i]);
renderedComponent = TestUtils.renderIntoDocument(<VictoryBar data={data} x={0} y={1}/>);
const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
expect(path.length).to.equal(20);
});

it("renders bars for deeply-nested data", () => {
const data = _.range(40).map((i) => ({a: {b: [{x: i, y: i}]}}));
renderedComponent = TestUtils.renderIntoDocument(
<VictoryBar data={data} x="a.b[0].x" y="a.b[0].y"/>
);
const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
expect(path.length).to.equal(40);
});

it("renders bars values with null accessor", () => {
const data = _.range(30);
renderedComponent = TestUtils.renderIntoDocument(
<VictoryBar data={data} x={null} y={null}/>
);
const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
expect(path.length).to.equal(30);
});
});

describe("rendering multiple datasets", () => {
let sandbox;
beforeEach(() => {
sandbox = sinon.sandbox.create();
sandbox.spy(DomainHelpers, "isStacked");
sandbox.spy(DomainHelpers, "shouldGroup");
});

afterEach(() => {
sandbox.restore();
});

it("renders grouped bars if grouped prop is true", () => {
const datasets = _.range(3).map(() => _.range(10).map((i) => ({x: i, y: i})));
renderedComponent = TestUtils.renderIntoDocument(
<VictoryBar grouped data={datasets}/>
);
expect(DomainHelpers.shouldGroup).called.and.returned(true);
expect(DomainHelpers.isStacked).called.and.returned(false);
const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
expect(path.length).to.equal(30);
});

it("renders stacked bars if stacked prop is true", () => {
const datasets = _.range(4).map(() => _.range(10).map((i) => ({x: i, y: i})));
renderedComponent = TestUtils.renderIntoDocument(
<VictoryBar stacked data={datasets}/>
);
expect(DomainHelpers.shouldGroup).called.and.returned(false);
expect(DomainHelpers.isStacked).called.and.returned(true);
const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
expect(path.length).to.equal(40);
});

it("renders grouped if grouped is undefined, data is 2d array, & default accessors", () => {
const datasets = _.range(5).map(() => _.range(10).map((i) => ({x: i, y: i})));
renderedComponent = TestUtils.renderIntoDocument(<VictoryBar data={datasets}/>);
expect(DomainHelpers.shouldGroup).called.and.returned(true);
expect(DomainHelpers.isStacked).called.and.returned(false);
const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
expect(path.length).to.equal(50);
});
});
// describe("rendering data", () => {
// let renderedComponent;
// it("renders bars for {x, y} shaped data (default)", () => {
// const data = _.range(10).map((i) => ({x: i, y: i}));
// renderedComponent = TestUtils.renderIntoDocument(<VictoryBar data={data}/>);
// const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "Shape");
// expect(path.length).to.equal(10);
// });
//
// it("renders bars for array-shaped data", () => {
// const data = _.range(20).map((i) => [i, i]);
// renderedComponent = TestUtils.renderIntoDocument(<VictoryBar data={data} x={0} y={1}/>);
// const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
// expect(path.length).to.equal(20);
// });
//
// it("renders bars for deeply-nested data", () => {
// const data = _.range(40).map((i) => ({a: {b: [{x: i, y: i}]}}));
// renderedComponent = TestUtils.renderIntoDocument(
// <VictoryBar data={data} x="a.b[0].x" y="a.b[0].y"/>
// );
// const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
// expect(path.length).to.equal(40);
// });
//
// it("renders bars values with null accessor", () => {
// const data = _.range(30);
// renderedComponent = TestUtils.renderIntoDocument(
// <VictoryBar data={data} x={null} y={null}/>
// );
// const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
// expect(path.length).to.equal(30);
// });
// });
//
// describe("rendering multiple datasets", () => {
// let sandbox;
// let renderedComponent;
// beforeEach(() => {
// sandbox = sinon.sandbox.create();
// sandbox.spy(DomainHelpers, "isStacked");
// sandbox.spy(DomainHelpers, "shouldGroup");
// });
//
// afterEach(() => {
// sandbox.restore();
// });
//
// it("renders grouped bars if grouped prop is true", () => {
// const datasets = _.range(3).map(() => _.range(10).map((i) => ({x: i, y: i})));
// renderedComponent = TestUtils.renderIntoDocument(
// <VictoryBar grouped data={datasets}/>
// );
// expect(DomainHelpers.shouldGroup).called.and.returned(true);
// expect(DomainHelpers.isStacked).called.and.returned(false);
// const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
// expect(path.length).to.equal(30);
// });
//
// it("renders stacked bars if stacked prop is true", () => {
// const datasets = _.range(4).map(() => _.range(10).map((i) => ({x: i, y: i})));
// renderedComponent = TestUtils.renderIntoDocument(
// <VictoryBar stacked data={datasets}/>
// );
// expect(DomainHelpers.shouldGroup).called.and.returned(false);
// expect(DomainHelpers.isStacked).called.and.returned(true);
// const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
// expect(path.length).to.equal(40);
// });
//
// it("renders grouped if grouped is undefined, data is 2d array, & default accessors", () => {
// const datasets = _.range(5).map(() => _.range(10).map((i) => ({x: i, y: i})));
// renderedComponent = TestUtils.renderIntoDocument(<VictoryBar data={datasets}/>);
// expect(DomainHelpers.shouldGroup).called.and.returned(true);
// expect(DomainHelpers.isStacked).called.and.returned(false);
// const path = TestUtils.scryRenderedDOMComponentsWithTag(renderedComponent, "path");
// expect(path.length).to.equal(50);
// });
// });
});