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

package/lib/index.js

@@ -0,0 +1,417 @@
+import Core, { cloneDeep, getRows, getTooltip, getFormatted, getStackMap, isNull, get, set } 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 VALUE_AXIS_OPACITY = 0.5;
+var getBarDimAxis = function getBarDimAxis2(args) {
+  var innerRows = args.innerRows, dimAxisName = args.dimAxisName, dimension = args.dimension, axisVisible = args.axisVisible, dimAxisType = args.dimAxisType, dims = args.dims;
+  return dimension.map(function(item) {
+    return {
+      type: "category",
+      name: dimAxisName,
+      nameLocation: "middle",
+      nameGap: 22,
+      data: dimAxisType === "value" ? getValueAxisData(dims) : innerRows.map(function(row) {
+        return row[item];
+      }),
+      axisLabel: {
+        formatter: function formatter(value) {
+          return String(value);
+        }
+      },
+      show: axisVisible
+    };
+  });
+};
+var getBarMeaAxis = function getBarMeaAxis2(args) {
+  var axisVisible = args.axisVisible, digit = args.digit, max = args.max, _args$meaAxisName = args.meaAxisName, meaAxisName = _args$meaAxisName === void 0 ? [] : _args$meaAxisName, meaAxisType = args.meaAxisType, min = args.min, scale = args.scale;
+  var meaAxisBase = {
+    type: "value",
+    axisTick: {
+      show: false
+    },
+    show: axisVisible
+  };
+  var _ref = {}, _ref$meaAxis = _ref.meaAxis, meaAxis = _ref$meaAxis === void 0 ? [] : _ref$meaAxis, _ref$i = _ref.i, i = _ref$i === void 0 ? 0 : _ref$i, formatter = _ref.formatter;
+  for (; i < 2; i++) {
+    if (meaAxisType[i]) {
+      formatter = factoryFmt({
+        meaAxisType,
+        i,
+        digit
+      });
+      meaAxis[i] = _extends({}, meaAxisBase, {
+        axisLabel: {
+          formatter
+        }
+      });
+    } else {
+      meaAxis[i] = _extends({}, meaAxisBase);
+    }
+    Object.assign(meaAxis[i], {
+      max: max[i] || null,
+      min: min[i] || null,
+      name: meaAxisName[i] || "",
+      scale: scale[i] || false
+    });
+  }
+  return meaAxis;
+};
+var factoryFmt = function factoryFmt2(_ref2) {
+  var meaAxisType = _ref2.meaAxisType, i = _ref2.i, digit = _ref2.digit;
+  return function(val) {
+    return getFormatted(val, meaAxisType[i], digit);
+  };
+};
+var getLegend = function getLegend2(args) {
+  var legendName = args.legendName;
+  var legendBase = {
+    show: true
+  };
+  var formatter = function formatter2(name) {
+    return !legendName[name] ? name : legendName[name];
+  };
+  return _extends({}, legendBase, {
+    formatter
+  });
+};
+var getDims = function getDims2(rows, dimension) {
+  return rows.map(function(row) {
+    return row[dimension[0]];
+  });
+};
+var getValueAxisData = function getValueAxisData2(dims) {
+  var max = Math.max.apply(Math, dims);
+  var min = Math.min.apply(Math, dims);
+  var _ref3 = {}, _ref3$result = _ref3.result, result = _ref3$result === void 0 ? [] : _ref3$result, _ref3$i = _ref3.i, i = _ref3$i === void 0 ? min : _ref3$i;
+  for (; i <= max; i++) {
+    result.push(i);
+  }
+  return result;
+};
+var getBarSeries = function getBarSeries2(args) {
+  var axisSite = args.axisSite, barGap = args.barGap, dimAxisType = args.dimAxisType; args.dims; var innerRows = args.innerRows, isHistogram = args.isHistogram, itemStyle = args.itemStyle;
+  if (!itemStyle.barWidth) {
+    itemStyle.barWidth = "auto";
+  }
+  args.label; var labelMap = args.labelMap, metrics = args.metrics, opacity = args.opacity, _args$showLine = args.showLine, showLine = _args$showLine === void 0 ? [] : _args$showLine, stack = args.stack;
+  var _ref4 = {}, secondAxis = _ref4.secondAxis, secondDimAxisIndex = _ref4.secondDimAxisIndex, _ref4$series = _ref4.series, series = _ref4$series === void 0 ? [] : _ref4$series, _ref4$seriesTemp = _ref4.seriesTemp, seriesTemp = _ref4$seriesTemp === void 0 ? {} : _ref4$seriesTemp, stackMap = _ref4.stackMap, _ref4$stackNum = _ref4.stackNum, stackNum = _ref4$stackNum === void 0 ? 0 : _ref4$stackNum;
+  secondAxis = (isHistogram ? axisSite == null ? void 0 : axisSite.right : axisSite == null ? void 0 : axisSite.top) || [];
+  secondDimAxisIndex = isHistogram ? "yAxisIndex" : "xAxisIndex";
+  stackMap = stack && getStackMap(stack);
+  metrics.forEach(function(item) {
+    return seriesTemp[item] = [];
+  });
+  innerRows.forEach(function(row) {
+    return metrics.forEach(function(item) {
+      return seriesTemp[item].push(row[item]);
+    });
+  });
+  series = Object.keys(seriesTemp).map(function(item) {
+    var _seriesItem;
+    var name = !isNull(labelMap[item]) ? labelMap[item] : item;
+    var type = ~showLine.indexOf(item) ? "line" : "bar";
+    var axisIndex = ~secondAxis.indexOf(item) ? "1" : "0";
+    var seriesItem = (_seriesItem = {
+      name,
+      type
+    }, _seriesItem[secondDimAxisIndex] = axisIndex, _seriesItem);
+    var defaultItemStyle = {};
+    stack && stackMap[item] && (seriesItem.stack = stackMap[item]);
+    if (Object.keys(stack).length) {
+      if (stackNum === Object.keys(stackMap).length - 1 || isNull(seriesItem.stack)) {
+        seriesItem.itemStyle = Object.assign(defaultItemStyle, seriesItem.itemStyle);
+      }
+      if (!isNull(seriesItem.stack)) {
+        stackNum++;
+      }
+      seriesItem.itemStyle = _extends({
+        borderWidth: 2,
+        borderColor: "transparent"
+      }, seriesItem.itemStyle);
+    }
+    itemStyle && (seriesItem.itemStyle = itemStyle);
+    var itemOpacity = opacity || get(seriesItem, "itemStyle.opacity");
+    dimAxisType === "value" && Object.assign(seriesItem, {
+      barGap,
+      barCategoryGap: "1%"
+    });
+    dimAxisType === "value" && isNull(itemOpacity) && (itemOpacity = VALUE_AXIS_OPACITY);
+    !isNull(itemOpacity) && set(seriesItem, "itemStyle.opacity", itemOpacity);
+    return seriesItem;
+  });
+  return series.length ? series : false;
+};
+var getDataValue = function getDataValue2(data2, dimension, metrics, innerRows, dims) {
+  var dimensionData = dimension[0];
+  var dataTemp = {};
+  data2.forEach(function(item, index2) {
+    dataTemp[item[dimensionData]] = item;
+  });
+  var dataItemTemp = {};
+  metrics.forEach(function(item, index2) {
+    dataItemTemp[item] = null;
+  });
+  var max = Math.max.apply(Math, dims);
+  var min = Math.min.apply(Math, dims);
+  var _ref5 = {}, _ref5$result = _ref5.result, result = _ref5$result === void 0 ? [] : _ref5$result, _ref5$i = _ref5.i, i = _ref5$i === void 0 ? min : _ref5$i, index = _ref5.index;
+  for (; i <= max; i++) {
+    var _extends2;
+    index = dims.indexOf(i);
+    result.push(~index ? dataTemp[i] : _extends((_extends2 = {}, _extends2[dimensionData] = i, _extends2), dataItemTemp));
+  }
+  return result;
+};
+var histogram = function histogram2(columns, rows, settings, extra, isHistogram) {
+  if (isHistogram === void 0) {
+    isHistogram = true;
+  }
+  var innerRows = cloneDeep(rows);
+  var _settings$axisSite = settings.axisSite, axisSite = _settings$axisSite === void 0 ? {} : _settings$axisSite, _settings$dimension = settings.dimension, dimension = _settings$dimension === void 0 ? [columns[0]] : _settings$dimension; settings.axisLabel; var _settings$axisVisible = settings.axisVisible, axisVisible = _settings$axisVisible === void 0 ? true : _settings$axisVisible;
+  var _settings$digit = settings.digit, digit = _settings$digit === void 0 ? 2 : _settings$digit, _settings$dataOrder = settings.dataOrder, dataOrder = _settings$dataOrder === void 0 ? false : _settings$dataOrder, _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, _settings$stack = settings.stack, stack = _settings$stack === void 0 ? {} : _settings$stack;
+  var tooltipVisible = extra.tooltipVisible, legendVisible = extra.legendVisible;
+  var _settings$labelMap = settings.labelMap, labelMap = _settings$labelMap === void 0 ? {} : _settings$labelMap, _settings$legendName = settings.legendName, legendName = _settings$legendName === void 0 ? {} : _settings$legendName, label = settings.label, _settings$itemStyle = settings.itemStyle, itemStyle = _settings$itemStyle === void 0 ? {} : _settings$itemStyle, showLine = settings.showLine, _settings$barGap = settings.barGap, barGap = _settings$barGap === void 0 ? "-100%" : _settings$barGap, opacity = settings.opacity;
+  var _ref6 = {}, _ref6$metrics = _ref6.metrics, metrics = _ref6$metrics === void 0 ? columns.slice() : _ref6$metrics, meaAxisType = _ref6.meaAxisType, dimAxisType = _ref6.dimAxisType, meaAxisName = _ref6.meaAxisName, _ref6$dimAxisName = _ref6.dimAxisName, dimAxisName = _ref6$dimAxisName === void 0 ? true : _ref6$dimAxisName, dims = _ref6.dims;
+  if (dataOrder) {
+    var label2 = dataOrder.label, order = dataOrder.order;
+    if (label2 && order) {
+      innerRows.sort(function(a, b) {
+        return order === "desc" ? a[label2] - b[label2] : b[label2] - a[label2];
+      });
+    }
+  }
+  var xAxis = {};
+  var yAxis = {};
+  dims = getDims(innerRows, dimension);
+  if (isHistogram) {
+    if (axisSite.right && axisSite.left) {
+      metrics = axisSite.left.concat(axisSite.right);
+    } else if (settings.metrics) {
+      metrics = settings.metrics;
+    } else if (axisSite.left && !axisSite.right) {
+      metrics = axisSite.left;
+    } else {
+      metrics.splice(columns.indexOf(dimension[0]), 1);
+    }
+    dimAxisType = settings.xAxisType || "category";
+    meaAxisType = settings.yAxisType || ["normal", "normal"];
+    dimAxisName = settings.xAxisName || "";
+    meaAxisName = settings.yAxisName || [];
+    xAxis = getBarDimAxis({
+      innerRows,
+      dimAxisName,
+      dimension,
+      axisVisible,
+      dimAxisType,
+      dims
+    });
+    yAxis = getBarMeaAxis({
+      meaAxisName,
+      meaAxisType,
+      axisVisible,
+      digit,
+      scale,
+      min,
+      max
+    });
+  } else {
+    if (axisSite.bottom && axisSite.top) {
+      metrics = axisSite.top.concat(axisSite.bottom);
+    } else if (!axisSite.right && axisSite.bottom) {
+      metrics = axisSite.bottom;
+    } else if (settings.metrics) {
+      metrics = settings.metrics;
+    } else {
+      metrics.splice(columns.indexOf(dimension[0]), 1);
+    }
+    dimAxisType = settings.yAxisType || "category";
+    meaAxisType = settings.xAxisType || ["normal", "normal"];
+    dimAxisName = settings.yAxisName || "";
+    xAxis = getBarDimAxis({
+      innerRows,
+      dimAxisName,
+      dimension,
+      axisVisible,
+      dimAxisType,
+      dims
+    });
+    yAxis = getBarMeaAxis({
+      axisVisible,
+      meaAxisType,
+      meaAxisName,
+      scale,
+      digit,
+      max,
+      min
+    });
+  }
+  if (opacity) {
+    var itemStyleBase = {
+      opacity
+    };
+    Object.assign(itemStyle, itemStyleBase);
+  }
+  var tempRows = innerRows.map(function(row) {
+    var temp = _extends({}, row);
+    for (var _i = 0, _Object$entries = Object.entries(labelMap); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _Object$entries[_i], key = _Object$entries$_i[0], value = _Object$entries$_i[1];
+      if (Object.prototype.hasOwnProperty.call(row, key)) {
+        temp[value] = temp[key];
+      }
+    }
+    return temp;
+  });
+  var data2 = getRows({
+    columns,
+    metrics,
+    labelMap,
+    rows: tempRows,
+    dimension
+  });
+  if (dimAxisType === "value") {
+    data2 = getDataValue(data2, dimension, metrics, innerRows, dims);
+  }
+  var lineDataName = showLine ? [].concat(showLine) : [];
+  var legend = legendVisible ? getLegend({
+    legendName,
+    metrics,
+    labelMap
+  }) : {
+    show: false
+  };
+  var tooltip = tooltipVisible ? getTooltip({
+    axisSite,
+    yAxisType: meaAxisType
+  }) : {
+    show: false
+  };
+  var tipHtml = tooltip.formatter;
+  var args = {
+    innerRows,
+    metrics,
+    stack,
+    axisSite,
+    isHistogram,
+    labelMap,
+    itemStyle,
+    label
+  };
+  Object.assign(args, {
+    showLine,
+    dimAxisType,
+    dimension,
+    barGap,
+    opacity,
+    dims
+  });
+  var options = {
+    data: data2,
+    itemStyle,
+    tipHtml,
+    lineDataName,
+    legend,
+    tooltip,
+    yAxis,
+    xAxis,
+    label,
+    stack,
+    series: getBarSeries(args)
+  };
+  if (typeof options.stack === "object" && options.stack !== null && Object.keys(options.stack).length > 0) {
+    options.type = "stack";
+  }
+  return options;
+};
+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 + "ChartBar",
+  mixins: [Core],
+  data: function data() {
+    return {
+      iChartName: "BarChart"
+    };
+  },
+  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 = {
+        tooltipVisible: this.tooltipVisible,
+        legendVisible: this.legendVisible,
+        extend: this.extend
+      };
+      var option = histogram(columns, rows, this.settings, extra, false);
+      this.huiChartOption = _extends({
+        smooth: true
+      }, option, {
+        direction: "horizontal"
+      });
+    }
+  }
+};
+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 HuiChartsBar = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+HuiChartsBar.install = function(Vue) {
+  Vue.component(HuiChartsBar.name, HuiChartsBar);
+};
+
+export { HuiChartsBar, HuiChartsBar as default };

package/package.json

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

@@ -0,0 +1,23 @@
+export declare const histogram: (columns: any, rows: any, settings: any, extra: any, isHistogram?: boolean) => {
+    data: never[];
+    itemStyle: any;
+    tipHtml: any;
+    lineDataName: any[];
+    legend: {
+        formatter: (name: any) => any;
+        show: boolean;
+    } | {
+        show: boolean;
+    };
+    tooltip: {
+        trigger: string;
+        formatter: (items: any) => string;
+    } | {
+        show: boolean;
+    };
+    yAxis: {};
+    xAxis: {};
+    label: any;
+    stack: any;
+    series: boolean | never[];
+};