v2.0.0

.eslintrc

@@ -1,52 +1,15 @@
 {
   "parser": "babel-eslint",
-
-  "plugins": [
-    "react"
-  ],
-
   "env": {
+    "amd": true,
     "es6": true,
-    "browser": true,
-    "node": true,
-    "mocha": true
+    "jest/globals": true
   },
-
-  "ecmaFeatures": {
-    "jsx": true,
-    "modules": true
-  },
-
-  "rules": {
-    "array-bracket-spacing": [2, "never"],
-    "block-scoped-var": 0,
-    "brace-style": [2, "1tbs", {"allowSingleLine": true}],
-    "camelcase": 0,
-    "comma-dangle": [1, "always-multiline"],
-    "comma-style": [1, "last"],
-    "consistent-this": [2, "self"],
-    "curly": 0,
-    "indent": [1, 2],
-    "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,
-    "quotes": [1, "double", "avoid-escape"],
-    "react/jsx-boolean-value": [1, "never"],
-    "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/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"]
-  }
+  "plugins": ["jest", "prettier", "react"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:jest/recommended",
+    "plugin:react/recommended",
+    "prettier"
+  ]
 }

.gitignore

@@ -1,3 +1,7 @@
-lib
-node_modules
-npm-debug.log
+/coverage
+/demo/dist
+/es
+/lib
+/node_modules
+/umd
+npm-debug.log*

.lintstagedrc

@@ -0,0 +1,6 @@
+{
+  "*.js": [
+    "prettier --no-bracket-spacing --no-semi --trailing-comma=es5 --write",
+    "git add"
+  ]
+}

.travis.yml

@@ -0,0 +1,14 @@
+sudo: false
+
+language: node_js
+node_js: 8
+
+before_install:
+  - npm install codecov
+
+after_success:
+  - cat ./coverage/lcov.info | ./node_modules/.bin/codecov
+
+branches:
+  only:
+    - master

CHANGELOG.md

@@ -1,3 +1,8 @@
+# 2.0.0
+
+* Updated: Complete rewrite
+* Added: Tests
+
 # 1.4.0
 
 * Updated: dependencies

CONTRIBUTING.md

