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

package/lib/index.js

@@ -0,0 +1,258 @@
+import Core, { itemPoint, itemLabel, itemContent, htmlHandler, getFormatted } from '@opentinyvue/vue-huicharts-core';
+import { prepareBoxplotData } from 'echarts/extension/dataTool';
+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 getXAxis = function getXAxis2(args) {
+  var columns = args.columns, xAxisName = args.xAxisName, axisVisible = args.axisVisible, xAxisType = args.xAxisType;
+  return [{
+    type: xAxisType,
+    nameLocation: "middle",
+    nameGap: 22,
+    name: xAxisName || "",
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "#eee"
+      }
+    },
+    data: columns,
+    show: axisVisible
+  }];
+};
+var getSeries = function getSeries2(args) {
+  var area = args.area, areaStyle = args.areaStyle, itemStyle = args.itemStyle, label = args.label, lineStyle = args.lineStyle, _args$outliers = args.outliers, outliers = _args$outliers === void 0 ? [] : _args$outliers, rows = args.rows;
+  var _ref = {}, _ref$series = _ref.series, series = _ref$series === void 0 ? [] : _ref$series, _ref$arr = _ref.arr, arr = _ref$arr === void 0 ? ["boxplot", "scatter"] : _ref$arr;
+  arr.forEach(function(item) {
+    if (item === "scatter" && !outliers.length) {
+      return;
+    }
+    var data2 = item === "boxplot" ? rows : outliers;
+    var seriesItem = {
+      name: "",
+      type: item,
+      data: data2
+    };
+    area && (seriesItem.areaStyle = {});
+    label && (seriesItem.label = label);
+    lineStyle && (seriesItem.lineStyle = lineStyle);
+    itemStyle && (seriesItem.itemStyle = itemStyle);
+    areaStyle && (seriesItem.areaStyle = areaStyle);
+    series.push(seriesItem);
+  });
+  return series;
+};
+var factoryFmt = function factoryFmt2(_ref2) {
+  var yAxisType = _ref2.yAxisType, i = _ref2.i, digit = _ref2.digit;
+  return function(val) {
+    return getFormatted(val, yAxisType[i], digit);
+  };
+};
+var getYAxis = function getYAxis2(args) {
+  var axisVisible = args.axisVisible, digit = args.digit, max = args.max, min = args.min, scale = args.scale, yAxisName = args.yAxisName, yAxisType = args.yAxisType;
+  var yAxisBase = {
+    type: "value",
+    axisTick: {
+      show: false
+    },
+    show: axisVisible
+  };
+  var _ref3 = {}, _ref3$yAxis = _ref3.yAxis, yAxis = _ref3$yAxis === void 0 ? [] : _ref3$yAxis, _ref3$len = _ref3.len, len = _ref3$len === void 0 ? yAxisType.length >= 2 ? 2 : 1 : _ref3$len, _ref3$i = _ref3.i, i = _ref3$i === void 0 ? 0 : _ref3$i;
+  for (; i < len; i++) {
+    if (!yAxisType[i]) {
+      yAxis[i] = _extends({}, yAxisBase);
+    } else {
+      var formatter = factoryFmt({
+        yAxisType,
+        i,
+        digit
+      });
+      var yAxisAdv = {
+        axisLabel: {
+          formatter
+        }
+      };
+      yAxis[i] = _extends({}, yAxisBase, yAxisAdv);
+      var name = yAxisName[i] || "";
+      Object.assign(yAxis[i], {
+        name,
+        scale: scale[i] || false,
+        min: min[i] || null,
+        max: max[i] || null
+      });
+    }
+  }
+  return yAxis;
+};
+var getTooltip = function getTooltip2() {
+  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("" + name, !value));
+      if (dataType === "node") {
+        value && tpl.push(itemContent(value) + "<br />");
+      }
+      return tpl.join("");
+    }
+  };
+};
+var boxplot = function boxplot2(columns, rows, settings, extra) {
+  rows = Array.isArray(rows) ? rows : [];
+  columns = Array.isArray(columns) ? columns : [];
+  var _settings$axisSite = settings.axisSite, axisSite = _settings$axisSite === void 0 ? {} : _settings$axisSite, _settings$yAxisType = settings.yAxisType, yAxisType = _settings$yAxisType === void 0 ? ["normal"] : _settings$yAxisType, _settings$xAxisType = settings.xAxisType, xAxisType = _settings$xAxisType === void 0 ? "category" : _settings$xAxisType, _settings$yAxisName = settings.yAxisName, yAxisName = _settings$yAxisName === void 0 ? "" : _settings$yAxisName, _settings$xAxisName = settings.xAxisName, xAxisName = _settings$xAxisName === void 0 ? "" : _settings$xAxisName;
+  var _settings$axisVisible = settings.axisVisible, axisVisible = _settings$axisVisible === void 0 ? true : _settings$axisVisible, area = settings.area, _settings$scale = settings.scale, scale = _settings$scale === void 0 ? [false, false] : _settings$scale, _settings$min = settings.min, min = _settings$min === void 0 ? [null, null] : _settings$min, _settings$max = settings.max, max = _settings$max === void 0 ? [null, null] : _settings$max;
+  var _settings$nullAddZero = settings.nullAddZero, nullAddZero = _settings$nullAddZero === void 0 ? false : _settings$nullAddZero, _settings$digit = settings.digit, digit = _settings$digit === void 0 ? 2 : _settings$digit; settings.legendName; var _settings$labelMap = settings.labelMap, labelMap = _settings$labelMap === void 0 ? {} : _settings$labelMap, label = settings.label, itemStyle = settings.itemStyle;
+  var lineStyle = settings.lineStyle, areaStyle = settings.areaStyle, _settings$tooltipLabe = settings.tooltipLabel, tooltipLabel = _settings$tooltipLabe === void 0 ? ["lower", "Q1", "median", "Q3", "upper"] : _settings$tooltipLabe;
+  extra.legendVisible; var outliers = extra.outliers, tooltipFormatter = extra.tooltipFormatter, tooltipVisible = extra.tooltipVisible;
+  var metrics = columns.slice();
+  if (axisSite.right && axisSite.left) {
+    metrics = axisSite.left.concat(axisSite.right);
+  } else if (!axisSite.right && axisSite.left) {
+    metrics = axisSite.left;
+  } else if (settings.metrics) {
+    metrics = settings.metrics;
+  }
+  var getParams = function getParams2() {
+    return {
+      tooltipFormatter,
+      tooltipLabel: htmlHandler(tooltipLabel),
+      digit
+    };
+  };
+  tooltipVisible && getTooltip(getParams());
+  var xAxis = getXAxis({
+    columns,
+    xAxisName,
+    axisVisible,
+    xAxisType
+  });
+  var yAxisParams = {
+    yAxisName,
+    yAxisType,
+    axisVisible
+  };
+  Object.assign(yAxisParams, {
+    scale,
+    min,
+    max,
+    digit
+  });
+  var yAxis = getYAxis(yAxisParams);
+  var seriesParams = {
+    rows,
+    axisSite,
+    metrics,
+    area,
+    nullAddZero,
+    labelMap,
+    label
+  };
+  Object.assign(seriesParams, {
+    itemStyle,
+    lineStyle,
+    areaStyle,
+    xAxisType,
+    outliers
+  });
+  getSeries(seriesParams);
+  return {
+    xAxis,
+    yAxis,
+    data: extra.data
+  };
+};
+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 + "ChartBoxplot",
+  mixins: [Core],
+  data: function data() {
+    return {
+      iChartName: "BoxplotChart"
+    };
+  },
+  methods: {
+    updateChart: function updateChart(data2) {
+      var _data$columns = data2.columns, columns = _data$columns === void 0 ? [] : _data$columns, _data$rows = data2.rows, rows = _data$rows === void 0 ? [] : _data$rows;
+      var extra = {
+        tooltipVisible: this.tooltipVisible,
+        extend: this.extend,
+        data: prepareBoxplotData && Array.isArray(data2) ? data2 : null
+      };
+      var option = boxplot(columns, rows, this.settings, extra);
+      this.huiChartOption = _extends({}, option);
+    },
+    prepareBoxplotData: function prepareBoxplotData$1(data2) {
+      return prepareBoxplotData(data2);
+    }
+  }
+};
+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 HuiChartsBoxplot = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+HuiChartsBoxplot.install = function(Vue) {
+  Vue.component(HuiChartsBoxplot.name, HuiChartsBoxplot);
+};
+
+export { HuiChartsBoxplot, HuiChartsBoxplot as default };

package/package.json

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

@@ -0,0 +1,18 @@
+export declare const boxplot: (columns: any, rows: any, settings: any, extra: any) => {
+    xAxis: {
+        type: any;
+        nameLocation: string;
+        nameGap: number;
+        name: any;
+        axisTick: {
+            show: boolean;
+            lineStyle: {
+                color: string;
+            };
+        };
+        data: any;
+        show: any;
+    }[];
+    yAxis: never[];
+    data: any;
+};

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

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

package/src/types.d.ts

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