SUPPORT-2113 | Vue fusioncharts component migration to vue3

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

Hide file tree

Showing 3 changed files with 48 additions and 136 deletions.
diff --git a/src/index.js b/src/index.js
@@ -1,8 +1,8 @@
 import _FCComponent from './vue-fusioncharts-component';
 
-const install = (Vue, FC, ...options) => {
+const install = (app, FC, ...options) => {
   let component = _FCComponent(FC, ...options);
-  Vue.component(component.name, component);
+  app.component(component.name, component);
 };
 
 export default install;
diff --git a/src/utils.js b/src/utils.js
@@ -63,86 +63,3 @@ export function cloneDataSource(obj, purpose = 'clone') {
   }
   return undefined;
 }
-
-export function attachListeners(THIS) {
-  if (THIS.$listeners && typeof THIS.$listeners === 'object') {
-    Object.keys(THIS.$listeners).forEach(event => {
-      THIS.chartObj.addEventListener(event, e => {
-        THIS.$emit(event, e);
-      });
-    });
-  }
-}
-
-export function createEvents(THIS) {
-  const ret = {
-    events: {}
-  };
-  if (THIS.$listeners && typeof THIS.$listeners === 'object') {
-    Object.keys(THIS.$listeners).forEach(event => {
-      ret.events[event] = e => {
-        THIS.$emit(event, e);
-      };
-    });
-  }
-  return ret;
-}
-
-export function setLastOptions(config, THIS) {
-  THIS._oldOptions = Object.assign({}, config);
-}
-
-export function getLastOptions(THIS) {
-  return THIS._oldOptions;
-}
-
-export function getOptions(This, optionsMap) {
-  let config = {},
-    THIS = This;
-  for (let i in optionsMap) {
-    if (THIS[i] !== undefined && THIS[i] !== null) {
-      config[optionsMap[i]] = THIS[i];
-    }
-  }
-  let options = Object.assign(Object.assign({}, THIS.options), config);
-  return options;
-}
-
-export function renderChart(This, FC) {
-  let THIS = This,
-    config = THIS.getOptions(),
-    chartObj = THIS.chartObj;
-
-  config.renderAt = this.containerID;
-  THIS.setLastOptions(config);
-
-  if (chartObj && chartObj.dispose) {
-    chartObj.dispose();
-  }
-  const events = this.createEvents();
-  config.events = Object.assign({}, config.events, events.events);
-
-  THIS.chartObj = chartObj = new FC(config);
-  chartObj.render();
-}
-
-export function updateChart(This) {
-  let THIS = This,
-    config = THIS.getOptions(),
-    prevConfig = THIS.getLastOptions(),
-    chartObj = THIS.chartObj;
-
-  if (
-    config.width !== prevConfig.width ||
-    config.height !== prevConfig.height
-  ) {
-    chartObj && chartObj.resizeTo(config.width, config.height);
-  } else if (config.type !== prevConfig.type) {
-    chartObj.chartType(config.type);
-  } else {
-    if (!checkIfDataTableExists(config.dataSource))
-      chartObj.setChartData(config.dataSource, config.dataFormat);
-  }
-
-  THIS.setLastOptions(config);
-}
diff --git a/src/vue-fusioncharts-component.js b/src/vue-fusioncharts-component.js
@@ -1,55 +1,50 @@
-const { optionsMap, props } = require('./config.js');
-const cloneDeep = require('lodash/cloneDeep');
+import { optionsMap, props } from './config.js';
+import cloneDeep from 'lodash/cloneDeep';
+import uniqueId from 'lodash/uniqueId';
 import { addDep, checkIfDataTableExists, cloneDataSource } from './utils';
