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

package/lib/index.js

@@ -0,0 +1,205 @@
+import Core, { getFormatted, itemContent, itemLabel } 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 getWaterfallTooltip = function getWaterfallTooltip2(dataType, digit) {
+  var formatter = function formatter2(items) {
+    var item = items[0];
+    return itemContent(item.name) + "<br/>\n    " + itemLabel(item.seriesName) + " " + itemContent(getFormatted(item.value, dataType, digit));
+  };
+  return formatter;
+};
+var getWaterfallXAxis = function getWaterfallXAxis2(args) {
+  var axisVisible = args.axisVisible, labelMap = args.labelMap, xAxisName = args.xAxisName;
+  var name = labelMap && labelMap[xAxisName] || xAxisName;
+  return {
+    data: name,
+    show: axisVisible
+  };
+};
+var getWaterfallYAxis = function getWaterfallYAxis2(args) {
+  var axisVisible = args.axisVisible, labelMap = args.labelMap, yAxisName = args.yAxisName;
+  var isNull = function isNull2(x) {
+    return x === null || x === void 0;
+  };
+  var name = !isNull(labelMap[yAxisName]) ? labelMap[yAxisName] : yAxisName;
+  return {
+    name,
+    show: axisVisible
+  };
+};
+var getData = function getData2(args) {
+  var rows = args.rows, totalNum = args.totalNum, remainName = args.remainName, dataSum = args.dataSum, remainStatus = args.remainStatus, dimension = args.dimension, metrics = args.metrics, digit = args.digit;
+  var data2 = [].concat(rows);
+  if (remainStatus === "have-remain") {
+    var _data$push;
+    data2.push((_data$push = {}, _data$push[dimension] = remainName, _data$push[metrics] = parseFloat(totalNum - dataSum).toFixed(digit), _data$push));
+  }
+  return data2;
+};
+var waterfall = function waterfall2(columns, rows, settings, extra) {
+  var tooltipVisible = extra.tooltipVisible, t2 = extra.t;
+  var _settings$axisVisible = settings.axisVisible, axisVisible = _settings$axisVisible === void 0 ? true : _settings$axisVisible, _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;
+  var _settings$remainName = settings.remainName, remainName = _settings$remainName === void 0 ? t2("ui.chart.other") : _settings$remainName, _settings$totalName = settings.totalName, totalName = _settings$totalName === void 0 ? t2("ui.chart.total") : _settings$totalName;
+  var totalNum = settings.totalNum, _settings$xAxisName = settings.xAxisName, xAxisName = _settings$xAxisName === void 0 ? dimension : _settings$xAxisName, _settings$digit = settings.digit, digit = _settings$digit === void 0 ? 2 : _settings$digit, _settings$labelMap = settings.labelMap, labelMap = _settings$labelMap === void 0 ? {} : _settings$labelMap;
+  var metrics = settings.metrics;
+  if (metrics === void 0) {
+    var metricsTemp = columns.slice().filter(function(val) {
+      return val !== dimension;
+    });
+    metrics = metricsTemp[0];
+  }
+  var yAxisName = metrics;
+  var dataSum = parseFloat(rows.reduce(function(pre, cur) {
+    return pre + Number(cur[metrics]);
+  }, 0).toFixed(digit));
+  var remainStatus = totalNum ? totalNum > dataSum ? "have-remain" : "none-remain" : "not-total";
+  var xAxis = getWaterfallXAxis({
+    axisVisible,
+    labelMap,
+    xAxisName
+  });
+  var yAxis = getWaterfallYAxis({
+    axisVisible,
+    labelMap,
+    yAxisName
+  });
+  var seriesParams = {
+    dataType,
+    rows,
+    dimension,
+    metrics
+  };
+  Object.assign(seriesParams, {
+    totalNum,
+    remainStatus,
+    dataSum,
+    digit
+  });
+  var data2 = getData({
+    rows,
+    totalNum,
+    totalName,
+    remainName,
+    dataSum,
+    remainStatus,
+    dimension,
+    metrics
+  });
+  var ichartOption = {
+    type: "water-fall",
+    xAxis,
+    yAxis,
+    data: data2,
+    totalName,
+    totalPosition: "start",
+    label: {
+      show: true,
+      position: "top",
+      formatter: function formatter(item) {
+        return getFormatted(item.value, dataType, digit);
+      }
+    },
+    legend: {
+      show: false
+    }
+  };
+  if (tooltipVisible) {
+    ichartOption.tipHtml = getWaterfallTooltip(dataType, digit);
+  } else {
+    ichartOption.tooltip = {
+      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 + "ChartWaterfall",
+  mixins: [Core],
+  data: function data() {
+    return {
+      iChartName: "BarChart"
+    };
+  },
+  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,
+        legendVisible: this.legendVisible,
+        t
+      };
+      var option = waterfall(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 HuiChartsWaterfall = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+HuiChartsWaterfall.install = function(Vue) {
+  Vue.component(HuiChartsWaterfall.name, HuiChartsWaterfall);
+};
+
+export { HuiChartsWaterfall, HuiChartsWaterfall as default };

package/package.json

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

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

package/src/types.d.ts

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

package/src/waterfall.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Dimension	维度	string	默认 columns 第一项为维度
+ * metrics	指标	string	默认 columns 第二项为指标
+ * dataType	数据类型	string	可选值: KMB, normal, percent
+ * totalNum	总量	number	默认瀑布图总量为所有数据的和
+ * totalName	总量的显示文案	string	默认显示总计
+ * remainName	剩余的显示文案	string	默认显示其他
+ * digit	设置数据类型为 percent 时保留的位数	number	默认为 2
+ * axisVisible 隐藏xy轴坐标和文本
+ * xAxisName 备用x轴名称，优先级低于dimension
+ * labelMap  坐标轴名称映射, 设置别名
+ */
+export declare const waterfall: (columns: any, rows: any, settings: any, extra: any) => {
+    type: string;
+    xAxis: {
+        data: any;
+        show: any;
+    };
+    yAxis: {
+        name: any;
+        show: any;
+    };
+    data: any[];
+    totalName: any;
+    totalPosition: string;
+    label: {
+        show: boolean;
+        position: string;
+        formatter: (item: any) => any;
+    };
+    legend: {
+        show: boolean;
+    };
+};