@antv/f2
Version:
Charts for mobile visualization.
224 lines • 7.07 kB
JavaScript
import { __assign, __extends, __spreadArray } from "tslib";
import { jsx, Component, isEqual as equal, createRef } from '@antv/f-engine';
import { Category } from '../../attr';
import CoordController from '../../controller/coord';
import { hierarchy, treemap, treemapBinary } from '../../deps/d3-hierarchy/src';
import Theme from '../../theme';
import { deepMix, each, isFunction } from '@antv/util';
var withTreemap = function withTreemap(View) {
return /** @class */function (_super) {
__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 = deepMix(px2hd(Theme), theme);
_this.coord = new CoordController();
_this.color = new Category(__assign(__assign({
range: context.theme.colors
}, color), {
data: data
}));
var _b = selection.defaultSelected,
defaultSelected = _b === void 0 ? null : _b;
_this.state.selected = defaultSelected;
_this.coordRef = 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 (equal(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 isFunction(selectedStyle) ? selectedStyle(record) : selectedStyle;
}
return 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 (!equal(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 = hierarchy({
children: data
}).sum(function (d) {
return d[value];
}).sort(function (a, b) {
return b[value] - a[value];
});
var treemapLayout = treemap()
// 默认treemapSquarify
.tile(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 __assign(__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 = [];
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: __spreadArray(__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 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');
}
}, jsx(View, __assign({
nodes: nodes
}, props, {
coord: coord.getCoord()
})));
};
return Treemap;
}(Component);
};
export default withTreemap;