@alicloud/cloud-charts
Version:
229 lines (215 loc) • 11.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = ListContainer;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var _Wnumbercard = require("../Wnumbercard");
var _Wgauge = _interopRequireDefault(require("../Wgauge"));
var _globalResizeObserver = require("../common/globalResizeObserver");
var _constants = require("../constants");
var _Wplaceholder = _interopRequireDefault(require("../Wplaceholder"));
require("./index.css");
var _excluded = ["data", "config"],
_excluded2 = ["chart", "columns", "margin", "fullSize"],
_excluded3 = ["showDivider"]; // @ts-ignore
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var prefix = _constants.PrefixName + "-list-container";
function ListContainer(_ref) {
var _data$length;
var data = _ref.data,
userConfig = _ref.config,
others = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
if (!(data !== null && data !== void 0 && data.length)) {
return /*#__PURE__*/_react["default"].createElement(_Wplaceholder["default"], {
empty: true
});
}
var _others$userConfig = (0, _extends2["default"])({}, others, userConfig),
chart = _others$userConfig.chart,
userColumns = _others$userConfig.columns,
_others$userConfig$ma = _others$userConfig.margin,
margin = _others$userConfig$ma === void 0 ? 16 : _others$userConfig$ma,
_others$userConfig$fu = _others$userConfig.fullSize,
fullSize = _others$userConfig$fu === void 0 ? false : _others$userConfig$fu,
userOptions = (0, _objectWithoutPropertiesLoose2["default"])(_others$userConfig, _excluded2);
var marginRight = (0, _react.useMemo)(function () {
return typeof margin === 'number' ? margin : margin[1];
}, [margin]);
var marginBottom = (0, _react.useMemo)(function () {
return typeof margin === 'number' ? margin : margin[0];
}, [margin]);
var container = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(1),
columns = _useState[0],
setColumns = _useState[1];
var _useState2 = (0, _react.useState)(0),
containerWidth = _useState2[0],
setContainerWidth = _useState2[1];
// const [containerHeight, setContainerHeight] = useState<number>(0);
// 计算内部元素的最大宽度
var maxWidth = (0, _react.useMemo)(function () {
return Math.max.apply(Math, data.map(function (item) {
return calcMinWidth(chart, item);
}));
}, [chart, data]);
// 计算列数
var calcColumns = (0, _react.useCallback)(function () {
var _container$current, _container$current2;
var width = (container === null || container === void 0 ? void 0 : (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.offsetWidth) || 0;
var height = (container === null || container === void 0 ? void 0 : (_container$current2 = container.current) === null || _container$current2 === void 0 ? void 0 : _container$current2.offsetHeight) || 0;
setContainerWidth(width);
// setContainerHeight(height);
// 用户设置了列数则直接用
if (userColumns) {
setColumns(userColumns);
return;
}
// 每行几个卡片，最少1个，最多6个
var cols = Math.floor((width + marginRight) / (maxWidth + marginRight));
var itemsPerRow = Math.min(Math.max(Math.min(cols, (data === null || data === void 0 ? void 0 : data.length) || 0), 1), 6);
setColumns(itemsPerRow);
}, [userColumns, maxWidth, marginRight]);
(0, _react.useEffect)(function () {
calcColumns();
var parent = container.current && container.current.parentElement;
if (parent) {
_globalResizeObserver.GlobalResizeObserver.observe(parent, calcColumns);
}
return function () {
var parent = container.current && container.current.parentElement;
if (parent) {
_globalResizeObserver.GlobalResizeObserver.unobserve(parent);
}
};
}, [calcColumns]);
// 获取配置项
var config = getDefaultConfig(chart, data, userOptions);
var _config$showDivider = config.showDivider,
showDivider = _config$showDivider === void 0 ? false : _config$showDivider,
otherConfig = (0, _objectWithoutPropertiesLoose2["default"])(config, _excluded3);
// const itemWidth = (containerWidth - (marginRight + (showDivider ? 1 : 0)) * (columns - 1)) / columns;
var rows = Math.ceil(((_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 0) / columns);
// const itemHeight = fullSize ? (containerHeight - marginBottom * (rows - 1)) / rows : calcMinHeight(chart, itemWidth);
var dataByRow = [];
for (var index = 0; index < (data === null || data === void 0 ? void 0 : data.length); index += columns) {
dataByRow.push(data.slice(index, index + columns));
}
return /*#__PURE__*/_react["default"].createElement("div", {
className: _constants.FullCrossName + " " + prefix + "-container",
ref: container
}, dataByRow.map(function (row, rowIndex) {
var itemWidth = (containerWidth - (marginRight + (showDivider ? 1 : 0)) * (row.length - 1)) / row.length;
return /*#__PURE__*/_react["default"].createElement("div", {
key: rowIndex,
className: prefix + "-row-container",
style: {
height: "calc((100% - " + ((showDivider ? 1 : 0) + marginBottom) * (rows - 1) + "px) / " + rows + " + " + ((rowIndex === 0 ? 0 : marginBottom / 2) + (rowIndex === rows - 1 ? 0 : marginBottom / 2) + (showDivider && rowIndex !== rows - 1 ? 1 : 0)) + "px)"
}
}, /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-row",
style: {
marginBottom: rowIndex === rows - 1 ? 0 : marginBottom / 2,
marginTop: rowIndex === 0 ? 0 : marginBottom / 2,
height: "calc(100% - " + ((showDivider && rowIndex !== rows - 1 ? 1 : 0) + (rowIndex === 0 ? 0 : marginBottom / 2) + (rowIndex === rows - 1 ? 1 : marginBottom / 2)) + "px)"
}
}, row.map(function (item, colIndex) {
var itemProps = (0, _extends2["default"])({}, otherConfig, item, getChartConfig(chart, item, otherConfig));
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
key: rowIndex * columns + colIndex
}, /*#__PURE__*/_react["default"].createElement("div", {
style: {
marginRight: colIndex === row.length - 1 ? 0 : marginRight / 2,
marginLeft: colIndex === 0 ? 0 : marginRight / 2,
width: itemWidth,
height: '100%'
}
}, chart === 'Wnumbercard' && /*#__PURE__*/_react["default"].createElement(_Wnumbercard.Wnumbercard, itemProps), chart === 'Wgauge' && /*#__PURE__*/_react["default"].createElement(_Wgauge["default"], itemProps)), colIndex !== row.length - 1 && showDivider && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-divider-column"
}));
})), rowIndex !== dataByRow.length - 1 && showDivider && /*#__PURE__*/_react["default"].createElement("div", {
className: prefix + "-divider-row"
}));
}));
}
// 计算宽度
function calcMinWidth(chart, item) {
if (chart === 'Wnumbercard') {
if (item.icon) {
return 172;
}
return 92;
} else {
return 96;
}
}
// 计算高度
function calcMinHeight(chart, data, width, height) {
if (chart === 'Wnumbercard') {
// 当任意卡片有图表（不在左右）时，高度100%，否则68
return data.some(function (item) {
var _item$config$chart, _item$config;
var chart = (_item$config$chart = item === null || item === void 0 ? void 0 : (_item$config = item.config) === null || _item$config === void 0 ? void 0 : _item$config.chart) !== null && _item$config$chart !== void 0 ? _item$config$chart : item === null || item === void 0 ? void 0 : item.chart;
if (chart && (chart === null || chart === void 0 ? void 0 : chart.position) !== 'left' && (chart === null || chart === void 0 ? void 0 : chart.position) !== 'right') {
return true;
}
return false;
}) ? height : 68;
} else {
return Math.round(width / 1.8);
}
}
// 根据图表类型及数据获取默认配置项 容器级别
function getDefaultConfig(chart, data, userOptions) {
if (chart === 'Wnumbercard') {
// 计算默认的backgroundType
var backgroundType;
// 用户指定了backgroundType就直接用
if (userOptions !== null && userOptions !== void 0 && userOptions.backgroundType) {
backgroundType = userOptions === null || userOptions === void 0 ? void 0 : userOptions.backgroundType;
} else if (data.some(function (item) {
return item.backgroundType;
})) {
// 任意卡片指定了backgroundType则不做处理
backgroundType = undefined;
} else if (data.some(function (item) {
return item.icon;
})) {
// 任意卡片有icon 则默认用白色卡片
backgroundType = 'none';
} else {
backgroundType = 'fill';
}
// 是否加间隔线
var showDivider = (userOptions === null || userOptions === void 0 ? void 0 : userOptions.showDivider) !== undefined ? userOptions === null || userOptions === void 0 ? void 0 : userOptions.showDivider : backgroundType === 'none';
return (0, _extends2["default"])({}, userOptions, {
backgroundType: backgroundType,
showDivider: showDivider
});
}
return userOptions;
}
// 获取图表默认配置项 图表级别
function getChartConfig(chart, item, otherConfig
// itemWidth: number,
// itemHeight: number,
// fullSize: boolean = false,
) {
if (chart === 'Wnumbercard') {
var _otherConfig$itemStyl, _item$itemStyle;
// const chartWidth = Math.max(62, itemWidth / 3);
var _chart = item === null || item === void 0 ? void 0 : item.chart;
return (0, _extends2["default"])({}, _chart && ! /*#__PURE__*/_react["default"].isValidElement(_chart) ? {
chart: (0, _extends2["default"])({}, _chart)
} : {}, {
itemStyle: (0, _extends2["default"])({
height: '100%',
// height: itemHeight,
width: '100%'
}, (_otherConfig$itemStyl = otherConfig === null || otherConfig === void 0 ? void 0 : otherConfig.itemStyle) !== null && _otherConfig$itemStyl !== void 0 ? _otherConfig$itemStyl : {}, (_item$itemStyle = item === null || item === void 0 ? void 0 : item.itemStyle) !== null && _item$itemStyle !== void 0 ? _item$itemStyle : {})
});
}
return {};
}