├── .babelrc
├── .gitignore
├── .npmignore
├── README.md
├── __tests__
    ├── axis
    │   ├── xaxis-test.js
    │   └── yaxis-test.js
    ├── container
    │   ├── svg-test.js
    │   ├── svg_change.js
    │   ├── title-test.js
    │   └── title_change.js
    ├── data
    │   ├── garbage.csv
    │   ├── state_age.json
    │   └── user_sample.json
    ├── label
    │   └── label-test.js
    └── legend
    │   └── legend-test.js
├── devServer.js
├── docs
    ├── axis.md
    ├── container.md
    ├── label.md
    ├── legend.md
    ├── svg.md
    ├── title.md
    ├── xaxis.md
    ├── xgrid.md
    ├── yaxis.md
    └── ygrid.md
├── example
    ├── container.js
    ├── index.html
    ├── index.js
    └── src
    │   ├── animate_container.jsx
    │   ├── animate_xaxis.jsx
    │   ├── blank_chart.jsx
    │   ├── components.jsx
    │   ├── container.jsx
    │   ├── css
    │       └── container_update.css
    │   ├── data
    │       ├── garbage.csv
    │       ├── state_age.json
    │       └── user_sample.json
    │   ├── grid.jsx
    │   ├── label.jsx
    │   ├── legend.jsx
    │   ├── xaxis.jsx
    │   ├── xaxis_click.jsx
    │   └── yaxis.jsx
├── karma.conf.js
├── package.json
├── react-d3-core.js
├── react-d3-core.min.js
├── src
    ├── axis
    │   ├── axis.jsx
    │   ├── label.jsx
    │   ├── xaxis.jsx
    │   └── yaxis.jsx
    ├── chartContainer.jsx
    ├── commonProps.jsx
    ├── container
    │   ├── svg.jsx
    │   └── title.jsx
    ├── grid
    │   ├── grid.jsx
    │   ├── xgrid.jsx
    │   └── ygrid.jsx
    ├── index.jsx
    ├── legend.jsx
    └── utils
    │   ├── scale.jsx
    │   ├── xDomain.jsx
    │   └── yDomain.jsx
├── tests.webpack.js
├── webpack.config.js
└── webpack.prod.config.js


/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": ["react", "es2015", "stage-0"],
 3 |   "env": {
 4 |     "development": {
 5 |       "presets": ["react-hmre"],
 6 |       "plugins": [
 7 |         "add-module-exports"
 8 |       ]
 9 |     }
10 |   }
11 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist/
4 | example/dist
5 | example/dist_es5
6 | npm-debug.log
7 | lib
8 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | example
2 | __tests__
3 | src
4 | docs
5 | react-d3-core*
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-d3-core
  2 | 
  3 | [![Dependency Status](https://gemnasium.com/react-d3/react-d3-core.svg)](https://gemnasium.com/react-d3/react-d3-core)
  4 | 
  5 | react d3 core components for reusability.
  6 | 
  7 | `react-d3-core` is includes the core components of the `react-d3` projects. The reason we extract the main component here, is because of reusability. For instance, we use grid, axes over and over again in line chart, area chart, bar chart ... etc. If we move these system a little bit forward to a react component we can declare it more easily in the future.  
  8 | 
  9 | Such as we need xaxis, yaxis, grid in a new chart.  We can install `react-d3-core` and import them.
 10 | 
 11 | 
 12 | ## Install
 13 | 
 14 | ```
 15 | npm install react-d3-core
 16 | ```
 17 | 
 18 | ## LIVE DEMO
 19 | 
 20 | http://reactd3.org/docs/core
 21 | 
 22 | 
 23 | ## Quick example
 24 | 
 25 | #### With webpack
 26 | 
 27 | - Legend
 28 | 
 29 | ```js
 30 | "use strict";
 31 | 
 32 | var React = require('react');
 33 | var ReactDOM = require('react-dom');
 34 | var Legend = require('../../lib/index').Legend;
 35 | 
 36 | (function() {
 37 |   var chartSeries = [
 38 |       {
 39 |         field: 'Under 5 Years'
 40 |       },
 41 |       {
 42 |         field: '5 to 13 Years'
 43 |       }
 44 |     ]
 45 | 
 46 |   ReactDOM.render(
 47 |     <div>
 48 |       <svg width= {960} height= {500}>
 49 |         <rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
 50 |       </svg>
 51 |       <Legend
 52 |         width= {960}
 53 |         chartSeries = {chartSeries}
 54 |       />
 55 |     </div>
 56 |   , document.getElementById('blank-legend')
 57 |   )
 58 | })()
 59 | ```
 60 | 
 61 | 
 62 | #### In HTML (without build tools)
 63 | 
 64 | Clone code `react-d3-core.js` or minify js `react-d3-core.min.js` and include the script in your HTML.
 65 | 
 66 | You'll also need `react`, `react-dom`, `d3`
 67 | 
 68 | - Legend
 69 | 
 70 | ```html
 71 | <!DOCTYPE html>
 72 | <html>
 73 |   <head>
 74 |     <title>
 75 |       Line Chart example
 76 |     </title>
 77 |   </head>
 78 |   <body>
 79 |     <div id="blank-legend"></div>
 80 |     <script src="https://fb.me/react-0.14.2.js"></script>
 81 |     <script src="https://fb.me/react-dom-0.14.2.js"></script>
 82 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
 83 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
 84 |     <script src="../react-d3-core.min.js"></script>
 85 |     <script type="text/babel">
 86 |       var Legend = ReactD3Core.Legend;
 87 |       var chartSeries = [
 88 |           {
 89 |             field: 'Under 5 Years'
 90 |           },
 91 |           {
 92 |             field: '5 to 13 Years'
 93 |           }
 94 |         ]
 95 | 
 96 |       ReactDOM.render(
 97 |         <div>
 98 |           <svg width= {960} height= {500}>
 99 |             <rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
100 |           </svg>
101 |           <Legend
102 |             width= {960}
103 |             chartSeries = {chartSeries}
104 |           />
105 |         </div>
106 |       , document.getElementById('blank-legend')
107 |       )
108 |     </script>
109 |   </body>
110 | </html>
111 | ```
112 | 
113 | ## Supported Components
114 | 
115 | #### Container
116 | 
117 | - [Chart](./docs/container.md)
118 | - [Svg](./docs/svg.md)
119 | - [Title](./docs/title.md)
120 | 
121 | #### Axis
122 | 
123 | - [Axis](./docs/axis.md)
124 | - [Xaxis](./docs/xaxis.md)
125 | - [Yaxis](./docs/yaxis.md)
126 | 
127 | #### Grid
128 | 
129 | - [xGrid](./docs/xgrid.md)
130 | - [yGrid](./docs/ygrid.md)
131 | 
132 | #### Label
133 | 
134 | - [Label](./docs/label.md)
135 | 
136 | #### Legend
137 | 
138 | - [Legend](./docs/legend.md)
139 | 
140 | 
141 | ## Develop
142 | 
143 | ```
144 | $ npm install
145 | $ node devServer.js
146 | ```
147 | 
148 | Open `localhost:5000/example`
149 | 
150 | ## History
151 | 
152 | #### Before v1.1.x ...
153 |   
154 |   - Initial release
155 |   - Babel 5
156 |   - D3 3.0
157 | 
158 | #### 2016 / 3 / 3, v1.2.0
159 |   
160 |   - Move to Babel 6.
161 |   - D3 4.0.
162 |   - improve example folder.
163 | 
164 | 
165 | ## License
166 | 
167 | Apache 2.0
168 | 


--------------------------------------------------------------------------------
/__tests__/axis/xaxis-test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import TestUtils from 'react-addons-test-utils';
 4 | 
 5 | const d3 = require('d3');
 6 | const expect = require('expect');
 7 | const Xaxis = require('../../lib/axis/xaxis');
 8 | const data = require('json!../data/user_sample.json');
 9 | const common = require('../../lib/commonProps');
10 | 
11 | describe('Axes, set x accessor', () => {
12 | 
13 |   it('Create xaxis, default orient is bottom, and with default height and margins', () => {
14 |     var x = function(d) { return d.index; }
15 | 
16 |     var newGroup = TestUtils.renderIntoDocument(
17 |       <Xaxis
18 |         x= {x}
19 |       />
20 |     );
21 | 
22 |     var height = common.height;
23 |     var margins = common.margins;
24 | 
25 |     var dom = ReactDOM.findDOMNode(newGroup)
26 |     expect(dom.getAttribute('transform')).toEqual(`translate(0, ${height - margins.top - margins.bottom})`)
27 |   })
28 | 
29 |   it('Create xaxis, orient in bottom', () => {
30 |     var x = function(d) { return d.index; }
31 | 
32 |     var newGroup = TestUtils.renderIntoDocument(
33 |       <Xaxis
34 |         x= {x}
35 |         xOrient= {'bottom'}
36 |       />
37 |     );
38 | 
39 |     var height = common.height;
40 |     var margins = common.margins;
41 | 
42 |     var dom = ReactDOM.findDOMNode(newGroup)
43 |     expect(dom.getAttribute('transform')).toEqual(`translate(0, ${height - margins.top - margins.bottom})`)
44 |   })
45 | 
46 |   it('Create xaxis, orient in top', () => {
47 |     var x = function(d) { return d.index; }
48 | 
49 |     var newGroup = TestUtils.renderIntoDocument(
50 |       <Xaxis
51 |         x= {x}
52 |         xOrient= {'top'}
53 |       />
54 |     );
55 | 
56 |     var dom = ReactDOM.findDOMNode(newGroup)
57 |     expect(dom.getAttribute('transform')).toEqual('translate(0, 0)')
58 |   })
59 | })
60 | 


--------------------------------------------------------------------------------
/__tests__/axis/yaxis-test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import TestUtils from 'react-addons-test-utils';
 4 | 
 5 | const d3 = require('d3');
 6 | const expect = require('expect');
 7 | const Yaxis = require('../../lib/axis/yaxis');
 8 | const data = require('json!../data/user_sample.json');
 9 | const common = require('../../lib/commonProps');
10 | 
11 | describe('Axes, set y accessor', () => {
12 | 
13 |   it('Create yaxis, default orient is left, and with default height and margins', () => {
14 |     var y = function(d) { return d.index; }
15 | 
16 |     var newGroup = TestUtils.renderIntoDocument(
17 |       <Yaxis
18 |         y= {y}
19 |       />
20 |     );
21 | 
22 |     var dom = ReactDOM.findDOMNode(newGroup)
23 |     expect(dom.getAttribute('transform')).toEqual('translate(0, 0)')
24 |   })
25 | 
26 |   it('Create yaxis, orient in left', () => {
27 |     var y = function(d) { return d.index; }
28 | 
29 |     var newGroup = TestUtils.renderIntoDocument(
30 |       <Yaxis
31 |         y= {y}
32 |         yOrient= {"left"}
33 |       />
34 |     );
35 | 
36 |     var dom = ReactDOM.findDOMNode(newGroup)
37 |     expect(dom.getAttribute('transform')).toEqual('translate(0, 0)')
38 |   })
39 | 
40 |   it('Create yaxis, orient in right', () => {
41 |     var y = function(d) { return d.index; }
42 | 
43 |     var newGroup = TestUtils.renderIntoDocument(
44 |       <Yaxis
45 |         y= {y}
46 |         yOrient= {'right'}
47 |       />
48 |     );
49 | 
50 |     var width = common.width;
51 |     var margins = common.margins;
52 | 
53 |     var dom = ReactDOM.findDOMNode(newGroup)
54 |     expect(dom.getAttribute('transform')).toEqual(`translate(${width - margins.right - margins.left}, 0)`)
55 |   })
56 | 
57 | 
58 | })
59 | 


--------------------------------------------------------------------------------
/__tests__/container/svg-test.js:
--------------------------------------------------------------------------------
  1 | import {
  2 |   default as React
  3 | } from 'react';
  4 | 
  5 | import {
  6 |   default as TestUtils
  7 | } from 'react-addons-test-utils';
  8 | 
  9 | const d3 = require('d3');
 10 | const expect = require('expect');
 11 | const Svg = require('../../lib/container/svg');
 12 | const SvgClick = require('./svg_change');
 13 | 
 14 | var width = 960,
 15 |   height = 500,
 16 |   margins = {top: 20, right: 50, bottom: 20, left: 50},
 17 |   id = "test-chart",
 18 |   svgClassName = "test-chart-class";
 19 | 
 20 | describe('SVG', () => {
 21 | 
 22 |   it('create a new svg tag, with a group tag', () => {
 23 |     var newSvg = TestUtils.renderIntoDocument(
 24 |       <Svg
 25 |         width= {width}
 26 |         height= {height}
 27 |         margins= {margins}
 28 |         id= {id}
 29 |         svgClassName= {svgClassName}
 30 |         >
 31 |       </Svg>
 32 |     );
 33 | 
 34 |     var svgDom = TestUtils.findRenderedDOMComponentWithClass(
 35 |       newSvg,
 36 |       "test-chart-class"
 37 |     );
 38 | 
 39 |     var gDom = TestUtils.findRenderedDOMComponentWithTag(
 40 |       newSvg,
 41 |       "g"
 42 |     );
 43 |     expect(svgDom.id).toEqual(id);
 44 |     expect(+svgDom.getAttribute('width')).toEqual(width);
 45 |     expect(+svgDom.getAttribute('height')).toEqual(height);
 46 |     expect(gDom.getAttribute('transform')).toEqual('translate(' + margins.left + ', ' + margins.top + ')');
 47 | 
 48 |   })
 49 | 
 50 |   it('change attributes (width, height, transform, class, id) when click', () => {
 51 | 
 52 |     var clickSvg = TestUtils.renderIntoDocument(
 53 |       <SvgClick
 54 |         width= {width}
 55 |         height= {height}
 56 |         margins= {margins}
 57 |         id= {id}
 58 |         svgClassName= {svgClassName}
 59 |         >
 60 |       </SvgClick>
 61 |     );
 62 | 
 63 |     var svgDom = TestUtils.findRenderedDOMComponentWithClass(
 64 |       clickSvg,
 65 |       "test-chart-class"
 66 |     );
 67 | 
 68 |     var gDom = TestUtils.findRenderedDOMComponentWithTag(
 69 |       clickSvg,
 70 |       "g"
 71 |     );
 72 | 
 73 |     clickSvg._onClick();
 74 | 
 75 |     expect(svgDom.id).toEqual(id + '1');
 76 |     expect(+svgDom.getAttribute('width')).toEqual(width + 100);
 77 |     expect(+svgDom.getAttribute('height')).toEqual(height + 100);
 78 |     expect(gDom.getAttribute('transform')).toEqual('translate(' + margins.left + ', ' + (+margins.top + 10) + ')');
 79 |   })
 80 | 
 81 |   it('svg with children', () => {
 82 | 
 83 |     var childrenSvg = TestUtils.renderIntoDocument(
 84 |       <Svg
 85 |         width= {width}
 86 |         height= {height}
 87 |         margins= {margins}
 88 |         id= {id}
 89 |         svgClassName= {svgClassName}
 90 |         >
 91 |         <rect height={100} width={100} className={'test-rect'}/>
 92 |       </Svg>
 93 |     );
 94 | 
 95 |     var rectDom = TestUtils.findRenderedDOMComponentWithClass(
 96 |       childrenSvg,
 97 |       "test-rect"
 98 |     );
 99 | 
100 |     expect(+rectDom.getAttribute('width')).toEqual(100);
101 |     expect(+rectDom.getAttribute('height')).toEqual(100);
102 |   })
103 | })
104 | 


--------------------------------------------------------------------------------
/__tests__/container/svg_change.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var React = require('react');
 4 | var Svg = require('../../lib/container/svg.js');
 5 | 
 6 | var ClickSvg = React.createClass({
 7 |   getInitialState: function() {
 8 |     return {
 9 |       expend: false
10 |     }
11 |   },
12 |   _onClick: function() {
13 |     this.setState({
14 |       expend: !this.state.expend
15 |     })
16 |   },
17 |   render: function() {
18 |     var width = this.props.width;
19 |     var height = this.props.height;
20 |     var className = this.props.svgClassName;
21 |     var margins = this.props.margins;
22 |     var id = this.props.id;
23 | 
24 |     var expend = this.state.expend;
25 |     var top = margins.top;
26 | 
27 |     width = expend? (width + 100): width;
28 |     height = expend? (height + 100): height;
29 |     className = expend? (className + '1'): className;
30 |     id = expend? (id + '1'): id;
31 | 
32 |     var newMargins= expend? ({top: 30, right: 50, bottom: 20, left: 50}): margins;
33 | 
34 |     return (
35 |       <Svg
36 |         width={width}
37 |         height={height}
38 |         svgClassName={className}
39 |         id={id}
40 |         margins={newMargins}
41 |         onClick={this._onClick}>
42 |       </Svg>
43 |     )
44 |   }
45 | })
46 | 
47 | module.exports = ClickSvg;
48 | 


--------------------------------------------------------------------------------
/__tests__/container/title-test.js:
--------------------------------------------------------------------------------
 1 | import {
 2 |   default as React
 3 | } from 'react';
 4 | 
 5 | import {
 6 |   default as TestUtils
 7 | } from 'react-addons-test-utils';
 8 | 
 9 | const d3 = require('d3');
10 | const expect = require('expect');
11 | const Title = require('../../lib/container/title');
12 | const TitleChange = require('./title_change');
13 | 
14 | var title = "test-chart",
15 |   titleClassName = "test-chart-class";
16 | 
17 | 
18 | describe('Title', () => {
19 | 
20 |   it('create a new title', () => {
21 |     var newTitle = TestUtils.renderIntoDocument(
22 |       <Title
23 |         title= {title}
24 |         titleClassName= {titleClassName}
25 |         />
26 |     );
27 | 
28 |     var titleDom = TestUtils.findRenderedDOMComponentWithClass(
29 |       newTitle,
30 |       "test-chart-class"
31 |     );
32 | 
33 |     expect(titleDom.textContent).toEqual('test-chart');
34 | 
35 |   })
36 | 
37 |   it('Change title', () => {
38 | 
39 |     var newTitle = TestUtils.renderIntoDocument(
40 |       <TitleChange
41 |         title= {title}
42 |         titleClassName= {titleClassName}
43 |         />
44 |     );
45 | 
46 |     var titleDom = TestUtils.findRenderedDOMComponentWithClass(
47 |       newTitle,
48 |       "test-chart-class"
49 |     );
50 | 
51 |     newTitle._onClick();
52 | 
53 |     expect(titleDom.textContent).toEqual('test-chart1');
54 | 
55 |   })
56 | })
57 | 


--------------------------------------------------------------------------------
/__tests__/container/title_change.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var React = require('react');
 4 | var Title = require('../../lib/container/title.js');
 5 | 
 6 | var ChangeTitle = React.createClass({
 7 |   getInitialState: function() {
 8 |     return {
 9 |       expend: false
10 |     }
11 |   },
12 |   _onClick: function() {
13 |     this.setState({
14 |       expend: !this.state.expend
15 |     })
16 |   },
17 |   render: function() {
18 |     var title = this.props.title;
19 |     var titleClassName = this.props.titleClassName;
20 | 
21 |     var expend = this.state.expend;
22 | 
23 |     title = expend? (title + '1'): title;
24 |     titleClassName = expend? (titleClassName + '1'): titleClassName;
25 | 
26 |     return (
27 |       <Title
28 |         title= {title}
29 |         titleClassName= {titleClassName}
30 |         onClick={this._onClick}>
31 |       </Title>
32 |     )
33 |   }
34 | })
35 | 
36 | module.exports = ChangeTitle;
37 | 


--------------------------------------------------------------------------------
/__tests__/data/garbage.csv:
--------------------------------------------------------------------------------
  1 | month,total,incineration,garbageBury,largeGarbageRecycle,foodWaste,recycle,other,average
  2 | 2001M01,770095,295355,339023,0,0,75630,60087,1.124
  3 | 2001M02,629350,248283,256351,0,0,74732,49983,1.016
  4 | 2001M03,663170,271344,264674,0,0,77137,50015,0.966
  5 | 2001M04,650177,279304,250420,0,0,72205,48249,0.976
  6 | 2001M05,713649,326336,246014,0,0,96295,45004,1.034
  7 | 2001M06,695624,326309,236874,0,0,91924,40516,1.041
  8 | 2001M07,704734,356180,206992,0,0,96427,45136,1.020
  9 | 2001M08,693821,345400,211975,0,0,98186,38261,1.005
 10 | 2001M09,795625,362212,304039,0,0,88582,40793,1.192
 11 | 2001M10,726018,315929,270775,0,0,101538,37775,1.052
 12 | 2001M11,650861,285575,236909,0,0,94331,34046,0.973
 13 | 2001M12,640683,324674,191039,0,0,89766,35205,0.926
 14 | 2002M01,683665,345433,198188,0,0,108206,31838,0.988
 15 | 2002M02,672584,353367,198474,0,0,95222,25522,1.075
 16 | 2002M03,652716,341320,182254,0,0,102716,26426,0.942
 17 | 2002M04,662728,363258,181085,0,0,93790,24595,0.987
 18 | 2002M05,694568,380675,189499,0,0,102992,21401,1.001
 19 | 2002M06,671190,373771,176130,0,0,92674,28614,1.003
 20 | 2002M07,691517,390530,170942,0,0,103016,27029,1.003
 21 | 2002M08,681693,382657,163702,0,0,108936,26397,0.989
 22 | 2002M09,649518,359573,165399,0,0,102177,22369,0.975
 23 | 2002M10,668299,343228,185622,0,0,110382,29066,0.970
 24 | 2002M11,612179,328975,156378,0,0,107199,19628,0.917
 25 | 2002M12,644181,353381,162517,0,0,114527,13756,0.933
 26 | 2003M01,710215,397710,174292,0,8948,113909,15356,1.023
 27 | 2003M02,550699,316471,123177,0,10139,90116,10796,0.876
 28 | 2003M03,610571,353792,128981,0,11510,103688,12600,0.878
 29 | 2003M04,627469,363105,133639,0,12352,100401,17973,0.930
 30 | 2003M05,668782,360933,164640,0,13815,116191,13203,0.959
 31 | 2003M06,654195,371453,147821,0,13498,110205,11219,0.969
 32 | 2003M07,675156,377136,146773,0,14882,126174,10192,0.969
 33 | 2003M08,656865,376204,135333,0,14614,121063,9651,0.942
 34 | 2003M09,668895,384371,136603,0,15800,123077,9045,0.990
 35 | 2003M10,639074,351194,135405,0,16410,127017,9048,0.915
 36 | 2003M11,602510,313748,145138,0,17277,114353,11994,0.890
 37 | 2003M12,643587,339933,141087,0,19356,132965,10246,0.920
 38 | 2004M01,696099,395233,151548,0,21789,117914,9614,0.995
 39 | 2004M02,591716,326367,117994,0,21379,117710,8266,0.904
 40 | 2004M03,627731,349888,116664,0,22963,131049,7166,0.896
 41 | 2004M04,619103,339664,124011,0,23390,121882,10156,0.913
 42 | 2004M05,651088,361769,137501,0,25916,118645,7257,0.929
 43 | 2004M06,669185,387857,117681,0,26548,131773,5327,0.987
 44 | 2004M07,667594,394328,116719,0,25424,126374,4748,0.953
 45 | 2004M08,656224,382116,114372,0,24301,130745,4691,0.936
 46 | 2004M09,640068,366284,111339,0,24823,132611,5012,0.943
 47 | 2004M10,619278,330194,124193,0,25208,134844,4839,0.882
 48 | 2004M11,626843,332284,123097,0,27554,136315,7594,0.922
 49 | 2004M12,650031,341754,119047,0,29970,152944,6317,0.925
 50 | 2005M01,656035,380660,104940,2574,35827,126559,5475,0.933
 51 | 2005M02,640793,370156,104681,2200,36133,123289,4334,1.009
 52 | 2005M03,650863,359579,98553,1347,37432,150645,3307,0.926
 53 | 2005M04,633506,332646,104069,1512,42990,147234,5054,0.931
 54 | 2005M05,666509,359270,106375,1561,43718,150256,5328,0.947
 55 | 2005M06,670038,380450,90663,2163,41526,151669,3566,0.984
 56 | 2005M07,683512,385660,96356,4873,37372,156553,2697,0.971
 57 | 2005M08,679191,382372,93080,2675,37483,162856,725,0.965
 58 | 2005M09,660542,364280,89777,3153,37439,163373,2521,0.969
 59 | 2005M10,629688,335791,97689,2773,37973,153757,1705,0.894
 60 | 2005M11,622630,318023,99670,2573,37572,162304,2488,0.913
 61 | 2005M12,635378,331511,98745,2171,38736,161159,3055,0.901
 62 | 2006M01,687321,367784,103616,3578,41125,167722,3496,0.975
 63 | 2006M02,596097,324825,84760,1464,42845,140125,2079,0.935
 64 | 2006M03,635158,326259,82062,2267,44991,178157,1421,0.899
 65 | 2006M04,612048,320099,73868,1566,48058,166801,1658,0.895
 66 | 2006M05,665768,344364,84207,2364,50420,183442,972,0.942
 67 | 2006M06,668101,359602,70987,2698,48985,185276,554,0.977
 68 | 2006M07,670102,367193,65409,1660,46399,188806,636,0.948
 69 | 2006M08,671907,361360,63265,2053,48268,196416,544,0.950
 70 | 2006M09,637838,344741,57317,2529,48448,183949,853,0.931
 71 | 2006M10,655268,352267,58321,2832,50159,190016,1673,0.926
 72 | 2006M11,646579,350407,50525,2949,50462,190084,2152,0.943
 73 | 2006M12,645418,345067,56679,2687,50017,189318,1652,0.911
 74 | 2007M01,669649,371663,48035,3038,50076,195990,848,0.944
 75 | 2007M02,658237,386836,48880,3037,50669,167897,918,1.028
 76 | 2007M03,671883,368444,44152,1988,55526,200943,831,0.948
 77 | 2007M04,641209,353137,45477,2178,53678,185143,1597,0.934
 78 | 2007M05,674137,365524,50618,2829,56691,196456,2019,0.950
 79 | 2007M06,680109,381399,37541,2341,57053,198560,3215,0.990
 80 | 2007M07,680124,375015,38329,2724,58048,204876,1132,0.958
 81 | 2007M08,695753,385436,37044,3091,58798,211228,157,0.980
 82 | 2007M09,639221,348446,30804,2508,55275,202044,145,0.930
 83 | 2007M10,676374,355058,45373,2738,54999,210818,7387,0.952
 84 | 2007M11,620035,310086,43163,2570,54493,202630,7094,0.901
 85 | 2007M12,642717,334726,35531,2188,57485,205608,7179,0.904
 86 | 2008M01,682388,382802,27405,2676,58545,210784,176,0.959
 87 | 2008M02,629922,365300,23174,2292,57652,181373,133,0.946
 88 | 2008M03,606304,337292,18753,2161,57681,190267,151,0.851
 89 | 2008M04,611410,337406,17960,2301,57321,196263,158,0.887
 90 | 2008M05,647752,354148,21247,2399,61232,208717,8,0.909
 91 | 2008M06,644275,353399,17489,2955,60109,210316,8,0.934
 92 | 2008M07,646515,360850,19080,4325,58798,203454,7,0.907
 93 | 2008M08,622844,333976,17645,4321,56479,210417,7,0.874
 94 | 2008M09,642632,348806,18396,5525,57677,212179,49,0.931
 95 | 2008M10,621165,331001,19926,6097,55602,208531,7,0.871
 96 | 2008M11,573100,299502,18319,4644,53494,197134,7,0.830
 97 | 2008M12,609066,332802,16728,4770,56603,198125,37,0.853
 98 | 2009M01,666916,387876,19520,5776,57250,196486,8,0.934
 99 | 2009M02,603384,321171,16055,4367,58098,203687,7,0.935
100 | 2009M03,618851,329950,15827,4397,58772,209899,7,0.866
101 | 2009M04,620060,328230,14598,4227,59782,213217,7,0.896
102 | 2009M05,635779,334901,14086,4430,60543,221473,346,0.889
103 | 2009M06,674564,357906,14520,5072,63185,232980,900,0.975
104 | 2009M07,664885,344645,14165,5678,62929,237461,7,0.930
105 | 2009M08,685801,363353,21476,8009,58633,234323,7,0.959
106 | 2009M09,642615,311225,14501,6346,58567,251969,7,0.928
107 | 2009M10,655304,328883,13837,6016,61217,245343,7,0.915
108 | 2009M11,634043,314302,13897,5590,61198,239049,7,0.915
109 | 2009M12,643817,313962,13282,5565,61296,249704,7,0.899
110 | 2010M01,670991,338901,13836,7365,60115,250768,7,0.936
111 | 2010M02,671571,359297,15164,6993,59564,230547,6,1.037
112 | 2010M03,674038,329915,14762,5636,62408,261310,7,0.940
113 | 2010M04,642960,314467,13777,5729,60830,246841,1316,0.927
114 | 2010M05,672954,334249,17138,6135,64227,251199,7,0.938
115 | 2010M06,686566,344352,14371,6625,63947,257265,7,0.989
116 | 2010M07,674449,331610,14506,7257,65827,255243,7,0.940
117 | 2010M08,669168,323818,14150,6657,66142,258394,7,0.933
118 | 2010M09,689302,335753,17222,8548,66129,260843,807,0.993
119 | 2010M10,638173,300518,15645,7447,65678,248879,7,0.889
120 | 2010M11,634052,288684,17198,6278,66135,255750,7,0.913
121 | 2010M12,633376,287077,14001,5550,68162,258579,7,0.882
122 | 2011M01,669127,322138,17760,9852,66990,252380,7,0.932
123 | 2011M02,579427,282685,14229,4601,63782,214123,6,0.893
124 | 2011M03,630674,284573,18352,6012,65822,255909,6,0.878
125 | 2011M04,621122,276972,12358,5094,66971,259720,6,0.894
126 | 2011M05,645598,294537,11292,5501,70548,263714,6,0.899
127 | 2011M06,644114,296265,11173,6317,70774,259579,6,0.926
128 | 2011M07,640912,299283,10312,7062,70499,253750,6,0.892
129 | 2011M08,645523,296319,9600,6981,70300,262317,6,0.898
130 | 2011M09,627089,289489,8694,7061,66350,255489,6,0.901
131 | 2011M10,621275,279523,8765,7167,67568,258246,6,0.864
132 | 2011M11,596078,259332,10777,7116,66306,252540,6,0.856
133 | 2011M12,633650,287505,8843,7563,65288,264447,6,0.880
134 | 2012M01,663145,318630,10593,7588,67470,258847,17,0.921
135 | 2012M02,581227,254533,8053,6046,65086,247502,7,0.863
136 | 2012M03,625485,278802,8637,7025,68433,262582,7,0.868
137 | 2012M04,595741,267364,7935,6751,67688,245997,6,0.854
138 | 2012M05,624899,274088,8742,7039,71326,263698,6,0.867
139 | 2012M06,640348,289514,8872,6907,72368,262682,6,0.918
140 | 2012M07,620990,277878,7728,7953,71502,255924,6,0.861
141 | 2012M08,626361,279670,8819,9360,70211,258296,6,0.868
142 | 2012M09,595516,253637,8060,7927,68466,257419,6,0.853
143 | 2012M10,613300,259450,8860,7079,71640,266265,6,0.850
144 | 2012M11,605045,256114,7869,8203,70894,261958,6,0.866
145 | 2012M12,611852,267574,7885,7104,69456,259827,6,0.847
146 | 2013M01,634231,285083,8605,8120,66933,265484,6,0.877
147 | 2013M02,597573,278109,9499,6196,65033,238730,6,0.915
148 | 2013M03,615770,266933,7803,5800,68278,266950,6,0.851
149 | 2013M04,613496,273477,6841,6414,68389,258369,6,0.876
150 | 2013M05,613277,264877,7849,7006,70454,263084,6,0.848
151 | 2013M06,610220,268879,7478,6562,68135,259159,6,0.871
152 | 2013M07,643080,285548,8092,8651,68956,271828,6,0.889
153 | 2013M08,624524,273663,7052,6940,67517,269347,6,0.863
154 | 2013M09,592806,257769,6928,7476,61939,258687,6,0.846
155 | 2013M10,606793,254716,7054,7407,63403,274207,6,0.838
156 | 2013M11,583401,241141,6827,6786,63101,265540,6,0.832
157 | 2013M12,599406,258519,7328,6653,63075,263825,6,0.827
158 | 2014M01,661470,298125,8774,7347,64992,282226,6,0.913
159 | 2014M02,582868,253420,7097,3780,60760,257804,6,0.890
160 | 2014M03,606147,264120,6772,5218,60993,269039,6,0.836
161 | 2014M04,598134,255984,6626,5271,59764,270484,6,0.853
162 | 2014M05,619557,266883,6217,4990,61535,279926,6,0.855
163 | 2014M06,620332,277195,6300,5903,60625,270303,6,0.884
164 | 2014M07,641095,281291,6523,5765,60970,286538,8,0.884
165 | 2014M08,621297,273004,5994,5379,59319,277595,6,0.856
166 | 2014M09,621172,265693,8995,6071,59416,280991,6,0.885
167 | 2014M10,607449,255810,6869,6034,57933,280796,6,0.837
168 | 2014M11,569058,232157,6476,4845,56412,269162,6,0.810
169 | 2014M12,620859,265775,6492,5235,57654,285696,6,0.855
170 | 2015M01,608176,266883,7578,5478,50964,277237,36,0.837
171 | 2015M02,588467,274532,7385,5472,47830,253243,6,0.897
172 | 2015M03,617597,270293,6915,5030,52152,283193,15,0.850
173 | 


--------------------------------------------------------------------------------
/__tests__/data/state_age.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "State": "CA",
 4 |         "Under 5 Years": "2704659",
 5 |         "5 to 13 Years": "4499890",
 6 |         "14 to 17 Years": "2159981",
 7 |         "18 to 24 Years": "3853788",
 8 |         "25 to 44 Years": "10604510",
 9 |         "45 to 64 Years": "8819342",
10 |         "65 Years and Over": "4114496"
11 |     },
12 |     {
13 |         "State": "TX",
14 |         "Under 5 Years": "2027307",
15 |         "5 to 13 Years": "3277946",
16 |         "14 to 17 Years": "1420518",
17 |         "18 to 24 Years": "2454721",
18 |         "25 to 44 Years": "7017731",
19 |         "45 to 64 Years": "5656528",
20 |         "65 Years and Over": "2472223"
21 |     },
22 |     {
23 |         "State": "NY",
24 |         "Under 5 Years": "1208495",
25 |         "5 to 13 Years": "2141490",
26 |         "14 to 17 Years": "1058031",
27 |         "18 to 24 Years": "1999120",
28 |         "25 to 44 Years": "5355235",
29 |         "45 to 64 Years": "5120254",
30 |         "65 Years and Over": "2607672"
31 |     },
32 |     {
33 |         "State": "FL",
34 |         "Under 5 Years": "1140516",
35 |         "5 to 13 Years": "1938695",
36 |         "14 to 17 Years": "925060",
37 |         "18 to 24 Years": "1607297",
38 |         "25 to 44 Years": "4782119",
39 |         "45 to 64 Years": "4746856",
40 |         "65 Years and Over": "3187797"
41 |     },
42 |     {
43 |         "State": "IL",
44 |         "Under 5 Years": "894368",
45 |         "5 to 13 Years": "1558919",
46 |         "14 to 17 Years": "725973",
47 |         "18 to 24 Years": "1311479",
48 |         "25 to 44 Years": "3596343",
49 |         "45 to 64 Years": "3239173",
50 |         "65 Years and Over": "1575308"
51 |     },
52 |     {
53 |         "State": "PA",
54 |         "Under 5 Years": "737462",
55 |         "5 to 13 Years": "1345341",
56 |         "14 to 17 Years": "679201",
57 |         "18 to 24 Years": "1203944",
58 |         "25 to 44 Years": "3157759",
59 |         "45 to 64 Years": "3414001",
60 |         "65 Years and Over": "1910571"
61 |     }
62 | ]
63 | 


