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

package/lib/index.js

@@ -0,0 +1,217 @@
+import Core, { itemContent, itemPoint, itemLabel, getFormatted } 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
+  };
+}
+
+var isNull = function isNull2(x) {
+  return x === null || x === void 0;
+};
+var defaultKName = "";
+var getLegend = function getLegend2(args) {
+  var legendVisible = args.legendVisible;
+  if (!legendVisible) {
+    return {
+      show: false
+    };
+  }
+  var MA = args.MA, labelMap = args.labelMap, legendName = args.legendName, showMA = args.showMA;
+  var data2 = [defaultKName];
+  showMA && (data2 = data2.concat(MA.map(function(v) {
+    return "MA" + v;
+  })));
+  data2 = data2.map(function(v) {
+    return {
+      name: v
+    };
+  });
+  var formatter = function formatter2(name) {
+    var temp = labelMap[name];
+    return isNull(legendName[name]) ? isNull(temp) ? name : temp : legendName[name];
+  };
+  return {
+    show: true,
+    data: data2,
+    formatter
+  };
+};
+var getTooltip = function getTooltip2(args) {
+  var dataType = args.dataType, digit = args.digit, labelMap = args.labelMap, metrics = args.metrics;
+  var position = function position2(pos, params, dom, rect, size) {
+    var result = {
+      top: 10
+    };
+    var side = pos[0] < size.viewSize[0] / 2 ? "right" : "left";
+    result[side] = 60;
+    return result;
+  };
+  var formatter = function formatter2(options) {
+    var tplt = [];
+    tplt.push(itemContent(options[0].axisValue) + "<br>");
+    options.forEach(function(opt) {
+      var color = opt.color, componentSubType = opt.componentSubType, data2 = opt.data, seriesName = opt.seriesName;
+      var name = isNull(labelMap[seriesName]) ? seriesName : labelMap[seriesName];
+      tplt.push("" + itemPoint(color) + itemLabel(name) + ": ");
+      if (componentSubType === "candlestick") {
+        tplt.push("<br>");
+        metrics.slice(0, 4).forEach(function(m, i) {
+          var name2 = isNull(labelMap[m]) ? m : labelMap[m];
+          var value2 = getFormatted(data2[i + 1], dataType, digit);
+          tplt.push("" + itemLabel("- " + name2) + itemContent(value2) + "<br>");
+        });
+      } else if (componentSubType === "line") {
+        var value = getFormatted(data2, dataType, digit);
+        tplt.push(itemContent(value) + "<br>");
+      } else if (componentSubType === "bar") {
+        var _value = getFormatted(data2[1], dataType, digit);
+        tplt.push(itemContent(_value) + "<br>");
+      }
+    });
+    return tplt.join("");
+  };
+  return {
+    axisPointer: {
+      type: "cross"
+    },
+    formatter,
+    position,
+    trigger: "axis"
+  };
+};
+var getData = function getData2(args) {
+  var rows = args.rows, dimension = args.dimension, metrics = args.metrics;
+  return rows.map(function(item) {
+    var _ref2;
+    if (Array.isArray(item)) {
+      var _ref;
+      var newKeys = metrics.map(function(keyname) {
+        return keyname === "vol" ? "volume" : keyname;
+      });
+      newKeys.unshift(dimension);
+      return _ref = {}, _ref[newKeys[0]] = item[0], _ref[newKeys[1]] = item[1], _ref[newKeys[2]] = item[2], _ref[newKeys[3]] = item[3], _ref[newKeys[4]] = item[4], _ref[newKeys[5]] = item[5], _ref;
+    }
+    return _ref2 = {}, _ref2[dimension] = item[dimension], _ref2.open = item[metrics[0]], _ref2.close = item[metrics[1]], _ref2.lowest = item[metrics[2]], _ref2.highest = item[metrics[3]], _ref2.volume = item[metrics[4]], _ref2;
+  });
+};
+var candle = function candle2(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.slice(1, 6) : _settings$metrics, _settings$digit = settings.digit, digit = _settings$digit === void 0 ? 2 : _settings$digit; settings.itemStyle;
+  var _settings$labelMap = settings.labelMap, labelMap = _settings$labelMap === void 0 ? {} : _settings$labelMap, _settings$legendName = settings.legendName, legendName = _settings$legendName === void 0 ? {} : _settings$legendName, _settings$MA = settings.MA, MA = _settings$MA === void 0 ? [5, 10, 20, 30] : _settings$MA, _settings$showMA = settings.showMA, showMA = _settings$showMA === void 0 ? false : _settings$showMA, _settings$showVol = settings.showVol, showVol = _settings$showVol === void 0 ? false : _settings$showVol;
+  var _settings$showDataZoo = settings.showDataZoom, showDataZoom = _settings$showDataZoo === void 0 ? false : _settings$showDataZoo, _settings$downColor = settings.downColor, downColor = _settings$downColor === void 0 ? "#eb171f" : _settings$downColor, _settings$upColor = settings.upColor, upColor = _settings$upColor === void 0 ? "#00a874" : _settings$upColor;
+  var _settings$start = settings.start, start = _settings$start === void 0 ? 50 : _settings$start, _settings$end = settings.end, end = _settings$end === void 0 ? 100 : _settings$end, dataType = settings.dataType;
+  var tooltipVisible = extra.tooltipVisible, legendVisible = extra.legendVisible, t2 = extra.t;
+  defaultKName = t2("ui.chart.kName");
+  var data2 = getData({
+    dimension,
+    metrics,
+    rows
+  });
+  var legend = getLegend({
+    legendVisible,
+    MA,
+    labelMap,
+    legendName,
+    showMA
+  });
+  var ichartOption = {
+    legend,
+    MA: showMA ? MA : [],
+    volume: showVol,
+    data: data2,
+    upColor,
+    downColor
+  };
+  if (tooltipVisible) {
+    ichartOption.tooltip = getTooltip({
+      dataType,
+      digit,
+      labelMap,
+      metrics
+    });
+  }
+  if (showDataZoom) {
+    ichartOption.dataZoom = {
+      show: true,
+      start,
+      end
+    };
+  }
+  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 + "ChartCandle",
+  mixins: [Core],
+  data: function data() {
+    return {
+      iChartName: "CandlestickChart"
+    };
+  },
+  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
+      };
+      this.huiChartOption = candle(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 HuiChartsCandle = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+HuiChartsCandle.install = function(Vue) {
+  Vue.component(HuiChartsCandle.name, HuiChartsCandle);
+};
+
+export { HuiChartsCandle, HuiChartsCandle as default };

package/package.json

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

@@ -0,0 +1,33 @@
+/**
+ * Dimension	维度	string	默认为 columns[0]
+ * metrics	指标	array	默认为 [columns[1] ~ columns[5]]
+ * digit	设置数据类型为 percent 时保留的位数	number	默认为 2
+ * itemStyle	图形样式	object	内容参考文档
+ * labelMap	设置指标的别名	object	-
+ * legendName	设置图表上方图例的别名	object	-
+ * showMA	是否展示移动平均线指标	boolean	默认 为 false
+ * MA	移动平均线指标周期	array	默认 [5, 10, 20, 30]
+ * showVol	是否展示成交量	boolean	默认为 false
+ * downColor	下降颜色	string	默认为 #ec0000
+ * upColor	上升颜色	string	默认为 #00da3c
+ * showDataZoom	是否展示 dataZoom 控件	boolean	默认为 false
+ * start	dataZoom 控件的起始位置	number	默认为 50，即中间位置
+ * end	dataZoom 控件的结束位置	number	默认为 100，即末尾位置
+ * dataType	数据展示格式	string	可选值: KMB, normal, percent
+ */
+export declare const candle: (columns: any, rows: any, settings: any, extra: any) => {
+    legend: {
+        show: boolean;
+        data?: undefined;
+        formatter?: undefined;
+    } | {
+        show: boolean;
+        data: string[];
+        formatter: (name: any) => any;
+    };
+    MA: any;
+    volume: any;
+    data: any;
+    upColor: any;
+    downColor: any;
+};

package/src/chart-candle.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 TinyCandleProps {
+    /**
+     * @zh 数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准
+     *
+     */
+    dimension?: object;
+    /**
+     * @zh 配置项，各图表 Settings 属性配置请查阅各图表详情页面
+     *
+     */
+    settings?: Object;
+    /**
+     * @zh 设置图表容器的宽度。
+     *
+     */
+    width?: string;
+    /**
+     * @zh 设置图表容器的高度
+     *
+     */
+    height?: string;
+}