[
  {
    "path": ".eslintrc",
    "content": "{\n \"parser\": \"babel-eslint\",\n  \"rules\": {\n    \"strict\": 0,\n    \"global-strict\": 0\n  },\n  \"plugins\": [\n    \"react\"\n  ],\n  \"globals\": {\n    \"document\": true,\n    \"event\": true\n  }\n}"
  },
  {
    "path": ".gitignore",
    "content": "# Logs\nlogs\n*.log\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directory\n# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git\nnode_modules\n\nlib\ndist"
  },
  {
    "path": ".jshintrc",
    "content": "{\n  \"node\": true,\n  \"browser\": true,\n  \"esnext\": true,\n  \"bitwise\": true,\n  \"camelcase\": false,\n  \"curly\": true,\n  \"eqeqeq\": true,\n  \"immed\": true,\n  \"indent\": 4,\n  \"latedef\": true,\n  \"newcap\": true,\n  \"noarg\": true,\n  \"quotmark\": \"false\",\n  \"regexp\": true,\n  \"undef\": true,\n  \"unused\": false,\n  \"strict\": true,\n  \"trailing\": true,\n  \"smarttabs\": true,\n  \"white\": true,\n  \"newcap\": false,\n  \"globals\": {\n    \"React\": true\n  }\n}\n\n"
  },
  {
    "path": ".npmignore",
    "content": "# Logs\nlogs\n*.log\n\n# Runtime data\npids\n*.pid\n*.seed\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n\n# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)\n.grunt\n\n# node-waf configuration\n.lock-wscript\n\n# Compiled binary addons (http://nodejs.org/api/addons.html)\nbuild/Release\n\n# Dependency directory\n# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git\nnode_modules\n\n"
  },
  {
    "path": "Gruntfile.js",
    "content": "\"use strict\";\n\nmodule.exports = function (grunt) {\n    require(\"load-grunt-tasks\")(grunt);\n\n    var pkgConfig = grunt.file.readJSON(\"package.json\");\n\n    grunt.initConfig({\n        pkg: pkgConfig,\n\n        webpack: {\n            options: {\n                entry: \"./src/components/Chart.js\",\n                output: {\n                    path: \"./dist/\",\n                    filename: \"dist.js\",\n                },\n                stats: {\n                    colors: true,\n                    modules: true,\n                    reasons: true,\n                },\n                module: {\n                    loaders: [\n                        {\n                            test: /\\.js$/,\n                            exclude: /node_modules/,\n                            loader: \"babel-loader\"\n                        }\n                    ]\n                },\n            },\n            dist: {\n                cache: false\n            }\n        },\n\n        watch: {\n            scripts: {\n                files: [\"./src/components/*.js\"],\n                tasks: [\"build\"],\n                options: {\n                    atBegin: true\n                }\n            }\n        },\n\n        eslint: {\n            target: [\"./src/components/*.js\"],\n        }\n\n    });\n\n    grunt.loadNpmTasks(\"grunt-contrib-watch\");\n\n    grunt.registerTask(\"lint\", [\"eslint\"]);\n\n    grunt.registerTask(\"build\", [\"webpack\", \"eslint\"]);\n\n};\n"
  },
  {
    "path": "LICENSE",
    "content": "The MIT License (MIT)\n\nCopyright (c) 2015 Andreas Savvides\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
  },
  {
    "path": "README.md",
    "content": "# d3act - d3 with React\n\n## Background\n\n[`d3`](http://d3js.org/) has been the de facto standard when it comes to data visualisations for a while now and [`React`](http://facebook.github.io/react/) has recently emerged as the go-to library for building user interfaces. `d3` and `React` are both data-centric libraries, making them a natural fit; `d3` takes a data-driven approach and `React` aims to solve the problem of data changing over time in the context of building large applications.\n\nIn recent months, there have been various approaches documented & implemented in order to showcase how to effectively use `d3` and `React` together, especially with a focus on letting `React` do the SVG rendering:\n- [\"D3 and React - the future of charting components?\" by 10consulting](http://10consulting.com/2014/02/19/d3-plus-reactjs-for-charting/)\n- [\"ReactJS and D3 Part I: Layouts\" by Colin Megill](http://formidablelabs.com/blog/2015/05/21/react-d3-layouts/)\n- [\"react-d3 by Eric S. Bullington\"](https://github.com/esbullington/react-d3)\n- [\"react-d3-components by Neri Marschik\"](https://github.com/codesuki/react-d3-components)\n\n[Nicolas Hery's \"Integrating D3.js visualizations in a React app\"](http://nicolashery.com/integrating-d3js-visualizations-in-a-react-app/) talks about letting `d3` do all the work after React has finished rendering components in the DOM. `d3act` is inspired by [@nicolas_hery](https://twitter.com/nicolas_hery)'s approach; create a lightweight `React` component wrapper that maps `React`'s lifecycle methods `componentDidMount`, `componentDidUpdate` and `componentWillUnmount` into a `d3` chart's `create`, `update` and `unmount` methods respectively.\n\n`d3act` and the idea behind it was first presented at [ReactEurope 2015](https://www.react-europe.org/2015.html) as a five minute lightning talk; you can watch it [here](https://www.youtube.com/watch?v=6Pbf0n85HH8).\n\n## How does this improve DX?\n\nDuring the [keynote](https://www.youtube.com/watch?v=PAA9O4E1IM4) at ReactEurope 2015, [vjeux](https://twitter.com/vjeux) introduced the idea of DX (Developer Experience) - akin to UX (User Experience), but with a focus on enabling developers to build great UX with the best possible tools & technologies. Things like [Babel](babeljs.io), [Redux](https://github.com/gaearon/redux) and [Radium](https://github.com/FormidableLabs/radium) definitely tick the DX box.\n\nSo how does `d3act` improve DX? The need for creating `d3act` first emerged while building multiple `d3`-based visualisations to handle very large data sets in a single page in the context of a `React` app. Letting `React` manipulate and render `SVG` elements proved to slow things down - not by much, but at the scale of data that was being handled, this became a bottleneck.\n\nAt the same time, all existing visualisations were already written in the standard `d3` way which performed best - so in order to improve the DX let's wrap these existing `d3` visualisations in a lightweight `React` component that can extend to any such visualisations.\n\nAs a result, `d3act` aims to enable a better DX by enabling:\n- Use of existing `d3` visualisations\n- Keep creating `d3` visualisations using the same syntax\n- Don't worry about taking apart `d3`'s approach and reimplement the same things in `React`\n- Integrate seamlessly with `React` applications\n- Utilise what each library is best at\n\n## Getting Started\n\n```bash\nnpm install d3act\n```\n\n### Examples\n\n#### It's as simple as...\n\n```js\n<Chart\n    type={\"pie\"}\n    width={300}\n    height={300}\n    showTooltips={true}\n    data={\n        {\n            \"React\": 2,\n            \"Relay\": 12,\n            \"GraphQL\": 5,\n        }\n    }\n/>\n```\n\n#### ...and you can use already existing charts\n\nEnsure your existing charts have `constructor`, `create`, `update` and `unmount` functions.\n\n```js\nclass PreExistingChart {\n    constructor(el, props) {\n        this.el = el;\n        this.props = props;\n    }\n\n    create(data) {\n        // Create your chart\n    }\n\n    update(data) {\n        // Update your chart\n    }\n\n    unmount() {\n        this.el.remove();\n    }\n}\n\n<Chart\n    type={\"custom\"}\n    customChart={PreExistingChart}\n    data={\n        {\n            \"React\": 2,\n            \"Relay\": 12,\n            \"GraphQL\": 5,\n        }\n    }\n/>\n```\n\nTo see examples in action locally:\n\n```bash\nnpm install\nnpm run examples\n```\n\nHead to http://localhost:8080/ and see charts in action as below:\n\n![Bubble chart](bubble.png)\n![Bar chart](bar.png)\n![Pie chart](pie.png)\n\n### How do I update charts?\n\nJust update your `data` state and all else is handled for you.\n\n## What's next?\n\n- Improve API so that you can customise charts beyond just dimensions and margins\n- Better error handling\n- Manage state better\n- Improve tooltips & make them more extensible\n- Think about making expected data for each visualisation a little more uniform\n- Add tests\n\n## Is this the best way to combine `d3` and `React`?\n\nThis is one way of combining `d3` with `React`; there are plenty of other ways as already outlined - pick what works best for you. I don't think there is such a thing as a global 'best way' of combining `d3` with `React`, it very much comes down to what you want to do with it.\n\n## Contributing\n\nAll contributions are welcome; fork the repository, make your changes and open a pull request. Try to stick to the coding conventions that are already in place.\n\nTo build things locally, you can just `grunt watch` from the project's root directory. This will also lint code using [ESLint](http://eslint.org/); if you would like to just lint the code, you could also just use `grunt lint`.\n\n## License\n\n[MIT](LICENSE)\n"
  },
  {
    "path": "examples/app.jsx",
    "content": "import * as d3 from \"d3\";\nimport React from \"react\";\nimport { render } from \"react-dom\";\n\nimport Chart from \"../lib/components/Chart\";\n\nclass ExampleBarChart extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: [\n                { xValue: \"React\", yValue: 2 },\n                { xValue: \"Relay\", yValue: 12 },\n                { xValue: \"GraphQL\", yValue: 5 },\n                { xValue: \"Radium\", yValue: 7 },\n                { xValue: \"Babel\", yValue: 5 },\n            ]\n        };\n    }\n\n    componentDidMount() {\n        setTimeout(() => {\n            this.setState({\n                data: [\n                    { xValue: \"React\", yValue: 2 },\n                    { xValue: \"Relay\", yValue: 8 },\n                    { xValue: \"GraphQL\", yValue: 15 },\n                    { xValue: \"Radium\", yValue: 27 },\n                    { xValue: \"Babel\", yValue: 5 },\n                ]\n            })\n        }, 3000);\n    }\n\n    render() {\n        return (\n            <div>\n                <h2>Bar Chart</h2>\n                <Chart\n                    type={\"bar\"}\n                    width={500}\n                    height={500}\n                    margin={{ top: 40, right: 40, bottom: 40, left: 40 }}\n                    showTooltips={true}\n                    data={this.state.data}\n                />\n            </div>\n        );\n    }\n}\n\nclass ExamplePieChart extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: {\n                \"React\": 2,\n                \"Relay\": 12,\n                \"GraphQL\": 5,\n                \"Radium\": 7,\n                \"Babel\": 5,\n            }\n        };\n    }\n\n    render() {\n        return (\n            <div>\n                <h2>Pie Chart</h2>\n                <Chart\n                    type={\"pie\"}\n                    width={300}\n                    height={300}\n                    showTooltips={true}\n                    data={this.state.data}\n                />\n            </div>\n        );\n    }\n\n}\n\nclass ExampleDonutChart extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: {\n                \"React\": 2,\n                \"Relay\": 12,\n                \"GraphQL\": 5,\n                \"Radium\": 7,\n                \"Babel\": 5,\n            }\n        };\n    }\n\n    render() {\n        return (\n            <div>\n                <h2>Donut Chart</h2>\n                <Chart\n                    type={\"pie\"}\n                    width={300}\n                    height={300}\n                    innerRadius={100}\n                    showTooltips={true}\n                    showLegend={true}\n                    data={this.state.data}\n                />\n            </div>\n        );\n    }\n\n}\n\nclass ExampleBubbleChart extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: {\n                children: [\n                    { name: \"Alaa\", value: 1 },\n                    { name: \"Zaid\", value: 1 },\n                    { name: \"Kareem\", value: 2 },\n                    { name: \"Mahmoud\", value: 1 },\n                    { name: \"Tariq\", value: 1 },\n                    { name: \"Shareef\", value: 1 },\n                    { name: \"Tom\", value: 41 },\n                    { name: \"Forest\", value: 2 },\n                    { name: \"John\", value: 84 },\n                    { name: \"Alex\", value: 11 },\n                    { name: \"Donald\", value: 7 },\n                    { name: \"Mark\", value: 29 },\n                    { name: \"Charles\", value: 20 },\n                    { name: \"Quincy\", value: 5 },\n                    { name: \"Alvan\", value: 1 },\n                    { name: \"Don\", value: 32 },\n                    { name: \"Hassan\", value: 2 },\n                    { name: \"Jordan\", value: 8 },\n                    { name: \"Michael\", value: 32 },\n                    { name: \"Steven\", value: 5 },\n                    { name: \"Rafael\", value: 2 },\n                    { name: \"Rick\", value: 12 },\n                ]\n            }\n        }\n    }\n\n    render () {\n        return (\n            <div>\n                <h2>Bubble Chart</h2>\n                <Chart\n                    type={\"bubble\"}\n                    diameter={500}\n                    showTooltips={true}\n                    data={this.state.data}\n                />\n            </div>\n        );\n    }\n}\n\nclass SomeCustomChart {\n    constructor(el, props) {\n        this.el = el;\n        this.props = props;\n    }\n\n    getColor() {\n        return d3.scaleOrdinal(d3.schemeCategory20c);\n    }\n\n    create(data) {\n        const width = 400;\n        const height = 400;\n\n        const color = this.getColor();\n\n        const radius = Math.min(width, height) / 2;\n        const halfWidth = width / 2;\n        const halfHeight = height / 2;\n\n        const arc = d3.arc()\n            .outerRadius(radius - 10)\n            .innerRadius(0);\n\n        const pie = d3.pie()\n            .sort(null)\n            .value(d => { return d.value; });\n\n        const svg = d3.select(this.el).append(\"svg\")\n            .attr(\"width\", width)\n            .attr(\"height\", height)\n            .append(\"g\")\n                .attr(\"transform\", `translate(${halfWidth}, ${halfHeight})`);\n\n        const path = svg.selectAll(\"path\")\n            .data(pie(d3.entries(data)))\n            .enter().append(\"path\");\n\n        path\n            .attr(\"fill\", (_d, i) => { return color(i); })\n            .attr(\"d\", arc);\n    }\n\n    update() {\n        // We don't want to do anything with\n        // updates in this instance.\n    }\n\n    unmount() {\n        this.el.remove();\n    }\n}\n\nclass ExampleCustomChart extends React.Component {\n\n    constructor(props) {\n        super(props);\n\n        this.state = {\n            data: {\n                \"React\": 2,\n                \"Relay\": 12,\n                \"GraphQL\": 5,\n                \"Radium\": 7,\n                \"Babel\": 5,\n            }\n        };\n    }\n\n    render() {\n        return (\n            <div>\n                <h2>Custom Chart</h2>\n                <Chart\n                    type={\"custom\"}\n                    customChart={SomeCustomChart}\n                    data={this.state.data}\n                />\n            </div>\n        );\n    }\n\n}\n\nclass App extends React.Component {\n    render() {\n        return (\n            <div>\n                <ExampleBarChart />\n                <ExamplePieChart />\n                <ExampleDonutChart />\n                <ExampleBubbleChart />\n                <ExampleCustomChart />\n            </div>\n        );\n    }\n}\n\nrender(<App />, document.getElementById(\"app\"));\n"
  },
  {
    "path": "examples/index.html",
    "content": "<!doctype html>\n<html>\n<head>\n    <title>d3act Examples</title>\n</head>\n<body>\n    <h1>d3act Examples</h1>\n    <div id=\"app\"></div>\n    <script src=\"app.js\"></script>\n</body>\n</html>\n"
  },
  {
    "path": "examples/webpack.config.js",
    "content": "var path = require(\"path\");\nvar webpack = require(\"webpack\");\n\nmodule.exports = {\n    cache: true,\n    entry: {\n        app: \"./examples/app.jsx\"\n    },\n    output: {\n        path: path.join(__dirname),\n        publicPath: \"/\",\n        filename: \"[name].js\",\n        chunkFilename: \"[chunkhash].js\"\n    },\n    module: {\n        loaders: [\n            {\n                test: /\\.jsx$/,\n                loader: \"babel-loader?stage=0\"\n            }\n        ]\n    }\n};\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"d3act\",\n  \"version\": \"3.1.0\",\n  \"description\": \"Visualising data using d3 with React.js\",\n  \"main\": \"./lib/components/Chart.js\",\n  \"scripts\": {\n    \"build\": \"babel src --out-dir lib\",\n    \"prepublish\": \"npm run build\",\n    \"examples\": \"npm run build && webpack-dev-server --config examples/webpack.config.js --no-info --content-base examples/\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"git+https://github.com/AnSavvides/d3act.git\"\n  },\n  \"keywords\": [\n    \"d3\",\n    \"React\",\n    \"visualisations\",\n    \"data\",\n    \"svg\"\n  ],\n  \"author\": \"Andreas Savvides\",\n  \"license\": \"MIT\",\n  \"bugs\": {\n    \"url\": \"https://github.com/AnSavvides/d3act/issues\"\n  },\n  \"homepage\": \"https://github.com/AnSavvides/d3act#readme\",\n  \"dependencies\": {\n    \"d3\": \"^4.2.2\",\n    \"react\": \"^15.3.1\",\n    \"react-dom\": \"^15.3.1\"\n  },\n  \"devDependencies\": {\n    \"babel\": \"^5.6.23\",\n    \"babel-core\": \"^5.6.15\",\n    \"babel-loader\": \"^5.2.2\",\n    \"babel-eslint\": \"^3.1.23\",\n    \"eslint\": \"^0.24.0\",\n    \"eslint-plugin-react\": \"^3.2.3\",\n    \"grunt-eslint\": \"^16.0.0\",\n    \"grunt\": \"^0.4.5\",\n    \"grunt-contrib-watch\": \"^0.6.1\",\n    \"grunt-webpack\": \"^1.0.10\",\n    \"load-grunt-tasks\": \"^3.2.0\",\n    \"node-libs-browser\": \"^0.5.2\",\n    \"webpack\": \"^1.10.0\",\n    \"webpack-dev-server\": \"^1.10.1\"\n  }\n}\n"
  },
  {
    "path": "src/components/BarChart.js",
    "content": "import * as d3 from \"d3\";\nimport BaseChart from \"./BaseChart\";\n\nexport default class BarChart extends BaseChart {\n    getScaleX() {\n        return d3.scaleBand().range([0, this.props.width], 0.1);\n    }\n\n    getScaleY() {\n        return d3.scaleLinear().range([this.props.height, 0]);\n    }\n\n    createAxisX(x) {\n        return d3.axisBottom(x);\n    }\n\n    createAxisY(y) {\n        return d3.axisLeft(y);\n    }\n\n    onMouseOver(d) {\n        return this.tooltip\n            .style(\"visibility\", \"visible\")\n            .text(`${d.xValue} (${d.yValue})`);\n    }\n\n    create(data) {\n        this.x = this.getScaleX();\n        this.y = this.getScaleY();\n\n        const xAxis = this.createAxisX(this.x);\n        const yAxis = this.createAxisY(this.y);\n\n        const width = this.props.width + this.props.margin.left + this.props.margin.right;\n        const height = this.props.height + this.props.margin.top + this.props.margin.bottom;\n\n        this.svg = d3.select(this.el).append(\"svg\")\n            .attr(\"width\", width)\n            .attr(\"height\", height)\n            .append(\"g\")\n                .attr(\"transform\", `translate(${this.props.margin.left}, ${this.props.margin.top})`);\n\n        this.x.domain(data.map(d => { return d.xValue; }));\n        this.y.domain([0, d3.max(data, d => { return d.yValue; })]);\n\n        this.svg.append(\"g\")\n            .attr(\"class\", \"x axis\")\n            .attr(\"transform\", `translate(0, ${this.props.height})`)\n            .call(xAxis);\n\n        this.svg.append(\"g\")\n            .attr(\"class\", \"y axis\")\n            .call(yAxis)\n        .append(\"text\")\n            .attr(\"transform\", \"rotate(-90)\")\n            .attr(\"y\", 6)\n            .attr(\"dy\", \".71em\")\n            .style(\"text-anchor\", \"end\");\n\n        this.svg.selectAll(\".bar\")\n            .data(data)\n        .enter().append(\"rect\")\n            .attr(\"class\", \"bar\")\n            .attr(\"x\", d => { return this.x(d.xValue); })\n            .attr(\"width\", this.x.bandwidth())\n            .attr(\"y\", d => { return this.y(d.yValue); })\n            .attr(\"height\", d => { return this.props.height - this.y(d.yValue); })\n            .on(\"mouseover\", this.onMouseOver.bind(this))\n            .on(\"mousemove\", this.onMouseMove.bind(this))\n            .on(\"mouseout\", this.onMouseOut.bind(this))\n            .style(\"fill\", \"steelblue\");\n\n        this.svg.selectAll(\"path\")\n            .style(\"fill\", \"none\")\n            .style(\"stroke\", \"#000\")\n            .style(\"shape-rendering\", \"crispEdges\");\n\n        if (this.showTooltips) {\n            this.addTooltips();\n        }\n    }\n\n    update(data) {\n        // Recalculate domain given new data\n        this.y.domain([0, d3.max(data, d => { return d.yValue; })]);\n        this.x.domain(data.map(d => { return d.xValue; }));\n\n        // We now have an updated Y axis\n        const updatedAxisY = this.createAxisY(this.y);\n        const updatedAxisX = this.createAxisX(this.x);\n\n        // Let's update the x & y axis\n        this.svg.selectAll(\"g.y.axis\").call(updatedAxisY);\n        this.svg.selectAll(\"g.x.axis\").call(updatedAxisX);\n\n        this.svg.selectAll(\".bar\")\n            .data(data)\n        .enter().append(\"rect\")\n            .on(\"mouseover\", this.onMouseOver.bind(this))\n            .on(\"mousemove\", this.onMouseMove.bind(this))\n            .on(\"mouseout\", this.onMouseOut.bind(this))\n            .style(\"fill\", \"steelblue\");\n\n        this.svg.selectAll(\"rect\")\n            .data(data)\n            .transition().duration(this.transitionDuration)\n                .attr(\"class\", \"bar\")\n                .attr(\"y\", d => { return this.y(d.yValue); })\n                .attr(\"height\", d => { return this.props.height - this.y(d.yValue); })\n                .attr(\"x\", d => { return this.x(d.xValue); })\n                .attr(\"width\", this.x.bandwidth());\n    }\n}\n"
  },
  {
    "path": "src/components/BaseChart.js",
    "content": "import * as d3 from \"d3\";\n\nconst chartConfig = {\n    showTooltips: true,\n    transitionDuration: 1000,\n    innerRadius: 0,\n    showLegend: false\n};\n\nexport default class BaseChart {\n    constructor(el, props) {\n        this.el = el;\n        this.props = props;\n        this.color = this.getColor();\n\n        Object.keys(chartConfig).forEach(configKey => {\n            // If a prop is defined, let's just use it, otherwise\n            // fall back to the default.\n            if (this.props[configKey] !== undefined) {\n                this[configKey] = this.props[configKey];\n            } else {\n                this[configKey] = chartConfig[configKey];\n            }\n        });\n    }\n\n    // Overwrite this function to apply your own color scheme\n    getColor() {\n        return d3.scaleOrdinal(d3.schemeCategory20c);\n    }\n\n    // We don't show tooltips by default\n    addTooltips() {\n        this.tooltip = d3.select(this.el)\n            .append(\"div\")\n            .classed(\"d3act-tooltip\", true)\n            .style(\"position\", \"absolute\")\n            .style(\"z-index\", \"10\")\n            .style(\"visibility\", \"hidden\")\n            .style(\"border\", \"1px solid grey\")\n            .style(\"border-radius\", \"3px\")\n            .style(\"text-align\", \"center\")\n            .style(\"padding\", \"8px 0\")\n            .style(\"width\", \"100px\")\n            .style(\"background-color\", \"#000\")\n            .style(\"color\", \"#FFF\");\n    }\n\n    onMouseMove() {\n        if (!this.showTooltips) {\n            return;\n        }\n\n        const top = (d3.event.pageY - 10);\n        const left = (d3.event.pageX + 10);\n\n        this.tooltip\n            .style(\"top\", `${top}px`)\n            .style(\"left\", `${left}px`);\n    }\n\n    onMouseOut() {\n        if (!this.showTooltips) {\n            return;\n        }\n\n        this.tooltip.style(\"visibility\", \"hidden\");\n    }\n\n    // Overwrite this function to apply your own removal logic\n    unmount() {\n        this.el.remove();\n    }\n\n    create() {\n        // To be implemented by class extending BaseChart.\n        // `data` is passed as an argument to this function.\n    }\n\n    update() {\n        // To be implemented by class extending BaseChart.\n        // `data` is passed as an argument to this function.\n    }\n}\n"
  },
  {
    "path": "src/components/BubbleChart.js",
    "content": "import * as d3 from \"d3\";\nimport BaseChart from \"./BaseChart\";\n\nexport default class BubbleChart extends BaseChart {\n    addText() {\n        this.text = this.node.append(\"text\")\n            .attr(\"dy\", \".3em\")\n            .attr(\"class\", \"bubble-text\")\n            .style(\"text-anchor\", \"middle\")\n            .style(\"pointer-events\", \"none\")\n            .text(this.setText);\n    }\n\n    setText(node) {\n        if (node.data.value > 15) { return node.data.name; }\n    }\n\n    onMouseOver(node) {\n        return this.tooltip\n            .style(\"visibility\", \"visible\")\n            .text(`${node.data.name} (${node.data.value})`);\n    }\n\n    create(data) {\n        this.bubble = d3.pack()\n            .size([this.props.diameter, this.props.diameter])\n            .padding(1.5);\n\n        this.root = d3.hierarchy(data).sum(nodeData => nodeData.value);\n\n        this.svg = d3.select(this.el).append(\"svg\")\n            .attr(\"width\", this.props.diameter)\n            .attr(\"height\", this.props.diameter)\n            .attr(\"class\", \"bubble\");\n\n        this.node = this.svg.selectAll(\".node\")\n            .data(this.bubble(this.root).children)\n            .enter().append(\"g\")\n                .attr(\"class\", \"node\")\n                .attr(\"transform\", d => { return `translate(${d.x}, ${d.y})`; });\n\n        this.node.append(\"circle\")\n            .attr(\"r\", node => { return node.r; })\n            .style(\"fill\", node => { return this.color(node.data.name); })\n            .on(\"mouseover\", this.onMouseOver.bind(this))\n            .on(\"mousemove\", this.onMouseMove.bind(this))\n            .on(\"mouseout\", this.onMouseOut.bind(this));\n\n        d3.select(document.frameElement).style(\"height\", `${this.props.diameter} px`);\n\n        this.addText();\n\n        if (this.showTooltips) {\n            this.addTooltips();\n        }\n    }\n\n    update(data) {\n        const formattedData = this.bubble(this.root).children;\n\n        this.node = this.svg.selectAll(\".node\")\n            .data(formattedData);\n\n        const nodeEnter = this.node.enter()\n            .append(\"g\")\n            .attr(\"class\", \"node\")\n            .attr(\"transform\", d => { return `translate(${d.x}, ${d.y})`; });\n\n        nodeEnter\n            .append(\"circle\")\n            .attr(\"r\", d => { return d.r; })\n            .style(\"fill\", (d, i) => { return this.color(i); })\n            .on(\"mouseover\", this.onMouseOver.bind(this))\n            .on(\"mousemove\", this.onMouseMove.bind(this))\n            .on(\"mouseout\", this.onMouseOut.bind(this));\n\n        this.text\n            .data(formattedData)\n            .text(this.setText);\n\n        this.node.select(\"circle\")\n            .transition().duration(this.transitionDuration)\n            .attr(\"r\", d => {\n                return d.r;\n            })\n            .style(\"fill\", (d, i) => {\n                return this.color(i);\n            });\n\n        this.node.transition().attr(\"class\", \"node\")\n            .attr(\"transform\", d => {\n                return `translate(${d.x}, ${d.y})`;\n            });\n\n        this.node.exit().remove();\n    }\n}\n"
  },
  {
    "path": "src/components/Chart.js",
    "content": "import React from \"react\";\nimport { findDOMNode } from \"react-dom\";\n\nimport BubbleChart from \"./BubbleChart\";\nimport BarChart from \"./BarChart\";\nimport PieChart from \"./PieChart\";\n\nexport default class Chart extends React.Component {\n    constructor(props) {\n        super(props);\n\n        this.chartToClassMappings = {\n            bubble: BubbleChart,\n            bar: BarChart,\n            pie: PieChart\n        };\n    }\n\n    componentDidMount() {\n        if (Object.keys(this.props.data).length === 0) {\n            return;\n        }\n\n        const el = findDOMNode(this);\n\n        if (this.props.type === \"custom\") {\n            this.chart = new this.props.customChart(el, this.props);\n        } else {\n            this.chart = new this.chartToClassMappings[this.props.type](el, this.props);\n        }\n\n        this.chart.create(this.props.data);\n    }\n\n    componentDidUpdate() {\n        this.chart.update(this.props.data);\n    }\n\n    componentWillUnmount() {\n        this.chart.unmount();\n    }\n\n    render() {\n        return (<div className=\"chart\"></div>);\n    }\n}\n"
  },
  {
    "path": "src/components/PieChart.js",
    "content": "import * as d3 from \"d3\";\nimport BaseChart from \"./BaseChart\";\n\nexport default class PieChart extends BaseChart {\n\n    // d3's default transition does not interpolate pie chart\n    // segments correctly; all intermediate `d` values for\n    // the `path`s are invalid, so will throw errors.\n    // What we are doing here is specifying to d3 how to\n    // correctly generate all those previously invalid\n    // values.\n    arcTween(a) {\n        var interpolated = d3.interpolate(this.originalAngles, a);\n        this.originalAngles = interpolated(0);\n\n        return t => {\n            return this.arc(interpolated(t));\n        };\n    }\n\n    onMouseOver(d) {\n        return this.tooltip\n            .style(\"visibility\", \"visible\")\n            .text(`${d.data.key} (${d.data.value})`);\n    }\n\n    addLegend() {\n        this.legend = this.svg.selectAll(\".d3act-legend\")\n            .data(this.color.domain())\n            .enter()\n            .append(\"g\")\n            .attr(\"class\", \"d3act-legend\")\n            .attr(\"transform\", (d, i) => {\n                const height = this.legendRectSize + this.legendSpacing;\n                const offset = 20;\n                const horz = -2 * this.legendRectSize;\n                const vert = (this.props.height / 2) + (i * height) + offset;\n\n                return \"translate(\" + horz + \",\" + vert + \")\";\n            });\n\n        this.legend.append(\"rect\")\n            .attr(\"width\", this.legendRectSize)\n            .attr(\"height\", this.legendRectSize)\n            .style(\"fill\", this.color)\n            .style(\"stroke\", this.color);\n\n        this.legend.append(\"text\")\n            .attr(\"x\", this.legendRectSize + this.legendSpacing)\n            .attr(\"y\", this.legendRectSize - this.legendSpacing)\n            .text(d => {\n                const name = Object.keys(this.data)[d];\n                const value = this.data[name];\n\n                return `${name} (${value})`;\n            });\n    }\n\n    getHeight(numberOfItems) {\n        if (this.showLegend) {\n            const legendRectExtraHeight = (numberOfItems * this.legendRectSize);\n            const legendSpacingExtraHeight = (numberOfItems * this.legendSpacing);\n\n            return (this.props.height * 1.5) + legendSpacingExtraHeight + legendRectExtraHeight;\n        }\n\n        return this.props.height;\n    }\n\n    create(data) {\n        this.legendRectSize = 18;\n        this.legendSpacing = 4;\n        this.data = data;\n\n        const numberOfItems = Object.keys(data).length;\n\n        const width = this.props.width;\n        const height = this.props.height;\n        const svgHeight = this.getHeight(numberOfItems);\n        const radius = Math.min(width, height) / 2;\n        const halfWidth = width / 2;\n        const halfHeight = height / 2;\n\n        this.arc = d3.arc()\n            .outerRadius(radius - 10)\n            .innerRadius(this.innerRadius);\n\n        this.pie = d3.pie()\n            .sort(null)\n            .value(d => { return d.value; });\n\n        this.svg = d3.select(this.el).append(\"svg\")\n            .attr(\"width\", width)\n            .attr(\"height\", svgHeight)\n            .append(\"g\")\n                .attr(\"transform\", `translate(${halfWidth}, ${halfHeight})`);\n\n        this.path = this.svg.selectAll(\"path\")\n            .data(this.pie(d3.entries(data)))\n            .enter().append(\"path\");\n\n        this.path\n            .attr(\"fill\", (d, i) => { return this.color(i); })\n            .attr(\"d\", this.arc)\n            .each(d => {\n                // Let's keep a reference to the\n                // original angles to make use of\n                // in our arcTween helper.\n                this.originalAngles = d;\n            })\n            .on(\"mouseover\", this.onMouseOver.bind(this))\n            .on(\"mousemove\", this.onMouseMove.bind(this))\n            .on(\"mouseout\", this.onMouseOut.bind(this));\n\n        if (this.showTooltips) {\n            this.addTooltips();\n        }\n\n        if (this.showLegend) {\n            this.addLegend();\n        }\n    }\n\n    update(data) {\n        this.path\n            .data(this.pie(d3.entries(data)))\n            .transition().duration(this.transitionDuration)\n            .attrTween(\"d\", this.arcTween.bind(this));\n\n        this.path\n            .data(this.pie(d3.entries(data)))\n            .enter().append(\"path\")\n            .attr(\"fill\", (d, i) => { return this.color(i); })\n            .attr(\"d\", this.arc)\n            .each(d => {\n                // Let's keep a reference to the\n                // original angles to make use of\n                // in our arcTween helper.\n                this.originalAngles = d;\n            })\n            .on(\"mouseover\", this.onMouseOver.bind(this))\n            .on(\"mousemove\", this.onMouseMove.bind(this))\n            .on(\"mouseout\", this.onMouseOut.bind(this));\n    }\n}\n"
  }
]