', 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 root = { id: 'nivo', children: [
- { id: 'charts', children: [
- { id: 'Pie', loc: 74467 },
- { id: 'Stack', loc: 74467 },
- { id: 'Tree', loc: 74467 },
- { id: 'Bubble', loc: 74467 }
- ]},
- { id: 'utils', children: [
- { id: 'Colors', loc: 74467 },
- { id: 'Arcs', loc: 74467 },
- { id: 'Data', loc: 74467 },
- { id: 'Animation', loc: 74467 }
- ]}
- ]};
+ const root = {
+ id: 'nivo',
+ children: [
+ {
+ id: 'charts',
+ children: [
+ { id: 'Pie', loc: 74467 },
+ { id: 'Stack', loc: 74467 },
+ { id: 'Tree', loc: 74467 },
+ { id: 'Bubble', loc: 74467 },
+ ],
+ },
+ {
+ id: 'utils',
+ children: [
+ { id: 'Colors', loc: 74467 },
+ { id: 'Arcs', loc: 74467 },
+ { id: 'Data', loc: 74467 },
+ { id: 'Animation', loc: 74467 },
+ ],
+ },
+ ],
+ }
it('should render a path for each link', done => {
- render((
+ render(
', function () {
identity={d => `${d.parent ? d.parent.id : 'root'}.${d.id}`}
transitionDuration={0}
/>
-
- ), node, () => {
- setTimeout(() => {
- const links = node.getElementsByClassName('nivo_tree_link');
- expect(links).toNotBe(null);
- expect(links.length).toBe(10);
+ ,
+ node,
+ () => {
+ setTimeout(() => {
+ const links = node.getElementsByClassName('nivo_tree_link')
+ expect(links).toNotBe(null)
+ expect(links.length).toBe(10)
- done();
- }, 400);
- })
- });
+ done()
+ }, 400)
+ }
+ )
+ })
it(`should support 'horizontal-reverse' direction `, done => {
- render((
+ render(
', function () {
identity={d => `${d.parent ? d.parent.id : 'root'}.${d.id}`}
transitionDuration={0}
/>
-
- ), node, () => {
- setTimeout(() => {
- const links = node.getElementsByClassName('nivo_tree_link');
- expect(links).toNotBe(null);
- expect(links.length).toBe(10);
+ ,
+ node,
+ () => {
+ setTimeout(() => {
+ const links = node.getElementsByClassName('nivo_tree_link')
+ expect(links).toNotBe(null)
+ expect(links.length).toBe(10)
- done();
- }, 400);
- })
- });
+ done()
+ }, 400)
+ }
+ )
+ })
it(`should support 'vertical' direction `, done => {
- render((
+ render(
', function () {
identity={d => `${d.parent ? d.parent.id : 'root'}.${d.id}`}
transitionDuration={0}
/>
-
- ), node, () => {
- setTimeout(() => {
- const links = node.getElementsByClassName('nivo_tree_link');
- expect(links).toNotBe(null);
- expect(links.length).toBe(10);
+ ,
+ node,
+ () => {
+ setTimeout(() => {
+ const links = node.getElementsByClassName('nivo_tree_link')
+ expect(links).toNotBe(null)
+ expect(links.length).toBe(10)
- done();
- }, 400);
- })
- });
+ done()
+ }, 400)
+ }
+ )
+ })
it(`should support 'vertical-reverse' direction `, done => {
- render((
+ render(
', function () {
identity={d => `${d.parent ? d.parent.id : 'root'}.${d.id}`}
transitionDuration={0}
/>
-
- ), node, () => {
- setTimeout(() => {
- const links = node.getElementsByClassName('nivo_tree_link');
- expect(links).toNotBe(null);
- expect(links.length).toBe(10);
+ ,
+ node,
+ () => {
+ setTimeout(() => {
+ const links = node.getElementsByClassName('nivo_tree_link')
+ expect(links).toNotBe(null)
+ expect(links.length).toBe(10)
- done();
- }, 400);
- })
- });
-});
+ done()
+ }, 400)
+ }
+ )
+ })
+})
diff --git a/specs/bubble/Bubble.spec.js b/specs/bubble/Bubble.spec.js
index 125e44446..61ab53f04 100644
--- a/specs/bubble/Bubble.spec.js
+++ b/specs/bubble/Bubble.spec.js
@@ -6,45 +6,49 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
+'use strict'
-import expect, { spyOn } from 'expect';
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import { Bubble } from '../../src/';
-import bubbleData from './bubbleData';
+import expect, { spyOn } from 'expect'
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import { Bubble } from '../../src/'
+import bubbleData from './bubbleData'
+describe('', function() {
+ this.timeout(10000)
-describe('', 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)
+ })
it('should render a circle for each leaf', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const circles = node.getElementsByClassName('nivo_bubble_node');
- expect(circles).toNotBe(null);
- expect(circles.length).toBe(11);
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const circles = node.getElementsByClassName(
+ 'nivo_bubble_node'
+ )
+ expect(circles).toNotBe(null)
+ expect(circles.length).toBe(11)
- done();
- }, 400);
- })
- });
-});
+ done()
+ }, 400)
+ }
+ )
+ })
+})
diff --git a/specs/bubble/BubbleD3.spec.js b/specs/bubble/BubbleD3.spec.js
index 6fa44e60e..5c8a80338 100644
--- a/specs/bubble/BubbleD3.spec.js
+++ b/specs/bubble/BubbleD3.spec.js
@@ -6,45 +6,49 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
+'use strict'
-import expect, { spyOn } from 'expect';
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import { BubbleD3 } from '../../src/';
-import bubbleData from './bubbleData';
+import expect, { spyOn } from 'expect'
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import { BubbleD3 } from '../../src/'
+import bubbleData from './bubbleData'
+describe('', function() {
+ this.timeout(10000)
-describe('', 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)
+ })
it('should render a circle for each leaf', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const circles = node.getElementsByClassName('nivo_bubble_node');
- expect(circles).toNotBe(null);
- expect(circles.length).toBe(11);
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const circles = node.getElementsByClassName(
+ 'nivo_bubble_node'
+ )
+ expect(circles).toNotBe(null)
+ expect(circles.length).toBe(11)
- done();
- }, 400);
- })
- });
-});
+ done()
+ }, 400)
+ }
+ )
+ })
+})
diff --git a/specs/bubble/bubbleData.js b/specs/bubble/bubbleData.js
index e83dbf1dc..5b72d795d 100644
--- a/specs/bubble/bubbleData.js
+++ b/specs/bubble/bubbleData.js
@@ -6,36 +6,36 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
+'use strict'
export default {
- name: 'nivo',
+ name: 'nivo',
children: [
{
- name: 'charts',
+ name: 'charts',
children: [
- { name: 'Pie', loc: 1000 },
- { name: 'Stack', loc: 1000 },
- { name: 'Tree', loc: 6000 },
- { name: 'Bubble', loc: 1000 }
- ]
+ { name: 'Pie', loc: 1000 },
+ { name: 'Stack', loc: 1000 },
+ { name: 'Tree', loc: 6000 },
+ { name: 'Bubble', loc: 1000 },
+ ],
},
{
- name: 'utils',
+ name: 'utils',
children: [
- { name: 'Colors', loc: 1000 },
- { name: 'Arcs', loc: 4000 },
- { name: 'Data', loc: 1000 },
- { name: 'Animation', loc: 7000 }
- ]
+ { name: 'Colors', loc: 1000 },
+ { name: 'Arcs', loc: 4000 },
+ { name: 'Data', loc: 1000 },
+ { name: 'Animation', loc: 7000 },
+ ],
},
{
- name: 'generator',
+ name: 'generator',
children: [
- { name: 'tree', loc: 3000 },
+ { name: 'tree', loc: 3000 },
{ name: 'serie', loc: 2000 },
- { name: 'geo', loc: 1000 }
- ]
- }
- ]
-};
\ No newline at end of file
+ { name: 'geo', loc: 1000 },
+ ],
+ },
+ ],
+}
diff --git a/specs/calendar/Calendar.spec.js b/specs/calendar/Calendar.spec.js
index 43c7d773a..1ff6b8662 100644
--- a/specs/calendar/Calendar.spec.js
+++ b/specs/calendar/Calendar.spec.js
@@ -6,125 +6,150 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
+'use strict'
-import expect, { spyOn } from 'expect';
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import { Calendar } from '../../src/';
+import expect, { spyOn } from 'expect'
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import { Calendar } from '../../src/'
+describe('', function() {
+ this.timeout(10000)
-describe('', 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)
+ })
it('should render all years days', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const days = node.getElementsByClassName('nivo_calendar_day');
- expect(days).toNotBe(null);
- expect(days.length).toBe(365 * 2);
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const days = node.getElementsByClassName(
+ 'nivo_calendar_day'
+ )
+ expect(days).toNotBe(null)
+ expect(days.length).toBe(365 * 2)
- done();
- }, 400);
- })
- });
+ done()
+ }, 400)
+ }
+ )
+ })
it('should render all years months', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const months = node.getElementsByClassName('nivo_calendar_month');
- expect(months).toNotBe(null);
- expect(months.length).toBe(12 * 2);
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const months = node.getElementsByClassName(
+ 'nivo_calendar_month'
+ )
+ expect(months).toNotBe(null)
+ expect(months.length).toBe(12 * 2)
- const monthLegends = node.getElementsByClassName('nivo_calendar_month_legend');
- expect(monthLegends).toNotBe(null);
- expect(monthLegends.length).toBe(12 * 2);
+ const monthLegends = node.getElementsByClassName(
+ 'nivo_calendar_month_legend'
+ )
+ expect(monthLegends).toNotBe(null)
+ expect(monthLegends.length).toBe(12 * 2)
- done();
- }, 400);
- })
- });
+ done()
+ }, 400)
+ }
+ )
+ })
it('should render a label for each year', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const legends = node.getElementsByClassName('nivo_calendar_year_legend');
- expect(legends).toNotBe(null);
- expect(legends.length).toBe(2);
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const legends = node.getElementsByClassName(
+ 'nivo_calendar_year_legend'
+ )
+ expect(legends).toNotBe(null)
+ expect(legends.length).toBe(2)
- done();
- }, 400);
- })
- });
+ done()
+ }, 400)
+ }
+ )
+ })
it('should support vertical layout', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const days = node.getElementsByClassName('nivo_calendar_day');
- expect(days).toNotBe(null);
- expect(days.length).toBe(365 * 2);
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const days = node.getElementsByClassName(
+ 'nivo_calendar_day'
+ )
+ expect(days).toNotBe(null)
+ expect(days.length).toBe(365 * 2)
- done();
- }, 400);
- })
- });
-});
+ done()
+ }, 400)
+ }
+ )
+ })
+})
diff --git a/specs/calendar/CalendarD3.spec.js b/specs/calendar/CalendarD3.spec.js
index 155736cee..797b40fe5 100644
--- a/specs/calendar/CalendarD3.spec.js
+++ b/specs/calendar/CalendarD3.spec.js
@@ -6,129 +6,158 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
+'use strict'
-import expect, { spyOn } from 'expect';
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import { CalendarD3 } from '../../src/';
+import expect, { spyOn } from 'expect'
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import { CalendarD3 } from '../../src/'
+describe('', function() {
+ this.timeout(10000)
-describe('', 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)
+ })
it('should render all years days', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const days = node.getElementsByClassName('nivo_calendar_day');
- expect(days).toNotBe(null);
- expect(days.length).toBe(365 * 2);
+ transitionDuration={0}
+ transitionStaggering={0}
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const days = node.getElementsByClassName(
+ 'nivo_calendar_day'
+ )
+ expect(days).toNotBe(null)
+ expect(days.length).toBe(365 * 2)
- done();
- }, 400);
- })
- });
+ done()
+ }, 400)
+ }
+ )
+ })
it('should render all years months', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const months = node.getElementsByClassName('nivo_calendar_month');
- expect(months).toNotBe(null);
- expect(months.length).toBe(12 * 2);
+ transitionDuration={0}
+ transitionStaggering={0}
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const months = node.getElementsByClassName(
+ 'nivo_calendar_month'
+ )
+ expect(months).toNotBe(null)
+ expect(months.length).toBe(12 * 2)
- const monthLegends = node.getElementsByClassName('nivo_calendar_month_legend');
- expect(monthLegends).toNotBe(null);
- expect(monthLegends.length).toBe(12 * 2);
+ const monthLegends = node.getElementsByClassName(
+ 'nivo_calendar_month_legend'
+ )
+ expect(monthLegends).toNotBe(null)
+ expect(monthLegends.length).toBe(12 * 2)
- done();
- }, 400);
- })
- });
+ done()
+ }, 400)
+ }
+ )
+ })
it('should render a label for each year', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const legends = node.getElementsByClassName('nivo_calendar_year_legend');
- expect(legends).toNotBe(null);
- expect(legends.length).toBe(2);
+ transitionDuration={0}
+ transitionStaggering={0}
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const legends = node.getElementsByClassName(
+ 'nivo_calendar_year_legend'
+ )
+ expect(legends).toNotBe(null)
+ expect(legends.length).toBe(2)
- done();
- }, 400);
- })
- });
+ done()
+ }, 400)
+ }
+ )
+ })
it('should support vertical layout', done => {
- render((
+ render(
- ), node, () => {
- setTimeout(() => {
- const days = node.getElementsByClassName('nivo_calendar_day');
- expect(days).toNotBe(null);
- expect(days.length).toBe(365 * 2);
+ transitionDuration={0}
+ transitionStaggering={0}
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const days = node.getElementsByClassName(
+ 'nivo_calendar_day'
+ )
+ expect(days).toNotBe(null)
+ expect(days.length).toBe(365 * 2)
- done();
- }, 400);
- })
- });
-});
+ done()
+ }, 400)
+ }
+ )
+ })
+})
diff --git a/specs/treemap/TreeMap.spec.js b/specs/treemap/TreeMap.spec.js
index 4ffb5ec43..a38463bde 100644
--- a/specs/treemap/TreeMap.spec.js
+++ b/specs/treemap/TreeMap.spec.js
@@ -1,77 +1,94 @@
-import expect, { spyOn } from 'expect';
-import React, { Component } from 'react';
-import { render } from 'react-dom';
-import { TreeMapD3 } from '../src/';
+import expect, { spyOn } from 'expect'
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import { TreeMapD3 } from '../src/'
+describe('', function() {
+ this.timeout(10000)
-describe('', 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 root = { name: 'nivo', children: [
- { name: 'charts', children: [
- { name: 'Pie', loc: 74467 },
- { name: 'Stack', loc: 74467 },
- { name: 'Tree', loc: 74467 },
- { name: 'Bubble', loc: 74467 }
- ]},
- { name: 'utils', children: [
- { name: 'Colors', loc: 74467 },
- { name: 'Arcs', loc: 74467 },
- { name: 'Data', loc: 74467 },
- { name: 'Animation', loc: 74467 }
- ]}
- ]};
+ const root = {
+ name: 'nivo',
+ children: [
+ {
+ name: 'charts',
+ children: [
+ { name: 'Pie', loc: 74467 },
+ { name: 'Stack', loc: 74467 },
+ { name: 'Tree', loc: 74467 },
+ { name: 'Bubble', loc: 74467 },
+ ],
+ },
+ {
+ name: 'utils',
+ children: [
+ { name: 'Colors', loc: 74467 },
+ { name: 'Arcs', loc: 74467 },
+ { name: 'Data', loc: 74467 },
+ { name: 'Animation', loc: 74467 },
+ ],
+ },
+ ],
+ }
it('should render a treemap', done => {
- render((
+ render(
d.loc}
colors="nivo"
transitionDuration={0}
- />
- ), node, () => {
- setTimeout(() => {
- const nodes = node.getElementsByClassName('nivo_treemap_node');
- expect(nodes).toNotBe(null);
- expect(nodes.length).toBe(11);
-
- done();
- }, 400);
- })
- });
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const nodes = node.getElementsByClassName(
+ 'nivo_treemap_node'
+ )
+ expect(nodes).toNotBe(null)
+ expect(nodes.length).toBe(11)
- ['squarify', 'slice', 'dice', 'slice-dice'].forEach(mode => {
+ done()
+ }, 400)
+ }
+ )
+ })
+ ;['squarify', 'slice', 'dice', 'slice-dice'].forEach(mode => {
it(`should support "${mode}" mode`, done => {
- render((
+ render(
d.loc}
colors="nivo"
transitionDuration={0}
- />
- ), node, () => {
- setTimeout(() => {
- const nodes = node.getElementsByClassName('nivo_treemap_node');
- expect(nodes).toNotBe(null);
- expect(nodes.length).toBe(11);
+ />,
+ node,
+ () => {
+ setTimeout(() => {
+ const nodes = node.getElementsByClassName(
+ 'nivo_treemap_node'
+ )
+ expect(nodes).toNotBe(null)
+ expect(nodes.length).toBe(11)
- done();
- }, 400);
- });
- });
- });
-});
+ done()
+ }, 400)
+ }
+ )
+ })
+ })
+})
diff --git a/src/ArcUtils.js b/src/ArcUtils.js
index 8162b49d0..ff990954e 100644
--- a/src/ArcUtils.js
+++ b/src/ArcUtils.js
@@ -6,15 +6,11 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
+import d3 from 'd3'
-import d3 from 'd3';
-
-
-export const degreesToRadians = degrees => degrees * Math.PI / 180;
-
-export const radiansToDegrees = radians => 180 * radians / Math.PI;
+export const degreesToRadians = degrees => degrees * Math.PI / 180
+export const radiansToDegrees = radians => 180 * radians / Math.PI
/**
* Try to get a neighbor arc, otherwise, returns null.
@@ -26,24 +22,24 @@ export const radiansToDegrees = radians => 180 * radians / Math.PI;
* @returns {{startAngle: *, endAngle: *}}
*/
export const findNeighbor = (i, identity, prevData, newData) => {
- const preceding = findPreceding(i, identity, prevData, newData);
+ const preceding = findPreceding(i, identity, prevData, newData)
if (preceding) {
return {
startAngle: preceding.endAngle,
- endAngle: preceding.endAngle
- };
+ endAngle: preceding.endAngle,
+ }
}
- const following = findFollowing(i, identity, prevData, newData);
+ const following = findFollowing(i, identity, prevData, newData)
if (following) {
return {
startAngle: following.startAngle,
- endAngle: following.startAngle
- };
+ endAngle: following.startAngle,
+ }
}
- return null;
-};
+ return null
+}
/**
* Find the element in prevData that joins the highest preceding element in newData.
@@ -55,18 +51,18 @@ export const findNeighbor = (i, identity, prevData, newData) => {
* @returns {*}
*/
export const findPreceding = (i, identity, prevData, newData) => {
- const m = prevData.length;
+ const m = prevData.length
while (--i >= 0) {
- let k = identity(newData[i]);
+ let k = identity(newData[i])
for (let j = 0; j < m; ++j) {
if (identity(prevData[j]) === k) {
- return prevData[j];
+ return prevData[j]
}
}
}
-};
+}
/**
* Find the element in prevData that joins the lowest following element in newData.
@@ -78,19 +74,19 @@ export const findPreceding = (i, identity, prevData, newData) => {
* @returns {*}
*/
export const findFollowing = (i, identity, prevData, newData) => {
- const n = newData.length;
- const m = prevData.length;
+ const n = newData.length
+ const m = prevData.length
while (++i < n) {
- let k = identity(newData[i]);
+ let k = identity(newData[i])
for (let j = 0; j < m; ++j) {
if (identity(prevData[j]) === k) {
- return prevData[j];
+ return prevData[j]
}
}
}
-};
-
+}
-export const midAngle = arc => arc.startAngle + (arc.endAngle - arc.startAngle) / 2;
+export const midAngle = arc =>
+ arc.startAngle + (arc.endAngle - arc.startAngle) / 2
diff --git a/src/ColorUtils.js b/src/ColorUtils.js
index 902f87580..76c40986a 100644
--- a/src/ColorUtils.js
+++ b/src/ColorUtils.js
@@ -6,9 +6,7 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import _ from 'lodash'
+import _ from 'lodash'
import { spring } from 'react-motion'
import {
scaleOrdinal,
@@ -39,10 +37,12 @@ export const getColorGenerator = instruction => {
}
if (instruction === 'inherit') {
- return d => (d.color || d.data.color)
+ return d => d.color || d.data.color
}
- const inheritMatches = instruction.match(/inherit:(darker|brighter)\(([0-9.]+)\)/)
+ const inheritMatches = instruction.match(
+ /inherit:(darker|brighter)\(([0-9.]+)\)/
+ )
if (inheritMatches) {
const method = inheritMatches[1]
const amount = inheritMatches[2]
@@ -53,7 +53,6 @@ export const getColorGenerator = instruction => {
return instruction
}
-
export const getColorStyleObject = (instruction, property) => {
const style = {}
@@ -77,37 +76,47 @@ export const extractRGB = (_color, springConfig) => {
}
return {
- colorR: spring(color.r, Object.assign({}, springConfig, { precision: 1 })),
- colorG: spring(color.g, Object.assign({}, springConfig, { precision: 1 })),
- colorB: spring(color.b, Object.assign({}, springConfig, { precision: 1 })),
+ colorR: spring(
+ color.r,
+ Object.assign({}, springConfig, { precision: 1 })
+ ),
+ colorG: spring(
+ color.g,
+ Object.assign({}, springConfig, { precision: 1 })
+ ),
+ colorB: spring(
+ color.b,
+ Object.assign({}, springConfig, { precision: 1 })
+ ),
}
}
const d3Colors = {
- d310: scaleOrdinal(schemeCategory10),
- d320: scaleOrdinal(schemeCategory20),
- d320b: scaleOrdinal(schemeCategory20b),
- d320c: scaleOrdinal(schemeCategory20c),
- accent: scaleOrdinal(schemeAccent),
- dark2: scaleOrdinal(schemeDark2),
- paired: scaleOrdinal(schemePaired),
+ d310: scaleOrdinal(schemeCategory10),
+ d320: scaleOrdinal(schemeCategory20),
+ d320b: scaleOrdinal(schemeCategory20b),
+ d320c: scaleOrdinal(schemeCategory20c),
+ accent: scaleOrdinal(schemeAccent),
+ dark2: scaleOrdinal(schemeDark2),
+ paired: scaleOrdinal(schemePaired),
pastel1: scaleOrdinal(schemePastel1),
pastel2: scaleOrdinal(schemePastel2),
- set1: scaleOrdinal(schemeSet1),
- set2: scaleOrdinal(schemeSet2),
- set3: scaleOrdinal(schemeSet3),
+ set1: scaleOrdinal(schemeSet1),
+ set2: scaleOrdinal(schemeSet2),
+ set3: scaleOrdinal(schemeSet3),
}
-export const nivoCategoricalColors = () => scaleOrdinal([
- '#e8c1a0',
- '#f47560',
- '#f1e15b',
- '#e8a838',
- '#61cdbb',
- '#97e3d5',
-])
+export const nivoCategoricalColors = () =>
+ scaleOrdinal([
+ '#e8c1a0',
+ '#f47560',
+ '#f1e15b',
+ '#e8a838',
+ '#61cdbb',
+ '#97e3d5',
+ ])
-const dataColor = d => (d.color || d.data.color)
+const dataColor = d => d.color || d.data.color
export const getColorRange = instruction => {
if (instruction === 'data') {
@@ -130,5 +139,5 @@ export const getColorRange = instruction => {
return scaleOrdinal(instruction)
}
- throw new Error('Unable to determine color range')
-}
\ No newline at end of file
+ return () => instruction
+}
diff --git a/src/DataUtils.js b/src/DataUtils.js
index c10f3b478..5ddcd0b22 100644
--- a/src/DataUtils.js
+++ b/src/DataUtils.js
@@ -6,15 +6,17 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import _ from 'lodash';
-
+import _ from 'lodash'
const recursiveFlattener = (stack, node, identityProperty, parentId) => {
if (node.children) {
node.children.forEach(child => {
- recursiveFlattener(stack, child, identityProperty, node[identityProperty]);
+ recursiveFlattener(
+ stack,
+ child,
+ identityProperty,
+ node[identityProperty]
+ )
})
} else {
stack.push(_.assign({}, node, { parentId }))
@@ -22,7 +24,7 @@ const recursiveFlattener = (stack, node, identityProperty, parentId) => {
}
export const flatten = (root, identityProperty) => {
- const nodes = [];
+ const nodes = []
recursiveFlattener(nodes, root, identityProperty)
diff --git a/src/HierarchyUtils.js b/src/HierarchyUtils.js
index 58fab0a9e..8ea01d493 100644
--- a/src/HierarchyUtils.js
+++ b/src/HierarchyUtils.js
@@ -6,19 +6,16 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-export const HIERARCHICAL_NODE_TYPE_ROOT = 'root';
-export const HIERARCHICAL_NODE_TYPE_INTERMEDIATE = 'intermediate';
-export const HIERARCHICAL_NODE_TYPE_LEAF = 'leaf';
-
+export const HIERARCHICAL_NODE_TYPE_ROOT = 'root'
+export const HIERARCHICAL_NODE_TYPE_INTERMEDIATE = 'intermediate'
+export const HIERARCHICAL_NODE_TYPE_LEAF = 'leaf'
export const getHierarchicalNodeType = node => {
if (node.depth === 0) {
- return HIERARCHICAL_NODE_TYPE_ROOT;
+ return HIERARCHICAL_NODE_TYPE_ROOT
} else if (!node.children || node.children.length === 0) {
- return HIERARCHICAL_NODE_TYPE_LEAF;
+ return HIERARCHICAL_NODE_TYPE_LEAF
}
- return HIERARCHICAL_NODE_TYPE_INTERMEDIATE;
-};
+ return HIERARCHICAL_NODE_TYPE_INTERMEDIATE
+}
diff --git a/src/Nivo.js b/src/Nivo.js
index 385797736..819730a64 100644
--- a/src/Nivo.js
+++ b/src/Nivo.js
@@ -6,30 +6,42 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-import { scaleOrdinal } from 'd3'
-import { schemeSet3 } from 'd3-scale-chromatic'
+import { scaleOrdinal } from 'd3'
+import { schemeSet3 } from 'd3-scale-chromatic'
import { nivoCategoricalColors } from './ColorUtils'
const defaults = {
transitionDuration: 600,
- transitionEasing: 'cubic-out',
- motionStiffness: 120,
- motionDamping: 10,
- colorRange: scaleOrdinal(schemeSet3),
- margin: {
- top: 0,
- right: 0,
+ transitionEasing: 'cubic-out',
+ motionStiffness: 120,
+ motionDamping: 10,
+ colorRange: scaleOrdinal(schemeSet3),
+ margin: {
+ top: 0,
+ right: 0,
bottom: 0,
- left: 0,
+ left: 0,
},
-};
+}
+export const defaultTheme = {
+ axis: {
+ textColor: '#000',
+ fontSize: '11px',
+ tickColor: '#000',
+ legendColor: '#000',
+ legendFontSize: '11px',
+ },
+ grid: {
+ stroke: '#000',
+ strokeDasharray: '3,6',
+ },
+}
export default {
defaults,
colors: {
- nivoCategoricalColors
- }
-};
+ nivoCategoricalColors,
+ },
+}
diff --git a/src/PropTypes.js b/src/PropTypes.js
index 57654328d..fa7adc829 100644
--- a/src/PropTypes.js
+++ b/src/PropTypes.js
@@ -6,37 +6,35 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import { PropTypes } from 'react'
+import PropTypes from 'prop-types'
const { number, string, array, shape, oneOf } = PropTypes
export const lineInterpolation = oneOf([
- 'linear', // piecewise linear segments, as in a polyline.
- 'linear-closed', // close the linear segments to form a polygon.
- 'step', // alternate between horizontal and vertical segments, as in a step function.
- 'step-before', // alternate between vertical and horizontal segments, as in a step function.
- 'step-after', // alternate between horizontal and vertical segments, as in a step function.
- 'basis', // a B-spline, with control point duplication on the ends.
- 'basis-open', // an open B-spline; may not intersect the start or end.
- 'basis-closed', // a closed B-spline, as in a loop.
- 'bundle', // equivalent to basis, except the tension parameter is used to straighten the spline.
- 'cardinal', // a Cardinal spline, with control point duplication on the ends.
- 'cardinal-open', // an open Cardinal spline; may not intersect the start or end, but will intersect other control points.
+ 'linear', // piecewise linear segments, as in a polyline.
+ 'linear-closed', // close the linear segments to form a polygon.
+ 'step', // alternate between horizontal and vertical segments, as in a step function.
+ 'step-before', // alternate between vertical and horizontal segments, as in a step function.
+ 'step-after', // alternate between horizontal and vertical segments, as in a step function.
+ 'basis', // a B-spline, with control point duplication on the ends.
+ 'basis-open', // an open B-spline; may not intersect the start or end.
+ 'basis-closed', // a closed B-spline, as in a loop.
+ 'bundle', // equivalent to basis, except the tension parameter is used to straighten the spline.
+ 'cardinal', // a Cardinal spline, with control point duplication on the ends.
+ 'cardinal-open', // an open Cardinal spline; may not intersect the start or end, but will intersect other control points.
'cardinal-closed', // a closed Cardinal spline, as in a loop.
- 'monotone' // cubic interpolation that preserves monotonicity in y.
+ 'monotone', // cubic interpolation that preserves monotonicity in y.
])
export const scale = shape({
- type: string.isRequired,
+ type: string.isRequired,
domain: array.isRequired,
- range: array.isRequired,
+ range: array.isRequired,
})
export const margin = shape({
- top: number,
- right: number,
+ top: number,
+ right: number,
bottom: number,
- left: number,
+ left: number,
}).isRequired
diff --git a/src/components/Chart.js b/src/components/Chart.js
deleted file mode 100644
index 6bc3aa0a4..000000000
--- a/src/components/Chart.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import Dimensions from 'react-dimensions';
-import _ from 'lodash';
-import Nivo from '../Nivo';
-
-
-class Chart extends Component {
- render() {
- const {
- containerWidth,
- containerHeight,
- children
- } = this.props;
-
- const margin = _.assign({}, Nivo.defaults.margin, this.props.margin);
- const width = containerWidth - margin.left - margin.right;
- const height = containerHeight - margin.top - margin.bottom;
-
- return (
-
- );
- }
-}
-
-Chart.displayName = 'Chart';
-
-Chart.propTypes = {
- containerWidth: PropTypes.number.isRequired,
- containerHeight: PropTypes.number.isRequired,
- margin: PropTypes.shape({
- top: PropTypes.number,
- right: PropTypes.number,
- bottom: PropTypes.number,
- left: PropTypes.number
- }).isRequired
-};
-
-Chart.defaultProps = {
- margin: Nivo.defaults.margin
-};
-
-
-export default Dimensions()(Chart);
diff --git a/src/components/axes/Axis.js b/src/components/axes/Axis.js
index f609f7ba7..3969b2c15 100644
--- a/src/components/axes/Axis.js
+++ b/src/components/axes/Axis.js
@@ -6,14 +6,12 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
-import { TransitionMotion, spring } from 'react-motion'
-import { max } from 'd3'
-import Nivo from '../../Nivo'
-import AxisTick from './AxisTick'
-
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { TransitionMotion, spring } from 'react-motion'
+import { max } from 'd3'
+import Nivo from '../../Nivo'
+import AxisTick from './AxisTick'
const center = scale => {
let offset = scale.bandwidth() / 2
@@ -22,13 +20,47 @@ const center = scale => {
return d => scale(d) + offset
}
+export default class Axis extends Component {
+ static propTypes = {
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ orient: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+ position: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+ .isRequired,
+ scale: PropTypes.func.isRequired,
+ // ticks
+ tickSize: PropTypes.number.isRequired,
+ tickPadding: PropTypes.number.isRequired,
+ format: PropTypes.func,
+ // legend
+ legend: PropTypes.string,
+ legendPosition: PropTypes.oneOf(['start', 'center', 'end']).isRequired,
+ legendOffset: PropTypes.number.isRequired,
+ theme: PropTypes.object.isRequired,
+ // motion
+ animate: PropTypes.bool.isRequired,
+ motionStiffness: PropTypes.number.isRequired,
+ motionDamping: PropTypes.number.isRequired,
+ }
+
+ static defaultProps = {
+ // ticks
+ tickSize: 5,
+ tickPadding: 5,
+ // legend
+ legendPosition: 'end',
+ legendOffset: 0,
+ // motion
+ animate: true,
+ motionStiffness: Nivo.defaults.motionStiffness,
+ motionDamping: Nivo.defaults.motionDamping,
+ }
-class Axis extends Component {
willEnter() {
return {
opacity: 0,
- x: 0,
- y: 0,
+ x: 0,
+ y: 0,
}
}
@@ -37,20 +69,29 @@ class Axis extends Component {
return {
opacity: spring(0),
- x: spring(style.x.val),
- y: spring(style.y.val),
+ x: spring(style.x.val),
+ y: spring(style.y.val),
}
}
render() {
const {
- orient,
scale,
+ width,
+ height,
+ position: _position,
+ orient: _orient,
tickSize,
tickPadding,
+ format,
+ legend: _legend,
+ legendPosition,
+ legendOffset,
+ theme,
animate,
- motionStiffness, motionDamping,
- } = this.props
+ motionStiffness,
+ motionDamping,
+ } = this.props
let values
if (scale.ticks) {
@@ -59,62 +100,115 @@ class Axis extends Component {
values = scale.domain()
}
- const position = (scale.bandwidth ? center(scale) : scale)
+ const orient = _orient || _position
+ const position = scale.bandwidth ? center(scale) : scale
+ let x = 0
+ let y = 0
let translate
let textAnchor
let textDY
const tickLine = { x2: 0, y2: 0 }
- const textXY = { x: 0, y: 0 }
+ const textXY = { x: 0, y: 0 }
if (['top', 'bottom'].includes(orient)) {
translate = d => ({ x: position(d), y: 0 })
textAnchor = 'middle'
- textDY = orient === 'top' ? '0em' : '0.71em'
- textXY.y = (tickSize + tickPadding) * (orient === 'bottom' ? 1 : -1)
+ textDY = orient === 'top' ? '0em' : '0.71em'
+ textXY.y = (tickSize + tickPadding) * (orient === 'bottom' ? 1 : -1)
tickLine.y2 = tickSize * (orient === 'bottom' ? 1 : -1)
+
+ if (orient === 'bottom') y = height
} else if (['left', 'right'].includes(orient)) {
translate = d => ({ x: 0, y: position(d) })
textAnchor = orient === 'left' ? 'end' : 'start'
- textDY = '0.32em'
- textXY.x = (tickSize + tickPadding) * (orient === 'right' ? 1 : -1)
+ textDY = '0.32em'
+ textXY.x = (tickSize + tickPadding) * (orient === 'right' ? 1 : -1)
tickLine.x2 = tickSize * (orient === 'right' ? 1 : -1)
+
+ if (orient === 'right') x = width
}
- const ticks = values.map(v => {
- return {
- key: v,
- ...translate(v),
+ let legend = null
+ if (_legend !== undefined) {
+ let legendX = 0
+ let legendY = 0
+ let legendRotation = 0
+ let textAnchor
+
+ if (['left', 'right'].includes(_position)) {
+ legendRotation = -90
+ legendX = legendOffset
+ if (legendPosition === 'start') {
+ textAnchor = 'start'
+ legendY = height
+ } else if (legendPosition === 'center') {
+ textAnchor = 'middle'
+ legendY = height / 2
+ } else if (legendPosition === 'end') {
+ textAnchor = 'end'
+ }
+ } else {
+ legendY = legendOffset
+ if (legendPosition === 'start') {
+ textAnchor = 'start'
+ } else if (legendPosition === 'center') {
+ textAnchor = 'middle'
+ legendX = width / 2
+ } else if (legendPosition === 'end') {
+ textAnchor = 'end'
+ legendX = width
+ }
}
- })
+
+ legend = (
+
+ {_legend}
+
+ )
+ }
+
+ const ticks = values.map(v => ({
+ key: v,
+ ...translate(v),
+ }))
const springConfig = {
stiffness: motionStiffness,
- damping: motionDamping,
+ damping: motionDamping,
}
return (
-
+
+ {legend}
{
return {
- key: `${tick.key}`,
- data: tick.key,
+ key: `${tick.key}`,
+ data: tick.key,
style: {
- opacity: spring(1, springConfig),
- x: spring(tick.x, springConfig),
- y: spring(tick.y, springConfig),
- }
+ opacity: spring(1, springConfig),
+ x: spring(tick.x, springConfig),
+ y: spring(tick.y, springConfig),
+ },
}
})}
>
- {interpolatedStyles => (
+ {interpolatedStyles =>
{interpolatedStyles.map(interpolatedStyle => {
const { key, style } = interpolatedStyle
@@ -122,43 +216,19 @@ class Axis extends Component {
)
})}
-
- )}
+ }
)
}
}
-
-Axis.propTypes = {
- orient: PropTypes.oneOf(['top', 'right', 'bottom', 'left']).isRequired,
- scale: PropTypes.any.isRequired,
- tickSize: PropTypes.number.isRequired,
- tickPadding: PropTypes.number.isRequired,
-
- // motion
- animate: PropTypes.bool.isRequired,
- motionStiffness: PropTypes.number.isRequired,
- motionDamping: PropTypes.number.isRequired,
-}
-
-Axis.defaultProps = {
- tickSize: 5,
- tickPadding: 5,
-
- // motion
- animate: true,
- motionStiffness: Nivo.defaults.motionStiffness,
- motionDamping: Nivo.defaults.motionDamping,
-}
-
-
-export default Axis
diff --git a/src/components/axes/AxisTick.js b/src/components/axes/AxisTick.js
index 89a910202..a0197e98b 100644
--- a/src/components/axes/AxisTick.js
+++ b/src/components/axes/AxisTick.js
@@ -6,40 +6,45 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+export default class AxisTick extends Component {
+ static propTypes = {
+ format: PropTypes.func,
+ theme: PropTypes.object.isRequired,
+ }
-class AxisTick extends Component {
render() {
const {
- value,
- x, y,
+ value: _value,
+ x,
+ y,
+ format,
opacity,
tickLine,
textXY,
textDY,
textAnchor,
+ theme,
} = this.props
+ let value = _value
+ if (format !== undefined) {
+ value = format(value)
+ }
+
return (
-
-
+
+
{value}
@@ -47,13 +52,3 @@ class AxisTick extends Component {
)
}
}
-
-AxisTick.propTypes = {
-}
-
-AxisTick.defaultProps = {
-}
-
-
-
-export default AxisTick
diff --git a/src/components/axes/AxisX.js b/src/components/axes/AxisX.js
index b29e7600b..1073ff0ad 100644
--- a/src/components/axes/AxisX.js
+++ b/src/components/axes/AxisX.js
@@ -6,11 +6,10 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import { findDOMNode } from 'react-dom';
-import d3 from 'd3';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { findDOMNode } from 'react-dom'
+import d3 from 'd3'
class AxisX extends Component {
renderD3(props) {
@@ -21,20 +20,20 @@ class AxisX extends Component {
tickPadding,
height,
transitionDuration,
- transitionEasing
- } = props;
+ transitionEasing,
+ } = props
- const element = d3.select(findDOMNode(this));
- element.attr('transform', `translate(0, ${height})`);
+ const element = d3.select(findDOMNode(this))
+ element.attr('transform', `translate(0, ${height})`)
- const axis = d3.svg.axis()
+ const axis = d3.svg
+ .axis()
.scale(xScale)
.tickPadding(tickPadding)
.orient(orient)
- ;
if (tickMode === 'grid') {
- axis.tickSize(-height);
+ axis.tickSize(-height)
}
element
@@ -42,42 +41,40 @@ class AxisX extends Component {
.duration(transitionDuration)
.ease(transitionEasing)
.call(axis)
- ;
- return false;
+ return false
}
componentDidMount() {
- this.renderD3(this.props);
+ this.renderD3(this.props)
}
shouldComponentUpdate(nextProps) {
- this.renderD3(nextProps);
+ this.renderD3(nextProps)
- return false;
+ return false
}
render() {
- return ;
+ return
}
}
-AxisX.displayName = 'AxisX';
+AxisX.displayName = 'AxisX'
AxisX.propTypes = {
- orient: PropTypes.oneOf(['top', 'bottom']).isRequired,
- xScale: PropTypes.func.isRequired,
- tickMode: PropTypes.oneOf(['normal', 'grid']).isRequired,
- tickPadding: PropTypes.number.isRequired
-};
+ orient: PropTypes.oneOf(['top', 'bottom']).isRequired,
+ xScale: PropTypes.func.isRequired,
+ tickMode: PropTypes.oneOf(['normal', 'grid']).isRequired,
+ tickPadding: PropTypes.number.isRequired,
+}
AxisX.defaultProps = {
- orient: 'bottom',
+ orient: 'bottom',
transitionDuration: 600,
- transitionEasing: 'cubic-out',
- tickMode: 'normal',
- tickPadding: 3
-};
-
+ transitionEasing: 'cubic-out',
+ tickMode: 'normal',
+ tickPadding: 3,
+}
-export default AxisX;
+export default AxisX
diff --git a/src/components/axes/AxisY.js b/src/components/axes/AxisY.js
index 345713330..a6a47d39e 100644
--- a/src/components/axes/AxisY.js
+++ b/src/components/axes/AxisY.js
@@ -6,11 +6,10 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import { findDOMNode } from 'react-dom';
-import d3 from 'd3';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { findDOMNode } from 'react-dom'
+import d3 from 'd3'
class AxisY extends Component {
renderD3(props) {
@@ -23,28 +22,28 @@ class AxisY extends Component {
tickPadding,
width,
transitionDuration,
- transitionEasing
- } = props;
+ transitionEasing,
+ } = props
- const element = d3.select(findDOMNode(this));
+ const element = d3.select(findDOMNode(this))
- const axis = d3.svg.axis()
+ const axis = d3.svg
+ .axis()
.scale(yScale)
.tickPadding(tickPadding)
.orient(orient)
.tickFormat(d3.format('s'))
- ;
if (tickCount >= 0) {
- axis.ticks(tickCount);
+ axis.ticks(tickCount)
}
if (tickFormat) {
- axis.tickFormat(d3.format(tickFormat));
+ axis.tickFormat(d3.format(tickFormat))
}
if (tickMode === 'grid') {
- axis.tickSize(-width);
+ axis.tickSize(-width)
}
element
@@ -52,44 +51,42 @@ class AxisY extends Component {
.duration(transitionDuration)
.ease(transitionEasing)
.call(axis)
- ;
- return false;
+ return false
}
componentDidMount() {
- this.renderD3(this.props);
+ this.renderD3(this.props)
}
shouldComponentUpdate(nextProps) {
- this.renderD3(nextProps);
+ this.renderD3(nextProps)
- return false;
+ return false
}
render() {
- return ;
+ return
}
}
-AxisY.displayName = 'AxisY';
+AxisY.displayName = 'AxisY'
AxisY.propTypes = {
- orient: PropTypes.oneOf(['left', 'right']).isRequired,
- yScale: PropTypes.func.isRequired,
- tickCount: PropTypes.number.isRequired,
- tickMode: PropTypes.oneOf(['normal', 'grid']).isRequired,
- tickPadding: PropTypes.number.isRequired
-};
+ orient: PropTypes.oneOf(['left', 'right']).isRequired,
+ yScale: PropTypes.func.isRequired,
+ tickCount: PropTypes.number.isRequired,
+ tickMode: PropTypes.oneOf(['normal', 'grid']).isRequired,
+ tickPadding: PropTypes.number.isRequired,
+}
AxisY.defaultProps = {
- orient: 'left',
+ orient: 'left',
transitionDuration: 600,
- transitionEasing: 'cubic-out',
- tickCount: -1,
- tickMode: 'normal',
- tickPadding: 3
-};
-
+ transitionEasing: 'cubic-out',
+ tickCount: -1,
+ tickMode: 'normal',
+ tickPadding: 3,
+}
-export default AxisY;
+export default AxisY
diff --git a/src/components/axes/Grid.js b/src/components/axes/Grid.js
index be05ef61f..d7eac17e8 100644
--- a/src/components/axes/Grid.js
+++ b/src/components/axes/Grid.js
@@ -6,13 +6,11 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
-import Nivo from '../../Nivo'
-import GridLines from './GridLines'
-import GridLine from './GridLine'
-
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Nivo from '../../Nivo'
+import GridLines from './GridLines'
+import GridLine from './GridLine'
const center = scale => {
let offset = scale.bandwidth() / 2
@@ -21,91 +19,102 @@ const center = scale => {
return d => scale(d) + offset
}
+export default class Grid extends Component {
+ static propTypes = {
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ xScale: PropTypes.func,
+ yScale: PropTypes.func,
+ theme: PropTypes.object.isRequired,
+ // motion
+ animate: PropTypes.bool.isRequired,
+ motionStiffness: PropTypes.number.isRequired,
+ motionDamping: PropTypes.number.isRequired,
+ }
+
+ static defaultProps = {
+ // motion
+ animate: true,
+ motionStiffness: Nivo.defaults.motionStiffness,
+ motionDamping: Nivo.defaults.motionDamping,
+ }
-class Grid extends Component {
render() {
const {
- width, height,
- xScale, yScale,
+ width,
+ height,
+ scales,
+ xScale,
+ yScale,
+ theme,
animate,
- motionStiffness, motionDamping,
+ motionStiffness,
+ motionDamping,
} = this.props
- let xValues
- if (xScale.ticks) {
- xValues = xScale.ticks()
- } else {
- xValues = xScale.domain()
- }
+ let xLines
+ if (xScale) {
+ let xValues
+ if (xScale.ticks) {
+ xValues = xScale.ticks()
+ } else {
+ xValues = xScale.domain()
+ }
- const xPosition = (xScale.bandwidth ? center(xScale) : xScale)
+ const xPosition = xScale.bandwidth ? center(xScale) : xScale
- let yValues
- if (yScale.ticks) {
- yValues = yScale.ticks()
- } else {
- yValues = yScale.domain()
+ xLines = xValues.map(v => {
+ return {
+ key: `${v}`,
+ x1: xPosition(v),
+ x2: xPosition(v),
+ y2: height,
+ }
+ })
}
- const yPosition = (yScale.bandwidth ? center(yScale) : yScale)
-
- const xLines = xValues.map(v => {
- return {
- key: `${v}`,
- x1: xPosition(v),
- x2: xPosition(v),
- y2: height,
+ let yLines
+ if (yScale) {
+ let yValues
+ if (yScale.ticks) {
+ yValues = yScale.ticks()
+ } else {
+ yValues = yScale.domain()
}
- })
- const yLines = yValues.map(v => {
- return {
- key: `${v}`,
- x2: width,
- y1: yPosition(v),
- y2: yPosition(v),
- }
- })
+ const yPosition = yScale.bandwidth ? center(yScale) : yScale
+
+ yLines = yValues.map(v => {
+ return {
+ key: `${v}`,
+ x2: width,
+ y1: yPosition(v),
+ y2: yPosition(v),
+ }
+ })
+ }
return (
-
-
-
+
+ {xLines &&
+ }
+ {yLines &&
+ }
)
}
}
-
-Grid.propTypes = {
- width: PropTypes.number.isRequired,
- height: PropTypes.number.isRequired,
- xScale: PropTypes.any.isRequired,
- yScale: PropTypes.any.isRequired,
- // motion
- animate: PropTypes.bool.isRequired,
- motionStiffness: PropTypes.number.isRequired,
- motionDamping: PropTypes.number.isRequired,
-}
-
-Grid.defaultProps = {
- // motion
- animate: true,
- motionStiffness: Nivo.defaults.motionStiffness,
- motionDamping: Nivo.defaults.motionDamping,
-}
-
-
-
-export default Grid
diff --git a/src/components/axes/GridLine.js b/src/components/axes/GridLine.js
index a3e553cf6..cf28eb8fc 100644
--- a/src/components/axes/GridLine.js
+++ b/src/components/axes/GridLine.js
@@ -6,18 +6,10 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
+import React from 'react'
+import PropTypes from 'prop-types'
-import React, { PropTypes } from 'react'
-
-
-const GridLine = props => (
-
-)
+const GridLine = props =>
GridLine.propTypes = {
x1: PropTypes.number.isRequired,
@@ -33,5 +25,4 @@ GridLine.defaultProps = {
y2: 0,
}
-
export default GridLine
diff --git a/src/components/axes/GridLines.js b/src/components/axes/GridLines.js
index 4a58bb099..d2441a5f8 100644
--- a/src/components/axes/GridLines.js
+++ b/src/components/axes/GridLines.js
@@ -6,15 +6,31 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
-import { TransitionMotion, spring } from 'react-motion'
-import Nivo from '../../Nivo'
-import GridLine from './GridLine'
-
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { TransitionMotion, spring } from 'react-motion'
+import Nivo from '../../Nivo'
+import GridLine from './GridLine'
+
+export default class GridLines extends Component {
+ static propTypes = {
+ type: PropTypes.oneOf(['x', 'y']).isRequired,
+ lines: PropTypes.arrayOf(
+ PropTypes.shape({
+ key: PropTypes.string.isRequired,
+ x1: PropTypes.number,
+ x2: PropTypes.number,
+ y1: PropTypes.number,
+ y2: PropTypes.number,
+ })
+ ).isRequired,
+ theme: PropTypes.object.isRequired,
+ // motion
+ animate: PropTypes.bool.isRequired,
+ motionStiffness: PropTypes.number.isRequired,
+ motionDamping: PropTypes.number.isRequired,
+ }
-class GridLines extends Component {
constructor(props) {
super(props)
@@ -27,10 +43,10 @@ class GridLines extends Component {
return {
opacity: 0,
- x1: type === 'x' ? 0 : style.x1.val,
- x2: type === 'x' ? 0 : style.x2.val,
- y1: type === 'y' ? 0 : style.y1.val,
- y2: type === 'y' ? 0 : style.y2.val,
+ x1: type === 'x' ? 0 : style.x1.val,
+ x2: type === 'x' ? 0 : style.x2.val,
+ y1: type === 'y' ? 0 : style.y1.val,
+ y2: type === 'y' ? 0 : style.y2.val,
}
}
@@ -38,15 +54,15 @@ class GridLines extends Component {
const { motionStiffness, motionDamping } = this.props
const springConfig = {
stiffness: motionStiffness,
- damping: motionDamping,
+ damping: motionDamping,
}
return {
- opacity: spring(0, springConfig),
- x1: spring(style.x1.val, springConfig),
- x2: spring(style.x2.val, springConfig),
- y1: spring(style.y1.val, springConfig),
- y2: spring(style.y2.val, springConfig),
+ opacity: spring(0, springConfig),
+ x1: spring(style.x1.val, springConfig),
+ x2: spring(style.x2.val, springConfig),
+ y1: spring(style.y1.val, springConfig),
+ y2: spring(style.y2.val, springConfig),
}
}
@@ -54,20 +70,22 @@ class GridLines extends Component {
const {
lines,
animate,
- motionStiffness, motionDamping,
+ motionStiffness,
+ motionDamping,
+ theme,
} = this.props
if (!animate) {
return (
- {lines.map(line => ())}
+ {lines.map(line => )}
)
}
const springConfig = {
stiffness: motionStiffness,
- damping: motionDamping,
+ damping: motionDamping,
}
return (
@@ -76,18 +94,18 @@ class GridLines extends Component {
willLeave={this.willLeave}
styles={lines.map(line => {
return {
- key: line.key,
+ key: line.key,
style: {
- opacity: spring(1, springConfig),
- x1: spring(line.x1 || 0, springConfig),
- x2: spring(line.x2 || 0, springConfig),
- y1: spring(line.y1 || 0, springConfig),
- y2: spring(line.y2 || 0, springConfig),
- }
+ opacity: spring(1, springConfig),
+ x1: spring(line.x1 || 0, springConfig),
+ x2: spring(line.x2 || 0, springConfig),
+ y1: spring(line.y1 || 0, springConfig),
+ y2: spring(line.y2 || 0, springConfig),
+ },
}
})}
>
- {interpolatedStyles => (
+ {interpolatedStyles =>
{interpolatedStyles.map(interpolatedStyle => {
const { key, style } = interpolatedStyle
@@ -95,38 +113,13 @@ class GridLines extends Component {
return (
)
})}
-
- )}
+ }
)
}
}
-
-GridLines.propTypes = {
- type: PropTypes.oneOf(['x', 'y']).isRequired,
- lines: PropTypes.arrayOf(PropTypes.shape({
- key: PropTypes.string.isRequired,
- x1: PropTypes.number,
- x2: PropTypes.number,
- y1: PropTypes.number,
- y2: PropTypes.number,
- })).isRequired,
- // motion
- animate: PropTypes.bool.isRequired,
- motionStiffness: PropTypes.number.isRequired,
- motionDamping: PropTypes.number.isRequired,
-}
-
-GridLines.defaultProps = {
- // motion
- animate: true,
- motionStiffness: Nivo.defaults.motionStiffness,
- motionDamping: Nivo.defaults.motionDamping,
-}
-
-
-export default GridLines
diff --git a/src/components/axes/index.js b/src/components/axes/index.js
index eece72117..d13b0cf28 100644
--- a/src/components/axes/index.js
+++ b/src/components/axes/index.js
@@ -6,8 +6,5 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-
export Axis from './Axis'
export Grid from './Grid'
diff --git a/src/components/charts/Chart.js b/src/components/charts/Chart.js
new file mode 100644
index 000000000..1c9255b0f
--- /dev/null
+++ b/src/components/charts/Chart.js
@@ -0,0 +1,130 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import Nivo from '../../Nivo'
+import { margin as marginPropType } from '../../PropTypes'
+import Scale from '../scales/Scale'
+
+const defaultTheme = {
+ axis: {
+ textColor: '#000',
+ fontSize: '11px',
+ tickColor: '#000',
+ legendColor: '#000',
+ legendFontSize: '11px',
+ },
+ grid: {
+ stroke: '#000',
+ strokeDasharray: '3,6',
+ },
+}
+
+export default class Chart extends Component {
+ static propTypes = {
+ // dimensions
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ margin: marginPropType,
+ // composition
+ children: PropTypes.oneOfType([
+ PropTypes.arrayOf(PropTypes.node),
+ PropTypes.node,
+ ]),
+ // data
+ data: PropTypes.arrayOf(PropTypes.object).isRequired,
+ // motion
+ animate: PropTypes.bool.isRequired,
+ motionStiffness: PropTypes.number.isRequired,
+ motionDamping: PropTypes.number.isRequired,
+ }
+
+ static defaultProps = {
+ // dimensions
+ margin: Nivo.defaults.margin,
+ // motion
+ animate: true,
+ motionStiffness: Nivo.defaults.motionStiffness,
+ motionDamping: Nivo.defaults.motionDamping,
+ }
+
+ static childContextTypes = {
+ nivoTheme: PropTypes.object.isRequired,
+ }
+
+ getChildContext() {
+ const theme = _.merge({}, defaultTheme, this.props.theme || {})
+
+ return { nivoTheme: theme }
+ }
+
+ render() {
+ const {
+ data,
+ children,
+ margin: _margin,
+ width: _width,
+ height: _height,
+ animate,
+ motionStiffness,
+ motionDamping,
+ } = this.props
+
+ const animationProps = {
+ animate,
+ motionStiffness,
+ motionDamping,
+ }
+
+ const margin = Object.assign({}, Nivo.defaults.margin, _margin)
+ const width = _width - margin.left - margin.right
+ const height = _height - margin.top - margin.bottom
+
+ const scales = {}
+ const axes = []
+ const items = []
+
+ React.Children.forEach(children, (child, i) => {
+ if (child.type === Scale) {
+ scales[child.props.id] = Scale.create(
+ child.props,
+ data,
+ width,
+ height
+ )
+ } else {
+ const item = React.cloneElement(child, {
+ ...child.props,
+ ...animationProps,
+ key: i,
+ data,
+ scales,
+ width,
+ height,
+ })
+
+ items.push(item)
+ }
+ })
+
+ return (
+
+ )
+ }
+}
diff --git a/src/components/charts/Markers.js b/src/components/charts/Markers.js
new file mode 100644
index 000000000..c778bea3b
--- /dev/null
+++ b/src/components/charts/Markers.js
@@ -0,0 +1,234 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import Nivo from '../../../Nivo'
+import { getColorRange } from '../../../ColorUtils'
+import { convertGetter } from '../../../lib/propertiesConverters'
+import BarItem from './BarItem'
+import BarItemLabel from './BarItemLabel'
+
+export default class Markers extends Component {
+ static propTypes = {
+ colors: PropTypes.any.isRequired,
+ scales: PropTypes.object,
+ width: PropTypes.number,
+ height: PropTypes.number,
+ // labels
+ enableLabels: PropTypes.bool.isRequired,
+ // motion
+ animate: PropTypes.bool.isRequired,
+ motionStiffness: PropTypes.number.isRequired,
+ motionDamping: PropTypes.number.isRequired,
+ }
+
+ static defaultProps = {
+ colors: Nivo.defaults.colorRange,
+ // labels
+ enableLabels: true,
+ // motion
+ animate: true,
+ motionStiffness: Nivo.defaults.motionStiffness,
+ motionDamping: Nivo.defaults.motionDamping,
+ }
+
+ render() {
+ const {
+ data,
+ scales,
+ xScale: _xScale,
+ yScale: _yScale,
+ width,
+ height,
+ color,
+ x,
+ y,
+ } = this.props
+
+ const xScale = scales[_xScale]
+ const yScale = scales[_yScale]
+
+ const getX = _.isFunction(x) ? x : d => d[x]
+ const getY = _.isFunction(y) ? y : d => d[y]
+
+ const rects = []
+ data.forEach((d, i) => {
+ let x
+ let y
+ let barWidth
+ let barHeight
+
+ if (xScale.bandwidth) {
+ barWidth = xScale.bandwidth() // / series.length
+ x = xScale(getX(d)) // + barWidth * serieIndex
+ } else {
+ x = 0
+ barWidth = xScale(getX(d))
+ }
+
+ if (yScale.bandwidth) {
+ barHeight = yScale.bandwidth() // / series.length
+ y = yScale(getY(d)) // + barHeight * serieIndex
+ } else {
+ y = yScale(getY(d))
+ barHeight = height - y
+ }
+
+ if (barWidth > 0 && barHeight > 0) {
+ rects.push({
+ key: `bar.${i}`,
+ //value,
+ x,
+ y,
+ width: barWidth,
+ height: barHeight,
+ color: color, //'#fff', //color(serieIndex),
+ })
+ }
+ })
+
+ return (
+
+ {rects.map(d => )}
+
+ )
+ /*
+ const {
+ data,
+ groupMode,
+ identity: _identity,
+ margin: _margin,
+ width: _width, height: _height,
+ colors,
+ scales: _scales,
+ series,
+ axes,
+ enableGridX, enableGridY,
+ enableLabels,
+ animate, motionStiffness, motionDamping,
+ } = this.props
+
+ const margin = Object.assign({}, Nivo.defaults.margin, _margin)
+ const width = _width - margin.left - margin.right
+ const height = _height - margin.top - margin.bottom
+
+ const color = getColorRange(colors)
+
+ const rects = []
+ series.forEach((serie, serieIndex) => {
+ const xScale = scales[serie.xScale]
+ const yScale = scales[serie.yScale]
+
+ const getX = _.isFunction(serie.x) ? serie.x : d => d[serie.x]
+ const getY = _.isFunction(serie.y) ? serie.y : d => d[serie.y]
+
+ data.forEach((d, i) => {
+ let x
+ let y
+ let barWidth
+ let barHeight
+
+ if (xScale.bandwidth) {
+ barWidth = xScale.bandwidth() / series.length
+ x = xScale(getX(d)) + barWidth * serieIndex
+ } else {
+ x = 0
+ barWidth = xScale(getX(d))
+ }
+
+ if (yScale.bandwidth) {
+ barHeight = yScale.bandwidth() / series.length
+ y = yScale(getY(d)) + barHeight * serieIndex
+ } else {
+ y = yScale(getY(d))
+ barHeight = height - y
+ }
+
+ if (barWidth > 0 && barHeight > 0) {
+ rects.push({
+ key: `${serieIndex}.${i}`,
+ //value,
+ x, y,
+ width: barWidth,
+ height: barHeight,
+ color: color(serieIndex),
+ })
+ }
+ })
+ })
+
+ /*
+ if (groupMode === 'stacked') {
+ const series = stack().keys(keys)(data)
+
+ y.domain([0, max(series[series.length - 1], d => d[1])])
+
+ series.forEach(serie => {
+ serie.forEach(d => {
+ rects.push({
+ key: `${serie.key}.${identity(d.data)}`,
+ value: d[1],
+ x: x(identity(d.data)),
+ y: y(d[1]),
+ width: x.bandwidth(),
+ height: y(d[0]) - y(d[1]),
+ color: color(serie.key),
+ })
+ })
+ })
+ } else {
+ y.domain([0, max(data, d => max(_.values(_.pick(d, keys))))])
+
+ const barWidth = x.bandwidth() / keys.length
+
+ data.forEach(bucket => {
+ let index = 0
+ _.forOwn(_.pick(bucket, keys), (value, key) => {
+ rects.push({
+ key: `${key}.${identity(bucket)}`,
+ value,
+ x: x(identity(bucket)) + barWidth * index,
+ y: y(value),
+ width: barWidth,
+ height: height - y(value),
+ color: color(key),
+ })
+ index++
+ })
+ })
+ }
+
+ const { props } = this
+
+ return (
+
+ )
+ */
+ }
+}
diff --git a/src/components/charts/ResponsiveChart.js b/src/components/charts/ResponsiveChart.js
new file mode 100644
index 000000000..3a3b03938
--- /dev/null
+++ b/src/components/charts/ResponsiveChart.js
@@ -0,0 +1,48 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import Measure from 'react-measure'
+import Chart from './Chart'
+
+export default class ResponsiveChart extends Component {
+ state = {
+ dimensions: {
+ width: -1,
+ height: -1,
+ },
+ }
+
+ render() {
+ const { width, height } = this.state.dimensions
+
+ const shouldRender = width > 0 && height > 0
+
+ return (
+ {
+ this.setState({ dimensions: contentRect.bounds })
+ }}
+ >
+ {({ measureRef }) =>
+
+ {shouldRender &&
+ }
+
}
+
+ )
+ }
+}
diff --git a/src/components/charts/ResponsiveWrapper.js b/src/components/charts/ResponsiveWrapper.js
new file mode 100644
index 000000000..92bb90339
--- /dev/null
+++ b/src/components/charts/ResponsiveWrapper.js
@@ -0,0 +1,47 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Measure from 'react-measure'
+
+export default class ResponsiveWrapper extends Component {
+ static propTypes = {
+ children: PropTypes.func.isRequired,
+ }
+
+ state = {
+ dimensions: {
+ width: -1,
+ height: -1,
+ },
+ }
+
+ render() {
+ const { width, height } = this.state.dimensions
+
+ const shouldRender = width > 0 && height > 0
+
+ return (
+ {
+ this.setState({ dimensions: contentRect.bounds })
+ }}
+ >
+ {({ measureRef }) =>
+
+ {shouldRender && this.props.children({ width, height })}
+
}
+
+ )
+ }
+}
diff --git a/src/components/charts/SvgWrapper.js b/src/components/charts/SvgWrapper.js
new file mode 100644
index 000000000..1d9ee7877
--- /dev/null
+++ b/src/components/charts/SvgWrapper.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+const SvgWrapper = ({ width, height, margin, children }) =>
+
+
+export default SvgWrapper
diff --git a/src/components/charts/Tree.js b/src/components/charts/Tree.js
index ae5bbbf03..6e425992e 100644
--- a/src/components/charts/Tree.js
+++ b/src/components/charts/Tree.js
@@ -6,212 +6,235 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import { findDOMNode } from 'react-dom';
-import Dimensions from 'react-dimensions';
-import _ from 'lodash';
-import d3 from 'd3';
-import Nivo from '../../Nivo';
-import { margin as marginPropType } from '../../PropTypes';
-import { getColorRange } from '../../ColorUtils';
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { findDOMNode } from 'react-dom'
+import Dimensions from 'react-dimensions'
+import _ from 'lodash'
+import d3 from 'd3'
+import Nivo from '../../Nivo'
+import { margin as marginPropType } from '../../PropTypes'
+import { getColorRange } from '../../ColorUtils'
import makeLabel, {
LABEL_POSITION_TOP,
LABEL_POSITION_RIGHT,
LABEL_POSITION_BOTTOM,
- LABEL_POSITION_LEFT
-} from '../../lib/charts/labels';
+ LABEL_POSITION_LEFT,
+} from '../../lib/charts/labels'
import {
HIERARCHICAL_NODE_TYPE_ROOT,
HIERARCHICAL_NODE_TYPE_LEAF,
- getHierarchicalNodeType
-} from '../../HierarchyUtils';
+ getHierarchicalNodeType,
+} from '../../HierarchyUtils'
+const horizontalDiagonal = d3.svg.diagonal().projection(d => [d.y, d.x])
+const verticalDiagonal = d3.svg.diagonal().projection(d => [d.x, d.y])
-const horizontalDiagonal = d3.svg.diagonal().projection(d => [d.y, d.x]);
-const verticalDiagonal = d3.svg.diagonal().projection(d => [d.x, d.y]);
+const horizontalTransform = d => `translate(${d.y},${d.x})`
+const verticalTransform = d => `translate(${d.x},${d.y})`
-const horizontalTransform = d => `translate(${d.y},${d.x})`;
-const verticalTransform = d => `translate(${d.x},${d.y})`;
-
-const horizontalLabelTextAnchor = d => d.children ? 'end' : 'start';
-const horizontalReverseLabelTextAnchor = d => d.children ? 'start' : 'end';
-const verticalLabelTextAnchor = 'middle';
+const horizontalLabelTextAnchor = d => (d.children ? 'end' : 'start')
+const horizontalReverseLabelTextAnchor = d => (d.children ? 'start' : 'end')
+const verticalLabelTextAnchor = 'middle'
const labelPositions = {
root: {
- 'horizontal': LABEL_POSITION_LEFT,
+ horizontal: LABEL_POSITION_LEFT,
'horizontal-reverse': LABEL_POSITION_RIGHT,
- 'vertical': LABEL_POSITION_TOP,
- 'vertical-reverse': LABEL_POSITION_BOTTOM
+ vertical: LABEL_POSITION_TOP,
+ 'vertical-reverse': LABEL_POSITION_BOTTOM,
},
intermediate: {
- 'horizontal': LABEL_POSITION_LEFT,
+ horizontal: LABEL_POSITION_LEFT,
'horizontal-reverse': LABEL_POSITION_RIGHT,
- 'vertical': LABEL_POSITION_TOP,
- 'vertical-reverse': LABEL_POSITION_BOTTOM
+ vertical: LABEL_POSITION_TOP,
+ 'vertical-reverse': LABEL_POSITION_BOTTOM,
},
leaf: {
- 'horizontal': LABEL_POSITION_RIGHT,
+ horizontal: LABEL_POSITION_RIGHT,
'horizontal-reverse': LABEL_POSITION_LEFT,
- 'vertical': LABEL_POSITION_LEFT,
- 'vertical-reverse': LABEL_POSITION_RIGHT
- }
-};
-
+ vertical: LABEL_POSITION_LEFT,
+ 'vertical-reverse': LABEL_POSITION_RIGHT,
+ },
+}
-const computeLabelPositions = ({ direction, rootLabelPosition, intermediateLabelPosition, leafLabelPosition }) => {
- rootLabelPosition = rootLabelPosition || labelPositions.root[direction];
- intermediateLabelPosition = intermediateLabelPosition || labelPositions.intermediate[direction];
- leafLabelPosition = leafLabelPosition || labelPositions.leaf[direction];
+const computeLabelPositions = ({
+ direction,
+ rootLabelPosition,
+ intermediateLabelPosition,
+ leafLabelPosition,
+}) => {
+ rootLabelPosition = rootLabelPosition || labelPositions.root[direction]
+ intermediateLabelPosition =
+ intermediateLabelPosition || labelPositions.intermediate[direction]
+ leafLabelPosition = leafLabelPosition || labelPositions.leaf[direction]
return {
rootLabelPosition,
intermediateLabelPosition,
- leafLabelPosition
- };
-};
+ leafLabelPosition,
+ }
+}
const labelRotations = {
root: {
- 'horizontal': 0,
+ horizontal: 0,
'horizontal-reverse': 0,
- 'vertical': 0,
- 'vertical-reverse': 0
+ vertical: 0,
+ 'vertical-reverse': 0,
},
intermediate: {
- 'horizontal': 0,
+ horizontal: 0,
'horizontal-reverse': 0,
- 'vertical': 0,
- 'vertical-reverse': 0
+ vertical: 0,
+ 'vertical-reverse': 0,
},
leaf: {
- 'horizontal': 0,
+ horizontal: 0,
'horizontal-reverse': 0,
- 'vertical': -90,
- 'vertical-reverse': -90
- }
-};
+ vertical: -90,
+ 'vertical-reverse': -90,
+ },
+}
-const computeLabelRotations = ({ direction, rootLabelRotation, intermediateLabelRotation, leafLabelRotation }) => {
- rootLabelRotation = rootLabelRotation || labelRotations.root[direction];
- intermediateLabelRotation = intermediateLabelRotation || labelRotations.intermediate[direction];
- leafLabelRotation = leafLabelRotation || labelRotations.leaf[direction];
+const computeLabelRotations = ({
+ direction,
+ rootLabelRotation,
+ intermediateLabelRotation,
+ leafLabelRotation,
+}) => {
+ rootLabelRotation = rootLabelRotation || labelRotations.root[direction]
+ intermediateLabelRotation =
+ intermediateLabelRotation || labelRotations.intermediate[direction]
+ leafLabelRotation = leafLabelRotation || labelRotations.leaf[direction]
return {
rootLabelRotation,
intermediateLabelRotation,
- leafLabelRotation
- };
-};
-
+ leafLabelRotation,
+ }
+}
class Tree extends Component {
renderD3(nextProps) {
const {
- root, identity, labelFn,
- containerWidth, containerHeight,
+ root,
+ identity,
+ labelFn,
+ containerWidth,
+ containerHeight,
direction,
- colors, nodeRadius,
- transitionDuration, transitionEasing,
- labelOffset, labelPaddingX, labelPaddingY
- } = nextProps;
+ colors,
+ nodeRadius,
+ transitionDuration,
+ transitionEasing,
+ labelOffset,
+ labelPaddingX,
+ labelPaddingY,
+ } = nextProps
- const margin = _.assign({}, Nivo.defaults.margin, this.props.margin);
+ const margin = _.assign({}, Nivo.defaults.margin, this.props.margin)
- const width = containerWidth - margin.left - margin.right;
- const height = containerHeight - margin.top - margin.bottom;
+ const width = containerWidth - margin.left - margin.right
+ const height = containerHeight - margin.top - margin.bottom
const element = d3.select(findDOMNode(this)).attr({
- width: containerWidth,
- height: containerHeight
- });
+ width: containerWidth,
+ height: containerHeight,
+ })
- let position;
- let size;
- let diagonal;
- let transformer;
- let labelTextAnchor;
+ let position
+ let size
+ let diagonal
+ let transformer
+ let labelTextAnchor
switch (direction) {
case 'horizontal':
- position = [margin.left, margin.top];
- size = [height, width];
- diagonal = horizontalDiagonal;
- transformer = horizontalTransform;
- labelTextAnchor = horizontalLabelTextAnchor;
- break;
+ position = [margin.left, margin.top]
+ size = [height, width]
+ diagonal = horizontalDiagonal
+ transformer = horizontalTransform
+ labelTextAnchor = horizontalLabelTextAnchor
+ break
case 'horizontal-reverse':
- position = [margin.left + width, margin.top];
- size = [height, -width];
- diagonal = horizontalDiagonal;
- transformer = horizontalTransform;
- labelTextAnchor = horizontalReverseLabelTextAnchor;
- break;
+ position = [margin.left + width, margin.top]
+ size = [height, -width]
+ diagonal = horizontalDiagonal
+ transformer = horizontalTransform
+ labelTextAnchor = horizontalReverseLabelTextAnchor
+ break
case 'vertical':
- position = [margin.left, margin.top];
- size = [width, height];
- diagonal = verticalDiagonal;
- transformer = verticalTransform;
- labelTextAnchor = verticalLabelTextAnchor;
- break;
+ position = [margin.left, margin.top]
+ size = [width, height]
+ diagonal = verticalDiagonal
+ transformer = verticalTransform
+ labelTextAnchor = verticalLabelTextAnchor
+ break
case 'vertical-reverse':
- position = [margin.left, margin.top + height];
- size = [width, -height];
- diagonal = verticalDiagonal;
- transformer = verticalTransform;
- labelTextAnchor = verticalLabelTextAnchor;
- break;
+ position = [margin.left, margin.top + height]
+ size = [width, -height]
+ diagonal = verticalDiagonal
+ transformer = verticalTransform
+ labelTextAnchor = verticalLabelTextAnchor
+ break
}
- const wrapper = element.select('.nivo_tree_wrapper').attr({ width, height });
- const previousNodes = _.cloneDeep(wrapper.selectAll('.nivo_tree_circle').data());
+ const wrapper = element
+ .select('.nivo_tree_wrapper')
+ .attr({ width, height })
+ const previousNodes = _.cloneDeep(
+ wrapper.selectAll('.nivo_tree_circle').data()
+ )
wrapper
//.transition()
//.duration(transitionDuration)
//.ease(transitionEasing)
.attr('transform', `translate(${position[0]},${position[1]})`)
- ;
- const cluster = d3.layout.cluster().size(size);
+ const cluster = d3.layout.cluster().size(size)
- const color = getColorRange(colors);
+ const color = getColorRange(colors)
// prevents mutation on the original object by cloning original dataset
// add color to each datum
const nodes = cluster.nodes(_.cloneDeep(root)).map(node => {
- node.hierarchicalType = getHierarchicalNodeType(node);
+ node.hierarchicalType = getHierarchicalNodeType(node)
if (node.depth <= 1) {
- node.color = color(node.name);
+ node.color = color(node.name)
} else if (node.depth > 1) {
- node.color = node.parent.color;
+ node.color = node.parent.color
}
- return node;
- });
-
- const links = cluster.links(nodes);
+ return node
+ })
+ const links = cluster.links(nodes)
// —————————————————————————————————————————————————————————————————————————————————————————————————————————————
// Links
// —————————————————————————————————————————————————————————————————————————————————————————————————————————————
- const link = wrapper.selectAll('.nivo_tree_link').data(links, d => `${identity(d.source)}.${identity(d.target)}`);
+ const link = wrapper
+ .selectAll('.nivo_tree_link')
+ .data(links, d => `${identity(d.source)}.${identity(d.target)}`)
link
- .enter().append('path')
+ .enter()
+ .append('path')
.attr('fill', 'none')
.style('stroke', d => d.target.color)
.attr('class', 'nivo_tree_link')
.attr('d', diagonal)
- .attr('stroke-dasharray', function () { return this.getTotalLength(); })
- .attr('stroke-dashoffset', function () { return this.getTotalLength(); })
- ;
+ .attr('stroke-dasharray', function() {
+ return this.getTotalLength()
+ })
+ .attr('stroke-dashoffset', function() {
+ return this.getTotalLength()
+ })
link
.transition()
@@ -219,29 +242,35 @@ class Tree extends Component {
.duration(transitionDuration)
.ease(transitionEasing)
.attr('d', diagonal)
- .attr('stroke-dasharray', function () { return this.getTotalLength(); })
+ .attr('stroke-dasharray', function() {
+ return this.getTotalLength()
+ })
.attr('stroke-dashoffset', 0)
- ;
- link.exit()
+ link
+ .exit()
.transition()
.duration(transitionDuration)
.ease(transitionEasing)
- .attr('stroke-dashoffset', function () { return this.getTotalLength(); })
+ .attr('stroke-dashoffset', function() {
+ return this.getTotalLength()
+ })
.remove()
- ;
// —————————————————————————————————————————————————————————————————————————————————————————————————————————————
// Circles
// —————————————————————————————————————————————————————————————————————————————————————————————————————————————
- const circle = wrapper.selectAll('.nivo_tree_circle').data(nodes, identity);
+ const circle = wrapper
+ .selectAll('.nivo_tree_circle')
+ .data(nodes, identity)
- circle.enter().append('circle')
+ circle
+ .enter()
+ .append('circle')
.attr('class', 'nivo_tree_circle')
.style('fill', d => d.color)
.attr('transform', transformer)
.attr('r', 0)
- ;
circle
.transition()
@@ -250,59 +279,61 @@ class Tree extends Component {
.ease(transitionEasing)
.attr('transform', transformer)
.attr('r', nodeRadius)
- ;
- circle.exit()
- .remove()
- ;
+ circle.exit().remove()
// —————————————————————————————————————————————————————————————————————————————————————————————————————————————
// Labels
// —————————————————————————————————————————————————————————————————————————————————————————————————————————————
- const label = wrapper.selectAll('.nivo_tree_label').data(nodes, identity);
+ const label = wrapper
+ .selectAll('.nivo_tree_label')
+ .data(nodes, identity)
const {
rootLabelPosition,
intermediateLabelPosition,
- leafLabelPosition
- } = computeLabelPositions(nextProps);
+ leafLabelPosition,
+ } = computeLabelPositions(nextProps)
const {
rootLabelRotation,
intermediateLabelRotation,
- leafLabelRotation
- } = computeLabelRotations(nextProps);
+ leafLabelRotation,
+ } = computeLabelRotations(nextProps)
- label.enter().append('g')
+ label
+ .enter()
+ .append('g')
.attr('class', 'nivo_tree_label')
.style('opacity', 0)
- .each(function (d) {
- const el = d3.select(this);
+ .each(function(d) {
+ const el = d3.select(this)
- let position;
- let rotation;
+ let position
+ let rotation
if (d.hierarchicalType === HIERARCHICAL_NODE_TYPE_ROOT) {
- position = rootLabelPosition;
- rotation = rootLabelRotation;
+ position = rootLabelPosition
+ rotation = rootLabelRotation
} else if (d.hierarchicalType === HIERARCHICAL_NODE_TYPE_LEAF) {
- position = leafLabelPosition;
- rotation = leafLabelRotation;
+ position = leafLabelPosition
+ rotation = leafLabelRotation
} else {
- position = intermediateLabelPosition;
- rotation = intermediateLabelRotation;
+ position = intermediateLabelPosition
+ rotation = intermediateLabelRotation
}
- el.attr('transform', `${transformer(d)} rotate(${rotation})`);
-
- el.call(makeLabel({
- text: d.name,
- position,
- labelOffset: 0,
- labelPaddingX,
- labelPaddingY
- }));
+ el.attr('transform', `${transformer(d)} rotate(${rotation})`)
+
+ el.call(
+ makeLabel({
+ text: d.name,
+ position,
+ labelOffset: 0,
+ labelPaddingX,
+ labelPaddingY,
+ })
+ )
})
- ;
label
.transition()
@@ -311,50 +342,51 @@ class Tree extends Component {
.ease(transitionEasing)
.style('opacity', 1)
.attr('transform', d => {
- const translate = transformer(d);
+ const translate = transformer(d)
- let rotation;
+ let rotation
if (d.hierarchicalType === HIERARCHICAL_NODE_TYPE_ROOT) {
- rotation = rootLabelRotation;
+ rotation = rootLabelRotation
} else if (d.hierarchicalType === HIERARCHICAL_NODE_TYPE_LEAF) {
- rotation = leafLabelRotation;
+ rotation = leafLabelRotation
} else {
- rotation = intermediateLabelRotation;
+ rotation = intermediateLabelRotation
}
- return `${translate} rotate(${rotation})`;
+ return `${translate} rotate(${rotation})`
})
- .each(function (d) {
- const el = d3.select(this);
+ .each(function(d) {
+ const el = d3.select(this)
- let position;
+ let position
if (d.hierarchicalType === HIERARCHICAL_NODE_TYPE_ROOT) {
- position = rootLabelPosition;
+ position = rootLabelPosition
} else if (d.hierarchicalType === HIERARCHICAL_NODE_TYPE_LEAF) {
- position = leafLabelPosition;
+ position = leafLabelPosition
} else {
- position = intermediateLabelPosition;
+ position = intermediateLabelPosition
}
- el.call(makeLabel({
- text: d.name,
- position,
- labelOffset,
- labelPaddingX,
- labelPaddingY
- }));
+ el.call(
+ makeLabel({
+ text: d.name,
+ position,
+ labelOffset,
+ labelPaddingX,
+ labelPaddingY,
+ })
+ )
})
- ;
}
shouldComponentUpdate(nextProps) {
- this.renderD3(nextProps);
+ this.renderD3(nextProps)
- return false;
+ return false
}
componentDidMount() {
- this.renderD3(this.props);
+ this.renderD3(this.props)
}
render() {
@@ -362,48 +394,52 @@ class Tree extends Component {
- );
+ )
}
}
-const { object, number, string, func, any, oneOf } = PropTypes;
+const { object, number, string, func, any, oneOf } = PropTypes
Tree.propTypes = {
- containerWidth: number.isRequired,
- containerHeight: number.isRequired,
- margin: marginPropType,
- root: object.isRequired,
- identity: func.isRequired,
- labelFn: func.isRequired,
- direction: oneOf(['horizontal', 'horizontal-reverse', 'vertical', 'vertical-reverse']).isRequired,
- colors: any.isRequired,
- nodeRadius: number.isRequired,
- transitionDuration: number.isRequired,
- transitionEasing: string.isRequired,
- labelOffset: number.isRequired,
- labelPaddingX: number.isRequired,
- labelPaddingY: number.isRequired,
- rootLabelPosition: string,
- intermediateLabelPosition: string,
- leafLabelPosition: string,
- rootLabelRotation: number,
- intermediateLabelRotation: number,
- leafLabelRotation: number
-};
+ containerWidth: number.isRequired,
+ containerHeight: number.isRequired,
+ margin: marginPropType,
+ root: object.isRequired,
+ identity: func.isRequired,
+ labelFn: func.isRequired,
+ direction: oneOf([
+ 'horizontal',
+ 'horizontal-reverse',
+ 'vertical',
+ 'vertical-reverse',
+ ]).isRequired,
+ colors: any.isRequired,
+ nodeRadius: number.isRequired,
+ transitionDuration: number.isRequired,
+ transitionEasing: string.isRequired,
+ labelOffset: number.isRequired,
+ labelPaddingX: number.isRequired,
+ labelPaddingY: number.isRequired,
+ rootLabelPosition: string,
+ intermediateLabelPosition: string,
+ leafLabelPosition: string,
+ rootLabelRotation: number,
+ intermediateLabelRotation: number,
+ leafLabelRotation: number,
+}
Tree.defaultProps = {
- margin: Nivo.defaults.margin,
- labelFn: d => d.name,
- direction: 'horizontal',
- identity: d => `${d.parent ? d.parent.name : 'root'}.${d.name}.${d.depth}`,
- colors: Nivo.defaults.colorRange,
- labelOffset: 8,
- labelPaddingX: 8,
- labelPaddingY: 4,
- nodeRadius: 6,
+ margin: Nivo.defaults.margin,
+ labelFn: d => d.name,
+ direction: 'horizontal',
+ identity: d => `${d.parent ? d.parent.name : 'root'}.${d.name}.${d.depth}`,
+ colors: Nivo.defaults.colorRange,
+ labelOffset: 8,
+ labelPaddingX: 8,
+ labelPaddingY: 4,
+ nodeRadius: 6,
transitionDuration: Nivo.defaults.transitionDuration,
- transitionEasing: Nivo.defaults.transitionEasing
-};
-
+ transitionEasing: Nivo.defaults.transitionEasing,
+}
-export default Dimensions()(Tree);
+export default Dimensions()(Tree)
diff --git a/src/components/charts/bars/Bar.js b/src/components/charts/bars/Bar.js
new file mode 100644
index 000000000..c0c0e92db
--- /dev/null
+++ b/src/components/charts/bars/Bar.js
@@ -0,0 +1,287 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import Nivo, { defaultTheme } from '../../../Nivo'
+import { margin as marginPropType } from '../../../PropTypes'
+import { getColorRange } from '../../../ColorUtils'
+import SvgWrapper from '../SvgWrapper'
+import Axis from '../../axes/Axis'
+import Grid from '../../axes/Grid'
+import BarItem from './BarItem'
+import BarItemLabel from './BarItemLabel'
+import { scaleBand, scaleLinear, stack } from 'd3'
+
+const axisPropType = PropTypes.shape({
+ tickSize: PropTypes.number,
+ tickPadding: PropTypes.number,
+ format: PropTypes.func,
+})
+
+const getAxis = (
+ axes,
+ scale,
+ position,
+ width,
+ height,
+ theme,
+ { animate, motionStiffness, motionDamping }
+) => {
+ if (!axes[position]) return null
+
+ const axis = axes[position]
+
+ return (
+
+ )
+}
+
+export default class Bar extends Component {
+ static propTypes = {
+ // data
+ data: PropTypes.arrayOf(
+ PropTypes.shape({
+ id: PropTypes.string.isRequired,
+ data: PropTypes.arrayOf(
+ PropTypes.shape({
+ x: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.string,
+ ]).isRequired,
+ y: PropTypes.oneOfType([
+ PropTypes.number,
+ PropTypes.string,
+ ]).isRequired,
+ })
+ ).isRequired,
+ })
+ ).isRequired,
+
+ groupMode: PropTypes.oneOf(['stacked', 'grouped']).isRequired,
+
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ margin: marginPropType,
+ xPadding: PropTypes.number.isRequired,
+
+ // axes
+ axes: PropTypes.shape({
+ top: axisPropType,
+ right: axisPropType,
+ bottom: axisPropType,
+ left: axisPropType,
+ }),
+ enableGridX: PropTypes.bool.isRequired,
+ enableGridY: PropTypes.bool.isRequired,
+
+ // labels
+ enableLabels: PropTypes.bool.isRequired,
+
+ // interactions
+ onClick: PropTypes.func,
+
+ theme: PropTypes.object.isRequired,
+ colors: PropTypes.any.isRequired,
+
+ // motion
+ animate: PropTypes.bool.isRequired,
+ motionStiffness: PropTypes.number.isRequired,
+ motionDamping: PropTypes.number.isRequired,
+ }
+
+ static defaultProps = {
+ margin: Nivo.defaults.margin,
+ groupMode: 'stacked',
+ colors: Nivo.defaults.colorRange,
+ xPadding: 0.1,
+ enableLabels: true,
+ axes: {
+ left: {},
+ bottom: {},
+ },
+ enableGridX: false,
+ enableGridY: true,
+ theme: {},
+ animate: true,
+ motionStiffness: Nivo.defaults.motionStiffness,
+ motionDamping: Nivo.defaults.motionDamping,
+ }
+
+ render() {
+ const {
+ data,
+ groupMode,
+ margin: _margin,
+ width: _width,
+ height: _height,
+ colors,
+ xPadding,
+ axes,
+ enableGridX,
+ enableGridY,
+ enableLabels,
+ theme: _theme,
+ animate,
+ motionStiffness,
+ motionDamping,
+ } = this.props
+
+ const margin = Object.assign({}, Nivo.defaults.margin, _margin)
+ const width = _width - margin.left - margin.right
+ const height = _height - margin.top - margin.bottom
+
+ const theme = _.merge({}, defaultTheme, _theme)
+ const color = getColorRange(colors)
+
+ // determining x scale
+ const xLengths = _.uniq(data.map(({ data }) => data.length))
+ if (xLengths.length > 1) {
+ throw new Error(
+ [
+ `Found inconsitent data for x,`,
+ `expecting all series to have same length`,
+ `but found: ${xLengths.join(', ')}`,
+ ].join(' ')
+ )
+ }
+ const xScale = scaleBand()
+ .rangeRound([0, width])
+ .domain(data[0].data.map(({ x }) => x))
+ .padding(xPadding)
+
+ // determining y scale, depending on `groupMode`
+ let maxY
+ if (groupMode === 'stacked') {
+ maxY = _.max(
+ _.range(xLengths).map(i =>
+ _.sumBy(data, serie => serie.data[i].y)
+ )
+ )
+ } else if (groupMode === 'grouped') {
+ maxY = _.maxBy(
+ data.reduce((acc, serie) => [...acc, ...serie.data], []),
+ 'y'
+ ).y
+ } else {
+ throw new TypeError(
+ [
+ `'${groupMode}' is not a valid group mode,`,
+ `must be one of: 'grouped', 'stacked'`,
+ ].join(' ')
+ )
+ }
+ const yScale = scaleLinear().rangeRound([height, 0]).domain([0, maxY])
+
+ const rects = []
+ if (groupMode === 'grouped') {
+ data.forEach(({ id, data: serie }, serieIndex) => {
+ serie.forEach(d => {
+ const barWidth = xScale.bandwidth() / data.length
+ const x = xScale(d.x) + barWidth * serieIndex
+ const y = yScale(d.y)
+ const barHeight = height - y
+
+ const value = d.y
+
+ if (barWidth > 0 && barHeight > 0) {
+ rects.push({
+ key: `${id}.${d.x}`,
+ value,
+ x,
+ y,
+ width: barWidth,
+ height: barHeight,
+ color: color(id),
+ })
+ }
+ })
+ })
+ } else if (groupMode === 'stacked') {
+ const stackedData = data.map(({ id }) => ({
+ id,
+ data: [],
+ }))
+ _.range(xLengths).forEach(index => {
+ data.forEach(({ data: serie }, serieIndex) => {
+ const d = serie[index]
+
+ let y0 = 0
+ let y1 = d.y
+ if (serieIndex > 0) {
+ y0 = stackedData[serieIndex - 1].data[index].y1
+ y1 = d.y + y0
+ }
+
+ stackedData[serieIndex].data[index] = Object.assign({}, d, {
+ y0,
+ y1,
+ })
+ })
+ })
+
+ console.log(stackedData)
+
+ stackedData.forEach(({ id, data: serie }) => {
+ serie.forEach(d => {
+ const x = xScale(d.x)
+ const barWidth = xScale.bandwidth()
+ const y = yScale(d.y1)
+ const barHeight = yScale(d.y0) - y
+
+ const value = d.y
+
+ if (barWidth > 0 && barHeight > 0) {
+ rects.push({
+ key: `${id}.${d.x}`,
+ value,
+ x,
+ y,
+ width: barWidth,
+ height: barHeight,
+ color: color(id),
+ })
+ }
+ })
+ })
+ }
+
+ const motionProps = {
+ animate,
+ motionDamping,
+ motionStiffness,
+ }
+
+ return (
+
+
+ {['left', 'right'].map(position =>
+ getAxis(axes, yScale, position, width, height, theme, motionProps)
+ )}
+ {['top', 'bottom'].map(position =>
+ getAxis(axes, xScale, position, width, height, theme, motionProps)
+ )}
+ {rects.map(d => )}
+ {enableLabels &&
+ rects.map(d => )}
+
+ )
+ }
+}
diff --git a/src/components/charts/bars/BarGroup.js b/src/components/charts/bars/BarGroup.js
new file mode 100644
index 000000000..b4a2f0c25
--- /dev/null
+++ b/src/components/charts/bars/BarGroup.js
@@ -0,0 +1,129 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import _ from 'lodash'
+import PropTypes from 'prop-types'
+import ResponsiveWrapper from '../ResponsiveWrapper'
+import SvgWrapper from '../SvgWrapper'
+import Nivo, { defaultTheme } from '../../../Nivo'
+import { margin as marginPropType } from '../../../PropTypes'
+import { getColorRange } from '../../../ColorUtils'
+import Bar from './Bars'
+import { scalesPropType, scalesFromObject } from '../../../lib/scale'
+
+const MODE_GROUPED = 'group'
+const MODE_STACKED = 'stack'
+
+export default class BarGroup extends Component {
+ static propTypes = {
+ scales: scalesPropType,
+ data: PropTypes.arrayOf(PropTypes.object),
+ keys: PropTypes.arrayOf(
+ PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+ ).isRequired,
+ mode: PropTypes.oneOf([MODE_GROUPED, MODE_STACKED]).isRequired,
+ colors: PropTypes.any.isRequired,
+ children: PropTypes.func.isRequired,
+ margin: marginPropType,
+ theme: PropTypes.object.isRequired,
+ }
+
+ static defaultProps = {
+ mode: 'stack',
+ colors: Nivo.defaults.colorRange,
+ theme: {},
+ children: () => null,
+ }
+
+ render() {
+ return (
+
+ {({ width: _width, height: _height }) => {
+ const {
+ data,
+ margin: _margin,
+ keys,
+ xScale,
+ x,
+ yScale,
+ scales: _scales,
+ colors,
+ children,
+ theme: _theme,
+ } = this.props
+
+ const margin = Object.assign(
+ {},
+ Nivo.defaults.margin,
+ _margin
+ )
+ const width = _width - margin.left - margin.right
+ const height = _height - margin.top - margin.bottom
+
+ const theme = _.merge({}, defaultTheme, _theme)
+ const scales = scalesFromObject(
+ _scales,
+ width,
+ height,
+ data
+ )
+ const getColor = getColorRange(colors)
+
+ const barData = data.map(d =>
+ keys.reduce((acc, key, index) => {
+ let y0 = 0
+ let y1 = d[key]
+ if (index > 0) {
+ y0 = acc[keys[index - 1]][1]
+ y1 += y0
+ }
+
+ return Object.assign(acc, {
+ [key]: [y0, y1],
+ })
+ }, d)
+ )
+
+ return (
+
+ {children({
+ data,
+ barData,
+ scales,
+ width,
+ height,
+ theme,
+ })}
+
+ {keys.map(key =>
+
+ )}
+
+
+ )
+ }}
+
+ )
+ }
+}
diff --git a/src/components/charts/bars/BarItem.js b/src/components/charts/bars/BarItem.js
new file mode 100644
index 000000000..50944224f
--- /dev/null
+++ b/src/components/charts/bars/BarItem.js
@@ -0,0 +1,42 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+class BarItem extends Component {
+ render() {
+ const { x, y, width, height, color } = this.props
+
+ return (
+
+ )
+ }
+}
+
+BarItem.propTypes = {
+ //value: PropTypes.number.isRequired,
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ color: PropTypes.string.isRequired,
+}
+
+BarItem.defaultProps = {}
+
+export default BarItem
diff --git a/src/components/charts/bars/BarItemLabel.js b/src/components/charts/bars/BarItemLabel.js
new file mode 100644
index 000000000..1acf8b6bc
--- /dev/null
+++ b/src/components/charts/bars/BarItemLabel.js
@@ -0,0 +1,55 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+const safeSize = 20
+
+export default class BarItemLabel extends Component {
+ static propTypes = {
+ value: PropTypes.number.isRequired,
+ x: PropTypes.number.isRequired,
+ y: PropTypes.number.isRequired,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ color: PropTypes.string.isRequired,
+ }
+
+ static defaultProps = {}
+
+ render() {
+ const { x: _x, y: _y, width, height, color, value } = this.props
+
+ let x = _x
+ let y = _y
+ let textX
+ let line
+ let textAnchor
+ if (height < safeSize) {
+ textX = -13
+ textAnchor = 'end'
+ y = _y + height / 2
+ line =
+ } else {
+ textX = 0
+ textAnchor = 'middle'
+ x = _x + width / 2
+ y = _y + height / 2
+ }
+
+ return (
+
+ {line}
+
+ {value}
+
+
+ )
+ }
+}
diff --git a/src/components/charts/bars/Bars.js b/src/components/charts/bars/Bars.js
index 4759cc11a..4d5bcd46c 100644
--- a/src/components/charts/bars/Bars.js
+++ b/src/components/charts/bars/Bars.js
@@ -6,203 +6,107 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
-import _ from 'lodash'
-import Nivo from '../../../Nivo'
-import { margin as marginPropType } from '../../../PropTypes'
-import { getColorRange } from '../../../ColorUtils'
-import { convertGetter } from '../../../lib/propertiesConverters'
-import Axis from '../../axes/Axis'
-import Grid from '../../axes/Grid'
-import {
- scaleBand,
- scaleLinear,
- stack,
- max,
-} from 'd3'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import _ from 'lodash'
+import Nivo from '../../../Nivo'
+import { getColorRange } from '../../../ColorUtils'
+import { getAccessorFor } from '../../../lib/propertiesConverters'
+import BarItem from './BarItem'
+import BarItemLabel from './BarItemLabel'
+
+export default class Bars extends Component {
+ static propTypes = {
+ data: PropTypes.arrayOf(PropTypes.object),
+ colors: PropTypes.any.isRequired,
+ scales: PropTypes.object,
+ width: PropTypes.number.isRequired,
+ height: PropTypes.number.isRequired,
+ // labels
+ enableLabels: PropTypes.bool.isRequired,
+ // motion
+ animate: PropTypes.bool.isRequired,
+ motionStiffness: PropTypes.number.isRequired,
+ motionDamping: PropTypes.number.isRequired,
+ }
+ static defaultProps = {
+ colors: Nivo.defaults.colorRange,
+ // labels
+ enableLabels: true,
+ // motion
+ animate: true,
+ motionStiffness: Nivo.defaults.motionStiffness,
+ motionDamping: Nivo.defaults.motionDamping,
+ }
-class Bars extends Component {
render() {
const {
data,
- keys,
- groupMode,
- identity: _identity,
- margin: _margin,
- width: _width, height: _height,
- spacing,
+ scales,
+ xScale: _xScale,
+ yScale: _yScale,
+ height,
colors,
- xAxis, xAxisOrientation, xAxisTickSize, xAxisTickPadding,
- yAxis, yAxisOrientation, yAxisTickSize, yAxisTickPadding,
- animate,
- motionStiffness, motionDamping,
+ x: _x,
+ y: _y,
} = this.props
- const identity = convertGetter(_identity)
-
- const margin = Object.assign({}, Nivo.defaults.margin, _margin)
- const width = _width - margin.left - margin.right
- const height = _height - margin.top - margin.bottom
-
- const color = getColorRange(colors)
-
- const x = scaleBand()
- .rangeRound([0, width])
- .padding(spacing)
+ const xScale = scales[_xScale]
+ const yScale = scales[_yScale]
- const y = scaleLinear()
- .rangeRound([height, 0])
+ const getXValue = getAccessorFor(_x)
+ const getYValue = getAccessorFor(_y)
- x.domain(data.map(identity))
+ const getColor = getColorRange(colors)
const rects = []
-
- if (groupMode === 'stacked') {
- const series = stack().keys(keys)(data)
-
- y.domain([0, max(series[series.length - 1], d => d[1])])
-
- series.forEach(serie => {
- serie.forEach(d => {
- rects.push({
- key: `${serie.key}.${identity(d.data)}`,
- x: x(identity(d.data)),
- y: y(d[1]),
- width: x.bandwidth(),
- height: y(d[0]) - y(d[1]),
- color: color(serie.key),
- })
- })
- })
- } else {
- y.domain([0, max(data, d => max(_.values(_.pick(d, keys))))])
-
- const barWidth = x.bandwidth() / keys.length
-
- data.forEach(bucket => {
- let index = 0
- _.forOwn(_.pick(bucket, keys), (value, key) => {
- rects.push({
- key: `${key}.${identity(bucket)}`,
- x: x(identity(bucket)) + barWidth * index,
- y: y(value),
- width: barWidth,
- height: height - y(value),
- color: color(key),
- })
- index++
+ data.forEach((d, i) => {
+ let x
+ let y
+ let barWidth
+ let barHeight
+
+ const xValue = getXValue(d)
+ const yValue = getYValue(d)
+
+ if (xScale.bandwidth) {
+ barWidth = xScale.bandwidth()
+ x = xScale(xValue)
+ } else {
+ x = 0
+ barWidth = xScale(xValue)
+ }
+
+ if (yScale.bandwidth) {
+ barHeight = yScale.bandwidth()
+ y = yScale(getYValue(d))
+ } else {
+ if (Array.isArray(yValue)) {
+ y = yScale(yValue[1])
+ barHeight = yScale(yValue[0]) - y
+ } else {
+ y = yScale(yValue)
+ barHeight = height - y
+ }
+ }
+
+ if (barWidth > 0 && barHeight > 0) {
+ rects.push({
+ key: `bar.${i}`,
+ x,
+ y,
+ width: barWidth,
+ height: barHeight,
+ color: getColor(d),
})
- })
- }
+ }
+ })
return (
-
+
+ {rects.map(d => )}
+
)
}
}
-
-const { number, bool, string, func, any, object, oneOf, oneOfType, arrayOf, shape } = PropTypes
-
-Bars.propTypes = {
- width: number.isRequired,
- height: number.isRequired,
- margin: marginPropType,
- data: arrayOf(object).isRequired,
- keys: arrayOf(string).isRequired,
- identity: oneOfType([string, func]).isRequired,
- groupMode: oneOf(['stacked', 'grouped']).isRequired,
- spacing: number,
- colors: any.isRequired,
-
- // axes
- xAxis: bool.isRequired,
- xAxisOrientation: oneOf(['top', 'bottom']).isRequired,
- xAxisTickSize: number,
- xAxisTickPadding: number,
- yAxis: bool.isRequired,
- yAxisOrientation: oneOf(['left', 'right']).isRequired,
- yAxisTickSize: number,
- yAxisTickPadding: number,
-
- // motion
- animate: PropTypes.bool.isRequired,
- motionStiffness: PropTypes.number.isRequired,
- motionDamping: PropTypes.number.isRequired,
-}
-
-Bars.defaultProps = {
- margin: Nivo.defaults.margin,
- groupMode: 'stacked',
- spacing: 0.1,
- colors: Nivo.defaults.colorRange,
-
- // axes
- xAxis: true,
- xAxisOrientation: 'bottom',
- yAxis: true,
- yAxisOrientation: 'left',
-
- // motion
- animate: true,
- motionStiffness: Nivo.defaults.motionStiffness,
- motionDamping: Nivo.defaults.motionDamping,
-}
-
-
-
-export default Bars
diff --git a/src/components/charts/bars/BarsD3.js b/src/components/charts/bars/BarsD3.js
index daae625ed..3a73a644d 100644
--- a/src/components/charts/bars/BarsD3.js
+++ b/src/components/charts/bars/BarsD3.js
@@ -6,115 +6,120 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import { findDOMNode } from 'react-dom';
-import d3 from 'd3';
-import _ from 'lodash';
-import Nivo from '../../../Nivo';
-import { getColorRange, getColorGenerator } from '../../../ColorUtils';
-import { margin as marginPropType } from '../../../PropTypes';
-import decoratorsFromReactChildren from '../../../lib/decoratorsFromReactChildren';
-
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import { findDOMNode } from 'react-dom'
+import d3 from 'd3'
+import _ from 'lodash'
+import Nivo from '../../../Nivo'
+import { getColorRange, getColorGenerator } from '../../../ColorUtils'
+import { margin as marginPropType } from '../../../PropTypes'
+import decoratorsFromReactChildren from '../../../lib/decoratorsFromReactChildren'
class BarsD3 extends Component {
renderD3(props) {
const {
groupMode,
onBarClick,
- colors, classify,
- transitionDuration, transitionEasing, transitionStaggering
- } = props;
+ colors,
+ classify,
+ transitionDuration,
+ transitionEasing,
+ transitionStaggering,
+ } = props
- const element = d3.select(findDOMNode(this));
- const wrapper = element.select('.nivo_bars_wrapper');
+ const element = d3.select(findDOMNode(this))
+ const wrapper = element.select('.nivo_bars_wrapper')
- const margin = _.assign({}, Nivo.defaults.margin, props.margin);
- const width = props.width - margin.left - margin.right;
- const height = props.height - margin.top - margin.bottom;
+ const margin = _.assign({}, Nivo.defaults.margin, props.margin)
+ const width = props.width - margin.left - margin.right
+ const height = props.height - margin.top - margin.bottom
- let data = [];
+ let data = []
props.data.forEach(d => {
d.values.forEach((value, i) => {
const datum = _.assign({}, value, {
stackIndex: i,
- x: d.x,
- xId: d.id,
- });
+ x: d.x,
+ xId: d.id,
+ })
if (i === 0) {
- datum.y0 = 0;
- datum.y1 = value.y;
+ datum.y0 = 0
+ datum.y1 = value.y
} else {
- datum.y0 = data[data.length - 1].y1;
- datum.y1 = datum.y0 + value.y;
+ datum.y0 = data[data.length - 1].y1
+ datum.y1 = datum.y0 + value.y
}
- data.push(datum);
- });
- });
+ data.push(datum)
+ })
+ })
element.attr({
- width: props.width,
- height: props.height
- });
- wrapper.attr('transform', `translate(${margin.left},${margin.top})`);
-
- const xScale = d3.scale.ordinal()
- .rangeRoundBands([0, width], .2)
+ width: props.width,
+ height: props.height,
+ })
+ wrapper.attr('transform', `translate(${margin.left},${margin.top})`)
+
+ const xScale = d3.scale
+ .ordinal()
+ .rangeRoundBands([0, width], 0.2)
.domain(data.map((d, i) => d.x))
- ;
- let maxYValue;
+ let maxYValue
if (groupMode === 'stacked') {
- maxYValue = d3.max(data, d => d.y1);
+ maxYValue = d3.max(data, d => d.y1)
} else {
- maxYValue = d3.max(data, d => d.y);
+ maxYValue = d3.max(data, d => d.y)
}
- const maxGroupLength = d3.max(props.data, d => d.values.length);
+ const maxGroupLength = d3.max(props.data, d => d.values.length)
- const yScale = d3.scale.linear()
+ const yScale = d3.scale
+ .linear()
.rangeRound([height, 0])
.domain([0, maxYValue])
- ;
- const color = getColorRange(colors);
+ const color = getColorRange(colors)
data = data.map(d => {
- let rendered;
+ let rendered
if (groupMode === 'stacked') {
rendered = {
- x: xScale(d.x),
- y: yScale(d.y1),
- width: xScale.rangeBand(),
+ x: xScale(d.x),
+ y: yScale(d.y1),
+ width: xScale.rangeBand(),
height: yScale(d.y0) - yScale(d.y1),
-
- };
+ }
} else {
rendered = {
- x: xScale(d.x) + d.stackIndex * xScale.rangeBand() / maxGroupLength,
- y: yScale(d.y),
- width: xScale.rangeBand() / maxGroupLength,
+ x:
+ xScale(d.x) +
+ d.stackIndex * xScale.rangeBand() / maxGroupLength,
+ y: yScale(d.y),
+ width: xScale.rangeBand() / maxGroupLength,
height: height - yScale(d.y),
}
}
d.render = {
- color: color(d.id),
- ...rendered
- };
+ color: color(d.id),
+ ...rendered,
+ }
- return d;
- });
+ return d
+ })
//console.log(data);
- const rects = wrapper.selectAll('.nivo_bars_bar').data(data, d => `${d.xId}${d.id}`);
+ const rects = wrapper
+ .selectAll('.nivo_bars_bar')
+ .data(data, d => `${d.xId}${d.id}`)
- rects.enter()
+ rects
+ .enter()
.append('rect')
.classed('nivo_bars_bar', true)
.attr('width', d => d.render.width)
@@ -123,7 +128,6 @@ class BarsD3 extends Component {
.attr('height', 0)
.style('fill', d => d.render.color)
.on('click', onBarClick)
- ;
if (groupMode === 'stacked') {
rects
@@ -131,91 +135,106 @@ class BarsD3 extends Component {
.delay((d, i) => i * transitionStaggering)
.duration(transitionDuration)
.ease(transitionEasing)
- .style('fill', d => d.render.color)
- .attr('y', d => d.render.y)
- .attr('height', d => d.render.height)
+ .style('fill', d => d.render.color)
+ .attr('y', d => d.render.y)
+ .attr('height', d => d.render.height)
.transition()
.duration(transitionDuration)
.ease(transitionEasing)
- .attr('x', d => d.render.x)
- .attr('width', d => d.render.width)
- ;
+ .attr('x', d => d.render.x)
+ .attr('width', d => d.render.width)
} else {
rects
.transition()
.delay((d, i) => i * transitionStaggering)
.duration(transitionDuration)
.ease(transitionEasing)
- .style('fill', d => d.render.color)
- .attr('x', d => d.render.x)
- .attr('width', d => d.render.width)
+ .style('fill', d => d.render.color)
+ .attr('x', d => d.render.x)
+ .attr('width', d => d.render.width)
.transition()
.duration(transitionDuration)
.ease(transitionEasing)
- .attr('y', d => d.render.y)
- .attr('height', d => d.render.height)
- ;
+ .attr('y', d => d.render.y)
+ .attr('height', d => d.render.height)
}
- this.decorators.forEach(decorator => {
- });
+ this.decorators.forEach(decorator => {})
}
shouldComponentUpdate(nextProps, nextState) {
- this.decorators = decoratorsFromReactChildren(nextProps.children, 'decorateBars');
+ this.decorators = decoratorsFromReactChildren(
+ nextProps.children,
+ 'decorateBars'
+ )
- this.renderD3(nextProps, nextState);
+ this.renderD3(nextProps, nextState)
- return false;
+ return false
}
componentDidMount() {
- this.decorators = decoratorsFromReactChildren(this.props.children, 'decorateBars');
+ this.decorators = decoratorsFromReactChildren(
+ this.props.children,
+ 'decorateBars'
+ )
- this.renderD3(this.props, this.state);
+ this.renderD3(this.props, this.state)
}
render() {
return (
- );
+ )
}
}
-const { number, string, func, any, oneOf, oneOfType, arrayOf, shape } = PropTypes;
+const {
+ number,
+ string,
+ func,
+ any,
+ oneOf,
+ oneOfType,
+ arrayOf,
+ shape,
+} = PropTypes
BarsD3.propTypes = {
- width: number.isRequired,
- height: number.isRequired,
- margin: marginPropType,
- data: arrayOf(shape({
- x: number.isRequired,
- id: oneOfType([number, string]).isRequired,
- values: arrayOf(shape({
+ width: number.isRequired,
+ height: number.isRequired,
+ margin: marginPropType,
+ data: arrayOf(
+ shape({
+ x: number.isRequired,
id: oneOfType([number, string]).isRequired,
- y: number.isRequired,
- })).isRequired
- })).isRequired,
- groupMode: oneOf(['stacked', 'grouped']),
- onBarClick: func.isRequired,
- colors: any.isRequired,
- classify: func,
- transitionDuration: number.isRequired,
- transitionEasing: string.isRequired,
+ values: arrayOf(
+ shape({
+ id: oneOfType([number, string]).isRequired,
+ y: number.isRequired,
+ })
+ ).isRequired,
+ })
+ ).isRequired,
+ groupMode: oneOf(['stacked', 'grouped']),
+ onBarClick: func.isRequired,
+ colors: any.isRequired,
+ classify: func,
+ transitionDuration: number.isRequired,
+ transitionEasing: string.isRequired,
transitionStaggering: number.isRequired,
-};
+}
BarsD3.defaultProps = {
- margin: Nivo.defaults.margin,
- groupMode: 'stacked',
- onBarClick: () => {},
- colors: Nivo.defaults.colorRange,
- transitionDuration: Nivo.defaults.transitionDuration,
- transitionEasing: Nivo.defaults.transitionEasing,
+ margin: Nivo.defaults.margin,
+ groupMode: 'stacked',
+ onBarClick: () => {},
+ colors: Nivo.defaults.colorRange,
+ transitionDuration: Nivo.defaults.transitionDuration,
+ transitionEasing: Nivo.defaults.transitionEasing,
transitionStaggering: 10,
-};
-
+}
-export default BarsD3;
+export default BarsD3
diff --git a/src/components/charts/bars/ResponsiveBar.js b/src/components/charts/bars/ResponsiveBar.js
new file mode 100644
index 000000000..0e058ce71
--- /dev/null
+++ b/src/components/charts/bars/ResponsiveBar.js
@@ -0,0 +1,22 @@
+/*
+ * This file is part of the nivo project.
+ *
+ * (c) 2016 Raphaël Benitte
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+import React, { Component } from 'react'
+import ResponsiveWrapper from '../ResponsiveWrapper'
+import Bar from './Bar'
+
+export default class ResponsiveBar extends Component {
+ render() {
+ return (
+
+ {({ width, height }) =>
+ }
+
+ )
+ }
+}
diff --git a/src/components/charts/bars/ResponsiveBars.js b/src/components/charts/bars/ResponsiveBars.js
deleted file mode 100644
index 82b4bd7c2..000000000
--- a/src/components/charts/bars/ResponsiveBars.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/*
- * This file is part of the nivo project.
- *
- * (c) 2016 Raphaël Benitte
- *
- * For the full copyright and license information, please view the LICENSE
- * file that was distributed with this source code.
- */
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
-import Dimensions from 'react-dimensions'
-import Bars from './Bars'
-
-
-class ResponsiveBars extends Component {
- render() {
- const { containerWidth, containerHeight } = this.props
-
- return (
-
- )
- }
-}
-
-
-export default Dimensions()(ResponsiveBars)
diff --git a/src/components/charts/bars/ResponsiveBarsD3.js b/src/components/charts/bars/ResponsiveBarsD3.js
index 56ebc0307..51a8f41e9 100644
--- a/src/components/charts/bars/ResponsiveBarsD3.js
+++ b/src/components/charts/bars/ResponsiveBarsD3.js
@@ -6,16 +6,14 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import Dimensions from 'react-dimensions';
-import BarsD3 from './BarsD3';
-
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Dimensions from 'react-dimensions'
+import BarsD3 from './BarsD3'
class ResponsiveBarsD3 extends Component {
render() {
- const { containerWidth, containerHeight } = this.props;
+ const { containerWidth, containerHeight } = this.props
return (
- );
+ )
}
}
-
-export default Dimensions()(ResponsiveBarsD3);
+export default Dimensions()(ResponsiveBarsD3)
diff --git a/src/components/charts/bars/barsDataSchema.js b/src/components/charts/bars/barsDataSchema.js
index 567b15930..621f589a3 100644
--- a/src/components/charts/bars/barsDataSchema.js
+++ b/src/components/charts/bars/barsDataSchema.js
@@ -1,6 +1,5 @@
const barsDataSchema = {
- type: 'array'
-};
+ type: 'array',
+}
-
-export default barsDataSchema;
+export default barsDataSchema
diff --git a/src/components/charts/bars/index.js b/src/components/charts/bars/index.js
index 38ec04726..0b25ab7a5 100644
--- a/src/components/charts/bars/index.js
+++ b/src/components/charts/bars/index.js
@@ -6,7 +6,7 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-export Bars from './Bars'
-export ResponsiveBars from './ResponsiveBars'
+export Bar from './Bar'
+export Bars from './Bars'
+export ResponsiveBar from './ResponsiveBar'
+export BarGroup from './BarGroup'
diff --git a/src/components/charts/bubble/Bubble.js b/src/components/charts/bubble/Bubble.js
index fcf62cdaf..03e3737c2 100644
--- a/src/components/charts/bubble/Bubble.js
+++ b/src/components/charts/bubble/Bubble.js
@@ -6,18 +6,16 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component } from 'react'
-import _ from 'lodash'
-import { convertLabel } from '../../../lib/propertiesConverters'
+import React, { Component } from 'react'
+import _ from 'lodash'
+import { convertLabel } from '../../../lib/propertiesConverters'
import { bubblePropTypes, bubbleDefaultProps } from './BubbleProps'
-import BubblePlaceholders from './BubblePlaceholders'
-import { getColorGenerator } from '../../../ColorUtils'
-
+import BubblePlaceholders from './BubblePlaceholders'
+import { getColorGenerator } from '../../../ColorUtils'
const createNodes = ({
- borderWidth, borderColor,
+ borderWidth,
+ borderColor,
enableLabel,
label: _label,
labelFormat,
@@ -25,42 +23,45 @@ const createNodes = ({
labelTextColor,
labelTextDY,
}) => {
- const label = convertLabel(_label, labelFormat)
+ const label = convertLabel(_label, labelFormat)
const borderColorFn = getColorGenerator(borderColor)
- const textColorFn = getColorGenerator(labelTextColor)
-
+ const textColorFn = getColorGenerator(labelTextColor)
+
return nodes => {
const renderedNodes = []
- nodes
- .filter(node => node.style.r > 0)
- .forEach(node => {
- renderedNodes.push(
-
- )
- })
+ nodes.filter(node => node.style.r > 0).forEach(node => {
+ renderedNodes.push(
+
+ )
+ })
if (enableLabel === true) {
nodes
.filter(node => {
- return node.data.height === 0 && (labelSkipRadius === 0 || node.data.r >= labelSkipRadius)
+ return (
+ node.data.height === 0 &&
+ (labelSkipRadius === 0 ||
+ node.data.r >= labelSkipRadius)
+ )
})
.forEach(node => {
renderedNodes.push(
+
{createNodes(this.props)}
)
@@ -104,5 +101,4 @@ Bubble.defaultProps = _.omit(bubbleDefaultProps, [
'transitionEasing',
])
-
export default Bubble
diff --git a/src/components/charts/bubble/BubbleD3.js b/src/components/charts/bubble/BubbleD3.js
index 163c32987..d288b3e55 100644
--- a/src/components/charts/bubble/BubbleD3.js
+++ b/src/components/charts/bubble/BubbleD3.js
@@ -6,38 +6,39 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component } from 'react';
-import { findDOMNode } from 'react-dom';
-import _ from 'lodash';
-import { bubblePropTypes, bubbleDefaultProps } from './BubbleProps';
-import Nivo from '../../../Nivo';
-import BubbleD3Svg from '../../../lib/charts/bubble/BubbleD3Svg';
-import decoratorsFromReactChildren from '../../../lib/decoratorsFromReactChildren';
-
+import React, { Component } from 'react'
+import { findDOMNode } from 'react-dom'
+import _ from 'lodash'
+import { bubblePropTypes, bubbleDefaultProps } from './BubbleProps'
+import Nivo from '../../../Nivo'
+import BubbleD3Svg from '../../../lib/charts/bubble/BubbleD3Svg'
+import decoratorsFromReactChildren from '../../../lib/decoratorsFromReactChildren'
class BubbleD3 extends Component {
renderChart(props) {
- this.bubble.decorate(decoratorsFromReactChildren(props.children, 'decorateBubble'));
- this.bubble.draw(_.assign({}, props, {
- margin: _.assign({}, Nivo.defaults.margin, props.margin)
- }));
+ this.bubble.decorate(
+ decoratorsFromReactChildren(props.children, 'decorateBubble')
+ )
+ this.bubble.draw(
+ _.assign({}, props, {
+ margin: _.assign({}, Nivo.defaults.margin, props.margin),
+ })
+ )
}
shouldComponentUpdate(nextProps) {
- this.renderChart(nextProps);
+ this.renderChart(nextProps)
- return false;
+ return false
}
componentDidMount() {
- this.bubble = BubbleD3Svg(findDOMNode(this.refs.svg));
- this.renderChart(this.props);
+ this.bubble = BubbleD3Svg(findDOMNode(this.refs.svg))
+ this.renderChart(this.props)
}
render() {
- return ;
+ return
}
}
@@ -46,13 +47,12 @@ BubbleD3.propTypes = _.omit(bubblePropTypes, [
'namespace',
'motionStiffness',
'motionDamping',
-]);
+])
BubbleD3.defaultProps = _.omit(bubbleDefaultProps, [
'namespace',
'motionStiffness',
'motionDamping',
-]);
-
+])
-export default BubbleD3;
+export default BubbleD3
diff --git a/src/components/charts/bubble/BubblePlaceholders.js b/src/components/charts/bubble/BubblePlaceholders.js
index ef44b8150..e72189744 100644
--- a/src/components/charts/bubble/BubblePlaceholders.js
+++ b/src/components/charts/bubble/BubblePlaceholders.js
@@ -6,19 +6,16 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component } from 'react'
-import { TransitionMotion, spring } from 'react-motion'
-import { rgb } from 'd3'
-import _ from 'lodash'
-import Nivo from '../../../Nivo'
-import { getColorRange, extractRGB } from '../../../ColorUtils'
-import BubbleHelper from '../../../lib/charts/bubble/BubbleHelper'
-import { convertGetter } from '../../../lib/propertiesConverters'
+import React, { Component } from 'react'
+import { TransitionMotion, spring } from 'react-motion'
+import { rgb } from 'd3'
+import _ from 'lodash'
+import Nivo from '../../../Nivo'
+import { getColorRange, extractRGB } from '../../../ColorUtils'
+import BubbleHelper from '../../../lib/charts/bubble/BubbleHelper'
+import { convertGetter } from '../../../lib/propertiesConverters'
import { bubblePropTypes, bubbleDefaultProps } from './BubbleProps'
-
class BubblePlaceholders extends Component {
componentWillMount() {
this.bubble = BubbleHelper()
@@ -53,25 +50,31 @@ class BubblePlaceholders extends Component {
padding,
colors,
animate,
- motionStiffness, motionDamping,
+ motionStiffness,
+ motionDamping,
children,
} = this.props
const identity = convertGetter(_identity)
- const value = convertGetter(_value)
+ const value = convertGetter(_value)
- const color = getColorRange(colors)
+ const color = getColorRange(colors)
- const margin = Object.assign({}, Nivo.defaults.margin, this.props.margin)
- const width = _width - margin.left - margin.right
- const height = _height - margin.top - margin.bottom
+ const margin = Object.assign(
+ {},
+ Nivo.defaults.margin,
+ this.props.margin
+ )
+ const width = _width - margin.left - margin.right
+ const height = _height - margin.top - margin.bottom
const nodes = this.bubble.compute({
width,
height,
root,
leavesOnly,
- identity, value,
+ identity,
+ value,
padding,
color,
})
@@ -79,62 +82,70 @@ class BubblePlaceholders extends Component {
let wrapperTag
let containerTag
- const wrapperProps = {}
+ const wrapperProps = {}
const containerProps = {}
if (namespace === 'svg') {
- wrapperTag = 'svg'
+ wrapperTag = 'svg'
containerTag = 'g'
- wrapperProps.width = _width
- wrapperProps.height = _height
- wrapperProps.xmlns = 'http://www.w3.org/2000/svg'
+ wrapperProps.width = _width
+ wrapperProps.height = _height
+ wrapperProps.xmlns = 'http://www.w3.org/2000/svg'
containerProps.transform = `translate(${margin.left},${margin.top})`
} else {
- wrapperTag = 'div'
+ wrapperTag = 'div'
containerTag = 'div'
wrapperProps.style = {
position: 'relative',
- width: _width,
- height: _height,
+ width: _width,
+ height: _height,
}
- containerProps.style = margin
+ containerProps.style = Object.assign({}, margin, {
+ position: 'absolute',
+ })
}
if (animate === false) {
- return React.createElement(wrapperTag, wrapperProps,
+ return React.createElement(
+ wrapperTag,
+ wrapperProps,
React.createElement(
containerTag,
containerProps,
- children(nodes.map(node => {
- return {
- key: node.data.key,
- data: node,
- style: _.pick(node, ['r', 'x', 'y', 'color']),
- }
- }))
+ children(
+ nodes.map(node => {
+ return {
+ key: node.data.key,
+ data: node,
+ style: _.pick(node, ['r', 'x', 'y', 'color']),
+ }
+ })
+ )
)
)
}
const stiffness = motionStiffness
- const damping = motionDamping
+ const damping = motionDamping
- return React.createElement(wrapperTag, wrapperProps, (
+ return React.createElement(
+ wrapperTag,
+ wrapperProps,
{
return {
- key: b.data.key,
- data: b,
+ key: b.data.key,
+ data: b,
style: {
r: spring(b.r, { stiffness, damping }),
x: spring(b.x, { stiffness, damping }),
y: spring(b.y, { stiffness, damping }),
...extractRGB(b.color, { stiffness, damping }),
- }
+ },
}
})}
>
@@ -142,16 +153,24 @@ class BubblePlaceholders extends Component {
return React.createElement(
containerTag,
containerProps,
- children(interpolatedStyles.map(interpolatedStyle => {
- const { colorR, colorG, colorB } = interpolatedStyle.style
- interpolatedStyle.style.color = `rgb(${Math.round(colorR)},${Math.round(colorG)},${Math.round(colorB)})`
-
- return interpolatedStyle
- }))
- );
+ children(
+ interpolatedStyles.map(interpolatedStyle => {
+ const {
+ colorR,
+ colorG,
+ colorB,
+ } = interpolatedStyle.style
+ interpolatedStyle.style.color = `rgb(${Math.round(
+ colorR
+ )},${Math.round(colorG)},${Math.round(colorB)})`
+
+ return interpolatedStyle
+ })
+ )
+ )
}}
- ))
+ )
}
}
@@ -181,5 +200,4 @@ BubblePlaceholders.defaultProps = _.omit(bubbleDefaultProps, [
'transitionEasing',
])
-
export default BubblePlaceholders
diff --git a/src/components/charts/bubble/BubbleProps.js b/src/components/charts/bubble/BubbleProps.js
index c3ab1326d..34541e662 100644
--- a/src/components/charts/bubble/BubbleProps.js
+++ b/src/components/charts/bubble/BubbleProps.js
@@ -6,82 +6,77 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import { PropTypes } from 'react'
-import Nivo from '../../../Nivo'
-import { margin } from '../../../PropTypes'
-
+import PropTypes from 'prop-types'
+import Nivo from '../../../Nivo'
+import { margin } from '../../../PropTypes'
const { bool, object, number, string, any, func, oneOf } = PropTypes
-
/**
* Bubble components propTypes.
*
* @type {object}
*/
export const bubblePropTypes = {
- width: number.isRequired,
- height: number.isRequired,
+ width: number.isRequired,
+ height: number.isRequired,
margin,
- root: object.isRequired,
- leavesOnly: bool.isRequired,
- onBubbleClick: func.isRequired,
- identity: string.isRequired,
- value: string.isRequired,
- padding: number.isRequired,
- colors: any.isRequired,
+ root: object.isRequired,
+ leavesOnly: bool.isRequired,
+ onBubbleClick: func.isRequired,
+ identity: string.isRequired,
+ value: string.isRequired,
+ padding: number.isRequired,
+ colors: any.isRequired,
// placeholders
- namespace: oneOf(['html', 'svg']),
- children: func.isRequired,
+ namespace: oneOf(['html', 'svg']),
+ children: func.isRequired,
// border
- borderWidth: number.isRequired,
- borderColor: any.isRequired,
+ borderWidth: number.isRequired,
+ borderColor: any.isRequired,
// labels
- enableLabel: bool.isRequired,
- label: string.isRequired,
- labelFormat: string,
- labelTextColor: any.isRequired,
- labelTextDY: number.isRequired,
- labelSkipRadius: number.isRequired,
+ enableLabel: bool.isRequired,
+ label: string.isRequired,
+ labelFormat: string,
+ labelTextColor: any.isRequired,
+ labelTextDY: number.isRequired,
+ labelSkipRadius: number.isRequired,
// transitions
- animate: bool.isRequired,
- motionStiffness: number.isRequired, // react-motion
- motionDamping: number.isRequired, // react-motion
+ animate: bool.isRequired,
+ motionStiffness: number.isRequired, // react-motion
+ motionDamping: number.isRequired, // react-motion
transitionDuration: number.isRequired, // d3 transitions
- transitionEasing: string.isRequired, // d3 transitions
+ transitionEasing: string.isRequired, // d3 transitions
}
-
/**
* Bubble components defaultProps.
*
* @type {object}
*/
export const bubbleDefaultProps = {
- leavesOnly: false,
- margin: Nivo.defaults.margin,
- onBubbleClick: () => {},
- identity: 'id',
- value: 'value',
- padding: 1,
- colors: Nivo.defaults.colorRange,
+ leavesOnly: false,
+ margin: Nivo.defaults.margin,
+ onBubbleClick: () => {},
+ identity: 'id',
+ value: 'value',
+ padding: 1,
+ colors: Nivo.defaults.colorRange,
// placeholders
- namespace: 'html',
+ namespace: 'html',
// border
- borderWidth: 0,
- borderColor: 'inherit',
+ borderWidth: 0,
+ borderColor: 'inherit',
// labels
- enableLabel: true,
- label: 'id',
- labelTextColor: 'inherit:darker(1)',
- labelTextDY: 5,
- labelSkipRadius: 0,
+ enableLabel: true,
+ label: 'id',
+ labelTextColor: 'inherit:darker(1)',
+ labelTextDY: 5,
+ labelSkipRadius: 0,
// transitions
- animate: true,
- motionStiffness: Nivo.defaults.motionStiffness, // react-motion
- motionDamping: Nivo.defaults.motionDamping, // react-motion
+ animate: true,
+ motionStiffness: Nivo.defaults.motionStiffness, // react-motion
+ motionDamping: Nivo.defaults.motionDamping, // react-motion
transitionDuration: Nivo.defaults.transitionDuration, // d3 transitions
- transitionEasing: Nivo.defaults.transitionEasing, // d3 transitions
+ transitionEasing: Nivo.defaults.transitionEasing, // d3 transitions
}
diff --git a/src/components/charts/bubble/ResponsiveBubble.js b/src/components/charts/bubble/ResponsiveBubble.js
index b35296d4b..c5aa64df9 100644
--- a/src/components/charts/bubble/ResponsiveBubble.js
+++ b/src/components/charts/bubble/ResponsiveBubble.js
@@ -6,29 +6,43 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
-import Dimensions from 'react-dimensions'
-import Bubble from './Bubble'
+import React, { Component } from 'react'
+import Measure from 'react-measure'
+import Bubble from './Bubble'
+export default class ResponsiveBubble extends Component {
+ state = {
+ dimensions: {
+ width: -1,
+ height: -1,
+ },
+ }
-class ResponsiveBubble extends Component {
render() {
- const {
- containerWidth,
- containerHeight,
- } = this.props
+ const { width, height } = this.state.dimensions
+
+ const shouldRender = width > 0 && height > 0
return (
-
+ {
+ this.setState({ dimensions: contentRect.bounds })
+ }}
+ >
+ {({ measureRef }) =>
+
+ {shouldRender &&
+ }
+
}
+
)
}
}
-
-
-export default Dimensions()(ResponsiveBubble)
diff --git a/src/components/charts/bubble/ResponsiveBubbleD3.js b/src/components/charts/bubble/ResponsiveBubbleD3.js
index 25f75cf09..1b3b6ac3c 100644
--- a/src/components/charts/bubble/ResponsiveBubbleD3.js
+++ b/src/components/charts/bubble/ResponsiveBubbleD3.js
@@ -6,16 +6,14 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import Dimensions from 'react-dimensions';
-import BubbleD3 from './BubbleD3';
-
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Dimensions from 'react-dimensions'
+import BubbleD3 from './BubbleD3'
class ResponsiveBubbleD3 extends Component {
render() {
- const { containerWidth, containerHeight } = this.props;
+ const { containerWidth, containerHeight } = this.props
return (
- );
+ )
}
}
-
-export default Dimensions()(ResponsiveBubbleD3);
+export default Dimensions()(ResponsiveBubbleD3)
diff --git a/src/components/charts/bubble/ResponsiveBubblePlaceholders.js b/src/components/charts/bubble/ResponsiveBubblePlaceholders.js
index de4ca8b16..08be5389f 100644
--- a/src/components/charts/bubble/ResponsiveBubblePlaceholders.js
+++ b/src/components/charts/bubble/ResponsiveBubblePlaceholders.js
@@ -6,26 +6,43 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
-import Dimensions from 'react-dimensions'
-import BubblePlaceholders from './BubblePlaceholders'
+import React, { Component } from 'react'
+import Measure from 'react-measure'
+import BubblePlaceholders from './BubblePlaceholders'
+export default class ResponsiveBubblePlaceholders extends Component {
+ state = {
+ dimensions: {
+ width: -1,
+ height: -1,
+ },
+ }
-class ResponsiveBubblePlaceholders extends Component {
render() {
- const { containerWidth, containerHeight } = this.props
+ const { width, height } = this.state.dimensions
+
+ const shouldRender = width > 0 && height > 0
return (
-
+ {
+ this.setState({ dimensions: contentRect.bounds })
+ }}
+ >
+ {({ measureRef }) =>
+
+ {shouldRender &&
+ }
+
}
+
)
}
}
-
-
-export default Dimensions()(ResponsiveBubblePlaceholders)
diff --git a/src/components/charts/bubble/index.js b/src/components/charts/bubble/index.js
index b59c7f11f..317e02d9e 100644
--- a/src/components/charts/bubble/index.js
+++ b/src/components/charts/bubble/index.js
@@ -6,10 +6,7 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-
-export Bubble from './Bubble'
-export ResponsiveBubble from './ResponsiveBubble'
-export BubblePlaceholders from './BubblePlaceholders'
+export Bubble from './Bubble'
+export ResponsiveBubble from './ResponsiveBubble'
+export BubblePlaceholders from './BubblePlaceholders'
export ResponsiveBubblePlaceholders from './ResponsiveBubblePlaceholders'
diff --git a/src/components/charts/calendar/Calendar.js b/src/components/charts/calendar/Calendar.js
index c60b4f0cc..ff87f4a8d 100644
--- a/src/components/charts/calendar/Calendar.js
+++ b/src/components/charts/calendar/Calendar.js
@@ -6,84 +6,109 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import _ from 'lodash'
-import React, { Component } from 'react'
-import Nivo from '../../../Nivo'
-import CalendarLayout from '../../../lib/charts/calendar/CalendarLayout'
+import _ from 'lodash'
+import React, { Component } from 'react'
+import Nivo from '../../../Nivo'
+import CalendarLayout from '../../../lib/charts/calendar/CalendarLayout'
import { calendarPropTypes, calendarDefaultProps } from './CalendarProps'
-import StaticCalendar from './StaticCalendar'
-import MotionCalendar from './MotionCalendar'
-
+import StaticCalendar from './StaticCalendar'
+import MotionCalendar from './MotionCalendar'
class Calendar extends Component {
componentWillMount() {
- this.calendarLayout = CalendarLayout();
+ this.calendarLayout = CalendarLayout()
}
render() {
const {
- from, to,
+ from,
+ to,
data,
onDayClick,
direction,
colorScale,
emptyColor,
- yearSpacing, yearLegendOffset,
- daySpacing, dayBorderWidth, dayBorderColor,
- monthBorderWidth, monthBorderColor, monthLegendOffset,
- motion, motionStiffness, motionDamping
- } = this.props;
+ yearSpacing,
+ yearLegendOffset,
+ daySpacing,
+ dayBorderWidth,
+ dayBorderColor,
+ monthBorderWidth,
+ monthBorderColor,
+ monthLegendOffset,
+ animate,
+ motionStiffness,
+ motionDamping,
+ } = this.props
- const margin = _.assign({}, Nivo.defaults.margin, this.props.margin);
- const width = this.props.width - margin.left - margin.right;
- const height = this.props.height - margin.top - margin.bottom;
+ const margin = _.assign({}, Nivo.defaults.margin, this.props.margin)
+ const width = this.props.width - margin.left - margin.right
+ const height = this.props.height - margin.top - margin.bottom
const { years, months, days } = this.calendarLayout.compute({
- width, height,
- from, to,
+ width,
+ height,
+ from,
+ to,
data,
direction,
colorScale,
emptyColor,
yearSpacing,
- daySpacing
- });
+ daySpacing,
+ })
- let calendar;
- if (motion === true) {
+ let calendar
+ if (animate === true) {
calendar = (
- );
+ )
} else {
calendar = (
- );
+ )
}
return (
- }
- );
+ )
}
}
-MotionCalendar.propTypes = {};
-
+MotionCalendar.propTypes = {}
-export default MotionCalendar;
+export default MotionCalendar
diff --git a/src/components/charts/calendar/ResponsiveCalendar.js b/src/components/charts/calendar/ResponsiveCalendar.js
index 8b515a1cd..a9a51aa28 100644
--- a/src/components/charts/calendar/ResponsiveCalendar.js
+++ b/src/components/charts/calendar/ResponsiveCalendar.js
@@ -6,26 +6,43 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import Calendar from './Calendar';
-import Dimensions from 'react-dimensions';
+import React, { Component } from 'react'
+import Calendar from './Calendar'
+import Measure from 'react-measure'
+export default class ResponsiveCalendar extends Component {
+ state = {
+ dimensions: {
+ width: -1,
+ height: -1,
+ },
+ }
-class ResponsiveCalendar extends Component {
render() {
- const { containerWidth, containerHeight } = this.props;
+ const { width, height } = this.state.dimensions
+
+ const shouldRender = width > 0 && height > 0
return (
-
- );
+ {
+ this.setState({ dimensions: contentRect.bounds })
+ }}
+ >
+ {({ measureRef }) =>
+
+ {shouldRender &&
+ }
+
}
+
+ )
}
}
-
-
-export default Dimensions()(ResponsiveCalendar);
diff --git a/src/components/charts/calendar/ResponsiveCalendarCanvas.js b/src/components/charts/calendar/ResponsiveCalendarCanvas.js
index a0269e8bc..dddbeb113 100644
--- a/src/components/charts/calendar/ResponsiveCalendarCanvas.js
+++ b/src/components/charts/calendar/ResponsiveCalendarCanvas.js
@@ -6,16 +6,14 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import CalendarCanvas from './CalendarCanvas';
-import Dimensions from 'react-dimensions';
-
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import CalendarCanvas from './CalendarCanvas'
+import Dimensions from 'react-dimensions'
class ResponsiveCalendarCanvas extends Component {
render() {
- const { containerWidth, containerHeight } = this.props;
+ const { containerWidth, containerHeight } = this.props
return (
- );
+ )
}
}
-
-export default Dimensions()(ResponsiveCalendarCanvas);
+export default Dimensions()(ResponsiveCalendarCanvas)
diff --git a/src/components/charts/calendar/ResponsiveCalendarD3.js b/src/components/charts/calendar/ResponsiveCalendarD3.js
index 6b086386f..d3d81fe0e 100644
--- a/src/components/charts/calendar/ResponsiveCalendarD3.js
+++ b/src/components/charts/calendar/ResponsiveCalendarD3.js
@@ -6,16 +6,14 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component, PropTypes } from 'react';
-import CalendarD3 from './CalendarD3';
-import Dimensions from 'react-dimensions';
-
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import CalendarD3 from './CalendarD3'
+import Dimensions from 'react-dimensions'
class ResponsiveCalendarD3 extends Component {
render() {
- const { containerWidth, containerHeight } = this.props;
+ const { containerWidth, containerHeight } = this.props
return (
- );
+ )
}
}
-
-export default Dimensions()(ResponsiveCalendarD3);
+export default Dimensions()(ResponsiveCalendarD3)
diff --git a/src/components/charts/calendar/StaticCalendar.js b/src/components/charts/calendar/StaticCalendar.js
index ffb1afc05..12abbca3c 100644
--- a/src/components/charts/calendar/StaticCalendar.js
+++ b/src/components/charts/calendar/StaticCalendar.js
@@ -6,54 +6,63 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-import React, { Component } from 'react';
-import d3 from 'd3';
-import { DIRECTION_HORIZONTAL } from '../../../constants/directions';
-import CalendarDay from './CalendarDay';
-import CalendarMonthPath from './CalendarMonthPath';
-
+import React, { Component } from 'react'
+import { timeFormat } from 'd3'
+import { DIRECTION_HORIZONTAL } from '../../../constants/directions'
+import CalendarDay from './CalendarDay'
+import CalendarMonthPath from './CalendarMonthPath'
class StaticCalendar extends Component {
render() {
const {
onDayClick,
- years, months, days,
+ years,
+ months,
+ days,
direction,
yearLegendOffset,
- dayBorderWidth, dayBorderColor,
- monthBorderWidth, monthBorderColor, monthLegendOffset
- } = this.props;
+ dayBorderWidth,
+ dayBorderColor,
+ monthBorderWidth,
+ monthBorderColor,
+ monthLegendOffset,
+ } = this.props
- const monthLegendFormat = d3.time.format('%b');
+ const monthLegendFormat = timeFormat('%b')
return (
- {days.map(d => (
+ {days.map(d =>
- ))}
- {months.map(m => (
+ )}
+ {months.map(m =>
- ))}
+ )}
{months.map(month => {
- let transform;
+ let transform
if (direction === DIRECTION_HORIZONTAL) {
- transform = `translate(${month.bbox.x + month.bbox.width / 2},${month.bbox.y - monthLegendOffset})`;
+ transform = `translate(${month.bbox.x +
+ month.bbox.width / 2},${month.bbox.y -
+ monthLegendOffset})`
} else {
- transform =`translate(${month.bbox.x - monthLegendOffset},${month.bbox.y + month.bbox.height / 2}) rotate(-90)`;
+ transform = `translate(${month.bbox.x -
+ monthLegendOffset},${month.bbox.y +
+ month.bbox.height / 2}) rotate(-90)`
}
return (
@@ -65,14 +74,18 @@ class StaticCalendar extends Component {
>
{monthLegendFormat(month.date)}
- );
+ )
})}
{years.map(year => {
- let transform;
+ let transform
if (direction === DIRECTION_HORIZONTAL) {
- transform = `translate(${year.bbox.x - yearLegendOffset},${year.bbox.y + year.bbox.height / 2}) rotate(-90)`;
+ transform = `translate(${year.bbox.x -
+ yearLegendOffset},${year.bbox.y +
+ year.bbox.height / 2}) rotate(-90)`
} else {
- transform = `translate(${year.bbox.x + year.bbox.width / 2},${year.bbox.y - yearLegendOffset})`;
+ transform = `translate(${year.bbox.x +
+ year.bbox.width / 2},${year.bbox.y -
+ yearLegendOffset})`
}
return (
@@ -84,14 +97,13 @@ class StaticCalendar extends Component {
>
{year.year}
- );
+ )
})}
- );
+ )
}
}
-StaticCalendar.propTypes = {};
-
+StaticCalendar.propTypes = {}
-export default StaticCalendar;
+export default StaticCalendar
diff --git a/src/components/charts/calendar/index.js b/src/components/charts/calendar/index.js
index edd656e35..7cf3bb2e3 100644
--- a/src/components/charts/calendar/index.js
+++ b/src/components/charts/calendar/index.js
@@ -6,11 +6,9 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict';
-
-export Calendar from './Calendar';
-export ResponsiveCalendar from './ResponsiveCalendar';
-export CalendarD3 from './CalendarD3';
-export ResponsiveCalendarD3 from './ResponsiveCalendarD3';
-export CalendarCanvas from './CalendarCanvas';
-export ResponsiveCalendarCanvas from './ResponsiveCalendarCanvas';
+export Calendar from './Calendar'
+export ResponsiveCalendar from './ResponsiveCalendar'
+//export CalendarD3 from './CalendarD3'
+//export ResponsiveCalendarD3 from './ResponsiveCalendarD3'
+//export CalendarCanvas from './CalendarCanvas'
+//export ResponsiveCalendarCanvas from './ResponsiveCalendarCanvas'
diff --git a/src/components/charts/chord/Chord.js b/src/components/charts/chord/Chord.js
index de7333d26..8c39f18ee 100644
--- a/src/components/charts/chord/Chord.js
+++ b/src/components/charts/chord/Chord.js
@@ -6,59 +6,56 @@
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
-'use strict'
-
-import React, { Component, PropTypes } from 'react'
-import Nivo from '../../../Nivo'
-import { margin as marginPropType } from '../../../PropTypes'
-import { getColorRange } from '../../../ColorUtils'
-
-import {
- chord as d3Chord,
- arc as Arc,
- ribbon as Ribbon,
- rgb,
-} from 'd3'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Nivo from '../../../Nivo'
+import { margin as marginPropType } from '../../../PropTypes'
+import { getColorRange } from '../../../ColorUtils'
+import { chord as d3Chord, arc as Arc, ribbon as Ribbon, rgb } from 'd3'
class Chord extends Component {
render() {
const {
data,
margin: _margin,
- width: _width, height: _height,
+ width: _width,
+ height: _height,
padAngle,
- innerRadiusRatio, innerRadiusOffset,
- ribbonOpacity, ribbonBorderWidth,
- arcOpacity, arcBorderWidth,
+ innerRadiusRatio,
+ innerRadiusOffset,
+ ribbonOpacity,
+ ribbonBorderWidth,
+ arcOpacity,
+ arcBorderWidth,
colors,
} = this.props
- const color = getColorRange(colors)
+ const color = getColorRange(colors)
- const margin = Object.assign({}, Nivo.defaults.margin, _margin)
- const width = _width - margin.left - margin.right
- const height = _height - margin.top - margin.bottom
- const radius = Math.min(width, height) / 2
+ const margin = Object.assign({}, Nivo.defaults.margin, _margin)
+ const width = _width - margin.left - margin.right
+ const height = _height - margin.top - margin.bottom
+ const radius = Math.min(width, height) / 2
const arcInnerRadius = radius * innerRadiusRatio
- const ribbonRadius = radius * (innerRadiusRatio - innerRadiusOffset)
+ const ribbonRadius = radius * (innerRadiusRatio - innerRadiusOffset)
+ const chord = d3Chord().padAngle(padAngle)
- const chord = d3Chord()
- .padAngle(padAngle)
+ const arc = Arc().innerRadius(arcInnerRadius).outerRadius(radius)
- const arc = Arc()
- .innerRadius(arcInnerRadius)
- .outerRadius(radius)
-
- const ribbon = Ribbon()
- .radius(ribbonRadius)
+ const ribbon = Ribbon().radius(ribbonRadius)
const ribbons = chord(data)
- const arcs = ribbons.groups
+ const arcs = ribbons.groups
return (
-