@@ -0,0 +1,35 @@
+# Contributing 
+
+## Prerequisites
+
+[Node.js](http://nodejs.org/) >= v4 must be installed.
+
+## Installation
+
+- Running `yarn` or `npm install` in the components's root directory will install everything you need for development.
+
+## Demo Development Server
+
+- `npm start` will run a development server with the component's demo app at [http://localhost:1190](http://localhost:1190) with hot module reloading.
+
+## Linting
+
+- `npm run lint` will lint the `src` and `demo/src` folders
+
+## Running Tests
+
+- `npm test` will run the tests once and produce a coverage report in `coverage/`.
+
+- `npm run test:watch` will run the tests on every change.
+
+## Building
+
+- `npm run build` will build the component for publishing to npm and also bundle the demo app.
+
+- `npm run clean` will delete built resources.
+
+> **Builds:**
+> * CommonJS build => `/lib`,
+> * ES6 modules build => `/es`
+> * UMD build => `/umd`
+> * Demo build => `/demo/dist`

README.md

@@ -1,95 +1,100 @@
-# react-svg-piechart ![npm](https://img.shields.io/npm/v/react-svg-piechart.svg) ![license](https://img.shields.io/npm/l/react-svg-piechart.svg) ![github-issues](https://img.shields.io/github/issues/xuopled/react-svg-piechart.svg)
+# react-svg-piechart
 
-A lightweight responsive pie chart component for React using only SVG
+[![npm package][npm-badge]][npm] [![Travis][build-badge]][build]
+[![Codecov][codecov-badge]][codecov] ![Module formats][module-formats]
 
-## Install
+A lightweight responsive React pie chart component using only SVG
 
-```sh
-npm install --save react-svg-piechart
-```
+## Getting started
 
 [![react-svg-piechart](https://nodei.co/npm/react-svg-piechart.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/react-svg-piechart/)
 
-## Changelog
+You can download `react-svg-piechart` from the NPM registry via the `npm` or
+`yarn` commands
 
-See [changelog](./CHANGELOG.md)
+```shell
+yarn add react-svg-piechart
+npm install react-svg-piechart --save
+```
 
-## Usage
+If you don't use package manager and you want to include `react-svg-piechart`
+directly in your html, you could get it from the UNPKG CDN
 
-### Exemple
+```html
+https://unpkg.com/react-svg-piechart/umd/react-svg-piechart.js
+```
+
+## Demo
 
-![PieChart exemple](/screenshots/socialchart.png)
+See [Demo page][github-page]
+
+## Usage
 
 ```js
-import React, {Component} from "react"
+import React from "react"
 import PieChart from "react-svg-piechart"
 
-export default class MyComponent extends Component {
-    constructor() {
-        super()
+const data = [
+  {title: "Data 1", value: 100, color: "#22594e"},
+  {title: "Data 2", value: 60, color: "#2f7d6d"},
+  {title: "Data 3", value: 30, color: "#3da18d"},
+  {title: "Data 4", value: 20, color: "#69c2b0"},
+  {title: "Data 5", value: 10, color: "#a1d9ce"},
+]
+
+const MyCompo = () => (
+  <ReactSvgPieChart
+    data={data}
+    // If you need expand on hover (or touch) effect
+    expandOnHover
+    // If you need custom behavior when sector is hovered (or touched)
+    onSectorHover={(d, i, e) => {
+      if (d) {
+        console.log("Mouse enter - Index:", i, "Data:", d, "Event:", e)
+      } else {
+        console.log("Mouse leave - Index:", i, "Event:", e)
+      }
+    }
+  />
+)
+```
+
+### Props
 
-        this.state = {
-            expandedSector: null,
-        }
+| Name           | PropType              | Description                                                                                                  | Default |
+| -------------- | --------------------- | ------------------------------------------------------------------------------------------------------------ | ------- |
+| data           | Array of data Objects | One data is {value: number (required), color: string, title: string, expanded: bool}                         | []      |
+| expandOnHover  | Boolean               | Active hover and touch (mobile) effetcs                                                                      | false   |
+| onSectorHover  | Function              | Callback when one sector is hovered or touched (mobile) - ex: `(data, index, event) => {}`                   | null    |
+| expandSize     | Number                | expand size, in pixels. Used if `expandOnHover` is active or one data has `expanded` attribute set to `true` |
+| strokeColor    | String                | Sector stroke color                                                                                          | "#fff"  |
+| strokeLinejoin | String                | Sector stroke line join (One of `miter`, `round`, `bevel`)                                                   | "round" |
+| strokeWidth    | Number                | Sector width, in pixels (0 to disable stroke)                                                                | 1       |
+| viewBoxSize    | Number                | SVG viewbox width and height                                                                                 | 100     |
 
-        this.handleMouseEnterOnSector = this.handleMouseEnterOnSector.bind(this)
-    }
+## Contributing
 
-    handleMouseEnterOnSector(sector) {
-        this.setState({expandedSector: sector})
-    }
+* ⇄ Pull/Merge requests and ★ Stars are always welcome.
+* For bugs and feature requests, please [create an issue][github-issue].
+* Pull requests must be accompanied by passing automated tests (`npm test`).
 
-    render() {
-        const data = [
-            {label: "Facebook", value: 100, color: "#3b5998"},
-            {label: "Twitter", value: 60, color: "#00aced"},
-            {label: "Google Plus", value: 30, color: "#dd4b39"},
-            {label: "Pinterest", value: 20, color: "#cb2027"},
-            {label: "Linked In", value: 10, color: "#007bb6"},
-        ]
-
-        const {expandedSector} = this.state
-
-        return (
-            <div>
-                <PieChart
-                    data={ data }
-                    expandedSector={expandedSector}
-                    onSectorHover={this.handleMouseEnterOnSector}
-                    sectorStrokeWidth={2}
-                    expandOnHover
-                    shrinkOnTouchEnd
-                />
-                <div>
-                {
-                    data.map((element, i) => (
-                        <div key={i}>
-                            <span style={{background: element.color}}></span>
-                            <span style={{fontWeight: this.state.expandedSector === i ? "bold" : null}}>
-                                {element.label} : {element.value}
-                            </span>
-                        </div>
-                    ))
-                }
-                </div>
-            </div>
-        )
-    }
-}
-```
+See [CONTRIBUTING.md](./CONTRIBUTING.md) guidelines
 
-### Props
+## Changelog
 
-    * `data`: Array - by default is empty. Contains objects with keys `value`and `color` (optionnal)
-    * `palette`: Array - by default palette contains 7 hexadecimal colors
-    * `sectorStrokeWidth`: Number - by default is 3
-    * `expandOnHover`: Boolean - by default is true
-    * `shrinkOnTouchEnd`: Boolean - by default is false
-    * `expandedSector`: Number - by default is null
-    * `onSectorHover`: Function - by default is null
-    * `expandPx`: Number - by default is 10,
-    * `viewBoxWidth`: Number - by default is 300. Chart is responsive
+See [changelog](./CHANGELOG.md)
 
 ## License
 
-See [MIT](./LICENCE)
+This project is licensed under the MIT License - see the
+[LICENCE.md](./LICENCE.md) file for details
+
+[npm-badge]: https://img.shields.io/npm/v/react-svg-piechart.svg?style=flat-square
+[npm]: https://www.npmjs.org/package/react-svg-piechart
+[build-badge]: https://img.shields.io/travis/xuopled/react-svg-piechart/master.svg?style=flat-square
+[build]: https://travis-ci.org/xuopled/react-svg-piechart
+[codecov-badge]: https://img.shields.io/codecov/c/github/xuopled/react-svg-piechart.svg?style=flat-square
+[codecov]: https://codecov.io/gh/xuopled/react-svg-piechart
+[module-formats]: https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg?style=flat-square
+[github-page]: https://xuopled.github.io/react-svg-piechart
+[github-issue]: https://github.com/xuopled/react-svg-piechart/issues/new

demo/src/examples/Interactive/index.md

@@ -0,0 +1,5 @@
+## Description
+
+> Open your console to see data you can use when you hover a sector
+
+## Demo

demo/src/examples/Lonely/index.js

@@ -0,0 +1,27 @@
+import React from "react"
+import {Html} from "react-demo-page"
+import ReactSvgPieChart from "../../../../src"
+
+import html from "./index.md"
+
+const data = [{title: "Data 1", value: 100, color: "#22594e"}]
+
+export default class Lonely extends React.Component {
+  render() {
+    return (
+      <div>
+        <Html html={html} color="#44B39D" />
+        <ReactSvgPieChart
+          data={data}
+          sectorOffset={5}
+          expandOnHover={true}
+          onSectorHover={(d, index, e) =>
+            d &&
+            // eslint-disable-next-line
+            console.log("Index:", index, "Data:", d, "Event:", e)
+          }
+        />
+      </div>
+    )
+  }
+}

demo/src/index.js

@@ -0,0 +1,32 @@
+import React from "react"
+import {render} from "react-dom"
+
+import ReactDemoPage from "react-demo-page"
+import routes from "./routes"
+import pkg from "../../package.json"
+
+const header = {
+  title: pkg.name,
+  buttons: [
+    {label: "Github", url: pkg.homepage},
+    {label: "Npm", url: `https://www.npmjs.com/package/${pkg.name}`},
+    {label: "Download", url: `${pkg.homepage}/archive/master.zip`},
+  ],
+}
+
+const footer = {
+  author: pkg.author,
+}
+
+const Demo = () => (
+  <ReactDemoPage
+    basename={pkg.name}
+    header={header}
+    footer={footer}
+    pages={routes}
+    color="#44B39D"
+  />
+)
+
+// eslint-disable-next-line
+render(<Demo />, document.querySelector("#demo"))