--------------------------------------------------------------------------------
/__tests__/data/user_sample.json:
--------------------------------------------------------------------------------
 1 | 
 2 | [
 3 | {"name":"Darron Weissnat IV","BMI":20.72,"age":39,"birthday":"2005-01-03T00:00:00.000Z","city":"East Russel","married":false,"index":0}
 4 | ,
 5 | {"name":"Pablo Ondricka","BMI":19.32,"age":38,"birthday":"1974-05-13T00:00:00.000Z","city":"Lake Edytheville","married":false,"index":1}
 6 | ,
 7 | {"name":"Mr. Stella Kiehn Jr.","BMI":16.8,"age":34,"birthday":"2003-07-25T00:00:00.000Z","city":"Lake Veronicaburgh","married":false,"index":2}
 8 | ,
 9 | {"name":"Lavon Hilll I","BMI":20.57,"age":12,"birthday":"1994-10-26T00:00:00.000Z","city":"Annatown","married":true,"index":3}
10 | ,
11 | {"name":"Clovis Pagac","BMI":24.28,"age":26,"birthday":"1995-11-10T00:00:00.000Z","city":"South Eldredtown","married":false,"index":4}
12 | ,
13 | {"name":"Gaylord Paucek","BMI":24.41,"age":30,"birthday":"1975-06-12T00:00:00.000Z","city":"Koeppchester","married":true,"index":5}
14 | ,
15 | {"name":"Ashlynn Kuhn MD","BMI":23.77,"age":32,"birthday":"1985-08-09T00:00:00.000Z","city":"West Josiemouth","married":false,"index":6}
16 | ,
17 | {"name":"Fern Schmeler IV","BMI":27.33,"age":26,"birthday":"2005-02-10T00:00:00.000Z","city":"West Abigaleside","married":true,"index":7}
18 | ,
19 | {"name":"Enid Weber","BMI":18.72,"age":17,"birthday":"1998-11-30T00:00:00.000Z","city":"Zackton","married":true,"index":8}
20 | ,
21 | {"name":"Leatha O'Hara","BMI":17.68,"age":42,"birthday":"2010-10-17T00:00:00.000Z","city":"Lake Matilda","married":false,"index":9}
22 | ,
23 | {"name":"Korbin Steuber","BMI":16.35,"age":39,"birthday":"1975-06-30T00:00:00.000Z","city":"East Armandofort","married":true,"index":10}
24 | ,
25 | {"name":"Brennon Torphy","BMI":27.37,"age":24,"birthday":"2003-10-21T00:00:00.000Z","city":"Croninfort","married":true,"index":11}
26 | ,
27 | {"name":"Ms. Genoveva Bradtke","BMI":28.63,"age":19,"birthday":"1983-01-10T00:00:00.000Z","city":"Port Emanuel","married":true,"index":12}
28 | ,
29 | {"name":"Gregg Halvorson","BMI":15.45,"age":15,"birthday":"2004-06-15T00:00:00.000Z","city":"Lake Angelinastad","married":false,"index":13}
30 | ,
31 | {"name":"Mr. Sabina Schroeder III","BMI":24.27,"age":26,"birthday":"1980-11-22T00:00:00.000Z","city":"Toyview","married":true,"index":14}
32 | ,
33 | {"name":"Alanna Mitchell","BMI":29.25,"age":37,"birthday":"1971-08-04T00:00:00.000Z","city":"Lake Monserratmouth","married":false,"index":15}
34 | ,
35 | {"name":"Ronny Sanford","BMI":29.16,"age":24,"birthday":"1994-11-24T00:00:00.000Z","city":"New Claudhaven","married":false,"index":16}
36 | ,
37 | {"name":"Emmitt Pouros","BMI":27.95,"age":14,"birthday":"1989-04-04T00:00:00.000Z","city":"Moorefurt","married":true,"index":17}
38 | ,
39 | {"name":"Earl Purdy","BMI":18.34,"age":38,"birthday":"2013-04-03T00:00:00.000Z","city":"Lake Rowanberg","married":true,"index":18}
40 | ,
41 | {"name":"Cordelia Klocko","BMI":25.85,"age":36,"birthday":"2011-01-17T00:00:00.000Z","city":"Lakinchester","married":true,"index":19}
42 | ,
43 | {"name":"Guido Conroy","BMI":25.17,"age":39,"birthday":"1977-04-20T00:00:00.000Z","city":"Scarlettland","married":true,"index":20}
44 | ,
45 | {"name":"Miss Demond Weissnat V","BMI":21.44,"age":19,"birthday":"2007-06-09T00:00:00.000Z","city":"Savionberg","married":false,"index":21}
46 | ,
47 | {"name":"Easton Mante","BMI":20.61,"age":43,"birthday":"2007-01-29T00:00:00.000Z","city":"Kutchberg","married":false,"index":22}
48 | ,
49 | {"name":"Dayton Ebert","BMI":29.88,"age":20,"birthday":"1978-04-27T00:00:00.000Z","city":"West Wiley","married":true,"index":23}
50 | ]
51 | 


--------------------------------------------------------------------------------
/__tests__/label/label-test.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactDOM from 'react-dom';
  3 | import TestUtils from 'react-addons-test-utils';
  4 | 
  5 | const d3 = require('d3');
  6 | const expect = require('expect');
  7 | const Label = require('../../lib/axis/label');
  8 | const data = require('json!../data/user_sample.json');
  9 | const common = require('../../lib/commonProps');
 10 | 
 11 | const defaultProps = Object.assign(common, {
 12 |   hTransform: 'rotate(0)',
 13 |   vTransform: 'rotate(270)',
 14 |   labelTitle: 'label title',
 15 |   labelPosition: 'bottom',
 16 |   labelOffset: 40,
 17 |   textAnchor: 'middle',
 18 |   labelClassName: 'react-d3-core__label'
 19 | })
 20 | 
 21 | describe('Label', () => {
 22 | 
 23 |   it('Create label with default values, in bottom position', () => {
 24 | 
 25 |     var newGroup = TestUtils.renderIntoDocument(
 26 |       <Label/>
 27 |     );
 28 | 
 29 |     var fixWidth = defaultProps.width - defaultProps.margins.left - defaultProps.margins.right;
 30 |     var dom = ReactDOM.findDOMNode(newGroup)
 31 | 
 32 |     expect(dom.getAttribute('transform')).toEqual(defaultProps.hTransform)
 33 |     expect(+dom.getAttribute('y')).toEqual(+defaultProps.labelOffset)
 34 |     expect(+dom.getAttribute('x')).toEqual(+fixWidth / 2)
 35 |     expect(dom.style['text-anchor']).toEqual(defaultProps.textAnchor)
 36 |     expect(dom.textContent).toEqual(defaultProps.labelTitle)
 37 |   })
 38 | 
 39 |   it('Create label in top position', () => {
 40 |     var newGroup = TestUtils.renderIntoDocument(
 41 |       <Label
 42 |         labelPosition= {'top'}
 43 |       />
 44 |     );
 45 | 
 46 |     var fixWidth = defaultProps.width - defaultProps.margins.left - defaultProps.margins.right;
 47 |     var dom = ReactDOM.findDOMNode(newGroup)
 48 | 
 49 |     expect(dom.getAttribute('transform')).toEqual(defaultProps.hTransform)
 50 |     expect(+dom.getAttribute('y')).toEqual(-defaultProps.labelOffset)
 51 |     expect(+dom.getAttribute('x')).toEqual(+fixWidth / 2)
 52 |     expect(dom.style['text-anchor']).toEqual(defaultProps.textAnchor)
 53 |     expect(dom.textContent).toEqual(defaultProps.labelTitle)
 54 |   })
 55 | 
 56 |   it('Create label in left position', () => {
 57 |     var newGroup = TestUtils.renderIntoDocument(
 58 |       <Label
 59 |         labelPosition= {'left'}
 60 |       />
 61 |     );
 62 | 
 63 |     var fixHeight = defaultProps.height - defaultProps.margins.top - defaultProps.margins.bottom;
 64 |     var dom = ReactDOM.findDOMNode(newGroup)
 65 | 
 66 |     expect(dom.getAttribute('transform')).toEqual(defaultProps.vTransform)
 67 |     expect(+dom.getAttribute('y')).toEqual(-defaultProps.labelOffset)
 68 |     expect(+dom.getAttribute('x')).toEqual(-fixHeight / 2)
 69 |     expect(dom.style['text-anchor']).toEqual(defaultProps.textAnchor)
 70 |     expect(dom.textContent).toEqual(defaultProps.labelTitle)
 71 |   })
 72 | 
 73 |   it('Create label in right position', () => {
 74 |     var newGroup = TestUtils.renderIntoDocument(
 75 |       <Label
 76 |         labelPosition= {'right'}
 77 |       />
 78 |     );
 79 | 
 80 |     var fixHeight = defaultProps.height - defaultProps.margins.top - defaultProps.margins.bottom;
 81 |     var dom = ReactDOM.findDOMNode(newGroup)
 82 | 
 83 |     expect(dom.getAttribute('transform')).toEqual(defaultProps.vTransform)
 84 |     expect(+dom.getAttribute('y')).toEqual(+defaultProps.labelOffset)
 85 |     expect(+dom.getAttribute('x')).toEqual(-fixHeight / 2)
 86 |     expect(dom.style['text-anchor']).toEqual(defaultProps.textAnchor)
 87 |     expect(dom.textContent).toEqual(defaultProps.labelTitle)
 88 |   })
 89 | 
 90 |   it('Create label and with customize className', () => {
 91 |     var newGroup = TestUtils.renderIntoDocument(
 92 |       <Label
 93 |         labelClassName= {'test-label'}
 94 |       />
 95 |     );
 96 | 
 97 |     var dom = ReactDOM.findDOMNode(newGroup)
 98 | 
 99 |     expect(dom.getAttribute('class')).toEqual('test-label label')
100 |   })
101 | })
102 | 


--------------------------------------------------------------------------------
/__tests__/legend/legend-test.js:
--------------------------------------------------------------------------------
 1 | // import React from 'react';
 2 | // import ReactDOM from 'react-dom';
 3 | // import TestUtils from 'react-addons-test-utils';
 4 | //
 5 | // const d3 = require('d3');
 6 | // const expect = require('expect');
 7 | // const Legend = require('../../lib/legend');
 8 | // const data = require('json!../data/user_sample.json');
 9 | // const common = require('../../lib/commonProps');
