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

package/lib/index.js

@@ -0,0 +1,317 @@
+import Core, { isDefined, getFormatted, itemPoint, itemLabel, itemContent } 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
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var getLegend = function getLegend2(args) {
+  var legendVisible = args.legendVisible, legendName = args.legendName;
+  var formatter = function formatter2(name) {
+    return isDefined(legendName[name]) ? legendName[name] : name;
+  };
+  return {
+    show: legendVisible,
+    formatter
+  };
+};
+var getXAxis = function getXAxis2(args) {
+  var xAxisName = args.xAxisName, xAxisType = args.xAxisType;
+  return {
+    name: xAxisName,
+    type: xAxisType
+  };
+};
+var getYAxis = function getYAxis2(args) {
+  var min = args.min, max = args.max, scale = args.scale, yAxisName = args.yAxisName, dataType = args.dataType, metrics = args.metrics, digit = args.digit;
+  function formatter(val) {
+    return getFormatted(val, dataType[metrics[0]], digit);
+  }
+  return {
+    name: yAxisName,
+    type: "value",
+    scale,
+    min,
+    max,
+    axisTick: {
+      show: false
+    },
+    axisLabel: {
+      show: true,
+      formatter
+    }
+  };
+};
+var getDataFromArray = function getDataFromArray2(args) {
+  var dimension = args.dimension, metrics = args.metrics, columns = args.columns, rows = args.rows, symbolSize = args.symbolSize, symbolSizeMax = args.symbolSizeMax;
+  var extraMetrics = columns.filter(function(col) {
+    return col !== dimension && metrics.findIndex(function(m) {
+      return m === col;
+    }) < 0;
+  });
+  var newMetrics = [].concat(metrics, extraMetrics);
+  var result = {};
+  var numbers = {};
+  newMetrics.forEach(function(keyname) {
+    result[keyname] = [];
+    numbers[keyname] = 0;
+  });
+  rows.forEach(function(item) {
+    newMetrics.forEach(function(keyname) {
+      if (numbers[keyname] < item[keyname]) {
+        numbers[keyname] = item[keyname];
+      }
+      result[keyname].push([item[dimension], item[keyname], symbolSize, keyname, keyname]);
+    });
+  });
+  if (!symbolSize) {
+    newMetrics.forEach(function(keyname) {
+      result[keyname].forEach(function(item) {
+        item[2] = Math.ceil(item[1] / numbers[keyname] * symbolSizeMax);
+      });
+    });
+  }
+  return result;
+};
+var getData = function getData2(args) {
+  var dimension = args.dimension, metrics = args.metrics, columns = args.columns, rows = args.rows, symbolSize = args.symbolSize, symbolSizeMax = args.symbolSizeMax;
+  var extraMetrics = columns.filter(function(col) {
+    return col !== dimension && metrics.findIndex(function(m) {
+      return m === col;
+    }) < 0;
+  });
+  var newColumns = [dimension, metrics[0], "size", "name", "group", metrics[1]].concat(extraMetrics);
+  var result = {};
+  var maxNumber = 0;
+  var _loop = function _loop2() {
+    var _Object$entries$_i = _Object$entries[_i], key = _Object$entries$_i[0], value = _Object$entries$_i[1];
+    result[key] = [];
+    value.forEach(function(item, index) {
+      if (maxNumber < item[metrics[1]]) {
+        maxNumber = item[metrics[1]];
+      }
+      var itemArr = [];
+      newColumns.forEach(function(col, colIdx) {
+        if (colIdx === 2) {
+          itemArr.push(symbolSize);
+        } else if (colIdx === 3) {
+          itemArr.push(metrics[0]);
+        } else if (colIdx === 4) {
+          itemArr.push(key);
+        } else {
+          itemArr.push(item[col]);
+        }
+      });
+      result[key][index] = itemArr;
+    });
+  };
+  for (var _i = 0, _Object$entries = Object.entries(rows); _i < _Object$entries.length; _i++) {
+    _loop();
+  }
+  if (!symbolSize) {
+    Object.values(result).forEach(function(group) {
+      group.forEach(function(item) {
+        item[2] = Math.ceil(item[5] / maxNumber * symbolSizeMax);
+      });
+    });
+  }
+  return result;
+};
+var getTooltip = function getTooltip2(args) {
+  var tooltipTrigger = args.tooltipTrigger;
+  var labelMap = args.labelMap, columns = args.columns, dataType = args.dataType, digit = args.digit;
+  var getTipContent = function getTipContent2(item) {
+    var color = item.color, seriesName = item.seriesName, data2 = item.data;
+    var template = [];
+    template.push(itemPoint(color) + " " + seriesName + "<br>");
+    var tipData = [].concat(data2);
+    tipData.splice(2, 3);
+    tipData.forEach(function(d, i) {
+      var name = labelMap[columns[i]] || columns[i];
+      var num = isNaN(d) ? d : getFormatted(d, dataType[columns[i]], digit);
+      template.push("" + itemLabel(name) + itemContent(num) + "<br>");
+    });
+    return template.join("");
+  };
+  var formatter = function formatter2(params) {
+    return Array.isArray(params) ? params.map(function(i) {
+      return getTipContent(i);
+    }).join("") : getTipContent(params);
+  };
+  return {
+    trigger: tooltipTrigger,
+    formatter
+  };
+};
+var scatter = function scatter2(columns, rows, settings, extra) {
+  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], columns[2]] : _settings$metrics, _settings$dataType = settings.dataType, dataType = _settings$dataType === void 0 ? {} : _settings$dataType;
+  var _settings$xAxisType = settings.xAxisType, xAxisType = _settings$xAxisType === void 0 ? "category" : _settings$xAxisType, xAxisName = settings.xAxisName, yAxisName = settings.yAxisName, _settings$digit = settings.digit, digit = _settings$digit === void 0 ? 2 : _settings$digit, _settings$legendName = settings.legendName, legendName = _settings$legendName === void 0 ? {} : _settings$legendName;
+  var _settings$labelMap = settings.labelMap, labelMap = _settings$labelMap === void 0 ? {} : _settings$labelMap, _settings$tooltipTrig = settings.tooltipTrigger, tooltipTrigger = _settings$tooltipTrig === void 0 ? "item" : _settings$tooltipTrig, _settings$axisVisible = settings.axisVisible, axisVisible = _settings$axisVisible === void 0 ? true : _settings$axisVisible, _settings$symbolSizeM = settings.symbolSizeMax, symbolSizeMax = _settings$symbolSizeM === void 0 ? 50 : _settings$symbolSizeM, symbol = settings.symbol;
+  var symbolSize = settings.symbolSize, symbolRotate = settings.symbolRotate, symbolOffset = settings.symbolOffset, cursor = settings.cursor, min = settings.min, max = settings.max, scale = settings.scale, label = settings.label, itemStyle = settings.itemStyle;
+  var tooltipVisible = extra.tooltipVisible, legendVisible = extra.legendVisible; extra.color;
+  var baseObj = {
+    dimension,
+    metrics,
+    columns,
+    rows,
+    symbolSize,
+    symbolSizeMax
+  };
+  var data2 = [];
+  if (Array.isArray(rows)) {
+    data2 = getDataFromArray(baseObj);
+  } else {
+    data2 = getData(baseObj);
+  }
+  var legend = getLegend({
+    legendVisible,
+    legendName
+  });
+  var ichartOption = {
+    data: data2,
+    bubbleSize: [10, symbolSizeMax],
+    emphasis: {
+      label: {
+        show: false
+      }
+    },
+    legend,
+    xAxisType,
+    symbol,
+    symbolRotate,
+    symbolOffset,
+    cursor,
+    label,
+    itemStyle
+  };
+  if (tooltipVisible) {
+    ichartOption.tooltip = getTooltip({
+      tooltipTrigger,
+      labelMap,
+      columns,
+      dataType,
+      digit
+    });
+  } else {
+    ichartOption.tooltip = {
+      show: false
+    };
+  }
+  if (axisVisible) {
+    var xAxis = getXAxis({
+      xAxisName,
+      axisVisible,
+      xAxisType,
+      dimension,
+      rows
+    });
+    var yAxis = getYAxis({
+      min,
+      max,
+      scale,
+      yAxisName,
+      dataType,
+      metrics,
+      digit
+    });
+    Object.assign(ichartOption, {
+      xAxis,
+      yAxis
+    });
+  } else {
+    Object.assign(ichartOption, {
+      xAxis: {
+        show: false
+      },
+      yAxis: {
+        show: false
+      }
+    });
+  }
+  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 + "ChartScatter",
+  mixins: [Core],
+  data: function data() {
+    return {
+      iChartName: "BubbleChart"
+    };
+  },
+  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
+      };
+      var option = scatter(columns, rows, this.settings, extra);
+      this.huiChartOption = _extends({}, option);
+    }
+  }
+};
+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 HuiChartsScatter = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+HuiChartsScatter.install = function(Vue) {
+  Vue.component(HuiChartsScatter.name, HuiChartsScatter);
+};
+
+export { HuiChartsScatter, HuiChartsScatter as default };

