Merge branch 'feature/revamp' into develop

Author: rousan

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-0", "react"]
+}

.eslintignore

@@ -1,5 +1,3 @@
-.publish/*
-dist/*
-example/dist/*
-lib/*
-node_modules/*
+dist/
+lib/
+node_modules/

.eslintrc

@@ -0,0 +1,17 @@
+extends: airbnb
+env:
+  browser: true
+  node: true
+rules:
+  import/no-extraneous-dependencies: 0
+  react/jsx-filename-extension: 0
+  react/prop-types: 0
+  class-methods-use-this: 0
+  no-plusplus: 0
+  no-prototype-builtins: 0
+  react/sort-comp: 0
+  no-param-reassign: 0
+  no-return-assign: 0
+  no-sequences: 0
+  global-require: 0
+  import/prefer-default-export: 0

.eslintrc.yml

@@ -30,3 +30,5 @@ example/dist
 *.sublime-*
 .idea/
 *.DS_Store
+
+package-lock.json

.gitignore

@@ -1,106 +1,154 @@
-### [Demos and Documentation](http://fusioncharts.github.io/react-fusioncharts-component/)
+#### [Demos and Documentation](https://fusioncharts.github.io/react-fusioncharts-component/)
 
-## Introduction
+# react-fusionCharts
 
-FusionCharts Suite XT is a front-end, JavaScript-based, comprehensive collection of 90+ charts and  1000+ maps. This includes basic and complex charts like the column and bar charts, pie and doughnut charts, treemap, heatmap, logarithmic charts, and so on; gauges like the angular gauge, bulb gauge, thermometer gauge, and so on; and maps for all continents, major countries, and all US states.
+A simple and lightweight `React` component which provides bindings for `FusionCharts` JavaScript Charting Library. It easily adds rich and interactive charts to any `React` Projects.
 
-The **react-fusioncharts** plugin, along with FusionCharts Suite XT, lets you add interactive JavaScript charts and graphs to your web and mobile applications using only a single ReactJS component.
+## Installation
 
-This article outlines the steps to be executed for rendering charts using the **react-fusioncharts** plugin.
+To install `react-fusioncharts`, run:
 
-#### Step 1: Install **fusioncharts**, **react**, **react-dom**, and **react-fusioncharts** npm package
-Execute the commands below in the terminal to install **fusioncharts**, **react**, **react-dom**, and **react-fusioncharts** node modules.
+```bash
+$ npm install react-fusioncharts --save
+```
 
-```sh
-npm install react --save
-npm install react-dom --save
-npm install fusioncharts --save
-npm install react-fusioncharts --save
+Also install `fusionCharts`, if it is not already installed:
 
-# or single line
-npm install react react-dom fusioncharts react-fusioncharts --save
+```bash
+$ npm install fusioncharts --save
 ```
 
-#### Step 2: Add the HTML container element for rendering the chart
-
-In your HTML, find the section where you wish to render the chart place a `<div>` for the FusionCharts to be rendered.
+## Getting Started
 
-`<div id='chart-container'></div>`
+After installing `react-fusioncharts`, import it in your `React` app:
 
-#### Step 3: Import react-fusioncharts package from npm
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import FusionCharts from 'fusioncharts';
+import Charts from 'fusioncharts/fusioncharts.charts';
+import ReactFC from 'react-fusioncharts';
+
+Charts(FusionCharts);
+
+const myDataSource = {
+  chart: {
+    caption: 'Harry\'s SuperMart',
+    subCaption: 'Top 5 stores in last month by revenue',
+    numberPrefix: '$',
+  },
+  data: [
+    {
+      label: 'Bakersfield Central',
+      value: '880000',
+    },
+    {
+      label: 'Garden Groove harbour',
+      value: '730000',
+    },
+    {
+      label: 'Los Angeles Topanga',
+      value: '590000',
+    },
+    {
+      label: 'Compton-Rancho Dom',
+      value: '520000',
+    },
+    {
+      label: 'Daly City Serramonte',
+      value: '330000',
+    },
+  ],
+};
 
-Import **react**, **react-dom**, **fusioncharts**, and **react-fusioncharts** modules, in this order, through npm. In your JavaScript code, define an object that consists of all the configurations and their values, required to render FusionCharts.
+const chartConfigs = {
+  type: 'column2d',
+  width: 600,
+  height: 400,
+  dataFormat: 'json',
+  dataSource: myDataSource,
+};
 
+ReactDOM.render(
+  <ReactFC {...chartConfigs} />,
+  document.getElementById('root'),
+);
 ```
+
+## Using Licensed Version of FusionCharts
+
+While using licensed version of `FusionCharts`, you need to specify library as follows:
+
+Specify library for all charts:
+
+```javascript
 import React from 'react';
 import ReactDOM from 'react-dom';
-import fusioncharts from 'fusioncharts';
-// Load the charts module
-import charts from 'fusioncharts/fusioncharts.charts';
-import react-fusioncharts from 'react-fusioncharts';
-
-// Pass fusioncharts as a dependency of charts
-charts(FusionCharts)
-
-var chartConfigs = {
-    type: ...,
-    renderAt: ...,
-    className: ..., // ReactJS attribute-name for DOM classes
-    dataFormat: ...,
-    dataSource: ...
-};
-```
+import ReactFC from 'react-fusioncharts';
+// Here import licensed version of FusionCharts
+import FusionCharts from './library_path/fusioncharts';
+import Charts from './library_path/fusioncharts/fusioncharts.charts';
 
-#### Step 4: Pass the configurations required for FusionCharts and render the chart
-##### FusionCharts plugin for **react** can be used in two ways:
-1. Use the **ReactFC** component directly in **ReactDOM** to render the chart. The configurations are passed as props of the component.
-2. Create multiple **ReactFC** component inside your custom defined component to render individual charts. This way you would be able to hold the state in your custom component and will be able to perform various activities using the component’s lifecycle hooks. 
+// Provide FusionCharts core and other modules to resolve
+ReactFC.fcRoot(FusionCharts, Charts)
 
-##### Method 1:
-Render the chart in the **React** application for a standalone chart, we can choose to make a component class or directly render the chart with the **ReactFC** component class. The object containing the chart configuration properties are passed to the **FusionCharts** component as props, as shown below:
+........
 
 ```
+
+Specify library for a particular chart:
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ReactFC from 'react-fusioncharts';
+// Here import licensed version of FusionCharts
+import FusionCharts from './library_path/fusioncharts';
+import Charts from './library_path/fusioncharts/fusioncharts.charts';
+
+// Resolve modules
+Charts(FusionCharts)
+
 ReactDOM.render(
-    <ReactFC {...chartConfigs} />,
-    document.getElementById('chart-container')
+  <ReactFC
+    width="600"
+    height="400"
+    type="column2d"
+    dataSource={ /* Chart data source */ }
+    fcLibrary={FusionCharts} // Provide FusionCharts library
+  />,
+  document.getElementById('root'),
 );
