@opentiny/vue-renderless 3.1.0-alpha.0 → 3.4.7

package/chart-core/index.js

@@ -0,0 +1,541 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { on, off } from '@opentiny/vue-renderless/common/deps/dom';
+import { DEFAULT_COLORS, DEFAULT_THEME, STATIC_PROPS, ECHARTS_SETTINGS, SAAS_DEFAULT_COLORS_10, SAAS_DEFAULT_COLORS_18, DEFAULT_CONFIG } from './deps/constants';
+import { getType, debounce, isObject, cloneDeep, isEqual, htmlHandler } from './deps/utils';
+import setAnimation from './modules/animation';
+import setExtend from './modules/extend';
+import setMark from './modules/mark';
+export var computedCanvasStyle = function computedCanvasStyle(props) {
+  return function () {
+    return {
+      width: props.width,
+      height: props.height,
+      position: 'relative'
+    };
+  };
+};
+var calcColors = function calcColors(data) {
+  return data.length <= 10 ? SAAS_DEFAULT_COLORS_10 : SAAS_DEFAULT_COLORS_18;
+};
+export var computedChartColor = function computedChartColor(props) {
+  return function () {
+    var defaultColors = DEFAULT_COLORS;
+    var data = props.data;
+    var extend = props.extend;
+    if (data && Array.isArray(data.rows)) {
+      defaultColors = calcColors(data.rows);
+    } else if (Array.isArray(data)) {
+      defaultColors = calcColors(data);
+    } else if (extend && Array.isArray(extend.series)) {
+      defaultColors = calcColors(extend.series);
+    } else if (extend && extend.series && Array.isArray(extend.series.data)) {
+      defaultColors = calcColors(extend.series.data);
+    }
+    return props.colors || props.theme && props.theme.color || defaultColors;
+  };
+};
+export var dataHandler = function dataHandler(_ref) {
+  var api = _ref.api,
+    props = _ref.props,
+    state = _ref.state,
+    echartsLib = _ref.echartsLib,
+    t = _ref.t,
+    vm = _ref.vm;
+  return function () {
+    if (!api.chartHandler) {
+      return;
+    }
+    var data = props.data;
+    var isBoxplot = false;
+    if (vm.prepareBoxplotData && Array.isArray(data)) {
+      isBoxplot = true;
+      var obj = vm.prepareBoxplotData(data);
+      data = {
+        columns: obj.axisData,
+        rows: obj.boxData,
+        outliers: obj.outliers
+      };
+    }
+    var _data = data,
+      _data$columns = _data.columns,
+      columns = _data$columns === void 0 ? [] : _data$columns,
+      _data$rows = _data.rows,
+      rows = _data$rows === void 0 ? [] : _data$rows;
+    var extra = {
+      tooltipVisible: props.tooltipVisible,
+      legendVisible: props.legendVisible,
+      echarts: state.echarts,
+      color: state.chartColor,
+      tooltipFormatter: props.tooltipFormatter,
+      _once: state.once,
+      echartsLib: echartsLib,
+      t: t,
+      vm: vm
+    };
+    columns = htmlHandler(columns);
+    rows = htmlHandler(rows);
+    if (isBoxplot) {
+      extra.outliers = data.outliers;
+    }
+    if (props.beforeConfig) {
+      data = props.beforeConfig(data);
+    }
+    var options = api.chartHandler(columns, rows, props.settings, extra);
+    if (options) {
+      if (typeof options.then === 'function') {
+        options.then(api.optionsHandler);
+      } else {
+        api.optionsHandler(options);
+      }
+    }
+  };
+};
+export var nextTickResize = function nextTickResize(_ref2) {
+  var api = _ref2.api,
+    nextTick = _ref2.nextTick;
+  return function () {
+    return nextTick(api.resize);
+  };
+};
+export var resize = function resize(_ref3) {
+  var props = _ref3.props,
+    vm = _ref3.vm,
+    api = _ref3.api;
+  return function () {
+    if (!props.cancelResizeCheck) {
+      if (vm.$el && vm.$el.clientWidth && vm.$el.clientHeight) {
+        api.echartsResize();
+      }
+    } else {
+      api.echartsResize();
+    }
+  };
+};
+export var echartsResize = function echartsResize(state) {
+  return function () {
+    return state.echarts && state.echarts.resize();
+  };
+};
+var setOptionsLegend = function setOptionsLegend(_ref4) {
+  var props = _ref4.props,
+    options = _ref4.options;
+  if (props.legendPosition && options.legend) {
+    options.legend[props.legendPosition] = 10;
+    if (~['left', 'right'].indexOf(props.legendPosition)) {
+      options.legend.top = 'middle';
+      options.legend.orient = 'vertical';
+    }
+  }
+};
+var selfSetting = function selfSetting(_ref5) {
+  var props = _ref5.props,
+    options = _ref5.options;
+  ECHARTS_SETTINGS.forEach(function (setting) {
+    if (props[setting]) {
+      options[setting] = props[setting];
+    }
+  });
+};
+var applyMarks = function applyMarks(_ref6) {
+  var props = _ref6.props,
+    options = _ref6.options;
+  if (props.markArea || props.markLine || props.markPoint) {
+    var marks = {
+      markArea: props.markArea,
+      markLine: props.markLine,
+      markPoint: props.markPoint
+    };
+    var series = options.series;
+    if (Array.isArray(series)) {
+      series.forEach(function (item) {
+        setMark(item, marks);
+      });
+    } else if (isObject(series)) {
+      setMark(series, marks);
+    }
+  }
+};
+var afterConfig = function afterConfig(_ref7) {
+  var props = _ref7.props,
+    options = _ref7.options;
+  if (props.afterConfig) {
+    options = props.afterConfig(options);
+  }
+  return options;
+};
+var mapChartNotMerge = function mapChartNotMerge(props) {
+  var setOptionOpts = props.setOptionOpts;
+  if ((props.settings.bmap || props.settings.amap) && !isObject(setOptionOpts)) {
+    setOptionOpts = false;
+  }
+  return setOptionOpts;
+};
+var afterSetOption = function afterSetOption(_ref8) {
+  var props = _ref8.props,
+    state = _ref8.state,
+    options = _ref8.options,
+    echartsLib = _ref8.echartsLib;
+  if (props.afterSetOption) {
+    props.afterSetOption(state.echarts, options, echartsLib);
+  }
+};
+var afterSetOptionOnce = function afterSetOptionOnce(_ref9) {
+  var props = _ref9.props,
+    state = _ref9.state,
+    options = _ref9.options,
+    echartsLib = _ref9.echartsLib;
+  if (props.afterSetOptionOnce && !state.once.afterSetOptionOnce) {
+    state.once.afterSetOptionOnce = true;
+    props.afterSetOptionOnce(state.echarts, options, echartsLib);
+  }
+};
+export var judgeWidthHandler = function judgeWidthHandler(_ref10) {
+  var props = _ref10.props,
+    api = _ref10.api,
+    vm = _ref10.vm,
+    nextTick = _ref10.nextTick;
+  return function () {
+    if (!props.judgeWidth) {
+      return;
+    }
+    if (vm.$el.clientWidth || vm.$el.clientHeight) {
+      api.resize();
+    } else {
+      nextTick(function () {
+        if (vm.$el.clientWidth || vm.$el.clientHeight) {
+          api.resize();
+        } else {
+          setTimeout(function () {
+            api.resize();
+          }, props.widthChangeDelay);
+        }
+      });
+    }
+  };
+};
+var setOption = function setOption(_ref11) {
+  var state = _ref11.state,
+    options = _ref11.options,
+    setOptionOpts = _ref11.setOptionOpts,
+    emit = _ref11.emit,
+    api = _ref11.api,
+    props = _ref11.props,
+    echartsLib = _ref11.echartsLib;
+  state.echarts.setOption(options, setOptionOpts);
+  emit('ready', state.echarts, options, echartsLib);
+  if (!state.once['ready-once']) {
+    state.once['ready-once'] = true;
+    emit('ready-once', state.echarts, options, echartsLib);
+  }
+  api.judgeWidthHandler(options);
+  afterSetOption({
+    props: props,
+    state: state,
+    options: options,
+    echartsLib: echartsLib
+  });
+  afterSetOptionOnce({
+    props: props,
+    state: state,
+    options: options,
+    echartsLib: echartsLib
+  });
+};
+export var optionsHandler = function optionsHandler(_ref12) {
+  var props = _ref12.props,
+    state = _ref12.state,
+    emit = _ref12.emit,
+    echartsLib = _ref12.echartsLib,
+    api = _ref12.api,
+    vm = _ref12.vm;
+  return function (options) {
+    if (options.tooltip) {
+      var defaultTooltip = DEFAULT_CONFIG.tooltip || {};
+      options.tooltip = _objectSpread(_objectSpread({}, defaultTooltip), options.tooltip);
+    }
+    if (options.legend) {
+      var defaultLegend = DEFAULT_CONFIG.legend || {};
+      options.legend = _objectSpread(_objectSpread({}, defaultLegend), options.legend);
+    }
+    setOptionsLegend({
+      props: props,
+      options: options
+    });
+    options.color = state.chartColor;
+    selfSetting({
+      props: props,
+      options: options
+    });
+    setAnimation({
+      options: options,
+      animation: props.animation
+    });
+    applyMarks({
+      props: props,
+      options: options
+    });
+    if (props.extend) {
+      setExtend({
+        options: options,
+        extend: props.extend
+      });
+      options.series.label = _objectSpread({
+        show: false
+      }, options.series.label);
+      options.series.radius = ['25%', '100%'];
+    }
+    options = afterConfig({
+      props: props,
+      options: options
+    });
+    var setOptionOpts = mapChartNotMerge(props);
+    if (props.notSetUnchange && props.notSetUnchange.length) {
+      props.notSetUnchange.forEach(function (item) {
+        var value = options[item];
+        if (value) {
+          if (isEqual(value, state.store[item])) {
+            options[item] = undefined;
+          } else {
+            state.store[item] = cloneDeep(value);
+          }
+        }
+      });
+      if (isObject(setOptionOpts)) {
+        setOptionOpts.notMerge = false;
+      } else {
+        setOptionOpts = false;
+      }
+    }
+    if (vm._isDestroyed) {
+      return;
+    }
+    setOption({
+      state: state,
+      options: options,
+      setOptionOpts: setOptionOpts,
+      emit: emit,
+      api: api,
+      props: props,
+      echartsLib: echartsLib
+    });
+  };
+};
+export var resizeableHandler = function resizeableHandler(_ref13) {
+  var api = _ref13.api,
+    state = _ref13.state;
+  return function (resizeable) {
+    if (resizeable && !state.once.onresize) {
+      api.addResizeListener();
+    }
+    if (!resizeable && state.once.onresize) {
+      api.removeResizeListener();
+    }
+  };
+};
+export var init = function init(_ref14) {
+  var state = _ref14.state,
+    props = _ref14.props,
+    api = _ref14.api,
+    refs = _ref14.refs,
+    echartsLib = _ref14.echartsLib,
+    markRaw = _ref14.markRaw;
+  return function () {
+    if (state.echarts) {
+      return;
+    }
+    var ictThemeName = {};
+    var settings = props.settings;
+    if (settings.line) {
+      ictThemeName.line = settings.line;
+    }
+    var themeName = props.themeName || props.theme || DEFAULT_THEME;
+    state.echarts = markRaw(echartsLib.init(refs.canvas, themeName, _objectSpread(_objectSpread({}, themeName), ictThemeName), props.initOptions));
+    if (props.data) {
+      api.changeHandler();
+    }
+    api.createEventProxy();
+    if (props.resizeable) {
+      api.addResizeListener();
+    }
+  };
+};
+export var addResizeListener = function addResizeListener(_ref15) {
+  var state = _ref15.state,
+    api = _ref15.api;
+  return function () {
+    on(window, 'resize', api.resizeHandler);
+    state.once.onresize = true;
+  };
+};
+export var removeResizeListener = function removeResizeListener(_ref16) {
+  var state = _ref16.state,
+    api = _ref16.api;
+  return function () {
+    off(window, 'resize', api.resizeHandler);
+    state.once.onresize = false;
+  };
+};
+export var addWatchToProps = function addWatchToProps(_ref17) {
+  var props = _ref17.props,
+    watch = _ref17.watch,
+    api = _ref17.api;
+  return function () {
+    Object.keys(props).forEach(function (prop) {
+      if (!~STATIC_PROPS.indexOf(prop)) {
+        var opts = {};
+        if (~['[object Object]', '[object Array]'].indexOf(getType(props[prop]))) {
+          opts.deep = true;
+        } else {
+          opts.immediate = true;
+        }
+        watch(function () {
+          return prop;
+        }, function () {
+          api.changeHandler();
+        }, opts);
+      }
+    });
+  };
+};
+export var createEventProxy = function createEventProxy(_ref18) {
+  var props = _ref18.props,
+    state = _ref18.state;
+  return function () {
+    var keys = Object.keys(props.events || {});
+    keys.length && keys.forEach(function (event) {
+      if (state.registeredEvents.indexOf(event) === -1) {
+        state.registeredEvents.push(event);
+        state.echarts.on(event, function (event) {
+          return function () {
+            if (event in props.events) {
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              props.events[event].apply(null, args);
+            }
+          };
+        }(event));
+      }
+    });
+  };
+};
+export var themeChange = function themeChange(_ref19) {
+  var api = _ref19.api,
+    state = _ref19.state;
+  return function () {
+    api.clean();
+    state.echarts = null;
+    api.init();
+  };
+};
+export var clean = function clean(_ref20) {
+  var props = _ref20.props,
+    state = _ref20.state,
+    api = _ref20.api;
+  return function () {
+    if (props.resizeable) {
+      api.removeResizeListener();
+    }
+    state.echarts.dispose();
+  };
+};
+export var watchOnMounted = function watchOnMounted(_ref21) {
+  var api = _ref21.api,
+    vm = _ref21.vm,
+    watch = _ref21.watch,
+    props = _ref21.props,
+    t = _ref21.t;
+  watch(function () {
+    return props.data;
+  }, function (value) {
+    return value && api.changeHandler();
+  }, {
+    deep: true
+  });
+  watch(function () {
+    return props.settings;
+  }, function (value) {
+    if (value.type && vm.chartLib) {
+      api.chartHandler = vm.chartLib[value.type];
+    }
+    api.changeHandler();
+  }, {
+    deep: true
+  });
+  watch(function () {
+    return [props.width, props.height];
+  }, function () {
+    return api.nextTickResize();
+  });
+  watch(function () {
+    return props.events;
+  }, function () {
+    return api.createEventProxy();
+  }, {
+    deep: true
+  });
+  watch(function () {
+    return [props.theme, props.themeName];
+  }, function () {
+    return api.themeChange();
+  });
+  watch(function () {
+    return props.resizeable;
+  }, function () {
+    return api.resizeableHandler();
+  });
+  watch(function () {
+    return t('ui.chart.emptyText');
+  }, function () {
+    return api.changeHandler();
+  });
+  watch(function () {
+    return props.extend;
+  }, function () {
+    return api.changeHandler();
+  }, {
+    deep: true
+  });
+};
+export var mounted = function mounted(_ref22) {
+  var state = _ref22.state,
+    api = _ref22.api,
+    vm = _ref22.vm,
+    props = _ref22.props,
+    watch = _ref22.watch,
+    t = _ref22.t;
+  return function () {
+    state.echarts = null;
+    state.registeredEvents = [];
+    state.once = {};
+    state.store = {};
+    api.chartHandler = vm.chartHandler;
+    api.resizeHandler = debounce(api.resize, props.resizeDelay);
+    api.changeHandler = debounce(api.dataHandler, props.changeDelay);
+    api.addWatchToProps();
+    api.init();
+    watchOnMounted({
+      watch: watch,
+      props: props,
+      api: api,
+      vm: vm,
+      t: t
+    });
+  };
+};
+export var changeHandler = function changeHandler(_ref23) {
+  var api = _ref23.api,
+    props = _ref23.props;
+  return function () {
+    return debounce(api.dataHandler, props.changeDelay);
+  };
+};
+export var resizeHandler = function resizeHandler(_ref24) {
+  var api = _ref24.api,
+    props = _ref24.props;
+  return function () {
+    return debounce(api.resize, props.resizeDelay);
+  };
+};

