@opentinyvue/vue-huicharts-ring 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,3 @@
+import HuiChartsRing from './src/chart-ring.vue';
+export { HuiChartsRing };
+export default HuiChartsRing;

package/lib/index.js

@@ -0,0 +1,378 @@
+import Core, { deepCopy, isDefined, getFormatted, itemPoint, itemLabel, itemContent } from '@opentinyvue/vue-huicharts-core';
+import { t } from '@opentinyvue/vue-locale';
+import { $prefix } from '@opentinyvue/vue-common';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t2 = arguments[e];
+      for (var r in t2) ({}).hasOwnProperty.call(t2, r) && (n[r] = t2[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var PIE_RADIUS = 100;
+var RING_RADIUS = [90, 100];
+var ROSE_RING_RADIUS = [20, 100];
+var PIE_OFFSET = "50%";
+var getTooltip = function getTooltip2(args) {
+  var dataType = args.dataType, digit = args.digit, dimension = args.dimension, innerRows = args.innerRows, limitShowNum = args.limitShowNum, metrics = args.metrics, t2 = args.t;
+  var _ref = {}, _ref$localeOther = _ref.localeOther, localeOther = _ref$localeOther === void 0 ? t2("ui.chart.other") : _ref$localeOther, remainArr = _ref.remainArr, _ref$sum = _ref.sum, sum = _ref$sum === void 0 ? 0 : _ref$sum;
+  var mapHandler = function mapHandler2(row) {
+    sum += row[metrics];
+    return {
+      name: row[dimension],
+      value: row[metrics]
+    };
+  };
+  remainArr = innerRows.map(mapHandler).slice(limitShowNum, innerRows.length);
+  var formatter = function formatter2(item) {
+    var tplt = [itemPoint(item.color)];
+    var percent;
+    if (!limitShowNum || item.name !== localeOther) {
+      tplt.push(itemLabel(item.name));
+      tplt.push(itemContent(getFormatted(item.value, dataType, digit)));
+      tplt.push(itemContent("(" + item.percent + "%)"));
+    } else {
+      tplt.push(localeOther + ":");
+      remainArr.forEach(function(_ref2) {
+        var name = _ref2.name, value = _ref2.value;
+        percent = "(" + getFormatted(value / sum, "percent") + ")";
+        tplt.push("<br>" + itemLabel(name));
+        tplt.push(itemContent(getFormatted(value, dataType, digit)));
+        tplt.push(itemContent(percent));
+      });
+    }
+    return tplt.join("");
+  };
+  return formatter;
+};
+var getLabel = function getLabel2(args) {
+  var label = args.label, labelLine = args.labelLine, percentShow = args.percentShow, dataType = args.dataType, digit = args.digit;
+  var labelObj = {};
+  if (label) {
+    if (isDefined(label.show)) {
+      labelObj.show = label.show;
+    }
+    if (isDefined(label.formatter)) {
+      labelObj.labelHtml = label.formatter;
+    }
+  }
+  if (percentShow) {
+    labelObj.labelHtml = function(params) {
+      var tplt = [];
+      tplt.push(params.name + ":");
+      tplt.push(getFormatted(params.value, dataType, digit));
+      tplt.push("(" + params.percent + "%)");
+      return tplt.join("");
+    };
+  }
+  if (labelLine) {
+    if (isDefined(labelLine.show)) {
+      labelObj.line = labelLine.show;
+    }
+    var color;
+    if (labelLine && labelLine.lineStyle) {
+      color = labelLine.lineStyle.color;
+    }
+    if (isDefined(color)) {
+      labelObj.lineColor = color;
+    }
+    if (isDefined(labelLine.length)) {
+      labelObj.distance = labelLine.length;
+    }
+  }
+  return labelObj;
+};
+var getPosition = function getPosition2(args) {
+  var radius = args.radius, offsetY = args.offsetY, level = args.level;
+  var position = {};
+  if (isDefined(offsetY)) {
+    position.center = [PIE_OFFSET, offsetY];
+  }
+  if (Array.isArray(radius)) {
+    position.radius = radius;
+  } else if (!level || level.length === 0) {
+    position.radius = [0, radius];
+  }
+  return position;
+};
+var getInnerData = function getInnerData2(args) {
+  var dimension = args.dimension, metrics = args.metrics, innerRows = args.innerRows;
+  return innerRows.map(function(row) {
+    return {
+      name: row[dimension],
+      value: row[metrics]
+    };
+  });
+};
+var getDataOrSeries = function getDataOrSeries2(args) {
+  var innerData = args.innerData, isRing = args.isRing, radius = args.radius, level = args.level, limitShowNum = args.limitShowNum, t2 = args.t;
+  var series;
+  var getLimitData = function getLimitData2(data2) {
+    var tempData = data2;
+    if (limitShowNum && limitShowNum < tempData.length) {
+      var remainArr = tempData.slice(limitShowNum, innerData.length);
+      var sum = remainArr.reduce(function(a, c) {
+        return a + c.value;
+      }, 0);
+      tempData.splice(limitShowNum, Infinity, {
+        name: t2("ui.chart.other"),
+        value: sum
+      });
+    }
+    return tempData;
+  };
+  var levelFlag = level && level.length;
+  if (levelFlag) {
+    var levelObj = {};
+    var maxLevel = 0;
+    var levelData = [];
+    level.forEach(function(levelItems, index) {
+      levelItems.forEach(function(item) {
+        if (levelObj[item] === void 0) {
+          levelObj[item] = [index];
+        } else {
+          levelObj[item].push(index);
+        }
+        if (maxLevel < index + 1) {
+          maxLevel = index + 1;
+        }
+      });
+    });
+    levelData = Array.from({
+      length: maxLevel
+    }, function() {
+      return [];
+    });
+    innerData.forEach(function(data2) {
+      Array.isArray(levelObj[data2.name]) && levelObj[data2.name].forEach(function(levelIdx) {
+        levelData[levelIdx].push(_extends({}, data2));
+      });
+    });
+    var rowsCount = levelData.length;
+    var centerWidth = radius / rowsCount;
+    series = levelData.map(function(data2, index) {
+      var itemRadius;
+      if (index === 0) {
+        itemRadius = isRing ? radius : centerWidth;
+      } else {
+        var outerWidth = centerWidth + radius / (2 * rowsCount) * (2 * index - 1);
+        var innerWidth = outerWidth + radius / (2 * rowsCount);
+        itemRadius = [outerWidth, innerWidth];
+      }
+      return {
+        name: "PIE-" + index,
+        type: "pie",
+        radius: itemRadius,
+        data: getLimitData(data2)
+      };
+    });
+  }
+  return levelFlag ? {
+    series
+  } : {
+    data: getLimitData(innerData)
+  };
+};
+var getLegend = function getLegend2(args) {
+  var dimension = args.dimension, innerRows = args.innerRows, legendVisible = args.legendVisible, legendLimit = args.legendLimit, level = args.level, limitShowNum = args.limitShowNum, innerData = args.innerData;
+  if (!legendVisible) {
+    return {
+      show: false
+    };
+  }
+  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]);
+    }
+  } else {
+    legend = innerRows.map(function(row) {
+      return row[dimension];
+    });
+  }
+  var show = false;
+  if (legend.length) {
+    show = legend.length < legendLimit;
+  }
+  if (level && level.length) {
+    return {
+      show,
+      data: innerData
+    };
+  }
+  return {
+    show
+  };
+};
+var pie = function pie2(columns, rows, settings, extra, isRing) {
+  var innerRows = deepCopy(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, emphasis = 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; var _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 ? PIE_OFFSET : _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, hoverAnimation = settings.hoverAnimation;
+  var _settings$radius = settings.radius, radius = _settings$radius === void 0 ? isRing ? roseType ? ROSE_RING_RADIUS : RING_RADIUS : PIE_RADIUS : _settings$radius;
+  var legendVisible = extra.legendVisible, tooltipVisible = extra.tooltipVisible, t2 = extra.t;
+  limitShowNum && innerRows.sort(function(a, b) {
+    return b[metrics] - a[metrics];
+  });
+  var innerData = getInnerData({
+    dimension,
+    metrics,
+    innerRows
+  });
+  var type = isRing ? "circle" : "pie";
+  var position = getPosition({
+    radius,
+    offsetY,
+    level
+  });
+  var ichartLabel = getLabel({
+    label,
+    labelLine,
+    percentShow,
+    dataType,
+    digit
+  });
+  var ichartLegend = getLegend({
+    legendVisible,
+    dimension,
+    innerRows,
+    legendLimit,
+    level,
+    limitShowNum
+  });
+  var dataOrSeries = getDataOrSeries({
+    innerData,
+    isRing,
+    radius,
+    level,
+    limitShowNum,
+    t: t2
+  });
+  var ichartOption = _extends({
+    legend: ichartLegend,
+    type,
+    position,
+    label: ichartLabel,
+    itemStyle,
+    emphasis: emphasis || {
+      scale: hoverAnimation === void 0 ? true : hoverAnimation
+    },
+    roseType,
+    selectedMode
+  }, dataOrSeries);
+  if (tooltipVisible) {
+    var tipHtml = getTooltip({
+      dataType,
+      innerRows,
+      limitShowNum,
+      digit,
+      metrics,
+      dimension,
+      t: t2
+    });
+    ichartOption.tipHtml = tipHtml;
+  } else {
+    ichartOption.tooltip = {
+      show: false
+    };
+  }
+  var ichartExtend = {};
+  if (label) {
+    ichartExtend.label = label;
+  }
+  if (labelLine) {
+    ichartExtend.labelLine = labelLine;
+  }
+  ichartOption.extend = _extends({}, ichartExtend);
+  return ichartOption;
+};
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    staticClass: "hui-chart chart-box"
+  }, [_c("div", {
+    ref: "chartRef",
+    style: {
+      width: _vm.width,
+      height: _vm.height
+    }
+  }), _vm._t("default")], 2);
+};
+var staticRenderFns = [];
+var __vue2_script = {
+  name: $prefix + "ChartRing",
+  mixins: [Core],
+  data: function data() {
+    return {
+      iChartName: "PieChart"
+    };
+  },
+  methods: {
+    updateChart: function updateChart() {
+      var _this$data = this.data, _this$data$columns = _this$data.columns, columns = _this$data$columns === void 0 ? [] : _this$data$columns, _this$data$rows = _this$data.rows, rows = _this$data$rows === void 0 ? [] : _this$data$rows;
+      var extra = {
+        legendVisible: this.legendVisible,
+        tooltipVisible: this.tooltipVisible,
+        t
+      };
+      this.huiChartOption = pie(columns, rows, this.settings, extra, true);
+    }
+  }
+};
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var HuiChartsRing = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+HuiChartsRing.install = function(Vue) {
+  Vue.component(HuiChartsRing.name, HuiChartsRing);
+};
+
+export { HuiChartsRing, HuiChartsRing as default };

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@opentinyvue/vue-huicharts-ring",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-huicharts-core": "~2.21.0",
+    "@opentinyvue/vue-locale": "~2.21.0",
+    "@opentinyvue/vue-common": "~2.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/chart-ring.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue/types/vue").ExtendedVue<import("vue").default, {
+    iChartName: string;
+}, {
+    updateChart(): void;
+}, any, Record<never, any>>;
+export default _default;

