Skip to content

Commit b8224f9

Browse files
rousanrousan
committed
Implement FCReact component
1 parent a73bf62 commit b8224f9

21 files changed

+1975
-294
lines changed

‎.eslintignore

+3-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
dist/*
2-
example/*
3-
lib/*
4-
node_modules/*
1+
dist/
2+
lib/
3+
node_modules/

‎.eslintrc.yml

+13-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
11
extends: airbnb
22
env:
33
browser: true
4-
node: true
4+
node: true
5+
rules:
6+
import/no-extraneous-dependencies: 0
7+
react/jsx-filename-extension: 0
8+
react/prop-types: 0
9+
class-methods-use-this: 0
10+
no-plusplus: 0
11+
no-prototype-builtins: 0
12+
react/sort-comp: 0
13+
no-param-reassign: 0
14+
no-return-assign: 0
15+
no-sequences: 0
16+
global-require: 0

‎README.md

+62-86
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,82 @@
1-
### [Demos and Documentation](http://fusioncharts.github.io/react-fusioncharts-component/)
1+
#### [Demos and Documentation](http://fusioncharts.github.io/react-fusioncharts-component/)
22

3-
## Introduction
3+
# React-FusionCharts
44

5-
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.
5+
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.
66

7-
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.
7+
## Installation
88

9-
This article outlines the steps to be executed for rendering charts using the **react-fusioncharts** plugin.
9+
To install `react-fusioncharts`, run:
1010

11-
#### Step 1: Install **fusioncharts**, **react**, **react-dom**, and **react-fusioncharts** npm package
12-
Execute the commands below in the terminal to install **fusioncharts**, **react**, **react-dom**, and **react-fusioncharts** node modules.
13-
14-
```sh
15-
npm install react --save
16-
npm install react-dom --save
17-
npm install fusioncharts --save
18-
npm install react-fusioncharts --save
19-
20-
# or single line
21-
npm install react react-dom fusioncharts react-fusioncharts --save
11+
```bash
12+
$ npm install react-fusioncharts --save
2213
```
2314

24-
#### Step 2: Add the HTML container element for rendering the chart
15+
Also install `fusionCharts`, if it is not already installed:
2516

26-
In your HTML, find the section where you wish to render the chart place a `<div>` for the FusionCharts to be rendered.
27-
28-
`<div id='chart-container'></div>`
17+
```bash
18+
$ npm install fusioncharts --save
19+
```
2920

30-
#### Step 3: Import react-fusioncharts package from npm
21+
## Getting Started
3122

32-
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.
23+
After installing `react-fusioncharts`, import it in your React app:
3324

34-
```
25+
```javascript
3526
import React from 'react';
3627
import ReactDOM from 'react-dom';
37-
import fusioncharts from 'fusioncharts';
38-
// Load the charts module
39-
import charts from 'fusioncharts/fusioncharts.charts';
40-
import react-fusioncharts from 'react-fusioncharts';
41-
42-
// Pass fusioncharts as a dependency of charts
43-
charts(FusionCharts)
44-
45-
var chartConfigs = {
46-
type: ...,
47-
renderAt: ...,
48-
className: ..., // ReactJS attribute-name for DOM classes
49-
dataFormat: ...,
50-
dataSource: ...
28+
import FusionCharts from 'fusioncharts';
29+
import Charts from 'fusioncharts/fusioncharts.charts';
30+
import OceanTheme from 'fusioncharts/themes/fusioncharts.theme.ocean';
31+
import ReactFC from 'react-fusioncharts';
32+
33+
Charts(FusionCharts);
34+
OceanTheme(FusionCharts);
35+
36+
const myDataSource = {
37+
chart: {
38+
caption: 'Harry\'s SuperMart',
39+
subCaption: 'Top 5 stores in last month by revenue',
40+
numberPrefix: '$',
41+
theme: 'ocean',
42+
},
43+
data: [
44+
{
45+
label: 'Bakersfield Central',
46+
value: '880000',
47+
},
48+
{
49+
label: 'Garden Groove harbour',
50+
value: '730000',
51+
},
52+
{
53+
label: 'Los Angeles Topanga',
54+
value: '590000',
55+
},
56+
{
57+
label: 'Compton-Rancho Dom',
58+
value: '520000',
59+
},
60+
{
61+
label: 'Daly City Serramonte',
62+
value: '330000',
63+
},
64+
],
5165
};
52-
```
53-
54-
#### Step 4: Pass the configurations required for FusionCharts and render the chart
55-
##### FusionCharts plugin for **react** can be used in two ways:
56-
1. Use the **ReactFC** component directly in **ReactDOM** to render the chart. The configurations are passed as props of the component.
57-
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.
58-
59-
##### Method 1:
60-
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:
6166

62-
```
63-
ReactDOM.render(
64-
<ReactFC {...chartConfigs} />,
65-
document.getElementById('chart-container')
66-
);
67-
```
68-
69-
##### Method 2:
70-
Create a custom MyApp component to render the chart as shown below:
71-
72-
```
73-
var MyApp = React.createClass({
74-
..., // Rest of the React Component Code
75-
render: function () {
76-
return (
77-
<ReactFC {...categoryChartConfigs} />
78-
<ReactFC {...revenueChartConfigs} />
79-
);
80-
}
81-
});
82-
83-
ReactDOM.render(
84-
<MyApp />,
85-
document.getElementById('chart-container')
86-
);
87-
```
88-
89-
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:
67+
const chartConfigs = {
68+
type: 'column2d',
69+
width: 600,
70+
height: 400,
71+
dataFormat: 'json',
72+
dataSource: myDataSource,
73+
};
9074

91-
```
9275
ReactDOM.render(
93-
<ReactFC
94-
type: ...,
95-
renderAt: ...,
96-
className: ...,
97-
dataFormat: ...,
98-
dataSource: ... />,
99-
document.getElementById('chart-container')
76+
<div>
77+
<ReactFC {...chartConfigs} />
78+
</div>,
79+
document.getElementById('root'),
10080
);
10181
```
10282

103-
Your chart should now render when the page is loaded.
104-
105-
### Licensing
106-
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/)) .

0 commit comments

Comments
 (0)