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

package/chart-core/vue.js

@@ -0,0 +1,128 @@
+import { computedCanvasStyle, computedChartColor, dataHandler, nextTickResize, resize, echartsResize, optionsHandler, judgeWidthHandler, resizeableHandler, init, addResizeListener, removeResizeListener, addWatchToProps, createEventProxy, themeChange, clean, mounted, changeHandler, resizeHandler } from './index';
+import { camelToKebab } from './deps/utils';
+export var api = ['state', 'camelToKebab', 'dataHandler', 'nextTickResize', 'resize', 'echartsResize', 'optionsHandler', 'judgeWidthHandler', 'resizeableHandler', 'init', 'addResizeListener', 'removeResizeListener', 'addWatchToProps', 'createEventProxy', 'themeChange', 'clean', 'mounted', 'changeHandler', 'resizeHandler'];
+export var renderless = function renderless(props, _ref, _ref2, _ref3) {
+  var computed = _ref.computed,
+    onBeforeUnmount = _ref.onBeforeUnmount,
+    onMounted = _ref.onMounted,
+    reactive = _ref.reactive,
+    watch = _ref.watch,
+    markRaw = _ref.markRaw;
+  var t = _ref2.t,
+    vm = _ref2.vm,
+    refs = _ref2.refs,
+    emit = _ref2.emit,
+    nextTick = _ref2.nextTick;
+  var echartsLib = _ref3.echartsLib;
+  var api = {};
+  var state = reactive({
+    chartColor: computed(function () {
+      return api.computedChartColor();
+    }),
+    canvasStyle: computed(function () {
+      return api.computedCanvasStyle();
+    })
+  });
+  api = {
+    state: state,
+    camelToKebab: camelToKebab,
+    computedChartColor: computedChartColor(props),
+    computedCanvasStyle: computedCanvasStyle(props)
+  };
+  onMounted(function () {
+    return api.mounted();
+  });
+  onBeforeUnmount(function () {
+    return api.clean();
+  });
+  return Object.assign(api, {
+    resize: resize({
+      props: props,
+      vm: vm,
+      api: api
+    }),
+    echartsResize: echartsResize(state),
+    clean: clean({
+      props: props,
+      state: state,
+      api: api
+    }),
+    themeChange: themeChange({
+      api: api,
+      state: state
+    }),
+    changeHandler: changeHandler({
+      api: api,
+      props: props
+    }),
+    resizeHandler: resizeHandler({
+      api: api,
+      props: props
+    }),
+    nextTickResize: nextTickResize({
+      api: api,
+      nextTick: nextTick
+    }),
+    init: init({
+      state: state,
+      props: props,
+      api: api,
+      refs: refs,
+      echartsLib: echartsLib,
+      markRaw: markRaw
+    }),
+    createEventProxy: createEventProxy({
+      api: api,
+      props: props,
+      state: state
+    }),
+    addResizeListener: addResizeListener({
+      state: state,
+      api: api
+    }),
+    resizeableHandler: resizeableHandler({
+      api: api,
+      state: state
+    }),
+    mounted: mounted({
+      api: api,
+      state: state,
+      vm: vm,
+      props: props,
+      watch: watch,
+      t: t
+    }),
+    removeResizeListener: removeResizeListener({
+      state: state,
+      api: api
+    }),
+    addWatchToProps: addWatchToProps({
+      vm: vm,
+      props: props,
+      watch: watch,
+      api: api
+    }),
+    dataHandler: dataHandler({
+      api: api,
+      props: props,
+      state: state,
+      echartsLib: echartsLib,
+      t: t,
+      vm: vm
+    }),
+    judgeWidthHandler: judgeWidthHandler({
+      props: props,
+      api: api,
+      vm: vm,
+      nextTick: nextTick
+    }),
+    optionsHandler: optionsHandler({
+      props: props,
+      state: state,
+      emit: emit,
+      echartsLib: echartsLib,
+      api: api,
+      vm: vm
+    })
+  });
+};

package/chart-funnel/index.js

