@opentinyvue/vue-huicharts-funnel 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 HuiChartsFunnel from './src/chart-funnel.vue';
+export { HuiChartsFunnel };
+export default HuiChartsFunnel;

package/lib/index.js

@@ -0,0 +1,229 @@
+import Core, { itemPoint, itemLabel, itemContent, getFormatted } from '@opentinyvue/vue-huicharts-core';
+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
+  };
+}
+
+var getMetrics = function getMetrics2(args) {
+  var dimension = args.dimension, columns = args.columns, settings = args.settings;
+  var metrics;
+  if (settings.metrics) {
+    metrics = settings.metrics;
+  } else {
+    var temp = columns.slice();
+    temp.splice(columns.indexOf(dimension), 1);
+    metrics = temp[0];
+  }
+  return metrics;
+};
+var getFunnelLegend = function getFunnelLegend2(args) {
+  var legendVisible = args.legendVisible, data2 = args.data, legendName = args.legendName;
+  if (!legendVisible) {
+    return {
+      show: false
+    };
+  }
+  var show = true;
+  function formatter(name) {
+    if (legendName[name] === null || legendName[name] === void 0 || legendName[name] === "undefined") {
+      return name;
+    }
+    return legendName[name];
+  }
+  return {
+    show,
+    data: data2,
+    formatter
+  };
+};
+var getFunnelTooltip = function getFunnelTooltip2(dataType, digit) {
+  function formatter(item) {
+    var tpl = [];
+    tpl.push(itemPoint(item.color));
+    tpl.push("" + itemLabel(item.name) + itemContent(getFormatted(item.data.realValue, dataType, digit)));
+    return tpl.join("");
+  }
+  return formatter;
+};
+var getFunnelSeries = function getFunnelSeries2(args) {
+  var selfSeries = [];
+  var dimension = args.dimension, metrics = args.metrics, rows = args.rows, sequence = args.sequence, label = args.label, labelLine = args.labelLine, itemStyle = args.itemStyle, useDefaultOrder = args.useDefaultOrder, ascending = args.ascending;
+  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;
+  var total = 0;
+  rows.forEach(function(row) {
+    total += row[metrics];
+  });
+  if (falseFunnel && !useDefaultOrder) {
+    var handler = function handler2(row, index) {
+      return {
+        name: row[dimension],
+        value: (index + 1) * step,
+        realValue: row[metrics]
+      };
+    };
+    series.data = innerRows.slice().reverse().map(handler);
+    series.label = {
+      position: "inside",
+      color: "#fff",
+      formatter: function formatter(item) {
+        var value = item.value;
+        return Number(value / total).toFixed(2) * 100 + "%";
+      }
+    };
+  } else {
+    innerRows.sort(function(a, b) {
+      return b[metrics] - a[metrics];
+    });
+    series.data = innerRows.map(function(row, index) {
+      return {
+        name: row[dimension],
+        value: (innerRows.length - index) * step,
+        realValue: row[metrics]
+      };
+    });
+    series.label = {
+      position: "inside",
+      color: "#fff",
+      formatter: function formatter(item) {
+        var data2 = item.data;
+        return Number(data2.realValue / total).toFixed(2) * 100 + "%";
+      }
+    };
+  }
+  ascending && (series.sort = "ascending");
+  label && (series.label = label);
+  labelLine && (series.labelLine = labelLine);
+  itemStyle && (series.itemStyle = itemStyle);
+  selfSeries.push(series);
+  return selfSeries;
+};
+var getIChartOption = function getIChartOption2(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 = getMetrics({
+    dimension,
+    columns,
+    settings
+  });
+  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 = getFunnelLegend({
+    legendVisible,
+    data: innerRows.map(function(row) {
+      return row[dimension];
+    }),
+    legendName
+  });
+  var seriesParam = {
+    dimension,
+    metrics,
+    rows: innerRows,
+    sequence,
+    label,
+    labelLine,
+    itemStyle,
+    useDefaultOrder,
+    ascending
+  };
+  var series = getFunnelSeries(seriesParam);
+  var ichartOption = {
+    legend,
+    tipHtml: tooltip,
+    series
+  };
+  return ichartOption;
+};
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    ref: "chartRef",
+    staticClass: "hui-chart chart-box",
+    style: {
+      width: _vm.width,
+      height: _vm.height
+    }
+  });
+};
+var staticRenderFns = [];
+var __vue2_script = {
+  name: $prefix + "ChartFunnel",
+  mixins: [Core],
+  data: function data() {
+    return {
+      iChartName: "FunnelChart"
+    };
+  },
+  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
+      };
+      this.huiChartOption = getIChartOption(columns, rows, this.settings, extra);
+    }
+  }
+};
+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 HuiChartsFunnel = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+HuiChartsFunnel.install = function(Vue) {
+  Vue.component(HuiChartsFunnel.name, HuiChartsFunnel);
+};
+
+export { HuiChartsFunnel, HuiChartsFunnel as default };

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@opentinyvue/vue-huicharts-funnel",
+  "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-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-funnel.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/funnel.d.ts

@@ -0,0 +1,13 @@
+export declare const getIChartOption: (outerColumns: any, outerRows: any, settings: any, extra: any) => {
+    legend: {
+        show: boolean;
+        data?: undefined;
+        formatter?: undefined;
+    } | {
+        show: boolean;
+        data: any;
+        formatter: (name: any) => any;
+    };
+    tipHtml: any;
+    series: never[];
+};

package/src/types.d.ts

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