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

package/chart-map/index.js

@@ -0,0 +1,261 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _typeof from "@babel/runtime/helpers/typeof";
+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 { getFormated, getMapJSON, getLegend as getLegendMap } 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 getTooltip = function getTooltip(_ref) {
+  var dataType = _ref.dataType,
+    digit = _ref.digit,
+    dataStore = _ref.dataStore,
+    metrics = _ref.metrics,
+    color = _ref.color,
+    labelMap = _ref.labelMap;
+  function formatter(item) {
+    var tplt = [];
+    if (!item.name) {
+      return '';
+    }
+    tplt.push("".concat(itemLabel(item.name), "<br>"));
+    metrics.forEach(function (label, index) {
+      var title = isNull(labelMap[label]) ? label : labelMap[label];
+      tplt.push("".concat(itemPoint(color[index])).concat(itemLabel(title)));
+      if (dataStore[item.name]) {
+        tplt.push(itemContent(getFormated(dataStore[item.name][label], dataType[label], digit)));
+      } else {
+        tplt.push(itemContent('-'));
+      }
+      tplt.push('<br>');
+    });
+    return tplt.join('');
+  }
+  return {
+    formatter: formatter
+  };
+};
+var setGeoLabel = function setGeoLabel(value, target, label) {
+  if (_typeof(value) === 'object') {
+    target[label] = value;
+  } else if (value) {
+    target[label] = {
+      show: true
+    };
+  }
+};
+var getSeries = function getSeries(args) {
+  var position = args.position,
+    selectData = args.selectData,
+    dimension = args.dimension,
+    metrics = args.metrics,
+    rows = args.rows,
+    label = args.label,
+    selectedMode = args.selectedMode,
+    roam = args.roam,
+    center = args.center,
+    aspectScale = args.aspectScale,
+    zoom = args.zoom;
+  var boundingCoords = args.boundingCoords,
+    labelMap = args.labelMap,
+    scaleLimit = args.scaleLimit,
+    mapGrid = args.mapGrid,
+    _args$itemStyle = args.itemStyle,
+    itemStyle = _args$itemStyle === void 0 ? {
+      areaColor: 'rgba(25,25,25,0.05)'
+    } : _args$itemStyle;
+  var _ref2 = {},
+    _ref2$result = _ref2.result,
+    result = _ref2$result === void 0 ? [] : _ref2$result,
+    _ref2$mapBase = _ref2.mapBase,
+    mapBase = _ref2$mapBase === void 0 ? {
+      type: 'map',
+      map: position
+    } : _ref2$mapBase;
+  var _ref3 = {},
+    _ref3$emphasis = _ref3.emphasis,
+    emphasis = _ref3$emphasis === void 0 ? {
+      itemStyle: {
+        areaColor: 'rgba(25,25,25,0.2)'
+      },
+      label: {
+        color: '#191919'
+      }
+    } : _ref3$emphasis;
+  metrics.forEach(function (itemName) {
+    var name = !isNull(labelMap[itemName]) ? labelMap[itemName] : itemName;
+    var data = [];
+    var itemResult = _objectSpread({
+      name: name,
+      data: data,
+      selectedMode: selectedMode,
+      roam: roam,
+      center: center,
+      aspectScale: aspectScale,
+      boundingCoords: boundingCoords,
+      zoom: zoom,
+      scaleLimit: scaleLimit
+    }, mapBase);
+    if (mapGrid) {
+      Object.keys(mapGrid).forEach(function (key) {
+        return itemResult[key] = mapGrid[key];
+      });
+    }
+    setGeoLabel(itemStyle, itemResult, 'itemStyle');
+    setGeoLabel(label, itemResult, 'label');
+    rows.forEach(function (row) {
+      return itemResult.data.push({
+        name: row[dimension],
+        value: row[itemName],
+        selected: selectData
+      });
+    });
+    itemResult.emphasis = emphasis;
+    itemResult.label = _objectSpread({
+      color: '#191919'
+    }, itemResult.label);
+    result.push(itemResult);
+  });
+  return result;
+};
+var registerMap = function registerMap(args, mapOrigin, echarts) {
+  var _once = args._once,
+    registerSign = args.registerSign,
+    beforeRegisterMap = args.beforeRegisterMap,
+    beforeRegisterMapOnce = args.beforeRegisterMapOnce;
+  var registerSignOnce = args.registerSignOnce,
+    position = args.position,
+    specialAreas = args.specialAreas;
+  if (!_once[registerSign] && beforeRegisterMap) {
+    mapOrigin = beforeRegisterMap(mapOrigin);
+  }
+  if (!_once[registerSign] && beforeRegisterMapOnce && !_once[registerSignOnce]) {
+    _once[registerSignOnce] = true;
+    mapOrigin = beforeRegisterMapOnce(mapOrigin);
+  }
+  if (!_once[registerSign]) {
+    _once[registerSign] = true;
+    echarts.registerMap(position, mapOrigin, specialAreas);
+  }
+};
+export var map = function map(columns, rows, settings, extra) {
+  var _settings$position = settings.position,
+    position = _settings$position === void 0 ? '' : _settings$position,
+    _settings$selectData = settings.selectData,
+    selectData = _settings$selectData === void 0 ? false : _settings$selectData,
+    selectedMode = settings.selectedMode,
+    _settings$label = settings.label,
+    label = _settings$label === void 0 ? true : _settings$label,
+    _settings$dataType = settings.dataType,
+    dataType = _settings$dataType === void 0 ? {} : _settings$dataType,
+    _settings$digit = settings.digit,
+    digit = _settings$digit === void 0 ? 2 : _settings$digit;
+  var _settings$dimension = settings.dimension,
+    dimension = _settings$dimension === void 0 ? columns[0] : _settings$dimension,
+    roam = settings.roam,
+    center = settings.center,
+    aspectScale = settings.aspectScale,
+    boundingCoords = settings.boundingCoords,
+    zoom = settings.zoom;
+  var scaleLimit = settings.scaleLimit,
+    _settings$legendName = settings.legendName,
+    legendName = _settings$legendName === void 0 ? {} : _settings$legendName,
+    _settings$labelMap = settings.labelMap,
+    labelMap = _settings$labelMap === void 0 ? {} : _settings$labelMap,
+    mapGrid = settings.mapGrid,
+    itemStyle = settings.itemStyle,
+    positionJsonLink = settings.positionJsonLink,
+    emphasis = settings.emphasis;
+  var beforeRegisterMap = settings.beforeRegisterMap,
+    beforeRegisterMapOnce = settings.beforeRegisterMapOnce,
+    _settings$mapURLProfi = settings.mapURLProfix,
+    mapURLProfix = _settings$mapURLProfi === void 0 ? extra.baseUrl || '' : _settings$mapURLProfi,
+    _settings$specialArea = settings.specialAreas,
+    specialAreas = _settings$specialArea === void 0 ? {} : _settings$specialArea;
+  var mapOrigin = settings.mapOrigin;
+  var metrics = columns.slice(0);
+  if (!settings.metrics) {
+    metrics.splice(columns.indexOf(dimension), 1);
+  } else {
+    metrics = settings.metrics;
+  }
+  var tooltipVisible = extra.tooltipVisible,
+    legendVisible = extra.legendVisible,
+    color = extra.color,
+    _once = extra._once,
+    echarts = extra.echartsLib;
+  var dataStore = {};
+  rows.forEach(function (row) {
+    return dataStore[row[dimension]] = row;
+  });
+  var tooltip = tooltipVisible && getTooltip({
+    dataType: dataType,
+    digit: digit,
+    dataStore: dataStore,
+    metrics: metrics,
+    color: color,
+    labelMap: labelMap
+  });
+  var legend = legendVisible && getLegendMap({
+    metrics: metrics,
+    legendName: legendName,
+    labelMap: labelMap
+  });
+  var seriesParams = {
+    position: position,
+    selectData: selectData,
+    label: label,
+    itemStyle: itemStyle,
+    dimension: dimension,
+    metrics: metrics,
+    rows: rows,
+    selectedMode: selectedMode,
+    roam: roam
+  };
+  Object.assign(seriesParams, {
+    center: center,
+    aspectScale: aspectScale,
+    boundingCoords: boundingCoords,
+    zoom: zoom,
+    labelMap: labelMap,
+    scaleLimit: scaleLimit,
+    mapGrid: mapGrid,
+    emphasis: emphasis
+  });
+  var series = getSeries(seriesParams);
+  var registerSign = "MAP_REGISTER_".concat(position);
+  var registerSignOnce = "ONCE_MAP_REGISTER_".concat(position);
+  var registerOptions = {
+    _once: _once,
+    beforeRegisterMap: beforeRegisterMap,
+    beforeRegisterMapOnce: beforeRegisterMapOnce,
+    position: position
+  };
+  Object.assign(registerOptions, {
+    specialAreas: specialAreas,
+    registerSign: registerSign,
+    registerSignOnce: registerSignOnce
+  });
+  if (mapOrigin) {
+    registerMap(registerOptions, mapOrigin, echarts);
+    return {
+      series: series,
+      tooltip: tooltip,
+      legend: legend
+    };
+  } else {
+    var param = {
+      position: position,
+      positionJsonLink: positionJsonLink,
+      beforeRegisterMapOnce: beforeRegisterMapOnce,
+      mapURLProfix: mapURLProfix
+    };
+    return getMapJSON(param).then(function (json) {
+      registerMap(registerOptions, json, echarts);
+      return {
+        series: series,
+        tooltip: tooltip,
+        legend: legend
+      };
+    });
+  }
+};

