Skip to content

Commit

Permalink
feat(bar): update bar chart
Browse files Browse the repository at this point in the history
  • Loading branch information
Raphaël Benitte committed Jul 30, 2017
1 parent de08c6b commit 05565ca
Show file tree
Hide file tree
Showing 127 changed files with 10,534 additions and 4,336 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ logs
node_modules
.idea
/lib
/es
npm-debug.log*
43 changes: 31 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,30 +8,36 @@
**nivo** provides supercharged React components to easily build dataviz apps,
it's built on top of d3.

Several libraries already exist for React d3 integration, but just a few provide server side rendering ability and fully declarative charts.

## Features

- use d3 v4
- supports [d3 v4](https://github.com/d3/d3/blob/master/CHANGES.md)
- composable
- [responsive charts](http://nivo.rocks/#/components?term=responsive) (`<Responsive* />` components)
- highly customizable
- motion/transitions
- motion/transitions, even the non-d3 based components (DOM managed by React) support transitions within the help of [react-motion](https://github.com/chenglou/react-motion)
- [component playground](http://nivo.rocks)
- [exhaustive documentation](http://nivo.rocks)
- isomorphic rendering
- support for SVG and HTML
- placeholder components for advanced customization
- support for SVG and [HTML](http://nivo.rocks/#/components?term=html) (I'm also considering canvas support)
- [placeholder components](http://nivo.rocks/#/components?term=placeholder) for advanced customization (`<*Placeholders />` components)
- [server side rendering API](https://github.com/plouc/nivo-api)

## Components

- Bars
- [`<Bars />`](http://nivo.rocks/#/bars/react)
- [`<ResponsiveBars />`](http://nivo.rocks/#/bars/react)
- Bar
- [`<Bar />`](http://nivo.rocks/#/bar)
- [`<ResponsiveBar />`](http://nivo.rocks/#/bar)
- Line
- [`<Line />`](http://nivo.rocks/#/line/react)
- [`<ResponsiveLine />`](http://nivo.rocks/#/line/react)
- [`<Line />`](http://nivo.rocks/#/line)
- [`<ResponsiveLine />`](http://nivo.rocks/#/line)
- Pie
- [`<Pie />`](http://nivo.rocks/#/pie)
- [`<ResponsivePie />`](http://nivo.rocks/#/pie)
- Bubble
- [`<Bubble />`](http://nivo.rocks/#/bubble/react)
- [`<ResponsiveBubble />`](http://nivo.rocks/#/bubble/react)
- [`<Bubble />`](http://nivo.rocks/#/bubble)
- [`<ResponsiveBubble />`](http://nivo.rocks/#/bubble)
- [`<BubblePlaceholders />`](http://nivo.rocks/#/bubble/placeholders)
- [`<ResponsiveBubblePlaceholders />`](http://nivo.rocks/#/bubble/placeholders)
- TreeMap
Expand All @@ -41,10 +47,22 @@ it's built on top of d3.
- [`<ResponsiveTreeMapHTML />`](http://nivo.rocks/#/treemap/html)
- [`<TreeMapPlaceholders />`](http://nivo.rocks/#/treemap/placeholders)
- [`<ResponsiveTreeMapPlaceholders />`](http://nivo.rocks/#/treemap/placeholders)
- Calendar
- [`<Calendar />`](http://nivo.rocks/#/calendar)
- [`<ResponsiveCalendar />`](http://nivo.rocks/#/calendar)
- Chord
- [`<Chord />`](http://nivo.rocks/#/chord)
- [`<ResponsiveChord />`](http://nivo.rocks/#/chord)

## [HTTP API](https://github.com/plouc/nivo-api)

- [`<Bar />`](https://nivo-api.herokuapp.com/samples/bar)
- [`<Line />`](https://nivo-api.herokuapp.com/samples/line)
- [`<Pie />`](https://nivo-api.herokuapp.com/samples/pie)
- [`<Bubble />`](https://nivo-api.herokuapp.com/samples/bubble)
- [`<TreeMap />`](https://nivo-api.herokuapp.com/samples/treemap)
- [`<Chord />`](https://nivo-api.herokuapp.com/samples/chord)

## Guides

- [colors](http://nivo.rocks/#/guides/colors)
Expand All @@ -53,6 +71,7 @@ it's built on top of d3.

- [nivo](https://github.com/plouc/nivo) - the nivo library
- [nivo-api](https://github.com/plouc/nivo-api) - the nivo http api
- [nivo-api-docker](https://github.com/plouc/nivo-api-docker) - a Docker image for the nivo http api
- [nivo-generators](https://github.com/plouc/nivo-generators) - the data generators used for nivo-website and http API samples
- [nivo-website](https://github.com/plouc/nivo-website) - the source for the nivo website

Expand All @@ -66,7 +85,7 @@ it's built on top of d3.

[license-image]: https://img.shields.io/github/license/plouc/nivo.svg?style=flat-square
[license-url]: https://github.com/plouc/nivo/blob/master/LICENSE.md
[npm-image]: https://img.shields.io/npm/v/nivo.svg?style=flat-square
[npm-image]: [npm-image]: https://img.shields.io/npm/v/nivo.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/nivo
[travis-image]: https://img.shields.io/travis/plouc/nivo.svg?style=flat-square
[travis-url]: https://travis-ci.org/plouc/nivo
Expand Down
28 changes: 18 additions & 10 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "nivo",
"version": "1.0.0-alpha.4",
"version": "1.0.0-alpha.8",
"author": {
"name": "Raphaël Benitte",
"url": "https://github.com/plouc"
Expand All @@ -10,9 +10,11 @@
"d3": "4.2.6",
"d3-scale-chromatic": "1.0.2",
"invariant": "2.2.1",
"lodash": "4.11.1",
"lodash": "4.16.3",
"prop-types": "^15.5.10",
"react-dimensions": "1.3.0",
"react-motion": "0.4.5"
"react-measure": "^2.0.2",
"react-motion": "^0.5.0"
},
"devDependencies": {
"ava": "0.14.0",
Expand All @@ -21,6 +23,7 @@
"babel-preset-es2015": "6.6.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"cross-env": "^5.0.1",
"expect": "1.18.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
Expand All @@ -29,22 +32,27 @@
"karma-sourcemap-loader": "0.3.7",
"karma-webpack": "1.7.0",
"mocha": "2.4.5",
"react": "15.3.2",
"react-dom": "15.3.2",
"prettier": "^1.5.3",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"webpack": "1.13.0"
},
"peerDependencies": {
"react": "^15.0.0"
"react": "^15.4.1"
},
"main": "lib",
"main": "./lib/index.js",
"module": "es/index.js",
"jsnext:main": "es/index.js",
"scripts": {
"watch": "babel src --watch --out-dir lib",
"watch-test": "ava --watch",
"test": "npm run test-unit && npm run test-func",
"test-unit": "ava",
"test-func": "karma start",
"build": "rm -rf lib/* && babel src --no-comments --out-dir lib",
"prebublish": "npm run build"
"build:commonjs": "cross-env BABEL_ENV=commonjs babel src --out-dir lib",
"build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
"build": "npm run build:commonjs && npm run build:es",
"prebublish": "npm run build",
"format": "prettier --tab-width=4 --bracket-spacing --no-semi --trailing-comma es5 --single-quote --write 'src/**/*.js' 'specs/**/*.js' 'test/**/*.js'"
},
"ava": {
"files": [
Expand Down
87 changes: 46 additions & 41 deletions specs/Pie.spec.js
Original file line number Diff line number Diff line change
@@ -1,74 +1,79 @@
import expect, { spyOn } from 'expect';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Chart, Pie } from '../src/';
import expect, { spyOn } from 'expect'
import React, { Component } from 'react'
import { render } from 'react-dom'
import { Chart, Pie } from '../src/'

describe('<Pie>', function() {
this.timeout(10000)

describe('<Pie>', function () {
this.timeout(10000);

let node;
let node
beforeEach(() => {
node = document.createElement('div');
document.body.appendChild(node);
});
node = document.createElement('div')
document.body.appendChild(node)
})

afterEach(() => {
document.body.removeChild(node);
});
document.body.removeChild(node)
})

const data = [
{ label: 'a', value: 2 },
{ label: 'b', value: 2 },
{ label: 'c', value: 2 }
];
{ label: 'c', value: 2 },
]

it('should render a slice for each datum', done => {
render((
render(
<div style={{ width: 200, height: 200 }}>
<Chart>
<Pie
width={400} height={400}
width={400}
height={400}
data={data}
colors="nivo"
transitionDuration={0}
/>
</Chart>
</div>
), node, () => {
setTimeout(() => {
const slices = node.getElementsByClassName('nivo_pie_slice');
expect(slices).toNotBe(null);
expect(slices.length).toBe(data.length);
</div>,
node,
() => {
setTimeout(() => {
const slices = node.getElementsByClassName('nivo_pie_slice')
expect(slices).toNotBe(null)
expect(slices.length).toBe(data.length)

done();
}, 400);
})
});
done()
}, 400)
}
)
})

it(`should support donut mode by using 'innerRadius' property`, done => {
render((
render(
<div style={{ width: 200, height: 200 }}>
<Chart>
<Pie
width={400} height={400}
width={400}
height={400}
data={data}
colors="nivo"
innerRadius={0.9}
transitionDuration={0}
/>
</Chart>
</div>
), node, () => {
setTimeout(() => {
const slices = node.getElementsByClassName('nivo_pie_slice');
expect(slices).toNotBe(null);
expect(slices.length).toBe(data.length);
</div>,
node,
() => {
setTimeout(() => {
const slices = node.getElementsByClassName('nivo_pie_slice')
expect(slices).toNotBe(null)
expect(slices.length).toBe(data.length)

console.log(slices.length);
console.log(slices.length)

done();
}, 400);
})
});
});
done()
}, 400)
}
)
})
})
90 changes: 57 additions & 33 deletions specs/RadialStack.spec.js
Original file line number Diff line number Diff line change
@@ -1,47 +1,71 @@
import expect, { spyOn } from 'expect';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Chart, RadialStack } from '../src/';
import expect, { spyOn } from 'expect'
import React, { Component } from 'react'
import { render } from 'react-dom'
import { Chart, RadialStack } from '../src/'

describe('<RadialStack>', function() {
this.timeout(10000)

describe('<RadialStack>', function () {
this.timeout(10000);

let node;
let node
beforeEach(() => {
node = document.createElement('div');
document.body.appendChild(node);
});
node = document.createElement('div')
document.body.appendChild(node)
})

afterEach(() => {
document.body.removeChild(node);
});
document.body.removeChild(node)
})

const data = [
[{ x: 0, y: 10 }, { x: 1, y: 20 }, { x: 2, y: 30 }, { x: 3, y: 2 }, { x: 4, y: 80 }, { x: 5, y: 30 }],
[{ x: 0, y: 10 }, { x: 1, y: 20 }, { x: 2, y: 30 }, { x: 3, y: 2 }, { x: 4, y: 20 }, { x: 5, y: 30 }],
[{ x: 0, y: 10 }, { x: 1, y: 20 }, { x: 2, y: 30 }, { x: 3, y: 2 }, { x: 4, y: 40 }, { x: 5, y: 30 }]
];

['zero', 'wiggle', 'silhouette', 'expand'].forEach(offsetMode => {
[
{ x: 0, y: 10 },
{ x: 1, y: 20 },
{ x: 2, y: 30 },
{ x: 3, y: 2 },
{ x: 4, y: 80 },
{ x: 5, y: 30 },
],
[
{ x: 0, y: 10 },
{ x: 1, y: 20 },
{ x: 2, y: 30 },
{ x: 3, y: 2 },
{ x: 4, y: 20 },
{ x: 5, y: 30 },
],
[
{ x: 0, y: 10 },
{ x: 1, y: 20 },
{ x: 2, y: 30 },
{ x: 3, y: 2 },
{ x: 4, y: 40 },
{ x: 5, y: 30 },
],
]
;['zero', 'wiggle', 'silhouette', 'expand'].forEach(offsetMode => {
it(`should support "${offsetMode}" offset mode`, done => {
render((
render(
<RadialStack
layers={data}
width={400} height={400}
width={400}
height={400}
offset={offsetMode}
colors="nivo"
transitionDuration={0}
/>
), node, () => {
setTimeout(() => {
const areas = node.getElementsByClassName('nivo_radial-stack_area');
expect(areas).toNotBe(null);
expect(areas.length).toBe(data.length);
/>,
node,
() => {
setTimeout(() => {
const areas = node.getElementsByClassName(
'nivo_radial-stack_area'
)
expect(areas).toNotBe(null)
expect(areas.length).toBe(data.length)

done();
}, 400);
});
});
});
});
done()
}, 400)
}
)
})
})
})
Loading

0 comments on commit 05565ca

Please sign in to comment.