10 | //
11 | // const defaultProps = Object.assign(common, {
12 | //   legendHeight: 50,
13 | //   legendPosition: 'left',
14 | //   legendOffset: 90,
15 | //   legendClassName: 'react-d3-core__legend'
16 | // })
17 | //
18 | // describe('Legend', () => {
19 | //
20 | //   it('Create legend with default values', () => {
21 | //     var newGroup = TestUtils.renderIntoDocument(
22 | //       <Legend/>
23 | //     );
24 | //
25 | //     var fixWidth = defaultProps.width - defaultProps.margins.left - defaultProps.margins.right;
26 | //     var dom = ReactDOM.findDOMNode(newGroup)
27 | //
28 | //     expect(dom.getAttribute('transform')).toEqual(defaultProps.hTransform)
29 | //     expect(+dom.getAttribute('y')).toEqual(+defaultProps.labelOffset)
30 | //     expect(+dom.getAttribute('x')).toEqual(+fixWidth / 2)
31 | //     expect(dom.style['text-anchor']).toEqual(defaultProps.textAnchor)
32 | //     expect(dom.textContent).toEqual(defaultProps.labelTitle)
33 | //   })
34 | // })
35 | 


--------------------------------------------------------------------------------
/devServer.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | var express = require('express');
 3 | var webpack = require('webpack');
 4 | var config = require('./webpack.config');
 5 | 
 6 | var app = express();
 7 | var compiler = webpack(config);
 8 | 
 9 | app.use(require('webpack-dev-middleware')(compiler, {
10 |   noInfo: true,
11 |   publicPath: config.output.publicPath
12 | }));
13 | 
14 | app.use(require('webpack-hot-middleware')(compiler));
15 | 
16 | app.get('/example', function(req, res) {
17 |   res.sendFile(path.join(__dirname, './example/index.html'));
18 | });
19 | 
20 | app.get('/example/*', function(req, res) {
21 |   res.sendFile(path.join(__dirname, './example/index.html'));
22 | });
23 | 
24 | app.listen(5000, 'localhost', function(err) {
25 |   if (err) {
26 |     console.log(err);
27 |     return;
28 |   }
29 | 
30 |   console.log('Listening at http://localhost:5000/example');
31 | });


--------------------------------------------------------------------------------
/docs/axis.md:
--------------------------------------------------------------------------------
 1 | # Axis
 2 | 
 3 | Building Axis in this component.  Here is where xaxis and yaxis and grid system being built.
 4 | 
 5 | ## Import
 6 | 
 7 | ```js
 8 | var Axis = require('react-d3-core').Axis;
 9 | ```
10 | 
11 | ## Setting props
12 | 
13 | You can customize `Axis` component using the following properties. Most of the time you will only use `Xaxis`, `Yaxis`.
14 | 
15 | ### Basics
16 | 
17 | - type
18 | - showAxis
19 | 
20 | ### Scale
21 | 
22 | - scale
23 | - range
24 | - domain
25 | - rangeRoundBands
26 | 
27 | ### Tick
28 | 
29 | - tickOrient
30 | - tickFormat
31 | - tickPadding
32 | - innerTickSize
33 | - outerTickSize
34 | - ticks
35 | 


--------------------------------------------------------------------------------
/docs/container.md:
--------------------------------------------------------------------------------
  1 | # Container
  2 | 
  3 | Container component documents. Container component included title and svg component. This will create a your chart title and a blank `svg`.
  4 | 
  5 | ## Import
  6 | 
  7 | ```js
  8 | var Chart = require('react-d3-core').Chart;
  9 | ```
 10 | 
 11 | ## Example
 12 | 
 13 | ```js
 14 | var React = require('react');
 15 | var Chart = require('react-d3-core').Chart;
 16 | 
 17 | // Example
 18 | (function() {
 19 | 
 20 |   var width = 960,
 21 |     height = 500,
 22 |     margins = {top: 20, right: 50, bottom: 20, left: 50},
 23 |     id = "test-chart",
 24 |     svgClassName = "test-chart-class",
 25 |     titleClassName = "test-chart-title-class";
 26 | 
 27 |   var title = "test chart lib"
 28 | 
 29 |   React.render(
 30 |     <Chart
 31 |       title= {title}
 32 |       width= {width}
 33 |       height= {height}
 34 |       margins= {margins}
 35 |       id= {id}
 36 |       svgClassName= {svgClassName}
 37 |       titleClassName= {titleClassName}
 38 |     />
 39 |   , document.getElementById('blank-container'))
 40 | 
 41 | })()
 42 | ```
 43 | 
 44 | ## Components
 45 | 
 46 | `container` component contains:
 47 | 
 48 | - [Svg](./svg.md)
 49 | - [Title](./title.md)
 50 | - [Legend](./legend.md)
 51 | 
 52 | 
 53 | ## Settings props
 54 | 
 55 | You can customize `Container` component using the following properties.
 56 | 
 57 | #### Svg
 58 | 
 59 | see detail in [Svg component](./svg.md)
 60 | 
 61 | - width
 62 | - height
 63 | - margins
 64 | - id
 65 | - svgClassName
 66 | 
 67 | #### Title
 68 | 
 69 | see detail in [Title component](./title.md)
 70 | 
 71 | - title
 72 | - titleClassName
 73 | 
 74 | #### Legend
 75 | 
 76 | see detail in [Legend component](./legend.md)
 77 | 
 78 | 
 79 | ## New components or html tags in svg
 80 | 
 81 | If you have new `group`, `rect`, `text` and you want to put into the `svg` that you have just created. Put it in the `<Chart>put your things here... </Chart>`.
 82 | 
 83 | For example:
 84 | 
 85 | ```js
 86 | var React = require('react');
 87 | var Chart = require('react-d3-core').Chart;
 88 | 
 89 | (function() {
 90 |   React.render(
 91 |     <Chart {...this.props}>
 92 |       <g>
 93 |         <text></text>
 94 |       </g>
 95 |     </Chart>
 96 |     , document.getElementById('new-id')
 97 |   )
 98 | })()
 99 | ```
100 | 


--------------------------------------------------------------------------------
/docs/label.md:
--------------------------------------------------------------------------------
  1 | # Label
  2 | 
  3 | Label component documents. `Label` component often goes with `Axis` component. see `Yaxis`, `Xaxis` for examples.
  4 | 
  5 | ## Import
  6 | 
  7 | ```js
  8 | var Label = require('react-d3-core').Label;
  9 | ```
 10 | 
 11 | ## Example
 12 | 
 13 | ```js
 14 | var React = require('react');
 15 | var Label = require('react-d3-core').Label;
 16 | 
 17 | (function() {
 18 | 
 19 |   var width = 960,
 20 |     height = 500,
 21 |     margins = {top: 20, right: 50, bottom: 30, left: 50},
 22 |     labelTitle = 'new label title'
 23 | 
 24 | 
 25 |   React.render(
 26 |     <svg width={width} height={height}>
 27 |       <Label
 28 |         width= {width}
 29 |         height= {height}
 30 |         margins= {margins}
 31 |         labelTitle= {labelTitle}
 32 |         labelPosition= {labelPosition}
 33 |       />
 34 |     </svg>
 35 |   , document.getElementById('blank-label')
 36 |   )
 37 | })()
 38 | ```
 39 | 
 40 | ## Settings props
 41 | 
 42 | You can customize `Label` component using the following properties.
 43 | 
 44 | - width
 45 | - height
 46 | - margins
 47 | - textAnchor
 48 | - labelTitle
 49 | - labelPosition
 50 | - labelOffset
 51 | - labelClassName
 52 | 
 53 | ### width
 54 | 
 55 | **default as `960`**
 56 | 
 57 | `width` prop is the width of the parent `svg` that wrap the legend component.
 58 | 
 59 | ### height
 60 | 
 61 | **default as `500`**
 62 | 
 63 | `height` prop is the height of the parent `svg` that wrap the legend component.
 64 | 
 65 | ### margins
 66 | 
 67 | **default as `{top: 50, right: 50, bottom: 50, left: 50}`**
 68 | 
 69 | `margins` prop is the margins of the parent `svg` that wrap the legend component.
 70 | 
 71 | ### textAnchor
 72 | 
 73 | **default as 'middle'**
 74 | 
 75 | Set your `text-anchor` in your `label`, should be one of start, middle, end.
 76 | 
 77 | ### labelTitle
 78 | 
 79 | **defulat as 'label title'**
 80 | 
 81 | Set your label title.
 82 | 
 83 | ### labelOffset
 84 | 
 85 | **default as 40**
 86 | 
 87 | `labelOffset` set the offset of the label.
 88 | 
 89 | ### labelPosition
 90 | 
 91 | **default as 'bottom'**
 92 | 
 93 | Where your label position is should be one of top, bottom, left, right.
 94 | 
 95 | ### labelClassName
 96 | 
 97 | **default as 'react-d3-core__label'**
 98 | 
 99 | Setup your label's class name.
100 | 


--------------------------------------------------------------------------------
/docs/legend.md:
--------------------------------------------------------------------------------
  1 | # Legend
  2 | 
  3 | Legend component documents.
  4 | 
  5 | ## Import
  6 | 
  7 | ```js
  8 | var Legend = require('react-d3-core').Legend;
  9 | ```
 10 | 
 11 | ```js
 12 | 
 13 | (function() {
 14 |   var width = 960,
 15 |     height = 500,
 16 |     margins = {top: 40, right: 50, bottom: 40, left: 50},
 17 |     legendClassName = "test-legend-class",
 18 |     legendPosition = 'left',
 19 |     legendOffset = 90,
 20 |     chartSeries = [
 21 |       {
 22 |         field: 'Under 5 Years',
 23 |         name: 'Under 5 Years',
 24 |         color: '#1f77b4'
 25 |       },
 26 |       {
 27 |         field: '5 to 13 Years',
 28 |         name: '5 to 13 Years',
 29 |         color: '#ff7f0e'
 30 |       },
 31 |       {
 32 |         field: '14 to 17 Years',
 33 |         name: '14 to 17 Years',
 34 |         color: '#2ca02c'
 35 |       },
 36 |       {
 37 |         field: '18 to 24 Years',
 38 |         name: '18 to 24 Years',
 39 |         color: '#d62728'
 40 |       },
 41 |       {
 42 |         field: '25 to 44 Years',
 43 |         name: '25 to 44 Years',
 44 |         color: '#9467bd'
 45 |       },
 46 |       {
 47 |         field: '45 to 64 Years',
 48 |         name: '45 to 64 Years',
 49 |         color: '#8c564b'
 50 |       },
 51 |       {
 52 |         field: '65 Years and Over',
 53 |         name: '65 Years and Over',
 54 |         color: '#e377c2'
 55 |       },
 56 | 
 57 |     ]
 58 | 
 59 |   React.render(
 60 |     <Legend
 61 |       width= {width}
 62 |       height= {height}
 63 |       margins= {margins}
 64 |       legendClassName= {legendClassName}
 65 |       legendPosition= {legendPosition}
 66 |       legendOffset= {legendOffset}
 67 |       chartSeries = {chartSeries}
 68 |     />
 69 |     <svg width= {width} height= {height}>
 70 |       <rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
 71 |     </svg>
 72 |   , document.getElementById('blank-legend')
 73 |   )
 74 | })()
 75 | 
 76 | ```
 77 | 
 78 | ## Settings props
 79 | 
 80 | You can customize `Legend` component using the following properties.
 81 | 
 82 | - width
 83 | - height
 84 | - margins
 85 | - legendClassName
 86 | - legendPosition
 87 | - legendOffset
 88 | - chartSeries
 89 | 
 90 | ### width
 91 | 
 92 | **default as `960`**
 93 | 
 94 | `width` prop is the width of the parent `svg` that wrap the legend component.
 95 | 
 96 | ### height
 97 | 
 98 | **default as `500`**
 99 | 
100 | `height` prop is the height of the parent `svg` that wrap the legend component.
101 | 
102 | ### margins
103 | 
104 | **default as `{top: 50, right: 50, bottom: 50, left: 50}`**
105 | 
106 | `margins` prop is the margins of the parent `svg` that wrap the legend component.
107 | 
108 | ### legendClassName
109 | 
110 | **default as `react-d3-core__legend`**
111 | 
112 | `legendClassName` is the setting that set the class of the `<g class="your-legend-class-name">`
113 | 
114 | ### legendPosition
115 | 
116 | **default as `left`**
117 | 
118 | `legendPosition` can be set as `left` or `right`, which will automatically set your legend align form the left or right of your chart.
119 | 
120 | #### legendPosition = 'left'
121 | 
122 | Align legend from left.
123 | 
124 | #### legendPosition = 'right'
125 | 
126 | Align legend from right.
127 | 
128 | ### legendOffset
129 | 
130 | **default as `90`**
131 | 
132 | `legendOffset` set the offset of `Legend` component.
133 | 
134 | ### chartSeries
135 | 
136 | **must be a array, with objects including keys of  field, name, color**
137 | 
138 | This will set the Legend field, name, and color.
139 | 
140 | For instance:
141 | 
142 | ```js
143 | [
144 |   {
145 |     field: 'Under 5 Years',
146 |     name: 'Under 5 Years',
147 |     color: '#1f77b4'
148 |   },
149 |   {
150 |     field: '5 to 13 Years',
151 |     name: '5 to 13 Years',
152 |     color: '#ff7f0e'
153 |   },
154 |   {
155 |     field: '14 to 17 Years',
156 |     name: '14 to 17 Years',
157 |     color: '#2ca02c'
158 |   },
159 |   {
160 |     field: '18 to 24 Years',
161 |     name: '18 to 24 Years',
162 |     color: '#d62728'
163 |   },
164 |   {
165 |     field: '25 to 44 Years',
166 |     name: '25 to 44 Years',
167 |     color: '#9467bd'
168 |   },
169 |   {
170 |     field: '45 to 64 Years',
171 |     name: '45 to 64 Years',
172 |     color: '#8c564b'
173 |   },
174 |   {
175 |     field: '65 Years and Over',
176 |     name: '65 Years and Over',
177 |     color: '#e377c2'
178 |   },
179 | ]
180 | ```
181 | 
182 | is the `chartSeries` of the legend shown below.
183 | 


--------------------------------------------------------------------------------
/docs/svg.md:
--------------------------------------------------------------------------------
 1 | # Svg
 2 | 
 3 | Building a blank Svg for your charts!
 4 | 
 5 | ## Import
 6 | 
 7 | ```js
 8 | var Svg = require('react-d3-core').Svg;
 9 | ```
10 | 
11 | ## Usage
12 | 
13 | ```js
14 | var width = 960,
15 |   height = 500,
16 |   margins = {top: 50, right: 50, bottom: 50, left: 50},
17 |   id = "test-chart",
18 |   svgClassName = "test-chart-class";
19 | 
20 | (function() {
21 |   React.render(
22 |     <Svg
23 |       width= {width}
24 |       height= {height}
25 |       margins= {margins}
26 |       id= {id}
27 |       svgClassName= {svgClassName}
28 |       >
29 |     </Svg>
30 |   , document.getElementById('new-svg')
31 |   )
32 | })()
33 | ```
34 | 
35 | ## Setting props
36 | 
37 | You can customize `Svg` component using the following properties.
38 | 
39 | - width
40 | - height
41 | - margins
42 | - id
43 | - svgClassName
44 | 
45 | 
46 | ### width
47 | 
48 | **default as `960`**
49 | 
50 | `width` prop is the width of the parent `svg` that wrap the legend component.
51 | 
52 | ### height
53 | 
54 | **default as `500`**
55 | 
56 | `height` prop is the height of the parent `svg` that wrap the legend component.
57 | 
58 | ### margins
59 | 
60 | **default as `{top: 50, right: 50, bottom: 50, left: 50}`**
61 | 
62 | `margins` prop is the margins of the parent `svg` that wrap the legend component.
63 | 
64 | ### id
65 | 
66 | **default as `react-d3-core__container_svg__(auto generate unique id)`**
67 | 
68 | `id` is the setting that set the id of your `svg`
69 | 
70 | ### svgClassName
71 | 
72 | **default as `react-d3-core__container_svg`**
73 | 
74 | `svgClassName` is the setting that set the class of the svg `class="your-svg-class-name"`
75 | 


--------------------------------------------------------------------------------
/docs/title.md:
--------------------------------------------------------------------------------
 1 | # Title
 2 | 
 3 | Your chart title.
 4 | 
 5 | ## Import
 6 | 
 7 | ```js
 8 | var Title = require('react-d3-core').Title;
 9 | ```
10 | 
11 | ## Example
12 | 
13 | ```js
14 | var title = "test-chart",
15 |   titleClassName = "test-chart-class";
16 | 
17 | (function() {
18 |   React.render(
19 |     <Title
20 |       title= {title}
21 |       titleClassName= {titleClassName}
22 |       />
23 |   , document.getElementById('title')
24 |   )
25 | })()
26 | ```
27 | 
28 | ## Setting props
29 | 
30 | You can customize `Title` component using the following properties.
31 | 
32 | - title
33 | - titleClassName
34 | 
35 | ### title
36 | 
37 | **default as 'Chart Title'**
38 | 
39 | `title` is the title that will show up on top of your chart.
40 | 
41 | ### titleClassName
42 | 
43 | **default as `react-d3-core__container_title`**
44 | 
45 | `titleClassName` is the setting that set the class of the title `class="your-title-class-name"`
46 | 


--------------------------------------------------------------------------------
/docs/xaxis.md:
--------------------------------------------------------------------------------
  1 | # Xaxis
  2 | 
  3 | Xaxis component documents. Xaxis is a component, which including Axis, Label components.
  4 | 
  5 | ## Import
  6 | 
  7 | ```js
  8 | var Xaxis = require('react-d3-core').Xaxis;
  9 | ```
 10 | 
 11 | ## Example
 12 | 
 13 | ```js
 14 | var React = require('react');
 15 | var Xaxis = require('react-d3-core').Xaxis;
 16 | 
 17 | (function() {
 18 |   // load your general data, for building xDomain.
 19 |   var chartData = require("dsv?delimiter=,!../../data/garbage.csv");
 20 |   // your date format, use for parsing
 21 |   var parseDate = d3.time.format("%YM%m").parse;
 22 | 
 23 |   // setting you svg width
 24 |   var width = 500,
 25 |     // setting your svg height
 26 |     height = 100,
 27 |     // setting your margins of your svg
 28 |     margins = {top: 20, right: 50, bottom: 20, left: 50},
 29 |     // your x Axis accessor
 30 |     x = function(d) {
 31 |       return parseDate(d.month);
 32 |     },
 33 |     // set your x domain
 34 |     xDomain = d3.extent(chartData, function(d){ return x(d) }),
 35 |     // set your x range
 36 |     xRange = [0, width - margins.left - margins.right],
 37 |     // your scale type 'linear', 'ordinal', 'time'... etc.
 38 |     xScale = 'time',
 39 |     // set your label name
 40 |     xLabel = "Month";
 41 | 
 42 |   React.render(
 43 |     <svg width={width} height={height}>
 44 |       <Xaxis
 45 |         width= {width}
 46 |         height= {height}
 47 |         margins= {margins}
 48 |         x= {x}
 49 |         xDomain= {xDomain}
 50 |         xRange = {xRange}
 51 |         xScale= {xScale}
 52 |         xLabel= {xLabel}
 53 |       />
 54 |     </svg>
 55 |   , document.getElementById('garbage-xaxis')
 56 |   )
 57 | })()
 58 | ```
 59 | 
 60 | ## Settings props
 61 | 
 62 | You can customize `Xaxis` component using the following properties.
 63 | 
 64 | - width
 65 | - height
 66 | - margins
 67 | - showXAxis
 68 | - xAxisClassName
 69 | - x
 70 | - xDomain
 71 | - xRange
 72 | - xScale
 73 | - xRangeRoundBands
 74 | - xTickOrient
 75 | - xTickPadding
 76 | - xInnerTickSize
 77 | - xOuterTickSize
 78 | - xTickFormat
 79 | - xTicks
 80 | - setScale
 81 | - xLabelPosition (see Label -> labelPosition setting)
 82 | - xLabel (see Label -> labelTitle setting)
 83 | - labelOffset (see Label -> labelOffset setting)
 84 | 
 85 | ### width
 86 | 
 87 | **default as `960` (number)**
 88 | 
 89 | `width` prop is the width of the parent `svg` that wrap the legend component.
 90 | 
 91 | ### height
 92 | 
 93 | **default as `500` (number)**
 94 | 
 95 | `height` prop is the height of the parent `svg` that wrap the legend component.
 96 | 
 97 | ### margins
 98 | 
 99 | **default as `{top: 50, right: 50, bottom: 50, left: 50}` (object)**
100 | 
101 | `margins` prop is the margins of the parent `svg` that wrap the legend component.
102 | 
103 | ### xAxisClassName
104 | 
105 | **default as `react-d3-core__axis__xAxis` (string)**
106 | 
107 | `gridAxisClassName` is the setting that set the class of the `<g class="your-grid-class-name">`
108 | 
109 | #### x
110 | 
111 | **Required (function with return value)**
112 | 
113 | `x` is the accessor function of your `x` axis data. For instance, you have a data like.
114 | 
115 | ```json
116 | [
117 |   {
118 |     "name":"Darron Weissnat IV",
119 |     "BMI":20.72,
120 |     "age":39,
121 |     "birthday":"2005-01-03T00:00:00.000Z",
122 |     "city":"East Russel",
123 |     "married":false,
124 |     "index":0
125 |   },
126 |   {
127 |     "name":"Pablo Ondricka",
128 |     "BMI":19.32,
129 |     "age":38,
130 |     "birthday":"1974-05-13T00:00:00.000Z",
131 |     "city":"Lake Edytheville",
132 |     "married":false,
133 |     "index":1
134 |   },
135 |   {
136 |     "name":"Mr. Stella Kiehn Jr.",
137 |     "BMI":16.8,
138 |     "age":34,
139 |     "birthday":"2003-07-25T00:00:00.000Z",
140 |     "city":"Lake Veronicaburgh",
141 |     "married":false,
142 |     "index":2
143 |   },
144 |   {
145 |     "name":"Lavon Hilll I",
146 |     "BMI":20.57,
147 |     "age":12,
148 |     "birthday":"1994-10-26T00:00:00.000Z",
149 |     "city":"Annatown",
150 |     "married":true,
151 |     "index":3
152 |   }
153 | ]
154 | ```
155 | 
156 | and you want to have index as your `x` value, you just set your `x` value to
157 | 
158 | ```js
159 | x = (d) => {
160 |   return d.index;
161 | }
162 | ```
163 | 
164 | #### xDomain
165 | 
166 | **Required (array)**
167 | 
168 | Your `xDomain` prop is to set your xaxis domain, which is your input domain of your x scale.  In most cases, it is something like `[min value, max value]`.
169 | 
170 | #### xRange
171 | 
172 | **Required (array)**
173 | 
174 | **Default as `[0, width - margins.left - margins.right]`**
175 | 
176 | Your `xRange` prop is to set your axis range, which is your output range of your x scale. In most cases, it is `[0, width - margins.left - margins.right]`
177 | 
178 | #### xScale
179 | 
180 | **Required a d3 scale (should be one of the types )**
181 | 
182 | **Default as `linear`**
183 | 
184 | We support scale types:
185 | 
186 | - linear
187 | - identity
188 | - sqrt
189 | - pow
190 | - log
191 | - quantize
192 | - quantile
193 | - ordinal
194 | - time
195 | 
196 | #### xRangeRoundBands
197 | 
198 | **Optional (object)**
199 | 
200 | If you need to setup your `rangeRoundBands` at your x axis. You have to pass an object to the prop with your interval or padding or outerPadding.
201 | 
202 | ```json
203 | {
204 |   "interval": "<your interval>",
205 |   "padding": "<your padding>",
206 |   "outerPadding": "<your outerPadding>"
207 | }
208 | ```
209 | 


