From 18ec7f1c5886232c8d594eeff503cb5015af3c93 Mon Sep 17 00:00:00 2001 From: xuopled Date: Tue, 25 Oct 2016 13:11:43 +0200 Subject: [PATCH] Update dev dependencies --- .babelrc | 14 +++-- .eslintrc | 19 ++++--- CHANGELOG.md | 8 ++- package.json | 24 +++++---- src/index.js | 131 +++++++++++++++++++++++++--------------------- webpack.config.js | 60 +++++++++++++++++++++ 6 files changed, 171 insertions(+), 85 deletions(-) create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc index 7fcbef3..1067c9a 100644 --- a/.babelrc +++ b/.babelrc @@ -1,7 +1,11 @@ { - "stage": 0, - "blacklist": [ - "es6.tailCall", - "spec.functionName" - ] + "presets": [ + ["latest", { + "es2015": { + "loose": true, + "modules": false + } + }], + "react" + ], } diff --git a/.eslintrc b/.eslintrc index 1723202..8d71bc4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -18,6 +18,7 @@ }, "rules": { + "array-bracket-spacing": [2, "never"], "block-scoped-var": 0, "brace-style": [2, "1tbs", {"allowSingleLine": true}], "camelcase": 0, @@ -26,28 +27,26 @@ "consistent-this": [2, "self"], "curly": 0, "indent": [1, 2], - "quotes": [1, "single", "avoid-escape"], "no-multiple-empty-lines": [1, {"max": 1}], "no-self-compare": 2, "no-underscore-dangle": 0, "no-unused-vars": [2, {"vars": "all", "args": "none"}], "no-use-before-define": 0, "no-var": 2, - "semi": [2, "never"], - "space-after-keywords": [1, "always"], - "space-before-blocks": [1, "always"], - "space-before-function-parentheses": [1, "never"], - "space-in-parens": [1, "never"], - "spaced-line-comment": [1, "always"], - "strict": [2, "never"], + "quotes": [1, "double", "avoid-escape"], "react/jsx-boolean-value": [1, "never"], - "react/jsx-quotes": [1, "double", "avoid-escape"], "react/jsx-uses-react": 2, "react/jsx-uses-vars": 2, "react/no-did-mount-set-state": 2, "react/no-did-update-set-state": 2, "react/react-in-jsx-scope": 2, "react/self-closing-comp": 1, - "react/wrap-multilines": 1 + "react/jsx-wrap-multilines": 1, + "space-before-blocks": [1, "always"], + "space-before-function-paren": [1, "never"], + "space-in-parens": [1, "never"], + "spaced-comment": [1, "always"], + "strict": [2, "never"], + "semi": [2, "never"] } } diff --git a/CHANGELOG.md b/CHANGELOG.md index 0d2ef1b..2d30f5a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## 1.2.0 + +* Added : Webpack build -> `webpack.config.js` +* Updated : Babel config -> `.babelrc` +* Updated : Eslint config -> `.eslintrc` +* Updated : Dev dependencies -> `package.json` + ## 1.1.0 * Added : React in peer dependency @@ -7,4 +14,3 @@ ## 1.0.0 * Initial release - diff --git a/package.json b/package.json index 0ed3891..67b474d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-svg-piechart", - "version": "1.1.0", + "version": "1.2.0", "description": "A lightweight responsive pie chart component for React using only SVG", "repository": { "type": "git", @@ -14,7 +14,7 @@ "responsive", "svg" ], - "author": "Cédric Delpoux ", + "author": "Cédric Delpoux ", "license": "MIT", "bugs": { "url": "https://github.com/xuopled/react-svg-piechart/issues" @@ -25,18 +25,24 @@ "lib" ], "peerDependencies": { - "react": "^15.3.0" + "react": "~15.3.0" }, "devDependencies": { - "babel": "^5.4.5", - "babel-eslint": "^3.1.5", - "eslint": "^0.21.1", - "eslint-plugin-react": "^2.1.0" + "babel-core": "~6.14.0", + "babel-eslint": "~6.1.0", + "babel-loader": "~6.2.4", + "babel-preset-latest": "~6.14.0", + "babel-preset-react": "^6.16.0", + "eslint": "~3.5.0", + "eslint-loader": "~1.5.0", + "eslint-plugin-react": "~6.2.0", + "node-libs-browser": "~0.5.2", + "webpack": "~1.13.1" }, "scripts": { "clean": "rm -rf lib", - "build": "babel src --out-dir lib --copy-files", - "watch": "npm run build -- --watch", + "build": "webpack --progress --colors", + "watch": "webpack --progress --colors --watch", "lint": "eslint src/", "prepublish": "npm run clean && npm run build" } diff --git a/src/index.js b/src/index.js index 15661fe..54ca3c4 100644 --- a/src/index.js +++ b/src/index.js @@ -1,57 +1,29 @@ -import React, { PropTypes } from 'react' +import React, {Component, PropTypes} from "react" -export default class PieChart extends React.Component { - static propTypes = { - data: PropTypes.arrayOf(PropTypes.shape({ - value: PropTypes.number, - color: PropTypes.string, - })), - palette: PropTypes.arrayOf(PropTypes.string), - sectorStrokeWidth: PropTypes.number, - expandOnHover: PropTypes.bool, - expandedSector: PropTypes.number, - onSectorHover: PropTypes.func, - expandPx: PropTypes.number, - viewBoxWidth: PropTypes.number, - } - - static defaultProps = { - data: [], - palette: [ - '#2ecc71', - '#3498db', - '#9b59b6', - '#f1c40f', - '#e67e22', - '#e74c3c', - '#1abc9c', - ], - sectorStrokeWidth: 3, - expandOnHover: true, - expandedSector: null, - expandPx: 10, - viewBoxWidth: 300, - } - - handleMouseEnterOnSector(i) { - const { onMouseEnterOnSector } = this.props - - if (onMouseEnterOnSector) { - onMouseEnterOnSector(i) +class PieChart extends Component { + handleSectorHover(i) { + if (this.props.onSectorHover) { + this.props.onSectorHover(i) } } - handleMouseLeaveFromSector() { - const { onMouseLeaveFromSector } = this.props - - if (onMouseLeaveFromSector) { - onMouseLeaveFromSector(null) - } + getSector() { + const {data, expandOnHover, expandPx, expandedSector, palette, viewBoxWidth} = this.props + const center = viewBoxWidth / 2 + const expandVal = expandOnHover && expandedSector === 0 ? expandPx : 0 + return ( + this.handleSectorHover(0)} + onMouseLeave={() => this.handleSectorHover(null)} + cx={center} cy={center} rx={center + expandVal} ry={center + expandVal} + /> + ) } getSectors() { - const { data, palette, sectorStrokeWidth, expandOnHover, expandedSector, expandPx, viewBoxWidth } = this.props - const total = Math.ceil(data.reduce((n, d) => d.value + n, 0)) + const {data, palette, sectorStrokeWidth, expandOnHover, expandedSector, expandPx, viewBoxWidth} = this.props + const total = Math.ceil(data.reduce((prev, current) => current.value + prev, 0)) const center = viewBoxWidth / 2 let startAngle = 0 let endAngle = 0 @@ -72,32 +44,71 @@ export default class PieChart extends React.Component { const y2 = Math.round(center + (center + expandVal) * Math.sin(Math.PI * endAngle / 180)) const dPath = - 'M' + center + ',' + center + ' ' + - 'L' + x1 + ',' + y1 + ' ' + - 'A' + (center + expandVal) + ',' + (center + expandVal) + ' 0 ' + largeArc + ',1 ' + x2 + ',' + y2 + ' ' + - 'z' + "M" + center + "," + center + " " + + "L" + x1 + "," + y1 + " " + + "A" + (center + expandVal) + "," + (center + expandVal) + " 0 " + largeArc + ",1 " + x2 + "," + y2 + " " + + "z" return ( this.handleMouseEnterOnSector(i) } - onMouseLeave={ () => this.handleMouseLeaveFromSector() } /> + strokeWidth={sectorStrokeWidth } + onMouseEnter={() => this.handleSectorHover(i)} + onMouseLeave={() => this.handleSectorHover(null)} + /> ) }) ) } render() { - const { expandPx, viewBoxWidth, props } = this.props + const {className, data, expandPx, viewBoxWidth } = this.props return ( - + - { this.getSectors() } + {data.length === 1 + ? this.getSector() + : this.getSectors() + } )} } + +PieChart.propTypes = { + className: PropTypes.string, + data: PropTypes.arrayOf(PropTypes.shape({ + value: PropTypes.number, + color: PropTypes.string, + })), + palette: PropTypes.arrayOf(PropTypes.string), + sectorStrokeWidth: PropTypes.number, + expandOnHover: PropTypes.bool, + expandedSector: PropTypes.number, + onSectorHover: PropTypes.func, + expandPx: PropTypes.number, + viewBoxWidth: PropTypes.number, +} + +PieChart.defaultProps = { + data: [], + palette: [ + "#2ecc71", + "#3498db", + "#9b59b6", + "#f1c40f", + "#e67e22", + "#e74c3c", + "#1abc9c", + ], + sectorStrokeWidth: 3, + expandOnHover: true, + expandedSector: null, + expandPx: 10, + viewBoxWidth: 300, +} + +export default PieChart diff --git a/webpack.config.js b/webpack.config.js new file mode 100644 index 0000000..07797a0 --- /dev/null +++ b/webpack.config.js @@ -0,0 +1,60 @@ +var webpack = require('webpack') +var path = require('path') + +var sources = [ + path.resolve(__dirname, 'src'), +] + +module.exports = { + entry: './src/index.js', + output: { + path: __dirname, + filename: './lib/index.js', + library: 'react-svg-piechart', + libraryTarget: 'umd', + }, + resolve: { + extensions: ['', '.js'] + }, + module: { + preLoaders: [ + { + test: /\.js?$/, + include: sources, + loader: 'eslint', + query: { + presets: ['latest'] + }, + }, + ], + loaders: [ + { + test: /\.js$/, + include: sources, + loader: 'babel', + query: { + presets: ['latest'] + }, + }, + ], + }, + externals: { + react: { + root: 'React', + commonjs: 'react', + commonjs2: 'react', + amd: 'react', + }, + }, + plugins: [ + new webpack.NoErrorsPlugin(), + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.optimize.DedupePlugin(), + new webpack.optimize.AggressiveMergingPlugin(), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false, + }, + }), + ] +}