package/chart-core/modules/animation.js

@@ -0,0 +1,10 @@
+export default (function (_ref) {
+  var options = _ref.options,
+    animation = _ref.animation;
+  if (!animation) {
+    return;
+  }
+  Object.keys(animation).forEach(function (key) {
+    options[key] = animation[key];
+  });
+});

package/chart-core/modules/extend.js

@@ -0,0 +1,36 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { set, isObject, merge } from '../deps/utils';
+var isArr = Array.isArray;
+export default (function (_ref) {
+  var options = _ref.options,
+    extend = _ref.extend;
+  if (!extend) {
+    return;
+  }
+  Object.keys(extend).forEach(function (key) {
+    var value = extend[key];
+    if (~key.indexOf('.')) {
+      set(options, key, value);
+    } else if (typeof value === 'function') {
+      options[key] = value(options[key]);
+    } else if (isArr(options[key]) && isArr(value)) {
+      var attrList = ['series', 'yAxis', 'xAxis', 'color', 'dataZoom', 'legend', 'toolbox', 'grid', 'graphic', 'timeline', 'visualMap', 'brush'];
+      if (~attrList.indexOf(key)) {
+        options[key] = merge(options[key], value);
+      }
+    } else {
+      if (isArr(options[key]) && isObject(options[key][0])) {
+        options[key].forEach(function (option, i) {
+          return options[key][i] = _objectSpread(_objectSpread({}, option), value);
+        });
+      } else if (isObject(options[key])) {
+        var optionBase = options[key];
+        options[key] = _objectSpread(_objectSpread({}, optionBase), value);
+      } else {
+        options[key] = value;
+      }
+    }
+  });
+});

package/chart-core/modules/mark.js

@@ -0,0 +1,7 @@
+export default (function (seriesItem, marks) {
+  Object.keys(marks).forEach(function (key) {
+    if (marks[key]) {
+      seriesItem[key] = marks[key];
+    }
+  });
+});