--------------------------------------------------------------------------------
/docs/xgrid.md:
--------------------------------------------------------------------------------
  1 | # xGrid
  2 | 
  3 | Grid component is where we construct your grid system into your chart. If you want to build a `xgrid`, set your `Grid` component type to `x`.
  4 | 
  5 | ## Import
  6 | 
  7 | ```js
  8 | var Grid = require('react-d3-core').Grid;
  9 | ```
 10 | 
 11 | ## Example
 12 | 
 13 | ```js
 14 | (function() {
 15 | 
 16 |   var generalChartData = require('json!./user_sample.json');
 17 | 
 18 |   var width = 960,
 19 |     height = 500,
 20 |     margins = {top: 20, right: 50, bottom: 30, left: 50},
 21 |     gridAxisClassName = "test-grid-class",
 22 |     x = function(d) {
 23 |       return d.index;
 24 |     },
 25 |     xDomain = d3.extent(generalChartData, x),
 26 |     xRange = [0, width - margins.left - margins.right],
 27 |     xScale = 'linear';
 28 | 
 29 |   React.render(
 30 |     <svg width={width} height={height}>
 31 |       <Grid
 32 |         width= {width}
 33 |         height= {height}
 34 |         margins= {margins}
 35 |         type= {'x'}
 36 |         gridAxisClassName= {gridAxisClassName}
 37 |         x= {x}
 38 |         xDomain= {xDomain}
 39 |         xRange= {xRange}
 40 |         xScale= {xScale}
 41 |       />
 42 |     </svg>
 43 |   , document.getElementById('blank-grid')
 44 |   )
 45 | })()
 46 | 
 47 | ```
 48 | 
 49 | ## Components
 50 | 
 51 | `grid` component contains:
 52 | 
 53 | - [axis](./axis.md)
 54 | 
 55 | ## Settings props
 56 | 
 57 | You can customize `Grid` component using the following properties.
 58 | 
 59 | - width
 60 | - height
 61 | - margins
 62 | - type (set `x` if building `xaxis`, `y` if building `yaxis`)
 63 | - gridAxisClassName
 64 | - x
 65 | - xDomain
 66 | - xRange
 67 | - xScale
 68 | - xRangeRoundBands
 69 | 
 70 | ### width
 71 | 
 72 | **default as `960` (number)**
 73 | 
 74 | `width` prop is the width of the parent `svg` that wrap the legend component.
 75 | 
 76 | ### height
 77 | 
 78 | **default as `500` (number)**
 79 | 
 80 | `height` prop is the height of the parent `svg` that wrap the legend component.
 81 | 
 82 | ### margins
 83 | 
 84 | **default as `{top: 50, right: 50, bottom: 50, left: 50}` (object)**
 85 | 
 86 | `margins` prop is the margins of the parent `svg` that wrap the legend component.
 87 | 
 88 | ### type
 89 | 
 90 | **default as `x` (string)**
 91 | 
 92 | `type` prop define which kind of grid system do you want to make x or y.
 93 | 
 94 | ### gridAxisClassName
 95 | 
 96 | **default as `react-d3-core__grid_axis` (string)**
 97 | 
 98 | `gridAxisClassName` is the setting that set the class of the `<g class="your-grid-class-name">`
 99 | 
100 | #### x
101 | 
102 | **Required (function with return value)**
103 | 
104 | `x` is the accessor function of your `x` axis data. For instance, you have a data like.
105 | 
106 | ```json
107 | [
108 |   {
109 |     "name":"Darron Weissnat IV",
110 |     "BMI":20.72,
111 |     "age":39,
112 |     "birthday":"2005-01-03T00:00:00.000Z",
113 |     "city":"East Russel",
114 |     "married":false,
115 |     "index":0
116 |   },
117 |   {
118 |     "name":"Pablo Ondricka",
119 |     "BMI":19.32,
120 |     "age":38,
121 |     "birthday":"1974-05-13T00:00:00.000Z",
122 |     "city":"Lake Edytheville",
123 |     "married":false,
124 |     "index":1
125 |   },
126 |   {
127 |     "name":"Mr. Stella Kiehn Jr.",
128 |     "BMI":16.8,
129 |     "age":34,
130 |     "birthday":"2003-07-25T00:00:00.000Z",
131 |     "city":"Lake Veronicaburgh",
132 |     "married":false,
133 |     "index":2
134 |   },
135 |   {
136 |     "name":"Lavon Hilll I",
137 |     "BMI":20.57,
138 |     "age":12,
139 |     "birthday":"1994-10-26T00:00:00.000Z",
140 |     "city":"Annatown",
141 |     "married":true,
142 |     "index":3
143 |   }
144 | ]
145 | ```
146 | 
147 | and you want to have index as your `x` value, you just set your `x` value to
148 | 
149 | ```js
150 | x = (d) => {
151 |   return d.index;
152 | }
153 | ```
154 | 
155 | #### xDomain
156 | 
157 | **Required (array)**
158 | 
159 | Your `xDomain` prop is to set your xaxis domain, which is your input domain of your x scale.  In most cases, it is something like `[min value, max value]`.
160 | 
161 | #### xRange
162 | 
163 | **Required (array)**
164 | 
165 | **Default as `[0, width - margins.left - margins.right]`**
166 | 
167 | Your `xRange` prop is to set your axis range, which is your output range of your x scale. In most cases, it is `[0, width - margins.left - margins.right]`
168 | 
169 | #### xScale
170 | 
171 | **Required a d3 scale (should be one of the types )**
172 | 
173 | **Default as `linear`**
174 | 
175 | We support scale types:
176 | 
177 | - linear
178 | - identity
179 | - sqrt
180 | - pow
181 | - log
182 | - quantize
183 | - quantile
184 | - ordinal
185 | - time
186 | 
187 | #### xRangeRoundBands
188 | 
189 | **Optional (object)**
190 | 
191 | If you need to setup your `rangeRoundBands` at your x axis. You have to pass an object to the prop with your interval or padding or outerPadding.
192 | 
193 | ```json
194 | {
195 |   "interval": "<your interval>",
196 |   "padding": "<your padding>",
197 |   "outerPadding": "<your outerPadding>"
198 | }
199 | ```
200 | 


--------------------------------------------------------------------------------
/docs/yaxis.md:
--------------------------------------------------------------------------------
  1 | # Yaxis
  2 | 
  3 | Yaxis component documents. Yaxis is a component, which including Axis, Label components.
  4 | 
  5 | ## Import
  6 | 
  7 | ```js
  8 | var Yaxis = require('react-d3-core').Yaxis;
  9 | ```
 10 | 
 11 | ## Settings props
 12 | 
 13 | You can customize `Yaxis` component using the following properties.
 14 | 
 15 | - width
 16 | - height
 17 | - margins
 18 | - showYAxis
 19 | - yAxisClassName
 20 | - y
 21 | - yDomain
 22 | - yRange
 23 | - yScale
 24 | - yRangeRoundBands
 25 | - TickOrient
 26 | - yTickPadding
 27 | - yInnerTickSize
 28 | - yOuterTickSize
 29 | - yTickFormat
 30 | - yTicks
 31 | - setScale
 32 | - yLabelPosition (see Label -> labelPosition setting)
 33 | - yLabel (see Label -> labelTitle setting)
 34 | - labelOffset (see Label -> labelOffset setting)
 35 | 
 36 | ### width
 37 | 
 38 | **default as `960` (number)**
 39 | 
 40 | `width` prop is the width of the parent `svg` that wrap the legend component.
 41 | 
 42 | ### height
 43 | 
 44 | **default as `500` (number)**
 45 | 
 46 | `height` prop is the height of the parent `svg` that wrap the legend component.
 47 | 
 48 | ### margins
 49 | 
 50 | **default as `{top: 50, right: 50, bottom: 50, left: 50}` (object)**
 51 | 
 52 | `margins` prop is the margins of the parent `svg` that wrap the legend component.
 53 | 
 54 | ### yAxisClassName
 55 | 
 56 | **default as `react-d3-core__axis__yAxis` (string)**
 57 | 
 58 | `gridAxisClassName` is the setting that set the class of the `<g class="your-grid-class-name">`
 59 | 
 60 | #### y
 61 | 
 62 | **Required (function with return value)**
 63 | 
 64 | `y` is the accessor function of your `y` axis data. For instance, you have a data like.
 65 | 
 66 | ```json
 67 | [
 68 |   {
 69 |     "name":"Darron Weissnat IV",
 70 |     "BMI":20.72,
 71 |     "age":39,
 72 |     "birthday":"2005-01-03T00:00:00.000Z",
 73 |     "city":"East Russel",
 74 |     "married":false,
 75 |     "index":0
 76 |   },
 77 |   {
 78 |     "name":"Pablo Ondricka",
 79 |     "BMI":19.32,
 80 |     "age":38,
 81 |     "birthday":"1974-05-13T00:00:00.000Z",
 82 |     "city":"Lake Edytheville",
 83 |     "married":false,
 84 |     "index":1
 85 |   },
 86 |   {
 87 |     "name":"Mr. Stella Kiehn Jr.",
 88 |     "BMI":16.8,
 89 |     "age":34,
 90 |     "birthday":"2003-07-25T00:00:00.000Z",
 91 |     "city":"Lake Veronicaburgh",
 92 |     "married":false,
 93 |     "index":2
 94 |   },
 95 |   {
 96 |     "name":"Lavon Hilll I",
 97 |     "BMI":20.57,
 98 |     "age":12,
 99 |     "birthday":"1994-10-26T00:00:00.000Z",
100 |     "city":"Annatown",
101 |     "married":true,
102 |     "index":3
103 |   }
104 | ]
105 | ```
106 | 
107 | and you want to have index as your `y` value, you just set your `y` value to
108 | 
109 | ```js
110 | y = (d) => {
111 |   return d.index;
112 | }
113 | ```
114 | 
115 | #### yDomain
116 | 
117 | **Required (array)**
118 | 
119 | Your `yDomain` prop is to set your yaxis domain, which is your input domain of your y scale.  In most cases, it is something like `[min value, max value]`.
120 | 
121 | #### yRange
122 | 
123 | **Required (array)**
124 | 
125 | **default as `[height - margins.top - margins.bottom, 0]`**
126 | 
127 | Your `yRange` prop is to set your axis range, which is your output range of your y scale. In most cases, it is `[height - margins.top - margins.bottom, 0]`
128 | 
129 | #### yScale
130 | 
131 | **Required a d3 scale (should be one of the types )**
132 | 
133 | **default as `linear`**
134 | 
135 | We support scale types:
136 | 
137 | - linear
138 | - identity
139 | - sqrt
140 | - pow
141 | - log
142 | - quantize
143 | - quantile
144 | - ordinal
145 | - time
146 | 
147 | #### yRangeRoundBands
148 | 
149 | **Optional (object)**
150 | 
151 | If you need to setup your `rangeRoundBands` at your y axis. You have to pass an object to the prop with your interval or padding or outerPadding.
152 | 
153 | ```json
154 | {
155 |   "interval": "<your interval>",
156 |   "padding": "<your padding>",
157 |   "outerPadding": "<your outerPadding>"
158 | }
159 | ```
160 | 


--------------------------------------------------------------------------------
/docs/ygrid.md:
--------------------------------------------------------------------------------
  1 | # yGrid
  2 | 
  3 | Grid component is where we construct your grid system into your chart. If you want to build a `ygrid`, set your `Grid` component type to `y`.
  4 | 
  5 | ## Import
  6 | 
  7 | ```js
  8 | var Grid = require('react-d3-core').Grid;
  9 | ```
 10 | 
 11 | ## Example
 12 | 
 13 | ```js
 14 | (function() {
 15 | 
 16 |   var generalChartData = require('json!./user_sample.json');
 17 | 
 18 |   var width = 960,
 19 |     height = 500,
 20 |     margins = {top: 20, right: 50, bottom: 30, left: 50},
 21 |     gridAxisClassName = "test-grid-class",
 22 |     y = function(d) {
 23 |       return d.age;
 24 |     },
 25 |     yDomain = d3.extent(generalChartData, y),
 26 |     yRange = [height - margins.top - margins.bottom, 0],
 27 |     yScale = 'linear';
 28 | 
 29 | 
 30 |   React.render(
 31 |     <svg width={width} height={height}>
 32 |       <Grid
 33 |         width= {width}
 34 |         height= {height}
 35 |         margins= {margins}
 36 |         type= {'y'}
 37 |         gridAxisClassName= {gridAxisClassName}
 38 |         y= {y}
 39 |         yDomain= {yDomain}
 40 |         yRange= {yRange}
 41 |         yScale= {yScale}
 42 |       />
 43 |     </svg>
 44 |   , document.getElementById('blank-grid')
 45 |   )
 46 | })()
 47 | ```
 48 | 
 49 | `grid` component contains:
 50 | 
 51 | - [axis](./axis.md)
 52 | 
 53 | ## Settings props
 54 | 
 55 | You can customize `Grid` component using the following properties.
 56 | 
 57 | - width
 58 | - height
 59 | - margins
 60 | - type (set `x` if building `xaxis`, `y` if building `yaxis`)
 61 | - gridAxisClassName
 62 | - y
 63 | - yDomain
 64 | - yRange
 65 | - yScale
 66 | - yRangeRoundBands
 67 | 
 68 | ### width
 69 | 
 70 | **default as `960` (number)**
 71 | 
 72 | `width` prop is the width of the parent `svg` that wrap the legend component.
 73 | 
 74 | ### height
 75 | 
 76 | **default as `500` (number)**
 77 | 
 78 | `height` prop is the height of the parent `svg` that wrap the legend component.
 79 | 
 80 | ### margins
 81 | 
 82 | **default as `{top: 50, right: 50, bottom: 50, left: 50}` (object)**
 83 | 
 84 | `margins` prop is the margins of the parent `svg` that wrap the legend component.
 85 | 
 86 | ### type
 87 | 
 88 | **default as `x` (string)**
 89 | 
 90 | `type` prop define which kind of grid system do you want to make x or y.
 91 | 
 92 | ### gridAxisClassName
 93 | 
 94 | **default as `react-d3-core__grid_axis` (string)**
 95 | 
 96 | `gridAxisClassName` is the setting that set the class of the `<g class="your-grid-class-name">`
 97 | 
 98 | #### y
 99 | 
100 | Same as `x` in [xGrid](./xgrid.md)
101 | 
102 | #### yDomain
103 | 
104 | Same as `xDomain` in [xGrid](./xgrid.md)
105 | 
106 | #### yRange
107 | 
108 | **default as `[height - margins.top - margins.bottom, 0]`**
109 | 
110 | Simalar as `xRange` in [xGrid](./xgrid.md). Your `yRange` prop is to set your axis range, which is your output range of your y scale. In most cases, it is `[height - margins.top - margins.bottom, 0]`
111 | 
112 | 
113 | #### yScale
114 | 
115 | Same as `xScale` in [xGrid](./xgrid.md)
116 | 
117 | #### yRangeRoundBands
118 | 
119 | Same as `xRangeRoundBands` in [xGrid](./xgrid.md)
120 | 


--------------------------------------------------------------------------------
/example/container.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import {Nav, NavItem} from 'react-bootstrap'
 3 | 
 4 | export default class ContainerExample extends Component {
 5 | 	constructor(props) {
 6 | 		super(props)
 7 | 	}
 8 | 
 9 | 	render() {
10 | 
11 | 		const route = this.props.routes[1].path || 'container'
12 | 
13 | 		return (
14 | 			<div>
15 | 				<nav className="navbar navbar-default navbar-fixed-top">
16 | 				  <div className="container">
17 | 				    <div className="navbar-header">
18 | 				      <a className="navbar-brand" href="/example">
19 | 				        React-d3 core
20 | 				      </a>
21 | 				    </div>
22 | 				  </div>
23 | 				</nav>
24 | 				<div style={{marginTop: '50px', padding: '30px'}}>
25 | 					<Nav bsStyle="pills" justified activeKey={route}>
26 | 	          <NavItem eventKey="container" href="/example/container">Chart Container</NavItem>
27 | 	          <NavItem eventKey="grid" href="/example/grid">Grid</NavItem>
28 | 	          <NavItem eventKey="label" href="/example/label">Label</NavItem>
29 | 	          <NavItem eventKey="legend" href="/example/legend">Legend</NavItem>
30 | 	          <NavItem eventKey="xaxis" href="/example/xaxis">Xaixs</NavItem>
31 | 	          <NavItem eventKey="yaxis" href="/example/yaxis">Yaixs</NavItem>
32 | 	        </Nav>
33 | 	      </div>
34 | 				{this.props.children}
35 | 			</div>
36 | 		)
37 | 	}
38 | }


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html>
 3 |   <head>
 4 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
 5 |     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 6 |     <title>react-d3-core</title>
 7 |   </head>
 8 |   <body>
 9 |     <div id="root"></div>
10 |     <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
11 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
12 |     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
13 |     <script src="/static/index.js"></script>
14 |   </body>
15 | </html>


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Router, Route, browserHistory, IndexRedirect} from 'react-router'
 4 | import Container from './container'
 5 | 
 6 | import {default as ChartContainer} from './src/container'
 7 | import Grid from './src/grid'
 8 | import Label from './src/label'
 9 | import Legend from './src/legend'
10 | import Xaxis from './src/xaxis'
11 | import Yaxis from './src/yaxis'
12 | 
13 | // Declarative route configuration (could also load this config lazily
14 | // instead, all you really need is a single root route, you don't need to
15 | // colocate the entire config).
16 |         
17 | 
18 | ReactDOM.render((
19 |   <Router history={browserHistory}>
20 |     <Route path="/example" component={Container}>
21 |       <IndexRedirect to="container"/>
22 |     	<Route path="container" component={ChartContainer}/>
23 |       <Route path="grid" component={Grid}/>
24 |       <Route path="label" component={Label}/>
25 |       <Route path="legend" component={Legend}/>
26 |       <Route path="xaxis" component={Xaxis}/>
27 |       <Route path="yaxis" component={Yaxis}/>
28 |     </Route>
29 |   </Router>
30 | ), document.getElementById('root'))


--------------------------------------------------------------------------------
/example/src/animate_container.jsx:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var React = require('react');
  4 | var ReactDOM = require('react-dom');
  5 | var Chart = require('../../lib/index').Chart;
  6 | 
  7 | // Example
  8 | (function() {
  9 | 
 10 |   var AnimateChart = React.createClass({
 11 |     getInitialState: function() {
 12 |       return this.props;
 13 |     },
 14 |     componentDidMount: function() {
 15 |       var title = "test chart lib"
 16 |       var i = 0;
 17 | 
 18 |       var that = this;
 19 | 
 20 |       window.setInterval(function() {
 21 | 
 22 |         var title_new = title + ' => ' + i + ' times';
 23 |         i++;
 24 | 
 25 |         if(i % 2 == 1) {
 26 |           var chartSeries = [
 27 |               {
 28 |                 field: 'Under 5 Years',
 29 |                 name: 'Under 5 Years',
 30 |                 color: '#1f77b4'
 31 |               },
 32 |               {
 33 |                 field: '5 to 13 Years',
 34 |                 name: '5 to 13 Years',
 35 |                 color: '#ff7f0e'
 36 |               },
 37 |               {
 38 |                 field: '14 to 17 Years',
 39 |                 name: '14 to 17 Years',
 40 |                 color: '#2ca02c'
 41 |               },
 42 |               {
 43 |                 field: '18 to 24 Years',
 44 |                 name: '18 to 24 Years',
 45 |                 color: '#d62728'
 46 |               },
 47 |               {
 48 |                 field: '25 to 44 Years',
 49 |                 name: '25 to 44 Years',
 50 |                 color: '#9467bd'
 51 |               },
 52 |               {
 53 |                 field: '45 to 64 Years',
 54 |                 name: '45 to 64 Years',
 55 |                 color: '#8c564b'
 56 |               },
 57 |               {
 58 |                 field: '65 Years and Over',
 59 |                 name: '65 Years and Over',
 60 |                 color: '#e377c2'
 61 |               }
 62 |             ]
 63 | 
 64 |           var width = 960
 65 |         }else {
 66 |           var chartSeries = [
 67 |               {
 68 |                 field: 'Under 5 Years',
 69 |                 name: 'Under 5 Years',
 70 |                 color: '#1f77b4'
 71 |               },
 72 |               {
 73 |                 field: '5 to 13 Years',
 74 |                 name: '5 to 13 Years',
 75 |                 color: '#ff7f0e'
 76 |               }
 77 |             ];
 78 | 
 79 |           var width = 500
 80 |         }
 81 | 
 82 |         that._updateState(title_new, chartSeries, width)
 83 |       }, 2000)
 84 |     },
 85 |     _updateState: function(title, chartSeries, width) {
 86 |       this.setState({
 87 |         title: title,
 88 |         chartSeries: chartSeries,
 89 |         width: width
 90 |       })
 91 |     },
 92 |     render: function() {
 93 |       var width = 960,
 94 |         height = 500,
 95 |         margins = {top: 20, right: 50, bottom: 20, left: 50},
 96 |         id = "test-chart",
 97 |         svgClassName = "test-chart-class",
 98 |         titleClassName = "test-chart-title-class";
 99 | 
100 |       var chartSeries = [
101 |           {
102 |             field: 'Under 5 Years',
103 |             name: 'Under 5 Years',
104 |             color: '#1f77b4'
105 |           },
106 |           {
107 |             field: '5 to 13 Years',
108 |             name: '5 to 13 Years',
109 |             color: '#ff7f0e'
110 |           },
111 |           {
112 |             field: '14 to 17 Years',
113 |             name: '14 to 17 Years',
114 |             color: '#2ca02c'
115 |           },
116 |           {
117 |             field: '18 to 24 Years',
118 |             name: '18 to 24 Years',
119 |             color: '#d62728'
120 |           },
121 |           {
122 |             field: '25 to 44 Years',
123 |             name: '25 to 44 Years',
124 |             color: '#9467bd'
125 |           },
126 |           {
127 |             field: '45 to 64 Years',
128 |             name: '45 to 64 Years',
129 |             color: '#8c564b'
130 |           },
131 |           {
132 |             field: '65 Years and Over',
133 |             name: '65 Years and Over',
134 |             color: '#e377c2'
135 |           }
136 |         ]
137 | 
138 |       var title = "test chart lib"
139 | 
140 |       return (
141 |         <Chart
142 |           title= {title}
143 |           width= {width}
144 |           height= {height}
145 |           margins= {margins}
146 |           id= {id}
147 |           svgClassName= {svgClassName}
148 |           titleClassName= {titleClassName}
149 |           chartSeries= {chartSeries}
150 |           {...this.state}
151 |         />
152 |       )
153 |     }
154 |   })
155 | 
156 | 
157 |   ReactDOM.render(
158 |     <AnimateChart />
159 |   , document.getElementById('blank-animate_container'))
160 | 
161 | })()
162 | 


