diff --git a/README.md b/README.md index ff2900f..7716155 100644 --- a/README.md +++ b/README.md @@ -23,69 +23,69 @@ After installing `react-fusioncharts`, import it in your `React` app: ```javascript import React from 'react'; import ReactDOM from 'react-dom'; -import FusionCharts from 'fusioncharts/core'; -import Column2D from 'fusioncharts/viz/column2d'; +import FusionCharts from 'fusioncharts'; +import Charts from 'fusioncharts/fusioncharts.charts'; import ReactFC from 'react-fusioncharts'; -import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'; +import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; -ReactFC.fcRoot(FusionCharts, Column2D, FusionTheme); +ReactFC.fcRoot(FusionCharts, Charts, FusionTheme); const myDataSource = { - "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": "30" - } - ] + "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": "30" + } + ] }; const chartConfigs = { - type: 'column2d', - width: 600, - height: 400, - dataFormat: 'json', - dataSource: myDataSource, + type: 'column2d', + width: 600, + height: 400, + dataFormat: 'json', + dataSource: myDataSource, }; ReactDOM.render( - , - document.getElementById('root'), + , + document.getElementById('root'), ); ``` @@ -96,91 +96,335 @@ To render a map, import the FusionMaps module along with the map definition. ```javascript import React from 'react'; import ReactDOM from 'react-dom'; -import FusionCharts from 'fusioncharts/core'; -import Maps from 'fusioncharts/maps'; -import World from 'fusioncharts/maps/es/fusioncharts.world'; +import FusionCharts from 'fusioncharts'; +import Maps from 'fusioncharts/fusioncharts.maps'; +import World from 'fusioncharts/maps/fusioncharts.world'; import ReactFC from 'react-fusioncharts'; -import FusionTheme from 'fusioncharts/themes/es/fusioncharts.theme.fusion'; +import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; ReactFC.fcRoot(FusionCharts, Maps, World, FusionTheme); const myDataSource = { - "chart": { - "caption": "Average Annual Population Growth", - "subcaption": " 1955-2015", - "numbersuffix": "%", - "includevalueinlabels": "1", - "labelsepchar": ": ", - "entityFillHoverColor": "#FFF9C4", - "theme": "fusion" - }, - "colorrange": { - "minvalue": "0", - "code": "#FFE0B2", - "gradient": "1", - "color": [ - { - "minvalue": "0.5", - "maxvalue": "1.0", - "color": "#FFD74D" - }, - { - "minvalue": "1.0", - "maxvalue": "2.0", - "color": "#FB8C00" - }, - { - "minvalue": "2.0", - "maxvalue": "3.0", - "color": "#E65100" - } - ] - }, - "data": [ - { - "id": "NA", - "value": ".82", - "showLabel": "1" - }, - { - "id": "SA", - "value": "2.04", - "showLabel": "1" - }, - { - "id": "AS", - "value": "1.78", - "showLabel": "1" - }, - { - "id": "EU", - "value": ".40", - "showLabel": "1" - }, - { - "id": "AF", - "value": "2.58", - "showLabel": "1" - }, - { - "id": "AU", - "value": "1.30", - "showLabel": "1" - } - ] + "chart": { + "caption": "Average Annual Population Growth", + "subcaption": " 1955-2015", + "numbersuffix": "%", + "includevalueinlabels": "1", + "labelsepchar": ": ", + "entityFillHoverColor": "#FFF9C4", + "theme": "fusion" + }, + "colorrange": { + "minvalue": "0", + "code": "#FFE0B2", + "gradient": "1", + "color": [ + { + "minvalue": "0.5", + "maxvalue": "1.0", + "color": "#FFD74D" + }, + { + "minvalue": "1.0", + "maxvalue": "2.0", + "color": "#FB8C00" + }, + { + "minvalue": "2.0", + "maxvalue": "3.0", + "color": "#E65100" + } + ] + }, + "data": [ + { + "id": "NA", + "value": ".82", + "showLabel": "1" + }, + { + "id": "SA", + "value": "2.04", + "showLabel": "1" + }, + { + "id": "AS", + "value": "1.78", + "showLabel": "1" + }, + { + "id": "EU", + "value": ".40", + "showLabel": "1" + }, + { + "id": "AF", + "value": "2.58", + "showLabel": "1" + }, + { + "id": "AU", + "value": "1.30", + "showLabel": "1" + } + ] }; const chartConfigs = { - type: 'world', - width: 600, - height: 400, - dataFormat: 'json', - dataSource: myDataSource, + type: 'world', + width: 600, + height: 400, + dataFormat: 'json', + dataSource: myDataSource, }; ReactDOM.render( - , - document.getElementById('root'), + , + document.getElementById('root'), +); +``` + +## Working with Events + +To attach event callbacks to a FusionCharts component, follow the pattern below. + +Write the callback: + +As a separate function: + +```javascript +var chartEventCallback = function (eventObj, dataObj) { + [Code goes here] +} +``` + +Or, as a component class method: + +```javascript +chartEventCallback (eventObj, dataObj) { + [Code goes here] +} +``` + +Attach the callback to an event through the React-FC component: +```javascript + +``` +Where, EVENTNAME is to be replaced by the event you want to track. + +##### Consider the example below that tracks hover events on a data plot. + +```javascript +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import FusionCharts from 'fusioncharts'; +import Charts from 'fusioncharts/fusioncharts.charts'; +import ReactFC from 'react-fusioncharts'; +import FusionTheme from 'fusioncharts/Charts/fusioncharts.theme.fusion'; + +ReactFC.fcRoot(FusionCharts, Charts, FusionTheme); + +const myDataSource = { + "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": "30" + } + ] +}; + +const chartConfigs = { + type: 'column2d', + width: 600, + height: 400, + dataFormat: 'json', + dataSource: myDataSource, +}; + +class Chart extends Component { + constructor(props) { + super(props); + + this.state = { + actualValue: 'Hover on the plot to see the value along with the label', + }; + + this.showPlotValue = this.showPlotValue.bind(this); + } + + // Event callback handler for 'dataplotRollOver'. + // Shows the value of the hovered plot on the page. + showPlotValue(eventObj, dataObj) { + this.setState({ + actualValue: `You’re are currently hovering over ${dataObj.categoryLabel} whose value is ${dataObj.displayValue}`, + }); + } + + render() { + return ( +
+ +

