@antv/f2
Version:
Charts for mobile visualization.
231 lines (230 loc) • 7.47 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _tslib = require("tslib");
var _fEngine = require("@antv/f-engine");
var _attr = require("../../attr");
var _coord = _interopRequireDefault(require("../../controller/coord"));
var _src = require("../../deps/d3-hierarchy/src");
var _theme = _interopRequireDefault(require("../../theme"));
var _util = require("@antv/util");
var withTreemap = function withTreemap(View) {
return /** @class */function (_super) {
(0, _tslib.__extends)(Treemap, _super);
function Treemap(props, context) {
var _this = _super.call(this, props, context) || this;
var color = props.color,
data = props.data,
theme = props.theme,
_a = props.selection,
selection = _a === void 0 ? {} : _a;
var px2hd = context.px2hd;
context.theme = (0, _util.deepMix)(px2hd(_theme.default), theme);
_this.coord = new _coord.default();
_this.color = new _attr.Category((0, _tslib.__assign)((0, _tslib.__assign)({
range: context.theme.colors
}, color), {
data: data
}));
var _b = selection.defaultSelected,
defaultSelected = _b === void 0 ? null : _b;
_this.state.selected = defaultSelected;
_this.coordRef = (0, _fEngine.createRef)();
_this.records = [];
return _this;
}
Treemap.prototype.isSelected = function (record) {
var state = this.state;
var selected = state.selected;
if (!selected || !selected.length) {
return false;
}
for (var i = 0, len = selected.length; i < len; i++) {
var item = selected[i];
if ((0, _fEngine.isEqual)(record, item)) {
return true;
}
}
return false;
};
Treemap.prototype.getSelectionStyle = function (record) {
var _a = this,
state = _a.state,
props = _a.props;
var selected = state.selected;
if (!selected || !selected.length) {
return null;
}
var selection = props.selection;
var selectedStyle = selection.selectedStyle,
unSelectedStyle = selection.unSelectedStyle;
var isSelected = this.isSelected(record);
if (isSelected) {
return (0, _util.isFunction)(selectedStyle) ? selectedStyle(record) : selectedStyle;
}
return (0, _util.isFunction)(unSelectedStyle) ? unSelectedStyle(record) : unSelectedStyle;
};
Treemap.prototype.willMount = function () {
var _a = this,
props = _a.props,
coord = _a.coord,
layout = _a.layout;
var coordOption = props.coord;
coord.updateLayout(layout);
coord.create(coordOption);
};
Treemap.prototype.willReceiveProps = function (nextProps) {
var nextSelection = nextProps.selection;
var lastSelection = this.props.selection;
if (!nextSelection || !lastSelection) {
return;
}
var nextDefaultSelected = nextSelection.defaultSelected;
var lastDefaultSelected = lastSelection.defaultSelected;
if (!(0, _fEngine.isEqual)(nextDefaultSelected, lastDefaultSelected)) {
this.state.selected = nextDefaultSelected;
}
};
Treemap.prototype.treemapLayout = function () {
var _this = this;
var _a = this,
props = _a.props,
coord = _a.coord,
colorAttr = _a.color;
var _b = coord.getCoord(),
width = _b.width,
height = _b.height;
var data = props.data,
value = props.value,
_c = props.space,
space = _c === void 0 ? 0 : _c;
var root = (0, _src.hierarchy)({
children: data
}).sum(function (d) {
return d[value];
}).sort(function (a, b) {
return b[value] - a[value];
});
var treemapLayout = (0, _src.treemap)()
// 默认treemapSquarify
.tile(_src.treemapBinary).round(false).size([width, height])
// .padding(1);
.paddingInner(space);
// .paddingOuter(options.paddingOuter)
// .paddingTop(options.paddingTop)
// .paddingRight(options.paddingRight)
// .paddingBottom(options.paddingBottom)
// .paddingLeft(options.paddingLeft);
var nodes = treemapLayout(root);
return nodes.children.map(function (item) {
var data = item.data,
x0 = item.x0,
y0 = item.y0,
x1 = item.x1,
y1 = item.y1;
var color = colorAttr.mapping(data[colorAttr.field]);
var rect = {
xMin: x0,
xMax: x1,
yMin: y0,
yMax: y1
};
var style = _this.getSelectionStyle(data);
return (0, _tslib.__assign)((0, _tslib.__assign)({
key: data.key,
origin: data,
color: color
}, rect), {
style: style
});
});
};
Treemap.prototype.select = function (ev, trigger) {
var _this = this;
var points = ev.points,
x = ev.canvasX,
y = ev.canvasY;
var _a = this.props.selection,
selection = _a === void 0 ? {} : _a;
var triggerOn = selection.triggerOn,
_b = selection.type,
type = _b === void 0 ? 'single' : _b,
_c = selection.cancelable,
cancelable = _c === void 0 ? true : _c;
if (!triggerOn || trigger !== triggerOn) return;
var point = triggerOn === 'click' ? {
x: x,
y: y
} : points[0];
var selected = this.state.selected;
var origin = [];
(0, _util.each)(this.records, function (record) {
if (point.x >= record.xMin && point.x <= record.xMax && point.y >= record.yMin && point.y <= record.yMax) {
origin.push(record === null || record === void 0 ? void 0 : record.origin);
}
});
// 没选中元素
if (!origin) {
this.setState({
selected: null
});
return;
}
if (!selected) {
this.setState({
selected: origin
});
return;
}
// 单选
var newSelected = [];
origin.forEach(function (record) {
if (!_this.isSelected(record)) {
newSelected.push(record);
}
});
if (type === 'single') {
this.setState({
selected: cancelable ? newSelected : origin
});
return;
}
this.setState({
selected: (0, _tslib.__spreadArray)((0, _tslib.__spreadArray)([], newSelected, true), selected, true)
});
};
Treemap.prototype.render = function () {
var _this = this;
var nodes = this.treemapLayout();
this.records = nodes;
var _a = this,
props = _a.props,
coord = _a.coord;
var _b = coord.getCoord(),
width = _b.width,
height = _b.height;
return (0, _fEngine.jsx)("group", {
style: {
width: width,
height: height,
fill: 'transparent'
},
onClick: function onClick(ev) {
return _this.select(ev, 'click');
},
onPress: function onPress(ev) {
return _this.select(ev, 'press');
}
}, (0, _fEngine.jsx)(View, (0, _tslib.__assign)({
nodes: nodes
}, props, {
coord: coord.getCoord()
})));
};
return Treemap;
}(_fEngine.Component);
};
var _default = exports.default = withTreemap;