--------------------------------------------------------------------------------
/example/src/animate_xaxis.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var React = require('react');
 4 | var ReactDOM = require('react-dom');
 5 | var Xaxis = require('../../lib').Xaxis;
 6 | 
 7 | // Example
 8 | (function() {
 9 | 
10 |   var AnimateChart = React.createClass({
11 |     getInitialState: function() {
12 |       return this.props;
13 |     },
14 |     componentDidMount: function() {
15 |       var generalChartData = require("json!./data/state_age.json");
16 |       var i = 0;
17 | 
18 |       var that = this;
19 | 
20 |       window.setInterval(function() {
21 |         i++;
22 | 
23 |         if(i % 2 == 1) {
24 |           var xDomain = generalChartData.map(function(d) { return d.State; })
25 |         }else {
26 |           var xDomain = ["CA", "TX"]
27 |         }
28 | 
29 |         that._updateState(xDomain)
30 |       }, 2000)
31 |     },
32 |     _updateState: function(xDomain) {
33 |       this.setState({
34 |         xDomain: xDomain
35 |       })
36 |     },
37 |     render: function() {
38 |       var generalChartData = require("json!./data/state_age.json");
39 |       var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; });
40 | 
41 |       generalChartData.forEach(function(d) {
42 |         var y0 = 0;
43 |         d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
44 |         d.total = d.ages[d.ages.length - 1].y1;
45 |       });
46 | 
47 |       var x = function(d) {
48 |           return d.State;
49 |         },
50 |         xDomain = generalChartData.map(function(d) { return d.State; }),
51 |         xRangeRoundBands = {interval: [0, 860], padding: .1},
52 |         xScale = 'ordinal',
53 |         xLabel = "Age";
54 | 
55 |       return (
56 |         <svg width={960} height={500}>
57 |           <Xaxis
58 |             x= {x}
59 |             xDomain= {xDomain}
60 |             xRangeRoundBands= {xRangeRoundBands}
61 |             xScale= {xScale}
62 |             xLabel = {xLabel}
63 |             {...this.state}
64 |           />
65 |         </svg>
66 |       )
67 |     }
68 |   })
69 | 
70 | 
71 |   ReactDOM.render(
72 |     <AnimateChart />
73 |   , document.getElementById('blank-animate_xaxis'))
74 | 
75 | })()
76 | 


--------------------------------------------------------------------------------
/example/src/blank_chart.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var React = require('react');
 4 | 
 5 | 
 6 | var Chart = require('../../lib').Chart;
 7 | var Xaxis = require('../../lib').Xaxis;
 8 | var Yaxis = require('../../lib').Yaxis;
 9 | var Legend = require('../../lib').Legend;
10 | var Grid = require('../../lib').Grid;
11 | var Label = require('../../lib').Label;
12 | 
13 | var BlankChart = React.createClass({
14 | 
15 |   render: function() {
16 | 
17 |     return (
18 |       <Chart {...this.props}>
19 |         <Grid type="x" {...this.props} {...this.state} />
20 |         <Grid type="y" {...this.props} {...this.state} />
21 |         <Xaxis
22 |           {...this.props}
23 |           {...this.state}
24 |           style= {{
25 |             "transform": "rotate(45deg)"
26 |           }}
27 |           />
28 |         <Yaxis
29 |           {...this.props}
30 |           {...this.state}
31 |           style= {{
32 |             "transform": "rotate(-45deg)"
33 |           }}
34 |           />
35 |       </Chart>
36 |     )
37 |   }
38 | })
39 | 
40 | module.exports = BlankChart;
41 | 


--------------------------------------------------------------------------------
/example/src/components.jsx:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | var React = require('react');
  4 | var ReactDOM = require('react-dom');
  5 | var BlankChart = require('./blank_chart.jsx');
  6 | 
  7 | (function() {
  8 | 
  9 |   var generalChartData = require("json!./data/state_age.json");
 10 |   var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; });
 11 | 
 12 |   generalChartData.forEach(function(d) {
 13 |     var y0 = 0;
 14 |     d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
 15 |     d.total = d.ages[d.ages.length - 1].y1;
 16 |   });
 17 | 
 18 |   var width = 960,
 19 |     height = 500,
 20 |     margins = {top: 50, right: 50, bottom: 100, left: 100},
 21 |     id = "test-chart",
 22 |     title = "test chart lib",
 23 |     svgClassName = "test-chart-class",
 24 |     titleClassName = "test-chart-title-class",
 25 |     legendClassName = "test-legend",
 26 |     showLegend = true,
 27 |     showXAxis = true,
 28 |     showYAxis = true,
 29 |     chartSeries = [
 30 |       {
 31 |         field: 'Under 5 Years',
 32 |         name: 'Under 5 Years',
 33 |         color: '#1f77b4'
 34 |       },
 35 |       {
 36 |         field: '5 to 13 Years',
 37 |         name: '5 to 13 Years',
 38 |         color: '#ff7f0e'
 39 |       },
 40 |       {
 41 |         field: '14 to 17 Years',
 42 |         name: '14 to 17 Years',
 43 |         color: '#2ca02c'
 44 |       },
 45 |       {
 46 |         field: '18 to 24 Years',
 47 |         name: '18 to 24 Years',
 48 |         color: '#d62728'
 49 |       },
 50 |       {
 51 |         field: '25 to 44 Years',
 52 |         name: '25 to 44 Years',
 53 |         color: '#9467bd'
 54 |       },
 55 |       {
 56 |         field: '45 to 64 Years',
 57 |         name: '45 to 64 Years',
 58 |         color: '#8c564b'
 59 |       },
 60 |       {
 61 |         field: '65 Years and Over',
 62 |         name: '65 Years and Over',
 63 |         color: '#e377c2'
 64 |       },
 65 | 
 66 |     ],
 67 |     x = function(d) {
 68 |       return d.State;
 69 |     },
 70 |     xOrient = 'bottom',
 71 |     xTickOrient = 'bottom',
 72 |     xDomain = generalChartData.map(function(d) { return d.State; }),
 73 |     xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1},
 74 |     xScale = 'ordinal',
 75 |     xAxisClassName = 'x-axis',
 76 |     xLabel = "Age",
 77 |     y = function(d) {
 78 |       return +d;
 79 |     },
 80 |     yOrient = 'left',
 81 |     yTickOrient = 'left',
 82 |     yDomain = [0, d3.max(generalChartData, function(d) { return d.total; })],
 83 |     yScale = 'linear',
 84 |     yAxisClassName = 'y-axis',
 85 |     yLabel = "Population",
 86 |     yTickFormat = d3.format(".2s");
 87 | 
 88 |   ReactDOM.render(
 89 |     <BlankChart
 90 |       title= {title}
 91 |       data= {generalChartData}
 92 |       width= {width}
 93 |       height= {height}
 94 |       id= {id}
 95 |       margins= {margins}
 96 |       labelOffset = {70}
 97 |       svgClassName= {svgClassName}
 98 |       titleClassName= {titleClassName}
 99 |       yAxisClassName= {yAxisClassName}
100 |       xAxisClassName= {xAxisClassName}
101 |       legendPosition= 'right'
102 |       categoricalColors= {d3.scale.category10()}
103 |       chartSeries = {chartSeries}
104 |       lineClass = 'test-line-class'
105 |       barClass= 'test-bar-class'
106 |       scatterClass = 'test-line-dot-class'
107 |       gridAxisClassName = 'grid-axis-class'
108 |       showScatter = {true}
109 |       showLegend= {showLegend}
110 |       showXAxis= {showXAxis}
111 |       showYAxis= {showYAxis}
112 |       x= {x}
113 |       showXGrid= {false}
114 |       xDomain= {xDomain}
115 |       xRangeRoundBands= {xRangeRoundBands}
116 |       xScale= {xScale}
117 |       xOrient= {xOrient}
118 |       xTickOrient= {xTickOrient}
119 |       xTickPadding = {3}
120 |       xInnerTickSize = {6}
121 |       xOuterTickSize = {6}
122 |       xLabel = {xLabel}
123 |       xLabelPosition = 'bottom'
124 |       y= {y}
125 |       showYGrid= {true}
126 |       yOrient= {yOrient}
127 |       yDomain= {yDomain}
128 |       yScale= {yScale}
129 |       yTickOrient= {yTickOrient}
130 |       yTickPadding = {4}
131 |       yInnerTickSize = {6}
132 |       yOuterTickSize = {6}
133 |       yTickFormat= {yTickFormat}
134 |       yLabel = {yLabel}
135 |       yLabelPosition = 'left'
136 |     />
137 |   , document.getElementById('blank-blank_chart')
138 |   )
139 | })()
140 | 


--------------------------------------------------------------------------------
/example/src/container.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import React, {Component} from 'react'
 4 | import {Chart} from '../../src'
 5 | 
 6 | const width = 960,
 7 |   height = 500,
 8 |   margins = {top: 20, right: 50, bottom: 20, left: 50},
 9 |   id = "test-chart",
10 |   svgClassName = "test-chart-class",
11 |   titleClassName = "test-chart-title-class";
12 | 
13 | const chartSeries = [
14 |     {
15 |       field: 'Under 5 Years',
16 |       name: 'Under 5 Years',
17 |       color: '#1f77b4'
18 |     },
19 |     {
20 |       field: '5 to 13 Years',
21 |       name: '5 to 13 Years',
22 |       color: '#ff7f0e'
23 |     },
24 |     {
25 |       field: '14 to 17 Years',
26 |       name: '14 to 17 Years',
27 |       color: '#2ca02c'
28 |     },
29 |     {
30 |       field: '18 to 24 Years',
31 |       name: '18 to 24 Years',
32 |       color: '#d62728'
33 |     },
34 |     {
35 |       field: '25 to 44 Years',
36 |       name: '25 to 44 Years',
37 |       color: '#9467bd'
38 |     },
39 |     {
40 |       field: '45 to 64 Years',
41 |       name: '45 to 64 Years',
42 |       color: '#8c564b'
43 |     },
44 |     {
45 |       field: '65 Years and Over',
46 |       name: '65 Years and Over',
47 |       color: '#e377c2'
48 |     }
49 |   ]
50 | 
51 | const title = "test chart lib"
52 | 
53 | export default class ContainerSample extends Component {
54 | 
55 |   render() {
56 |     return(
57 |       <Chart
58 |         title= {title}
59 |         width= {width}
60 |         height= {height}
61 |         margins= {margins}
62 |         id= {id}
63 |         svgClassName= {svgClassName}
64 |         titleClassName= {titleClassName}
65 |         chartSeries= {chartSeries}
66 |       />
67 |     )
68 |   }
69 | }


--------------------------------------------------------------------------------
/example/src/css/container_update.css:
--------------------------------------------------------------------------------
1 | svg {
2 |   background-color: red !important
3 | }
4 | 


--------------------------------------------------------------------------------
/example/src/data/garbage.csv:
--------------------------------------------------------------------------------
  1 | month,total,incineration,garbageBury,largeGarbageRecycle,foodWaste,recycle,other,average
  2 | 2001M01,770095,295355,339023,0,0,75630,60087,1.124
  3 | 2001M02,629350,248283,256351,0,0,74732,49983,1.016
  4 | 2001M03,663170,271344,264674,0,0,77137,50015,0.966
  5 | 2001M04,650177,279304,250420,0,0,72205,48249,0.976
  6 | 2001M05,713649,326336,246014,0,0,96295,45004,1.034
  7 | 2001M06,695624,326309,236874,0,0,91924,40516,1.041
  8 | 2001M07,704734,356180,206992,0,0,96427,45136,1.020
  9 | 2001M08,693821,345400,211975,0,0,98186,38261,1.005
 10 | 2001M09,795625,362212,304039,0,0,88582,40793,1.192
 11 | 2001M10,726018,315929,270775,0,0,101538,37775,1.052
 12 | 2001M11,650861,285575,236909,0,0,94331,34046,0.973
 13 | 2001M12,640683,324674,191039,0,0,89766,35205,0.926
 14 | 2002M01,683665,345433,198188,0,0,108206,31838,0.988
 15 | 2002M02,672584,353367,198474,0,0,95222,25522,1.075
 16 | 2002M03,652716,341320,182254,0,0,102716,26426,0.942
 17 | 2002M04,662728,363258,181085,0,0,93790,24595,0.987
 18 | 2002M05,694568,380675,189499,0,0,102992,21401,1.001
 19 | 2002M06,671190,373771,176130,0,0,92674,28614,1.003
 20 | 2002M07,691517,390530,170942,0,0,103016,27029,1.003
 21 | 2002M08,681693,382657,163702,0,0,108936,26397,0.989
 22 | 2002M09,649518,359573,165399,0,0,102177,22369,0.975
 23 | 2002M10,668299,343228,185622,0,0,110382,29066,0.970
 24 | 2002M11,612179,328975,156378,0,0,107199,19628,0.917
 25 | 2002M12,644181,353381,162517,0,0,114527,13756,0.933
 26 | 2003M01,710215,397710,174292,0,8948,113909,15356,1.023
 27 | 2003M02,550699,316471,123177,0,10139,90116,10796,0.876
 28 | 2003M03,610571,353792,128981,0,11510,103688,12600,0.878
 29 | 2003M04,627469,363105,133639,0,12352,100401,17973,0.930
 30 | 2003M05,668782,360933,164640,0,13815,116191,13203,0.959
 31 | 2003M06,654195,371453,147821,0,13498,110205,11219,0.969
 32 | 2003M07,675156,377136,146773,0,14882,126174,10192,0.969
 33 | 2003M08,656865,376204,135333,0,14614,121063,9651,0.942
 34 | 2003M09,668895,384371,136603,0,15800,123077,9045,0.990
 35 | 2003M10,639074,351194,135405,0,16410,127017,9048,0.915
 36 | 2003M11,602510,313748,145138,0,17277,114353,11994,0.890
 37 | 2003M12,643587,339933,141087,0,19356,132965,10246,0.920
 38 | 2004M01,696099,395233,151548,0,21789,117914,9614,0.995
 39 | 2004M02,591716,326367,117994,0,21379,117710,8266,0.904
 40 | 2004M03,627731,349888,116664,0,22963,131049,7166,0.896
 41 | 2004M04,619103,339664,124011,0,23390,121882,10156,0.913
 42 | 2004M05,651088,361769,137501,0,25916,118645,7257,0.929
 43 | 2004M06,669185,387857,117681,0,26548,131773,5327,0.987
 44 | 2004M07,667594,394328,116719,0,25424,126374,4748,0.953
 45 | 2004M08,656224,382116,114372,0,24301,130745,4691,0.936
 46 | 2004M09,640068,366284,111339,0,24823,132611,5012,0.943
 47 | 2004M10,619278,330194,124193,0,25208,134844,4839,0.882
 48 | 2004M11,626843,332284,123097,0,27554,136315,7594,0.922
 49 | 2004M12,650031,341754,119047,0,29970,152944,6317,0.925
 50 | 2005M01,656035,380660,104940,2574,35827,126559,5475,0.933
 51 | 2005M02,640793,370156,104681,2200,36133,123289,4334,1.009
 52 | 2005M03,650863,359579,98553,1347,37432,150645,3307,0.926
 53 | 2005M04,633506,332646,104069,1512,42990,147234,5054,0.931
 54 | 2005M05,666509,359270,106375,1561,43718,150256,5328,0.947
 55 | 2005M06,670038,380450,90663,2163,41526,151669,3566,0.984
 56 | 2005M07,683512,385660,96356,4873,37372,156553,2697,0.971
 57 | 2005M08,679191,382372,93080,2675,37483,162856,725,0.965
 58 | 2005M09,660542,364280,89777,3153,37439,163373,2521,0.969
 59 | 2005M10,629688,335791,97689,2773,37973,153757,1705,0.894
 60 | 2005M11,622630,318023,99670,2573,37572,162304,2488,0.913
 61 | 2005M12,635378,331511,98745,2171,38736,161159,3055,0.901
 62 | 2006M01,687321,367784,103616,3578,41125,167722,3496,0.975
 63 | 2006M02,596097,324825,84760,1464,42845,140125,2079,0.935
 64 | 2006M03,635158,326259,82062,2267,44991,178157,1421,0.899
 65 | 2006M04,612048,320099,73868,1566,48058,166801,1658,0.895
 66 | 2006M05,665768,344364,84207,2364,50420,183442,972,0.942
 67 | 2006M06,668101,359602,70987,2698,48985,185276,554,0.977
 68 | 2006M07,670102,367193,65409,1660,46399,188806,636,0.948
 69 | 2006M08,671907,361360,63265,2053,48268,196416,544,0.950
 70 | 2006M09,637838,344741,57317,2529,48448,183949,853,0.931
 71 | 2006M10,655268,352267,58321,2832,50159,190016,1673,0.926
 72 | 2006M11,646579,350407,50525,2949,50462,190084,2152,0.943
 73 | 2006M12,645418,345067,56679,2687,50017,189318,1652,0.911
 74 | 2007M01,669649,371663,48035,3038,50076,195990,848,0.944
 75 | 2007M02,658237,386836,48880,3037,50669,167897,918,1.028
 76 | 2007M03,671883,368444,44152,1988,55526,200943,831,0.948
 77 | 2007M04,641209,353137,45477,2178,53678,185143,1597,0.934
 78 | 2007M05,674137,365524,50618,2829,56691,196456,2019,0.950
 79 | 2007M06,680109,381399,37541,2341,57053,198560,3215,0.990
 80 | 2007M07,680124,375015,38329,2724,58048,204876,1132,0.958
 81 | 2007M08,695753,385436,37044,3091,58798,211228,157,0.980
 82 | 2007M09,639221,348446,30804,2508,55275,202044,145,0.930
 83 | 2007M10,676374,355058,45373,2738,54999,210818,7387,0.952
 84 | 2007M11,620035,310086,43163,2570,54493,202630,7094,0.901
 85 | 2007M12,642717,334726,35531,2188,57485,205608,7179,0.904
 86 | 2008M01,682388,382802,27405,2676,58545,210784,176,0.959
 87 | 2008M02,629922,365300,23174,2292,57652,181373,133,0.946
 88 | 2008M03,606304,337292,18753,2161,57681,190267,151,0.851
 89 | 2008M04,611410,337406,17960,2301,57321,196263,158,0.887
 90 | 2008M05,647752,354148,21247,2399,61232,208717,8,0.909
 91 | 2008M06,644275,353399,17489,2955,60109,210316,8,0.934
 92 | 2008M07,646515,360850,19080,4325,58798,203454,7,0.907
 93 | 2008M08,622844,333976,17645,4321,56479,210417,7,0.874
 94 | 2008M09,642632,348806,18396,5525,57677,212179,49,0.931
 95 | 2008M10,621165,331001,19926,6097,55602,208531,7,0.871
 96 | 2008M11,573100,299502,18319,4644,53494,197134,7,0.830
 97 | 2008M12,609066,332802,16728,4770,56603,198125,37,0.853
 98 | 2009M01,666916,387876,19520,5776,57250,196486,8,0.934
 99 | 2009M02,603384,321171,16055,4367,58098,203687,7,0.935
100 | 2009M03,618851,329950,15827,4397,58772,209899,7,0.866
101 | 2009M04,620060,328230,14598,4227,59782,213217,7,0.896
102 | 2009M05,635779,334901,14086,4430,60543,221473,346,0.889
103 | 2009M06,674564,357906,14520,5072,63185,232980,900,0.975
104 | 2009M07,664885,344645,14165,5678,62929,237461,7,0.930
105 | 2009M08,685801,363353,21476,8009,58633,234323,7,0.959
106 | 2009M09,642615,311225,14501,6346,58567,251969,7,0.928
107 | 2009M10,655304,328883,13837,6016,61217,245343,7,0.915
108 | 2009M11,634043,314302,13897,5590,61198,239049,7,0.915
109 | 2009M12,643817,313962,13282,5565,61296,249704,7,0.899
110 | 2010M01,670991,338901,13836,7365,60115,250768,7,0.936
111 | 2010M02,671571,359297,15164,6993,59564,230547,6,1.037
112 | 2010M03,674038,329915,14762,5636,62408,261310,7,0.940
113 | 2010M04,642960,314467,13777,5729,60830,246841,1316,0.927
114 | 2010M05,672954,334249,17138,6135,64227,251199,7,0.938
115 | 2010M06,686566,344352,14371,6625,63947,257265,7,0.989
116 | 2010M07,674449,331610,14506,7257,65827,255243,7,0.940
117 | 2010M08,669168,323818,14150,6657,66142,258394,7,0.933
118 | 2010M09,689302,335753,17222,8548,66129,260843,807,0.993
119 | 2010M10,638173,300518,15645,7447,65678,248879,7,0.889
120 | 2010M11,634052,288684,17198,6278,66135,255750,7,0.913
121 | 2010M12,633376,287077,14001,5550,68162,258579,7,0.882
122 | 2011M01,669127,322138,17760,9852,66990,252380,7,0.932
123 | 2011M02,579427,282685,14229,4601,63782,214123,6,0.893
124 | 2011M03,630674,284573,18352,6012,65822,255909,6,0.878
125 | 2011M04,621122,276972,12358,5094,66971,259720,6,0.894
126 | 2011M05,645598,294537,11292,5501,70548,263714,6,0.899
127 | 2011M06,644114,296265,11173,6317,70774,259579,6,0.926
128 | 2011M07,640912,299283,10312,7062,70499,253750,6,0.892
129 | 2011M08,645523,296319,9600,6981,70300,262317,6,0.898
130 | 2011M09,627089,289489,8694,7061,66350,255489,6,0.901
131 | 2011M10,621275,279523,8765,7167,67568,258246,6,0.864
132 | 2011M11,596078,259332,10777,7116,66306,252540,6,0.856
133 | 2011M12,633650,287505,8843,7563,65288,264447,6,0.880
134 | 2012M01,663145,318630,10593,7588,67470,258847,17,0.921
135 | 2012M02,581227,254533,8053,6046,65086,247502,7,0.863
136 | 2012M03,625485,278802,8637,7025,68433,262582,7,0.868
137 | 2012M04,595741,267364,7935,6751,67688,245997,6,0.854
138 | 2012M05,624899,274088,8742,7039,71326,263698,6,0.867
139 | 2012M06,640348,289514,8872,6907,72368,262682,6,0.918
140 | 2012M07,620990,277878,7728,7953,71502,255924,6,0.861
141 | 2012M08,626361,279670,8819,9360,70211,258296,6,0.868
142 | 2012M09,595516,253637,8060,7927,68466,257419,6,0.853
143 | 2012M10,613300,259450,8860,7079,71640,266265,6,0.850
144 | 2012M11,605045,256114,7869,8203,70894,261958,6,0.866
145 | 2012M12,611852,267574,7885,7104,69456,259827,6,0.847
146 | 2013M01,634231,285083,8605,8120,66933,265484,6,0.877
147 | 2013M02,597573,278109,9499,6196,65033,238730,6,0.915
148 | 2013M03,615770,266933,7803,5800,68278,266950,6,0.851
149 | 2013M04,613496,273477,6841,6414,68389,258369,6,0.876
150 | 2013M05,613277,264877,7849,7006,70454,263084,6,0.848
151 | 2013M06,610220,268879,7478,6562,68135,259159,6,0.871
152 | 2013M07,643080,285548,8092,8651,68956,271828,6,0.889
153 | 2013M08,624524,273663,7052,6940,67517,269347,6,0.863
154 | 2013M09,592806,257769,6928,7476,61939,258687,6,0.846
155 | 2013M10,606793,254716,7054,7407,63403,274207,6,0.838
156 | 2013M11,583401,241141,6827,6786,63101,265540,6,0.832
157 | 2013M12,599406,258519,7328,6653,63075,263825,6,0.827
158 | 2014M01,661470,298125,8774,7347,64992,282226,6,0.913
159 | 2014M02,582868,253420,7097,3780,60760,257804,6,0.890
160 | 2014M03,606147,264120,6772,5218,60993,269039,6,0.836
161 | 2014M04,598134,255984,6626,5271,59764,270484,6,0.853
162 | 2014M05,619557,266883,6217,4990,61535,279926,6,0.855
163 | 2014M06,620332,277195,6300,5903,60625,270303,6,0.884
164 | 2014M07,641095,281291,6523,5765,60970,286538,8,0.884
165 | 2014M08,621297,273004,5994,5379,59319,277595,6,0.856
166 | 2014M09,621172,265693,8995,6071,59416,280991,6,0.885
167 | 2014M10,607449,255810,6869,6034,57933,280796,6,0.837
168 | 2014M11,569058,232157,6476,4845,56412,269162,6,0.810
169 | 2014M12,620859,265775,6492,5235,57654,285696,6,0.855
170 | 2015M01,608176,266883,7578,5478,50964,277237,36,0.837
171 | 2015M02,588467,274532,7385,5472,47830,253243,6,0.897
172 | 2015M03,617597,270293,6915,5030,52152,283193,15,0.850
173 | 


