Merge branch 'release/3.1.1'

fusioncharts · Feb 7, 2020 · fd6a182 · fd6a182
2 parents 7af687a + 7f59385
commit fd6a182
Show file tree

Hide file tree

Showing 8 changed files with 66 additions and 215 deletions.
diff --git a/dist/drill-down.js b/dist/drill-down.js
@@ -1655,7 +1655,7 @@ function (_React$Component) {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactFC).call(this, props));
     _this.containerId = (0, _v["default"])();
     _this.oldOptions = null;
-    _this.FusionCharts = props.fcLibrary || ReactFC.fusionChartsCore;
+    _this.FusionCharts = props.fcLibrary || ReactFC.fusionChartsCore || window.FusionCharts;
     return _this;
   }
 
@@ -1665,13 +1665,11 @@ function (_React$Component) {
       this.renderChart();
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (!this.oldOptions) {
-        return;
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps !== this.props) {
+        this.detectChanges(this.props);
       }
-
-      this.detectChanges(nextProps);
     }
   }, {
     key: "componentWillUnmount",

diff --git a/dist/drill-down.min.js b/dist/drill-down.min.js
diff --git a/dist/react-fusioncharts.js b/dist/react-fusioncharts.js
@@ -134,7 +134,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
 
 function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
- // import FusionCharts from 'fusioncharts/core';
 
 
 
@@ -171,7 +170,7 @@ function (_React$Component) {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactFC).call(this, props));
     _this.containerId = uuid_v4__WEBPACK_IMPORTED_MODULE_1___default()();
     _this.oldOptions = null;
-    _this.FusionCharts = props.fcLibrary || ReactFC.fusionChartsCore;
+    _this.FusionCharts = props.fcLibrary || ReactFC.fusionChartsCore || window.FusionCharts;
     return _this;
   }
 
@@ -181,13 +180,11 @@ function (_React$Component) {
       this.renderChart();
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (!this.oldOptions) {
-        return;
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps !== this.props) {
+        this.detectChanges(this.props);
       }
-
-      this.detectChanges(nextProps);
     }
   }, {
     key: "componentWillUnmount",

diff --git a/dist/react-fusioncharts.min.js b/dist/react-fusioncharts.min.js
diff --git a/example/ChartViewer.js b/example/ChartViewer.js
@@ -1,207 +1,65 @@
 import React from 'react';
 import FusionCharts from 'fusioncharts';
 import Charts from 'fusioncharts/fusioncharts.charts';
-import Column2d from 'fusioncharts/viz/column2d';
 import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
 import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
 import ReactFC from '../lib/ReactFC';
 
-// Charts(FusionCharts);
-// TimeSeries(FusionCharts);
-// OceanTheme(FusionCharts);
 ReactFC.fcRoot(FusionCharts, Charts, TimeSeries, FusionTheme);
 
-const myDataSource = {
-  chart: {
-    caption: "Harry's ss",
-    subCaption: 'Top 5 stores in last month by revenue',
-    numberPrefix: '$',
-    theme: 'ocean'
-  },
-  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'
-    }
-  ]
-};
-
-// 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);
+const BAR = 'bar2d';
 
 class ChartViewer extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      timeseriesDs: {
-        type: 'column2d',
-        renderAt: 'container',
-        width: '90%',
-        height: 350,
-        dataSource: {
-          chart: {
-            caption: "Harry's ss",
-            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'
-            }
-          ]
-        }
+      inverted: false,
+      type: BAR,
+      dataSource: {
+        chart: {
+          caption: 'Countries With Most Oil Reserves [2017-18]',
+          subCaption: 'In MMbbl = One Million barrels',
+          xAxisName: 'Country',
+          yAxisName: 'Reserves (MMbbl)',
+          numberSuffix: 'K',
+          theme: 'fusion'
+        },
+        data: [
+          { label: 'Venezuela', value: '290' },
+          { label: 'Saudi', value: '260' },
+          { label: 'Canada', value: '180' },
+          { label: 'Iran', value: '140' },
+          { label: 'Russia', value: '115' },
+          { label: 'UAE', value: '100' },
+          { label: 'US', value: '30' },
+          { label: 'China', value: '300' }
+        ]
       }
     };
-
-    this.onChangeSize = this.onChangeSize.bind(this);
-    this.onFetchData = this.onFetchData.bind(this);
-    this.onChangeCaption = this.onChangeCaption.bind(this);
+    this.onChange = this.onChange.bind(this);
   }
 