@@ -0,0 +1,155 @@
+import { getFormated } from '@opentiny/vue-renderless/chart-core/deps/utils';
+import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-renderless/chart-core/deps/constants';
+import { isNull } from '@opentiny/vue-renderless/common/type';
+var getFunnelTooltip = function getFunnelTooltip(dataType, digit) {
+  function formatter(item) {
+    var tpl = [];
+    tpl.push(itemPoint(item.color));
+    tpl.push("".concat(itemLabel(item.name)).concat(itemContent(getFormated(item.data.realValue, dataType, digit))));
+    return tpl.join('');
+  }
+  return {
+    trigger: 'item',
+    formatter: formatter
+  };
+};
+var getFunnelLegend = function getFunnelLegend(args) {
+  var data = args.data,
+    legendName = args.legendName;
+  function formatter(name) {
+    return isNull(legendName[name]) ? name : legendName[name];
+  }
+  return {
+    data: data,
+    formatter: formatter
+  };
+};
+var getFunnelSeries = function getFunnelSeries(args) {
+  var ascending = args.ascending,
+    dimension = args.dimension,
+    itemStyle = args.itemStyle,
+    label = args.label,
+    labelLine = args.labelLine,
+    metrics = args.metrics,
+    rows = args.rows,
+    sequence = args.sequence,
+    useDefaultOrder = args.useDefaultOrder;
+  var _ref = {},
+    _ref$series = _ref.series,
+    series = _ref$series === void 0 ? {
+      type: 'funnel'
+    } : _ref$series,
+    _ref$falseFunnel = _ref.falseFunnel,
+    falseFunnel = _ref$falseFunnel === void 0 ? false : _ref$falseFunnel;
+  series.minSize = 8;
+  var innerRows = rows.sort(function (a, b) {
+    return sequence.indexOf(a[dimension]) - sequence.indexOf(b[dimension]);
+  });
+  innerRows.some(function (row, index) {
+    return index && row[metrics] > innerRows[index - 1][metrics] && (falseFunnel = true);
+  });
+  var step = 100 / innerRows.length;
+  if (falseFunnel && !useDefaultOrder) {
+    var handler = function handler(row, index) {
+      return {
+        name: row[dimension],
+        value: (index + 1) * step,
+        realValue: row[metrics]
+      };
+    };
+    series.data = innerRows.slice().reverse().map(handler);
+  } else {
+    series.data = innerRows.map(function (row) {
+      return {
+        name: row[dimension],
+        value: row[metrics],
+        realValue: row[metrics]
+      };
+    });
+  }
+  var total = 0;
+  rows.forEach(function (row) {
+    total += row[metrics];
+  });
+  series.label = {
+    position: 'inside',
+    color: '#fff',
+    formatter: function formatter(item) {
+      var value = item.value;
+      return "".concat(Number(value / total).toFixed(2) * 100, "%");
+    }
+  };
+  ascending && (series.sort = 'ascending');
+  label && (series.label = label);
+  labelLine && (series.labelLine = labelLine);
+  itemStyle && (series.itemStyle = itemStyle);
+  return series;
+};
+export var funnel = function funnel(outerColumns, outerRows, settings, extra) {
+  var _ref2 = {},
+    _ref2$columns = _ref2.columns,
+    columns = _ref2$columns === void 0 ? outerColumns.slice() : _ref2$columns,
+    _ref2$rows = _ref2.rows,
+    rows = _ref2$rows === void 0 ? outerRows.slice() : _ref2$rows;
+  var _settings$dataType = settings.dataType,
+    dataType = _settings$dataType === void 0 ? 'normal' : _settings$dataType,
+    _settings$dimension = settings.dimension,
+    dimension = _settings$dimension === void 0 ? columns[0] : _settings$dimension,
+    _settings$sequence = settings.sequence,
+    sequence = _settings$sequence === void 0 ? rows.map(function (row) {
+      return row[dimension];
+    }) : _settings$sequence;
+  var _settings$digit = settings.digit,
+    digit = _settings$digit === void 0 ? 2 : _settings$digit,
+    ascending = settings.ascending,
+    label = settings.label,
+    labelLine = settings.labelLine,
+    _settings$legendName = settings.legendName,
+    legendName = _settings$legendName === void 0 ? {} : _settings$legendName,
+    itemStyle = settings.itemStyle,
+    filterZero = settings.filterZero,
+    useDefaultOrder = settings.useDefaultOrder;
+  var tooltipVisible = extra.tooltipVisible,
+    legendVisible = extra.legendVisible;
+  var metrics;
+  if (settings.metrics) {
+    metrics = settings.metrics;
+  } else {
+    var temp = columns.slice();
+    temp.splice(columns.indexOf(dimension), 1);
+    metrics = temp[0];
+  }
+  var innerRows = rows.sort(function (a, b) {
+    return sequence.indexOf(a[dimension]) - sequence.indexOf(b[dimension]);
+  });
+  filterZero && (innerRows = innerRows.filter(function (row) {
+    return row[metrics];
+  }));
+  var tooltip = tooltipVisible && getFunnelTooltip(dataType, digit);
+  var legend = legendVisible && getFunnelLegend({
+    data: innerRows.map(function (row) {
+      return row[dimension];
+    }),
+    legendName: legendName
+  });
+  var seriesParam = {
+    dimension: dimension,
+    metrics: metrics,
+    rows: innerRows,
+    sequence: sequence,
+    ascending: ascending
+  };
+  Object.assign(seriesParam, {
+    label: label,
+    labelLine: labelLine,
+    itemStyle: itemStyle,
+    filterZero: filterZero,
+    useDefaultOrder: useDefaultOrder
+  });
+  var series = getFunnelSeries(seriesParam);
+  return {
+    tooltip: tooltip,
+    legend: legend,
+    series: series
+  };
+};