--------------------------------------------------------------------------------
/example/src/data/state_age.json:
--------------------------------------------------------------------------------
 1 | [
 2 |     {
 3 |         "State": "CA",
 4 |         "Under 5 Years": "2704659",
 5 |         "5 to 13 Years": "4499890",
 6 |         "14 to 17 Years": "2159981",
 7 |         "18 to 24 Years": "3853788",
 8 |         "25 to 44 Years": "10604510",
 9 |         "45 to 64 Years": "8819342",
10 |         "65 Years and Over": "4114496"
11 |     },
12 |     {
13 |         "State": "TX",
14 |         "Under 5 Years": "2027307",
15 |         "5 to 13 Years": "3277946",
16 |         "14 to 17 Years": "1420518",
17 |         "18 to 24 Years": "2454721",
18 |         "25 to 44 Years": "7017731",
19 |         "45 to 64 Years": "5656528",
20 |         "65 Years and Over": "2472223"
21 |     },
22 |     {
23 |         "State": "NY",
24 |         "Under 5 Years": "1208495",
25 |         "5 to 13 Years": "2141490",
26 |         "14 to 17 Years": "1058031",
27 |         "18 to 24 Years": "1999120",
28 |         "25 to 44 Years": "5355235",
29 |         "45 to 64 Years": "5120254",
30 |         "65 Years and Over": "2607672"
31 |     },
32 |     {
33 |         "State": "FL",
34 |         "Under 5 Years": "1140516",
35 |         "5 to 13 Years": "1938695",
36 |         "14 to 17 Years": "925060",
37 |         "18 to 24 Years": "1607297",
38 |         "25 to 44 Years": "4782119",
39 |         "45 to 64 Years": "4746856",
40 |         "65 Years and Over": "3187797"
41 |     },
42 |     {
43 |         "State": "IL",
44 |         "Under 5 Years": "894368",
45 |         "5 to 13 Years": "1558919",
46 |         "14 to 17 Years": "725973",
47 |         "18 to 24 Years": "1311479",
48 |         "25 to 44 Years": "3596343",
49 |         "45 to 64 Years": "3239173",
50 |         "65 Years and Over": "1575308"
51 |     },
52 |     {
53 |         "State": "PA",
54 |         "Under 5 Years": "737462",
55 |         "5 to 13 Years": "1345341",
56 |         "14 to 17 Years": "679201",
57 |         "18 to 24 Years": "1203944",
58 |         "25 to 44 Years": "3157759",
59 |         "45 to 64 Years": "3414001",
60 |         "65 Years and Over": "1910571"
61 |     }
62 | ]
63 | 


--------------------------------------------------------------------------------
/example/src/data/user_sample.json:
--------------------------------------------------------------------------------
 1 | 
 2 | [
 3 | {"name":"Darron Weissnat IV","BMI":20.72,"age":39,"birthday":"2005-01-03T00:00:00.000Z","city":"East Russel","married":false,"index":0}
 4 | ,
 5 | {"name":"Pablo Ondricka","BMI":19.32,"age":38,"birthday":"1974-05-13T00:00:00.000Z","city":"Lake Edytheville","married":false,"index":1}
 6 | ,
 7 | {"name":"Mr. Stella Kiehn Jr.","BMI":16.8,"age":34,"birthday":"2003-07-25T00:00:00.000Z","city":"Lake Veronicaburgh","married":false,"index":2}
 8 | ,
 9 | {"name":"Lavon Hilll I","BMI":20.57,"age":12,"birthday":"1994-10-26T00:00:00.000Z","city":"Annatown","married":true,"index":3}
10 | ,
11 | {"name":"Clovis Pagac","BMI":24.28,"age":26,"birthday":"1995-11-10T00:00:00.000Z","city":"South Eldredtown","married":false,"index":4}
12 | ,
13 | {"name":"Gaylord Paucek","BMI":24.41,"age":30,"birthday":"1975-06-12T00:00:00.000Z","city":"Koeppchester","married":true,"index":5}
14 | ,
15 | {"name":"Ashlynn Kuhn MD","BMI":23.77,"age":32,"birthday":"1985-08-09T00:00:00.000Z","city":"West Josiemouth","married":false,"index":6}
16 | ,
17 | {"name":"Fern Schmeler IV","BMI":27.33,"age":26,"birthday":"2005-02-10T00:00:00.000Z","city":"West Abigaleside","married":true,"index":7}
18 | ,
19 | {"name":"Enid Weber","BMI":18.72,"age":17,"birthday":"1998-11-30T00:00:00.000Z","city":"Zackton","married":true,"index":8}
20 | ,
21 | {"name":"Leatha O'Hara","BMI":17.68,"age":42,"birthday":"2010-10-17T00:00:00.000Z","city":"Lake Matilda","married":false,"index":9}
22 | ,
23 | {"name":"Korbin Steuber","BMI":16.35,"age":39,"birthday":"1975-06-30T00:00:00.000Z","city":"East Armandofort","married":true,"index":10}
24 | ,
25 | {"name":"Brennon Torphy","BMI":27.37,"age":24,"birthday":"2003-10-21T00:00:00.000Z","city":"Croninfort","married":true,"index":11}
26 | ,
27 | {"name":"Ms. Genoveva Bradtke","BMI":28.63,"age":19,"birthday":"1983-01-10T00:00:00.000Z","city":"Port Emanuel","married":true,"index":12}
28 | ,
29 | {"name":"Gregg Halvorson","BMI":15.45,"age":15,"birthday":"2004-06-15T00:00:00.000Z","city":"Lake Angelinastad","married":false,"index":13}
30 | ,
31 | {"name":"Mr. Sabina Schroeder III","BMI":24.27,"age":26,"birthday":"1980-11-22T00:00:00.000Z","city":"Toyview","married":true,"index":14}
32 | ,
33 | {"name":"Alanna Mitchell","BMI":29.25,"age":37,"birthday":"1971-08-04T00:00:00.000Z","city":"Lake Monserratmouth","married":false,"index":15}
34 | ,
35 | {"name":"Ronny Sanford","BMI":29.16,"age":24,"birthday":"1994-11-24T00:00:00.000Z","city":"New Claudhaven","married":false,"index":16}
36 | ,
37 | {"name":"Emmitt Pouros","BMI":27.95,"age":14,"birthday":"1989-04-04T00:00:00.000Z","city":"Moorefurt","married":true,"index":17}
38 | ,
39 | {"name":"Earl Purdy","BMI":18.34,"age":38,"birthday":"2013-04-03T00:00:00.000Z","city":"Lake Rowanberg","married":true,"index":18}
40 | ,
41 | {"name":"Cordelia Klocko","BMI":25.85,"age":36,"birthday":"2011-01-17T00:00:00.000Z","city":"Lakinchester","married":true,"index":19}
42 | ,
43 | {"name":"Guido Conroy","BMI":25.17,"age":39,"birthday":"1977-04-20T00:00:00.000Z","city":"Scarlettland","married":true,"index":20}
44 | ,
45 | {"name":"Miss Demond Weissnat V","BMI":21.44,"age":19,"birthday":"2007-06-09T00:00:00.000Z","city":"Savionberg","married":false,"index":21}
46 | ,
47 | {"name":"Easton Mante","BMI":20.61,"age":43,"birthday":"2007-01-29T00:00:00.000Z","city":"Kutchberg","married":false,"index":22}
48 | ,
49 | {"name":"Dayton Ebert","BMI":29.88,"age":20,"birthday":"1978-04-27T00:00:00.000Z","city":"West Wiley","married":true,"index":23}
50 | ]
51 | 


--------------------------------------------------------------------------------
/example/src/grid.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import React, { Component } from 'react'
 4 | import {Grid} from '../../src'
 5 | import D3Array from 'd3-array'
 6 | 
 7 | const generalChartData = require('./data/user_sample.json');
 8 | 
 9 | const width = 960,
10 |   height = 500,
11 |   margins = {top: 20, right: 50, bottom: 30, left: 50},
12 |   gridAxisClassName = "test-grid-class",
13 |   x = function(d) {
14 |     return d.index;
15 |   },
16 |   xDomain = D3Array.extent(generalChartData, x),
17 |   xRange = [0, width - margins.left - margins.right],
18 |   xScale = 'linear',
19 |   y = function(d) {
20 |     return d.age;
21 |   },
22 |   yDomain = D3Array.extent(generalChartData, y),
23 |   yRange = [height - margins.top - margins.bottom, 0],
24 |   yScale = 'linear';
25 | 
26 | 
27 | export default class GridSample extends Component {
28 | 
29 |   render() {
30 |     return (
31 |       <svg width={width} height={height}>
32 |         <Grid
33 |           width= {width}
34 |           height= {height}
35 |           margins= {margins}
36 |           type= {'x'}
37 |           gridAxisClassName= {gridAxisClassName}
38 |           x= {x}
39 |           xDomain= {xDomain}
40 |           xRange= {xRange}
41 |           xScale= {xScale}
42 |           y= {y}
43 |           yDomain= {yDomain}
44 |           yRange= {yRange}
45 |           yScale= {yScale}
46 |         />
47 |         <Grid
48 |           width= {width}
49 |           height= {height}
50 |           margins= {margins}
51 |           type= {'y'}
52 |           gridAxisClassName= {gridAxisClassName}
53 |           x= {x}
54 |           xDomain= {xDomain}
55 |           xRange= {xRange}
56 |           xScale= {xScale}
57 |           y= {y}
58 |           yDomain= {yDomain}
59 |           yRange= {yRange}
60 |           yScale= {yScale}
61 |         />
62 |       </svg>
63 |     )
64 |   }
65 | }


--------------------------------------------------------------------------------
/example/src/label.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import React, { Component } from 'react'
 4 | import {Label} from '../../src'
 5 | 
 6 | 
 7 | const labelTitle = 'new label title',
 8 |   labelPosition = 'right'
 9 | 
