feat(chart): add chart

plugins system, add first plugin:chart

BREAKING CHANGE: add new config : plugins, array

index.html

@@ -60,6 +60,7 @@
 			luckysheet.create({
 				container: 'luckysheet',
 				lang: 'zh',
+				plugins: ['chart'],
 				data: [sheetCell,sheetFormula,sheetConditionFormat,sheetTable,sheetComment,sheetPivotTableData,sheetPivotTable]
 			})
 

src/config.js

@@ -51,4 +51,5 @@ export default {
     beforeCreateDom: null,//表格创建之前的方法
     fireMousedown: null, //单元格数据下钻
     lang: 'en', //language
+    plugins: [], //plugins, e.g. ['chart']
 }

src/controllers/expendPlugins.js

@@ -0,0 +1,19 @@
+import chart from '../expendPlugins/chart/plugin'
+
+const pluginsObj = {
+    'chart':chart
+}
+/**
+ * Register plugins
+ */
+function initPlugins(plugins){
+    if(plugins.length){
+        plugins.forEach(plugin => {
+            pluginsObj[plugin]();
+        });
+    }
+}
+
+export {
+    initPlugins
+}

src/controllers/luckysheetConfigsetting.js

@@ -28,6 +28,7 @@ const luckysheetConfigsetting = {
     chartConfigChange: null,
     beforeCreateDom: null,
     fireMousedown: null,
+    plugins:[]
 }
 
 export default luckysheetConfigsetting;

src/core.js

@@ -7,6 +7,7 @@ import luckysheetConfigsetting from './controllers/luckysheetConfigsetting';
 import sheetmanage from './controllers/sheetmanage';
 import luckysheetsizeauto from './controllers/resize';
 import luckysheetHandler from './controllers/handler';
+import {initPlugins} from './controllers/expendPlugins';
 
 let luckysheet = {};
 
