@opentiny/vue-renderless 3.6.0 → 3.6.1-alpha.2

package/chart-candle/index.js

@@ -1,237 +1,109 @@
-import { getFormated } from '@opentiny/vue-renderless/chart-core/deps/utils';
-import { itemPoint, itemLabel, itemContent } from '@opentiny/vue-renderless/chart-core/deps/constants';
-import { isNull } from '@opentiny/vue-renderless/common/type';
-var DEF_MA = [5, 10, 20, 30];
-var DEF_DOWN_COLOR = '#eb171f';
-var DEF_UP_COLOR = '#00a874';
-var DEF_START = 50;
-var DEF_END = 100;
-var SHOW_FALSE = {
-  show: false
-};
-var defaultKName = '';
-var getCandleLegend = function getCandleLegend(args) {
-  var MA = args.MA,
-    labelMap = args.labelMap,
-    legendName = args.legendName,
-    showMA = args.showMA;
-  var data = [defaultKName];
-  showMA && (data = data.concat(MA.map(function (v) {
-    return "MA".concat(v);
-  })));
-  labelMap && (data = data.map(function (v) {
-    return isNull(labelMap[v]) ? v : labelMap[v];
-  }));
+import "../chunk-PKUHTIDK.js";
+import { getFormated } from "@opentiny/vue-renderless/chart-core/deps/utils";
+import { itemPoint, itemLabel, itemContent } from "@opentiny/vue-renderless/chart-core/deps/constants";
+import { isNull } from "@opentiny/vue-renderless/common/type";
+const DEF_MA = [5, 10, 20, 30];
+const DEF_DOWN_COLOR = "#eb171f";
+const DEF_UP_COLOR = "#00a874";
+const DEF_START = 50;
+const DEF_END = 100;
+const SHOW_FALSE = { show: false };
+let defaultKName = "";
+const getCandleLegend = (args) => {
+  const { MA, labelMap, legendName, showMA } = args;
+  let data = [defaultKName];
+  showMA && (data = data.concat(MA.map((v) => `MA${v}`)));
+  labelMap && (data = data.map((v) => isNull(labelMap[v]) ? v : labelMap[v]));
   function formatter(name) {
     return isNull(legendName[name]) ? name : legendName[name];
   }
-  return {
-    data: data,
-    formatter: formatter
-  };
+  return { data, formatter };
 };
-var getCandleTooltip = function getCandleTooltip(args) {
-  var dataType = args.dataType,
-    digit = args.digit,
-    labelMap = args.labelMap,
-    metrics = args.metrics;
+const getCandleTooltip = (args) => {
+  const { dataType, digit, labelMap, metrics } = args;
   function position(pos, params, el, elRect, size) {
-    var result = {
-      top: 10
-    };
-    var side = pos[0] < size.viewSize[0] / 2 ? 'right' : 'left';
+    const result = { top: 10 };
+    const side = pos[0] < size.viewSize[0] / 2 ? "right" : "left";
     result[side] = 60;
     return result;
   }
   function formatter(options) {
-    var tplt = [];
-    tplt.push("".concat(itemContent(options[0].axisValue), "<br>"));
-    options.forEach(function (opt) {
-      var color = opt.color,
-        componentSubType = opt.componentSubType,
-        data = opt.data,
-        seriesName = opt.seriesName;
-      var name = isNull(labelMap[seriesName]) ? seriesName : labelMap[seriesName];
-      tplt.push("".concat(itemPoint(color)).concat(itemContent(name), ": "));
-      if (componentSubType === 'candlestick') {
-        tplt.push('<br>');
-        metrics.slice(0, 4).forEach(function (m, i) {
-          var name = isNull(labelMap[m]) ? m : labelMap[m];
-          var value = getFormated(data[i + 1], dataType, digit);
-          tplt.push("".concat(itemLabel("- ".concat(name))).concat(itemContent(value), "<br>"));
+    const tplt = [];
+    tplt.push(`${itemContent(options[0].axisValue)}<br>`);
+    options.forEach((opt) => {
+      const { color, componentSubType, data, seriesName } = opt;
+      const name = isNull(labelMap[seriesName]) ? seriesName : labelMap[seriesName];
+      tplt.push(`${itemPoint(color)}${itemContent(name)}: `);
+      if (componentSubType === "candlestick") {
+        tplt.push("<br>");
+        metrics.slice(0, 4).forEach((m, i) => {
+          const name2 = isNull(labelMap[m]) ? m : labelMap[m];
+          const value = getFormated(data[i + 1], dataType, digit);
+          tplt.push(`${itemLabel(`- ${name2}`)}${itemContent(value)}<br>`);
         });
-      } else if (componentSubType === 'line') {
-        var value = getFormated(data, dataType, digit);
-        tplt.push("".concat(itemContent(value), "<br>"));
-      } else if (componentSubType === 'bar') {
-        var _value = getFormated(data[1], dataType, digit);
-        tplt.push("".concat(itemContent(_value), "<br>"));
+      } else if (componentSubType === "line") {
+        const value = getFormated(data, dataType, digit);
+        tplt.push(`${itemContent(value)}<br>`);
+      } else if (componentSubType === "bar") {
+        const value = getFormated(data[1], dataType, digit);
+        tplt.push(`${itemContent(value)}<br>`);
       }
     });
-    return tplt.join('');
+    return tplt.join("");
   }
-  return {
-    axisPointer: {
-      type: 'cross'
-    },
-    formatter: formatter,
-    position: position,
-    trigger: 'axis'
-  };
+  return { axisPointer: { type: "cross" }, formatter, position, trigger: "axis" };
 };
-var getCandleVisualMap = function getCandleVisualMap(args) {
-  var MA = args.MA,
-    downColor = args.downColor,
-    showMA = args.showMA,
-    upColor = args.upColor;
-  var seriesIndex = showMA ? 1 + MA.length : 1;
-  var pieces = [{
-    value: 1,
-    color: downColor
-  }, {
-    value: -1,
-    color: upColor
-  }];
-  return {
-    dimension: 2,
-    pieces: pieces,
-    seriesIndex: seriesIndex,
-    show: false
-  };
+const getCandleVisualMap = (args) => {
+  const { MA, downColor, showMA, upColor } = args;
+  let seriesIndex = showMA ? 1 + MA.length : 1;
+  let pieces = [
+    { value: 1, color: downColor },
+    { value: -1, color: upColor }
+  ];
+  return { dimension: 2, pieces, seriesIndex, show: false };
 };
-var getCandleGrid = function getCandleGrid(args) {
-  var showVol = args.showVol;
-  var height = showVol ? '50%' : '65%';
-  return [{
-    containLabel: false,
-    left: '10%',
-    right: '8%',
-    top: '10%',
-    height: height
-  }, {
-    containLabel: false,
-    left: '10%',
-    right: '8%',
-    top: '65%',
-    height: '16%'
-  }];
+const getCandleGrid = (args) => {
+  const { showVol } = args;
+  let height = showVol ? "50%" : "65%";
+  return [
+    { containLabel: false, left: "10%", right: "8%", top: "10%", height },
+    { containLabel: false, left: "10%", right: "8%", top: "65%", height: "16%" }
+  ];
 };
-var getCandleXAxis = function getCandleXAxis(args) {
-  var data = args.dims;
-  var _ref = {},
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'category' : _ref$type,
-    _ref$scale = _ref.scale,
-    scale = _ref$scale === void 0 ? true : _ref$scale,
-    _ref$boundaryGap = _ref.boundaryGap,
-    boundaryGap = _ref$boundaryGap === void 0 ? false : _ref$boundaryGap,
-    _ref$splitLine = _ref.splitLine,
-    splitLine = _ref$splitLine === void 0 ? SHOW_FALSE : _ref$splitLine;
-  var _ref2 = {},
-    _ref2$axisLine = _ref2.axisLine,
-    axisLine = _ref2$axisLine === void 0 ? {
-      onZero: false
-    } : _ref2$axisLine,
-    _ref2$axisTick = _ref2.axisTick,
-    axisTick = _ref2$axisTick === void 0 ? SHOW_FALSE : _ref2$axisTick,
-    _ref2$axisLabel = _ref2.axisLabel,
-    axisLabel = _ref2$axisLabel === void 0 ? SHOW_FALSE : _ref2$axisLabel;
-  var _ref3 = {},
-    _ref3$min = _ref3.min,
-    min = _ref3$min === void 0 ? 'dataMin' : _ref3$min,
-    _ref3$max = _ref3.max,
-    max = _ref3$max === void 0 ? 'dataMax' : _ref3$max,
-    _ref3$gridIndex = _ref3.gridIndex,
-    gridIndex = _ref3$gridIndex === void 0 ? 1 : _ref3$gridIndex;
-  return [{
-    axisLine: axisLine,
-    boundaryGap: boundaryGap,
-    data: data,
-    max: max,
-    min: min,
-    scale: scale,
-    splitLine: splitLine,
-    type: type
-  }, {
-    axisLine: axisLine,
-    boundaryGap: boundaryGap,
-    data: data,
-    max: max,
-    min: min,
-    scale: scale,
-    splitLine: splitLine,
-    type: type,
-    axisLabel: axisLabel,
-    axisTick: axisTick,
-    gridIndex: gridIndex
-  }];
+const getCandleXAxis = (args) => {
+  const { dims: data } = args;
+  const { type = "category", scale = true, boundaryGap = false, splitLine = SHOW_FALSE } = {};
+  const { axisLine = { onZero: false }, axisTick = SHOW_FALSE, axisLabel = SHOW_FALSE } = {};
+  const { min = "dataMin", max = "dataMax", gridIndex = 1 } = {};
+  return [
+    { axisLine, boundaryGap, data, max, min, scale, splitLine, type },
+    { axisLine, boundaryGap, data, max, min, scale, splitLine, type, axisLabel, axisTick, gridIndex }
+  ];
 };
-var getCandleYAxis = function getCandleYAxis(args) {
-  var dataType = args.dataType,
-    digit = args.digit;
-  var _ref4 = {},
-    _ref4$scale = _ref4.scale,
-    scale = _ref4$scale === void 0 ? true : _ref4$scale,
-    _ref4$gridIndex = _ref4.gridIndex,
-    gridIndex = _ref4$gridIndex === void 0 ? 1 : _ref4$gridIndex,
-    _ref4$splitNumber = _ref4.splitNumber,
-    splitNumber = _ref4$splitNumber === void 0 ? 2 : _ref4$splitNumber,
-    _ref4$axisLine = _ref4.axisLine,
-    axisLine = _ref4$axisLine === void 0 ? SHOW_FALSE : _ref4$axisLine;
-  var _ref5 = {},
-    _ref5$axisTick = _ref5.axisTick,
-    axisTick = _ref5$axisTick === void 0 ? SHOW_FALSE : _ref5$axisTick,
-    _ref5$axisLabel = _ref5.axisLabel,
-    axisLabel = _ref5$axisLabel === void 0 ? SHOW_FALSE : _ref5$axisLabel,
-    _ref5$splitLine = _ref5.splitLine,
-    splitLine = _ref5$splitLine === void 0 ? SHOW_FALSE : _ref5$splitLine;
-  var formatter = function formatter(val) {
-    return getFormated(val, dataType, digit);
-  };
-  return [{
-    scale: scale,
-    axisTick: axisTick,
-    axisLabel: {
-      formatter: formatter
-    }
-  }, {
-    scale: scale,
-    axisTick: axisTick,
-    axisLabel: axisLabel,
-    gridIndex: gridIndex,
-    splitNumber: splitNumber,
-    axisLine: axisLine,
-    splitLine: splitLine
-  }];
+const getCandleYAxis = (args) => {
+  const { dataType, digit } = args;
+  const { scale = true, gridIndex = 1, splitNumber = 2, axisLine = SHOW_FALSE } = {};
+  const { axisTick = SHOW_FALSE, axisLabel = SHOW_FALSE, splitLine = SHOW_FALSE } = {};
+  const formatter = (val) => getFormated(val, dataType, digit);
+  return [
+    { scale, axisTick, axisLabel: { formatter } },
+    { scale, axisTick, axisLabel, gridIndex, splitNumber, axisLine, splitLine }
+  ];
 };
-var getCandleDataZoom = function getCandleDataZoom(args) {
-  var start = args.start,
-    end = args.end;
-  return [{
-    type: 'inside',
-    xAxisIndex: [0, 1],
-    start: start,
-    end: end
-  }, {
-    type: 'slider',
-    xAxisIndex: [0, 1],
-    start: start,
-    end: end,
-    show: true,
-    top: '85%'
-  }];
+const getCandleDataZoom = (args) => {
+  const { start, end } = args;
+  return [
+    { type: "inside", xAxisIndex: [0, 1], start, end },
+    { type: "slider", xAxisIndex: [0, 1], start, end, show: true, top: "85%" }
+  ];
 };
-var calculateMA = function calculateMA(dayCount, data, digit) {
-  var result = [];
-  data.forEach(function (d, k) {
+const calculateMA = (dayCount, data, digit) => {
+  let result = [];
+  data.forEach((d, k) => {
     if (k < dayCount) {
-      result.push('-');
+      result.push("-");
     } else {
-      var _ref6 = {},
-        _ref6$acc = _ref6.acc,
-        acc = _ref6$acc === void 0 ? 0 : _ref6$acc,
-        _ref6$i = _ref6.i,
-        i = _ref6$i === void 0 ? 0 : _ref6$i;
+      let { acc = 0, i = 0 } = {};
       for (; i < dayCount; i++) {
         acc += data[k - i][1];
       }
@@ -240,189 +112,72 @@ var calculateMA = function calculateMA(dayCount, data, digit) {
   });
   return result;
 };
-var getCandleSeries = function getCandleSeries(args) {
-  var MA = args.MA,
-    digit = args.digit,
-    downColor = args.downColor,
-    itemStyle = args.itemStyle,
-    labelMap = args.labelMap,
-    showMA = args.showMA,
-    showVol = args.showVol,
-    upColor = args.upColor,
-    values = args.values,
-    volumes = args.volumes;
-  var style = itemStyle || {
-    color: upColor,
-    color0: downColor,
-    borderColor: null,
-    borderColor0: null
-  };
-  var lineStyle = {
-    opacity: 0.5
-  };
-  var name = isNull(labelMap[defaultKName]) ? defaultKName : labelMap[defaultKName];
-  var series = [{
-    name: name,
-    data: values,
-    type: 'candlestick',
-    itemStyle: style
-  }];
+const getCandleSeries = (args) => {
+  const { MA, digit, downColor, itemStyle, labelMap, showMA, showVol, upColor, values, volumes } = args;
+  const style = itemStyle || { color: upColor, color0: downColor, borderColor: null, borderColor0: null };
+  const lineStyle = { opacity: 0.5 };
+  const name = isNull(labelMap[defaultKName]) ? defaultKName : labelMap[defaultKName];
+  const series = [{ name, data: values, type: "candlestick", itemStyle: style }];
   if (showMA) {
-    MA.forEach(function (d) {
-      var key = "MA".concat(d);
-      var serieName = isNull(labelMap[key]) ? key : labelMap[key];
-      var serieData = calculateMA(d, values, digit);
-      series.push({
-        name: serieName,
-        data: serieData,
-        type: 'line',
-        lineStyle: lineStyle,
-        smooth: true
-      });
+    MA.forEach((d) => {
+      const key = `MA${d}`;
+      const serieName = isNull(labelMap[key]) ? key : labelMap[key];
+      const serieData = calculateMA(d, values, digit);
+      series.push({ name: serieName, data: serieData, type: "line", lineStyle, smooth: true });
     });
   }
   if (showVol) {
-    series.push({
-      name: 'Volume',
-      data: volumes,
-      type: 'bar',
-      xAxisIndex: 1,
-      yAxisIndex: 1
-    });
+    series.push({ name: "Volume", data: volumes, type: "bar", xAxisIndex: 1, yAxisIndex: 1 });
   }
   return series;
 };
-export var candle = function candle(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,
-    itemStyle = 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 ? DEF_MA : _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 ? DEF_DOWN_COLOR : _settings$downColor,
-    _settings$upColor = settings.upColor,
-    upColor = _settings$upColor === void 0 ? DEF_UP_COLOR : _settings$upColor;
-  var _settings$start = settings.start,
-    start = _settings$start === void 0 ? DEF_START : _settings$start,
-    _settings$end = settings.end,
-    end = _settings$end === void 0 ? DEF_END : _settings$end,
-    dataType = settings.dataType;
-  var tooltipVisible = extra.tooltipVisible,
-    legendVisible = extra.legendVisible,
-    t = extra.t;
-  var isLiteData = Array.isArray(rows[0]);
-  var _ref7 = {},
-    _ref7$dims = _ref7.dims,
-    dims = _ref7$dims === void 0 ? [] : _ref7$dims,
-    _ref7$values = _ref7.values,
-    values = _ref7$values === void 0 ? [] : _ref7$values,
-    _ref7$volumes = _ref7.volumes,
-    volumes = _ref7$volumes === void 0 ? [] : _ref7$volumes;
-  var candleMetrics = metrics.slice(0, 4);
-  var volumeMetrics = metrics[4];
-  defaultKName = t('ui.chart.kName');
+const candle = (columns, rows, settings, extra) => {
+  const { dimension = columns[0], metrics = columns.slice(1, 6), digit = 2, itemStyle } = settings;
+  const { labelMap = {}, legendName = {}, MA = DEF_MA, showMA = false, showVol = false } = settings;
+  const { showDataZoom = false, downColor = DEF_DOWN_COLOR, upColor = DEF_UP_COLOR } = settings;
+  const { start = DEF_START, end = DEF_END, dataType } = settings;
+  const { tooltipVisible, legendVisible, t } = extra;
+  const isLiteData = Array.isArray(rows[0]);
+  const { dims = [], values = [], volumes = [] } = {};
+  const candleMetrics = metrics.slice(0, 4);
+  const volumeMetrics = metrics[4];
+  defaultKName = t("ui.chart.kName");
   if (isLiteData) {
-    rows.forEach(function (row) {
-      var itemResult = [];
+    rows.forEach((row) => {
+      const itemResult = [];
       dims.push(row[columns.indexOf(dimension)]);
-      candleMetrics.forEach(function (item) {
-        return itemResult.push(row[columns.indexOf(item)]);
-      });
+      candleMetrics.forEach((item) => itemResult.push(row[columns.indexOf(item)]));
       values.push(itemResult);
       volumeMetrics && volumes.push(row[columns.indexOf(volumeMetrics)]);
     });
   } else {
-    rows.forEach(function (row, index) {
-      var itemResult = [];
+    rows.forEach((row, index) => {
+      const itemResult = [];
       dims.push(row[dimension]);
-      candleMetrics.forEach(function (item) {
-        return itemResult.push(row[item]);
-      });
+      candleMetrics.forEach((item) => itemResult.push(row[item]));
       values.push(itemResult);
       if (volumeMetrics) {
-        var status = row[metrics[0]] > row[metrics[1]] ? 1 : -1;
+        const status = row[metrics[0]] > row[metrics[1]] ? 1 : -1;
         volumes.push([index, row[volumeMetrics], status]);
       }
     });
   }
-  var params = {
-    MA: MA,
-    labelMap: labelMap,
-    legendName: legendName,
-    showMA: showMA
-  };
-  var legend = legendVisible && getCandleLegend(params);
-  params = {
-    dataType: dataType,
-    digit: digit,
-    labelMap: labelMap,
-    metrics: metrics
-  };
-  var tooltip = tooltipVisible && getCandleTooltip(params);
-  params = {
-    downColor: downColor,
-    upColor: upColor,
-    MA: MA,
-    showMA: showMA
-  };
-  var visualMap = showVol && getCandleVisualMap(params);
-  var dataZoom = showDataZoom && getCandleDataZoom({
-    start: start,
-    end: end
-  });
-  var grid = getCandleGrid({
-    showVol: showVol
-  });
-  var xAxis = getCandleXAxis({
-    dims: dims
-  });
-  var yAxis = getCandleYAxis({
-    dataType: dataType,
-    digit: digit
-  });
-  params = {
-    values: values,
-    volumes: volumes,
-    upColor: upColor,
-    downColor: downColor,
-    showMA: showMA
-  };
-  Object.assign(params, {
-    MA: MA,
-    showVol: showVol,
-    labelMap: labelMap,
-    digit: digit,
-    itemStyle: itemStyle
-  });
-  var series = getCandleSeries(params);
-  var axisPointer = {
-    link: {
-      xAxisIndex: 'all'
-    }
-  };
-  return {
-    legend: legend,
-    tooltip: tooltip,
-    visualMap: visualMap,
-    grid: grid,
-    xAxis: xAxis,
-    yAxis: yAxis,
-    dataZoom: dataZoom,
-    series: series,
-    axisPointer: axisPointer
-  };
-};
+  let params = { MA, labelMap, legendName, showMA };
+  const legend = legendVisible && getCandleLegend(params);
+  params = { dataType, digit, labelMap, metrics };
+  const tooltip = tooltipVisible && getCandleTooltip(params);
+  params = { downColor, upColor, MA, showMA };
+  const visualMap = showVol && getCandleVisualMap(params);
+  const dataZoom = showDataZoom && getCandleDataZoom({ start, end });
+  const grid = getCandleGrid({ showVol });
+  const xAxis = getCandleXAxis({ dims });
+  const yAxis = getCandleYAxis({ dataType, digit });
+  params = { values, volumes, upColor, downColor, showMA };
+  Object.assign(params, { MA, showVol, labelMap, digit, itemStyle });
+  const series = getCandleSeries(params);
+  const axisPointer = { link: { xAxisIndex: "all" } };
+  return { legend, tooltip, visualMap, grid, xAxis, yAxis, dataZoom, series, axisPointer };
+};
+export {
+  candle
+};