package/src/ring.d.ts

@@ -0,0 +1,55 @@
+/** settings:
+ * dimension	string		维度,默认 columns 第一项为维度
+ * metrics	string		指标,默认 columns 第二项为指标
+ * dataType	string		数据类型,可选值: KMB, normal, percent
+ * legendLimit	number		legend 显示数量限制,legend 数量过多会导致饼图样式错误，限制 legend 最大值并且当超过此值时，隐藏 legend 可以解决这个问题
+ * selectedMode	string		选中模式,可选值：single, multiple，默认为 false
+ * hoverAnimation hover 	是否开启,在扇区上的放大动画效果	boolean	默认值为 true // aui有tiny没有
+ * radius	number / string		饼图半径,支持数值和百分比
+ * offsetY	number / string		纵向偏移量,支持数值和百分比
+ * digit	number		设置数据类型为 percent 时保留的位数,默认为 2
+ * roseType	string		显示为南丁格尔玫瑰图,默认不展示为南丁格尔玫瑰图，可设置为'radius', 'area'
+ * label	object		饼图图形上的文本标签,内容参考文档
+ * labelLine	object		标签的视觉引导线样式,内容参考文档
+ * itemStyle	object		图形样式,内容参考文档
+ * level	array		多圆饼图时设置,level 的值接受二维数组，例如：[['a', 'b'], ['c', 'd']], 表示的含义是内层展示的是维度中的'a', 'b'的指标加在一起组成的饼图，外层为'c', 'd'的指标加在一起组成的环图
+ * limitShowNum	number		设置超过此数字时使用‘其他’代替,此时数据会按照由大到小顺序显示
+ *
+ * emphasis 高亮的扇区和标签样式。
+ * percentShow label引导线边的文本显示百分比数据
+ */
+export declare const pie: (columns: any, rows: any, settings: any, extra: any, isRing: any) => {
+    series: any;
+    data?: undefined;
+    legend: {
+        show: boolean;
+        data?: undefined;
+    } | {
+        show: boolean;
+        data: any;
+    };
+    type: string;
+    position: {};
+    label: {};
+    itemStyle: any;
+    emphasis: any;
+    roseType: any;
+    selectedMode: any;
+} | {
+    data: any;
+    series?: undefined;
+    legend: {
+        show: boolean;
+        data?: undefined;
+    } | {
+        show: boolean;
+        data: any;
+    };
+    type: string;
+    position: {};
+    label: {};
+    itemStyle: any;
+    emphasis: any;
+    roseType: any;
+    selectedMode: any;
+};

package/src/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ *
+ * @title Props
+ */
+export interface TinyRingProps {
+    /**
+     * @zh 数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准
+     *
+     */
+    dimension?: object;
+    /**
+     * @zh 配置项，各图表 Settings 属性配置请查阅各图表详情页面
+     *
+     */
+    settings?: Object;
+    /**
+     * @zh 设置图表容器的宽度。
+     *
+     */
+    width?: string;
+    /**
+     * @zh 设置图表容器的高度
+     *
+     */
+    height?: string;
+}