@@ -62,6 +63,10 @@ luckysheet.create = function (setting) {
     luckysheetConfigsetting.beforeCreateDom = extendsetting.beforeCreateDom;
 
     luckysheetConfigsetting.fireMousedown = extendsetting.fireMousedown;
+    luckysheetConfigsetting.plugins = extendsetting.plugins;
+
+    // Register plugins
+    initPlugins(extendsetting.plugins);
 
     let devicePixelRatio = extendsetting.devicePixelRatio;
     if(devicePixelRatio == null){

src/expendPlugins/chart/chartmix.css

@@ -0,0 +1 @@
+.chart-container[data-v-7aaa5f56]{background:#ec3204}

src/expendPlugins/chart/plugin.js

@@ -0,0 +1,41 @@
+import {seriesLoadScripts, loadLinks, $$} from '../../utils/util'
+
+// Dynamically load dependent scripts and styles
+const dependScripts = [
+    'https://cdn.jsdelivr.net/npm/vue@2.6.11',
+    'https://unpkg.com/vuex@3.4.0',
+    'https://unpkg.com/element-ui/lib/index.js',
+    './src/expendPlugins/chart/chartmix.umd.js'
+]
+
+const dependLinks = [
+    'https://unpkg.com/element-ui/lib/theme-chalk/index.css',
+    './src/expendPlugins/chart/chartmix.css'
+]
+
+// Initialize the chart component
+function chart(){
+    loadLinks(dependLinks);
+
+    seriesLoadScripts(dependScripts,null,function () {
+        const store = new Vuex.Store()
+        console.info('chartmix::',chartmix.default)
+        console.info('store::',store)
+
+        Vue.use(chartmix.default,{store})
+
+        $$('#luckysheet_info_detail').innerHTML = `<div id="chartmix">
+        <chart-mix msg="你猜猜"/>
+      </div>`;
+
+        var app = new Vue({
+        el: '#chartmix',
+        store: store,
+        data: {
+            message: 'Hello Vue!'
+        }
+        })
+    });
+}
+
+export default chart;

src/utils/util.js

@@ -467,6 +467,148 @@ function mouseclickposition($menu, x, y, p) {
     }
 }
 
+/**
+ * 元素选择器
+ * @param {String}  selector css选择器
+ * @param {String}  context  指定父级DOM
+ */
+function $$(selector, context) {
+    context = context || document
+    var elements = context.querySelectorAll(selector)
+    return elements.length == 1
+        ? Array.prototype.slice.call(elements)[0]
+        : Array.prototype.slice.call(elements)
+}
+
+/** 
+ * 串行加载指定的脚本
+ * 串行加载[异步]逐个加载，每个加载完成后加载下一个
+ * 全部加载完成后执行回调
+ * @param {Array|String}  scripts 指定要加载的脚本
+ * @param {Object} options 属性设置
+ * @param {Function} callback 成功后回调的函数
+ * @return {Array} 所有生成的脚本元素对象数组
+ */
+
+function seriesLoadScripts(scripts, options, callback) {
+    if (typeof (scripts) !== 'object') {
+        var scripts = [scripts];
+    }
+    var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
+    var s = [];
+    var last = scripts.length - 1;
+    //递归
+    var recursiveLoad = function (i) {
+        s[i] = document.createElement('script');
+        s[i].setAttribute('type', 'text/javascript');
+        // Attach handlers for all browsers
+        // 异步
+        s[i].onload = s[i].onreadystatechange = function () {
+            if (!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
+                this.onload = this.onreadystatechange = null;
+                this.parentNode.removeChild(this);
+                if (i !== last) {
+                    recursiveLoad(i + 1);
+                } else if (typeof (callback) === 'function') {
+                    callback()
+                };
+            }
+        }
+        // 同步
+        s[i].setAttribute('src', scripts[i]);
+
+        // 设置属性
+        if (typeof options === 'object') {
+            for (var attr in options) {
+                s[i].setAttribute(attr, options[attr]);
+            }
+        }
+
+        HEAD.appendChild(s[i]);
+    };
+    recursiveLoad(0);
+}
+
+
+/**
+ * 并行加载指定的脚本
+ * 并行加载[同步]同时加载，不管上个是否加载完成，直接加载全部
+ * 全部加载完成后执行回调
+ * @param {Array|String}  scripts 指定要加载的脚本
+ * @param {Object} options 属性设置
+ * @param {Function} callback 成功后回调的函数
+ * @return {Array} 所有生成的脚本元素对象数组
+ */
+
+function parallelLoadScripts(scripts, options, callback) {
+    if (typeof (scripts) !== 'object') {
+        var scripts = [scripts];
+    }
+    var HEAD = document.getElementsByTagName('head')[0] || document.documentElement;
+    var s = [];
+    var loaded = 0;
+    for (var i = 0; i < scripts.length; i++) {
+        s[i] = document.createElement('script');
+        s[i].setAttribute('type', 'text/javascript');
+        // Attach handlers for all browsers
+        // 异步
+        s[i].onload = s[i].onreadystatechange = function () {
+            if (!/*@cc_on!@*/0 || this.readyState === 'loaded' || this.readyState === 'complete') {
+                loaded++;
+                this.onload = this.onreadystatechange = null;
+                this.parentNode.removeChild(this);
+                if (loaded === scripts.length && typeof (callback) === 'function') callback();
+            }
+        };
+        // 同步
+        s[i].setAttribute('src', scripts[i]);
+
+        // 设置属性
+        if (typeof options === 'object') {
+            for (var attr in options) {
+                s[i].setAttribute(attr, options[attr]);
+            }
+        }
+
+        HEAD.appendChild(s[i]);
+    }
+}
+
+/**
+* 动态添加css
+* @param {String}  url 指定要加载的css地址
+*/
+function loadLink(url) {
+    var doc = document;
+    var link = doc.createElement("link");
+    link.setAttribute("rel", "stylesheet");
+    link.setAttribute("type", "text/css");
+    link.setAttribute("href", url);
+
+    var heads = doc.getElementsByTagName("head");
+    if (heads.length) {
+        heads[0].appendChild(link);
+    }
+    else {
+        doc.documentElement.appendChild(link);
+    }
+}
+
+/**
+* 动态添加一组css
+* @param {String}  url 指定要加载的css地址
+*/
+function loadLinks(urls) {
+    if (typeof (urls) !== 'object') {
+        urls = [urls];
+    }
+    if(urls.length){
+        urls.forEach(url => {
+            loadLink(url);
+        });
+    }
+}
+
 export {
     isJsonString,
     common_extend,
@@ -486,4 +628,8 @@ export {
     numFormat,
     numfloatlen,
     mouseclickposition,
+    $$,
+    seriesLoadScripts,
+    parallelLoadScripts,
+    loadLinks
 }