diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 0000000..a0c27b9 --- /dev/null +++ b/.eslintrc @@ -0,0 +1,39 @@ +{ + "env": { + "node": true, + "browser": true, + "es6": true, + "commonjs": true + }, + "extends": "eslint:recommended", + "parser": "babel-eslint", + "parserOptions": { + "ecmaFeatures": { + "jsx": true + }, + "sourceType": "module" + }, + "plugins": [ + "react", + "babel" + ], + "rules": { + "indent": [ + "error", + 2 + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "single" + ], + "semi": [ + "error", + "always" + ], + "no-unused-vars": "warn" + } +} diff --git a/devServer.js b/devServer.js index 37320f0..e48f8f4 100644 --- a/devServer.js +++ b/devServer.js @@ -1,3 +1,4 @@ +/* eslint no-console: 0 */ var path = require('path'); var express = require('express'); var webpack = require('webpack'); @@ -28,4 +29,4 @@ app.listen(5000, 'localhost', function(err) { } console.log('Listening at http://localhost:5000/example'); -}); \ No newline at end of file +}); diff --git a/example/container.js b/example/container.js index 6a8098e..8e5731f 100644 --- a/example/container.js +++ b/example/container.js @@ -1,38 +1,38 @@ -import React, { Component } from 'react' -import {Nav, NavItem} from 'react-bootstrap' +import React, { Component } from 'react'; +import {Nav, NavItem} from 'react-bootstrap'; export default class ContainerExample extends Component { - constructor(props) { - super(props) - } + constructor(props) { + super(props); + } - render() { + render() { - const route = this.props.routes[1].path || 'container' + const route = this.props.routes[1].path || 'container'; - return ( -
- -
- -
- {this.props.children} -
- ) - } -} \ No newline at end of file + return ( +
+ +
+ +
+ {this.props.children} +
+ ); + } +} diff --git a/example/index.js b/example/index.js index aa95ce5..4f610f5 100644 --- a/example/index.js +++ b/example/index.js @@ -1,25 +1,25 @@ -import React, { Component } from 'react' -import ReactDOM from 'react-dom' -import { Router, Route, browserHistory, IndexRedirect} from 'react-router' -import Container from './container' +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import { Router, Route, browserHistory, IndexRedirect} from 'react-router'; +import Container from './container'; -import {default as ChartContainer} from './src/container' -import Grid from './src/grid' -import Label from './src/label' -import Legend from './src/legend' -import Xaxis from './src/xaxis' -import Yaxis from './src/yaxis' +import {default as ChartContainer} from './src/container'; +import Grid from './src/grid'; +import Label from './src/label'; +import Legend from './src/legend'; +import Xaxis from './src/xaxis'; +import Yaxis from './src/yaxis'; // Declarative route configuration (could also load this config lazily // instead, all you really need is a single root route, you don't need to // colocate the entire config). - + ReactDOM.render(( - + @@ -27,4 +27,4 @@ ReactDOM.render(( -), document.getElementById('root')) \ No newline at end of file +), document.getElementById('root')); diff --git a/example/src/animate_container.jsx b/example/src/animate_container.jsx index 240fc55..6a4c93f 100644 --- a/example/src/animate_container.jsx +++ b/example/src/animate_container.jsx @@ -1,4 +1,4 @@ -"use strict"; +'use strict'; var React = require('react'); var ReactDOM = require('react-dom'); @@ -12,7 +12,7 @@ var Chart = require('../../lib/index').Chart; return this.props; }, componentDidMount: function() { - var title = "test chart lib" + var title = "test chart lib"; var i = 0; var that = this; @@ -24,118 +24,118 @@ var Chart = require('../../lib/index').Chart; if(i % 2 == 1) { var chartSeries = [ - { - field: 'Under 5 Years', - name: 'Under 5 Years', - color: '#1f77b4' - }, - { - field: '5 to 13 Years', - name: '5 to 13 Years', - color: '#ff7f0e' - }, - { - field: '14 to 17 Years', - name: '14 to 17 Years', - color: '#2ca02c' - }, - { - field: '18 to 24 Years', - name: '18 to 24 Years', - color: '#d62728' - }, - { - field: '25 to 44 Years', - name: '25 to 44 Years', - color: '#9467bd' - }, - { - field: '45 to 64 Years', - name: '45 to 64 Years', - color: '#8c564b' - }, - { - field: '65 Years and Over', - name: '65 Years and Over', - color: '#e377c2' - } - ] - - var width = 960 + { + field: 'Under 5 Years', + name: 'Under 5 Years', + color: '#1f77b4' + }, + { + field: '5 to 13 Years', + name: '5 to 13 Years', + color: '#ff7f0e' + }, + { + field: '14 to 17 Years', + name: '14 to 17 Years', + color: '#2ca02c' + }, + { + field: '18 to 24 Years', + name: '18 to 24 Years', + color: '#d62728' + }, + { + field: '25 to 44 Years', + name: '25 to 44 Years', + color: '#9467bd' + }, + { + field: '45 to 64 Years', + name: '45 to 64 Years', + color: '#8c564b' + }, + { + field: '65 Years and Over', + name: '65 Years and Over', + color: '#e377c2' + } + ]; + + var width = 960; }else { var chartSeries = [ - { - field: 'Under 5 Years', - name: 'Under 5 Years', - color: '#1f77b4' - }, - { - field: '5 to 13 Years', - name: '5 to 13 Years', - color: '#ff7f0e' - } - ]; - - var width = 500 + { + field: 'Under 5 Years', + name: 'Under 5 Years', + color: '#1f77b4' + }, + { + field: '5 to 13 Years', + name: '5 to 13 Years', + color: '#ff7f0e' + } + ]; + + var width = 500; } - that._updateState(title_new, chartSeries, width) - }, 2000) + that._updateState(title_new, chartSeries, width); + }, 2000); }, _updateState: function(title, chartSeries, width) { this.setState({ title: title, chartSeries: chartSeries, width: width - }) + }); }, render: function() { var width = 960, height = 500, margins = {top: 20, right: 50, bottom: 20, left: 50}, - id = "test-chart", - svgClassName = "test-chart-class", - titleClassName = "test-chart-title-class"; + id = 'test-chart', + svgClassName = 'test-chart-class', + titleClassName = 'test-chart-title-class'; var chartSeries = [ - { - field: 'Under 5 Years', - name: 'Under 5 Years', - color: '#1f77b4' - }, - { - field: '5 to 13 Years', - name: '5 to 13 Years', - color: '#ff7f0e' - }, - { - field: '14 to 17 Years', - name: '14 to 17 Years', - color: '#2ca02c' - }, - { - field: '18 to 24 Years', - name: '18 to 24 Years', - color: '#d62728' - }, - { - field: '25 to 44 Years', - name: '25 to 44 Years', - color: '#9467bd' - }, - { - field: '45 to 64 Years', - name: '45 to 64 Years', - color: '#8c564b' - }, - { - field: '65 Years and Over', - name: '65 Years and Over', - color: '#e377c2' - } - ] - - var title = "test chart lib" + { + field: 'Under 5 Years', + name: 'Under 5 Years', + color: '#1f77b4' + }, + { + field: '5 to 13 Years', + name: '5 to 13 Years', + color: '#ff7f0e' + }, + { + field: '14 to 17 Years', + name: '14 to 17 Years', + color: '#2ca02c' + }, + { + field: '18 to 24 Years', + name: '18 to 24 Years', + color: '#d62728' + }, + { + field: '25 to 44 Years', + name: '25 to 44 Years', + color: '#9467bd' + }, + { + field: '45 to 64 Years', + name: '45 to 64 Years', + color: '#8c564b' + }, + { + field: '65 Years and Over', + name: '65 Years and Over', + color: '#e377c2' + } + ]; + + var title = "test chart lib"; return ( - ) + ); } - }) + }); ReactDOM.render( - , document.getElementById('blank-animate_container')) + , document.getElementById('blank-animate_container')); -})() +})(); diff --git a/example/src/animate_xaxis.jsx b/example/src/animate_xaxis.jsx index b7200b3..136c469 100644 --- a/example/src/animate_xaxis.jsx +++ b/example/src/animate_xaxis.jsx @@ -1,4 +1,4 @@ -"use strict"; +'use strict'; var React = require('react'); var ReactDOM = require('react-dom'); @@ -12,7 +12,7 @@ var Xaxis = require('../../lib').Xaxis; return this.props; }, componentDidMount: function() { - var generalChartData = require("json!./data/state_age.json"); + var generalChartData = require('json!./data/state_age.json'); var i = 0; var that = this; @@ -21,22 +21,22 @@ var Xaxis = require('../../lib').Xaxis; i++; if(i % 2 == 1) { - var xDomain = generalChartData.map(function(d) { return d.State; }) + var xDomain = generalChartData.map(function(d) { return d.State; }); }else { - var xDomain = ["CA", "TX"] + var xDomain = ['CA', 'TX']; } - that._updateState(xDomain) - }, 2000) + that._updateState(xDomain); + }, 2000); }, _updateState: function(xDomain) { this.setState({ xDomain: xDomain - }) + }); }, render: function() { - var generalChartData = require("json!./data/state_age.json"); - var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; }); + var generalChartData = require('json!./data/state_age.json'); + var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== 'State'; }); generalChartData.forEach(function(d) { var y0 = 0; @@ -50,7 +50,7 @@ var Xaxis = require('../../lib').Xaxis; xDomain = generalChartData.map(function(d) { return d.State; }), xRangeRoundBands = {interval: [0, 860], padding: .1}, xScale = 'ordinal', - xLabel = "Age"; + xLabel = 'Age'; return ( @@ -63,13 +63,13 @@ var Xaxis = require('../../lib').Xaxis; {...this.state} /> - ) + ); } - }) + }); ReactDOM.render( - , document.getElementById('blank-animate_xaxis')) + , document.getElementById('blank-animate_xaxis')); -})() +})(); diff --git a/example/src/blank_chart.jsx b/example/src/blank_chart.jsx index 83a9b47..4a2b1aa 100644 --- a/example/src/blank_chart.jsx +++ b/example/src/blank_chart.jsx @@ -1,4 +1,4 @@ -"use strict"; +'use strict'; var React = require('react'); @@ -22,19 +22,19 @@ var BlankChart = React.createClass({ {...this.props} {...this.state} style= {{ - "transform": "rotate(45deg)" + 'transform': 'rotate(45deg)' }} /> - ) + ); } -}) +}); module.exports = BlankChart; diff --git a/example/src/components.jsx b/example/src/components.jsx index 3ac0a8f..9e13d65 100644 --- a/example/src/components.jsx +++ b/example/src/components.jsx @@ -1,4 +1,4 @@ -"use strict"; +'use strict'; var React = require('react'); var ReactDOM = require('react-dom'); @@ -6,8 +6,8 @@ var BlankChart = require('./blank_chart.jsx'); (function() { - var generalChartData = require("json!./data/state_age.json"); - var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== "State"; }); + var generalChartData = require('json!./data/state_age.json'); + var ageNames = d3.keys(generalChartData[0]).filter(function(key) { return key !== 'State'; }); generalChartData.forEach(function(d) { var y0 = 0; @@ -18,11 +18,11 @@ var BlankChart = require('./blank_chart.jsx'); var width = 960, height = 500, margins = {top: 50, right: 50, bottom: 100, left: 100}, - id = "test-chart", - title = "test chart lib", - svgClassName = "test-chart-class", - titleClassName = "test-chart-title-class", - legendClassName = "test-legend", + id = 'test-chart', + title = 'test chart lib', + svgClassName = 'test-chart-class', + titleClassName = 'test-chart-title-class', + legendClassName = 'test-legend', showLegend = true, showXAxis = true, showYAxis = true, @@ -73,7 +73,7 @@ var BlankChart = require('./blank_chart.jsx'); xRangeRoundBands = {interval: [0, width - margins.left - margins.right], padding: .1}, xScale = 'ordinal', xAxisClassName = 'x-axis', - xLabel = "Age", + xLabel = 'Age', y = function(d) { return +d; }, @@ -82,8 +82,8 @@ var BlankChart = require('./blank_chart.jsx'); yDomain = [0, d3.max(generalChartData, function(d) { return d.total; })], yScale = 'linear', yAxisClassName = 'y-axis', - yLabel = "Population", - yTickFormat = d3.format(".2s"); + yLabel = 'Population', + yTickFormat = d3.format('.2s'); ReactDOM.render( , document.getElementById('blank-blank_chart') - ) -})() + ); +})(); diff --git a/example/src/container.jsx b/example/src/container.jsx index cc29926..eaf2ea6 100644 --- a/example/src/container.jsx +++ b/example/src/container.jsx @@ -1,54 +1,54 @@ -"use strict"; +'use strict'; -import React, {Component} from 'react' -import {Chart} from '../../src' +import React, {Component} from 'react'; +import {Chart} from '../../src'; const width = 960, height = 500, margins = {top: 20, right: 50, bottom: 20, left: 50}, - id = "test-chart", - svgClassName = "test-chart-class", - titleClassName = "test-chart-title-class"; + id = 'test-chart', + svgClassName = 'test-chart-class', + titleClassName = 'test-chart-title-class'; const chartSeries = [ - { - field: 'Under 5 Years', - name: 'Under 5 Years', - color: '#1f77b4' - }, - { - field: '5 to 13 Years', - name: '5 to 13 Years', - color: '#ff7f0e' - }, - { - field: '14 to 17 Years', - name: '14 to 17 Years', - color: '#2ca02c' - }, - { - field: '18 to 24 Years', - name: '18 to 24 Years', - color: '#d62728' - }, - { - field: '25 to 44 Years', - name: '25 to 44 Years', - color: '#9467bd' - }, - { - field: '45 to 64 Years', - name: '45 to 64 Years', - color: '#8c564b' - }, - { - field: '65 Years and Over', - name: '65 Years and Over', - color: '#e377c2' - } - ] + { + field: 'Under 5 Years', + name: 'Under 5 Years', + color: '#1f77b4' + }, + { + field: '5 to 13 Years', + name: '5 to 13 Years', + color: '#ff7f0e' + }, + { + field: '14 to 17 Years', + name: '14 to 17 Years', + color: '#2ca02c' + }, + { + field: '18 to 24 Years', + name: '18 to 24 Years', + color: '#d62728' + }, + { + field: '25 to 44 Years', + name: '25 to 44 Years', + color: '#9467bd' + }, + { + field: '45 to 64 Years', + name: '45 to 64 Years', + color: '#8c564b' + }, + { + field: '65 Years and Over', + name: '65 Years and Over', + color: '#e377c2' + } +]; -const title = "test chart lib" +const title = "test chart lib"; export default class ContainerSample extends Component { @@ -64,6 +64,6 @@ export default class ContainerSample extends Component { titleClassName= {titleClassName} chartSeries= {chartSeries} /> - ) + ); } -} \ No newline at end of file +} diff --git a/example/src/grid.jsx b/example/src/grid.jsx index e06e31b..aaa3ad8 100644 --- a/example/src/grid.jsx +++ b/example/src/grid.jsx @@ -1,15 +1,15 @@ -"use strict"; +'use strict'; -import React, { Component } from 'react' -import {Grid} from '../../src' -import D3Array from 'd3-array' +import React, { Component } from 'react'; +import {Grid} from '../../src'; +import D3Array from 'd3-array'; const generalChartData = require('./data/user_sample.json'); const width = 960, height = 500, margins = {top: 20, right: 50, bottom: 30, left: 50}, - gridAxisClassName = "test-grid-class", + gridAxisClassName = 'test-grid-class', x = function(d) { return d.index; }, @@ -60,6 +60,6 @@ export default class GridSample extends Component { yScale= {yScale} /> - ) + ); } -} \ No newline at end of file +} diff --git a/example/src/label.jsx b/example/src/label.jsx index f6e474f..f049177 100644 --- a/example/src/label.jsx +++ b/example/src/label.jsx @@ -1,11 +1,11 @@ -"use strict"; +'use strict'; -import React, { Component } from 'react' -import {Label} from '../../src' +import React, { Component } from 'react'; +import {Label} from '../../src'; const labelTitle = 'new label title', - labelPosition = 'right' + labelPosition = 'right'; export default class LabelSample extends Component { @@ -17,6 +17,6 @@ export default class LabelSample extends Component { labelPosition= {labelPosition} /> - ) + ); } } diff --git a/example/src/legend.jsx b/example/src/legend.jsx index 835fd2f..c105d62 100644 --- a/example/src/legend.jsx +++ b/example/src/legend.jsx @@ -1,42 +1,42 @@ -"use strict"; +'use strict'; -import React, { Component } from 'react' -import {Legend} from '../../src' +import React, { Component } from 'react'; +import {Legend} from '../../src'; const chartSeries = [ - { - field: 'Under 5 Years' - }, - { - field: '5 to 13 Years' - }, - { - field: '14 to 17 Years', - name: '14 to 17 Years', - color: '#2ca02c' - }, - { - field: '18 to 24 Years', - name: '18 to 24 Years', - color: '#d62728' - }, - { - field: '25 to 44 Years', - name: '25 to 44 Years', - color: '#9467bd' - }, - { - field: '45 to 64 Years', - name: '45 to 64 Years', - color: '#8c564b' - }, - { - field: '65 Years and Over', - name: '65 Years and Over', - color: '#e377c2' - } + { + field: 'Under 5 Years' + }, + { + field: '5 to 13 Years' + }, + { + field: '14 to 17 Years', + name: '14 to 17 Years', + color: '#2ca02c' + }, + { + field: '18 to 24 Years', + name: '18 to 24 Years', + color: '#d62728' + }, + { + field: '25 to 44 Years', + name: '25 to 44 Years', + color: '#9467bd' + }, + { + field: '45 to 64 Years', + name: '45 to 64 Years', + color: '#8c564b' + }, + { + field: '65 Years and Over', + name: '65 Years and Over', + color: '#e377c2' + } - ] +]; export default class LegendSample extends Component { @@ -52,6 +52,6 @@ export default class LegendSample extends Component { swatchShape= 'circle' /> - ) + ); } -} \ No newline at end of file +} diff --git a/example/src/xaxis.jsx b/example/src/xaxis.jsx index f7f8802..c5b0043 100644 --- a/example/src/xaxis.jsx +++ b/example/src/xaxis.jsx @@ -1,10 +1,10 @@ -"use strict"; +'use strict'; -import React, { Component } from 'react' -import {Xaxis} from '../../src' +import React, { Component } from 'react'; +import {Xaxis} from '../../src'; -const generalChartData = require("./data/state_age.json"); -const ageNames = Object.keys(generalChartData[0]).filter(function(key) { return key !== "State"; }); +const generalChartData = require('./data/state_age.json'); +const ageNames = Object.keys(generalChartData[0]).filter(function(key) { return key !== 'State'; }); generalChartData.forEach(function(d) { var y0 = 0; @@ -17,7 +17,7 @@ const x = function(d) { }, xDomain = generalChartData.map(function(d) { return d.State; }), xScale = 'ordinal', - xLabel = "Age"; + xLabel = 'Age'; export default class XaxisSample extends Component { @@ -32,7 +32,7 @@ export default class XaxisSample extends Component { xScale= {xScale} xLabel = {xLabel} style = {{ - "transform": "rotate(45deg)" + transform: 'rotate(45deg)' }} /> @@ -46,11 +46,11 @@ export default class XaxisSample extends Component { xLabelPosition="top" xLabel = {xLabel} style = {{ - "transform": "rotate(45deg)" + transform: 'rotate(45deg)' }} /> - ) + ); } } diff --git a/example/src/xaxis_click.jsx b/example/src/xaxis_click.jsx index 42f16b5..3f4b3b4 100644 --- a/example/src/xaxis_click.jsx +++ b/example/src/xaxis_click.jsx @@ -1,4 +1,5 @@ -"use strict"; +/* global d3 */ +'use strict'; var React = require('react'); var ReactDOM = require('react-dom'); @@ -6,9 +7,9 @@ var Xaxis = require('../../lib/index.js').Xaxis; (function() { // load your general data, for building xDomain. - var chartData = require("dsv?delimiter=,!./data/garbage.csv"); + var chartData = require('dsv?delimiter=,!./data/garbage.csv'); // your date format, use for parsing - var parseDate = d3.time.format("%YM%m").parse; + var parseDate = d3.time.format('%YM%m').parse; // setting you svg width var width = 400, @@ -21,24 +22,24 @@ var Xaxis = require('../../lib/index.js').Xaxis; return parseDate(d.month); }, // set your x domain - xDomain = d3.extent(chartData, function(d){ return x(d) }), + xDomain = d3.extent(chartData, function(d){ return x(d); }), // set your x range xRange = [0, width - margins.left - margins.right], // your scale type 'linear', 'ordinal', 'time'... etc. xScale = 'time', // set your label name - xLabel = "Month"; + xLabel = 'Month'; var ClickAxis = React.createClass({ getInitialState: function() { return { expend: false - } + }; }, _onClick: function() { this.setState({ expend: !this.state.expend - }) + }); }, render: function() { var expend = this.state.expend; @@ -58,12 +59,12 @@ var Xaxis = require('../../lib/index.js').Xaxis; xLabel= {xLabel} /> - ) + ); } - }) + }); ReactDOM.render( - - , document.getElementById('click-xaxis') - ) -})() + , + document.getElementById('click-xaxis') + ); +})(); diff --git a/example/src/yaxis.jsx b/example/src/yaxis.jsx index c5696db..e01239c 100644 --- a/example/src/yaxis.jsx +++ b/example/src/yaxis.jsx @@ -1,10 +1,10 @@ "use strict"; -import React, { Component } from 'react' -import {Yaxis} from '../../src' +import React, { Component } from 'react'; +import {Yaxis} from '../../src'; -const generalChartData = require("./data/state_age.json"); -const ageNames = Object.keys(generalChartData[0]).filter(function(key) { return key !== "State"; }); +const generalChartData = require('./data/state_age.json'); +const ageNames = Object.keys(generalChartData[0]).filter(function(key) { return key !== 'State'; }); generalChartData.forEach(function(d) { var y0 = 0; @@ -17,7 +17,7 @@ const y = function(d) { }, yDomain = generalChartData.map(function(d) { return d.State; }), yScale = 'ordinal', - yLabel = "Age"; + yLabel = 'Age'; export default class YaxisSample extends Component { @@ -32,7 +32,7 @@ export default class YaxisSample extends Component { yScale= {yScale} yLabel = {yLabel} style = {{ - "transform": "rotate(45deg)" + transform: 'rotate(45deg)' }} /> @@ -46,11 +46,11 @@ export default class YaxisSample extends Component { yLabelPosition="right" yLabel = {yLabel} style = {{ - "transform": "rotate(45deg)" + transform: 'rotate(45deg)' }} /> - ) + ); } } diff --git a/package.json b/package.json index da71034..4a0f85d 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "react-d3 chart core component", "main": "./lib/index.js", "scripts": { + "lint": "eslint **/*.js **/*.jsx", "test": "karma start", "build": "rm -rf ./lib && BABEL_ENV=production ./node_modules/.bin/babel ./src --out-dir ./lib", "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" @@ -13,7 +14,7 @@ "devDependencies": { "babel-cli": "^6.6.4", "babel-core": "^6.5.2", - "babel-eslint": "^3.1.9", + "babel-eslint": "^6.0.2", "babel-loader": "^6.2.3", "babel-plugin-add-module-exports": "^0.1.2", "babel-plugin-react-transform": "^2.0.0", @@ -25,6 +26,9 @@ "babel-preset-react-hmre": "1.0.1", "babel-preset-stage-0": "^6.5.0", "dsv-loader": "^1.0.0", + "eslint": "^2.8.0", + "eslint-plugin-babel": "^3.2.0", + "eslint-plugin-react": "^4.3.0", "expect": "^1.13.3", "express": "^4.13.4", "extract-text-webpack-plugin": "^1.0.1", diff --git a/src/axis/axis.jsx b/src/axis/axis.jsx index 818c503..0be76fb 100644 --- a/src/axis/axis.jsx +++ b/src/axis/axis.jsx @@ -1,4 +1,4 @@ -"use strict"; +'use strict'; import { default as React, @@ -7,7 +7,7 @@ import { } from 'react'; import D3Axis from 'd3-axis'; -import D3Selection from 'd3-selection' +import D3Selection from 'd3-selection'; import ReactFauxDOM from 'react-faux-dom'; import {scale} from '../utils/scale'; @@ -28,7 +28,7 @@ export default class Axis extends Component { showAxis: PropTypes.bool, type: PropTypes.string, orient: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), - tickOrient: PropTypes.oneOf(['top', 'bottom', 'left', 'right']), + tickOrient: PropTypes.oneOf(['top', 'bottom', 'left', 'right']) } _mkTickAxis () { @@ -39,7 +39,7 @@ export default class Axis extends Component { tickPadding, tickSizeInner, tickSizeOuter, - ticks, + ticks } = this.props; var func = D3Axis; @@ -48,11 +48,11 @@ export default class Axis extends Component { if(tickOrient === 'left') { func = func.axisLeft(this._mkScale(this.props)); }else if (tickOrient === 'right') { - func = func.axisRight(this._mkScale(this.props)) + func = func.axisRight(this._mkScale(this.props)); }else if (tickOrient === 'top') { - func = func.axisTop(this._mkScale(this.props)) + func = func.axisTop(this._mkScale(this.props)); }else if (tickOrient === 'bottom') { - func = func.axisBottom(this._mkScale(this.props)) + func = func.axisBottom(this._mkScale(this.props)); } if(tickFormat) @@ -75,12 +75,12 @@ export default class Axis extends Component { } _mkScale () { - var newScale + var newScale; if(this.props.scale === 'ordinal') - newScale = 'band' + newScale = 'band'; else - newScale = this.props.scale + newScale = this.props.scale; var func = scale(Object.assign({}, this.props, {scale: newScale})); @@ -98,13 +98,14 @@ export default class Axis extends Component { } = this.props; var axisGroup = ReactFauxDOM.createElement('g'); + var axisClasses; if(type === 'x') - var axisClasses = `${axisClassName} axis x` + axisClasses = `${axisClassName} axis x`; else if(type === 'y') - var axisClasses = `${axisClassName} axis y` + axisClasses = `${axisClassName} axis y`; else if(type === 'gridx' || type === 'gridy') - var axisClasses = `${gridAxisClassName} grid-axis` + axisClasses = `${gridAxisClassName} grid-axis`; axisGroup.setAttribute('class', axisClasses); @@ -113,13 +114,13 @@ export default class Axis extends Component { axisDom.call(this._mkTickAxis()); if(!showAxis) { - axisDom.selectAll(".grid-axis .tick text") - .style("opacity", "0") + axisDom.selectAll('.grid-axis .tick text') + .style('opacity', '0'); if(type === 'gridx' || type === 'gridy') { // hide domain in grids - axisDom.selectAll(".grid-axis .domain") - .style("opacity", "0") + axisDom.selectAll('.grid-axis .domain') + .style('opacity', '0'); } } @@ -138,12 +139,12 @@ export default class Axis extends Component { .style('opacity', .2) .style('fill', 'none') .style('stroke', '#000') - .style('stroke-width', '1.5px') + .style('stroke-width', '1.5px'); axisDom.selectAll('.axis path') - .style('display', 'none') + .style('display', 'none'); - var axisText = axisDom.selectAll('.axis text') + var axisText = axisDom.selectAll('.axis text'); if(style) { for(var key in style) { diff --git a/src/axis/label.jsx b/src/axis/label.jsx index f8638c3..fd5bfd8 100644 --- a/src/axis/label.jsx +++ b/src/axis/label.jsx @@ -1,12 +1,12 @@ -"use strict"; +'use strict'; import { default as React, Component, - PropTypes, + PropTypes } from 'react'; -import D3Selection from 'd3-selection' +import D3Selection from 'd3-selection'; import ReactFauxDOM from 'react-faux-dom'; import CommonProps from '../commonProps'; @@ -72,7 +72,7 @@ export default class Label extends Component { .attr('y', +labelOffset) .attr('x', fixWidth / 2) .style('text-anchor', textAnchor) - .text(labelTitle) + .text(labelTitle); }else if (labelPosition === 'left') { @@ -81,7 +81,7 @@ export default class Label extends Component { .attr('y', -labelOffset) .attr('x', -fixHeight / 2) .style('text-anchor', textAnchor) - .text(labelTitle) + .text(labelTitle); }else if (labelPosition === 'right') { @@ -90,7 +90,7 @@ export default class Label extends Component { .attr('y', +labelOffset) .attr('x', -fixHeight / 2) .style('text-anchor', textAnchor) - .text(labelTitle) + .text(labelTitle); } return labelDom; diff --git a/src/axis/xaxis.jsx b/src/axis/xaxis.jsx index 67d9322..2e69a94 100644 --- a/src/axis/xaxis.jsx +++ b/src/axis/xaxis.jsx @@ -1,4 +1,4 @@ -"use strict" +'use strict'; import { default as React, diff --git a/src/axis/yaxis.jsx b/src/axis/yaxis.jsx index 7fe8e62..079355a 100644 --- a/src/axis/yaxis.jsx +++ b/src/axis/yaxis.jsx @@ -1,4 +1,4 @@ -"use strict" +'use strict'; import { default as React, diff --git a/src/chartContainer.jsx b/src/chartContainer.jsx index 0502194..0448fec 100644 --- a/src/chartContainer.jsx +++ b/src/chartContainer.jsx @@ -1,8 +1,8 @@ -"use strict"; +'use strict'; import { default as React, - Component, + Component } from 'react'; import ChartSvg from './container/svg'; @@ -32,7 +32,7 @@ export default class ChartContainer extends Component { legend = + />; } return ( @@ -40,6 +40,6 @@ export default class ChartContainer extends Component { {legend} - ) + ); } } diff --git a/src/commonProps.jsx b/src/commonProps.jsx index 01ff671..5b9aacb 100644 --- a/src/commonProps.jsx +++ b/src/commonProps.jsx @@ -1,7 +1,7 @@ -"use strict"; +'use strict'; export default { width: 960, height: 500, margins: {top: 80, right: 100, bottom: 80, left: 100} -} +}; diff --git a/src/container/svg.jsx b/src/container/svg.jsx index 59e5de1..1003998 100644 --- a/src/container/svg.jsx +++ b/src/container/svg.jsx @@ -1,9 +1,9 @@ -"use strict"; +'use strict'; import { default as React, Component, - PropTypes, + PropTypes } from 'react'; import CommonProps from '../commonProps'; @@ -26,7 +26,7 @@ export default class ChartSvg extends Component { width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, margins: PropTypes.object.isRequired, - svgClassName: PropTypes.string.isRequired, + svgClassName: PropTypes.string.isRequired } render() { diff --git a/src/container/title.jsx b/src/container/title.jsx index 8435ce3..1694ab2 100644 --- a/src/container/title.jsx +++ b/src/container/title.jsx @@ -1,9 +1,9 @@ -"use strict"; +'use strict'; import { default as React, Component, - PropTypes, + PropTypes } from 'react'; import CommonProps from '../commonProps'; @@ -29,7 +29,7 @@ export default class ChartTitle extends Component { const { titleClassName, title, - width, + width } = this.props; var titleStyle = { @@ -37,7 +37,7 @@ export default class ChartTitle extends Component { textAlign: 'center', fontSize: '2em', paddingBottom: '1.3em' - } + }; return (
{title}
- ) + ); } } diff --git a/src/grid/grid.jsx b/src/grid/grid.jsx index 31ea3a6..f7d0408 100644 --- a/src/grid/grid.jsx +++ b/src/grid/grid.jsx @@ -1,9 +1,9 @@ -"use strict"; +'use strict'; import { default as React, Component, - PropTypes, + PropTypes } from 'react'; import Axis from '../axis/axis'; @@ -59,11 +59,12 @@ export default class Grid extends Component { y, yDomain, yRange, - yScale, + yScale } = this.props; var gridAxis; var t; + var tickSize; if(!yRange) { yRange = [height - margins.top - margins.bottom, 0]; @@ -75,7 +76,7 @@ export default class Grid extends Component { if(type === 'x') { t = `translate(0, ${height - margins.bottom - margins.top})`; - var tickSize = height - margins.top - margins.bottom; + tickSize = height - margins.top - margins.bottom; // if grid axis don't pass customize ticks. gridAxis = + />; } else if(type === 'y') { - t = `translate(0, 0)`; - var tickSize = width - margins.left - margins.right; + t = 'translate(0, 0)'; + tickSize = width - margins.left - margins.right; // if grid axis don't pass customize ticks. gridAxis = + />; } return ( {gridAxis} - ) + ); } } diff --git a/src/grid/xgrid.jsx b/src/grid/xgrid.jsx index 9bc2c74..766c2fe 100644 --- a/src/grid/xgrid.jsx +++ b/src/grid/xgrid.jsx @@ -1,4 +1,4 @@ -"use strict" +'use strict'; import { default as React, @@ -18,6 +18,6 @@ export default class XGrid extends Component { {...this.props} type="x" /> - ) + ); } } diff --git a/src/grid/ygrid.jsx b/src/grid/ygrid.jsx index 626d403..733c9b7 100644 --- a/src/grid/ygrid.jsx +++ b/src/grid/ygrid.jsx @@ -1,4 +1,4 @@ -"use strict" +'use strict'; import { default as React, @@ -18,6 +18,6 @@ export default class YGrid extends Component { {...this.props} type="y" /> - ) + ); } } diff --git a/src/legend.jsx b/src/legend.jsx index 326f346..f92b3b3 100644 --- a/src/legend.jsx +++ b/src/legend.jsx @@ -1,13 +1,13 @@ -"use strict"; +'use strict'; import { default as React, Component, - PropTypes, + PropTypes } from 'react'; -import D3Selection from 'd3-selection' -import D3Scale from 'd3-scale' +import D3Selection from 'd3-selection'; +import D3Scale from 'd3-scale'; import ReactFauxDOM from 'react-faux-dom'; import CommonProps from './commonProps'; @@ -16,7 +16,7 @@ export default class Legend extends Component { super(props); } - static defaultProps = { + static defaultProps = { backgroundColor: '#FFF', legendHeight: 50, legendPosition: 'left', @@ -34,7 +34,7 @@ export default class Legend extends Component { legendOffset: PropTypes.number.isRequired, legendClassName: PropTypes.string.isRequired, legendPosition: PropTypes.oneOf(['left', 'right']).isRequired, - swatchShape: PropTypes.oneOf(['circle', 'square']), + swatchShape: PropTypes.oneOf(['circle', 'square']) } _radius(swatchShape) { @@ -52,7 +52,7 @@ export default class Legend extends Component { return chartSeries.map(({ name, color, field }, i) => ({ color: color || colors(i), name: name || field, - field, + field })); } @@ -65,7 +65,7 @@ export default class Legend extends Component { swatchShape, chartSeries, margins, - width, + width } = this.props; const legendArea = D3Selection.select(dom); @@ -76,25 +76,25 @@ export default class Legend extends Component { const legend = legendArea .selectAll('div') .data(series) - .enter().append("div") - .attr("class", `${legendClassName} legend`) - .style("height", 20) - .style("padding", 5) - .style("background-color", backgroundColor) - .style("display", "inline-block"); - - const rect = legend.append("div") - .style("width", 18) - .style("height", 18) - .style("border-radius", radius) - .style("background-color", d => d.color) - .style("float", legendPosition); - - const text = legend.append("div") - .style("padding-left", 5) - .style("padding-right", 5) + .enter().append('div') + .attr('class', `${legendClassName} legend`) + .style('height', 20) + .style('padding', 5) + .style('background-color', backgroundColor) + .style('display', 'inline-block'); + + const rect = legend.append('div') + .style('width', 18) + .style('height', 18) + .style('border-radius', radius) + .style('background-color', d => d.color) + .style('float', legendPosition); + + const text = legend.append('div') + .style('padding-left', 5) + .style('padding-right', 5) .text(d => d.name) - .style("float", legendPosition); + .style('float', legendPosition); return legendArea; } diff --git a/src/utils/scale.jsx b/src/utils/scale.jsx index 373ea6b..86f6ffc 100644 --- a/src/utils/scale.jsx +++ b/src/utils/scale.jsx @@ -3,7 +3,7 @@ import D3Scale from 'd3-scale'; export function scale(props) { const { type, - scale, + scale } = props; var func; @@ -23,13 +23,13 @@ export function scale(props) { else if(scale === 'quantile') func = D3Scale.scaleQuantile(); else if(scale === 'ordinal') - func = D3Scale.scaleOrdinal() + func = D3Scale.scaleOrdinal(); else if(scale === 'band') func = D3Scale.scaleBand(); else if(scale === 'time') func = D3Scale.scaleTime(); else - new Error(`Please check your axis scale setting. "${scale}" scale is invalid. `) + new Error(`Please check your axis scale setting. "${scale}" scale is invalid. `); func = _mkScaleSettings(props, func); @@ -47,26 +47,26 @@ function _mkScaleSettings(props, func) { } = props; if(range) - func.range(range) + func.range(range); if(domain) - func.domain(domain) + func.domain(domain); if(scale === 'band') { func - .round(true) + .round(true); - if(bandPaddingInner) - func.paddingInner(bandPaddingInner) + if(bandPaddingInner) + func.paddingInner(bandPaddingInner); else - func.paddingInner(.1) - - if(bandPaddingOuter) - func.paddingOuter(bandPaddingOuter) + func.paddingInner(.1); + + if(bandPaddingOuter) + func.paddingOuter(bandPaddingOuter); else - func.paddingOuter(.1) - + func.paddingOuter(.1); + } return func; diff --git a/src/utils/xDomain.jsx b/src/utils/xDomain.jsx index 9a39f69..6eae3ac 100644 --- a/src/utils/xDomain.jsx +++ b/src/utils/xDomain.jsx @@ -1,4 +1,4 @@ -import D3Array from 'd3-array' +import D3Array from 'd3-array'; export function xDomain(props, stack, horizonal) { const { @@ -36,11 +36,11 @@ export function xDomain(props, stack, horizonal) { }else if (d[field] < 0) { totalBottom += x(d[field]); } - }) + }); if(totalTop > max) max = totalTop; if(totalBottom < min) min = totalBottom; - }) + }); return [min, max]; }else { @@ -50,7 +50,7 @@ export function xDomain(props, stack, horizonal) { var extent = D3Array.extent(data, (dt) => { return x(dt[field]); }); return extent; - }) + }); return D3Array.extent([].concat.apply([], domainArr)); } diff --git a/src/utils/yDomain.jsx b/src/utils/yDomain.jsx index c77a18f..4404a0b 100644 --- a/src/utils/yDomain.jsx +++ b/src/utils/yDomain.jsx @@ -1,4 +1,4 @@ -import D3Array from 'd3-array' +import D3Array from 'd3-array'; export function yDomain(props, stack, horizonal) { const { @@ -30,11 +30,11 @@ export function yDomain(props, stack, horizonal) { }else if (d[field] < 0) { totalBottom += y(d[field]); } - }) + }); if(totalTop > max) max = totalTop; if(totalBottom < min) min = totalBottom; - }) + }); return [min, max]; }else { @@ -44,14 +44,14 @@ export function yDomain(props, stack, horizonal) { var extent = D3Array.extent(data, (dt) => { return y(dt[field]); }); return extent; - }) + }); - var extentArr = D3Array.extent([].concat.apply([], domainArr)) + var extentArr = D3Array.extent([].concat.apply([], domainArr)); if(extentArr[0] * extentArr[1] >= 0) { - return [0, extentArr[1]] + return [0, extentArr[1]]; }else { - return extentArr + return extentArr; } } }else {