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


'use strict';

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Rectangle = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _Base2 = _interopRequireDefault(require("../common/Base"));
var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));
var _rectXAxis = _interopRequireDefault(require("../common/rectXAxis"));
var _rectYAxis = _interopRequireDefault(require("../common/rectYAxis"));
var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));
var _guide = _interopRequireDefault(require("../common/guide"));
var _label = _interopRequireDefault(require("../common/label"));
var _geomStyle = _interopRequireDefault(require("../common/geomStyle"));
var _index = _interopRequireDefault(require("../themes/index"));
var _common = require("../common/common");
var _dataSet = require("@antv/data-set/lib/data-set");
require("@antv/data-set/lib/api/statistics");
require("@antv/data-set/lib/transform/bin/rectangle");
require("./index.css");
// 3.x代码
var Rectangle = exports.Rectangle = /*#__PURE__*/function (_Base) {
  (0, _inheritsLoose2["default"])(Rectangle, _Base);
  function Rectangle() {
    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 = 'G2Rectangle';
    _this.convertData = false;
    return _this;
  }
  var _proto = Rectangle.prototype;
  _proto.getDefaultConfig = function getDefaultConfig() {
    return {
      colors: _index["default"].order_10.slice().reverse(),
      xAxis: {
        labelFormatter: null,
        // 可以强制覆盖，手动设置label
        autoRotate: false,
        max: null,
        min: null
      },
      yAxis: {
        labelFormatter: null,
        // 可以强制覆盖，手动设置label
        max: null,
        min: null
      },
      tooltip: {
        nameFormatter: null,
        valueFormatter: null
      },
      bin: {
        fields: ['x', 'y'],
        bins: [20, 10] // 两个方向上的分箱个数
        // binWidth: [ 10, 1000 ],    // 两个方向上的分箱步长（会覆盖bins的配置）
        // offset: [ 0, 0 ],
      },
      grid: false,
      label: false
    };
  };
  _proto.init = function init(chart, config, data) {
    var defs = {
      x: (0, _common.propertyAssign)(_common.propertyMap.axis, {
        // 折线图X轴的范围默认覆盖全部区域，保证没有空余
        range: [0, 1]
      }, config.xAxis),
      y: (0, _common.propertyAssign)(_common.propertyMap.axis, {
        type: 'linear',
        tickCount: 5,
        nice: true
      }, config.yAxis),
      type: {
        type: 'cat'
      }
    };
    var ds = new _dataSet.DataSet();
    var rectangleDataView = ds.createView('diamond').source(data).transform({
      type: 'bin.rectangle',
      fields: ['x', 'y'],
      // 对应坐标轴上的一个点
      bins: [20, 10] // 两个方向上的分箱个数
      // binWidth: [10, 10], // 两个方向上的分箱步长（会覆盖bins配置）
      // offset: [0, 0], // 两个方向上的分箱偏移量
      // sizeByCount: false, // 是否根据分箱个数调整分箱大小
      // as: ['x', 'y', 'count'], // 这个点落在的六边形的顶点坐标集
    });
    chart.scale(defs);
    chart.data(rectangleDataView.rows);

    // 设置X轴
    (0, _rectXAxis["default"])(this, chart, config);

    // 设置单个Y轴
    (0, _rectYAxis["default"])(this, chart, config);

    // 设置图例
    chart.legend(false);

    // tooltip
    (0, _rectTooltip["default"])(this, chart, config, {
      // 指定为 count，避免 Axis 类型为 time 时会报错。
      title: 'count',
      showTitle: false,
      showMarkers: false,
      showCrosshairs: false
    }, null, {
      showTitle: false,
      showMarkers: false,
      showCrosshairs: false
    });

    // 绘制辅助线，辅助背景区域
    (0, _guide["default"])(chart, config);
    var geom = chart.polygon().position('x*y').color('count', config.colors).tooltip('x*y*count', function (x, y, count) {
      return {
        // title: x,
        name: '数量',
        value: count
      };
    });
    (0, _geomStyle["default"])(geom, config.geomStyle, undefined, 'x*y*count');
    (0, _label["default"])({
      geom: geom,
      config: config,
      field: 'count',
      defaultConfig: {
        offset: 0
      }
    });

    // chart.render();
  };
  _proto.changeData = function changeData(chart, config, data) {
    var ds = new _dataSet.DataSet();
    var rectangleDataView = ds.createView('diamond').source(data).transform({
      type: 'bin.rectangle',
      fields: ['x', 'y'],
      // 对应坐标轴上的一个点
      bins: [20, 10] // 两个方向上的分箱个数
      // binWidth: [10, 10], // 两个方向上的分箱步长（会覆盖bins配置）
      // offset: [0, 0], // 两个方向上的分箱偏移量
      // sizeByCount: false, // 是否根据分箱个数调整分箱大小
      // as: ['x', 'y', 'count'], // 这个点落在的六边形的顶点坐标集
    });
    chart && chart.changeData(rectangleDataView.rows);
  };
  return Rectangle;
}(_Base2["default"]);
var Wrectangle = (0, _errorWrap["default"])(Rectangle);
var _default = exports["default"] = Wrectangle;