{
189 | return values(stack).map((e, index) => {
190 | return (
191 | );
202 | });
203 | });
204 | } else {
205 | bars = data.map(stack => {
206 | return values(stack).map((e, index) => {
207 | return (
208 | );
219 | });
220 | });
221 | }
222 |
223 | return (
224 |
225 |
226 |
227 |
228 | {bars}
229 | { this.props.children }
230 |
231 |
232 |
110 |
117 |
118 | );
119 | }
120 |
121 | }
122 |
123 | export default Chart;
124 |
--------------------------------------------------------------------------------
/src/DonutChart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react';
2 | import ReactDOM from 'react-dom';
3 | import d3 from 'd3/d3.min.js';
4 | import Chart from './Chart';
5 | import Path from './Path';
6 | import Tooltip from './Tooltip';
7 | import * as helpers from './helpers.js';
8 | import _ from 'lodash';
9 |
10 | class DonutChart extends Component {
11 |
12 | static propTypes = {
13 | children: PropTypes.oneOfType([ PropTypes.object, PropTypes.array ]),
14 | className: PropTypes.string,
15 | colorScale: PropTypes.func,
16 | cornerRadius: PropTypes.number,
17 | data: PropTypes.oneOfType([ PropTypes.object, PropTypes.array ]).isRequired,
18 | height: PropTypes.number.isRequired,
19 | innerRadius: PropTypes.number,
20 | legend: PropTypes.object,
21 | outerRadius: PropTypes.number,
22 | margin: PropTypes.shape({
23 | top: PropTypes.number,
24 | bottom: PropTypes.number,
25 | left: PropTypes.number,
26 | right: PropTypes.number
27 | }),
28 | padRadius: PropTypes.string,
29 | sort: PropTypes.any,
30 | tooltipHtml: PropTypes.func,
31 | tooltipMode: PropTypes.oneOf(['mouse', 'element', 'fixed']),
32 | tooltipClassName: PropTypes.string,
33 | tooltipContained: PropTypes.bool,
34 | tooltipOffset: PropTypes.objectOf(PropTypes.number),
35 | values: PropTypes.func,
36 | width: PropTypes.number.isRequired,
37 | x: PropTypes.func,
38 | xScale: PropTypes.func,
39 | y: PropTypes.func,
40 | yScale: PropTypes.func
41 | };
42 |
43 | static defaultProps = {
44 | className: 'chart',
45 | colorScale: d3.scale.category20(),
46 | data: [],
47 | innerRadius: null,
48 | margin: {top: 0, bottom: 0, left: 0, right: 0},
49 | outerRadius: null,
50 | padRadius: 'auto',
51 | cornerRadius: 0,
52 | sort: undefined,
53 | tooltipMode: 'mouse',
54 | tooltipOffset: {top: -35, left: 0},
55 | tooltipClassName: null,
56 | tooltipHtml: null,
57 | tooltipContained: false,
58 | values: stack => {
59 | return stack.values;
60 | },
61 | x: e => { return e.x; },
62 | y: e => { return e.y; },
63 | y0: () => { return 0; }
64 | };
65 |
66 | constructor(props) {
67 | super(props);
68 | this.state = {
69 | tooltip: {
70 | hidden: true
71 | }
72 | };
73 | }
74 |
75 | componentDidMount() {
76 | this._svg_node = ReactDOM.findDOMNode(this).getElementsByTagName('svg')[0];
77 | }
78 |
79 | componentWillMount() {
80 | helpers.calculateInner(this, this.props);
81 | //helpers.arrayify(this, this.props);
82 | helpers.makeScales(this, this.props);
83 | helpers.addTooltipMouseHandlers(this);
84 | }
85 |
86 | componentWillReceiveProps(nextProps) {
87 | helpers.calculateInner(this, nextProps);
88 | //helpers.arrayify(this, nextProps);
89 | helpers.makeScales(this, nextProps);
90 | }
91 |
92 | _tooltipHtml(d) {
93 | const html = this.props.tooltipHtml(d.x, d.y);
94 | return [html, 0, 0];
95 | }
96 |
97 | _midAngle(d){
98 | return d.startAngle + (d.endAngle - d.startAngle)/2;
99 | }
100 |
101 | render() {
102 | const {
103 | data,
104 | width,
105 | height,
106 | legend,
107 | margin,
108 | colorScale,
109 | padRadius,
110 | cornerRadius,
111 | sort,
112 | x,
113 | y,
114 | values
115 | } = this.props;
116 |
117 | const [
118 | innerWidth,
119 | innerHeight,
120 | ] = [
121 | this._innerWidth,
122 | this._innerHeight
123 | ];
124 |
125 | let innerRadius = this.props.innerRadius;
126 | let outerRadius = this.props.outerRadius;
127 |
128 | let pie = d3.layout.pie().value(e => {
129 | return y(e);
130 | });
131 |
132 | if (typeof sort !== 'undefined') {
133 | pie = pie.sort(sort);
134 | }
135 |
136 | const radius = Math.min(innerWidth, innerHeight) / 2;
137 | if (!innerRadius) {
138 | innerRadius = radius * 0.8;
139 | }
140 |
141 | if (!outerRadius) {
142 | outerRadius = radius * 0.4;
143 | }
144 |
145 | const translation = `translate(${innerWidth/2}, ${innerHeight/2})`;
146 | let wedges;
147 |
148 | if (_.isPlainObject(data) && _.isArray(data.values) && data.values.length > 0){
149 | const arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius).padRadius(padRadius).cornerRadius(cornerRadius);
150 | const vals = values(data);
151 |
152 | const pieData = pie(vals);
153 |
154 | wedges = pieData.map((e, index) => {
155 | const d = arc(e);
156 | return (
157 | {
164 | this.handleMouseMove(evt, e.data);
165 | }}
166 | onMouseLeave={this.handleMouseLeave.bind(this)}
167 | data={data}
168 | />
169 | );
170 | });
171 | }
172 |
173 | return (
174 |
175 |
176 |
177 | {wedges}
178 |
179 | { this.props.children }
180 |
181 |
182 |
183 | );
184 | }
185 | }
186 |
187 | export default DonutChart;
188 |
--------------------------------------------------------------------------------
/src/Legend.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react';
2 | import d3 from 'd3/d3.min.js';
3 | import color from 'sc-color';
4 | import _ from 'lodash';
5 |
6 | class Legend extends Component {
7 |
8 | static propTypes = {
9 | className: PropTypes.string,
10 | cellsClassName: PropTypes.string,
11 | cellClassName: PropTypes.string,
12 | cellTextClassName: PropTypes.string,
13 | symbolType: PropTypes.oneOf(['circle', 'cross', 'diamond', 'square', 'triangle-down', 'triangle-up']),
14 | symbolSize: PropTypes.number,
15 | symbolOffset: PropTypes.number,
16 | symbolPosition: PropTypes.string,
17 | wrapText: PropTypes.bool,
18 | x: PropTypes.number,
19 | y: PropTypes.number,
20 | defaultSymbolColor: PropTypes.string,
21 | data: PropTypes.arrayOf(PropTypes.object).isRequired
22 | };
23 |
24 | static defaultProps = {
25 | className: 'legend',
26 | cellsClassName: 'cells',
27 | cellClassName: 'cell',
28 | cellTextClassName: 'label',
29 | symbolType: 'circle',
30 | symbolPosition: 'left',
31 | symbolSize: 80,
32 | symbolOffset: 20,
33 | wrapText: false,
34 | x: 0,
35 | y: 0,
36 | defaultSymbolColor: '#000000'
37 | };
38 |
39 | componentDidMount() {
40 | this.updateLegendText();
41 | }
42 |
43 | componentDidUpdate(prevProps) {
44 | if (!_.isEqual(this.props, prevProps)){
45 | this.updateLegendText();
46 | }
47 | }
48 |
49 | updateLegendText() {
50 | const cellClassName = this.props.cellClassName;
51 | const symbolOffset = this.props.symbolOffset;
52 | const symbolPosition = this.props.symbolPosition.toLowerCase();
53 |
54 | const wrapper = function(text, width){
55 | text.each(function(){
56 | const t = d3.select(this);
57 | if (!t.attr('data-wrapped')){
58 | //split words on space, slashes, underscores, or dashes
59 | const words = t.text().split(/[\s\/_-]+/).reverse();
60 | if (words.length > 0){
61 | let line = [];
62 | let word;
63 | let lineNumber = 0;
64 | const lineHeight = 1.1; // ems
65 | const x = (symbolPosition === 'top') ? '0' : '0.5em';
66 | const y = (symbolPosition === 'top') ? '0' : '0.4em';
67 | const dy = 0;
68 | let textLen = 0;
69 | let tspan = t.text(null).append('tspan').attr('x', x).attr('y', y).attr('dy', dy + 'em');
70 | while (word = words.pop()) {
71 | line.push(word);
72 | tspan.text(line.join(' '));
73 | textLen = tspan.node().getComputedTextLength();
74 | if (textLen > width) {
75 | if (line.length > 1){
76 | line.pop();
77 | }
78 | tspan.text(line.join(' '));
79 | line = [word];
80 | t.attr('data-wrapped', 'true');
81 | tspan = t.append('tspan').attr('x', x).attr('y', y).attr('dy', (lineNumber * lineHeight) + dy + 'em').text(word);
82 | lineNumber += 1;
83 | }
84 | }
85 | }
86 | }
87 | });
88 | };
89 |
90 | const leg = d3.select(this.refs.legend);
91 | if (this.props.wrapText){
92 | leg.selectAll('.cell text').call(wrapper, d3.scale.ordinal().domain([]).range([]).rangeBand());
93 | }
94 |
95 | let textWidthOffset = 0;
96 | const cells = leg.selectAll('g.' + cellClassName);
97 | cells.attr('transform', function (d, index) {
98 | const cell = d3.select(this);
99 | const symbol = cell.select('path');
100 | const text = cell.select('text');
101 | const symbolBox = symbol.node().getBBox();
102 | const textWidth = text.node().getBBox().width;
103 | if (symbolPosition === 'top'){
104 | symbol.attr('transform', `translate(${ textWidth / 2 }, 0)`);
105 | text.attr('transform', `translate(0, ${ symbolBox.height + symbolOffset })`);
106 | }
107 | const translate = `translate(${ (symbolBox.width + symbolOffset * index) + textWidthOffset }, 0)`;
108 | textWidthOffset += textWidth;
109 | return translate;
110 | });
111 | }
112 |
113 | render() {
114 | const cells = this.props.data.map((obj, index) =>{
115 | const symbolPathData = d3.svg.symbol().type(this.props.symbolType).size(this.props.symbolSize)();
116 | const keys = Object.keys(obj);
117 | const symbolColor = keys.length ? color(obj[keys[0]]).html() : color(this.props.defaultSymbolColor).html();
118 | return (
119 |
120 |
121 |
122 | { keys[0] }
123 |
124 |
125 | );
126 | });
127 |
128 | const legendTransform=`translate(${this.props.x}, ${this.props.y})`;
129 | return (
130 |
131 |
132 | { cells }
133 |
134 |
135 | );
136 | }
137 | }
138 |
139 | export default Legend;
140 |
--------------------------------------------------------------------------------
/src/LineChart.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react';
2 | import d3 from 'd3/d3.min.js';
3 | import Chart from './Chart';
4 | import Axis from './Axis';
5 | import Path from './Path';
6 | import Tooltip from './Tooltip';
7 | import * as helpers from './helpers.js';
8 | import ReactDOM from 'react-dom';
9 |
10 | class LineChart extends Component {
11 |
12 | static propTypes = {
13 | children: PropTypes.oneOfType([ PropTypes.object, PropTypes.array ]),
14 | className: PropTypes.string,
15 | colorScale: PropTypes.func,
16 | data: PropTypes.oneOfType([
17 | PropTypes.object,
18 | PropTypes.array
19 | ]).isRequired,
20 | defined: PropTypes.func,
21 | height: PropTypes.number.isRequired,
22 | interpolate: PropTypes.string,
23 | label: PropTypes.func,
24 | legend: PropTypes.object,
25 | xAxis: PropTypes.object,
26 | yAxis: PropTypes.object,
27 | margin: PropTypes.shape({
28 | top: PropTypes.number,
29 | bottom: PropTypes.number,
30 | left: PropTypes.number,
31 | right: PropTypes.number
32 | }),
33 | shape: PropTypes.string,
34 | shapeColor: PropTypes.string,
35 | stroke: PropTypes.object,
36 | tooltipHtml: PropTypes.func,
37 | tooltipMode: PropTypes.oneOf(['mouse', 'element', 'fixed']),
38 | tooltipClassName: PropTypes.string,
39 | tooltipContained: PropTypes.bool,
40 | tooltipOffset: PropTypes.objectOf(PropTypes.number),
41 | values: PropTypes.func,
42 | width: PropTypes.number.isRequired,
43 | x: PropTypes.func,
44 | xScale: PropTypes.func,
45 | y: PropTypes.func,
46 | y0: PropTypes.func,
47 | yScale: PropTypes.func
48 | };
49 |
50 | static defaultProps = {
51 | className: 'chart',
52 | colorScale: d3.scale.category20(),
53 | data: {label: 'No data available', values: [{x: 'No data available', y: 1}]},
54 | interpolate: 'linear',
55 | label: stack => { return stack.label; },
56 | defined: () => true,
57 | margin: {top: 0, bottom: 0, left: 0, right: 0},
58 | shape: 'circle',
59 | stroke: {},
60 | tooltipMode: 'mouse',
61 | tooltipOffset: {top: -35, left: 0},
62 | tooltipClassName: null,
63 | tooltipHtml: null,
64 | tooltipContained: false,
65 | values: stack => { return stack.values; },
66 | x: e => { return e.x; },
67 | xScale: null,
68 | y: e => { return e.y; },
69 | y0: () => { return 0; },
70 | yScale: null
71 | };
72 |
73 | constructor(props) {
74 | super(props);
75 | this.state = {
76 | tooltip: {
77 | hidden: true
78 | }
79 | };
80 | }
81 |
82 | componentDidMount() {
83 | this._svg_node = ReactDOM.findDOMNode(this).getElementsByTagName('svg')[0];
84 | }
85 |
86 | componentWillMount() {
87 | helpers.calculateInner(this, this.props);
88 | helpers.arrayify(this, this.props);
89 | helpers.makeScales(this, this.props);
90 | helpers.addTooltipMouseHandlers(this);
91 | }
92 |
93 | componentWillReceiveProps(nextProps) {
94 | helpers.calculateInner(this, nextProps);
95 | helpers.arrayify(this, nextProps);
96 | helpers.makeScales(this, nextProps);
97 | }
98 |
99 | /*
100 | The code below supports finding the data values for the line closest to the mouse cursor.
101 | Since it gets all events from the Rect overlaying the Chart the tooltip gets shown everywhere.
102 | For now I don't want to use this method.
103 | */
104 | _tooltipHtml(data, position) {
105 |
106 | const { x, y, values, label } = this.props;
107 | const [xScale, yScale] = [this._xScale, this._yScale];
108 |
109 | const xValueCursor = xScale.invert(position[0]);
110 | const yValueCursor = yScale.invert(position[1]);
111 |
112 | const xBisector = d3.bisector(e => { return x(e); }).left;
113 |
114 | const valuesAtX = data.map(function(stack) {
115 | const idx = xBisector(values(stack), xValueCursor);
116 |
117 | const indexRight = idx === values(stack).length ? idx - 1 : idx;
118 | const valueRight = x(values(stack)[indexRight]);
119 |
120 | const indexLeft = idx === 0 ? idx : idx - 1;
121 | const valueLeft = x(values(stack)[indexLeft]);
122 |
123 | let index;
124 | if (Math.abs(xValueCursor - valueRight) < Math.abs(xValueCursor - valueLeft)) {
125 | index = indexRight;
126 | } else {
127 | index = indexLeft;
128 | }
129 |
130 | return { label: label(stack), value: values(stack)[index] };
131 | });
132 |
133 | valuesAtX.sort((a, b) => { return y(a.value) - y(b.value); });
134 |
135 | const yBisector = d3.bisector(e => { return y(e.value); }).left;
136 | const yIndex = yBisector(valuesAtX, yValueCursor);
137 |
138 | const yIndexRight = yIndex === valuesAtX.length ? yIndex - 1 : yIndex;
139 | const yIndexLeft = yIndex === 0 ? yIndex : yIndex - 1;
140 |
141 | const yValueRight = y(valuesAtX[yIndexRight].value);
142 | const yValueLeft = y(valuesAtX[yIndexLeft].value);
143 |
144 | let index;
145 | if (Math.abs(yValueCursor - yValueRight) < Math.abs(yValueCursor - yValueLeft)) {
146 | index = yIndexRight;
147 | } else {
148 | index = yIndexLeft;
149 | }
150 |
151 | this._tooltipData = valuesAtX[index];
152 |
153 | const html = this.props.tooltipHtml(valuesAtX[index].label, valuesAtX[index].value);
154 |
155 | const xPos = xScale(valuesAtX[index].value.x);
156 | const yPos = yScale(valuesAtX[index].value.y);
157 | return [html, xPos, yPos];
158 | }
159 |
160 | render() {
161 | const {
162 | height,
163 | width,
164 | margin,
165 | colorScale,
166 | interpolate,
167 | defined,
168 | stroke,
169 | values,
170 | label,
171 | x,
172 | y,
173 | xAxis,
174 | yAxis,
175 | shape,
176 | shapeColor,
177 | legend
178 | } = this.props;
179 |
180 | const [
181 | data,
182 | innerWidth,
183 | innerHeight,
184 | xScale,
185 | yScale,
186 | xIntercept,
187 | yIntercept
188 | ] = [
189 | this._data,
190 | this._innerWidth,
191 | this._innerHeight,
192 | this._xScale,
193 | this._yScale,
194 | this._xIntercept,
195 | this._yIntercept
196 | ];
197 |
198 | const handleMouseMove = this.handleMouseMove.bind(this);
199 | const handleMouseLeave = this.handleMouseLeave.bind(this);
200 |
201 | const line = d3.svg.line()
202 | .x(function(e) { return xScale(x(e)); })
203 | .y(function(e) { return yScale(y(e)); })
204 | .interpolate(interpolate)
205 | .defined(defined);
206 |
207 | let tooltipSymbol;
208 | if (!this.state.tooltip.hidden) {
209 | const symbol = d3.svg.symbol().type(shape);
210 | const symbolColor = shapeColor ? shapeColor : colorScale(this._tooltipData.label);
211 | const translate = this._tooltipData ? `translate(${xScale(x(this._tooltipData.value))}, ${yScale(y(this._tooltipData.value))})` : '';
212 | tooltipSymbol = this.state.tooltip.hidden ? null : ;
213 | }
214 |
215 | const sizeId = innerWidth + 'x' + innerHeight;
216 |
217 | const lines = data.map(function(stack, index){
218 | return (
219 |
232 | );
233 | });
234 |
235 | return (
236 |
237 |
238 |
239 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 | {lines}
249 |
250 |
251 | { this.props.children }
252 | {tooltipSymbol}
253 |
254 |
255 |
388 |
389 | {links}
390 | {nodes}
391 | {labels}
392 | { this.props.children }
393 |
394 |
395 |
396 | );
397 | }
398 | }
399 |
400 | export default NodeChart;
401 |
402 |
--------------------------------------------------------------------------------
/src/Path.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react';
2 |
3 | class Path extends Component {
4 |
5 | static propTypes = {
6 | className: PropTypes.string,
7 | stroke: PropTypes.string.isRequired,
8 | strokeLinecap: PropTypes.string,
9 | strokeWidth: PropTypes.string,
10 | strokeDasharray: PropTypes.string,
11 | fill: PropTypes.string,
12 | d: PropTypes.string.isRequired,
13 | data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
14 | onMouseMove: PropTypes.func,
15 | onMouseLeave: PropTypes.func,
16 | style: PropTypes.object
17 | };
18 |
19 | static defaultProps = {
20 | className: 'path',
21 | fill: 'none',
22 | strokeWidth: '2',
23 | strokeLinecap: 'butt',
24 | strokeDasharray: 'none'
25 | };
26 |
27 | render() {
28 | const {
29 | className,
30 | stroke,
31 | strokeWidth,
32 | strokeLinecap,
33 | strokeDasharray,
34 | fill,
35 | d,
36 | style,
37 | data,
38 | onMouseMove,
39 | onMouseLeave
40 | } = this.props;
41 |
42 | return (
43 | { onMouseMove(evt, data); } }
51 | onMouseLeave={ evt => { onMouseLeave(evt); } }
52 | style={style}
53 | />
54 | );
55 | }
56 | }
57 |
58 | export default Path;
59 |
--------------------------------------------------------------------------------
/src/PieChart.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import DonutChart from './DonutChart';
3 | import _ from 'lodash';
4 |
5 | /* Pie charts are just donut charts without a hole */
6 | class PieChart extends Component {
7 |
8 | render() {
9 | const props = _.omit(this.props, ['outerRadius']);
10 | props.outerRadius = 0.1;
11 | return (
12 |
13 | );
14 | }
15 |
16 | }
17 |
18 | export default PieChart;
19 |
20 |
--------------------------------------------------------------------------------
/src/SparklineChart.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import LineChart from './LineChart';
3 | import _ from 'lodash';
4 |
5 | class SparklineChart extends Component {
6 |
7 | render() {
8 | const props = _.omit(this.props, ['xAxis', 'yAxis']);
9 | props.xAxis = props.yAxis = { visible: false };
10 | return (
11 |
12 | );
13 | }
14 |
15 | }
16 |
17 | export default SparklineChart;
18 |
19 |
--------------------------------------------------------------------------------
/src/Tooltip.js:
--------------------------------------------------------------------------------
1 | import React, { PropTypes, Component } from 'react';
2 |
3 | class Tooltip extends Component {
4 |
5 | static propTypes = {
6 | top: PropTypes.number.isRequired,
7 | left: PropTypes.number.isRequired,
8 | html: PropTypes.node,
9 | hidden: PropTypes.bool,
10 | translate: PropTypes.number,
11 | className: PropTypes.string
12 | };
13 |
14 | static defaultProps = {
15 | top: 150,
16 | left: 100,
17 | html: '',
18 | translate: 50,
19 | className: 'tooltip'
20 | };
21 |
22 | render() {
23 | const {top, left, hidden, html, translate} = this.props;
24 |
25 | const style = {
26 | display: hidden ? 'none' : 'block',
27 | position: 'fixed',
28 | top: top,
29 | left: left,
30 | transform: `translate(-${translate}%, 0)`,
31 | pointerEvents: 'none'
32 | };
33 |
34 | return ( {html}
);
35 | }
36 |
37 | }
38 |
39 | export default Tooltip;
40 |
--------------------------------------------------------------------------------
/src/helpers.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 | import d3 from 'd3/d3.min.js';
3 |
4 | export function calculateInner(component, props) {
5 | const { height, width, margin } = props;
6 | component._innerHeight = height - margin.top - margin.bottom;
7 | component._innerWidth = width - margin.left - margin.right;
8 | }
9 |
10 | export function arrayify(component, props) {
11 | const isEmptyObject = _.isPlainObject(props.data) && _.keys(props.data).length < 1;
12 | const isEmptyArray = _.isArray(props.data) && props.data.length < 1;
13 | if (props.data === null || isEmptyObject || isEmptyArray) {
14 | component._data = [{
15 | label: 'No data available',
16 | values: [{x: 'No data available', y: 1}]
17 | }];
18 | } else if (!Array.isArray(props.data)) {
19 | component._data = [props.data];
20 | } else {
21 | component._data = props.data;
22 | }
23 | }
24 |
25 | export function makeLinearXScale(component, props) {
26 | const {x, values} = props;
27 | const [ data, innerWidth ] = [component._data, component._innerWidth];
28 |
29 | const extents =
30 | d3.extent(
31 | Array.prototype.concat.apply([],
32 | data.map(stack => {
33 | return values(stack).map(e => {
34 | return x(e);
35 | });
36 | })));
37 |
38 | const scale = d3.scale.linear()
39 | .domain(extents)
40 | .range([0, innerWidth]);
41 |
42 | const zero = d3.max([0, scale.domain()[0]]);
43 | const xIntercept = scale(zero);
44 |
45 | return [scale, xIntercept];
46 | }
47 |
48 | export function makeOrdinalXScale(component, props) {
49 | const { x, values } = props;
50 | const barPadding = _.isNumber(props.barPadding) ? props.barPadding : 0.5;
51 | const [ data, innerWidth ] = [component._data, component._innerWidth];
52 | let scale;
53 |
54 | if (_.isFunction(values) && _.isArray(data) && data.length > 0){
55 | scale = d3.scale.ordinal().domain(values(data[0]).map(e => { return x(e); })).rangeRoundBands([0, innerWidth], barPadding);
56 | } else {
57 | scale = d3.scale.ordinal();
58 | }
59 | return [scale, 0];
60 | }
61 |
62 | export function makeTimeXScale(component, props) {
63 | const { x, values } = props;
64 | const [ data, innerWidth ] = [component._data, component._innerWidth];
65 |
66 | const minDate = d3.min(values(data[0]), x);
67 |
68 | const maxDate = d3.max(values(data[0]), x);
69 |
70 | const scale = d3.time.scale()
71 | .domain([minDate, maxDate])
72 | .range([0, innerWidth]);
73 |
74 | return [scale, 0];
75 | }
76 |
77 | export function makeLinearYScale(component, props) {
78 | const { y, y0, values, groupedBars } = props;
79 | const [ data, innerHeight ] = [component._data, component._innerHeight];
80 |
81 | let extents =
82 | d3.extent(
83 | Array.prototype.concat.apply([],
84 | data.map(stack => {
85 | return values(stack).map(e => {
86 | if (groupedBars) {
87 | return y(e);
88 | }
89 | return y0(e) + y(e);
90 | });
91 | })));
92 |
93 | extents = [d3.min([0, extents[0]]), extents[1]];
94 |
95 | const scale = d3.scale.linear().domain(extents).range([innerHeight, 0]);
96 |
97 | const zero = d3.max([0, scale.domain()[0]]);
98 | const yIntercept = scale(zero);
99 |
100 | return [scale, yIntercept];
101 | }
102 |
103 | export function makeOrdinalYScale(component) {
104 | const [ innerHeight ] = [component._data, component._innerHeight];
105 | const scale = d3.scale.ordinal().range([innerHeight, 0]);
106 | const yIntercept = scale(0);
107 |
108 | return [scale, yIntercept];
109 | }
110 |
111 | export function makeXScale(component, props) {
112 | const { x, values } = props;
113 | const data = component._data;
114 |
115 | if (_.isFunction(x) && _.isFunction(values) && _.isArray(data) && data.length > 0){
116 | if (typeof (x(values(data[0])[0])) === 'number') {
117 | return makeLinearXScale(component, props);
118 | }
119 |
120 | if (typeof x(values(data[0])[0]).getMonth === 'function') {
121 | return makeTimeXScale(component, props);
122 | }
123 | }
124 | return makeOrdinalXScale(component, props);
125 | }
126 |
127 | export function makeYScale(component, props) {
128 | const { y, values } = props;
129 | const data = component._data;
130 |
131 | if (_.isFunction(y) && _.isFunction(values) && _.isArray(data) && data.length > 0){
132 | if (typeof y(values(data[0])[0]) === 'number') {
133 | return makeLinearYScale(component, props);
134 | }
135 | }
136 | return makeOrdinalYScale(component, props);
137 | }
138 |
139 | export function makeScales(component, props) {
140 | const { xScale, xIntercept, yScale, yIntercept } = props;
141 |
142 | if (!xScale) {
143 | [component._xScale, component._xIntercept] = makeXScale(component, props);
144 | } else {
145 | [component._xScale, component._xIntercept] = [xScale, xIntercept];
146 | }
147 |
148 | if (!yScale) {
149 | [component._yScale, component._yIntercept] = makeYScale(component, props);
150 | } else {
151 | [component._yScale, component._yIntercept] = [yScale, yIntercept];
152 | }
153 | }
154 |
155 | export function addTooltipMouseHandlers(component) {
156 | component.handleMouseLeave = function(e) {
157 | if (!this.props.tooltipHtml) {
158 | return;
159 | }
160 |
161 | e.preventDefault();
162 |
163 | this.setState({
164 | tooltip: {
165 | hidden: true
166 | }
167 | });
168 | };
169 | component.handleMouseMove = function(e, data) {
170 | if (!this.props.tooltipHtml) {
171 | return;
172 | }
173 |
174 | e.preventDefault();
175 |
176 | const {
177 | margin,
178 | tooltipMode,
179 | tooltipOffset,
180 | tooltipContained
181 | } = this.props;
182 |
183 | const svg = this._svg_node;
184 | let position;
185 | if (svg.createSVGPoint) {
186 | let point = svg.createSVGPoint();
187 | point.x = e.clientX;
188 | point.y = e.clientY;
189 | point = point.matrixTransform(svg.getScreenCTM().inverse());
190 | position = [point.x - margin.left, point.y - margin.top];
191 | } else {
192 | const rect = svg.getBoundingClientRect();
193 | position = [e.clientX - rect.left - svg.clientLeft - margin.left, e.clientY - rect.top - svg.clientTop - margin.top];
194 | }
195 |
196 | const [html, xPos, yPos] = this._tooltipHtml(data, position);
197 | const svgTop = svg.getBoundingClientRect().top + margin.top;
198 | const svgLeft = svg.getBoundingClientRect().left + margin.left;
199 |
200 | let top = 0;
201 | let left = 0;
202 |
203 | if (tooltipMode === 'fixed') {
204 | top = svgTop + tooltipOffset.top;
205 | left = svgLeft + tooltipOffset.left;
206 | } else if (tooltipMode === 'element') {
207 | top = svgTop + yPos + tooltipOffset.top;
208 | left = svgLeft + xPos + tooltipOffset.left;
209 | } else { // mouse
210 | top = e.clientY + tooltipOffset.top;
211 | left = e.clientX + tooltipOffset.left;
212 | }
213 |
214 | function lerp(t, a, b) {
215 | return (1 - t) * a + t * b;
216 | }
217 |
218 | let translate = 50;
219 |
220 | if (tooltipContained) {
221 | const t = position[0] / svg.getBoundingClientRect().width;
222 | translate = lerp(t, 0, 100);
223 | }
224 |
225 | this.setState({
226 | tooltip: {
227 | top: top,
228 | left: left,
229 | hidden: false,
230 | html: html,
231 | translate: translate
232 | }
233 | });
234 | };
235 | }
236 |
237 |
--------------------------------------------------------------------------------
/test/AreaChart-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import AreaChart from '../src/AreaChart';
5 |
6 | describe('', function() {
7 | const height = 100;
8 | const width = 100;
9 |
10 | it('renders a component', function(){
11 | const data = [];
12 | const wrapper = shallow();
13 | const chart = wrapper.find('.chart');
14 | expect(chart).to.have.length(1);
15 | const props = chart.props();
16 | expect(props.height).to.equal(height);
17 | expect(props.width).to.equal(width);
18 | });
19 |
20 | it('renders a with some data', function(){
21 | const data = [ {
22 | label: 'Apple',
23 | values: [{x: 0, y: 2}, {x: 1.3, y: 5}, {x: 3, y: 6}, {x: 3.5, y: 6.5}, {x: 4, y: 6}, {x: 4.5, y: 6}, {x: 5, y: 7}, {x: 5.5, y: 8}]
24 | }];
25 | const wrapper = shallow();
26 | const chart = wrapper.find('.chart');
27 | expect(chart).to.have.length(1);
28 | const props = chart.props();
29 | expect(props.height).to.equal(height);
30 | expect(props.width).to.equal(width);
31 | const html = wrapper.html();
32 | expect(html).to.match(/g class="x axis"/);
33 | expect(html).to.match(/line x2=/);
34 | });
35 |
36 | it('should not blow up if no data is passed to it', function(){
37 | const wrapper = shallow();
38 | const chart = wrapper.find('.chart');
39 | expect(chart).to.have.length(1);
40 | expect(wrapper.html()).to.contain('No data available');
41 | });
42 |
43 | it('should not blow up if an empty array of data is passed to it', function(){
44 | const wrapper = shallow();
45 | const chart = wrapper.find('.chart');
46 | expect(chart).to.have.length(1);
47 | expect(wrapper.html()).to.contain('No data available');
48 | });
49 |
50 | it('should not blow up if an empty object of data is passed to it', function(){
51 | const wrapper = shallow();
52 | const chart = wrapper.find('.chart');
53 | expect(chart).to.have.length(1);
54 | expect(wrapper.html()).to.contain('No data available');
55 | });
56 | });
57 |
--------------------------------------------------------------------------------
/test/Axis-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import Axis from '../src/Axis';
5 | import d3 from 'd3/d3.min.js';
6 | import sinon from 'sinon';
7 |
8 | describe('', function() {
9 |
10 | function testAxis(scale, orientation, tickFormat=null, tickFilter=null){
11 | const wrapper = shallow();
12 | expect(wrapper.find('g.axis')).to.have.length(1);
13 | expect(wrapper.find('g.tick.even').length).to.be.gt(1);
14 | expect(wrapper.find('g.tick.odd').length).to.be.gt(1);
15 | expect(wrapper.find('path.domain')).to.have.length(1);
16 | expect(wrapper.find('text.axis.label')).to.have.length(1);
17 | return wrapper;
18 | }
19 |
20 | it('renders an component', function() {
21 | const scale = d3.scale.linear();
22 | testAxis(scale, 'top');
23 | testAxis(scale, 'bottom');
24 | testAxis(scale, 'left');
25 | testAxis(scale, 'right');
26 | });
27 |
28 | it('should support a custom tick format', function(){
29 | const scale = d3.scale.linear();
30 | const format = d3.format(',.0f');
31 | const tickFormatter = function(x){ return format(x); };
32 | testAxis(scale, 'top', tickFormatter);
33 | });
34 |
35 | it('should add a hidden class to any axes with an empty label', function(){
36 | const scale = d3.scale.linear();
37 | const tickFormatter = function(){ return ''; };
38 | const wrapper = testAxis(scale, 'top', tickFormatter);
39 | expect(wrapper.find('.tick.hidden').length).to.be.gt(1);
40 | });
41 |
42 | it('should support a custom tick filter', function(){
43 | const scale = d3.scale.linear();
44 | const tickFilter = sinon.spy(function(){ return true; });
45 | testAxis(scale, 'top', null, tickFilter);
46 | });
47 |
48 | });
49 |
--------------------------------------------------------------------------------
/test/Bar-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import sinon from 'sinon';
5 | import Bar from '../src/Bar';
6 |
7 | describe('', function() {
8 |
9 | const width = 100;
10 | const height = 200;
11 | const x = 0;
12 | const y = 10;
13 | const fill = '#0000';
14 | const data = [ ];
15 |
16 | it('renders a component', function() {
17 | const wrapper = shallow();
18 |
19 | const rect = wrapper.find('rect.bar');
20 | expect(rect).to.have.length(1);
21 | const props = rect.props();
22 | expect(props.x).to.equal(x);
23 | expect(props.y).to.equal(y);
24 | expect(props.width).to.equal(width);
25 | expect(props.height).to.equal(height);
26 | expect(props.fill).to.equal(fill);
27 | });
28 |
29 | it('supports mouse events', function() {
30 | const mouseEvent = { pageX: x, pageY: y };
31 | const handleMouseMove = sinon.spy();
32 | const handleMouseLeave = sinon.spy();
33 | data.push({ foo: 'bar' });
34 | const wrapper = shallow();
35 | const bar = wrapper.find('rect.bar');
36 | bar.simulate('mouseMove', mouseEvent);
37 | bar.simulate('mouseLeave', mouseEvent);
38 | expect(handleMouseMove.called).to.be.true;
39 | expect(handleMouseMove.args[0][0]).to.equal(mouseEvent);
40 | expect(handleMouseMove.args[0][1]).to.equal(data);
41 | expect(handleMouseLeave.calledOnce).to.be.true;
42 | expect(handleMouseLeave.args[0][0]).to.equal(mouseEvent);
43 | });
44 |
45 | });
46 |
47 |
--------------------------------------------------------------------------------
/test/BarChart-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import BarChart from '../src/BarChart';
5 |
6 | describe('', function() {
7 | const height = 100;
8 | const width = 100;
9 |
10 | it('renders a component', function() {
11 | const data = [];
12 | const wrapper = shallow();
13 | const chart = wrapper.find('.chart');
14 | expect(chart).to.have.length(1);
15 | const props = chart.props();
16 | expect(props.height).to.equal(height);
17 | expect(props.width).to.equal(width);
18 | });
19 |
20 | it('renders a with some data', function(){
21 | const data = [{
22 | label: 'Fruits',
23 | values: [{x: 'Apple', y: 10}, {x: 'Peaches', y: 4}, {x: 'Pumpkin Pie', y: 3}]
24 | }];
25 | const wrapper = shallow();
26 | const chart = wrapper.find('.chart');
27 | expect(chart).to.have.length(1);
28 | const props = chart.props();
29 | expect(props.height).to.equal(height);
30 | expect(props.width).to.equal(width);
31 | const html = wrapper.html();
32 | expect(html).to.match(/g class="x axis"/);
33 | expect(html).to.match(/rect class="bar"/);
34 | });
35 |
36 | it('should not blow up if no data is passed to it', function(){
37 | const wrapper = shallow();
38 | const chart = wrapper.find('.chart');
39 | expect(chart).to.have.length(1);
40 | expect(wrapper.html()).to.contain('No data available');
41 | });
42 |
43 | it('should not blow up if an empty array of data is passed to it', function(){
44 | const wrapper = shallow();
45 | const chart = wrapper.find('.chart');
46 | expect(chart).to.have.length(1);
47 | expect(wrapper.html()).to.contain('No data available');
48 | });
49 |
50 | it('should not blow up if an empty object of data is passed to it', function(){
51 | const wrapper = shallow();
52 | const chart = wrapper.find('.chart');
53 | expect(chart).to.have.length(1);
54 | expect(wrapper.html()).to.contain('No data available');
55 | });
56 | });
57 |
58 |
--------------------------------------------------------------------------------
/test/Chart-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow, render } from 'enzyme';
3 | import { expect } from 'chai';
4 | import Chart from '../src/Chart';
5 |
6 | describe('', function() {
7 | const height = 100;
8 | const width = 100;
9 | const margin = {
10 | top: 0,
11 | left: 0,
12 | bottom: 0,
13 | right: 0
14 | };
15 |
16 | function testChartWithLegend(position){
17 | return function(){
18 | const legend = {
19 | position: position,
20 | data: [
21 | { 'apple': '#dddddd' },
22 | { 'peach': '#cdcdcd' }
23 | ]
24 | };
25 | const wrapper = render();
26 | expect(wrapper.find('g.legend')).to.have.length(position === 'both' ? 2 : 1);
27 | expect(wrapper.find('g.cells')).to.have.length(position === 'both' ? 2 : 1);
28 | expect(wrapper.find('g.cell')).to.have.length(position === 'both' ? 4 : 2);
29 | expect(wrapper.find('text.label')).to.have.length(position === 'both' ? 4 : 2);
30 | };
31 | }
32 |
33 | it('renders a component', function() {
34 | const wrapper = shallow();
35 | const chart = wrapper.find('svg');
36 | expect(chart).to.have.length(1);
37 | const props = chart.props();
38 | expect(props.height).to.equal(height);
39 | expect(props.height).to.equal(height);
40 | expect(props.width).to.equal(width);
41 | });
42 |
43 | it('renders a with a top legend', testChartWithLegend('top'));
44 | it('renders a with a bottom legend', testChartWithLegend('bottom'));
45 |
46 | });
47 |
--------------------------------------------------------------------------------
/test/DonutChart-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import DonutChart from '../src/DonutChart';
5 |
6 | describe('', function() {
7 | const height = 100;
8 | const width = 100;
9 |
10 | it('renders a component', function(){
11 | const data = [];
12 | const wrapper = shallow();
13 | const chart = wrapper.find('.chart');
14 | expect(chart).to.have.length(1);
15 | const props = chart.props();
16 | expect(props.height).to.equal(height);
17 | expect(props.width).to.equal(width);
18 | });
19 |
20 | it('renders a with some data', function(){
21 | const data = {
22 | label: 'Apple',
23 | values: [{x: 'Apple', y: 10}, {x: 'Peaches', y: 4}, {x: 'Pumpkin', y: 3}]
24 | };
25 | const wrapper = shallow();
26 | const chart = wrapper.find('.chart');
27 | expect(chart).to.have.length(1);
28 | const props = chart.props();
29 | expect(props.height).to.equal(height);
30 | expect(props.width).to.equal(width);
31 | const html = wrapper.html();
32 | expect(html).to.match(/path class="arc"/);
33 | });
34 | });
35 |
--------------------------------------------------------------------------------
/test/Legend-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import Legend from '../src/Legend';
5 |
6 | describe('', function() {
7 |
8 | it('renders an component', function() {
9 | const data = [
10 | { 'apple': '#dddddd' },
11 | { 'peach': '#cdcdcd' }
12 | ];
13 | const wrapper = shallow();
14 | expect(wrapper.find('g.legend')).to.have.length(1);
15 | expect(wrapper.find('g.cells')).to.have.length(1);
16 | expect(wrapper.find('g.cell')).to.have.length(2);
17 | expect(wrapper.find('text.label')).to.have.length(2);
18 | });
19 |
20 | });
21 |
22 |
--------------------------------------------------------------------------------
/test/LineChart-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import LineChart from '../src/LineChart';
5 |
6 | describe('', function() {
7 | const height = 100;
8 | const width = 100;
9 |
10 | it('renders a component', function(){
11 | const data = [ { label: 'apples', values: [{ x: 0, y: 0 }] } ];
12 | const wrapper = shallow();
13 | const chart = wrapper.find('.chart');
14 | expect(chart).to.have.length(1);
15 | const props = chart.props();
16 | expect(props.height).to.equal(height);
17 | expect(props.width).to.equal(width);
18 | const html = wrapper.html();
19 | expect(html).to.match(/g class="x axis"/);
20 | expect(html).to.match(/g class="y axis"/);
21 | expect(html).to.match(/path class="line"/);
22 | });
23 |
24 | it('should not blow up if no data is passed to it', function(){
25 | const wrapper = shallow();
26 | const chart = wrapper.find('.chart');
27 | expect(chart).to.have.length(1);
28 | expect(wrapper.html()).to.contain('No data available');
29 | });
30 |
31 | it('should not blow up if an empty array of data is passed to it', function(){
32 | const wrapper = shallow();
33 | const chart = wrapper.find('.chart');
34 | expect(chart).to.have.length(1);
35 | expect(wrapper.html()).to.contain('No data available');
36 | });
37 |
38 | it('should not blow up if an empty object of data is passed to it', function(){
39 | const wrapper = shallow();
40 | const chart = wrapper.find('.chart');
41 | expect(chart).to.have.length(1);
42 | expect(wrapper.html()).to.contain('No data available');
43 | });
44 |
45 | });
46 |
47 |
48 |
--------------------------------------------------------------------------------
/test/NodeChart-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import NodeChart from '../src/NodeChart';
5 |
6 | describe('', function() {
7 | const height = 100;
8 | const width = 100;
9 |
10 | it('renders a component', function(){
11 | const data = [];
12 | const wrapper = shallow();
13 | const chart = wrapper.find('.chart');
14 | expect(chart).to.have.length(1);
15 | const props = chart.props();
16 | expect(props.height).to.equal(height);
17 | expect(props.width).to.equal(width);
18 | });
19 |
20 | it('renders a with some data', function(){
21 |
22 | const nodeTree = {
23 | name: 'A',
24 | value: 20,
25 | imageUrl: 'https://placekitten.com/30/30',
26 | children: [
27 | {
28 | name: 'B',
29 | value: 15,
30 | imageUrl: 'https://placekitten.com/30/30',
31 | children: [
32 | {
33 | name: 'E',
34 | value: 9
35 | }
36 | ]
37 | },
38 | {
39 | name: 'C',
40 | value: 25,
41 | imageUrl: 'https://placekitten.com/30/30',
42 | children: null
43 | }
44 | ]
45 | };
46 |
47 | const wrapper = shallow();
48 | const chart = wrapper.find('.chart');
49 | expect(chart).to.have.length(1);
50 | const props = chart.props();
51 | expect(props.height).to.equal(height);
52 | expect(props.width).to.equal(width);
53 | const html = wrapper.html();
54 | expect(html).to.match(/circle class="node"/);
55 | });
56 |
57 | });
58 |
59 |
60 |
--------------------------------------------------------------------------------
/test/Path-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import sinon from 'sinon';
5 | import Path from '../src/Path';
6 | import d3 from 'd3/d3.min.js';
7 |
8 | describe('', function() {
9 |
10 | const stroke= 'gray';
11 | const data=[ {x: 0, y: 2}, {x: 1.3, y: 5}, {x: 3, y: 6}, {x: 3.5, y: 6.5}, {x: 4, y: 6}, {x: 4.5, y: 6}, {x: 5, y: 7}, {x: 5.5, y: 8} ];
12 | const line = d3.svg.line().x((d) => { return d.x; }).y((d) => { return d.y; }).interpolate('basis');
13 | const d = line(data);
14 |
15 | it('renders a component', function() {
16 | const wrapper = shallow();
17 | const path = wrapper.find('path.path');
18 | expect(path).to.have.length(1);
19 | const props = path.props();
20 | expect(props.d).to.equal(d);
21 | expect(props.stroke).to.equal(stroke);
22 | });
23 |
24 | it('supports mouse events', function() {
25 | const mouseEvent = { pageX: 0, pageY: 2};
26 | const handleMouseMove = sinon.spy();
27 | const handleMouseLeave = sinon.spy();
28 | const wrapper = shallow();
29 | const path = wrapper.find('path.path');
30 | path.simulate('mouseMove', mouseEvent);
31 | path.simulate('mouseLeave', mouseEvent);
32 | expect(handleMouseMove.called).to.be.true;
33 | expect(handleMouseMove.args[0][0]).to.equal(mouseEvent);
34 | expect(handleMouseMove.args[0][1]).to.equal(data);
35 | expect(handleMouseLeave.calledOnce).to.be.true;
36 | expect(handleMouseLeave.args[0][0]).to.equal(mouseEvent);
37 | });
38 |
39 | });
40 |
41 |
--------------------------------------------------------------------------------
/test/PieChart-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import PieChart from '../src/PieChart';
5 |
6 | describe('', function() {
7 | const height = 100;
8 | const width = 100;
9 |
10 | it('renders a component', function(){
11 | const data = [];
12 | const wrapper = shallow();
13 | const chart = wrapper.find('.chart');
14 | expect(chart).to.have.length(1);
15 | const props = chart.props();
16 | expect(props.height).to.equal(height);
17 | expect(props.width).to.equal(width);
18 | });
19 |
20 | it('renders a with some data', function(){
21 | const data = {
22 | label: 'Apple',
23 | values: [{x: 'Apple', y: 10}, {x: 'Peaches', y: 4}, {x: 'Pumpkin', y: 3}]
24 | };
25 | const wrapper = shallow();
26 | const chart = wrapper.find('.chart');
27 | expect(chart).to.have.length(1);
28 | const props = chart.props();
29 | expect(props.height).to.equal(height);
30 | expect(props.width).to.equal(width);
31 | const html = wrapper.html();
32 | expect(html).to.match(/path class="arc"/);
33 | });
34 |
35 | });
36 |
37 |
--------------------------------------------------------------------------------
/test/SparklineChart-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import SparklineChart from '../src/SparklineChart';
5 |
6 | describe('', function() {
7 | const height = 50;
8 | const width = 100;
9 |
10 | it('renders a component', function(){
11 | const data = [ { label: 'apples', values: [{ x: 0, y: 0 }] } ];
12 | const wrapper = shallow();
13 | const html = wrapper.html();
14 | expect(html).to.not.match(/g class="x axis"/);
15 | expect(html).to.not.match(/g class="y axis"/);
16 | expect(html).to.match(/path class="line"/);
17 | });
18 | });
19 |
20 |
--------------------------------------------------------------------------------
/test/Tooltip-test.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { shallow } from 'enzyme';
3 | import { expect } from 'chai';
4 | import Tooltip from '../src/Tooltip';
5 |
6 | describe('', function(){
7 |
8 | const top = 0;
9 | const left = 0;
10 |
11 | it('renders a component', function() {
12 | const wrapper = shallow();
13 | const tip = wrapper.find('div.tooltip');
14 | expect(tip).to.have.length(1);
15 | const props = tip.props();
16 | expect(props.style.top).to.equal(top);
17 | expect(props.style.left).to.equal(left);
18 | });
19 |
20 | it('should be possible to customize the tooltip class', function(){
21 | const wrapper = shallow();
22 | let tip = wrapper.find('div.tooltip');
23 | expect(tip).to.have.length(0);
24 | tip = wrapper.find('div.trolltip');
25 | expect(tip).to.have.length(1);
26 | });
27 | });
28 |
29 |
30 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | module.exports = {
3 | entry: [
4 | 'webpack/hot/only-dev-server',
5 | './demo/js/app.js'
6 | ],
7 | output: {
8 | path: './demo',
9 | filename: 'bundle.js'
10 | },
11 | module: {
12 | loaders: [
13 | { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },
14 | { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
15 | { test: /\.css$/, loader: 'style!css' },
16 | { test: /\.scss$/, loader: 'style-loader!css-loader!sass-loader' }
17 | ]
18 | },
19 | resolve: {
20 | extensions: ['', '.js', '.json' ]
21 | },
22 | plugins: [
23 | new webpack.NoErrorsPlugin()
24 | ]
25 | };
26 |
--------------------------------------------------------------------------------