10 | export default class LabelSample extends Component {
11 | 
12 |   render() {
13 |     return(
14 |       <svg width={960} height={500}>
15 |         <Label
16 |           labelTitle= {labelTitle}
17 |           labelPosition= {labelPosition}
18 |         />
19 |       </svg>
20 |     )
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/example/src/legend.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import React, { Component } from 'react'
 4 | import {Legend} from '../../src'
 5 | 
 6 | const chartSeries = [
 7 |     {
 8 |       field: 'Under 5 Years'
 9 |     },
10 |     {
11 |       field: '5 to 13 Years'
12 |     },
13 |     {
14 |       field: '14 to 17 Years',
15 |       name: '14 to 17 Years',
16 |       color: '#2ca02c'
17 |     },
18 |     {
19 |       field: '18 to 24 Years',
20 |       name: '18 to 24 Years',
21 |       color: '#d62728'
22 |     },
23 |     {
24 |       field: '25 to 44 Years',
25 |       name: '25 to 44 Years',
26 |       color: '#9467bd'
27 |     },
28 |     {
29 |       field: '45 to 64 Years',
30 |       name: '45 to 64 Years',
31 |       color: '#8c564b'
32 |     },
33 |     {
34 |       field: '65 Years and Over',
35 |       name: '65 Years and Over',
36 |       color: '#e377c2'
37 |     }
38 | 
39 |   ]
40 | 
41 | export default class LegendSample extends Component {
42 | 
43 |   render() {
44 |     return(
45 |       <div>
46 |         <svg width= {960} height= {500}>
47 |           <rect height= {"100%"} width= {"100%"} fill= {"#CCC"} />
48 |         </svg>
49 |         <Legend
50 |           width= {960}
51 |           chartSeries = {chartSeries}
52 |           swatchShape= 'circle'
53 |         />
54 |       </div>
55 |     )
56 |   }
57 | }


--------------------------------------------------------------------------------
/example/src/xaxis.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import React, { Component } from 'react'
 4 | import {Xaxis} from '../../src'
 5 | 
 6 | const generalChartData = require("./data/state_age.json");
 7 | const ageNames = Object.keys(generalChartData[0]).filter(function(key) { return key !== "State"; });
 8 | 
 9 | generalChartData.forEach(function(d) {
10 |   var y0 = 0;
11 |   d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
12 |   d.total = d.ages[d.ages.length - 1].y1;
13 | });
14 | 
15 | const x = function(d) {
16 |     return d.State;
17 |   },
18 |   xDomain = generalChartData.map(function(d) { return d.State; }),
19 |   xScale = 'ordinal',
20 |   xLabel = "Age";
21 | 
22 | export default class XaxisSample extends Component {
23 | 
24 |   render() {
25 |     return (
26 |       <div>
27 |         <svg width={960} height={500}>
28 |           <Xaxis
29 |             x= {x}
30 |             xDomain= {xDomain}
31 |             xBandPaddingInner={.1}
32 |             xScale= {xScale}
33 |             xLabel = {xLabel}
34 |             style = {{
35 |               "transform": "rotate(45deg)"
36 |             }}
37 |           />
38 |         </svg>
39 |         <svg width={960} height={500}>
40 |           <Xaxis
41 |             x= {x}
42 |             xDomain= {xDomain}
43 |             xBandPaddingInner={.1}
44 |             xScale= {xScale}
45 |             xOrient="top"
46 |             xLabelPosition="top"
47 |             xLabel = {xLabel}
48 |             style = {{
49 |               "transform": "rotate(45deg)"
50 |             }}
51 |           />
52 |         </svg>
53 |       </div>
54 |     )
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/example/src/xaxis_click.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | var React = require('react');
 4 | var ReactDOM = require('react-dom');
 5 | var Xaxis = require('../../lib/index.js').Xaxis;
 6 | 
 7 | (function() {
 8 |   // load your general data, for building xDomain.
 9 |   var chartData = require("dsv?delimiter=,!./data/garbage.csv");
10 |   // your date format, use for parsing
11 |   var parseDate = d3.time.format("%YM%m").parse;
12 | 
13 |   // setting you svg width
14 |   var width = 400,
15 |     // setting your svg height
16 |     height = 100,
17 |     // setting your margins of your svg
18 |     margins = {top: 20, right: 50, bottom: 20, left: 50},
19 |     // your x Axis accessor
20 |     x = function(d) {
21 |       return parseDate(d.month);
22 |     },
23 |     // set your x domain
24 |     xDomain = d3.extent(chartData, function(d){ return x(d) }),
25 |     // set your x range
26 |     xRange = [0, width - margins.left - margins.right],
27 |     // your scale type 'linear', 'ordinal', 'time'... etc.
28 |     xScale = 'time',
29 |     // set your label name
30 |     xLabel = "Month";
31 | 
32 |   var ClickAxis = React.createClass({
33 |     getInitialState: function() {
34 |       return {
35 |         expend: false
36 |       }
37 |     },
38 |     _onClick: function() {
39 |       this.setState({
40 |         expend: !this.state.expend
41 |       })
42 |     },
43 |     render: function() {
44 |       var expend = this.state.expend;
45 |       var newWidth = expend? (width + 100): width;
46 |       var newRange = expend? ([0, width - margins.left - margins.right + 100]): ([0, width - margins.left - margins.right]);
47 | 
48 |       return (
49 |         <svg width={newWidth} height={height} onClick={this._onClick}>
50 |           <Xaxis
51 |             width= {newWidth}
52 |             height= {height}
53 |             margins= {margins}
54 |             x= {x}
55 |             xDomain= {xDomain}
56 |             xRange = {newRange}
57 |             xScale= {xScale}
58 |             xLabel= {xLabel}
59 |           />
60 |         </svg>
61 |       )
62 |     }
63 |   })
64 | 
65 |   ReactDOM.render(
66 |     <ClickAxis />
67 |   , document.getElementById('click-xaxis')
68 |   )
69 | })()
70 | 


--------------------------------------------------------------------------------
/example/src/yaxis.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import React, { Component } from 'react'
 4 | import {Yaxis} from '../../src'
 5 | 
 6 | const generalChartData = require("./data/state_age.json");
 7 | const ageNames = Object.keys(generalChartData[0]).filter(function(key) { return key !== "State"; });
 8 | 
 9 | generalChartData.forEach(function(d) {
10 |   var y0 = 0;
11 |   d.ages = ageNames.map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
12 |   d.total = d.ages[d.ages.length - 1].y1;
13 | });
14 | 
15 | const y = function(d) {
16 |     return d.State;
17 |   },
18 |   yDomain = generalChartData.map(function(d) { return d.State; }),
19 |   yScale = 'ordinal',
20 |   yLabel = "Age";
21 | 
22 | export default class YaxisSample extends Component {
23 | 
24 |   render() {
25 |     return (
26 |       <div>
27 |         <svg width={960} height={500}>
28 |           <Yaxis
29 |             y= {y}
30 |             yDomain= {yDomain}
31 |             yBandPaddingInner={.1}
32 |             yScale= {yScale}
33 |             yLabel = {yLabel}
34 |             style = {{
35 |               "transform": "rotate(45deg)"
36 |             }}
37 |           />
38 |         </svg>
39 |         <svg width={960} height={500}>
40 |           <Yaxis
41 |             y= {y}
42 |             yDomain= {yDomain}
43 |             yBandPaddingInner={.1}
44 |             yScale= {yScale}
45 |             yOrient="right"
46 |             yLabelPosition="right"
47 |             yLabel = {yLabel}
48 |             style = {{
49 |               "transform": "rotate(45deg)"
50 |             }}
51 |           />
52 |         </svg>
53 |       </div>
54 |     )
55 |   }
56 | }
57 | 


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | var path = require('path');
 2 | 
 3 | module.exports = function (config) {
 4 |   config.set({
 5 |     autoWatch: true,
 6 |     browsers: ['Chrome'],
 7 |     // singleRun: true,
 8 |     frameworks: ['mocha'],
 9 |     files: [
10 |       'tests.webpack.js'
11 |     ],
12 |     preprocessors: {
13 |       'tests.webpack.js': ['webpack', 'sourcemap']
14 |     },
15 |     reporters: ['dots'],
16 |     webpack: {
17 |       devtool: 'inline-source-map',
18 |       module: {
19 |         loaders: [
20 |           { test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }
21 |         ]
22 |       },
23 |       resolve: {
24 |         alias: {
25 |           'react-d3-core': path.join(__dirname, './lib')
26 |         }
27 |       }
28 |     },
29 |     webpackServer: {
30 |       noInfo: true
31 |     }
32 |   });
33 | };
34 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-d3-core",
 3 |   "version": "1.3.9",
 4 |   "description": "react-d3 chart core component",
 5 |   "main": "./lib/index.js",
 6 |   "scripts": {
 7 |     "test": "karma start",
 8 |     "build": "rm -rf ./lib && BABEL_ENV=production ./node_modules/.bin/babel ./src --out-dir ./lib",
 9 |     "prod": "BABEL_ENV=production NODE_ENV=0 webpack --config webpack.prod.config.js && BABEL_ENV=production NODE_ENV=1 webpack --config webpack.prod.config.js"
10 |   },
11 |   "author": "ElixirDoc team",
12 |   "license": "Apache 2.0",
13 |   "devDependencies": {
14 |     "babel-cli": "^6.6.4",
15 |     "babel-core": "^6.5.2",
16 |     "babel-eslint": "^3.1.9",
17 |     "babel-loader": "^6.2.3",
18 |     "babel-plugin-add-module-exports": "^0.1.2",
19 |     "babel-plugin-react-transform": "^2.0.0",
20 |     "babel-plugin-transform-react-remove-prop-types": "^0.2.2",
21 |     "babel-plugin-transform-runtime": "^6.5.2",
22 |     "babel-polyfill": "^6.5.0",
23 |     "babel-preset-es2015": "^6.5.0",
24 |     "babel-preset-react": "^6.5.0",
25 |     "babel-preset-react-hmre": "1.0.1",
26 |     "babel-preset-stage-0": "^6.5.0",
27 |     "dsv-loader": "^1.0.0",
28 |     "expect": "^1.13.3",
29 |     "express": "^4.13.4",
30 |     "extract-text-webpack-plugin": "^1.0.1",
31 |     "json-loader": "^0.5.4",
32 |     "jsx-loader": "^0.13.2",
33 |     "karma": "^0.13.15",
34 |     "karma-chrome-launcher": "^0.2.1",
35 |     "karma-cli": "^0.1.1",
36 |     "karma-mocha": "^0.2.0",
37 |     "karma-sourcemap-loader": "^0.3.6",
38 |     "karma-webpack": "^1.7.0",
39 |     "mocha": "^2.2.5",
40 |     "react-addons-test-utils": "^0.14.0",
41 |     "react-bootstrap": "^0.28.3",
42 |     "react-hot-loader": "^1.3.0",
43 |     "react-router": "^2.0.0",
44 |     "style-loader": "^0.12.4",
45 |     "webpack": "^1.12.2",
46 |     "webpack-dev-middleware": "^1.5.1",
47 |     "webpack-dev-server": "^1.11.0",
48 |     "webpack-hot-middleware": "^2.9.1"
49 |   },
50 |   "peerDependencies": {
51 |     "react": "^0.14.7",
52 |     "react-dom": "^0.14.7"
53 |   },
54 |   "dependencies": {
55 |     "d3-array": "^0.7.1",
56 |     "d3-axis": "^0.3.0",
57 |     "d3-scale": "^0.6.4",
58 |     "d3-selection": "^0.7.0",
59 |     "react-faux-dom": "^2.3.0"
60 |   }
61 | }
62 | 


--------------------------------------------------------------------------------
/src/axis/axis.jsx:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | import {
  4 |   default as React,
  5 |   Component,
  6 |   PropTypes
  7 | } from 'react';
  8 | 
  9 | import D3Axis from 'd3-axis';
 10 | import D3Selection from 'd3-selection'
 11 | import ReactFauxDOM from 'react-faux-dom';
 12 | import {scale} from '../utils/scale';
 13 | 
 14 | export default class Axis extends Component {
 15 |   constructor (props) {
 16 |     super(props);
 17 |   }
 18 | 
 19 |   static defaultProps = {
 20 |     range: null,
 21 |     rangeRoundBands: null,
 22 |     domain: null,
 23 |     tickFormat: null,
 24 |     tickOrient: null
 25 |   }
 26 | 
 27 |   static PropTypes = {
 28 |     showAxis: PropTypes.bool,
 29 |     type: PropTypes.string,
 30 |     orient: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 31 |     tickOrient: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 32 |   }
 33 | 
 34 |   _mkTickAxis () {
 35 |     const {
 36 |       type,
 37 |       tickOrient,
 38 |       tickFormat,
 39 |       tickPadding,
 40 |       tickSizeInner,
 41 |       tickSizeOuter,
 42 |       ticks,
 43 |       tickValues
 44 |     } = this.props;
 45 | 
 46 |     var func = D3Axis;
 47 | 
 48 | 
 49 |     if(tickOrient === 'left') {
 50 |       func = func.axisLeft(this._mkScale(this.props));
 51 |     }else if (tickOrient === 'right') {
 52 |       func = func.axisRight(this._mkScale(this.props))
 53 |     }else if (tickOrient === 'top') {
 54 |       func = func.axisTop(this._mkScale(this.props))
 55 |     }else if (tickOrient === 'bottom') {
 56 |       func = func.axisBottom(this._mkScale(this.props))
 57 |     }
 58 | 
 59 |     if(tickFormat)
 60 |       func.tickFormat(tickFormat);
 61 | 
 62 |     if(tickPadding)
 63 |       func.tickPadding(tickPadding);
 64 | 
 65 |     if(tickSizeOuter)
 66 |       func.tickSizeOuter(tickSizeOuter);
 67 | 
 68 |     if(tickSizeInner)
 69 |       func.tickSizeInner(tickSizeInner);
 70 | 
 71 |     if(tickValues)
 72 |       func.tickValues(tickValues);
 73 | 
 74 |     if(ticks)
 75 |       func.ticks.apply(null, ticks);
 76 | 
 77 |     return func;
 78 | 
 79 |   }
 80 | 
 81 |   _mkScale () {
 82 |     var newScale
 83 | 
 84 |     if(this.props.scale === 'ordinal')
 85 |       newScale = 'band'
 86 |     else
 87 |       newScale = this.props.scale
 88 | 
 89 |     var func = scale(Object.assign({}, this.props, {scale: newScale}));
 90 | 
 91 |     return func;
 92 |   }
 93 | 
 94 |   render () {
 95 | 
 96 |     const {
 97 |       showAxis,
 98 |       gridAxisClassName,
 99 |       axisClassName,
100 |       type,
101 |       style,
102 |       axisStyling, //styling object that holds user defined css classes for different axis elements
103 |       gridStyleClassName //css class to style grids on chart
104 |     } = this.props;
105 | 
106 |     var axisGroup = ReactFauxDOM.createElement('g');
107 | 
108 |     if(type === 'x')
109 |       var axisClasses = `${axisClassName} axis x`
110 |     else if(type === 'y')
111 |       var axisClasses = `${axisClassName} axis y`
112 |     else if(type === 'gridx' || type === 'gridy')
113 |       var axisClasses = `${gridAxisClassName} grid-axis`
114 | 
115 |     axisGroup.setAttribute('class', axisClasses);
116 | 
117 |     var axisDom = D3Selection.select(axisGroup);
118 | 
119 |     axisDom.call(this._mkTickAxis());
120 | 
121 |     if(!showAxis) {
122 |       axisDom.selectAll(".grid-axis .tick text")
123 |         .style("opacity", "0")
124 | 
125 |       if(type === 'gridx' || type === 'gridy') {
126 |         // hide domain in grids
127 |         axisDom.selectAll(".grid-axis .domain")
128 |           .style("opacity", "0")
129 |       }
130 |     }
131 | 
132 | 
133 |     // apply user defined axis path style (path refers to x-axis line)if provided or else default
134 |     if(axisStyling && axisStyling.pathClassName) {
135 |       var axisPath = axisDom.selectAll('.axis path')
136 |       axisPath.attr("class", axisStyling.pathClassName);
137 |     }
138 |     else
139 |       axisDom.selectAll('.axis path')
140 |           .style('fill', 'none')
141 |           .style('stroke', '#000')
142 |           .style('shape-rendering', 'crispEdges')
143 |           .style('display','none')
144 | 
145 |     // apply user defined style for axis tick line if provided or else default
146 |     if(axisStyling && axisStyling.ticksClassName) {
147 |       var axisLine = axisDom.selectAll('.axis line')
148 |       axisLine.attr("class", axisStyling.ticksClassName);
149 |     }
150 |     else
151 |       axisDom.selectAll('.axis line')
152 |           .style('fill', 'none')
153 |           .style('stroke', '#000')
154 |           .style('shape-rendering', 'crispEdges');
155 | 
156 |     // apply user defined style for grid axes if provided or else default
157 |     if(gridStyleClassName) {
158 |         var grids = axisDom.selectAll('.grid-axis line')
159 |         grids.attr("class", gridStyleClassName);
160 |     }
161 |     else
162 |         axisDom.selectAll('.grid-axis line')
163 |             .style('opacity', .2)
164 |             .style('fill', 'none')
165 |             .style('stroke', '#000')
166 |             .style('stroke-width', '1.5px')
167 | 
168 |     // Axis tick labels style
169 |     var axisText = axisDom.selectAll('.axis text')
170 |     if(style) {
171 |       for(var key in style) {
172 |         axisText.style(key, style[key]);
173 |       }
174 |     }
175 |     // user defined style for axis labels
176 |     else if(axisStyling && axisStyling.textClassName) {
177 |       axisText.attr("class", axisStyling.textClassName);
178 |     }
179 | 
180 |     return axisDom.node().toReact();
181 |   }
182 | }
183 | 


--------------------------------------------------------------------------------
/src/axis/label.jsx:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | import {
  4 |   default as React,
  5 |   Component,
  6 |   PropTypes,
  7 | } from 'react';
  8 | 
  9 | import D3Selection from 'd3-selection'
 10 | import ReactFauxDOM from 'react-faux-dom';
 11 | import CommonProps from '../commonProps';
 12 | 
 13 | export default class Label extends Component {
 14 |   constructor (props) {
 15 |     super(props);
 16 |   }
 17 | 
 18 |   static defaultProps = {
 19 |     hTransform: 'rotate(0)',
 20 |     vTransform: 'rotate(270)',
 21 |     labelTitle: 'label title',
 22 |     labelPosition: 'bottom',
 23 |     labelOffset: 40,
 24 |     textAnchor: 'middle',
 25 |     labelClassName: 'react-d3-core__label',
 26 |     ...CommonProps
 27 |   }
 28 | 
 29 |   static propTypes = {
 30 |     height: PropTypes.number.isRequired,
 31 |     width: PropTypes.number.isRequired,
 32 |     margins: PropTypes.object.isRequired,
 33 |     hTransform: PropTypes.string,
 34 |     vTransform: PropTypes.string,
 35 |     labelTitle: PropTypes.string,
 36 |     labelPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
 37 |     labelOffset: PropTypes.number,
 38 |     textAnchor: PropTypes.string,
 39 |     labelClassName: PropTypes.string
 40 |   }
 41 | 
 42 |   _mkLabel(dom) {
 43 |     const {
 44 |       height,
 45 |       width,
 46 |       margins,
 47 |       labelOffset,
 48 |       labelTitle,
 49 |       labelPosition,
 50 |       vTransform,
 51 |       hTransform,
 52 |       textAnchor
 53 |     } = this.props;
 54 | 
 55 |     var labelDom = D3Selection.select(dom);
 56 |     var fixWidth = width - margins.left - margins.right;
 57 |     var fixHeight = height - margins.top - margins.bottom;
 58 | 
 59 |     if (labelPosition === 'top') {
 60 | 
 61 |       labelDom
 62 |         .attr('transform', hTransform)
 63 |         .attr('y', -labelOffset)
 64 |         .attr('x', fixWidth / 2)
 65 |         .style('text-anchor', textAnchor)
 66 |         .text(labelTitle)
 67 | 
 68 |     }else if (labelPosition === 'bottom') {
 69 | 
 70 |       labelDom
 71 |         .attr('transform', hTransform)
 72 |         .attr('y', +labelOffset)
 73 |         .attr('x', fixWidth / 2)
 74 |         .style('text-anchor', textAnchor)
 75 |         .text(labelTitle)
 76 | 
 77 |     }else if (labelPosition === 'left') {
 78 | 
 79 |       labelDom
 80 |         .attr('transform', vTransform)
 81 |         .attr('y', -labelOffset)
 82 |         .attr('x', -fixHeight / 2)
 83 |         .style('text-anchor', textAnchor)
 84 |         .text(labelTitle)
 85 | 
 86 |     }else if (labelPosition === 'right') {
 87 | 
 88 |       labelDom
 89 |         .attr('transform', vTransform)
 90 |         .attr('y', +labelOffset)
 91 |         .attr('x', -fixHeight / 2)
 92 |         .style('text-anchor', textAnchor)
 93 |         .text(labelTitle)
 94 |     }
 95 | 
 96 |     return labelDom;
 97 |   }
 98 | 
 99 |   render() {
100 |     const {
101 |       labelClassName
102 |     } = this.props;
103 | 
104 |     var labelText = ReactFauxDOM.createElement('text');
105 |     var labelClasses = `${labelClassName} label`;
106 |     labelText.setAttribute('class', labelClasses);
107 | 
108 |     var labelDom = this._mkLabel(labelText);
109 | 
110 |     return labelDom.node().toReact();
111 |   }
112 | }
113 | 


--------------------------------------------------------------------------------
/src/axis/xaxis.jsx:
--------------------------------------------------------------------------------
  1 | "use strict"
  2 | 
  3 | import {
  4 |   default as React,
  5 |   Component,
  6 |   PropTypes
  7 | } from 'react';
  8 | 
  9 | import Axis from './axis';
 10 | import Label from './label';
 11 | import CommonProps from '../commonProps';
 12 | 
 13 | export default class Xaxis extends Component {
 14 |   constructor (props) {
 15 |     super(props);
 16 |   }
 17 | 
 18 |   static defaultProps = {
 19 |     showXAxis: true,
 20 |     xAxisClassName: 'react-d3-core__axis__xAxis',
 21 |     xScale: 'linear',
 22 |     xOrient: 'bottom',
 23 |     xTickOrient: 'bottom',
 24 |     xLabelPosition: 'bottom',
 25 |     xTickPadding: 3,
 26 |     xInnerTickSize: 6,
 27 |     xOuterTickSize: 6,
 28 |     ...CommonProps
 29 |   }
 30 | 
 31 |   static propTypes = {
 32 |     height: PropTypes.number.isRequired,
 33 |     width: PropTypes.number.isRequired,
 34 |     margins: PropTypes.object.isRequired,
 35 |     showXAxis: PropTypes.bool,
 36 |     x: PropTypes.func,
 37 |     xDomain: PropTypes.array,
 38 |     xRange: PropTypes.array,
 39 |     xScale: PropTypes.string.isRequired,
 40 |     xOrient: PropTypes.oneOf(['top', 'bottom']),
 41 |     xTickOrient: PropTypes.oneOf(['top', 'bottom']),
 42 |     xAxisClassName: PropTypes.string,
 43 |     xTickSizeInner: PropTypes.number,
 44 |     xTickSizeOuter: PropTypes.number,
 45 |     xBandPaddingInner: PropTypes.number,
 46 |     xBandPaddingOuter: PropTypes.number,
 47 |     xTickPadding: PropTypes.number,
 48 |     xTickFormat: PropTypes.func,
 49 |     xTicks: PropTypes.array,
 50 |     style: PropTypes.object,
 51 |     /*
 52 |      xAxisStyling object holds css styling classes for axis elements
 53 |      pathClassName: "someCls"
 54 |      ticksClassName: "someCls"
 55 |      textClassName: "someCls"
 56 |      */
 57 |     xAxisStyling : PropTypes.object,
 58 |     xTickValues: PropTypes.array,
 59 |   }
 60 | 
 61 |   render() {
 62 |     var {
 63 |       height,
 64 |       width,
 65 |       margins,
 66 |       showXAxis,
 67 |       x,
 68 |       xAxisClassName,
 69 |       xDomain,
 70 |       xRange,
 71 |       xBandPaddingInner,
 72 |       xBandPaddingOuter,
 73 |       xScale,
 74 |       xOrient,
 75 |       xTickOrient,
 76 |       xTickPadding,
 77 |       xTickSizeOuter,
 78 |       xTickSizeInner,
 79 |       xTickFormat,
 80 |       xTicks,
 81 |       xLabel,
 82 |       xLabelPosition,
 83 |       labelOffset,
 84 |       style,
 85 |       xAxisStyling,
 86 |       xTickValues
 87 |     } = this.props;
 88 | 
 89 |     var t;
 90 |     var axisLabel;
 91 | 
 92 |     if(!xRange) {
 93 |       xRange = [0, width - margins.left - margins.right];
 94 |     }
 95 | 
 96 |     if (xOrient === 'bottom') {
 97 |       // x - bottom
 98 |       t = `translate(0, ${height - margins.bottom - margins.top})`;
 99 |     } else if (xOrient === 'top'){
100 |       // x - top
101 |       t = `translate(0, 0)`;
102 |     }
103 | 
104 |     if(xLabel) {
105 |       axisLabel = <Label
106 |         height= {height}
107 |         width= {width}
108 |         margins= {margins}
109 |         labelTitle= {xLabel}
110 |         labelPosition= {xLabelPosition}
111 |         labelOffset= {labelOffset}
112 |         bandPaddingInner= {xBandPaddingInner}
113 |         bandPaddingOuter= {xBandPaddingOuter}
114 |         />
115 |     }
116 | 
117 |     return (
118 |       <g transform= {t}>
119 |         <Axis
120 |           height= {height}
121 |           width= {width}
122 |           margins= {margins}
123 |           showAxis= {showXAxis}
124 |           axisClassName= {xAxisClassName}
125 |           bandPaddingInner= {xBandPaddingInner}
126 |           bandPaddingOuter= {xBandPaddingOuter}
127 |           type = "x"
128 |           proxy = {x}
129 |           domain = {xDomain}
130 |           range = {xRange}
131 |           scale = {xScale}
132 |           orient = {xOrient}
133 |           tickOrient = {xTickOrient}
134 |           tickFormat = {xTickFormat}
135 |           tickPadding = {xTickPadding}
136 |           tickSizeInner = {xTickSizeInner}
137 |           tickSizeOuter = {xTickSizeOuter}
138 |           style = {style}
139 |           ticks = {xTicks}
140 |           axisStyling = {xAxisStyling}
141 |           tickValues = {xTickValues}
142 |           />
143 |         {axisLabel}
144 |       </g>
145 |     )
146 |   }
147 | }
148 | 


--------------------------------------------------------------------------------
/src/axis/yaxis.jsx:
--------------------------------------------------------------------------------
  1 | "use strict"
  2 | 
  3 | import {
  4 |   default as React,
  5 |   Component,
  6 |   PropTypes
  7 | } from 'react';
  8 | 
  9 | import Axis from './axis';
 10 | import Label from './label';
 11 | import CommonProps from '../commonProps';
 12 | 
 13 | export default class Yaxis extends Component {
 14 |   constructor (props) {
 15 |     super(props);
 16 |   }
 17 | 
 18 |   static defaultProps = {
 19 |     showYAxis: true,
 20 |     yAxisClassName: 'react-d3-core__axis__yAxis',
 21 |     yScale: 'linear',
 22 |     yOrient: 'left',
 23 |     yTickOrient: 'left',
 24 |     yLabelPosition: 'left',
 25 |     yTickPadding: 3,
 26 |     yInnerTickSize: 6,
 27 |     yOuterTickSize: 6,
 28 |     ...CommonProps
 29 |   }
 30 | 
 31 |   static propTypes = {
 32 |     height: PropTypes.number.isRequired,
 33 |     width: PropTypes.number.isRequired,
 34 |     margins: PropTypes.object.isRequired,
 35 |     showYAxis: PropTypes.bool,
 36 |     y: PropTypes.func,
 37 |     yDomain: PropTypes.array,
 38 |     yRange: PropTypes.array,
 39 |     yScale: PropTypes.string.isRequired,
 40 |     yOrient: PropTypes.oneOf(['left', 'right']),
 41 |     yTickOrient: PropTypes.oneOf(['left', 'right']),
 42 |     yAxisClassName: PropTypes.string,
 43 |     yTickSizeInner: PropTypes.number,
 44 |     yTickSizeOuter: PropTypes.number,
 45 |     yBandPaddingInner: PropTypes.number,
 46 |     yBandPaddingOuter: PropTypes.number,
 47 |     yTickPadding: PropTypes.number,
 48 |     yTickFormat: PropTypes.func,
 49 |     yTicks: PropTypes.array,
 50 |     style: PropTypes.object,
 51 |     /*
 52 |      yAxisStyling object holds css styling classes for axis elements
 53 |      pathClassName: "someCls"
 54 |      ticksClassName: "someCls"
 55 |      textClassName: "someCls"
 56 |      */
 57 |     yAxisStyling : PropTypes.object,
 58 |     yTickValues : PropTypes.array
 59 |   }
 60 | 
 61 |   render() {
 62 |     var {
 63 |       width,
 64 |       height,
 65 |       margins,
 66 |       y,
 67 |       yAxisClassName,
 68 |       yDomain,
 69 |       yRange,
 70 |       yBandPaddingInner,
 71 |       yBandPaddingOuter,
 72 |       yScale,
 73 |       yOrient,
 74 |       yTickOrient,
 75 |       yTickFormat,
 76 |       yTickPadding,
 77 |       yTickSizeOuter,
 78 |       yTickSizeInner,
 79 |       yTicks,
 80 |       yLabel,
 81 |       yLabelPosition,
 82 |       labelOffset,
 83 |       showYAxis,
 84 |       style,
 85 |       yAxisStyling,
 86 |       yTickValues
 87 |     } = this.props;
 88 | 
 89 |     var t;
 90 |     var axisLabel;
 91 | 
 92 |     if(!yRange) {
 93 |       yRange = [height - margins.top - margins.bottom, 0];
 94 |     }
 95 | 
 96 |     if (yOrient === 'right') {
 97 |       // y - right
 98 |       t = `translate(${width - margins.right - margins.left}, 0)`;
 99 |     } else if (yOrient === 'left'){
100 |       // y - left
101 |       t = `translate(0, 0)`;
102 |     }
103 | 
104 |     if(yLabel) {
105 |       axisLabel = <Label
106 |         height= {height}
107 |         width= {width}
108 |         margins= {margins}
109 |         labelTitle= {yLabel}
110 |         labelPosition= {yLabelPosition}
111 |         labelOffset= {labelOffset}
112 |         bandPaddingInner= {yBandPaddingInner}
113 |         bandPaddingOuter= {yBandPaddingOuter}
114 |       />
115 |     }
116 | 
117 | 
118 |     return (
119 |       <g transform= {t}>
120 |         <Axis
121 |           height= {height}
122 |           width= {width}
123 |           margins= {margins}
124 |           showAxis= {showYAxis}
125 |           axisClassName= {yAxisClassName}
126 |           bandPaddingInner= {yBandPaddingInner}
127 |           bandPaddingOuter= {yBandPaddingOuter}
128 |           type = "y"
129 |           proxy = {y}
130 |           domain = {yDomain}
131 |           range = {yRange}
132 |           scale = {yScale}
133 |           orient = {yOrient}
134 |           tickOrient = {yTickOrient}
135 |           tickFormat = {yTickFormat}
136 |           tickPadding = {yTickPadding}
137 |           tickSizeInner = {yTickSizeInner}
138 |           tickSizeOuter = {yTickSizeOuter}
139 |           ticks = {yTicks}
140 |           style = {style}
141 |           axisStyling = {yAxisStyling}
142 |           tickValues = {yTickValues}
143 |           />
144 |         {axisLabel}
145 |       </g>
146 |     )
147 |   }
148 | }
149 | 


--------------------------------------------------------------------------------
/src/chartContainer.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import {
 4 |   default as React,
 5 |   Component,
 6 | } from 'react';
 7 | 
 8 | import ChartSvg from './container/svg';
 9 | import Legend from './legend';
10 | import CommonProps from './commonProps';
11 | 
12 | export default class ChartContainer extends Component {
13 |   constructor(props) {
14 |     super (props);
15 |   }
16 | 
17 |   static defaultProps = CommonProps
18 | 
19 |   render() {
20 |     const {
21 |       width,
22 |       chartSeries
23 |     } = this.props;
24 | 
25 |     var legend;
26 | 
27 |     var divStyle = {
28 |       width: width
29 |     };
30 | 
31 |     if(chartSeries) {
32 |       legend = <Legend
33 |         {...this.props}
34 |         chartSeries = {chartSeries}
35 |       />
36 |     }
37 | 
38 |     return (
39 |       <div style={divStyle}>
40 |         {legend}
41 |         <ChartSvg {...this.props}/>
42 |       </div>
43 |     )
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/commonProps.jsx:
--------------------------------------------------------------------------------
1 | "use strict";
2 | 
3 | export default {
4 |   width: 960,
5 |   height: 500,
6 |   margins: {top: 80, right: 100, bottom: 80, left: 100}
7 | }
8 | 


--------------------------------------------------------------------------------
/src/container/svg.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import {
 4 |   default as React,
 5 |   Component,
 6 |   PropTypes,
 7 | } from 'react';
 8 | 
 9 | import CommonProps from '../commonProps';
10 | import {scale} from '../utils/scale';
11 | 
12 | export default class ChartSvg extends Component {
13 |   constructor(props) {
14 |     super (props);
15 |   }
16 | 
17 |   static defaultProps = {
18 |     svgClassName: 'react-d3-core__container_svg',
19 |     onZoom: () => {},
20 |     scaleExtent: [1, 10],
21 |     ...CommonProps
22 |   }
23 | 
24 |   static propTypes = {
25 |     id: PropTypes.string,
26 |     width: PropTypes.number.isRequired,
27 |     height: PropTypes.number.isRequired,
28 |     margins: PropTypes.object.isRequired,
29 |     svgClassName: PropTypes.string.isRequired,
30 |   }
31 | 
32 |   render() {
33 |     const {
34 |       height,
35 |       width,
36 |       margins,
37 |       svgClassName,
38 |       id,
39 |       children
40 |     } = this.props;
41 | 
42 |     var t = `translate(${margins.left}, ${margins.top})`;
43 | 
44 |     return (
45 |       <svg
46 |         height = {height}
47 |         width = {width}
48 |         className = {svgClassName}
49 |         id = {id}
50 |         ref = "svgContainer"
51 |       >
52 |         <g
53 |           transform = {t}
54 |         >
55 |           {children}
56 |         </g>
57 |       </svg>
58 |     )
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/container/title.jsx:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | import {
 4 |   default as React,
 5 |   Component,
 6 |   PropTypes,
 7 | } from 'react';
 8 | 
 9 | import CommonProps from '../commonProps';
10 | 
11 | export default class ChartTitle extends Component {
12 |   constructor(props) {
13 |     super (props);
14 |   }
15 | 
16 |   static defaultProps = {
17 |     titleClassName: 'react-d3-core__container_title',
18 |     title: '',
19 |     ...CommonProps
20 |   }
21 | 
22 |   static propTypes = {
23 |     width: PropTypes.number.isRequired,
24 |     title: PropTypes.string,
25 |     titleClassName: PropTypes.string
26 |   }
27 | 
28 |   render() {
29 |     const {
30 |       titleClassName,
31 |       title,
32 |       width,
33 |      } = this.props;
34 | 
35 |     var titleStyle = {
36 |       width: width,
37 |       textAlign: 'center',
38 |       fontSize: '2em',
39 |       paddingBottom: '1.3em'
40 |     }
41 | 
42 |     return (
43 |       <div
44 |         style= {titleStyle}
45 |         className={titleClassName}
46 |       >
47 |         {title}
48 |       </div>
49 |     )
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/src/grid/grid.jsx:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | import {
  4 |   default as React,
  5 |   Component,
  6 |   PropTypes,
  7 | } from 'react';
  8 | 
  9 | import Axis from '../axis/axis';
 10 | import CommonProps from '../commonProps';
 11 | 
 12 | export default class Grid extends Component {
 13 |   constructor(props) {
 14 |     super(props);
 15 |   }
 16 | 
 17 |   static defaultProps = {
 18 |     type: 'x',
 19 |     gridAxisClassName: 'react-d3-core__grid_axis',
 20 |     ...CommonProps
 21 |   }
 22 | 
 23 |   static propTypes = {
 24 |     height: PropTypes.number.isRequired,
 25 |     width: PropTypes.number.isRequired,
 26 |     margins: PropTypes.object.isRequired,
 27 |     type: PropTypes.oneOf(['x', 'y']).isRequired,
 28 |     gridAxisClassName: PropTypes.string,
 29 |     x: PropTypes.func,
 30 |     xDomain: PropTypes.array,
 31 |     xRange: PropTypes.array,
 32 |     xScale: PropTypes.oneOf(['linear', 'identity', 'sqrt', 'pow', 'log', 'quantize', 'quantile', 'ordinal', 'time']).isRequired,
 33 |     xBandPaddingInner: PropTypes.number,
 34 |     xBandPaddingOuter: PropTypes.number,
 35 |     y: PropTypes.func,
 36 |     yDomain: PropTypes.array,
 37 |     yRange: PropTypes.array,
 38 |     yScale: PropTypes.oneOf(['linear', 'identity', 'sqrt', 'pow', 'log', 'quantize', 'quantile', 'ordinal', 'time']).isRequired,
 39 |     yBandPaddingInner: PropTypes.number,
 40 |     yBandPaddingOuter: PropTypes.number,
 41 |     xGridCount: PropTypes.array,
 42 |     yGridCount: PropTypes.array,
 43 |     xGridStyleClassName: PropTypes.string,
 44 |     yGridStyleClassName: PropTypes.string,
 45 |     xTickValues: PropTypes.array
 46 |   }
 47 | 
 48 |   render() {
 49 | 
 50 |     var {
 51 |       height,
 52 |       width,
 53 |       margins,
 54 |       type,
 55 |       gridAxisClassName,
 56 |       xBandPaddingInner,
 57 |       xBandPaddingOuter,
 58 |       x,
 59 |       xDomain,
 60 |       xRange,
 61 |       xScale,
 62 |       xGridCount,
 63 |       xGridStyleClassName,
 64 |       yBandPaddingInner,
 65 |       yBandPaddingOuter,
 66 |       y,
 67 |       yDomain,
 68 |       yRange,
 69 |       yScale,
 70 |       yGridCount,
 71 |       yGridStyleClassName,
 72 |       xTickValues,
 73 |       yTickValues
 74 |     } = this.props;
 75 | 
 76 |     var gridAxis;
 77 |     var t;
 78 | 
 79 |     if(!yRange) {
 80 |       yRange = [height - margins.top - margins.bottom, 0];
 81 |     }
 82 | 
 83 |     if(!xRange) {
 84 |       xRange = [0, width - margins.left - margins.right];
 85 |     }
 86 | 
 87 |     if(type === 'x') {
 88 |       t = `translate(0, ${height - margins.bottom - margins.top})`;
 89 |       var tickSize = height - margins.top - margins.bottom;
 90 | 
 91 |       // if grid axis don't pass customize ticks.
 92 |       gridAxis = <Axis
 93 |         height= {height}
 94 |         width= {width}
 95 |         margins= {margins}
 96 |         type= "gridx"
 97 |         showAxis= {false}
 98 |         gridAxisClassName= {gridAxisClassName}
 99 |         bandPaddingInner= {xBandPaddingInner}
100 |         bandPaddingOuter= {xBandPaddingOuter}
101 |         tickOrient= "bottom"
102 |         orient = "bottom"
103 |         tickSizeOuter= {0}
104 |         tickPadding= {10}
105 |         tickFormat= {null}
106 |         tickSizeInner = {-tickSize}
107 |         proxy = {x}
108 |         domain = {xDomain}
109 |         range = {xRange}
110 |         scale = {xScale}
111 |         ticks = {xGridCount}
112 |         gridStyleClassName = {xGridStyleClassName}
113 |         tickValues = {xTickValues}
114 |         />
115 |     } else if(type === 'y') {
116 |       t = `translate(0, 0)`;
117 |       var tickSize = width - margins.left - margins.right;
118 | 
119 |       // if grid axis don't pass customize ticks.
120 |       gridAxis = <Axis
121 |         height= {height}
122 |         width= {width}
123 |         margins= {margins}
124 |         type= "gridy"
125 |         showAxis= {false}
126 |         gridAxisClassName= {gridAxisClassName}
127 |         bandPaddingInner= {yBandPaddingInner}
128 |         bandPaddingOuter= {yBandPaddingOuter}
129 |         tickOrient= "left"
130 |         orient= "left"
131 |         tickSizeOuter= {0}
132 |         tickPadding= {10}
133 |         tickSizeInner = {-tickSize}
134 |         tickFormat= {null}
135 |         proxy = {y}
136 |         scale = {yScale}
137 |         domain = {yDomain}
138 |         range = {yRange}
139 |         ticks = {yGridCount}
140 |         gridStyleClassName = {yGridStyleClassName}
141 |         tickValues = {yTickValues}
142 |         />
143 |     }
144 | 
145 |     return (
146 |       <g transform = {t}>
147 |         {gridAxis}
148 |       </g>
149 |     )
150 |   }
151 | }
152 | 


--------------------------------------------------------------------------------
/src/grid/xgrid.jsx:
--------------------------------------------------------------------------------
 1 | "use strict"
 2 | 
 3 | import {
 4 |   default as React,
 5 |   Component
 6 | } from 'react';
 7 | 
 8 | import Grid from './grid';
 9 | 
10 | export default class XGrid extends Component {
11 |   constructor(props) {
12 |     super(props);
13 |   }
14 | 
15 |   render() {
16 |     return (
17 |       <Grid
18 |         {...this.props}
19 |         type="x"
20 |       />
21 |     )
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/grid/ygrid.jsx:
--------------------------------------------------------------------------------
 1 | "use strict"
 2 | 
 3 | import {
 4 |   default as React,
 5 |   Component
 6 | } from 'react';
 7 | 
 8 | import Grid from './grid';
 9 | 
10 | export default class YGrid extends Component {
11 |   constructor(props) {
12 |     super(props);
13 |   }
14 | 
15 |   render() {
16 |     return (
17 |       <Grid
18 |         {...this.props}
19 |         type="y"
20 |       />
21 |     )
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
 1 | export {default as Svg} from './container/svg';
 2 | export {default as Title} from './container/title';
 3 | export {default as Chart} from './chartContainer';
 4 | export {default as Axis} from './axis/axis';
 5 | export {default as Xaxis} from './axis/xaxis';
 6 | export {default as Yaxis} from './axis/yaxis';
 7 | export {default as Label} from './axis/label';
 8 | export {default as Legend} from './legend';
 9 | 
10 | // grid
11 | export {default as Grid} from './grid/grid';
12 | export {default as Xgrid} from './grid/xgrid';
13 | export {default as Ygrid} from './grid/ygrid';
14 | 
15 | // utils
16 | 
17 | export {scale} from './utils/scale';
18 | export {xDomain as xDomainCount} from './utils/xDomain';
19 | export {yDomain as yDomainCount} from './utils/yDomain';
20 | 


--------------------------------------------------------------------------------
/src/legend.jsx:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | import {
  4 |   default as React,
  5 |   Component,
  6 |   PropTypes,
  7 | } from 'react';
  8 | 
  9 | import D3Selection from 'd3-selection'
 10 | import D3Scale from 'd3-scale'
 11 | import ReactFauxDOM from 'react-faux-dom';
 12 | import CommonProps from './commonProps';
 13 | 
 14 | export default class Legend extends Component {
 15 |   constructor (props) {
 16 |     super(props);
 17 |   }
 18 | 
 19 |   static defaultProps =  {
 20 |     backgroundColor: '#FFF',
 21 |     legendHeight: 50,
 22 |     legendPosition: 'left',
 23 |     legendOffset: 90,
 24 |     legendClassName: 'react-d3-core__legend',
 25 |     swatchShape: 'square',
 26 |     ...CommonProps
 27 |   }
 28 | 
 29 |   static propTypes = {
 30 |     backgroundColor: PropTypes.string,
 31 |     width: PropTypes.number.isRequired,
 32 |     margins: PropTypes.object.isRequired,
 33 |     chartSeries: PropTypes.array.isRequired,
 34 |     legendOffset: PropTypes.number.isRequired,
 35 |     legendClassName: PropTypes.string.isRequired,
 36 |     legendPosition: PropTypes.oneOf(['left', 'right']).isRequired,
 37 |     swatchShape: PropTypes.oneOf(['circle', 'square']),
 38 |   }
 39 | 
 40 |   _radius(swatchShape) {
 41 |     return swatchShape === 'circle' ? 18 : 0;
 42 |   }
 43 | 
 44 |   _series(props) {
 45 |     const {
 46 |       chartSeries,
 47 |       categoricalColors
 48 |     } = props;
 49 | 
 50 |     const colors = categoricalColors || D3Scale.scaleCategory10();
 51 | 
 52 |     return chartSeries.map(({ name, color, field }, i) => ({
 53 |       color: color || colors(i),
 54 |       name: name || field,
 55 |       field,
 56 |     }));
 57 |   }
 58 | 
 59 |   _mkLegend(dom) {
 60 |     const {
 61 |       legendClassName,
 62 |       backgroundColor,
 63 |       legendPosition,
 64 |       legendOffset,
 65 |       swatchShape,
 66 |       chartSeries,
 67 |       margins,
 68 |       width,
 69 |     } = this.props;
 70 | 
 71 |     const legendArea = D3Selection.select(dom);
 72 |     const series = this._series(this.props);
 73 |     const radius = this._radius(swatchShape);
 74 | 
 75 |     // make legends
 76 |     const legend = legendArea
 77 |       .selectAll('div')
 78 |       .data(series)
 79 |     .enter().append("div")
 80 |       .attr("class", `${legendClassName} legend`)
 81 |       .style("height", 20)
 82 |       .style("padding", 5)
 83 |       .style("background-color", backgroundColor)
 84 |       .style("display", "inline-block");
 85 | 
 86 |     const rect = legend.append("div")
 87 |       .style("width", 18)
 88 |       .style("height", 18)
 89 |       .style("border-radius", radius)
 90 |       .style("background-color", d => d.color)
 91 |       .style("float", legendPosition);
 92 | 
 93 |     const text = legend.append("div")
 94 |       .style("padding-left", 5)
 95 |       .style("padding-right", 5)
 96 |       .text(d => d.name)
 97 |       .style("float", legendPosition);
 98 | 
 99 |     return legendArea;
100 |   }
101 | 
102 |   render() {
103 |     const {
104 |       legendClassName,
105 |       width,
106 |       height
107 |     } = this.props;
108 | 
109 |     const legendGroup = ReactFauxDOM.createElement('div');
110 |     const legendClasses = `${legendClassName} legend`;
111 | 
112 |     legendGroup.setAttribute('class', legendClasses);
113 |     legendGroup.style.width = width;
114 |     legendGroup.style.textAlign = 'center';
115 | 
116 |     return this
117 |       ._mkLegend(legendGroup)
118 |       .node()
119 |       .toReact();
120 | 
121 |   }
122 | }
123 | 


--------------------------------------------------------------------------------
/src/utils/scale.jsx:
--------------------------------------------------------------------------------
 1 | import D3Scale from 'd3-scale';
 2 | 
 3 | export function scale(props) {
 4 |   const {
 5 |     type,
 6 |     scale,
 7 |   } = props;
 8 | 
 9 |   var func;
10 | 
11 |   if(scale === 'linear')
12 |     func = D3Scale.scaleLinear();
13 |   else if(scale === 'identity')
14 |     func = D3Scale.scaleIdentity();
15 |   else if(scale === 'sqrt')
16 |     func = D3Scale.scaleSqrt();
17 |   else if(scale === 'pow')
18 |     func = D3Scale.scalePow();
19 |   else if(scale === 'log')
20 |     func = D3Scale.scaleLog();
21 |   else if(scale === 'quantize')
22 |     func = D3Scale.scaleQuantize();
23 |   else if(scale === 'quantile')
24 |     func = D3Scale.scaleQuantile();
25 |   else if(scale === 'ordinal')
26 |     func = D3Scale.scaleOrdinal()
27 |   else if(scale === 'band')
28 |     func = D3Scale.scaleBand();
29 |   else if(scale === 'time')
30 |     func = D3Scale.scaleTime();
31 |   else
32 |     new Error(`Please check your axis scale setting. "${scale}" scale is invalid. `)
33 | 
34 |   func = _mkScaleSettings(props, func);
35 | 
36 |   return func;
37 | }
38 | 
39 | function _mkScaleSettings(props, func) {
40 |   const {
41 |     type,
42 |     range,
43 |     domain,
44 |     scale,
45 |     bandPaddingInner,
46 |     bandPaddingOuter
47 |   } = props;
48 | 
49 |   if(range)
50 |     func.range(range)
51 | 
52 |   if(domain)
53 |     func.domain(domain)
54 | 
55 |   if(scale === 'band') {
56 | 
57 |     func
58 |       .round(true)
59 | 
60 |     if(bandPaddingInner) 
61 |       func.paddingInner(bandPaddingInner)
62 |     else
63 |       func.paddingInner(.1)
64 |       
65 |     if(bandPaddingOuter) 
66 |       func.paddingOuter(bandPaddingOuter)
67 |     else
68 |       func.paddingOuter(.1)
69 |   
70 |   }
71 | 
72 |   return func;
73 | }
74 | 


--------------------------------------------------------------------------------
/src/utils/xDomain.jsx:
--------------------------------------------------------------------------------
 1 | import D3Array from 'd3-array'
 2 | 
 3 | export function xDomain(props, stack, horizonal) {
 4 |   const {
 5 |     data,
 6 |     chartSeries,
 7 |     x,
 8 |     xScale,
 9 |     xDomain
10 |   } = props;
11 | 
12 |   if(xDomain)
13 |     return xDomain;
14 | 
15 |   if(!horizonal) {
16 |     if(xScale === 'ordinal') {
17 |       return data.map((d) => { return x(d); });
18 |     }else {
19 |       return D3Array.extent(data, (d) => { return x(d); });
20 |     }
21 |   }else {
22 |     if(stack) {
23 |       // stack
24 |       var max = 0;
25 |       var min = 0;
26 | 
27 |       data.forEach((d) => {
28 |         var totalTop = 0;
29 |         var totalBottom = 0;
30 | 
31 |         chartSeries.forEach((sd) => {
32 |           var field = sd.field;
33 | 
34 |           if(d[field] > 0) {
35 |             totalTop += x(d[field]);
36 |           }else if (d[field] < 0) {
37 |             totalBottom += x(d[field]);
38 |           }
39 |         })
40 | 
41 |         if(totalTop > max) max = totalTop;
42 |         if(totalBottom < min) min = totalBottom;
43 |       })
44 | 
45 |       return [min, max];
46 |     }else {
47 |       // not stack, single
48 |       var domainArr = chartSeries.map((d) => {
49 |         var field = d.field;
50 |         var extent = D3Array.extent(data, (dt) => { return x(dt[field]); });
51 | 
52 |         return extent;
53 |       })
54 | 
55 |       return D3Array.extent([].concat.apply([], domainArr));
56 |     }
57 |   }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/utils/yDomain.jsx:
--------------------------------------------------------------------------------
 1 | import D3Array from 'd3-array'
 2 | 
 3 | export function yDomain(props, stack, horizonal) {
 4 |   const {
 5 |     data,
 6 |     chartSeries,
 7 |     y,
 8 |     yDomain,
 9 |     yScale
10 |   } = props;
11 | 
12 |   if(yDomain)
13 |     return yDomain;
14 | 
15 |   if(!horizonal) {
16 |     if(stack) {
17 |       // stack
18 |       var max = 0;
19 |       var min = 0;
20 | 
21 |       data.forEach((d) => {
22 |         var totalTop = 0;
23 |         var totalBottom = 0;
24 | 
25 |         chartSeries.forEach((sd) => {
26 |           var field = sd.field;
27 | 
28 |           if(d[field] > 0) {
29 |             totalTop += y(d[field]);
30 |           }else if (d[field] < 0) {
31 |             totalBottom += y(d[field]);
32 |           }
33 |         })
34 | 
35 |         if(totalTop > max) max = totalTop;
36 |         if(totalBottom < min) min = totalBottom;
37 |       })
38 | 
39 |       return [min, max];
40 |     }else {
41 |       // not stack, single
42 |       var domainArr = chartSeries.map((d) => {
43 |         var field = d.field;
44 |         var extent = D3Array.extent(data, (dt) => { return y(dt[field]); });
45 | 
46 |         return extent;
47 |       })
48 | 
49 |       var extentArr = D3Array.extent([].concat.apply([], domainArr))
50 | 
51 |       if(extentArr[0] * extentArr[1] >= 0) {
52 |         return [0, extentArr[1]]
53 |       }else {
54 |         return extentArr
55 |       }
56 |     }
57 |   }else {
58 |     if(yScale === 'ordinal') {
59 |       return data.map((d) => { return y(d); });
60 |     }else {
61 |       return D3Array.extent(data, (d) => { return y(d); });
62 |     }
63 |   }
64 | }
65 | 


--------------------------------------------------------------------------------
/tests.webpack.js:
--------------------------------------------------------------------------------
1 | var context = require.context('./__tests__', true, /-test\.jsx?$/);
2 | context.keys().forEach(context);
3 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | var path = require('path');
 3 | var webpack = require('webpack');
 4 | var ExtractTextPlugin = require('extract-text-webpack-plugin');
 5 | 
 6 | var js_dist = path.join(__dirname, './example/dist/origin');
 7 | 
 8 | module.exports = {
 9 |   devtool: 'eval-source-map',
10 |   entry: {
11 |     index: ['webpack-hot-middleware/client', './example/index.js']
12 |   },
13 |   output: {
14 |     path: js_dist,
15 |     filename: '[name].js',
16 |     publicPath: '/static/'
17 |   },
18 |   resolve: {
19 |     extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
20 |   },
21 |   plugins: [
22 |     new webpack.HotModuleReplacementPlugin(),
23 |     new webpack.NoErrorsPlugin(),
24 |     new webpack.DefinePlugin({
25 |       "process.env": {
26 |         NODE_ENV: JSON.stringify("development")
27 |       }
28 |     }),
29 |     new ExtractTextPlugin('[name].css', { allChunks: true })
30 |   ],
31 |   module: {
32 |     loaders: [
33 |       {
34 |         test: [/\.jsx$/, /\.js$/],
35 |         loaders: ["babel"],
36 |         exclude: /node_modules/
37 |       },
38 |       {
39 |         test: /\.css$/,
40 |         loader: 'style-loader!css-loader',
41 |         exclude: /node_modules/
42 |       },
43 |       {
44 |         test: /\.json$/,
45 |         loader: "json-loader",
46 |         exclude: /node_modules/
47 |       }
48 |     ],
49 |   }
50 | }
51 | 


--------------------------------------------------------------------------------
/webpack.prod.config.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var path = require('path'),
 4 |   webpack = require('webpack'),
 5 |   nodeModulesPath = path.join(__dirname, 'node_modules');
 6 | 
 7 | var js_root = './lib/';
 8 | var js_dist = __dirname;
 9 | 
10 | // 0 stands for development, 1 stands for production
11 | // for development mode: NODE_ENV=0 webpack
12 | // for production mode: NODE_ENV=1 webpack
13 | var ENV = !!(+process.env.NODE_ENV || 0);
14 | 
15 | module.exports = [{
16 |   name: 'prod',
17 |   entry: {
18 |     "react-d3-core": js_root + 'index.js',
19 |   },
20 | 
21 |   output: {
22 |     libraryTarget: "var",
23 |     library: "ReactD3Core",
24 |     path: js_dist,
25 |     filename: ENV ? '[name].min.js' : '[name].js'
26 |   },
27 | 
28 |   module: {
29 |     loaders: [{
30 |       loader: 'babel-loader',
31 |       test: [/\.jsx$/, /\.js$/],
32 |       exclude: /node_modules/,
33 |       query: {
34 |         presets: ['react', 'es2015', 'stage-0']
35 |       }
36 |     }, {
37 |       test: /\.css$/,
38 |       loader: 'style-loader!css-loader'
39 |     }],
40 |   },
41 | 
42 |   resolve: {
43 |     extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx']
44 |   },
45 | 
46 |   externals: {
47 |     //don't bundle the 'react' npm package with our bundle.js
48 |     //but get it from a global 'React' variable
49 |     'react': 'React',
50 |     'react-dom': 'ReactDOM',
51 |     'd3': 'd3'
52 |   },
53 | 
54 |   plugins: ENV ? [
55 |     new webpack.optimize.UglifyJsPlugin({
56 |       sourceMap: true,
57 |       mangle: false
58 |     }),
59 |     new webpack.ProvidePlugin({
60 |       'd3': 'd3'
61 |     })
62 |   ] : [
63 |     new webpack.ProvidePlugin({
64 |       'd3': 'd3'
65 |     })
66 |   ]
67 | }];
68 | 


--------------------------------------------------------------------------------