Update dev dependencies

.babelrc

@@ -1,7 +1,11 @@
 {
-  "stage": 0,
-  "blacklist": [
-    "es6.tailCall",
-    "spec.functionName"
-  ]
+  "presets": [
+    ["latest", {
+      "es2015": {
+        "loose": true,
+        "modules": false
+      }
+    }],
+    "react"
+  ],
 }

.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"]
   }
 }

CHANGELOG.md

@@ -1,10 +1,16 @@
 # 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
 
 ## 1.0.0
 
 * Initial release
-

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 <cedric.delpoux@gmail.com>",
+  "author": "Cédric Delpoux <xuopled@gmail.com>",
   "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"
   }

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 (
+      <ellipse
+        fill={data[0].color || palette[0]}
+        onMouseEnter={() => 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 (
           <path
-            key={ 'sector' + i }
-            d={ dPath }
-            fill={ d.color || palette[i % palette.length] }
+            key={"sector" + i}
+            d={dPath}
+            fill={d.color || palette[i % palette.length]}
             stroke="#fff"
-            strokeWidth={ sectorStrokeWidth }
-            onMouseEnter={ () => 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 (
-      <svg viewBox={ `0 0 ${viewBoxWidth + expandPx * 2} ${viewBoxWidth + expandPx * 2}` } { ...props }>
+      <svg className={className} viewBox={`0 0 ${viewBoxWidth + expandPx * 2} ${viewBoxWidth + expandPx * 2}` }>
         <g transform={`translate(${expandPx}, ${expandPx})`}>
-          { this.getSectors() }
+          {data.length === 1
+            ? this.getSector()
+            : this.getSectors()
+          }
         </g>
       </svg>
   )}
 }
+
+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

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,
+      },
+    }),
+  ]
+}