{this.state.actualValue}

+
+ ); + } +} + +ReactDOM.render( + , + document.getElementById('root'), +); +``` + +## Working with APIs + +To call APIs we will need the chart object. To get the chart object for an React-FC component, pass a callback through the attribute ```onRender```. + +Write the callback: + +As a separate function: + +```javascript +var chartRenderCallback = function (chart) { + [Code goes here] +} +``` + +Or, as a component class method: + +```javascript +chartRenderCallback (chart) { + [Code goes here] +} +``` + +Pass the callback as a prop, to which the chart object will be returned on rendering + +``` + +``` + +##### Consider the example below that conerts a Column 2D chart to a Pie 2D chart after 5 seconds. + +```javascript +import React, { Component } from 'react'; +import ReactDOM from 'react-dom'; +import FusionCharts from 'fusioncharts'; +import Charts from 'fusioncharts/fusioncharts.charts'; +import ReactFC from 'react-fusioncharts'; +import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion'; + +ReactFC.fcRoot(FusionCharts, Charts, FusionTheme); + +const myDataSource = { + "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": "30" + } + ] +}; + +const chartConfigs = { + type: 'column2d', + width: 600, + height: 400, + dataFormat: 'json', + dataSource: myDataSource, +}; + +class Chart extends Component { + // Convert the chart to a 2D Pie chart after 5 secs. + alterChart(chart) { + setTimeout(() => { + chart.chartType('pie2d'); + }, 5000); + } + + render() { + return ( +
+ +
+ ); + } +} + +ReactDOM.render( + , + document.getElementById('root'), ); ``` diff --git a/dist/react-fusioncharts.js b/dist/react-fusioncharts.js index 51729ed..e74bf7f 100644 --- a/dist/react-fusioncharts.js +++ b/dist/react-fusioncharts.js @@ -108,8 +108,6 @@ return /******/ (function(modules) { // webpackBootstrap function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } - var staticEvents = ['ready', 'beforeinitialize', 'initialized']; - var ReactFC = function (_React$Component) { _inherits(ReactFC, _React$Component); @@ -338,22 +336,27 @@ return /******/ (function(modules) { // webpackBootstrap var _this4 = this; var currentOptions = this.resolveChartOptions(this.props); + var events = {}; + currentOptions.renderAt = this.containerId; - this.chartObj = new this.FusionCharts(currentOptions); Object.keys(this.props).forEach(function (value) { var event = value.match(/^fcEvent-.*/i); - if (event && typeof _this4.props[value] === 'function') { var eventName = value.replace(/^fcEvent-/i, ''); - - if (staticEvents.indexOf(eventName.toLowerCase()) > -1) { - _this4.FusionCharts.addEventListener(eventName, _this4.props[value]); - } else { - _this4.chartObj.addEventListener(eventName, _this4.props[value]); - } + events[eventName] = _this4.props[value]; } }); + + if (Object.keys(events).length > 0) { + if (currentOptions.events === undefined) { + currentOptions.events = events; + } else { + currentOptions.events = Object.assign(currentOptions.events, events); + } + } + + this.chartObj = new this.FusionCharts(currentOptions); this.chartObj.render(); this.oldOptions = currentOptions; diff --git a/dist/react-fusioncharts.min.js b/dist/react-fusioncharts.min.js index 60e0ea0..81b17c2 100644 --- a/dist/react-fusioncharts.min.js +++ b/dist/react-fusioncharts.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("fusioncharts"),require("react")):"function"==typeof define&&define.amd?define(["fusioncharts","react"],t):"object"==typeof exports?exports.ReactFC=t(require("fusioncharts"),require("react")):e.ReactFC=t(e.FusionCharts,e.React)}(this,function(e,t){return function(e){function t(n){if(a[n])return a[n].exports;var r=a[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var r=a(1),o=n(r);e.exports=o.default},function(e,t,a){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t.default=e,t}function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var a=0;a1?a-1:0),r=1;r-1?e.FusionCharts.addEventListener(n,e.props[t]):e.chartObj.addEventListener(n,e.props[t])}}),this.chartObj.render(),this.oldOptions=t,this.props.onRender&&"function"==typeof this.props.onRender&&this.props.onRender(this.chartObj)}},{key:"resolveChartOptions",value:function(e){var t=e.chartConfig?e.chartConfig:{},a=m.default.reduce(function(t,a){return t[a]=e[a],t},{});return Object.assign(a,t),y.isObject(a.dataSource)&&(a.dataSource=y.deepCopyOf(a.dataSource)),y.isObject(a.link)&&(a.link=y.deepCopyOf(a.link)),y.isObject(a.events)&&(a.events=Object.assign({},a.events)),a}},{key:"render",value:function(){return u.default.createElement("div",{className:this.props.className,id:this.containerId})}}]),t}(u.default.Component);t.default=O},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=["type","id","width","height","dataFormat","dataSource","events","link","showDataLoadingMessage","showChartLoadingMessage","baseChartMessageFont","baseChartMessageFontSize","baseChartMessageColor","dataLoadStartMessage","dataLoadErrorMessage","dataInvalidMessage","dataEmptyMessage","typeNotSupportedMessage","loadMessage","renderErrorMessage","containerBackgroundColor","containerBackgroundOpacity","containerClassName","baseChartMessageImageHAlign","baseChartMessageImageVAlign","baseChartMessageImageAlpha","baseChartMessageImageScale","typeNotSupportedMessageImageHAalign","typeNotSupportedMessageImageVAlign","typeNotSupportedMessageImageAlpha","typeNotSupportedMessageImageScale","dataLoadErrorMessageImageHAlign","dataLoadErrorMessageImageVAlign","dataLoadErrorMessageImageAlpha","dataLoadErrorMessageImageScale","dataLoadStartMessageImageHAlign","dataLoadStartMessageImageVAlign","dataLoadStartMessageImageAlpha","dataLoadStartMessageImageScale","dataInvalidMessageImageHAlign","dataInvalidMessageImageVAlign","dataInvalidMessageImageAlpha","dataInvalidMessageImageScale","dataEmptyMessageImageHAlign","dataEmptyMessageImageVAlign","dataEmptyMessageImageAlpha","dataEmptyMessageImageScale","renderErrorMessageImageHAlign","renderErrorMessageImageVAlign","renderErrorMessageImageAlpha","renderErrorMessageImageScale","loadMessageImageHAlign","loadMessageImageVAlign","loadMessageImageAlpha","loadMessageImageScale"]},function(e,t){"use strict";function a(e){return null!==e&&"object"===("undefined"==typeof e?"undefined":i(e))}function n(e){return"function"==typeof e}function r(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(var n=Object.keys(e),o=0;o>>((3&t)<<3)&255;return r}}},function(e,t,a){function n(e,t,a){var n=t&&a||0;"string"==typeof e&&(t="binary"===e?new Array(16):null,e=null),e=e||{};var s=e.random||(e.rng||r)();if(s[6]=15&s[6]|64,s[8]=63&s[8]|128,t)for(var i=0;i<16;++i)t[n+i]=s[i];return t||o(s)}var r=a(5),o=a(4);e.exports=n},function(t,a){t.exports=e},function(e,a){e.exports=t}])}); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("fusioncharts"),require("react")):"function"==typeof define&&define.amd?define(["fusioncharts","react"],t):"object"==typeof exports?exports.ReactFC=t(require("fusioncharts"),require("react")):e.ReactFC=t(e.FusionCharts,e.React)}(this,function(e,t){return function(e){function t(n){if(a[n])return a[n].exports;var r=a[n]={exports:{},id:n,loaded:!1};return e[n].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var a={};return t.m=e,t.c=a,t.p="",t(0)}([function(e,t,a){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var r=a(1),o=n(r);e.exports=o.default},function(e,t,a){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)Object.prototype.hasOwnProperty.call(e,a)&&(t[a]=e[a]);return t.default=e,t}function r(e){return e&&e.__esModule?e:{default:e}}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function s(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var c=function(){function e(e,t){for(var a=0;a1?a-1:0),r=1;r0&&(void 0===t.events?t.events=a:t.events=Object.assign(t.events,a)),this.chartObj=new this.FusionCharts(t),this.chartObj.render(),this.oldOptions=t,this.props.onRender&&"function"==typeof this.props.onRender&&this.props.onRender(this.chartObj)}},{key:"resolveChartOptions",value:function(e){var t=e.chartConfig?e.chartConfig:{},a=m.default.reduce(function(t,a){return t[a]=e[a],t},{});return Object.assign(a,t),y.isObject(a.dataSource)&&(a.dataSource=y.deepCopyOf(a.dataSource)),y.isObject(a.link)&&(a.link=y.deepCopyOf(a.link)),y.isObject(a.events)&&(a.events=Object.assign({},a.events)),a}},{key:"render",value:function(){return d.default.createElement("div",{className:this.props.className,id:this.containerId})}}]),t}(d.default.Component);t.default=b},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=["type","id","width","height","dataFormat","dataSource","events","link","showDataLoadingMessage","showChartLoadingMessage","baseChartMessageFont","baseChartMessageFontSize","baseChartMessageColor","dataLoadStartMessage","dataLoadErrorMessage","dataInvalidMessage","dataEmptyMessage","typeNotSupportedMessage","loadMessage","renderErrorMessage","containerBackgroundColor","containerBackgroundOpacity","containerClassName","baseChartMessageImageHAlign","baseChartMessageImageVAlign","baseChartMessageImageAlpha","baseChartMessageImageScale","typeNotSupportedMessageImageHAalign","typeNotSupportedMessageImageVAlign","typeNotSupportedMessageImageAlpha","typeNotSupportedMessageImageScale","dataLoadErrorMessageImageHAlign","dataLoadErrorMessageImageVAlign","dataLoadErrorMessageImageAlpha","dataLoadErrorMessageImageScale","dataLoadStartMessageImageHAlign","dataLoadStartMessageImageVAlign","dataLoadStartMessageImageAlpha","dataLoadStartMessageImageScale","dataInvalidMessageImageHAlign","dataInvalidMessageImageVAlign","dataInvalidMessageImageAlpha","dataInvalidMessageImageScale","dataEmptyMessageImageHAlign","dataEmptyMessageImageVAlign","dataEmptyMessageImageAlpha","dataEmptyMessageImageScale","renderErrorMessageImageHAlign","renderErrorMessageImageVAlign","renderErrorMessageImageAlpha","renderErrorMessageImageScale","loadMessageImageHAlign","loadMessageImageVAlign","loadMessageImageAlpha","loadMessageImageScale"]},function(e,t){"use strict";function a(e){return null!==e&&"object"===("undefined"==typeof e?"undefined":i(e))}function n(e){return"function"==typeof e}function r(e,t){if(Object.keys(e).length!==Object.keys(t).length)return!1;for(var n=Object.keys(e),o=0;o>>((3&t)<<3)&255;return r}}},function(e,t,a){function n(e,t,a){var n=t&&a||0;"string"==typeof e&&(t="binary"===e?new Array(16):null,e=null),e=e||{};var s=e.random||(e.rng||r)();if(s[6]=15&s[6]|64,s[8]=63&s[8]|128,t)for(var i=0;i<16;++i)t[n+i]=s[i];return t||o(s)}var r=a(5),o=a(4);e.exports=n},function(t,a){t.exports=e},function(e,a){e.exports=t}])}); \ No newline at end of file diff --git a/lib/ReactFC.js b/lib/ReactFC.js index 4b4f7fa..d303010 100644 --- a/lib/ReactFC.js +++ b/lib/ReactFC.js @@ -36,8 +36,6 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var staticEvents = ['ready', 'beforeinitialize', 'initialized']; - var ReactFC = function (_React$Component) { _inherits(ReactFC, _React$Component); @@ -266,22 +264,27 @@ var ReactFC = function (_React$Component) { var _this4 = this; var currentOptions = this.resolveChartOptions(this.props); + var events = {}; + currentOptions.renderAt = this.containerId; - this.chartObj = new this.FusionCharts(currentOptions); Object.keys(this.props).forEach(function (value) { var event = value.match(/^fcEvent-.*/i); - if (event && typeof _this4.props[value] === 'function') { var eventName = value.replace(/^fcEvent-/i, ''); - - if (staticEvents.indexOf(eventName.toLowerCase()) > -1) { - _this4.FusionCharts.addEventListener(eventName, _this4.props[value]); - } else { - _this4.chartObj.addEventListener(eventName, _this4.props[value]); - } + events[eventName] = _this4.props[value]; } }); + + if (Object.keys(events).length > 0) { + if (currentOptions.events === undefined) { + currentOptions.events = events; + } else { + currentOptions.events = Object.assign(currentOptions.events, events); + } + } + + this.chartObj = new this.FusionCharts(currentOptions); this.chartObj.render(); this.oldOptions = currentOptions; diff --git a/package.json b/package.json index b7e946e..ad1e11a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-fusioncharts", - "version": "2.0.1", + "version": "2.0.2", "description": "Simple and Lightweight React component for FusionCharts JavaScript Charting Library", "main": "lib/ReactFC.js", "author": { @@ -52,7 +52,7 @@ "react-dom": "^16.2.0", "react-native": "^0.54.2", "react-test-renderer": "^16.2.0", - "serve": "^6.5.3", + "serve": "^10.0.1", "webpack": "^1.14.0" }, "peerDependencies": { diff --git a/src/ReactFC.js b/src/ReactFC.js index 208b9a3..cf996f1 100644 --- a/src/ReactFC.js +++ b/src/ReactFC.js @@ -4,8 +4,6 @@ import uuid from 'uuid/v4'; import * as utils from './utils/utils'; import fusionChartsOptions from './utils/options'; -const staticEvents = ['ready', 'beforeinitialize', 'initialized']; - class ReactFC extends React.Component { static fcRoot(core, ...modules) { modules.forEach((m) => { @@ -208,22 +206,27 @@ class ReactFC extends React.Component { renderChart() { const currentOptions = this.resolveChartOptions(this.props); + const events = {}; + currentOptions.renderAt = this.containerId; - this.chartObj = new this.FusionCharts(currentOptions); Object.keys(this.props).forEach((value) => { const event = value.match(/^fcEvent-.*/i); - if (event && typeof this.props[value] === 'function') { const eventName = value.replace(/^fcEvent-/i, ''); - - if (staticEvents.indexOf(eventName.toLowerCase()) > -1) { - this.FusionCharts.addEventListener(eventName, this.props[value]); - } else { - this.chartObj.addEventListener(eventName, this.props[value]); - } + events[eventName] = this.props[value]; } }); + + if (Object.keys(events).length > 0) { + if (currentOptions.events === undefined) { + currentOptions.events = events; + } else { + currentOptions.events = Object.assign(currentOptions.events, events); + } + } + + this.chartObj = new this.FusionCharts(currentOptions); this.chartObj.render(); this.oldOptions = currentOptions;