-  componentDidMount() {
-    // this.onFetchData();
-  }
-
-  onChangeSize() {
-    const timeseriesDs = { ...this.state.timeseriesDs };
-    timeseriesDs.height = 600;
-    timeseriesDs.width = 600;
-    this.setState({ timeseriesDs }, () => {
-      console.log(this.state.timeseriesDs);
-    });
-  }
-
-  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
-    //   });
-    // });
-  }
-
-  onChangeCaption() {
-    // console.log(this.state.timeseriesDs);
-    const timeseriesDs = { ...this.state.timeseriesDs };
-    timeseriesDs.dataSource.caption.text = 'Random';
-    this.setState(
-      {
-        timeseriesDs
-      },
-      () => {
-        // this.onChangeSize();
+  onChange() {
+    this.setState(({ dataSource }) => ({
+      dataSource: {
+        ...dataSource,
+        chart: { ...dataSource.chart, caption: 'CHANGED IT!!!!!!!' }
       }
-    );
+    }));
   }
 
   render() {
     return (
       <div>
-        {/* <ReactFC {...this.state} /> */}
-        {this.state.timeseriesDs.dataSource.data ? (
-          <ReactFC
-            type="line"
-            width="600"
-            height="400"
-            dataSource={{
-              chart: {
-                theme: 'fusion',
-                caption: 'Total footfall in Bakersfield Central',
-                subCaption: 'Last week',
-                xAxisName: 'Day',
-                yAxisName: 'No. of Visitors',
-                lineThickness: '2',
-                showXAxisLine: 1,
-                showYAxisLine: 1,
-                numDivLines: 7,
-                numVDivLines: 7,
-                showToolTip: 1
-              },
-              data: [
-                {
-                  label: 'Mon',
-                  value: '15123'
-                },
-                {
-                  label: 'Tue',
-                  value: '14233'
-                },
-                {
-                  label: 'Wed',
-                  value: '23507'
-                },
-                {
-                  label: 'Thu',
-                  value: '9110'
-                },
-                {
-                  label: 'Fri',
-                  value: '15529'
-                },
-                {
-                  label: 'Sat',
-                  value: '20803'
-                },
-                {
-                  label: 'Sun',
-                  value: '19202'
-                }
-              ]
-            }}
-          />
-        ) : (
-          'loading'
-        )}
-        <div>
-          <button onClick={this.onChangeSize}>Change Size</button>
-          <button onClick={this.onChangeCaption}>Change Caption</button>
-        </div>
+        <ReactFC
+          type={this.state.type}
+          width={this.state.inverted ? '400' : '600'}
+          height={this.state.inverted ? '600' : '400'}
+          dataFormat="json"
+          dataSource={this.state.dataSource}
+        />
+        <button onClick={this.onChange}>CHANGE</button>
       </div>
     );
   }

diff --git a/lib/ReactFC.js b/lib/ReactFC.js
@@ -66,7 +66,7 @@ function (_React$Component) {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactFC).call(this, props));
     _this.containerId = (0, _v["default"])();
     _this.oldOptions = null;
-    _this.FusionCharts = props.fcLibrary || ReactFC.fusionChartsCore;
+    _this.FusionCharts = props.fcLibrary || ReactFC.fusionChartsCore || window.FusionCharts;
     return _this;
   }
 
@@ -76,13 +76,11 @@ function (_React$Component) {
       this.renderChart();
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (!this.oldOptions) {
-        return;
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps !== this.props) {
+        this.detectChanges(this.props);
       }
-
-      this.detectChanges(nextProps);
     }
   }, {
     key: "componentWillUnmount",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-fusioncharts",
-  "version": "3.0.1",
+  "version": "3.1.1",
   "description": "Simple and Lightweight React component for FusionCharts JavaScript Charting Library",
   "main": "lib/ReactFC.js",
   "author": {
@@ -55,15 +55,15 @@
     "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-react": "^7.7.0",
-    "fusioncharts": "^3.13.3",
+    "fusioncharts": "^3.13.5-sr.1",
     "jest": "^22.4.2",
     "lodash": "^4.17.11",
+    "nodemon": "^2.0.2",
     "prop-types": "^15.6.2",
-    "react": "^16.2.0",
+    "react": "^16.12.0",
     "react-addons-test-utils": "15.3.0",
     "react-component-gulp-tasks": "^0.7.6",
-    "react-dom": "^16.2.0",
-    "react-native": "^0.54.2",
+    "react-dom": "^16.12.0",
     "react-test-renderer": "^16.2.0",
     "serve": "^10.0.1",
     "webpack": "^4.20.2",
@@ -79,7 +79,8 @@
     "build:example": "npm run build:lib && webpack --config webpack.config.example.js",
     "start": "npm run build:example && serve example/",
     "test": "jest --coverage --verbose",
-    "test:report": "npm test && serve coverage/lcov-report -o"
+    "test:report": "npm test && serve coverage/lcov-report -o",
+    "watch": "nodemon --ignore example/dist --watch example --watch src --exec \"npm run start\""
   },
   "keywords": [
     "react",