@alicloud/cloud-charts
Version:
270 lines (261 loc) • 9.59 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = exports.Treemap = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _view = require("@antv/data-set/lib/view");
require("@antv/data-set/lib/api/hierarchy");
require("@antv/data-set/lib/transform/hierarchy/treemap");
require("@antv/data-set/lib/connector/hierarchy.js");
var _Base2 = _interopRequireDefault(require("../common/Base"));
var _errorWrap = _interopRequireDefault(require("../common/errorWrap"));
var _index = _interopRequireDefault(require("../themes/index"));
var _common = require("../common/common");
var _rectLegend = _interopRequireDefault(require("../common/rectLegend"));
var _rectTooltip = _interopRequireDefault(require("../common/rectTooltip"));
var _guide = _interopRequireDefault(require("../common/guide"));
var _label = _interopRequireDefault(require("../common/label"));
var _geomStyle = _interopRequireDefault(require("../common/geomStyle"));
require("./index.css");
var _excluded = ["parent"];
function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
// 3.x代码
var Treemap = exports.Treemap = /*#__PURE__*/function (_Base) {
(0, _inheritsLoose2["default"])(Treemap, _Base);
function Treemap() {
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 = 'G2Treemap';
_this.convertData = false;
return _this;
}
var _proto = Treemap.prototype;
_proto.getDefaultConfig = function getDefaultConfig() {
return {
colors: _index["default"].category_12,
xAxis: {
// type: "cat",
labelFormatter: null,
// 可以强制覆盖，手动设置label
categories: null,
autoRotate: false
// 坐标轴粒度
// tickInterval: 1,
},
yAxis: {
labelFormatter: null,
// 可以强制覆盖，手动设置label
max: null,
min: null
},
legend: {
align: 'left',
nameFormatter: null // 可以强制覆盖，手动设置label
},
tooltip: {
titleFormatter: null,
nameFormatter: null,
valueFormatter: null
},
label: {
position: 'middle',
labelFormatter: function labelFormatter(label, data, index) {
if (data._origin.depth === 1 && data._origin.value) {
// 只有第一级显示文本，数值太小时不显示文本
return data._origin.brand || data._origin.name;
}
return null;
},
style: {
textBaseline: 'middle'
}
},
innerRadius: 0,
polar: false,
// 区块的 border 样式，包含 lineWidth lineDash stroke 等属性
geomStyle: {
lineWidth: 1,
stroke: _index["default"]['widgets-color-background']
}
};
};
_proto.init = function init(chart, config, data) {
var defs = {
x: (0, _common.propertyAssign)(_common.propertyMap.axis, {
nice: false
}, config.xAxis),
y: (0, _common.propertyAssign)(_common.propertyMap.axis, {
nice: false
}, config.yAxis)
};
var dataView = processDataView(data);
var nodes = parseDataView(dataView);
chart.scale(defs);
chart.data(nodes);
// 设置图例
(0, _rectLegend["default"])(this, chart, config, null, 'multiple', 'type');
// tooltip
(0, _rectTooltip["default"])(this, chart, config, {
showTitle: false,
showMarkers: false,
showCrosshairs: false
}, null, {
showTitle: false,
showMarkers: false,
showCrosshairs: false
});
chart.axis(false);
chart.legend(false);
// 绘制辅助线，辅助背景区域
(0, _guide["default"])(chart, config);
if (nodes.some(function (x) {
return x.brand;
})) {
drawNestedTreemap(chart, config);
} else {
drawTreemap(chart, config);
}
};
_proto.changeData = function changeData(chart, config, data) {
var dataView = processDataView(data);
var nodes = parseDataView(dataView);
chart && chart.changeData(nodes);
};
return Treemap;
}(_Base2["default"]); // 数据分箱
// 树图布局tile
// 'treemapBinary' 为宽矩形选择水平分区，为高矩形选择垂直分区
// 'treemapDice' 按照水平方向进行分割
// 'treemapSlice' 按照垂直方向进行分割
// 'treemapSliceDice' 如果指定节点的深度值为奇数，则执行 treemapSlice 否则执行 treemapDice
// 'treemapSquarify' 使用指定的纵横比（ratio）来切分矩形
// 'treemapResquarify' 保证具有较好的平均长宽比。后续即便是数据变化也只改变节点的大小，而不会改变节点的相对位置。
function processDataView(data) {
var dv = new _view.View().source(resetParentValue(data), {
type: 'hierarchy'
});
dv.transform({
field: 'value',
type: 'hierarchy.treemap',
tile: 'treemapResquarify',
as: ['x', 'y']
});
return dv;
}
// 将 DataSet 处理后的结果转换为 G2 接受的数据
function parseDataView(dv) {
var nodes = [];
for (var _iterator = _createForOfIteratorHelperLoose(dv.getAllNodes()), _step; !(_step = _iterator()).done;) {
var node = _step.value;
if (node.data.name === 'root') {
continue;
}
var parent = node.parent,
others = (0, _objectWithoutPropertiesLoose2["default"])(node, _excluded);
var eachNode = {
userData: others.data,
name: node.data.name,
x: node.x,
y: node.y,
value: getNodeValue(node),
depth: node.depth,
brand: node.data.brand
};
if (!node.data.brand && node.parent) {
eachNode.brand = node.parent.data.brand;
} else {
eachNode.brand = node.data.brand;
}
nodes.push(eachNode);
}
return nodes;
}
// 简单矩形树图
function drawTreemap(chart, config, field) {
if (field === void 0) {
field = 'name';
}
var colors = config.colors;
// 设置坐标系：极坐标/直角坐标
if (config.polar) {
chart.coordinate('polar', {
innerRadius: config.innerRadius || 0
});
} else {
chart.coordinate();
}
var geom = chart.polygon().position('x*y').color(field, colors).tooltip('name*value', function (name, count) {
return {
name: name,
value: count,
title: name
};
});
(0, _label["default"])({
geom: geom,
config: config
});
(0, _geomStyle["default"])(geom, config.geomStyle);
chart.interaction('element-active');
}
// 嵌套矩形树图
function drawNestedTreemap(chart, config, field) {
if (field === void 0) {
field = 'brand';
}
var colors = config.colors;
// 设置坐标系：极坐标/直角坐标
if (config.polar) {
chart.coordinate('polar', {
innerRadius: config.innerRadius || 0
}).reflect('y');
} else {
// 习惯性最小的在最下面
chart.coordinate().scale(1, -1);
}
var geom = chart.polygon().position('x*y').color(field, colors).tooltip('name*value*brand', function (name, value, brand) {
return {
name: name,
value: value,
title: brand
};
});
(0, _label["default"])({
geom: geom,
config: config
});
(0, _geomStyle["default"])(geom, config.geomStyle);
}
// 此方法对原始数据进行处理，返回新的副本
function resetParentValue(data) {
var brand = data.brand,
children = data.children;
var result = (0, _extends2["default"])({}, data);
if (brand) {
result.brand = brand;
}
if (children) {
// DataView 会通过子节点累加 value 值，所以先置为 null
result.value = null;
result.children = children.map(resetParentValue);
}
return result;
}
// 计算当前节点 value
function getNodeValue(n) {
if (n.data.value === null && n.children) {
return n.children.map(getNodeValue).reduce(function (pre, cur) {
return pre + cur;
}, 0);
}
return n.data.value;
}
var Wtreemap = (0, _errorWrap["default"])(Treemap);
var _default = exports["default"] = Wtreemap;