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

@@ -53,16 +53,16 @@ function getObjType(obj) {
     let toString = Object.prototype.toString;
 
     let map = {
-        '[object Boolean]':  'boolean',
-        '[object Number]':   'number',
-        '[object String]':   'string',
+        '[object Boolean]': 'boolean',
+        '[object Number]': 'number',
+        '[object String]': 'string',
         '[object Function]': 'function',
-        '[object Array]':    'array',
-        '[object Date]':     'date',
-        '[object RegExp]':   'regExp',
-        '[object Undefined]':'undefined',
-        '[object Null]':     'null',
-        '[object Object]':   'object'
+        '[object Array]': 'array',
+        '[object Date]': 'date',
+        '[object RegExp]': 'regExp',
+        '[object Undefined]': 'undefined',
+        '[object Null]': 'null',
+        '[object Object]': 'object'
     }
 
     // if(obj instanceof Element){
@@ -99,10 +99,10 @@ function hexToRgb(hex) {
 function rgbTohex(color) {
     let rgb;
 
-    if(color.indexOf("rgba") > -1){
+    if (color.indexOf("rgba") > -1) {
         rgb = color.replace("rgba(", "").replace(")", "").split(',');
     }
-    else{
+    else {
         rgb = color.replace("rgb(", "").replace(")", "").split(',');
     }
 
@@ -256,7 +256,7 @@ function createABCdim(x, count) {
 
 //计算字符串字节长度
 function getByteLen(val) {
-    if(val == null){
+    if (val == null) {
         return 0;
     }
 
@@ -279,9 +279,9 @@ function getByteLen(val) {
 function ArrayUnique(dataArr) {
     let arr = [];
 
-    if(dataArr.length > 0){
-        for(let i = 0; i < dataArr.length; i++){
-            if(arr.indexOf(dataArr[i]) == -1){
+    if (dataArr.length > 0) {
+        for (let i = 0; i < dataArr.length; i++) {
+            if (arr.indexOf(dataArr[i]) == -1) {
                 arr.push(dataArr[i]);
             }
         }
@@ -292,14 +292,14 @@ function ArrayUnique(dataArr) {
 
 //获取字体配置
 function luckysheetfontformat(format) {
-    if(getObjType(format) == "object"){
+    if (getObjType(format) == "object") {
         let font = "";
 
         //font-style
-        if(format.it == "0" || format.it == null){
+        if (format.it == "0" || format.it == null) {
             font += "normal ";
         }
-        else{
+        else {
             font += "italic ";
         }
 
@@ -307,36 +307,36 @@ function luckysheetfontformat(format) {
         font += "normal ";
 
         //font-weight
-        if(format.bl == "0"  || format.bl == null){
+        if (format.bl == "0" || format.bl == null) {
             font += "normal ";
         }
-        else{
+        else {
             font += "bold ";
         }
 
         //font-size/line-height
-        if(!format.fs){
+        if (!format.fs) {
             font += Math.ceil(10 * Store.devicePixelRatio) + "pt ";
         }
-        else{
+        else {
             font += Math.ceil(format.fs * Store.devicePixelRatio) + "pt ";
         }
 
-        if(!format.ff){
+        if (!format.ff) {
             font += '微软雅黑, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif';
         }
-        else{
+        else {
             let fontarray = menuButton.fontarray;
             let fontfamily = null;
 
-            if(isdatatypemulti(format.ff)["num"]){
+            if (isdatatypemulti(format.ff)["num"]) {
                 fontfamily = fontarray[parseInt(format.ff)];
             }
-            else{
+            else {
                 fontfamily = fontarray[menuButton.fontjson[format.ff]];
             }
 
-            if(fontfamily == null){
+            if (fontfamily == null) {
                 fontfamily = "微软雅黑";
             }
 
@@ -345,7 +345,7 @@ function luckysheetfontformat(format) {
 
         return font;
     }
-    else{
+    else {
         return luckysheetdefaultstyle.font;
     }
 }
@@ -414,10 +414,10 @@ function numFormat(num, type) {
         format = "[" + format + "]";
     }
 
-    if(num >= 1e+21){
+    if (num >= 1e+21) {
         value = parseFloat(numeral(num).value());
     }
-    else{
+    else {
         value = parseFloat(numeral(num).format("0." + format));
     }
 
@@ -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
 }