package/chart-pie/index.js

@@ -0,0 +1,327 @@
+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 { getFormated, setArrayValue, cloneDeep } 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 pieRadius = 100;
+var ringRadius = [90, 100];
+var roseRingRadius = [20, 100];
+var pieOffsetY = '50%';
+var modifySeries = function modifySeries(_ref) {
+  var series = _ref.series,
+    limitShowNum = _ref.limitShowNum,
+    t = _ref.t;
+  var firstSerie = series[0];
+  if (limitShowNum && limitShowNum < firstSerie.data.length) {
+    var firstSerieData = firstSerie.data;
+    var remainArr = firstSerieData.slice(limitShowNum, firstSerieData.length);
+    var sum = 0;
+    remainArr.forEach(function (item) {
+      return sum += item.value;
+    });
+    firstSerie.data = firstSerieData.slice(0, limitShowNum);
+    firstSerie.data.push({
+      name: t('ui.chart.other'),
+      value: sum
+    });
+  }
+};
+var getPieSeries = function getPieSeries(args) {
+  var dataType = args.dataType,
+    digit = args.digit,
+    dimension = args.dimension,
+    emphasis = args.emphasis,
+    innerRows = args.innerRows,
+    isRing = args.isRing,
+    itemStyle = args.itemStyle,
+    label = args.label,
+    labelLine = args.labelLine;
+  var level = args.level,
+    limitShowNum = args.limitShowNum,
+    metrics = args.metrics,
+    offsetY = args.offsetY,
+    percentShow = args.percentShow,
+    radius = args.radius,
+    roseType = args.roseType,
+    selectedMode = args.selectedMode,
+    t = args.t;
+  var _ref2 = {},
+    _ref2$series = _ref2.series,
+    series = _ref2$series === void 0 ? [] : _ref2$series,
+    _ref2$levelTemp = _ref2.levelTemp,
+    levelTemp = _ref2$levelTemp === void 0 ? {} : _ref2$levelTemp,
+    _ref2$rowsTemp = _ref2.rowsTemp,
+    rowsTemp = _ref2$rowsTemp === void 0 ? [] : _ref2$rowsTemp;
+  if (!level) {
+    rowsTemp.push(innerRows);
+  } else {
+    level.forEach(function (levelItems, index) {
+      return levelItems.forEach(function (item) {
+        return setArrayValue(levelTemp, item, index);
+      });
+    });
+    innerRows.forEach(function (row) {
+      var itemLevel = levelTemp[row[dimension]];
+      if (itemLevel && itemLevel.length) {
+        itemLevel.forEach(function (levelItem) {
+          return setArrayValue(rowsTemp, levelItem, row);
+        });
+      }
+    });
+  }
+  var serieBase = {
+    type: 'pie',
+    selectedMode: selectedMode,
+    emphasis: emphasis,
+    roseType: roseType,
+    center: ['50%', offsetY]
+  };
+  var rowsCount = rowsTemp.length;
+  var centerWidth = radius / rowsCount;
+  rowsTemp.forEach(function (dataRows, index) {
+    var serie = _objectSpread({
+      data: []
+    }, serieBase);
+    if (!index) {
+      serie.radius = isRing ? radius : centerWidth;
+    } else {
+      var outerWidth = centerWidth + radius / (2 * rowsCount) * (2 * index - 1);
+      var innerWidth = outerWidth + radius / (2 * rowsCount);
+      serie.radius = [outerWidth, innerWidth];
+    }
+    rowsCount > 1 && index === 0 && (serie.label = {
+      position: 'inner'
+    });
+    serie.label = _objectSpread({
+      color: '#191919'
+    }, label);
+    serie.labelLine = _objectSpread({
+      smooth: true,
+      lineStyle: {
+        color: '#bbb'
+      }
+    }, labelLine);
+    serie.itemStyle = _objectSpread({
+      borderWidth: 2,
+      borderColor: '#fff'
+    }, itemStyle);
+    if (percentShow) {
+      var position = rowsCount > 1 && index === 0 ? 'inner' : 'outside';
+      var formatter = function formatter(item) {
+        var tplt = [];
+        tplt.push("".concat(item.name, ":"));
+        tplt.push(getFormated(item.value, dataType, digit));
+        tplt.push("(".concat(item.percent, "%)"));
+        return tplt.join('');
+      };
+      serie.label = {
+        normal: {
+          show: true,
+          position: position,
+          formatter: formatter
+        }
+      };
+    }
+    serie.data = dataRows.map(function (row) {
+      return {
+        name: row[dimension],
+        value: row[metrics]
+      };
+    });
+    series.push(serie);
+  });
+  modifySeries({
+    series: series,
+    limitShowNum: limitShowNum,
+    t: t
+  });
+  return series;
+};
+var getPieLegend = function getPieLegend(args) {
+  var dimension = args.dimension,
+    innerRows = args.innerRows,
+    legendLimit = args.legendLimit,
+    legendName = args.legendName,
+    level = args.level,
+    limitShowNum = args.limitShowNum,
+    t = args.t;
+  var _ref3 = {},
+    _ref3$legend = _ref3.legend,
+    legend = _ref3$legend === void 0 ? [] : _ref3$legend,
+    _ref3$levelTemp = _ref3.levelTemp,
+    levelTemp = _ref3$levelTemp === void 0 ? [] : _ref3$levelTemp;
+  if (level) {
+    level.forEach(function (levelItem) {
+      return levelItem.forEach(function (item) {
+        return levelTemp.push(item);
+      });
+    });
+    legend = levelTemp;
+  } else if (limitShowNum && limitShowNum < innerRows.length) {
+    for (var i = limitShowNum - 1; i >= 0; i--) {
+      legend.unshift(innerRows[i][dimension]);
+    }
+    legend.push(t('ui.chart.other'));
+  } else {
+    legend = innerRows.map(function (row) {
+      return row[dimension];
+    });
+  }
+  if (legend.length) {
+    var show = legend.length < legendLimit;
+    var formatter = function formatter(name) {
+      return !isNull(legendName[name]) ? legendName[name] : name;
+    };
+    return {
+      data: legend,
+      show: show,
+      formatter: formatter
+    };
+  } else {
+    return false;
+  }
+};
+var getPieTooltip = function getPieTooltip(args) {
+  var dataType = args.dataType,
+    digit = args.digit,
+    dimension = args.dimension,
+    innerRows = args.innerRows,
+    limitShowNum = args.limitShowNum,
+    metrics = args.metrics,
+    t = args.t;
+  var _ref4 = {},
+    _ref4$localeOther = _ref4.localeOther,
+    localeOther = _ref4$localeOther === void 0 ? t('ui.chart.other') : _ref4$localeOther,
+    remainArr = _ref4.remainArr,
+    _ref4$sum = _ref4.sum,
+    sum = _ref4$sum === void 0 ? 0 : _ref4$sum;
+  var mapHandler = function mapHandler(row) {
+    sum += row[metrics];
+    return {
+      name: row[dimension],
+      value: row[metrics]
+    };
+  };
+  remainArr = innerRows.map(mapHandler).slice(limitShowNum, innerRows.length);
+  var formatter = function formatter(item) {
+    var tplt = [itemPoint(item.color)];
+    var percent;
+    if (!limitShowNum || item.name !== localeOther) {
+      tplt.push(itemLabel(item.name));
+      tplt.push(itemContent(getFormated(item.value, dataType, digit)));
+      tplt.push(itemContent("(".concat(item.percent, "%)")));
+    } else {
+      tplt.push(localeOther + ':');
+      remainArr.forEach(function (_ref5) {
+        var name = _ref5.name,
+          value = _ref5.value;
+        percent = getFormated(value / sum, 'percent');
+        tplt.push("<br>".concat(itemLabel(name)));
+        tplt.push(itemContent(getFormated(value, dataType, digit)));
+        tplt.push(itemContent(percent));
+      });
+    }
+    return tplt.join('');
+  };
+  return {
+    formatter: formatter
+  };
+};
+export var pie = function pie(columns, rows, settings, extra, isRing) {
+  var innerRows = cloneDeep(rows);
+  var _settings$dataType = settings.dataType,
+    dataType = _settings$dataType === void 0 ? 'normal' : _settings$dataType,
+    _settings$digit = settings.digit,
+    digit = _settings$digit === void 0 ? 2 : _settings$digit,
+    _settings$dimension = settings.dimension,
+    dimension = _settings$dimension === void 0 ? columns[0] : _settings$dimension,
+    _settings$emphasis = settings.emphasis,
+    emphasis = _settings$emphasis === void 0 ? {
+      scale: true
+    } : _settings$emphasis;
+  var itemStyle = settings.itemStyle,
+    _settings$label = settings.label,
+    label = _settings$label === void 0 ? false : _settings$label,
+    labelLine = settings.labelLine,
+    _settings$legendLimit = settings.legendLimit,
+    legendLimit = _settings$legendLimit === void 0 ? 30 : _settings$legendLimit,
+    _settings$legendName = settings.legendName,
+    legendName = _settings$legendName === void 0 ? {} : _settings$legendName,
+    _settings$level = settings.level,
+    level = _settings$level === void 0 ? false : _settings$level;
+  var _settings$limitShowNu = settings.limitShowNum,
+    limitShowNum = _settings$limitShowNu === void 0 ? 0 : _settings$limitShowNu,
+    _settings$metrics = settings.metrics,
+    metrics = _settings$metrics === void 0 ? columns[1] : _settings$metrics,
+    _settings$offsetY = settings.offsetY,
+    offsetY = _settings$offsetY === void 0 ? pieOffsetY : _settings$offsetY,
+    percentShow = settings.percentShow;
+  var _settings$roseType = settings.roseType,
+    roseType = _settings$roseType === void 0 ? false : _settings$roseType,
+    _settings$selectedMod = settings.selectedMode,
+    selectedMode = _settings$selectedMod === void 0 ? false : _settings$selectedMod;
+  var _settings$radius = settings.radius,
+    radius = _settings$radius === void 0 ? isRing ? roseType ? roseRingRadius : ringRadius : pieRadius : _settings$radius;
+  var legendVisible = extra.legendVisible,
+    t = extra.t,
+    tooltipVisible = extra.tooltipVisible;
+  limitShowNum && innerRows.sort(function (a, b) {
+    return b[metrics] - a[metrics];
+  });
+  var seriesParams = {
+    dataType: dataType,
+    digit: digit,
+    dimension: dimension,
+    emphasis: emphasis,
+    innerRows: innerRows,
+    isRing: isRing,
+    itemStyle: itemStyle
+  };
+  Object.assign(seriesParams, {
+    label: label,
+    labelLine: labelLine,
+    legendName: legendName,
+    level: level,
+    limitShowNum: limitShowNum,
+    metrics: metrics,
+    offsetY: offsetY
+  });
+  Object.assign(seriesParams, {
+    percentShow: percentShow,
+    radius: radius,
+    roseType: roseType,
+    selectedMode: selectedMode,
+    t: t
+  });
+  var series = getPieSeries(seriesParams);
+  var legendParams = {
+    dimension: dimension,
+    innerRows: innerRows,
+    legendLimit: legendLimit,
+    legendName: legendName,
+    level: level,
+    limitShowNum: limitShowNum,
+    t: t
+  };
+  var legend = legendVisible && getPieLegend(legendParams);
+  var pieTooltip = getPieTooltip({
+    dataType: dataType,
+    innerRows: innerRows,
+    limitShowNum: limitShowNum,
+    digit: digit,
+    metrics: metrics,
+    dimension: dimension,
+    t: t
+  });
+  var tooltip = tooltipVisible && pieTooltip;
+  var options = {
+    legend: legend,
+    series: series,
+    tooltip: tooltip
+  };
+  return options;
+};
+export var ring = function ring(columns, rows, settings, extra) {
+  return pie(columns, rows, settings, extra, true);
+};