Merge branch 'release/3.0.0'

fusioncharts · Dec 26, 2018 · 2b75c1b · 2b75c1b
2 parents 4f35d65 + 02e787a
commit 2b75c1b
Show file tree

Hide file tree

Showing 11 changed files with 605 additions and 67 deletions.
diff --git a/README.md b/README.md
@@ -24,6 +24,7 @@ A simple and lightweight official React component for FusionCharts JavaScript ch
 - [Custom Components](#custom-components)
   - [Drill Down](#drill-down-component)
 - [Going Beyond Charts](#going-beyond-charts)
+- [Usage and Integration of FusionTime](#usage-and-integration-of-fusionTime)
 - [For Contributors](#for-contributors)
 - [Licensing](#licensing)
 
@@ -76,8 +77,8 @@ ReactFC.fcRoot(FusionCharts);
 
 Here is a basic sample that shows how to create a chart using `react-fusioncharts`:
 
-```
-import React from 'react;
+```javascript
+import React from 'react';
 import ReactDOM from 'react-dom';
 import FusionCharts from 'fusioncharts';
 import Charts from 'fusioncharts/fusioncharts.charts';
@@ -263,6 +264,96 @@ class Chart extends Component {
 ReactDOM.render(<Chart />, document.getElementById('root'));
 ```
 
+## Usage and integration of FusionTime
+
+From `[email protected]` and `[email protected]`, You can visualize timeseries data easily on react.
+
+Learn more about FusionTime [here](https://www.fusioncharts.com/fusiontime).
+
+### Consider the example below for integration of FusionTime
+
+```javascript
+import React from 'react';
+import FusionCharts from 'fusioncharts';
+import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
+import ReactFC from '../lib/ReactFC';
+
+ReactFC.fcRoot(FusionCharts, TimeSeries);
+
+const jsonify = res => res.json();
+const dataFetch = fetch(
+  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/data.json'
+).then(jsonify);
+const schemaFetch = fetch(
+  'https://raw.githubusercontent.com/fusioncharts/dev_centre_docs/fusiontime-beta-release/charts-resources/fusiontime/online-sales-single-series/schema.json'
+).then(jsonify);
+
+class ChartViewer extends React.Component {
+  constructor(props) {
+    super(props);
+    this.onFetchData = this.onFetchData.bind(this);
+    this.state = {
+      timeseriesDs: {
+        type: 'timeseries',
+        renderAt: 'container',
+        width: '600',
+        height: '400',
+        dataSource: {
+          caption: { text: 'Online Sales of a SuperStore in the US' },
+          data: null,
+          yAxis: [
+            {
+              plot: [
+                {
+                  value: 'Sales ($)'
+                }
+              ]
+            }
+          ]
+        }
+      }
+    };
+  }
+
+  componentDidMount() {
+    this.onFetchData();
+  }
+
+  onFetchData() {
+    Promise.all([dataFetch, schemaFetch]).then(res => {
+      const data = res[0];
+      const schema = res[1];
+      const fusionTable = new FusionCharts.DataStore().createDataTable(
+        data,
+        schema
+      );
+      const timeseriesDs = Object.assign({}, this.state.timeseriesDs);
+      timeseriesDs.dataSource.data = fusionTable;
+      this.setState({
+        timeseriesDs
+      });
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        {this.state.timeseriesDs.dataSource.data ? (
+          <ReactFC {...this.state.timeseriesDs} />
+        ) : (
+          'loading'
+        )}
+      </div>
+    );
+  }
+}
+```
+
+Useful links for FusionTime
+
+- [How FusionTime works](https://www.fusioncharts.com/dev/fusiontime/getting-started/how-fusion-time-works)
+- [Create your first chart](https://www.fusioncharts.com/dev/fusiontime/getting-started/create-your-first-chart-in-fusiontime)
+
 ## Drill Down Component
 
 A custom component to easily add drill down to your react application.

diff --git a/dist/drill-down.js b/dist/drill-down.js
@@ -1463,8 +1463,11 @@ function (_React$Component) {
           // animate the chart to show the changes
 
           this.chartObj.render();
+          return;
         }
-      } else if (!this.isSameChartData(currData, oldData)) {
+      }
+
+      if (!this.isSameChartData(currData, oldData)) {
         if (!utils.isUndefined(currData)) {
           this.chartObj.setChartData(currData, // When dataFormat is not given, but data is changed,
           // then use 'json' as default dataFormat
@@ -1475,11 +1478,35 @@ function (_React$Component) {
   }, {
     key: "isSameChartData",
     value: function isSameChartData(currData, oldData) {
-      if (utils.isObject(currData) && utils.isObject(oldData)) {
-        return utils.isSameObjectContent(currData, oldData);
-      }
+      /* TODO
+        1. Current has DataStore and Old doesn't
+        2. Old has and Current doesn't
+        3. Both has, check ref is equal, return false only if not equal
+        4. Clone oldData for diff
+        5. Clone currentData for diff
+        6. return string check.
+      */
+      // 1. Current has DataStore and Old doesn't
+      if (utils.checkIfDataTableExists(currData) && !utils.checkIfDataTableExists(oldData)) {
+        return false;
+      } // 2. Old has and Current doesn't
+
+
+      if (!utils.checkIfDataTableExists(currData) && utils.checkIfDataTableExists(oldData)) {
+        return false;
+      } // 3. Both has, check ref is equal, return false only if not equal
+
+
+      if (utils.checkIfDataTableExists(currData) && utils.checkIfDataTableExists(oldData) && currData.data !== oldData.data) {
+        return false;
+      } // 4. Clone oldData for diff
+
 
-      return currData === oldData;
+      var oldDataStringified = JSON.stringify(utils.cloneDataSource(oldData, 'diff')); // 5. Clone currentData for diff
+
+      var currentDataStringified = JSON.stringify(utils.cloneDataSource(currData, 'diff')); // 6. return string check.
+
+      return oldDataStringified === currentDataStringified;
     }
   }, {
     key: "checkAndUpdateEvents",
@@ -1616,8 +1643,10 @@ function (_React$Component) {
 
       Object.assign(inlineOptions, chartConfig);
 
-      if (utils.isObject(inlineOptions.dataSource)) {
+      if (utils.isObject(inlineOptions.dataSource) && !utils.checkIfDataTableExists(inlineOptions.dataSource)) {
         inlineOptions.dataSource = utils.deepCopyOf(inlineOptions.dataSource);
+      } else if (utils.isObject(inlineOptions.dataSource) && utils.checkIfDataTableExists(inlineOptions.dataSource)) {
+        inlineOptions.dataSource = utils.cloneDataSource(inlineOptions.dataSource, 'clone');
       }
 
       if (utils.isObject(inlineOptions.link)) {
@@ -1774,6 +1803,8 @@ exports.isCallable = isCallable;
 exports.isSameObjectContent = isSameObjectContent;
 exports.isUndefined = isUndefined;
 exports.deepCopyOf = deepCopyOf;
+exports.checkIfDataTableExists = checkIfDataTableExists;
+exports.cloneDataSource = cloneDataSource;
 
 function _typeof(obj) {
   if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
@@ -1788,6 +1819,8 @@ function _typeof(obj) {
 
   return _typeof(obj);
 }
+/* eslint-disable guard-for-in */
+
 
 function isObject(value) {
   return value !== null && _typeof(value) === 'object';
@@ -1829,6 +1862,66 @@ function deepCopyOf(obj) {
   return JSON.parse(JSON.stringify(obj));
 }
 
+function checkIfDataTableExists(dataSource) {
+  // eslint-disable-next-line no-underscore-dangle
+  if (dataSource && dataSource.data && dataSource.data._dataStore) {
+    return true;
+  }
+
+  return false;
+}
+
+function cloneDataSource(obj) {
+  var purpose = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'clone';
+
+  var type = _typeof(obj);
+
+  if (type === 'string' || type === 'number' || type === 'function' || type === 'boolean') {
+    return obj;
+  }
+
+  if (obj === null || obj === undefined) {
+    return obj;
+  }
+
+  if (Array.isArray(obj)) {
+    var arr = [];
+
+    for (var i = 0; i < obj.length; i++) {
+      arr.push(this.cloneDataSource(obj[i]));
+    }
+
+    return arr;
+  }
+
+  if (_typeof(obj) === 'object') {
+    var clonedObj = {}; // eslint-disable-next-line guard-for-in
+    // eslint-disable-next-line no-restricted-syntax
+
+    for (var prop in obj) {
+      // Edge case handling for DataTable
+      if (prop === 'data') {
+        // eslint-disable-next-line no-underscore-dangle
+        if (obj[prop]._dataStore && purpose === 'clone') {
+          clonedObj[prop] = obj[prop]; // eslint-disable-next-line no-underscore-dangle
+        } else if (obj[prop]._dataStore && purpose === 'diff') {
+          clonedObj[prop] = '-';
+        } else {
+          clonedObj[prop] = this.cloneDataSource(obj[prop]);
+        }
+
+        continue;
+      }
+
+      clonedObj[prop] = this.cloneDataSource(obj[prop]);
+    }
+
+    return clonedObj;
+  }
+
+  return undefined;
+}
+
 /***/ }),
 /* 14 */
 /***/ (function(module, exports, __webpack_require__) {

diff --git a/dist/drill-down.min.js b/dist/drill-down.min.js