41 | * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
42 | */
43 |
44 | /** @license React v0.19.1
45 | * scheduler.production.min.js
46 | *
47 | * Copyright (c) Facebook, Inc. and its affiliates.
48 | *
49 | * This source code is licensed under the MIT license found in the
50 | * LICENSE file in the root directory of this source tree.
51 | */
52 |
53 | /** @license React v16.13.1
54 | * react-is.production.min.js
55 | *
56 | * Copyright (c) Facebook, Inc. and its affiliates.
57 | *
58 | * This source code is licensed under the MIT license found in the
59 | * LICENSE file in the root directory of this source tree.
60 | */
61 |
62 | /** @license React v16.14.0
63 | * react-dom-server.browser.production.min.js
64 | *
65 | * Copyright (c) Facebook, Inc. and its affiliates.
66 | *
67 | * This source code is licensed under the MIT license found in the
68 | * LICENSE file in the root directory of this source tree.
69 | */
70 |
71 | /** @license React v16.14.0
72 | * react-dom.production.min.js
73 | *
74 | * Copyright (c) Facebook, Inc. and its affiliates.
75 | *
76 | * This source code is licensed under the MIT license found in the
77 | * LICENSE file in the root directory of this source tree.
78 | */
79 |
80 | /** @license React v16.14.0
81 | * react.production.min.js
82 | *
83 | * Copyright (c) Facebook, Inc. and its affiliates.
84 | *
85 | * This source code is licensed under the MIT license found in the
86 | * LICENSE file in the root directory of this source tree.
87 | */
88 |
--------------------------------------------------------------------------------
/docs/build/index.html:
--------------------------------------------------------------------------------
1 | Reactochart Docs Loading...
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Redirect
4 |
63 |
64 |
65 | {label || id} {isExpanded ? '▼' : '►'}
66 |
67 |
68 | {isExpanded ? (
69 |
70 | {description ? (
71 |
{description}
72 | ) : null}
73 |
74 |
75 | ) : null}
76 |
77 |
15 |
{name}
16 |
17 | {children}
18 |
19 | );
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/docs/src/data/util.js:
--------------------------------------------------------------------------------
1 | import _ from 'lodash';
2 |
3 | export function randomWalk(length = 100, start = 0, variance = 10) {
4 | return _.reduce(
5 | _.range(length - 1),
6 | sequence => {
7 | return sequence.concat(_.last(sequence) + _.random(-variance, variance));
8 | },
9 | [start],
10 | );
11 | }
12 |
13 | export function randomWalkSeries(length = 100, start = 0, variance = 10) {
14 | return randomWalk(length, start, variance).map((n, i) => [i, n]);
15 | }
16 |
17 | export function randomWalkTimeSeries(
18 | length = 100,
19 | start = 0,
20 | variance = 10,
21 | startDate = new Date(2015, 0, 1),
22 | ) {
23 | let date = startDate;
24 | return randomWalk(length, start, variance).map(n => {
25 | date = new Date(date.getTime() + 24 * 60 * 60 * 1000);
26 | return [date, n];
27 | });
28 | }
29 |
30 | export function removeRandomData(data, removeCount = 5) {
31 | const gapData = data.slice();
32 | _.times(removeCount, () => {
33 | if (!gapData.length) return;
34 | const gapIndex = _.random(gapData.length - 1);
35 | gapData.splice(gapIndex, 1);
36 | });
37 | return gapData;
38 | }
39 |
--------------------------------------------------------------------------------
/docs/src/docs/AreaBarChart/AreaBarChartDocs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ComponentDocs from '../../ComponentDocs';
3 | import ExampleSection from '../../ExampleSection';
4 | // autogenerated docs data containing descriptions of this component's props
5 | import propDocs from './propDocs.json';
6 |
7 | const examples = [
8 | {
9 | id: 'rates-by-age',
10 | label: 'Smoking Rates by Age',
11 | codeText: require('./examples/RatesByAge.js.example').default,
12 | },
13 | {
14 | id: 'basic',
15 | label: 'Basic AreaBarChart',
16 | codeText: require('./examples/AreaBarChart.js.example').default,
17 | },
18 | ];
19 |
20 | export default class AreaBarChartExamples extends React.Component {
21 | render() {
22 | return (
23 |
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/AreaBarChart/examples/AreaBarChart.js.example:
--------------------------------------------------------------------------------
1 | const AreaBarChartExample = (props) => {
2 | return
3 |
4 | Math.sin(d / 10) * 10}
8 | xEnd={d => Math.sin((d + 1) / 10) * 10}
9 | y={d => Math.cos(d / (Math.PI))}
10 | />
11 |
12 |
13 | Math.cos(d / (Math.PI))}
18 | y={d => Math.sin(d / 10) * 10}
19 | yEnd={d => Math.sin((d + 1) / 10) * 10}
20 | />
21 |
22 |
3 |
US Smoking Rates by Age Group
4 |
5 |
6 | d.ageMin}
15 | xEnd={d => d.ageMax}
16 | y={d => d.rate}
17 | />
18 |
19 |
29 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
30 |
31 | {examples.map(example => {
32 | return
35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/docs/src/docs/AreaChart/examples/Area2Datasets.js.example:
--------------------------------------------------------------------------------
1 | class Area2DatasetsExample extends React.Component {
2 | render() {
3 | const data1 = randomWalkTimeSeries(115).map(([x,y]) => ({x, y}));
4 | const data2 = randomWalkTimeSeries(115).map(([x,y]) => ({x, y}));
5 |
6 | // we have two datasets, but AreaChart takes one combined dataset
7 | // so combine the two datasets into one using the combineDatasets utility function
8 | // (import from 'Reactochart/utils')
9 | // original datasets are of the shape [{x: ..., y: 20}]
10 | // combined is of the shape [{x: ..., y0: 20, y1: 30}]
11 | const combined = utils.Data.combineDatasets([
12 | {data: data1, combineKey: 'x', dataKeys: {y: 'y0'}},
13 | {data: data2, combineKey: 'x', dataKeys: {y: 'y1'}}
14 | ], 'x');
15 |
16 | return
17 |
18 | d.x}
22 | y={d => d.y0}
23 | yEnd={d => d.y1}
24 | />
25 |
26 |
3 |
4 | d}
9 | y={d => Math.sin(d / 10) * 10}
10 | yEnd={d => Math.cos((d + 1) / 10) * 10}
11 | />
12 |
13 |
15 |
16 | d.x}
24 | y={d => d.y0}
25 | yEnd={d => d.y1}
26 | />
27 | d.x} y={d => d.y}
30 | lineStyle={{strokeWidth: 3}}
31 | />
32 | d.x} y={d => d.y}
35 | />
36 |
37 |
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/AreaHeatmap/examples/AreaHeatmap.js.example:
--------------------------------------------------------------------------------
1 | const AreaHeatmapExample = (props) => {
2 | const gridData = _.range(30).map(m => {
3 | return _.range(30).map(n => {
4 | return {
5 | x: n,
6 | xEnd: n + 1,
7 | y: m,
8 | yEnd: m + 1,
9 | value: Math.sin(m * n * 0.01)
10 | };
11 | });
12 | });
13 |
14 | const data = _.flatten(gridData);
15 |
16 | return
17 |
18 | d.value}
23 | x={d => d.x}
24 | xEnd={d => d.xEnd}
25 | y={d => d.y}
26 | yEnd={d => d.yEnd}
27 | rectStyle={{fill: 'rebeccapurple'}}
28 | />
29 |
30 |
31 |
32 | d.value}
37 | x={d => d.x}
38 | xEnd={d => d.xEnd}
39 | y={d => d.y}
40 | yEnd={d => d.yEnd}
41 | rectStyle={{fill: '#41ab5d'}}
42 | />
43 | d.value * -1}
46 | x={d => d.x}
47 | xEnd={d => d.xEnd}
48 | y={d => d.y}
49 | yEnd={d => d.yEnd}
50 | rectStyle={{fill: '#fc4e2a'}}
51 | />
52 |
53 |
29 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
30 |
31 | {examples.map(example => {
32 | return
35 | );
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/docs/src/docs/AriaLabelContainer/examples/OneDataset.js.example:
--------------------------------------------------------------------------------
1 | const AriaLabelContainerExample = (props) => {
2 | const data = _.range(10).map(d => ({
3 | x: d,
4 | y: Math.round(d * Math.random() * 10)
5 | }))
6 | return
7 | d.x}
12 | y={d => d.y}
13 | lineStyle={{stroke: '#ff7f0e', strokeWidth: 3}}
14 | />
15 | {
17 | const { 0: dataPoint } = datasets;
18 | if(xValue){
19 | return `xValue, ${dataPoint.x}; yValue, ${dataPoint.y}`
20 | }
21 | }}
22 | datasetWithAccessor={
23 | [{
24 | data: data,
25 | accessor: d => d.x
26 | }]
27 | }
28 | />
29 | ;
30 | };
31 |
32 | ReactDOM.render(
25 | d.x}
30 | y={d => d.y}
31 | lineStyle={{stroke: '#ff7f0e', strokeWidth: 3}}
32 | />
33 | d.x}
36 | y={d => d.y}
37 | lineStyle={{stroke: '#2ca02c', strokeWidth: 3}}
38 | />
39 | d.x,
45 | },
46 | {
47 | data: data1,
48 | accessor: d => d.x,
49 | }
50 | ]}
51 | />
52 | ;
53 | };
54 |
55 | ReactDOM.render(
29 |
35 | d.x}
40 | y={d => d.y}
41 | lineStyle={{stroke: '#ff7f0e', strokeWidth: 3}}
42 | />
43 | {
45 | const dataPoint = datasets[0];
46 | if(dataPoint) {
47 | return `x Value, ${dataPoint.x}; y Value: ${dataPoint.y}`
48 | }
49 | }}
50 | onKeyDown={onKeyDown}
51 | datasetWithAccessor={[
52 | {
53 | data,
54 | accessor: d => d.x
55 | }
56 | ]}
57 | />
58 |
59 | {selectedValue &&
{`(${selectedValue.x}, ${selectedValue.y})`} }
60 |
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/Bar/examples/Bar.js.example:
--------------------------------------------------------------------------------
1 | const BarExample = (props) => {
2 | return
3 |
7 |
20 |
;
21 | };
22 |
23 | ReactDOM.render(
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/BarChart/examples/BarChart.js.example:
--------------------------------------------------------------------------------
1 | const BarChartExample = (props) => {
2 | const count = 30;
3 | const startDate = new Date(1992, 0, 1);
4 |
5 | const numbers = _.range(count);
6 | const letters = _.times(count, n => String.fromCharCode(97 + n));
7 | const dates = _.times(count, n => new Date(+(startDate) + (n * 1000 * 60 * 60 * 24 * 100)));
8 |
9 | const getNumberValue = (d) => 1.97 + Math.cos(d / 10);
10 | const getDateValue = (d) => getNumberValue(d.getFullYear() + (d.getMonth() / 12));
11 | const getLetterValue = (d) => getNumberValue(d.charCodeAt(0));
12 |
13 | const chartDefs = _.zip([numbers, letters, dates], [getNumberValue, getLetterValue, getDateValue]);
14 |
15 | return
16 | {([true, false]).map((horizontal, index) => {
17 | return
18 |
{horizontal ? "Horizontal" : "Vertical"}
19 |
20 | {chartDefs.map(([data, getValue], index2) => {
21 | return
22 | d}
27 | y={horizontal ? d => d : getValue}
28 | />
29 | ;
30 | })}
31 | ;
32 | })}
33 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
19 | d.x}
25 | y={d => d.y}
26 | barThickness={40}
27 | />
28 |
29 |
30 | };
31 |
32 | ReactDOM.render(
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/ColorHeatmap/examples/CategoricalColorHeatmap.js.example:
--------------------------------------------------------------------------------
1 | const CategoricalColorHeatmapExample = (props) => {
2 | // sorry, kinda hacky currently!
3 | // working on a better solution... -d
4 | const playTypes = ['www', 'open', 'play', 'other'];
5 | const platforms = ['desktop', 'mobile', 'webplayer', 'other'];
6 |
7 | const gridData = playTypes.map(function(n, i) {
8 | return platforms.map(function(m, j) {
9 | return {
10 | x: i,
11 | xEnd: i + 1,
12 | y: j,
13 | yEnd: j+1,
14 | value: Math.sin(i * j * 0.1)
15 | };
16 | })
17 | });
18 | const data = _.flatten(gridData);
19 |
20 | return
21 |
22 | d.value}
25 | x={d => d.x}
26 | xEnd={d => d.xEnd}
27 | y={d => d.y}
28 | yEnd={d => d.yEnd}
29 | colors={['rebeccapurple', 'goldenrod']}
30 | interpolator={'lab'}
31 | />
32 | i + 0.5)}
35 | labelFormat={d => playTypes[Math.round(d - 0.5)]}
36 | />
37 | i + 0.5)}
40 | labelFormat={d => platforms[Math.round(d - 0.5)]}
41 | />
42 |
45 |
46 | };
47 |
48 | ReactDOM.render(
17 |
18 | d.value}
21 | x={d => d.x}
22 | xEnd={d => d.xEnd}
23 | y={d => d.y}
24 | yEnd={d => d.yEnd}
25 | colors={['rebeccapurple', 'goldenrod']}
26 | interpolator={'lab'}
27 | />
28 |
31 |
32 |
33 | d.value}
36 | x={d => d.x}
37 | xEnd={d => d.xEnd}
38 | y={d => d.y}
39 | yEnd={d => d.yEnd}
40 | valueDomain={[-1, 0, 1]}
41 | colors={['Crimson', '#eee', 'ForestGreen']}
42 | interpolator={'lab'}
43 | />
44 |
47 |
;
48 | };
49 |
50 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/FunnelChart/examples/FunnelChart.js.example:
--------------------------------------------------------------------------------
1 | const FunnelChartExample = (props) => {
2 | const funnelData = [
3 | {observation: 1, value: 100},
4 | {observation: 2, value: 85},
5 | {observation: 3, value: 42},
6 | {observation: 4, value: 37},
7 | {observation: 5, value: 12}
8 | ];
9 |
10 | return
11 |
12 | d.observation}
17 | y={d => d.value}
18 | />
19 |
20 |
21 |
22 | d.value}
28 | y={d => d.observation}
29 | />
30 |
31 |
32 | };
33 |
34 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/Histogram/examples/Histogram.js.example:
--------------------------------------------------------------------------------
1 | const HistogramExample = (props) => {
2 | const randomNormalArr = _.times(1000, d3.randomNormal(0, 1)).concat(_.times(1000, d3.randomNormal(3, 0.5)));
3 |
4 | return
5 |
6 |
10 | d}
14 | />
15 |
16 |
17 |
18 |
With nicing applied
19 |
23 | d}
27 | nice={true}
28 | thresholds={10}
29 | />
30 |
31 |
32 |
33 |
With specified binDomain
34 |
38 | d}
42 | binDomain={[-6, 6]}
43 | />
44 |
45 |
46 |
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/KernelDensityEstimation/examples/KernelDensityEstimation.js.example:
--------------------------------------------------------------------------------
1 | const KernelDensityEstimationExample = (props) => {
2 | const randomNormalArr = _.times(1000, d3.randomNormal(0, 1)).concat(_.times(1000, d3.randomNormal(3, 0.5)));
3 |
4 | return
5 |
6 |
7 | d}
10 | />
11 | d} bandwidth={0.5}
13 | />
14 | d} bandwidth={0.1}
16 | />
17 | d} bandwidth={2}
19 | />
20 |
21 |
22 | {/*
*/}
23 | {/**/}
30 | {/* Math.random()}*/}
34 | {/*pointRadius={1}*/}
35 | {/*/>*/}
36 | {/**/}
37 | {/*
*/}
38 |
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/LineChart/examples/InteractiveLineChart.js.example:
--------------------------------------------------------------------------------
1 | const line1 = d => Math.sin(d*.1);
2 | const line2 = d => Math.cos(d*.1);
3 | const line3 = d => Math.sin(d*.2) * 1.5;
4 |
5 | const dPlusOne = d => d + 1;
6 |
7 | const gridData = _.range(30).map(m => {
8 | return _.range(30).map(n => {
9 | return {
10 | x: n,
11 | xEnd: n + 1,
12 | y: m,
13 | yEnd: m + 1,
14 | value: Math.sin(m * n * 0.01)
15 | };
16 | });
17 | });
18 |
19 | const randomNormalArr = _.times(1000, d3.randomNormal(0, 1)).concat(_.times(1000, d3.randomNormal(3, 0.5)));
20 |
21 | class InteractiveLineChartExample extends React.Component {
22 | state = {
23 | activeX: null
24 | };
25 |
26 | _onMouseMove = ({xValue, yValue}) => {
27 | this.setState({activeX: xValue});
28 | };
29 |
30 | render() {
31 | const {activeX} = this.state;
32 | const colors = d3.scaleOrdinal(d3.schemeCategory10);
33 |
34 | return
35 |
36 | [activeX, lineFunc(activeX)])}*/}
79 | {/*getX={0}*/}
80 | {/*getY={1}*/}
81 | {/*pointRadius={5}*/}
82 | {/*/> :*/}
83 | {/*null*/}
84 | {/*}*/}
85 |
86 |
87 | {activeX ?
88 |
{this.state.activeX.toFixed(3)} :
89 | null
90 | }
91 |
92 | }
93 | }
94 |
95 | ReactDOM.render(
3 |
4 | d}
9 | y={d => Math.sin(d*.1)}
10 | lineStyle={{stroke: '#ff7f0e', strokeWidth: 3}}
11 | />
12 | d}
15 | y={d => Math.cos(d*.1)}
16 | lineStyle={{stroke: '#1f77b4', strokeWidth: 2}}
17 | />
18 | d}
21 | y={d => Math.sin(d*.2) * 1.5}
22 | lineStyle={{stroke: '#2ca02c', strokeWidth: 1}}
23 | />
24 |
25 |
26 | };
27 |
28 | ReactDOM.render(
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/MarkerLineChart/examples/MarkerLineChart.js.example:
--------------------------------------------------------------------------------
1 | const MarkerLineChartExample = (props) => {
2 | return
3 |
4 |
5 | d}
10 | y={d => Math.sin(d / (Math.PI))}
11 | />
12 |
13 |
14 |
15 | d}
21 | y={d => Math.sin(d / (Math.PI))}
22 | />
23 |
24 |
25 |
26 |
27 |
28 | Math.sin(d / 10) * 10}
33 | xEnd={d => Math.sin((d + 1) / 10) * 10}
34 | y={d => Math.sin(d / (Math.PI))}
35 | />
36 |
37 |
38 |
39 | Math.sin(d / (Math.PI))}
45 | y={d => Math.sin(d / 10) * 10}
46 | yEnd={d => Math.sin((d + 1) / 10) * 10}
47 | />
48 |
49 |
50 |
6 |
7 | d[0]}
12 | y={d => d[1]}
13 | />
14 | d[0]}
17 | y={d => d[1]}
18 | lineLength={15}
19 | />
20 |
21 |
;
22 | };
23 |
24 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/MeasuredValueLabel/examples/MeasuredValueLabel.js.example:
--------------------------------------------------------------------------------
1 | const MeasuredValueLabelExample = (props) => {
2 | return insert example here
;
3 | };
4 |
5 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/PieChart/examples/PieChart.js.example:
--------------------------------------------------------------------------------
1 | class PieChartExample extends React.Component {
2 | state = { sinVal: 0 };
3 |
4 | _animateValue = () => {
5 | const sinVal = Math.min(
6 | Math.abs(
7 | Math.cos(new Date() * 0.001) * Math.sin(new Date() * 0.0011) + 1,
8 | ),
9 | 2,
10 | );
11 | this.setState({ sinVal });
12 | };
13 |
14 | componentDidMount() {
15 | this._interval = setInterval(this._animateValue, 20);
16 | }
17 | componentWillUnmount() {
18 | clearInterval(this._interval);
19 | }
20 |
21 | getPieSliceFill = datum => {
22 | const color = d3.interpolateSinebow(datum / 100);
23 | return {
24 | fill: color,
25 | };
26 | };
27 |
28 | render() {
29 | const slice = d => d;
30 | return (
31 |
32 |
37 |
45 |
53 |
61 |
`${val}%`}
65 | pieSliceLabelDistance={20}
66 | holeRadius={75}
67 | radius={100}
68 | marginTop={50}
69 | marginBottom={50}
70 | marginLeft={50}
71 | marginRight={50}
72 | />
73 |
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/RangeRect/RangeRectDocs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ComponentDocs from '../../ComponentDocs';
3 | import ExampleSection from '../../ExampleSection';
4 | // autogenerated docs data containing descriptions of this component's props
5 | import propDocs from './propDocs.json';
6 |
7 | const examples = [
8 | {
9 | id: 'basic',
10 | label: 'Basic RangeRect',
11 | codeText: require('./examples/RangeRect.js.example').default,
12 | },
13 | ];
14 |
15 | export default class RangeRectExamples extends React.Component {
16 | render() {
17 | return (
18 |
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/RangeRect/examples/RangeRect.js.example:
--------------------------------------------------------------------------------
1 | const RangeRectExample = (props) => {
2 | return
3 |
7 |
19 |
;
20 | };
21 |
22 | ReactDOM.render(
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/ScatterPlot/ScatterPlotDocs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ComponentDocs from '../../ComponentDocs';
3 | import ExampleSection from '../../ExampleSection';
4 | // autogenerated docs data containing descriptions of this component's props
5 | import propDocs from './propDocs.json';
6 |
7 | const examples = [
8 | {
9 | id: 'basic',
10 | label: 'Basic ScatterPlot',
11 | codeText: require('./examples/ScatterPlot.js.example').default,
12 | },
13 | ];
14 |
15 | export default class ScatterPlotExamples extends React.Component {
16 | render() {
17 | return (
18 |
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/ScatterPlot/examples/ScatterPlot.js.example:
--------------------------------------------------------------------------------
1 | const randomScatter = [
2 | _.zip(randomWalk(20, 100), randomWalk(20, 100)),
3 | _.zip(randomWalk(3000, 10000), randomWalk(3000, 10000)),
4 | _.zip(randomWalk(50, 100), randomWalk(50, 100)),
5 | _.zip(randomWalk(100, 100), randomWalk(100, 100)),
6 | _.zip(randomWalk(200, 100), randomWalk(200, 100))
7 | ];
8 |
9 | const emojis = ["😀", "😁", "😂", "😅", "😆", "😇", "😈", "👿", "😉", "😊", "😐", "😑", "😒", "😓", "😔", "😕", "😖", "😗", "😘", "😙", "😚", "😛", "😜", "😝", "👻", "👹", "👺", "💩", "💀", "👽", "👾", "🙇", "💁", "🙅", "🙆", "🙋", "🙎", "🙍", "💆", "💇"];
10 |
11 | const ScatterPlotExample = () => {
12 | const rectangleSymbol =
17 |
18 | d[0]}
24 | y={d => d[1]}
25 | pointSymbol={rectangleSymbol}
26 | />
27 | d[0]}
30 | y={d => d[1]}
31 | pointSymbol={randomEmoji}
32 | pointOffset={[0, 2]}
33 | />
34 |
35 | d[0]}
38 | y={d => d[1]}
39 | pointSymbol={(d, i) => i}
40 | />
41 | d[0]}
44 | y={d => d[1]}
45 | pointSymbol={triangleSymbol}
46 | pointOffset={[-4, -3]}
47 | />
48 |
49 |
50 | };
51 |
52 | ReactDOM.render(
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/TreeMap/examples/AnimatedTreeMap.js.example:
--------------------------------------------------------------------------------
1 | class AnimatedTreeMapExample extends React.Component {
2 | constructor(props) {
3 | super(props);
4 |
5 | const data = {
6 | children: _.range(1, 5).map(n => ({
7 | children: _.times(n * n, m => ({
8 | size: (n +1) * (m + 1) + (100 * Math.random()),
9 | size2: (n +1) * (m + 1) + (100 * Math.random())
10 | }))
11 | }))
12 | };
13 |
14 | this.state = { getValue: "size", data };
15 | }
16 |
17 | _animateValue = () => {
18 | if(this.state.getValue === "size")
19 | this.setState({getValue: "size2"});
20 | else
21 | this.setState({getValue: "size"});
22 | };
23 |
24 | componentDidMount() {
25 | this._interval = setInterval(this._animateValue, 1000);
26 | }
27 |
28 | componentWillUnmount() {
29 | clearInterval(this._interval);
30 | }
31 |
32 | render() {
33 | const {getValue, data} = this.state;
34 |
35 | const colorScale = d3.scaleLinear()
36 | .domain([0, 65])
37 | .range(['#6b6ecf', '#8ca252'])
38 | .interpolate(d3.interpolateHcl);
39 |
40 | return
41 | ({
46 | backgroundColor: colorScale(parseInt(node.data.size)),
47 | border: '1px solid #333'
48 | })}
49 | sticky
50 | width={400}
51 | height={500}
52 | />
53 |
54 | }
55 | }
56 |
57 | ReactDOM.render(
18 | d.size}
21 | getLabel={d => d.value}
22 | nodeStyle={node => ({
23 | backgroundColor: colorScale(parseInt(node.data.size)),
24 | border: "1px solid #333"
25 | })}
26 | width={400}
27 | height={500}
28 | />
29 |
30 | );
31 | };
32 |
33 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/TreeMapNode/examples/TreeMapNode.js.example:
--------------------------------------------------------------------------------
1 | const TreeMapNodeExample = (props) => {
2 | return insert example here
;
3 | };
4 |
5 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/TreeMapNodeLabel/examples/TreeMapNodeLabel.js.example:
--------------------------------------------------------------------------------
1 | const TreeMapNodeLabelExample = (props) => {
2 | return insert example here
;
3 | };
4 |
5 | ReactDOM.render(
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/XAxis/examples/XAxis.js.example:
--------------------------------------------------------------------------------
1 | const XAxisExample = (props) => {
2 | const dateDomain = [new Date(2008, 0, 1), new Date(2017, 0, 1)];
3 | const numberDomain = [-20, 20];
4 | const categoricalDomain = ['puppies', 'kitties', 'ponies'];
5 | const smallSize = {width: 300, height: 100};
6 |
7 | return
8 |
9 |
10 |
12 |
13 |
14 |
15 |
17 |
18 |
19 |
20 |
22 |
23 |
5 |
6 |
8 |
9 | };
10 |
11 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/XAxisLabels/examples/XAxisLabels.js.example:
--------------------------------------------------------------------------------
1 | const XAxisLabelsExample = (props) => {
2 | const chartStyle = {marginBottom: '10px'};
3 |
4 | return
5 |
6 |
10 | label + "%"}
15 | position="top"
16 | distance={2}
17 | tickCount={5}
18 | labelStyle={(label) => {
19 | return {
20 | fontSize: '10px',
21 | fill: label.text === "20%" ? "red" : "black"
22 | };
23 | }
24 | } />
25 |
26 |
27 |
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/XAxisTitle/examples/XAxisTitle.js.example:
--------------------------------------------------------------------------------
1 | const XAxisTitleExample = (props) => {
2 | const xyProps = {
3 | width: 500, height: 200,
4 | xDomain: [0, 100], yDomain: [0, 100]
5 | };
6 |
7 | return
8 | ;
10 | };
11 |
12 | ReactDOM.render(
8 | ;
43 | };
44 |
45 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/XGrid/examples/XGrid.js.example:
--------------------------------------------------------------------------------
1 | const XGridExample = (props) => {
2 | const size = {width: 400, height: 300};
3 |
4 | return
5 |
6 |
9 |
10 | };
11 |
12 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/XLine/examples/XLine.js.example:
--------------------------------------------------------------------------------
1 | const XLineExample = (props) => {
2 | return
3 |
4 |
8 |
9 | };
10 |
11 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/XTicks/examples/XTicks.js.example:
--------------------------------------------------------------------------------
1 | const XTicksExample = (props) => {
2 | const size = {width: 300, height: 100};
3 | const chartStyle = {marginBottom: '10px'};
4 |
5 | return
6 |
7 | Default:
9 |
11 |
12 |
13 | Multiple sets of ticks, with options:
15 |
19 |
20 |
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/XYPlot/examples/CustomSpacing.js.example:
--------------------------------------------------------------------------------
1 | const SpacingExample = (props) => {
2 | const spacing = {spacingLeft: 10, spacingTop: 53, spacingRight: 16, spacingBottom: 9};
3 |
4 | return
5 |
6 | d}
11 | y={d => Math.sin(d*.1)}
12 | />
13 |
14 |
15 | };
16 |
17 | ReactDOM.render(
3 |
4 | d}
10 | y={d => (Math.sin(d*3) * .7) + 1.2}
11 | yEnd={d => (Math.sin(d*3) * Math.cos(d*3) * .7) + 1.2}
12 | barThickness={2}
13 | barStyle={{fill: '#3690c0'}}
14 | />
15 |
16 | d}
19 | y={d => Math.pow(Math.abs(Math.sin(d*5)), Math.abs(Math.sin(d*.25))) * 1.8}
20 | lineStyle={{stroke: '#02818a', strokeWidth: 3}}
21 | />
22 |
23 | d}
26 | y={d => Math.pow(2, (d + 2) * 1.8) * 0.1}
27 | pointSymbol={ d}
33 | y={d => -Math.abs(Math.sin(d*4) * Math.cos(d*3))}
34 | barThickness={3}
35 | barStyle={{fill: '#67a9cf'}}
36 | />
37 |
38 | d}
41 | y={d => Math.cos(d)}
42 | lineStyle={{stroke: '#ec7014', strokeWidth: 3}}
43 | />
44 |
45 | _.range(-2, 0, .1).map(j => [i, j])))}
47 | value={([i, j]) => Math.sin(i * j * 5)}
48 | x={([i, j]) => i}
49 | xEnd={([i, j]) => i + .1}
50 | y={([i, j]) => j}
51 | yEnd={([i, j]) => j + .1}
52 | colors={['#d0d1e6', '#016450']}
53 | interpolator={'lab'}
54 | />
55 |
56 | _.range(-2, -1, .1).map(j => [i, j])))}
58 | area={([i, j]) => -Math.sin(i * j * 5)}
59 | x={([i, j]) => i}
60 | xEnd={([i, j]) => i + .1}
61 | y={([i, j]) => j}
62 | yEnd={([i, j]) => j + .1}
63 | rectStyle={{fill: '#016450'}}
64 | />
65 |
66 |
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/YAxis/examples/YAxis.js.example:
--------------------------------------------------------------------------------
1 | const YAxisExample = (props) => {
2 | const dateDomain = [new Date(2008, 0, 1), new Date(2017, 0, 1)];
3 | const numberDomain = [-20, 20];
4 | const categoricalDomain = ['puppies', 'kitties', 'ponies'];
5 | const size = {width: 100, height: 300};
6 | const chartStyle = {display: 'inline-block', marginRight: '10px'};
7 |
8 | return
9 |
10 |
11 |
13 |
14 |
15 |
16 |
18 |
19 |
20 |
21 |
23 |
24 |
5 |
6 |
8 |
9 | };
10 |
11 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/YAxisLabels/examples/YAxisLabels.js.example:
--------------------------------------------------------------------------------
1 | const YAxisLabelsExample = (props) => {
2 | const chartStyle = {marginBottom: '10px'};
3 |
4 | return
5 |
6 |
10 | label + "%"}
15 | position="right"
16 | tickCount={5}
17 | labelStyle={(label) => {
18 | const is20 = Math.abs(label.value) === 20;
19 | return {
20 | fill: is20 ? "green" : "black",
21 | fontWeight: is20 ? 900 : 400
22 | };
23 | }}
24 | />
25 |
26 |
27 |
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/YAxisTitle/examples/YAxisTitle.js.example:
--------------------------------------------------------------------------------
1 | const YAxisTitleExample = (props) => {
2 | const xyProps = {
3 | width: 400, height: 300,
4 | xDomain: [0, 100], yDomain: [0, 100]
5 | };
6 |
7 | return
8 | ;
10 | };
11 |
12 | ReactDOM.render(
8 | ;
43 | };
44 |
45 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/YGrid/examples/YGrid.js.example:
--------------------------------------------------------------------------------
1 | const YGridExample = (props) => {
2 | const size = {width: 400, height: 300};
3 |
4 | return
5 |
6 |
9 |
10 | };
11 |
12 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/YLine/examples/YLine.js.example:
--------------------------------------------------------------------------------
1 | const YLineExample = (props) => {
2 | return
3 |
4 |
8 |
9 | };
10 |
11 | ReactDOM.render(
19 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
20 |
21 | {examples.map(example => {
22 | return
25 | );
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/docs/YTicks/examples/YTicks.js.example:
--------------------------------------------------------------------------------
1 | const YTicksExample = (props) => {
2 | const size = {width: 100, height: 300};
3 | const chartStyle = {display: 'inline-block', marginRight: '10px'};
4 |
5 | return
6 |
7 | Left: default params
10 |
11 |
12 |
14 |
15 |
16 |
17 |
21 |
22 |
24 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
25 |
26 | {examples.map(example => {
27 | return
30 | );
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/docs/src/docs/ZoomContainer/examples/ZoomContainer.js.example:
--------------------------------------------------------------------------------
1 | const ZoomContainerExample = (props) => {
2 | return
3 |
4 |
5 | d}
10 | y={d => Math.sin(d*.1)}
11 | />
12 |
13 |
14 |
15 | };
16 |
17 | ReactDOM.render(
49 |
59 |
60 | d} y={d => Math.sin(d * 0.1)} />
63 |
64 |
65 |
66 | [+] Zoom In
67 | [-] Zoom Out
68 |
69 |
<%= htmlWebpackPlugin.options.title %>
10 |
11 | Loading...
34 |
35 |
--------------------------------------------------------------------------------
/docs/src/lessons/GettersAndAccessors/examples/GettersAndAccessors.js.example:
--------------------------------------------------------------------------------
1 | const GettersAndAccessorsExample = (props) => {
2 | // sample data in a few different shapes
3 | const arrData = [
4 | [0, 4], [5, 20], [10, 13], [15, 19]
5 | ];
6 | const objData = [
7 | {count: 4, friends: [{id: 'a', age: 24}, {id: 'b', age: 19}]},
8 | {count: 7, friends: [{id: 'a', age: 28}, {id: 'b', age: 29}]},
9 | {count: 19, friends: [{id: 'a', age: 22}, {id: 'b', age: 44}]},
10 | {count: 22, friends: [{id: 'a', age: 41}, {id: 'b', age: 22}]},
11 | ];
12 |
13 | return
14 | d.count}
33 | getY={(d) => d.friends[1].age}
34 | lineStyle={{stroke: 'purple'}}
35 | />
36 |
37 | };
38 |
39 |
40 | ReactDOM.render(
7 | Math.sin(d*0.1)}
15 | />
16 |
17 | };
18 |
19 |
20 | ReactDOM.render(
17 | {/* Interaction lesson goes here. intersperse with examples or leave examples loop below */}
18 |
19 | {examples.map(example => {
20 | return
23 | );
24 | }
25 | }
26 |
27 | // todo: flesh out this lesson and re-do this example:
28 |
29 | const CustomSelectionRect = () => {
30 | const { scale, hoveredYVal } = this.props;
31 | return hoveredYVal ? (
32 |
54 |
60 |
65 |
66 | );
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/docs/src/lessons/Interaction/examples/Interaction.js.example:
--------------------------------------------------------------------------------
1 | // const InteractionExample = React.createClass({
2 | class InteractionExample extends React.Component {
3 | getInitialState() {
4 | return {
5 | activeValue: null
6 | }
7 | }
8 | onEnterBar(e, d) {
9 | this.setState({activeValue: d});
10 | }
11 | onLeaveBar(e, d) {
12 | this.setState({activeValue: null})
13 | }
14 | render() {
15 | const {activeValue} = this.state;
16 |
17 | return
18 | {_.isNumber(activeValue) ?
19 |
20 | {activeValue.toFixed(2)}
21 |
:
22 |
Hover over the chart to show values
23 | }
24 |
25 | Math.sin(d / 10) * 10}
29 | getXEnd={d => Math.sin((d + 1) / 10) * 10}
30 | getY={d => Math.cos(d / (Math.PI))}
31 | onMouseEnterBar={this.onEnterBar}
32 | onMouseLeaveBar={this.onLeaveBar}
33 | />
34 | ;
35 |
17 |
18 | To get started using Reactochart, first install it using{' '}
19 | npm:
20 |
21 | npm install --save reactochart
22 |
23 | Then you can import individual Reactochart components:
24 |
25 | import LineChart from 'reactochart/LineChart'
26 |
27 | The examples in this documentation will omit these imports to save
28 | space, so make sure you remember to include them in your code to get
29 | things working. For example, the example below requires importing the
30 | following components:
31 |
32 |
33 | import XYPlot from 'reactochart/XYPlot';
34 |
41 |
42 | If you prefer, you can import all of Reactochart at once, though this
43 | may hinder some optimizations, such as webpack{' '}
44 | tree-shaking:
45 |
46 |
47 | import {'{'}XYPlot, XAxis, YAxis, LineChart{'}'} from 'reactochart';
48 |
52 |
53 | And now, here's our first line chart showing the basic usage of these
54 | components. In this and all future examples, the code on the left side
55 | is editable and will update the preview on the right - so experiment
56 | and see for yourself how things work!
57 |
58 |
59 | {examples.map(example => {
60 | return
63 | );
64 | }
65 | }
66 |
--------------------------------------------------------------------------------
/docs/src/lessons/QuickStart/examples/QuickStart.js.example:
--------------------------------------------------------------------------------
1 | const QuickStartExample = (props) => {
2 | return
3 | d.x}
13 | y={d => d.y}
14 | />
15 |
16 | };
17 |
18 | ReactDOM.render(
9 | d.x}
12 | y={d => d.y}
13 | />
14 |
15 | };
16 |
17 | ReactDOM.render(
9 | d.x}
14 | y={d => d.y}
15 | />
16 |
17 | };
18 |
19 | ReactDOM.render(
9 | d.x}
14 | y={d => d.y}
15 | barThickness={35}
16 | barStyle={{fill: '#888'}}
17 | />
18 | d.x}
21 | y={d => d.y}
22 | lineStyle={{stroke: 'royalblue', strokeWidth: 5}}
23 | />
24 | d.x}
27 | y={d => d.z}
28 | lineStyle={{stroke: 'coral', strokeWidth: 3}}
29 | />
30 |
31 | };
32 |
33 | ReactDOM.render(
19 |
20 | {/* documentation goes here. intersperse docs with examples or leave examples loop below */}
21 |
22 | {examples.map(example => {
23 | return ;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/docs/src/templates/ComponentExample.js.template:
--------------------------------------------------------------------------------
1 | const ${componentName}Example = (props) => {
2 | return insert example here
;
3 | };
4 |
5 | ReactDOM.render(<${componentName}Example />, mountNode);
6 |
--------------------------------------------------------------------------------
/docs/src/templates/Lesson.js.template:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import Lesson from '../../Lesson';
4 | import ExampleSection from '../../ExampleSection';
5 |
6 | const examples = [
7 | {
8 | id: "basic",
9 | label: "${name} Example",
10 | codeText: require('./examples/${componentName}.js.example').default,
11 | },
12 | ];
13 |
14 | export default class ${componentName}Lesson extends React.Component {
15 | render() {
16 | return
17 |
18 | {/* ${name} lesson goes here. intersperse with examples or leave examples loop below */}
19 |
20 | {examples.map(example => {
21 | return ;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/docs/styles/main.less:
--------------------------------------------------------------------------------
1 | @import "../../styles/charts.less";
2 |
3 | body {
4 | //font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
5 | //margin: 0;
6 | //padding: 0;
7 | //background: #f0f0f0;
8 | //color: #0f0f0f;
9 |
10 | #container {
11 | //margin: 10px;
12 | }
13 | }
14 |
15 | .sidebar-nav {
16 | h1,
17 | h2,
18 | h3,
19 | h4,
20 | h5,
21 | h6 {
22 | color: #f8f8f8;
23 | text-transform: uppercase;
24 | }
25 | h3 {
26 | font-size: 16px;
27 | }
28 | h4 {
29 | font-size: 14px;
30 | }
31 | }
32 |
33 | .example {
34 | margin-bottom: 2em;
35 | }
36 |
37 | .component-docs {
38 | padding: 0 30px;
39 | }
40 | .prop-docs {
41 | background-color: #efefef;
42 | padding: 15px;
43 |
44 | .prop-description,
45 | .prop-default {
46 | display: block;
47 | margin-left: 2em;
48 | font-size: 0.85em;
49 | }
50 | }
51 |
52 | .example-section {
53 | display: inline-block;
54 | margin: 10px;
55 |
56 | &.example-section-visible {
57 | display: block;
58 | }
59 |
60 | .example-section-button {
61 | display: inline-block;
62 | //margin: 10px;
63 | padding: 10px 20px;
64 | font-size: 20pt;
65 | font-weight: bold;
66 | background: #cccccc;
67 | cursor: pointer;
68 | border-radius: 5px;
69 |
70 | .example-arrow {
71 | color: #888;
72 | }
73 | &.active {
74 | background-color: #4cba6f;
75 | .example-arrow {
76 | color: #0f0f0f;
77 | }
78 | }
79 | }
80 |
81 | .example-section-content {
82 | margin: 10px 20px;
83 | }
84 | }
85 |
86 | .playground {
87 | display: flex;
88 | flex-wrap: wrap;
89 |
90 | .playgroundCode,
91 | .playgroundPreview {
92 | border: 1px solid #efefef;
93 | border-radius: 3px;
94 | flex-basis: 150px;
95 |
96 | &:before {
97 | display: block;
98 | text-align: center;
99 | color: #616467;
100 | background-color: #f8f8f8;
101 | border-bottom: 1px solid #efefef;
102 | text-transform: uppercase;
103 | letter-spacing: 1px;
104 | font-size: 14px;
105 | line-height: 28px;
106 | }
107 | }
108 |
109 | .playgroundCode {
110 | margin-right: 8px;
111 | flex-grow: 0.6;
112 |
113 | &:before {
114 | content: "Editable Source";
115 | }
116 | .CodeMirror {
117 | font-size: 10pt;
118 | font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
119 | }
120 | }
121 |
122 | .playgroundPreview {
123 | margin-left: 8px;
124 | //text-align: center;
125 | flex-grow: 0.4;
126 |
127 | &:before {
128 | content: "Live Preview";
129 | }
130 | .previewArea {
131 | padding: 8px 6px;
132 | }
133 | }
134 | }
135 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | Redirect
4 | /tests/jsdom/setup.js'],
8 | setupFilesAfterEnv: ['./node_modules/jest-enzyme/lib/index.js'],
9 | transformIgnorePatterns: [
10 | `[/\\\\]node_modules[/\\\\]((?!(?<=[/\\\\])(d3-?|${dontTranspile})).)+\\.(js|jsx|ts|tsx)$`,
11 | ],
12 | };
13 |
14 | module.exports = config;
15 |
--------------------------------------------------------------------------------
/prettier.config.js:
--------------------------------------------------------------------------------
1 | module.exports = require('@spotify/web-scripts/config/prettier.config');
2 |
--------------------------------------------------------------------------------
/scripts/clean.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const sh = require('shelljs');
3 |
4 | const { fileExists, dirExists } = require('./utils');
5 |
6 | const srcContents = sh.ls('src');
7 |
8 | // We don't want to commit built files, so it is useful to have a `clean` script which deletes them if they exist.
9 | // However, Reactochart is built in the root directory
10 | // (so that modules may be required with eg. `require('reactochart/LineChart')`).
11 | // This makes cleanup harder than simply deleting a `build` directory.
12 | // Instead this looks for any files in the root directory which match the name of a file in the `src` directory,
13 | // and deletes them if they exist.
14 | // Sounds dangerous, but any files in root which share a name with src would have been overwritten by the build anyway.
15 |
16 | srcContents.forEach(fileOrDir => {
17 | if (fileExists(`src/${fileOrDir}`) && fileExists(`./${fileOrDir}`)) {
18 | console.log(`deleting file ./${fileOrDir}`);
19 | sh.rm(`./${fileOrDir}`);
20 | } else if (dirExists(`src/${fileOrDir}`) && dirExists(fileOrDir)) {
21 | console.log(`deleting directory ./${fileOrDir}`);
22 | sh.rm('-rf', `./${fileOrDir}`);
23 | }
24 | // check for source maps too
25 | if (fileExists(`./${fileOrDir}.map`)) {
26 | console.log(`deleting file ./${fileOrDir}.map`);
27 | sh.rm(`./${fileOrDir}.map`);
28 | }
29 | });
30 |
31 | // Clean compiled css file
32 | if (fileExists('./styles.css')) {
33 | sh.rm('./styles.css');
34 | }
35 |
--------------------------------------------------------------------------------
/scripts/makeLesson.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const sh = require('shelljs');
3 | const _ = require('lodash');
4 |
5 | const {
6 | isUpperCase,
7 | fileExists,
8 | dirExists,
9 | ensureDir,
10 | fileNameFromPath,
11 | stripFileExtension,
12 | } = require('./utils');
13 |
14 | const lessonsDirPath = `${__dirname}/../docs/src/lessons`;
15 | const lessonTemplatePath = `${__dirname}/../docs/src/templates/Lesson.js.template`;
16 | const exampleTemplatePath = `${__dirname}/../docs/src/templates/ComponentExample.js.template`;
17 |
18 | if (process.argv.length <= 2) {
19 | console.log(`Usage: ${__filename} LESSON_NAME`);
20 | process.exit(-1);
21 | }
22 |
23 | const lessonName = process.argv[2];
24 | console.log(lessonName);
25 |
26 | const componentName = lessonName
27 | .split(' ')
28 | .map(_.capitalize)
29 | .join('');
30 | console.log('componentName', componentName);
31 | const lessonDirPath = `${lessonsDirPath}/${componentName}`;
32 | const lessonComponentPath = `${lessonDirPath}/${componentName}Lesson.js`;
33 |
34 | ensureDir(lessonsDirPath);
35 | ensureDir(lessonDirPath);
36 | if (!fileExists(lessonComponentPath)) {
37 | // use template file to generate a stub example page for this component
38 | const lessonTemplate = _.template(sh.cat(lessonTemplatePath).toString());
39 | const lessonStub = lessonTemplate({ name: lessonName, componentName });
40 | fs.writeFile(lessonComponentPath, lessonStub, err => {
41 | if (err) throw err;
42 | console.log('created stub lesson component:', lessonComponentPath);
43 | });
44 |
45 | const examplesDirPath = `${lessonDirPath}/examples`;
46 | const examplePath = `${examplesDirPath}/${componentName}.js.example`;
47 |
48 | // use template to generate stub example file, to be used for live preview (using component-playground)
49 | const exampleTemplate = _.template(sh.cat(exampleTemplatePath).toString());
50 | const exampleStub = exampleTemplate({ componentName });
51 | ensureDir(examplesDirPath);
52 | fs.writeFile(examplePath, exampleStub, err => {
53 | if (err) throw err;
54 | console.log('created stub example:', examplePath);
55 | });
56 | }
57 |
--------------------------------------------------------------------------------
/scripts/utils.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs');
2 | const sh = require('shelljs');
3 | const _ = require('lodash');
4 |
5 | function isUpperCase(letter) {
6 | return letter.toUpperCase() === letter;
7 | }
8 | function fileExists(path) {
9 | return sh.test('-f', path);
10 | }
11 | function dirExists(path) {
12 | return sh.test('-d', path);
13 | }
14 | function ensureDir(path) {
15 | if (!dirExists(path)) sh.mkdir('-p', path);
16 | }
17 | function fileNameFromPath(path) {
18 | return _.last(path.split('/'));
19 | }
20 | function stripFileExtension(fileName) {
21 | return _.dropRight(fileName.split('.')).join('.');
22 | }
23 |
24 | module.exports = {
25 | isUpperCase,
26 | fileExists,
27 | dirExists,
28 | ensureDir,
29 | fileNameFromPath,
30 | stripFileExtension,
31 | };
32 |
--------------------------------------------------------------------------------
/src/MeasuredValueLabel.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import defaults from 'lodash/defaults';
3 | import omit from 'lodash/omit';
4 | import identity from 'lodash/identity';
5 | import measureText from './utils/measureText';
6 | import PropTypes from 'prop-types';
7 |
8 | export default class MeasuredValueLabel extends React.Component {
9 | static propTypes = {
10 | value: PropTypes.any,
11 | format: PropTypes.func,
12 | children: PropTypes.any,
13 | };
14 |
15 | static defaultProps = {
16 | format: identity,
17 | style: {
18 | fontFamily: 'Helvetica, sans-serif',
19 | fontSize: '20px',
20 | lineHeight: 1,
21 | textAnchor: 'middle',
22 | },
23 | };
24 |
25 | static getLabel(props) {
26 | const { value, format } = props;
27 | const style = defaults(props.style, MeasuredValueLabel.defaultProps.style);
28 | const labelStr = format(value);
29 | const labelWithStyle = Object.assign({ text: labelStr }, style);
30 | const measured = measureText(labelWithStyle);
31 |
32 | return {
33 | value: props.value,
34 | text: measured.text,
35 | height: measured.height.value,
36 | width: measured.width.value,
37 | };
38 | }
39 |
40 | render() {
41 | const { value, format } = this.props;
42 | const passedProps = omit(this.props, ['value', 'format']);
43 |
44 | return (
45 |
46 | {React.Children.count(this.props.children)
47 | ? this.props.children
48 | : format(value)}
49 |
50 | );
51 | }
52 | }
53 |
--------------------------------------------------------------------------------
/src/TreeMapNode.js:
--------------------------------------------------------------------------------
1 | import get from 'lodash/get';
2 | import kebabCase from 'lodash/kebabCase';
3 | import isFunction from 'lodash/isFunction';
4 | import isObject from 'lodash/isObject';
5 |
6 | import PropTypes from 'prop-types';
7 | import React from 'react';
8 | import * as CustomPropTypes from './utils/CustomPropTypes';
9 |
10 | const TreeMapNode = props => {
11 | const {
12 | node,
13 | getLabel,
14 | nodeStyle,
15 | labelStyle,
16 | minLabelWidth,
17 | minLabelHeight,
18 | NodeLabelComponent,
19 | parentNames,
20 | } = props;
21 | const { depth, parent, x0, y0, x1, y1 } = node;
22 |
23 | const parentName = get(parent, 'data.name');
24 | const nodeGroupClass = parent
25 | ? `node-group-${kebabCase(parentName)} node-group-i-${parentNames.indexOf(
26 | parentName,
27 | )}`
28 | : '';
29 | const className = `rct-tree-map-node node-depth-${depth} ${nodeGroupClass}`;
30 |
31 | const style = {
32 | position: 'absolute',
33 | width: x1 - x0,
34 | height: y1 - y0,
35 | top: y0,
36 | left: x0,
37 | transition: 'all .2s',
38 | };
39 | const customStyle = isFunction(nodeStyle)
40 | ? nodeStyle(node)
41 | : isObject(nodeStyle)
42 | ? nodeStyle
43 | : {};
44 | Object.assign(style, customStyle);
45 |
46 | const handlers = [
47 | 'onClick',
48 | 'onMouseEnter',
49 | 'onMouseLeave',
50 | 'onMouseMove',
51 | ].reduce((acc, eventName) => {
52 | const handler = props[`${eventName}Node`];
53 | if (handler) acc[eventName] = handler.bind(null, node);
54 | return acc;
55 | }, {});
56 |
57 | return (
58 |
59 | {x1 - x0 > minLabelWidth && y1 - y0 > minLabelHeight ? ( // show label if node is big enough
60 |
63 | );
64 | };
65 |
66 | TreeMapNode.propTypes = {
67 | node: PropTypes.shape({
68 | parent: PropTypes.object,
69 | children: PropTypes.array,
70 | value: PropTypes.number,
71 | depth: PropTypes.number,
72 | x: PropTypes.number,
73 | y: PropTypes.number,
74 | dx: PropTypes.number,
75 | dy: PropTypes.number,
76 | x0: PropTypes.number,
77 | y0: PropTypes.number,
78 | x1: PropTypes.number,
79 | y1: PropTypes.number,
80 | }),
81 | nodeStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
82 | minLabelWidth: PropTypes.number,
83 | minLabelHeight: PropTypes.number,
84 | getLabel: CustomPropTypes.getter,
85 | labelStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
86 | NodeLabelComponent: PropTypes.func,
87 | parentNames: PropTypes.arrayOf(PropTypes.string),
88 | };
89 |
90 | TreeMapNode.defaultProps = {
91 | minLabelWidth: 0,
92 | minLabelHeight: 0,
93 | };
94 |
95 | export default TreeMapNode;
96 |
--------------------------------------------------------------------------------
/src/TreeMapNodeLabel.js:
--------------------------------------------------------------------------------
1 | import isFunction from 'lodash/isFunction';
2 | import isObject from 'lodash/isObject';
3 | import PropTypes from 'prop-types';
4 | import React from 'react';
5 | import * as CustomPropTypes from './utils/CustomPropTypes';
6 | import { makeAccessor } from './utils/Data';
7 |
8 | const TreeMapNodeLabel = props => {
9 | const { node, getLabel, labelStyle } = props;
10 | const { x1, x0 } = node;
11 | const style = { width: x1 - x0 };
12 | const customStyle = isFunction(labelStyle)
13 | ? labelStyle(node)
14 | : isObject(labelStyle)
15 | ? labelStyle
16 | : {};
17 | Object.assign(style, customStyle);
18 |
19 | return (
20 |
21 | {makeAccessor(getLabel)(node)}
22 |
23 | );
24 | };
25 |
26 | TreeMapNodeLabel.propTypes = {
27 | node: PropTypes.object,
28 | getLabel: CustomPropTypes.getter,
29 | labelStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
30 | minLabelWidth: PropTypes.number,
31 | minLabelHeight: PropTypes.number,
32 | };
33 |
34 | export default TreeMapNodeLabel;
35 |
--------------------------------------------------------------------------------
/src/XGrid.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import defaults from 'lodash/defaults';
3 | import PropTypes from 'prop-types';
4 |
5 | import { getScaleTicks, getTickDomain } from './utils/Scale';
6 | import XLine from './XLine';
7 |
8 | export default class XGrid extends React.Component {
9 | static propTypes = {
10 | width: PropTypes.number,
11 | height: PropTypes.number,
12 | xScale: PropTypes.func,
13 | spacingTop: PropTypes.number,
14 | spacingBottom: PropTypes.number,
15 | spacingLeft: PropTypes.number,
16 | spacingRight: PropTypes.number,
17 | nice: PropTypes.bool,
18 | ticks: PropTypes.array,
19 | tickCount: PropTypes.number,
20 | lineClassName: PropTypes.string,
21 | lineStyle: PropTypes.object,
22 | };
23 | static defaultProps = {
24 | nice: true,
25 | lineStyle: {},
26 | };
27 |
28 | static getTickDomain(props) {
29 | if (!props.xScale) return;
30 | const propsWithDefaults = defaults({}, props, XGrid.defaultProps);
31 | return {
32 | xTickDomain: getTickDomain(propsWithDefaults.xScale, propsWithDefaults),
33 | };
34 | }
35 |
36 | render() {
37 | const {
38 | height,
39 | xScale,
40 | tickCount,
41 | lineClassName,
42 | lineStyle,
43 | spacingTop,
44 | spacingBottom,
45 | spacingLeft,
46 | spacingRight,
47 | } = this.props;
48 | const ticks = this.props.ticks || getScaleTicks(xScale, null, tickCount);
49 | const className = `rct-chart-grid-line ${lineClassName || ''}`;
50 |
51 | return (
52 |
53 | {ticks.map((tick, i) => {
54 | return (
55 |
72 | );
73 | }
74 | }
75 |
--------------------------------------------------------------------------------
/src/XLine.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 |
4 | /**
5 | * `XLine` is a vertical line rendered on the x axis
6 | */
7 | export default class XLine extends React.Component {
8 | static propTypes = {
9 | /**
10 | * Height of chart - provided by XYPlot
11 | */
12 | height: PropTypes.number,
13 | /**
14 | * D3 scale for X axis - provided by XYPlot
15 | */
16 | xScale: PropTypes.func,
17 | value: PropTypes.oneOfType([
18 | PropTypes.number,
19 | PropTypes.string,
20 | PropTypes.instanceOf(Date),
21 | ]).isRequired,
22 | /**
23 | * D3 scale for Y axis - provided by XYPlot
24 | */
25 | yScale: PropTypes.func,
26 | yLimit: PropTypes.oneOfType([
27 | PropTypes.number,
28 | PropTypes.string,
29 | PropTypes.instanceOf(Date),
30 | ]),
31 | /**
32 | * The Y domain of the data as an array - provided by XYPlot
33 | */
34 | yDomain: PropTypes.array,
35 | /**
36 | * Spacing top - provided by XYPlot
37 | */
38 | spacingTop: PropTypes.number,
39 | /**
40 | * Spacing bottom - provided by XYPlot
41 | */
42 | spacingBottom: PropTypes.number,
43 | /**
44 | * Inline style object to be applied to the line
45 | */
46 | style: PropTypes.object,
47 | /**
48 | * Class attribute to be applied to the line
49 | */
50 | className: PropTypes.string,
51 | };
52 | static defaultProps = {
53 | style: {},
54 | className: '',
55 | spacingTop: 0,
56 | spacingBottom: 0,
57 | };
58 |
59 | render() {
60 | const {
61 | xScale,
62 | value,
63 | yScale,
64 | yLimit,
65 | yDomain,
66 | height,
67 | style,
68 | spacingTop,
69 | spacingBottom,
70 | } = this.props;
71 | const className = `rct-chart-line-x ${this.props.className}`;
72 | const lineX = xScale(value);
73 |
74 | let y1 = -spacingTop;
75 | let y2 = height + spacingBottom;
76 |
77 | if (typeof yLimit !== 'undefined') {
78 | y1 = yScale(yDomain[0]) + spacingBottom;
79 | y2 = yScale(yLimit);
80 | }
81 |
82 | return (
83 |
51 | {ticks.map((tick, i) => {
52 | return (
53 |
70 | );
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/src/YLine.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 | import React from 'react';
3 |
4 | /**
5 | * `YLine` is a horizontal line rendered on the y axis
6 | */
7 | export default class YLine extends React.Component {
8 | static propTypes = {
9 | /**
10 | * D3 scale for Y axis - provided by XYPlot
11 | */
12 | yScale: PropTypes.func,
13 | /**
14 | * Width of chart - provided by XYPlot.
15 | */
16 | width: PropTypes.number,
17 | value: PropTypes.oneOfType([
18 | PropTypes.number,
19 | PropTypes.string,
20 | PropTypes.instanceOf(Date),
21 | ]).isRequired,
22 | /**
23 | * D3 scale for X axis - provided by XYPlot
24 | */
25 | xScale: PropTypes.func,
26 | xLimit: PropTypes.oneOfType([
27 | PropTypes.number,
28 | PropTypes.string,
29 | PropTypes.instanceOf(Date),
30 | ]),
31 | /**
32 | * Spacing left - provided by XYPlot
33 | */
34 | spacingLeft: PropTypes.number,
35 | /**
36 | * Spacing right - provided by XYPlot
37 | */
38 | spacingRight: PropTypes.number,
39 | /**
40 | * Inline style object to be applied to the line
41 | */
42 | style: PropTypes.object,
43 | /**
44 | * Class attribute to be applied to the line
45 | */
46 | className: PropTypes.string,
47 | };
48 | static defaultProps = {
49 | style: {},
50 | className: '',
51 | spacingLeft: 0,
52 | spacingRight: 0,
53 | };
54 |
55 | render() {
56 | const {
57 | width,
58 | yScale,
59 | value,
60 | xScale,
61 | xLimit,
62 | spacingLeft,
63 | spacingRight,
64 | style,
65 | } = this.props;
66 | const className = `rct-chart-line-y ${this.props.className || ''}`;
67 | const lineY = yScale(value);
68 | const lineX =
69 | typeof xLimit === 'undefined' ? width + spacingRight : xScale(xLimit);
70 |
71 | return (
72 | Mocha Spec Runner
6 |
10 |
11 |
12 |
13 |
14 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/tests/browser/spec/XAxisTitle.spec.js:
--------------------------------------------------------------------------------
1 | import chai, { expect } from 'chai';
2 | import { mount } from 'enzyme';
3 | import React from 'react';
4 | import sinonChai from 'sinon-chai';
5 | import { XAxisTitle, XYPlot } from 'src/index.js';
6 | chai.use(sinonChai);
7 |
8 | // XAxisTitle tests must run in browser since XAxisLabels uses measureText
9 |
10 | describe('XAxisTitle', () => {
11 | it('Check how many labels are created and where', () => {
12 | const xyProps = {
13 | width: 500,
14 | height: 360,
15 | xDomain: [0, 100],
16 | yDomain: [0, 100],
17 | };
18 |
19 | const tree = (
20 |
21 |
39 | );
40 | const rendered = mount(tree).find(XAxisTitle);
41 | expect(rendered.at(0).props().alignment).to.equal('right');
42 | expect(
43 | rendered
44 | .at(0)
45 | .getDOMNode()
46 | .getAttribute('transform'),
47 | ).to.equal('translate(500,220)');
48 | expect(rendered.at(1).props().placement).to.equal('above');
49 | expect(
50 | rendered
51 | .at(1)
52 | .getDOMNode()
53 | .getAttribute('transform'),
54 | ).to.equal('translate(0,210)');
55 | expect(rendered.at(2).props().rotate).to.equal(true);
56 | expect(
57 | rendered
58 | .at(2)
59 | .getDOMNode()
60 | .getAttribute('transform'),
61 | ).to.equal('translate(250,220)');
62 | expect(rendered.at(3).props().rotate).to.equal(true);
63 | expect(
64 | rendered
65 | .at(3)
66 | .find('text')
67 | .first()
68 | .getDOMNode()
69 | .getAttribute('transform'),
70 | ).to.equal('rotate(-90)');
71 | expect(
72 | rendered
73 | .at(4)
74 | .getDOMNode()
75 | .getAttribute('transform'),
76 | ).to.equal('translate(0,-5)');
77 | expect(
78 | rendered
79 | .at(5)
80 | .getDOMNode()
81 | .getAttribute('transform'),
82 | ).to.equal('translate(0,5)');
83 | expect(
84 | rendered
85 | .at(6)
86 | .getDOMNode()
87 | .getAttribute('transform'),
88 | ).to.equal('translate(0,-5)');
89 | expect(
90 | rendered
91 | .at(6)
92 | .find('text')
93 | .first()
94 | .getDOMNode()
95 | .getAttribute('transform'),
96 | ).to.equal('rotate(-90)');
97 | });
98 | });
99 |
--------------------------------------------------------------------------------
/tests/browser/webpack.config.test.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const HtmlPlugin = require('html-webpack-plugin');
4 | const { CleanWebpackPlugin } = require('clean-webpack-plugin');
5 |
6 | module.exports = {
7 | mode: 'development',
8 | context: __dirname,
9 | entry: [path.join(__dirname, 'index.js')],
10 | output: {
11 | path: path.join(__dirname, 'build'),
12 | filename: 'bundle.[hash].js',
13 | },
14 | devtool: 'source-map',
15 | plugins: [
16 | new webpack.NoEmitOnErrorsPlugin(),
17 | new HtmlPlugin({
18 | title: 'Reactochart Tests',
19 | template: path.join(__dirname, 'index_html.ejs'),
20 | }),
21 | new CleanWebpackPlugin(),
22 | ],
23 | resolve: {
24 | extensions: ['.js', '.jsx'],
25 | modules: ['node_modules', path.resolve(__dirname, '../..')],
26 | },
27 | module: {
28 | rules: [
29 | {
30 | test: /\.jsx?$/,
31 | exclude: /node_modules/,
32 | use: 'babel-loader',
33 | },
34 | {
35 | test: /\.less?$/,
36 | use: [
37 | { loader: 'style-loader' },
38 | { loader: 'css-loader' },
39 | { loader: 'less-loader' },
40 | ],
41 | }
42 | ],
43 | },
44 | // https://github.com/airbnb/enzyme/issues/503
45 | externals: {
46 | jsdom: 'window',
47 | cheerio: 'window',
48 | 'react/lib/ExecutionEnvironment': true,
49 | 'react/addons': true,
50 | 'react/lib/ReactContext': 'window',
51 | },
52 | };
53 |
--------------------------------------------------------------------------------
/tests/jsdom/setup.js:
--------------------------------------------------------------------------------
1 | import "jest-canvas-mock";
2 |
3 | // see https://github.com/airbnb/enzyme/blob/master/docs/guides/jsdom.md
4 | const { JSDOM } = require('jsdom');
5 |
6 | const jsdom = new JSDOM('', {
7 | url: 'http://localhost',
8 | });
9 | const { window } = jsdom;
10 |
11 | function copyProps(src, target) {
12 | Object.defineProperties(target, {
13 | ...Object.getOwnPropertyDescriptors(src),
14 | ...Object.getOwnPropertyDescriptors(target),
15 | });
16 | }
17 |
18 | global.window = window;
19 | global.document = window.document;
20 | global.navigator = {
21 | userAgent: 'node.js',
22 | };
23 | global.requestAnimationFrame = function(callback) {
24 | return setTimeout(callback, 0);
25 | };
26 | global.cancelAnimationFrame = function(id) {
27 | clearTimeout(id);
28 | };
29 | copyProps(window, global);
30 |
31 | // hack to deal with https://github.com/airbnb/enzyme/issues/888
32 | // see also https://github.com/chaijs/type-detect/issues/98
33 | global.HTMLElement = window.HTMLElement;
34 | global.SVGElement = function() {};
35 |
36 | const enzyme = require('enzyme');
37 | const adapter = require('enzyme-adapter-react-16');
38 |
39 | enzyme.configure({ adapter: new adapter() });
40 |
--------------------------------------------------------------------------------
/tests/jsdom/spec/AreaHeatmap.spec.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { scaleLinear } from 'd3-scale';
3 | import _ from 'lodash';
4 | import { mount } from 'enzyme';
5 |
6 | import { AreaHeatmap } from '../../../src';
7 |
8 | describe('AreaHeatmap', () => {
9 | const gridData = _.range(30).map(m => {
10 | return _.range(30).map(n => {
11 | return {
12 | x: n,
13 | xEnd: n + 1,
14 | y: m,
15 | yEnd: m + 1,
16 | value: Math.sin(m * n * 0.01),
17 | };
18 | });
19 | });
20 | const data = _.flatten(gridData);
21 | const props = {
22 | data,
23 | area: d => d.value,
24 | x: d => d.x,
25 | xEnd: d => d.xEnd,
26 | y: d => d.y,
27 | yEnd: d => d.yEnd,
28 | rectClassName: 'rect-class',
29 | xScale: scaleLinear()
30 | .domain([-1, 0, 1])
31 | .range([0, 30]),
32 | yScale: scaleLinear()
33 | .domain([0, 10])
34 | .range([0, 30]),
35 | onMouseMove: jest.fn(),
36 | onMouseEnter: jest.fn(),
37 | onMouseLeave: jest.fn(),
38 | rectStyle: { fill: 'rebeccapurple' },
39 | };
40 |
41 | it('renders a color heatmap', () => {
42 | const chart = mount( d.val }]}
63 | />,
64 | );
65 | const rects = chart.find('rect');
66 |
67 | expect(rects.at(data1.length - 1).props().x).not.toEqual(
68 | rects.at(data1.length - 2).props().x,
69 | );
70 | });
71 |
72 | it('renders the proper amount of rectangles given two datasets', () => {
73 | const chart = mount(
74 | d.val },
79 | ]}
80 | />,
81 | );
82 | const rects = chart.find('rect');
83 |
84 | expect(rects).toHaveLength(5);
85 | });
86 |
87 | it('triggers an action on key press', () => {
88 | const chart = mount( 'a'} />);
31 | points = chart.find('text');
32 |
33 | points.forEach(point => {
34 | expect(point.props().className).toContain(props.pointClassName);
35 | expect(point.props().style).toEqual({
36 | textAnchor: 'middle',
37 | dominantBaseline: 'central',
38 | ...props.pointStyle,
39 | });
40 | });
41 | });
42 |
43 | it('renders correct amount of points in correct area', () => {
44 | const chart = mount(