package/chart-gauge/index.js

@@ -0,0 +1,153 @@
+import { getFormated, isObject } from '@opentiny/vue-renderless/chart-core/deps/utils';
+import { isNull } from '@opentiny/vue-renderless/common/type';
+import { itemLabel, itemContent } from '@opentiny/vue-renderless/chart-core/deps/constants';
+var getTooltip = function getTooltip(args) {
+  var dataType = args.dataType,
+    digit = args.digit,
+    tooltipFormatter = args.tooltipFormatter;
+  return {
+    formatter: function formatter(options) {
+      if (tooltipFormatter) {
+        return tooltipFormatter.apply(null, arguments);
+      }
+      var tpl = [];
+      var seriesName = options.seriesName,
+        data = options.data;
+      var value = data.value,
+        name = data.name;
+      tpl.push("".concat(itemLabel(seriesName)));
+      tpl.push("".concat(itemContent(getFormated(value, dataType[seriesName], digit)), " ").concat(name));
+      return tpl.join('');
+    }
+  };
+};
+var getPoint = function getPoint() {
+  return {
+    show: false,
+    width: 10,
+    length: 10,
+    icon: 'path://M511.999488 819.413462 72.8374 204.586538 951.1626 204.586538Z',
+    offsetCenter: [0, '-106%'],
+    itemStyle: {
+      color: 'auto'
+    }
+  };
+};
+function getSeries(args) {
+  var dataName = args.dataName,
+    dataType = args.dataType,
+    digit = args.digit,
+    dimension = args.dimension,
+    labelMap = args.labelMap,
+    metrics = args.metrics,
+    rows = args.rows,
+    seriesMap = args.seriesMap;
+  var series = rows.map(function (row) {
+    var label = row[dimension];
+    var seriesItem = seriesMap[label];
+    var formatter2 = function formatter2(value) {
+      return getFormated(value, dataType[label], digit);
+    };
+    var result = {
+      type: 'gauge',
+      name: !isNull(labelMap[label]) ? labelMap[label] : label,
+      data: [{
+        name: dataName[label] || '',
+        value: row[metrics]
+      }],
+      detail: {
+        fontSize: 60,
+        color: '#191919',
+        offsetCenter: [0, 0],
+        valueAnimation: true,
+        formatter: !dataType ? '{value}' : function (value) {
+          var res = getFormated(value, dataType[label], digit);
+          return dataType[label] === 'percent' ? res.split('%')[0] + '{percent|%}' : res;
+        },
+        rich: {
+          percent: {
+            fontSize: 12,
+            color: '#4e4e4e',
+            padding: [0, 0, -20, 0]
+          }
+        }
+      },
+      axisLabel: {
+        formatter: formatter2
+      },
+      itemStyle: {
+        color: '#6D8FF0'
+      },
+      pointer: getPoint(),
+      axisLine: {
+        roundCap: true
+      },
+      progress: {
+        show: true,
+        roundCap: true,
+        width: 8,
+        color: '#6D8FF0'
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        length: 8,
+        distance: 0,
+        lineStyle: {
+          width: 1,
+          color: 'rgba(25,25,25,0.10)'
+        }
+      },
+      title: {
+        offsetCenter: [0, '25%'],
+        color: '#191919',
+        fontSize: 14
+      }
+    };
+    if (seriesItem) {
+      Object.keys(seriesItem).forEach(function (key) {
+        return isObject(result[key]) ? Object.assign(result[key], seriesItem[key]) : result[key] = seriesItem[key];
+      });
+    }
+    return result;
+  });
+  return series;
+}
+export var gauge = function gauge(columns, rows, settings, extra) {
+  var _settings$dataName = settings.dataName,
+    dataName = _settings$dataName === void 0 ? {} : _settings$dataName,
+    _settings$dataType = settings.dataType,
+    dataType = _settings$dataType === void 0 ? {} : _settings$dataType,
+    _settings$digit = settings.digit,
+    digit = _settings$digit === void 0 ? 2 : _settings$digit,
+    _settings$labelMap = settings.labelMap,
+    labelMap = _settings$labelMap === void 0 ? {} : _settings$labelMap;
+  var _settings$dimension = settings.dimension,
+    dimension = _settings$dimension === void 0 ? columns[0] : _settings$dimension,
+    _settings$metrics = settings.metrics,
+    metrics = _settings$metrics === void 0 ? columns[1] : _settings$metrics,
+    _settings$seriesMap = settings.seriesMap,
+    seriesMap = _settings$seriesMap === void 0 ? {} : _settings$seriesMap;
+  var tooltipFormatter = extra.tooltipFormatter,
+    tooltipVisible = extra.tooltipVisible;
+  var tooltip = tooltipVisible && getTooltip({
+    tooltipFormatter: tooltipFormatter,
+    dataType: dataType
+  });
+  var seriesParams = {
+    rows: rows,
+    dimension: dimension,
+    metrics: metrics,
+    digit: digit,
+    dataType: dataType,
+    labelMap: labelMap,
+    seriesMap: seriesMap,
+    dataName: dataName
+  };
+  var series = getSeries(seriesParams);
+  return {
+    tooltip: tooltip,
+    series: series
+  };
+};

package/chart-graph/index.js

@@ -0,0 +1,38 @@
+import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-renderless/chart-core/deps/constants';
+var getTooltip = function getTooltip() {
+  return {
+    trigger: 'item',
+    formatter: function formatter(item) {
+      var tpl = [];
+      var name = item.name,
+        value = item.value,
+        color = item.color,
+        dataType = item.dataType;
+      color && tpl.push(itemPoint(color));
+      tpl.push(itemLabel("".concat(name), !value));
+      if (dataType === 'node') {
+        value && tpl.push("".concat(itemContent(value), "<br />"));
+      }
+      return tpl.join('');
+    }
+  };
+};
+var getGraphSeries = function getGraphSeries() {
+  return [{
+    type: 'graph',
+    label: {
+      textBorderWidth: 1,
+      color: '#fff',
+      textBorderColor: 'inherit'
+    }
+  }];
+};
+export var graph = function graph(columns, rows, settings, extra) {
+  var tooltipVisible = extra.tooltipVisible;
+  var tooltip = tooltipVisible && getTooltip({});
+  var series = getGraphSeries();
+  return {
+    tooltip: tooltip,
+    series: series
+  };
+};