@alicloud/cloud-charts/lib/common/drawLine.js


'use strict';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = drawLine;
var _label = _interopRequireDefault(require("./label"));
var _geomSize = _interopRequireDefault(require("./geomSize"));
var _geomStyle = _interopRequireDefault(require("./geomStyle"));
var _index = _interopRequireDefault(require("../themes/index"));
var _log = require("./log");
var _common = require("../common/common");
var stepNames = ['hv', 'vh', 'hvh', 'vhv'];
/**
 * drawLine 绘制线图逻辑
 *
 * @param {Chart} chart 图表实例
 * @param {Object} config 配置项
 * @param {string} yAxisKey 数据映射字段
 * */
function drawLine(chart, config, yAxisKey) {
  if (yAxisKey === void 0) {
    yAxisKey = 'y';
  }
  var areaColors = config.areaColors || config.colors;
  if (Array.isArray(config.colors) && Array.isArray(config.areaColors)) {
    areaColors = mergeArray([], config.colors, config.areaColors);
  }
  if (Array.isArray(areaColors)) {
    areaColors = (0, _common.getAreaColors)(areaColors, config.stack);
  }

  // 区域、堆叠、平滑曲线
  var lineShape = config.spline ? 'smooth' : 'line';
  var areaShape = config.spline ? 'smooth' : 'area';
  if (config.spline) {
    (0, _log.warn)('config.spline', '涉及监控、运维、运营等业务场景不推荐开启曲线，建议关闭');
  }

  // 阶梯折线，目前区域图不支持阶梯，需特殊说明
  if (config.step && !config.area) {
    lineShape = stepNames.indexOf(String(config.step)) > -1 ? config.step : 'hv';
  }
  var lineGeom = null;
  var areaGeom = null;
  var geomConfig = {
    sortable: config.sortable
  };
  if (config.area && config.stack) {
    areaGeom = chart.area(geomConfig).position(['x', yAxisKey]).color('type', areaColors).tooltip(false).shape(areaShape).adjust('stack');
    lineGeom = chart.line(geomConfig).position(['x', yAxisKey]).color('type', config.colors).shape(lineShape).adjust('stack');
  } else if (config.area && !config.stack) {
    areaGeom = chart.area(geomConfig).position(['x', yAxisKey]).color('type', areaColors).tooltip(false).shape(areaShape);
    lineGeom = chart.line(geomConfig).position(['x', yAxisKey]).color('type', config.colors).shape(lineShape);
  } else {
    lineGeom = chart.line(geomConfig).position(['x', yAxisKey]).color('type', config.colors).shape(lineShape);
  }
  if (typeof config.animate === 'object') {
    lineGeom.animate(config.animate);
    areaGeom && areaGeom.animate(config.animate);
  }
  if (areaGeom && typeof config.area === 'object') {
    if (config.area.geomStyle) {
      (0, _geomStyle["default"])(areaGeom, config.area.geomStyle, {}, "x*" + yAxisKey + "*type*extra");
    }
  }
  (0, _geomStyle["default"])(lineGeom, config.geomStyle, {
    lineWidth: config.lineWidth || _index["default"]['widgets-line-width'],
    lineJoin: 'round'
  }, "x*" + yAxisKey + "*type*extra");
  (0, _label["default"])({
    geom: lineGeom,
    config: config,
    field: yAxisKey
  });

  // 曲线上圆点
  if (config.symbol) {
    var pointGeom = null;
    pointGeom = chart.point(geomConfig).position(['x', yAxisKey]).color('type', config.colors)
    // 改为空心shape
    .shape('hollowCircle').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
          };
        }
      }
    });
    if (config.area && config.stack) {
      pointGeom = pointGeom.adjust('stack');
    }
    if (typeof config.symbol === 'object') {
      pointGeom.shape(config.symbol.shape || 'hollowCircle'); // 配置形状
      (0, _geomSize["default"])(pointGeom, config.symbol.size, 3, yAxisKey, 'type');
      if (config.symbol.geomStyle) {
        (0, _geomStyle["default"])(pointGeom, config.symbol.geomStyle, {}, "x*" + yAxisKey + "*type*extra");
      }
    }
  }
}
function mergeArray(target) {
  for (var _len = arguments.length, source = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
    source[_key - 1] = arguments[_key];
  }
  source.forEach(function (s) {
    if (!s || s.length === 0) {
      return;
    }
    s.forEach(function (item, i) {
      if (i >= target.length) {
        target.push(item);
      } else {
        target[i] = item;
      }
    });
  });
  return target;
}