Skip to content

Commit 912a624

Browse files
rohanoid5rohanoid5
committed
Changed vue fusioncharts from plugin to component.
1 parent a3de4b8 commit 912a624

File tree

6 files changed

+492
-66
lines changed

6 files changed

+492
-66
lines changed

‎example/index.html‎

Lines changed: 15 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,33 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<title></title>
56
<style type="text/css">
67
.message-box {
7-
text-align: center;
8-
margin-top: 0px;
9-
background-color: #F5FBFF;
10-
width: 500px;
11-
color: #006BB8;
12-
padding: 5px 10px;
13-
box-sizing: border-box;
14-
border: 1px solid #B8E1FF;
8+
text-align: center;
9+
margin-top: 0px;
10+
background-color: #F5FBFF;
11+
width: 500px;
12+
color: #006BB8;
13+
padding: 5px 10px;
14+
box-sizing: border-box;
15+
border: 1px solid #B8E1FF;
1516
}
1617
</style>
1718
</head>
19+
1820
<body>
19-
21+
2022
<div id="chart1">
21-
<fusioncharts :options="options"> FusionCharts will render here...</fusioncharts>
23+
<fusioncharts :options="options">
24+
FusionCharts will render here...
25+
</fusioncharts>
2226
<p class="message-box">The value that you have selected is: {{displayValue}} </p>
2327
</div>
2428

2529
<script type="text/javascript" src="bundle.js"></script>
2630

2731
</body>
28-
</html>
2932

33+
</html>

‎example/index.js‎

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,45 @@
1-
import Vue from 'vue';
2-
import VueFusionCharts from '../src';
3-
import FusionCharts from 'fusioncharts';
4-
import Charts from 'fusioncharts/fusioncharts.charts';
5-
import Fint from 'fusioncharts/themes/fusioncharts.theme.fint';
1+
import Vue from "vue";
2+
// import VueFusionCharts from "../src";
3+
import VueFusionChartsComponent from "../src";
4+
import FusionCharts from "fusioncharts";
5+
import Charts from "fusioncharts/fusioncharts.charts";
6+
// import Fint from "fusioncharts/themes/fusioncharts.theme.fint";
67

7-
8-
Charts(FusionCharts);
9-
Fint(FusionCharts);
8+
// Charts(FusionCharts);
9+
// Fint(FusionCharts);
1010

1111
// Use VueFusionCharts plugins by calling the Vue.use() global method:
12-
Vue.use(VueFusionCharts);
12+
// Vue.use(VueFusionCharts, FusionCharts, Charts);
13+
14+
//Use this to add vue-fusioncharts a component
15+
let vFC = VueFusionChartsComponent(FusionCharts, Charts);
16+
Vue.component("fusioncharts", vFC);
1317

1418
// bootstrap the demo
1519
var chart = new Vue({
16-
el: '#chart1',
17-
data: {
18-
options: {
19-
type: 'Pie2D',
20-
width: '500',
21-
height: '300',
22-
dataFormat: 'json',
23-
dataSource: {
24-
chart: {
25-
caption: 'Vue FusionCharts Sample',
26-
theme: 'fint'
27-
},
28-
data: [{value: 1.9}, {value: 2.3}, {value: 2.1}]
29-
},
30-
displayValue: 'nothing',
31-
events: {
32-
dataplotRollover: function (ev, props) {
33-
chart.displayValue = props.displayValue
34-
}
35-
}
36-
},
37-
displayValue: 'nothing'
38-
}
20+
el: "#chart1",
21+
data: {
22+
options: {
23+
type: "Pie2D",
24+
width: "500",
25+
height: "300",
26+
dataFormat: "json",
27+
dataSource: {
28+
chart: {
29+
caption: "Vue FusionCharts Sample",
30+
theme: "fint"
31+
},
32+
data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
33+
},
34+
displayValue: "nothing",
35+
events: {
36+
dataplotRollover: function(ev, props) {
37+
chart.displayValue = props.value;
38+
}
39+
}
40+
},
41+
displayValue: "nothing"
42+
}
3943
});
4044

4145
window.chart = chart;
42-

‎package-lock.json‎

Lines changed: 32 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@
6161
"chai": "^3.5.0",
6262
"eslint": "^3.19.0",
6363
"eslint-loader": "^2.0.0",
64+
"fusioncharts": "^3.13.1-sr.2",
6465
"mocha": "^3.4.1",
6566
"rollup-plugin-commonjs": "^8.0.2",
6667
"rollup-plugin-node-resolve": "^3.0.0",

‎src/index.js‎

Lines changed: 29 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,32 @@
1-
import _FC from 'fusioncharts';
2-
import _FCComponent from './vue-fusioncharts';
1+
// This code is used if we use vue-fusioncharts as a Plugin.
2+
// import _FC from "fusioncharts";
3+
// import _FCComponent from "./vue-fusioncharts";
34

4-
const addDep = (FC, _FC, modules) => {
5-
if ( FC ){
6-
if ( modules.getName || modules.name ){
7-
FC.addDep(modules);
8-
} else {
9-
modules(FC);
10-
}
11-
} else {
12-
modules(_FC);
13-
}
14-
};
15-
const install = (Vue, FC, ...options) => {
16-
options && options.forEach && options.forEach((modules) => {
17-
addDep(FC, _FC, modules);
18-
});
19-
let component = _FCComponent(FC);
5+
// const addDep = (FC, _FC, modules) => {
6+
// if (FC) {
7+
// if (modules.getName || modules.name) {
8+
// FC.addDep(modules);
9+
// } else {
10+
// modules(FC);
11+
// }
12+
// } else {
13+
// modules(_FC);
14+
// }
15+
// };
16+
// const install = (Vue, FC, ...options) => {
17+
// options &&
18+
// options.forEach &&
19+
// options.forEach(modules => {
20+
// addDep(FC, _FC, modules);
21+
// });
22+
// let component = _FCComponent(FC);
2023

21-
Vue.component(component.name, component);
22-
};
24+
// Vue.component(component.name, component);
25+
// };
2326

24-
export default install;
27+
// export default install;
28+
29+
// This code is used if we use vue-fusioncharts as a Component
30+
import _FCComponent from "./vue-fusioncharts-component";
31+
32+
export default _FCComponent;

0 commit comments

Comments
 (0)