package/package.json

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

@@ -0,0 +1,44 @@
+/**
+ * Dimension	维度	string	默认 columns[0]
+ * metrics	指标	array	默认 [columns[0], columns[1]]
+ * dataType	数据类型	object	-
+ * xAxisType	x 轴类型	string	可选值: category, value, time, log
+ * xAxisName	x 轴标题	string	-
+ * yAxisName	y 轴标题	string	-
+ * digit	设置数据类型为 percent 时保留的位数	number	默认为 2
+ * labelMap	设置指标的别名	object	-
+ * legendName	设置图表上方图例的别名	object	-
+ * tooltipTrigger	提示框的触发方式	string	可选值: item, axis
+ * axisVisible	是否显示坐标轴	boolean	-
+ * symbolSizeMax	气泡最大值	number	默认为 50
+ * symbol	标记的图形	string	内容参考文档
+ * symbolSize	标记的大小	number, array, Function	内容参考文档
+ * symbolRotate	标记的旋转角度	number	内容参考文档
+ * symbolOffset	标记相对于原本位置的偏移	array	内容参考文档
+ * cursor	鼠标悬浮时在图形元素上时鼠标的样式	string	内容参考文档
+ * scale	是否是脱离 0 值比例	boolean	-
+ * min	y轴最小值	number	-
+ * max	y轴最大值	number	-
+ * label 图形上的文本标签，series-scatter. label
+ * itemStyle 图形样式。series-scatter. itemStyle
+ */
+export declare const scatter: (columns: any, rows: any, settings: any, extra: any) => {
+    data: never[];
+    bubbleSize: any[];
+    emphasis: {
+        label: {
+            show: boolean;
+        };
+    };
+    legend: {
+        show: any;
+        formatter: (name: any) => any;
+    };
+    xAxisType: any;
+    symbol: any;
+    symbolRotate: any;
+    symbolOffset: any;
+    cursor: any;
+    label: any;
+    itemStyle: any;
+};

package/src/types.d.ts

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