SUPPORT-2113 | Vue fusioncharts example structure migration to vue3

fusioncharts · Jun 16, 2021 · ac49381 · ac49381
1 parent 9a952bd
commit ac49381
Show file tree

Hide file tree

Showing 2 changed files with 91 additions and 85 deletions.
diff --git a/example/index.js b/example/index.js
@@ -1,12 +1,17 @@
-import Vue from 'vue';
-import VueFusionCharts from '../src';
+import { createApp } from 'vue';
+
 import VueFCComponent from '../src/vue-fusioncharts-component';
-// import VueFCComponent from '../component';
-// import VueFusionCharts from '../dist/vue-fusioncharts';
+// import VueFCComponent from '../component/index.min.js';
+
+// Using as a plugin
+// import FCPlugin from '../dist/vue-fusioncharts';
+
+// Additional configs
 import FusionCharts from 'fusioncharts';
 import Charts from 'fusioncharts/fusioncharts.charts';
 import TimeSeries from 'fusioncharts/fusioncharts.timeseries';
 
+// Additional data
 const jsonify = res => res.json();
 const dataFetch = fetch(
   'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/data/plotting-multiple-series-on-time-axis-data.json'
@@ -15,99 +20,91 @@ const schemaFetch = fetch(
   'https://s3.eu-central-1.amazonaws.com/fusion.store/ft/schema/plotting-multiple-series-on-time-axis-schema.json'
 ).then(jsonify);
 
-// Use VueFusionCharts plugins by calling the Vue.use() global method:
-// Vue.use(VueFusionCharts, FusionCharts, Charts);
-
-//Use this to add vue-fusioncharts a component
-let vFC = VueFCComponent(FusionCharts, Charts, TimeSeries);
-Vue.component('fusioncharts', vFC);
-
-// bootstrap the demo
-var chart = new Vue({
-  el: '#chart1',
-  components: { fusioncharts: vFC },
-  data: {
-    component: true,
-    show: false,
-    counter: 0,
-    chartType: 'Pie2D',
-    pieDataSource: {
-      chart: {
-        caption: 'Vue FusionCharts Sample',
-        theme: 'fint'
-      },
-      data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
-    },
-    displayValue: 'nothing',
-    events: {
-      dataplotRollover: function(ev, props) {
-        chart.displayValue = props.value;
-      }
-    },
-    width: '600',
-    height: '400',
-    type: 'timeseries',
-    dataFormat: 'json',
-    dataSource: {
-      data: null,
-      caption: {
-        text: 'Sales Analysis'
-      },
-      subcaption: {
-        text: 'Grocery & Footwear'
-      },
-      series: 'Type',
-      yAxis: [
-        {
-          plot: 'Sales Value',
-          title: 'Sale Value',
-          format: {
-            prefix: '$'
-          }
-        }
-      ]
-    },
-    chartDs: {
-      chart: {
-        caption: 'Vue FusionCharts Sample',
-        theme: 'fint',
-        animation: '1',
-        updateanimduration: '100'
-      },
-      data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
-    },
-    options: {
-      width: '600',
-      height: '400',
-      type: 'Pie2D',
-      dataFormat: 'json',
-      dataSource: {
+const App = {
+  data() {
+    return {
+      component: true,
+      show: false,
+      counter: 0,
+      chartType: 'Pie2D',
+      pieDataSource: {
         chart: {
           caption: 'Vue FusionCharts Sample',
           theme: 'fint'
         },
         data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
-      }
-    },
-    timeseriesOptions: {
+      },
+      displayValue: 'nothing',
+      events: {
+        dataplotRollover: function(ev, props) {
+          this.displayValue = props.value;
+        }
+      },
       width: '600',
       height: '400',
       type: 'timeseries',
       dataFormat: 'json',
       dataSource: {
-        caption: { text: 'Online Sales of a SuperStore in the US' },
         data: null,
+        caption: {
+          text: 'Sales Analysis'
+        },
+        subcaption: {
+          text: 'Grocery & Footwear'
+        },
+        series: 'Type',
         yAxis: [
           {
-            plot: [
-              {
-                value: 'Sales ($)'
-              }
-            ]
+            plot: 'Sales Value',
+            title: 'Sale Value',
+            format: {
+              prefix: '$'
+            }
           }
         ]
+      },
+      chartDs: {
+        chart: {
+          caption: 'Vue FusionCharts Sample',
+          theme: 'fint',
+          animation: '1',
+          updateanimduration: '100'
+        },
+        data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
+      },
+      options: {
+        width: '600',
+        height: '400',
+        type: 'Pie2D',
+        dataFormat: 'json',
+        dataSource: {
+          chart: {
+            caption: 'Vue FusionCharts Sample',
+            theme: 'fint'
+          },
+          data: [{ value: 1.9 }, { value: 2.3 }, { value: 2.1 }]
+        }
+      },
+      timeseriesOptions: {
+        width: '600',
+        height: '400',
+        type: 'timeseries',
+        dataFormat: 'json',
+        dataSource: {
+          caption: { text: 'Online Sales of a SuperStore in the US' },
+          data: null,
+          yAxis: [
+            {
+              plot: [
+                {
+                  value: 'Sales ($)'
+                }
+              ]
+            }
+          ]
+        }
       }
-    }
+    };
   },
   methods: {
     changeFirstChartAttr: function() {
@@ -144,6 +141,14 @@ var chart = new Vue({
       this.dataSource.data = fusionTable;
     });
   }
-});
+};
+const app = createApp(App);
+
+// Using as a component
+let vFC = VueFCComponent(FusionCharts, Charts, TimeSeries);
+app.component('fusioncharts', vFC);
+
+// Using as a plugin
+// app.use(FCPlugin, FusionCharts, Charts, TimeSeries);
 
-window.chart = chart;
+app.mount('#chart1');
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -10,11 +10,12 @@ module.exports = {
   devtool: 'source-map',
   resolve: {
     alias: {
-      vue: 'vue/dist/vue.js'
+      'vue': 'vue/dist/vue.esm-bundler.js',
     }
   },
   devServer: {
     contentBase: './example'
     // open: true
-  }
+  },
+  mode: 'development',
 };