@antv/f2
Version:
Charts for mobile visualization.
346 lines • 10.8 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import { each, findIndex, isArray } from '@antv/util';
import Component from '../base/component';
import equal from '../base/equal';
import Children from '../children';
// types
import LayoutController from '../controller/layout';
import CoordController from '../controller/coord';
import ScaleController from '../controller/scale';
// 统计图表
var Chart = /*#__PURE__*/function (_Component) {
_inherits(Chart, _Component);
var _super = _createSuper(Chart);
function Chart(props, context, updater) {
var _this;
_classCallCheck(this, Chart);
_this = _super.call(this, props, context, updater);
_this.componentsPosition = [];
var data = props.data,
coordOption = props.coord,
_props$scale = props.scale,
scale = _props$scale === void 0 ? [] : _props$scale;
_this.layoutController = new LayoutController();
_this.coordController = new CoordController();
_this.scaleController = new ScaleController(data);
_this.scale = _this.scaleController;
var _assertThisInitialize = _assertThisInitialized(_this),
layoutController = _assertThisInitialize.layoutController,
coordController = _assertThisInitialize.coordController,
scaleController = _assertThisInitialize.scaleController;
// 布局
var style = _this.getStyle(props, context);
_this.layout = layoutController.create(style);
// 坐标系
_this.coord = coordController.create(coordOption, _this.layout);
// scale
scaleController.create(scale);
_this.data = data;
// state
_this.state = {
filters: {}
};
return _this;
}
// props 更新
_createClass(Chart, [{
key: "willReceiveProps",
value: function willReceiveProps(nextProps, context) {
var layoutController = this.layoutController,
coordController = this.coordController,
scaleController = this.scaleController,
lastProps = this.props;
var nextStyle = nextProps.style,
nextData = nextProps.data,
nextScale = nextProps.scale;
var lastStyle = lastProps.style,
lastData = lastProps.data,
lastScale = lastProps.scale;
// 布局
if (!equal(nextStyle, lastStyle) || context !== this.context) {
var style = this.getStyle(nextProps, context);
this.layout = layoutController.create(style);
coordController.updateLayout(this.layout);
}
if (nextData !== lastData) {
scaleController.changeData(nextData);
}
// scale
if (!equal(nextScale, lastScale)) {
scaleController.update(nextScale);
}
}
}, {
key: "willUpdate",
value: function willUpdate() {
var coordController = this.coordController,
props = this.props;
// render 时要重置 coord 范围，重置后需要让所有子组件都重新render
// 所以这里不比较是否有差异，每次都新建，让所有子组件重新render
this.coord = coordController.create(props.coord, this.layout);
}
}, {
key: "getStyle",
value: function getStyle(props, context) {
var theme = context.theme,
px2hd = context.px2hd,
left = context.left,
top = context.top,
width = context.width,
height = context.height;
var style = props.style;
return px2hd(_objectSpread(_objectSpread({
left: left,
top: top,
width: width,
height: height
}, theme.chart), style));
}
// 给需要显示的组件留空
}, {
key: "layoutCoord",
value: function layoutCoord(layout) {
var coord = this.coord,
props = this.props;
var position = layout.position,
boxWidth = layout.width,
boxHeight = layout.height;
var left = coord.left,
top = coord.top,
width = coord.width,
height = coord.height;
switch (position) {
case 'left':
left += boxWidth;
width = Math.max(0, width - boxWidth);
break;
case 'right':
width = Math.max(0, width - boxWidth);
break;
case 'top':
top += boxHeight;
height = Math.max(0, height - boxHeight);
break;
case 'bottom':
height = Math.max(0, height - boxHeight);
break;
}
coord.update(_objectSpread(_objectSpread({}, props.coord), {}, {
left: left,
top: top,
width: width,
height: height
}));
}
}, {
key: "resetCoordLayout",
value: function resetCoordLayout() {
var coord = this.coord,
layout = this.layout;
coord.update(layout);
}
}, {
key: "updateCoordLayout",
value: function updateCoordLayout(layout) {
var _this2 = this;
if (isArray(layout)) {
layout.forEach(function (item) {
_this2.layoutCoord(item);
});
return;
}
this.layoutCoord(layout);
}
}, {
key: "updateCoordFor",
value: function updateCoordFor(component, layout) {
var _this3 = this;
if (!layout) return;
var componentsPosition = this.componentsPosition;
var componentPosition = {
component: component,
layout: layout
};
var existIndex = findIndex(componentsPosition, function (item) {
return item.component === component;
});
// 说明是已经存在的组件
if (existIndex > -1) {
componentsPosition.splice(existIndex, 1, componentPosition);
// 先重置，然后整体重新算一次
this.resetCoordLayout();
componentsPosition.forEach(function (componentPosition) {
var layout = componentPosition.layout;
_this3.updateCoordLayout(layout);
});
return;
}
// 是新组件，直接添加
componentsPosition.push(componentPosition);
this.updateCoordLayout(layout);
}
}, {
key: "getGeometrys",
value: function getGeometrys() {
var children = this.children;
var geometrys = [];
// @ts-ignore
Children.toArray(children).forEach(function (element) {
if (!element) return false;
var component = element.component;
if (component && component.isGeometry) {
geometrys.push(component);
}
});
return geometrys;
}
/**
* calculate dataset's position on canvas
* @param {Object} record the dataset
* @return {Object} return the position
*/
}, {
key: "getPosition",
value: function getPosition(record) {
var coord = this.getCoord();
var xScale = this.getXScales()[0];
var xField = xScale.field;
var yScales = this.getYScales();
// default first
var yScale = yScales[0];
var yField = yScale.field;
for (var i = 0, len = yScales.length; i < len; i++) {
var scale = yScales[i];
var field = scale.field;
if (record[field]) {
yScale = scale;
yField = field;
break;
}
}
var x = xScale.scale(record[xField]);
var y = yScale.scale(record[yField]);
return coord.convertPoint({
x: x,
y: y
});
}
}, {
key: "getSnapRecords",
value: function getSnapRecords(point, inCoordRange) {
var geometrys = this.getGeometrys();
if (!geometrys.length) return;
// @ts-ignore
return geometrys[0].getSnapRecords(point, inCoordRange);
}
}, {
key: "getRecords",
value: function getRecords(data, field) {
var geometrys = this.getGeometrys();
if (!geometrys.length) return;
// @ts-ignore
return geometrys[0].getRecords(data, field);
}
}, {
key: "getLegendItems",
value: function getLegendItems(point) {
var geometrys = this.getGeometrys();
if (!geometrys.length) return;
// @ts-ignore
return geometrys[0].getLegendItems(point);
}
}, {
key: "setScale",
value: function setScale(field, option) {
this.scaleController.setScale(field, option);
}
}, {
key: "getScale",
value: function getScale(field) {
return this.scaleController.getScale(field);
}
}, {
key: "getScales",
value: function getScales() {
return this.scaleController.getScales();
}
}, {
key: "getXScales",
value: function getXScales() {
var geometrys = this.getGeometrys();
return geometrys.map(function (component) {
// @ts-ignore
return component.getXScale();
});
}
}, {
key: "getYScales",
value: function getYScales() {
var geometrys = this.getGeometrys();
return geometrys.map(function (component) {
// @ts-ignore
return component.getYScale();
});
}
}, {
key: "getCoord",
value: function getCoord() {
return this.coord;
}
}, {
key: "filter",
value: function filter(field, condition) {
var filters = this.state.filters;
this.setState({
filters: _objectSpread(_objectSpread({}, filters), {}, _defineProperty({}, field, condition))
});
}
}, {
key: "_getRenderData",
value: function _getRenderData() {
var props = this.props,
state = this.state;
var data = props.data;
var filters = state.filters;
if (!filters || !Object.keys(filters).length) {
return data;
}
var filteredData = data;
each(filters, function (condition, field) {
if (!condition) return;
filteredData = filteredData.filter(function (record) {
return condition(record[field], record);
});
});
return filteredData;
}
}, {
key: "render",
value: function render() {
var _this4 = this;
var props = this.props,
layout = this.layout,
coord = this.coord;
var children = props.children,
originData = props.data;
if (!originData) return null;
var data = this._getRenderData();
return Children.map(children, function (child) {
return Children.cloneElement(child, {
chart: _this4,
coord: coord,
data: data,
layout: layout
});
});
}
}]);
return Chart;
}(Component);
export default Chart;