@alicloud/cloud-charts/lib/Wlinescatter/index.js


'use strict';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Linescatter = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _Base2 = _interopRequireDefault(require("../common/Base"));
var _marker = require("@antv/g2/esm/util/marker");
var _core = require("@antv/g2/esm/core");
var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));
var _index = _interopRequireDefault(require("../themes/index"));
var _common = require("../common/common");
var _dataAdapter = _interopRequireDefault(require("../common/dataAdapter"));
var _guide = require("../common/guide");
var _rectXAxis = _interopRequireDefault(require("../common/rectXAxis"));
var _rectYAxis = _interopRequireDefault(require("../common/rectYAxis"));
var _autoTimeScale = _interopRequireDefault(require("../common/autoTimeScale"));
var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));
var _rectLegend = _interopRequireDefault(require("../common/rectLegend"));
var _legendFilter = _interopRequireDefault(require("../common/legendFilter"));
var _label = _interopRequireDefault(require("../common/label"));
var _geomSize = _interopRequireDefault(require("../common/geomSize"));
var _geomStyle = _interopRequireDefault(require("../common/geomStyle"));
var _log = require("../common/log");
require("./index.css");
var _excluded = ["line", "area", "filter"];
function getLegendItems(lineData, scatterData, lineGeom, scatterGeom, config) {
  var result = [];
  var reMap = {};
  var lineColors = config.lineColors,
    scatterColors = config.scatterColors;
  function getItems(data, geom, shapeType, colors, style) {
    data.forEach(function (d, i) {
      var name = d.name,
        visible = d.visible,
        data = d.data;
      if (reMap[name] || !data || data.length === 0) {
        return;
      } else {
        reMap[name] = true;
      }
      var marker;
      var shapeFactory = (0, _core.getShapeFactory)(geom.shapeType);
      if (shapeFactory) {
        marker = shapeFactory.getMarker(shapeType, {
          color: typeof colors === 'string' ? colors : Array.isArray(colors) ? colors[i % colors.length] : colors(name),
          isInPolar: false
        });
        var symbol = marker.symbol;
        // @ts-ignore
        if (typeof symbol === 'string' && _marker.MarkerSymbols[symbol]) {
          // @ts-ignore
          marker.symbol = _marker.MarkerSymbols[symbol];
        }
      }
      if (style) {
        Object.assign(marker.style, style);
      }
      result.push({
        id: name,
        name: name,
        value: name,
        marker: marker,
        unchecked: visible === false
      });
    });
  }
  getItems(scatterData, scatterGeom, 'point', scatterColors);
  var area = config.area,
    spline = config.spline;
  var lineShapeType = 'line';
  var lineStyle = {};
  if (area) {
    lineShapeType = 'area';
  }
  if (spline) {
    lineShapeType = 'smooth';
  }
  if (!area && spline) {
    lineStyle.fill = null;
  }
  getItems(lineData, lineGeom, lineShapeType, lineColors, lineStyle);
  return result;
}
var Linescatter = exports.Linescatter = /*#__PURE__*/function (_Base) {
  (0, _inheritsLoose2["default"])(Linescatter, _Base);
  function Linescatter() {
    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 = 'G2LineScatter';
    _this.convertData = false;
    _this.rawLineData = [];
    _this.lineView = void 0;
    _this.rawScatterData = [];
    _this.scatterView = void 0;
    return _this;
  }
  var _proto = Linescatter.prototype;
  _proto.getDefaultConfig = function getDefaultConfig() {
    return {
      lineColors: _index["default"].category_12.slice(1),
      scatterColors: _index["default"].linear_10,
      padding: 'auto',
      xAxis: {
        type: 'time',
        mask: 'auto',
        // 上述type为time时，此字段生效
        labelFormatter: null,
        // 可以强制覆盖，手动设置label
        categories: null,
        // autoRotate: false,
        max: null,
        min: null
      },
      yAxis: {
        labelFormatter: null,
        // 可以强制覆盖，手动设置label
        max: null,
        min: null
      },
      legend: {
        align: 'left',
        nameFormatter: null // 可以强制覆盖，手动设置label
      },
      tooltip: {
        titleFormatter: null,
        nameFormatter: null,
        valueFormatter: null
      },
      area: false,
      stack: false,
      // 仅Area有效
      spline: false,
      grid: false,
      symbol: false,
      scatterSize: null
    };
  };
  _proto.beforeInit = function beforeInit(props) {
    return (0, _extends2["default"])({
      syncViewPadding: true
    }, props);
  };
  _proto.init = function init(chart, config, data) {
    var _this2 = this;
    var rawLineData = [];
    this.rawLineData = rawLineData;
    var rawScatterData = [];
    this.rawScatterData = rawScatterData;
    (data || []).forEach(function (d) {
      if (d.type === 'line') {
        rawLineData.push(d);
      } else if (d.type === 'scatter') {
        rawScatterData.push(d);
      }
    });
    var lineData = (0, _dataAdapter["default"])(rawLineData, config, {
      // type: 'lineType',
    });
    var scatterData = (0, _dataAdapter["default"])(rawScatterData, config, {
      // type: 'scatterType',
    });
    var defs = {
      x: (0, _common.propertyAssign)(_common.propertyMap.axis, {
        type: 'cat'
        // fix 更新数据时x轴无法清除数据
        // sync: 'x',
      }, config.xAxis),
      type: {
        type: 'cat'
      }
    };
    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach(function (axis, yIndex) {
        defs["y" + yIndex] = (0, _common.propertyAssign)(_common.propertyMap.axis, {
          type: 'linear',
          tickCount: 5,
          nice: true
        }, axis);
      });
    } else {
      defs.y = (0, _common.propertyAssign)(_common.propertyMap.axis, {
        type: 'linear',
        tickCount: 5,
        // 单轴时，必须同步度量，否则会两个度量叠加在一起
        sync: true,
        nice: true
      }, config.yAxis);
    }
    (0, _autoTimeScale["default"])(defs, this.rawData, this.language || this.context.language);
    chart.scale(defs);

    // 设置X轴
    (0, _rectXAxis["default"])(this, chart, config);
    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach(function (axis, yIndex) {
        var axisColor = _index["default"]['widgets-axis-line'];
        var yAxisConfig = {
          line: {
            style: {
              stroke: axisColor
            }
          }
        };
        if (yIndex !== 0) {
          yAxisConfig.grid = null;
          // 因为是多个view组成的图表，所以这里需要移动位置
          yAxisConfig.position = 'right';
        }
        (0, _rectYAxis["default"])(_this2, chart, (0, _extends2["default"])({}, config, {
          yAxis: axis
        }), "y" + yIndex, yAxisConfig);
      });
    } else {
      // 设置单个Y轴
      (0, _rectYAxis["default"])(this, chart, config);
    }

    // tooltip
    (0, _rectTooltip["default"])(this, chart, config, {}, null, {
      // showCrosshairs: false,
      // showMarkers: false
    });

    // 正式开始绘图，创建两个不同的view
    var lineView = chart.createView({
      padding: config.padding === 'auto' ? 'auto' : 0
    });
    lineView.data(lineData);
    this.lineView = lineView;
    var scatterView = chart.createView({
      padding: config.padding === 'auto' ? 'auto' : 0
    });
    scatterView.data(scatterData);
    this.scatterView = scatterView;
    // 关闭一个View的X轴，避免重叠字体变粗
    scatterView.axis('x', false);
    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach(function (asix, yIndex) {
        if ((0, _common.getDataIndexColor)(config.scatterColors, rawScatterData, yIndex)) {
          drawScatter(scatterView, config, "y" + yIndex, 'type');
        }
        if ((0, _common.getDataIndexColor)(config.lineColors, rawLineData, yIndex)) {
          drawLine(lineView, config, "y" + yIndex, 'type');
        }
      });
    } else {
      // 单Y轴时同时关闭一个View的Y轴，避免重叠字体变粗
      scatterView.axis('y', false);
      drawScatter(scatterView, config, 'y', 'type');
      drawLine(lineView, config, 'y', 'type');
    }

    // 绘制辅助线，辅助背景区域
    viewGuide(config, lineView, rawLineData, scatterView, rawScatterData);
    (0, _legendFilter["default"])(this, scatterView, 'rawScatterData');
    (0, _legendFilter["default"])(this, lineView, 'rawLineData');
    (0, _rectLegend["default"])(this, chart, config, {
      items: getLegendItems(rawLineData, rawScatterData, lineView.geometries[0], scatterView.geometries[0], config)
    }, 'multiple');
  };
  _proto.changeData = function changeData(chart, config, data) {
    var rawLineData = [];
    this.rawLineData = rawLineData;
    var rawScatterData = [];
    this.rawScatterData = rawScatterData;
    (data || []).forEach(function (d) {
      if (d.type === 'line') {
        rawLineData.push(d);
      } else if (d.type === 'scatter') {
        rawScatterData.push(d);
      }
    });
    var lineData = (0, _dataAdapter["default"])(rawLineData, config, {
      // type: 'lineType',
    });
    var scatterData = (0, _dataAdapter["default"])(rawScatterData, config, {
      // type: 'scatterType',
    });
    this.scatterView && this.scatterView.data(scatterData);
    this.lineView && this.lineView.data(lineData);
    if (this.scatterView && this.lineView) {
      var chartOptions = chart.getOptions();
      var legend = chart.getController('legend');
      var legendCos = legend.getComponents();
      // 图例项可见，更新图例项
      if (legend.visible && legendCos.length > 0 && typeof chartOptions.legends === 'object') {
        chartOptions.legends.items = getLegendItems(rawLineData, rawScatterData, this.lineView.geometries[0], this.scatterView.geometries[0], config);
        // chart.legend({
        //   items: newItems
        // });
      }
    }

    // 更新数据后再次render，保证 padding 能正确计算。
    chart.render(true);
  };
  return Linescatter;
}(_Base2["default"]);
var Wlinescatter = (0, _errorWrap["default"])(Linescatter);
var _default = exports["default"] = Wlinescatter;
function drawScatter(chart, config, yAxisKey, legendKey) {
  if (yAxisKey === void 0) {
    yAxisKey = 'y';
  }
  if (legendKey === void 0) {
    legendKey = 'type';
  }
  var scatterColors = config.scatterColors,
    scatterSize = config.scatterSize,
    scatterGeomStyle = config.scatterGeomStyle;
  var intervalGeom = chart.point().color('type', scatterColors).position(['x', yAxisKey]).shape('circle');
  (0, _geomStyle["default"])(intervalGeom, scatterGeomStyle);
  (0, _label["default"])({
    geom: intervalGeom,
    config: config,
    field: yAxisKey,
    extraConfigKey: 'scatterLabel'
  });
  (0, _geomSize["default"])(intervalGeom, scatterSize, 4, yAxisKey, "x*" + yAxisKey + "*" + legendKey + "*extra");
  return intervalGeom;
}
function drawLine(chart, config, yAxisKey, legendKey) {
  if (yAxisKey === void 0) {
    yAxisKey = 'y';
  }
  if (legendKey === void 0) {
    legendKey = 'type';
  }
  var areaColors = config.areaColors || config.lineColors;
  if (Array.isArray(config.lineColors) && Array.isArray(config.areaColors)) {
    areaColors = mergeArray([], config.lineColors, config.areaColors);
  }
  if (Array.isArray(areaColors)) {
    areaColors = (0, _common.getAreaColors)(areaColors);
  }
  var lineGeom = null;
  var areaGeom = null;
  var lineWidth = config.lineWidth;

  // 区域、堆叠、平滑曲线
  var lineShape = config.spline ? 'smooth' : 'line';
  var areaShape = config.spline ? 'smooth' : 'area';
  var stack = config.stack;
  if (config.area && stack) {
    areaGeom = chart.area().position(['x', yAxisKey]).color(legendKey, areaColors).tooltip(false).shape(areaShape).adjust('stack');
    lineGeom = chart.line().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape(lineShape).adjust('stack');
  } else if (config.area && !stack) {
    areaGeom = chart.area().position(['x', yAxisKey]).color(legendKey, areaColors).tooltip(false).shape(areaShape);
    lineGeom = chart.line().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape(lineShape);
  } else {
    lineGeom = chart.line().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape(lineShape);
  }
  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.lineGeomStyle, {
    lineWidth: lineWidth || _index["default"]['widgets-line-width'],
    lineJoin: 'round'
  }, "x*" + yAxisKey + "*" + legendKey + "*extra");
  (0, _label["default"])({
    geom: lineGeom,
    config: config,
    field: yAxisKey,
    extraConfigKey: 'lineLabel'
  });

  // 曲线默认点
  if (config.symbol) {
    var pointGeom = null;
    if (config.area && stack) {
      pointGeom = chart.point().adjust('stack').position(['x', yAxisKey]).color(legendKey, config.lineColors).shape('circle').size(3);
    } else {
      pointGeom = chart.point().position(['x', yAxisKey]).color(legendKey, config.lineColors).shape('circle').size(3);
    }
    if (typeof config.symbol === 'object') {
      (0, _geomSize["default"])(pointGeom, config.symbol.size, 3, yAxisKey, legendKey);
      if (config.symbol.geomStyle) {
        (0, _geomStyle["default"])(pointGeom, config.symbol.geomStyle, {}, "x*" + yAxisKey + "*" + legendKey + "*extra");
      }
    }
  }
  return lineGeom;
}
function viewGuide(config, lineView, rawLineData, scatterView, rawScatterData) {
  var guide = config.guide;
  if (!guide) {
    return;
  }
  var guideLine = guide.line,
    guideArea = guide.area,
    guideFilter = guide.filter,
    other = (0, _objectWithoutPropertiesLoose2["default"])(guide, _excluded);
  if (guideLine) {
    if (Array.isArray(guideLine)) {
      guideLine.forEach(function (line) {
        (0, _guide.drawGuideLine)(getGuideView(config, line, lineView, rawLineData, scatterView, rawScatterData), line);
      });
    } else {
      (0, _guide.drawGuideLine)(getGuideView(config, guideLine, lineView, rawLineData, scatterView, rawScatterData), guideLine);
    }
  }
  if (guideArea) {
    if (Array.isArray(guideArea)) {
      guideArea.forEach(function (area) {
        (0, _guide.drawGuideArea)(getGuideView(config, area, lineView, rawLineData, scatterView, rawScatterData), area);
      });
    } else {
      (0, _guide.drawGuideArea)(getGuideView(config, guideArea, lineView, rawLineData, scatterView, rawScatterData), guideArea);
    }
  }
  if (guideFilter) {
    if (Array.isArray(guideFilter)) {
      guideFilter.forEach(function (filter) {
        (0, _guide.drawGuideFilter)(getGuideView(config, filter, lineView, rawLineData, scatterView, rawScatterData), filter);
      });
    } else {
      (0, _guide.drawGuideFilter)(getGuideView(config, guideFilter, lineView, rawLineData, scatterView, rawScatterData), guideFilter);
    }
  }
  if (!guideLine && !guideArea && !guideFilter && Object.keys(other).length > 0) {
    (0, _log.warn)('config.guide', '配置异常，请使用 guide.line、guide.area、guide.filter');
  }
}
function getGuideView(config, guide, lineView, rawLineData, scatterView, rawScatterData) {
  var target = guide.target,
    axis = guide.axis,
    value = guide.value;

  // 如果用户指定了绘制目标，直接使用
  if (target === 'line') {
    return lineView;
  } else if (target === 'scatter') {
    return scatterView;
  }
  if (axis && (value || value === 0) && /y\d/.test(axis)) {
    var yIndex = Number(axis.replace(/^y/, ''));
    if ((0, _common.getDataIndexColor)(config.scatterColors, rawScatterData, yIndex)) {
      return scatterView;
    }
  }
  return lineView;
}
function mergeArray(target) {
  for (var _len2 = arguments.length, source = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
    source[_key2 - 1] = arguments[_key2];
  }
  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;
}