-```
 
-##### Method 2:
-Create a custom MyApp component to render the chart as shown below:
+.......
 
 ```
-var MyApp = React.createClass({
-    ..., // Rest of the React Component Code
-    render: function () {
-        return (
-            <ReactFC {...categoryChartConfigs} />
-            <ReactFC {...revenueChartConfigs} />
-        );
-    }
-});
 
-ReactDOM.render(
-    <MyApp />,
-    document.getElementById('chart-container')
-);
+## Test
+
+```sh
+$ npm test
 ```
 
-While it is recommended to create an object, with the configuration properties, and passing the values defined, you can also pass the configuration properties separately as shown below:
+## Contributing
+
+* Clone the repository.
+* Install dependencies
+* Run `npm start` to start the dev server.
+* Open `http://localhost:5000/` in your browser.
 
+```sh
+$ git clone https://github.com/fusioncharts/react-fusioncharts-component.git
+$ cd react-fusioncharts-component
+$ npm i
+$ npm start
 ```
-ReactDOM.render(
-    <ReactFC
-        type: ...,
-        renderAt: ...,
-        className: ...,
-        dataFormat: ...,
-        dataSource: ... />,
-    document.getElementById('chart-container')
-);
+
+To build, run:
+
+```sh
+$ npm run build
 ```
 
-Your chart should now render when the page is loaded.
+### [Demos and Documentation](https://fusioncharts.github.io/react-fusioncharts-component/)
 
-### Licensing
-React-FusionCharts is open-source and distributed under the terms of the MIT/X11 License. You will still need to download and include FusionCharts in your page. This project provides no direct functionality. You can [Download an evaluation](http://fusioncharts.com/download/). You will still need to purchase a FusionCharts license to use in a commercial environment (FusionCharts is [free for non-commercial and personal use](http://www.fusioncharts.com/download/free/)) .