+import { h } from 'vue';
 
 export default (FC, ...options) => {
   options &&
     options.forEach &&
-    options.forEach(modules => {
+    options.forEach((modules) => {
       addDep(FC, modules);
     });
   return {
     name: 'fusioncharts',
-    template: '<div></div>',
-    render: function(h) {
-      this.containerID = 'fc-' + this._uid;
+    render: function () {
+      this.containerID = 'fc-' + uniqueId();
       return h('div', {
-        attrs: {
-          id: this.containerID
-        }
+        id: this.containerID,
       });
     },
     props,
     methods: {
-      attachListeners: function() {
-        if (this.$listeners && typeof this.$listeners === 'object') {
-          Object.keys(this.$listeners).forEach(event => {
-            this.chartObj.addEventListener(event, e => {
-              this.$emit(event, e);
-            });
-          });
-        }
-      },
-      createEvents: function() {
+      createEvents: function () {
+        const myattrs = this.$attrs;
         const ret = {
-          events: {}
+          events: {},
         };
-        if (this.$listeners && typeof this.$listeners === 'object') {
-          Object.keys(this.$listeners).forEach(event => {
-            ret.events[event] = e => {
-              this.$emit(event, e);
-            };
+
+        if (myattrs && typeof myattrs === 'object') {
+          Object.keys(myattrs).forEach((event) => {
+            if (event.startsWith('on') && typeof myattrs[event] === 'function') {
+              const myEvent = event.replace('on', '');
+              ret.events[myEvent] = e => {
+                this.$emit(myEvent, e);
+              };
+            }
           });
         }
         return ret;
       },
-      setLastOptions: function(config) {
+      setLastOptions: function (config) {
         this._oldOptions = Object.assign({}, config);
       },
-      getLastOptions: function() {
+      getLastOptions: function () {
         return this._oldOptions;
       },
-      getOptions: function() {
+      getOptions: function () {
         let config = {},
           THIS = this;
         for (let i in optionsMap) {
@@ -62,7 +57,7 @@ export default (FC, ...options) => {
 
         return options;
       },
-      renderChart: function() {
+      renderChart: function () {
         let THIS = this,
           config = THIS.getOptions(),
           chartObj = THIS.chartObj;
@@ -85,7 +80,7 @@ export default (FC, ...options) => {
         THIS.chartObj = chartObj = new FC(config);
         chartObj.render();
       },
-      updateChart: function() {
+      updateChart: function () {
         let THIS = this,
           config = THIS.getOptions(),
           prevConfig = THIS.getLastOptions(),
@@ -104,48 +99,48 @@ export default (FC, ...options) => {
         }
 
         THIS.setLastOptions(config);
-      }
+      },
     },
     watch: {
-      type: function() {
+      type: function () {
         this.chartObj.chartType(this.type);
       },
-      width: function() {
+      width: function () {
         this.chartObj.resizeTo(this.width, this.height);
       },
-      height: function() {
+      height: function () {
         this.chartObj.resizeTo(this.width, this.height);
       },
       options: {
-        handler: function() {
+        handler: function () {
           this.updateChart();
         },
-        deep: true
+        deep: true,
       },
       dataSource: {
-        handler: function() {
+        handler: function () {
           if (!checkIfDataTableExists(this.dataSource)) {
             this.chartObj.setChartData(
               this.datasource || this.dataSource,
               this.dataFormat || this.dataformat
             );
           }
         },
-        deep: true
+        deep: true,
       },
       datasource: {
-        handler: function() {
+        handler: function () {
           if (!checkIfDataTableExists(this.datasource)) {
             this.chartObj.setChartData(
               this.datasource || this.dataSource,
               this.dataFormat || this.dataformat
             );
           }
         },
-        deep: true
+        deep: true,
       },
       'datasource.data': {
-        handler: function(newVal, prevVal) {
+        handler: function (newVal, prevVal) {
           if (newVal !== prevVal) {
             let clonedDataSource;
             if (this.datasource.series) {
@@ -157,10 +152,10 @@ export default (FC, ...options) => {
             );
           }
         },
-        deep: false
+        deep: false,
       },
       'dataSource.data': {
-        handler: function(newVal, prevVal) {
+        handler: function (newVal, prevVal) {
           if (newVal !== prevVal) {
             let clonedDataSource;
             if (this.dataSource.series) {
@@ -172,22 +167,22 @@ export default (FC, ...options) => {
             );
           }
         },
-        deep: false
-      }
+        deep: false,
+      },
     },
-    deactivated: function() {
+    deactivated: function () {
       this.chartObj && this.chartObj.dispose();
     },
-    beforeDestroy: function() {
+    beforeUnmount: function () {
       this.chartObj && this.chartObj.dispose();
     },
-    mounted: function() {
+    mounted: function () {
       this.renderChart();
     },
-    ready: function() {
+    ready: function () {
       this.renderChart();
     },
-    beforeUpdate: function() {
+    beforeUpdate: function () {
       const strPrevClonedDataSource = JSON.stringify(this.prevDataSource);
       let ds = this.datasource || this.dataSource || this.options.dataSource;
       const strCurrClonedDataSource = JSON.stringify(
@@ -200,6 +195,6 @@ export default (FC, ...options) => {
         }
         this.chartObj.setChartData(ds, this.dataFormat || this.dataformat);
       }
-    }
+    },
   };
 };