@alicloud/cloud-charts/es/Wcandlestick/index.js


'use strict';

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import Base from '../common/Base';
import themes from '../themes/index';
import { propertyAssign, propertyMap } from '../common/common';
import rectXAxis from '../common/rectXAxis';
import rectYAxis from '../common/rectYAxis';
import rectTooltip from '../common/rectTooltip';
import rectLegend from '../common/rectLegend';
import guide from '../common/guide';
import geomSize from '../common/geomSize';
import geomStyle from '../common/geomStyle';
import errorWrap from '../common/errorWrap';
import { activeRegionWithTheme } from '../common/interaction';

function computeDataType(data) {
  if (Array.isArray(data)) {
    data.forEach(function (d) {
      if (Array.isArray(d.y)) {
        var _d$y = d.y,
            start = _d$y[0],
            end = _d$y[1];
        d.trend = start <= end ? 'up' : 'down';
      }
    });
  }

  return data;
}

export var Candlestick = /*#__PURE__*/function (_Base) {
  _inheritsLoose(Candlestick, _Base);

  function Candlestick() {
    var _this;

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _Base.call.apply(_Base, [this].concat(args)) || this;
    _this.chartName = 'G2Wcandlestick';
    _this.legendField = 'trend';
    return _this;
  }

  var _proto = Candlestick.prototype;

  // convertData: false,
  _proto.getDefaultConfig = function getDefaultConfig() {
    return {
      colors: [themes['widgets-color-red'], themes['widgets-color-green']],
      // padding: ['auto', 'auto', 'auto', 'auto'],
      xAxis: {
        type: 'time',
        mask: 'YYYY-MM-DD',
        labelFormatter: null,
        // 可以强制覆盖，手动设置label
        categories: null,
        autoRotate: false
      },
      yAxis: {
        labelFormatter: null,
        // 可以强制覆盖，手动设置label
        max: null,
        min: null
      },
      legend: {
        // align: 'left',
        nameFormatter: null // 可以强制覆盖，手动设置label

      },
      tooltip: {
        showTitle: true,
        titleFormatter: null,
        nameFormatter: null,
        valueFormatter: null
      },
      grid: false,
      // zoom: false,
      size: null // label: false,

    };
  };

  _proto.init = function init(chart, config, data) {
    // 设置数据度量
    var defs = {
      x: propertyAssign(propertyMap.axis, {
        type: 'time'
      }, config.xAxis),
      y: propertyAssign(propertyMap.axis, {
        type: 'linear',
        tickCount: 5,
        nice: true
      }, config.yAxis),
      type: {
        type: 'cat'
      },
      trend: {
        type: 'cat'
      }
    };
    chart.scale(defs);
    chart.data(computeDataType(data)); // 设置单个Y轴

    rectYAxis(this, chart, config); // 设置X轴

    rectXAxis(this, chart, config);
    chart.legend('x', false);
    chart.legend('y', false); // 设置图例

    rectLegend(this, chart, config, {// useHtml: false,
    }, true, 'trend'); // tooltip

    var _ref = config.tooltip || {},
        showTitle = _ref.showTitle,
        showColon = _ref.showColon;

    rectTooltip(this, chart, config, {}, null, {
      showTitle: true,
      showCrosshairs: false,
      showMarkers: false,
      itemTpl: "<div>\n            " + (showTitle ? '<div style="margin:10px 0;"><span style="background-color:{color};width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:8px;"></span>{group}</div>' : '') + "\n            <div style=\"margin:8px 0;\"><span class=\"g2-tooltip-item-name\">{labelStart}</span>" + (showColon ? ':' : '') + "<span class=\"g2-tooltip-item-value\">{start}</span></div><div style=\"margin:8px 0;\"><span class=\"g2-tooltip-item-name\">{labelEnd}</span>" + (showColon ? ':' : '') + "<span class=\"g2-tooltip-item-value\">{end}</span></div><div style=\"margin:8px 0;\"><span class=\"g2-tooltip-item-name\">{labelMax}</span>" + (showColon ? ':' : '') + "<span class=\"g2-tooltip-item-value\">{max}</span></div><div style=\"margin:8px 0;\"><span class=\"g2-tooltip-item-name\">{labelMin}</span>" + (showColon ? ':' : '') + "<span class=\"g2-tooltip-item-value\">{min}</span></div>\n          </div>"
    });
    activeRegionWithTheme(chart); // 绘制辅助线，辅助背景区域

    guide(chart, config);
    drawCandle(chart, config, config.colors);
  };

  _proto.changeData = function changeData(chart, config, data) {
    chart.changeData(computeDataType(data));
  };

  return Candlestick;
}(Base);
var Wcandlestick = errorWrap(Candlestick);
export default Wcandlestick;

function drawCandle(chart, config, colors) {
  // 分组
  var geom = chart.schema().position(['x', 'y']).shape('candle').color('trend', function (trend) {
    if (Array.isArray(colors)) {
      var colorUp = colors[0],
          colorDown = colors[1];
      return trend === 'up' ? colorUp : colorDown;
    }

    if (typeof colors === 'function') {
      return colors(trend);
    }

    return colors;
  }) // .tooltip('type*start*end*max*min', (group, start, end, max, min) => {
  .tooltip('y*type', function (y, group) {
    var _ref2 = config.tooltip || {},
        _ref2$labelAlias = _ref2.labelAlias,
        labelAlias = _ref2$labelAlias === void 0 ? {} : _ref2$labelAlias;

    var labelStart = labelAlias.start,
        labelEnd = labelAlias.end,
        labelMax = labelAlias.max,
        labelMin = labelAlias.min;
    var start = y[0],
        end = y[1],
        max = y[2],
        min = y[3];
    return {
      group: group,
      start: start,
      end: end,
      max: max,
      min: min,
      labelStart: labelStart || 'start',
      labelEnd: labelEnd || 'end',
      labelMax: labelMax || 'max',
      labelMin: labelMin || 'min'
    };
  }).state({
    active: {
      style: function style(ele) {
        var _ele$model;

        return {
          stroke: ele === null || ele === void 0 ? void 0 : (_ele$model = ele.model) === null || _ele$model === void 0 ? void 0 : _ele$model.color
        };
      }
    },
    selected: {
      style: function style(ele) {
        var _ele$model2;

        return {
          stroke: ele === null || ele === void 0 ? void 0 : (_ele$model2 = ele.model) === null || _ele$model2 === void 0 ? void 0 : _ele$model2.color
        };
      }
    }
  });
  geomSize(geom, config.size, null, 'y', 'x*y*trend*extra');
  geomStyle(geom, config.geomStyle);
}