@alicloud/cloud-charts
Version:
223 lines (210 loc) • 9.94 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
var _excluded = ["data", "config"],
_excluded2 = ["chart", "columns", "margin", "fullSize"],
_excluded3 = ["showDivider"];
// @ts-ignore
import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { Wnumbercard } from '../Wnumbercard';
import Wgauge from '../Wgauge';
import { GlobalResizeObserver } from '../common/globalResizeObserver';
import { FullCrossName, PrefixName } from '../constants';
import Wplaceholder from '../Wplaceholder';
import "./index.css";
var prefix = PrefixName + "-list-container";
export default function ListContainer(_ref) {
var _data$length;
var data = _ref.data,
userConfig = _ref.config,
others = _objectWithoutPropertiesLoose(_ref, _excluded);
if (!(data !== null && data !== void 0 && data.length)) {
return /*#__PURE__*/React.createElement(Wplaceholder, {
empty: true
});
}
var _others$userConfig = _extends({}, 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 = _objectWithoutPropertiesLoose(_others$userConfig, _excluded2);
var marginRight = useMemo(function () {
return typeof margin === 'number' ? margin : margin[1];
}, [margin]);
var marginBottom = useMemo(function () {
return typeof margin === 'number' ? margin : margin[0];
}, [margin]);
var container = useRef(null);
var _useState = useState(1),
columns = _useState[0],
setColumns = _useState[1];
var _useState2 = useState(0),
containerWidth = _useState2[0],
setContainerWidth = _useState2[1];
// const [containerHeight, setContainerHeight] = useState<number>(0);
// 计算内部元素的最大宽度
var maxWidth = useMemo(function () {
return Math.max.apply(Math, data.map(function (item) {
return calcMinWidth(chart, item);
}));
}, [chart, data]);
// 计算列数
var calcColumns = 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]);
useEffect(function () {
calcColumns();
var parent = container.current && container.current.parentElement;
if (parent) {
GlobalResizeObserver.observe(parent, calcColumns);
}
return function () {
var parent = container.current && container.current.parentElement;
if (parent) {
GlobalResizeObserver.unobserve(parent);
}
};
}, [calcColumns]);
// 获取配置项
var config = getDefaultConfig(chart, data, userOptions);
var _config$showDivider = config.showDivider,
showDivider = _config$showDivider === void 0 ? false : _config$showDivider,
otherConfig = _objectWithoutPropertiesLoose(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.createElement("div", {
className: 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.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.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 = _extends({}, otherConfig, item, getChartConfig(chart, item, otherConfig));
return /*#__PURE__*/React.createElement(Fragment, {
key: rowIndex * columns + colIndex
}, /*#__PURE__*/React.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.createElement(Wnumbercard, itemProps), chart === 'Wgauge' && /*#__PURE__*/React.createElement(Wgauge, itemProps)), colIndex !== row.length - 1 && showDivider && /*#__PURE__*/React.createElement("div", {
className: prefix + "-divider-column"
}));
})), rowIndex !== dataByRow.length - 1 && showDivider && /*#__PURE__*/React.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 _extends({}, 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 _extends({}, _chart && ! /*#__PURE__*/React.isValidElement(_chart) ? {
chart: _extends({}, _chart)
} : {}, {
itemStyle: _extends({
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 {};
}