@alicloud/cloud-charts
Version:
213 lines (190 loc) • 9.01 kB
JavaScript
import React, { useState, useEffect, useMemo, useRef } from 'react';
import themes from '../../../themes';
import { PrefixName } from '../../../constants';
import { getStatistics, filterLegend, highlightLegend, clearHighlight } from '../../../common/chartRefs';
import WidgetsTooltip from '../../../common/Tooltip';
import LegendMarker from '../../../common/LegendMarker';
import { getText } from '../../../ChartProvider';
import "./index.css";
var prefix = PrefixName + "-table-legend";
export default function TableLegend(_ref) {
var config = _ref.config,
chart = _ref.chart,
_ref$legendItems = _ref.legendItems,
legendItems = _ref$legendItems === void 0 ? [] : _ref$legendItems;
// @ts-ignore
var widgetsCtx = chart.widgetsCtx;
var _useState = useState(''),
activedItem = _useState[0],
setActivedItem = _useState[1];
var _useState2 = useState([]),
filteredItems = _useState2[0],
setFilteredItems = _useState2[1];
var legendField = (widgetsCtx === null || widgetsCtx === void 0 ? void 0 : widgetsCtx.legendField) || 'type';
var position = config.position.split('-')[0];
var containerWidth = widgetsCtx === null || widgetsCtx === void 0 ? void 0 : widgetsCtx.size[0];
var containerHeight = (widgetsCtx === null || widgetsCtx === void 0 ? void 0 : widgetsCtx.size[1]) || 200;
var statistics = useMemo(function () {
var _config$table;
return (config === null || config === void 0 ? void 0 : (_config$table = config.table) === null || _config$table === void 0 ? void 0 : _config$table.statistics) || [];
}, [config === null || config === void 0 ? void 0 : config.table]);
var statisticsRes = useMemo(function () {
return getStatistics(chart, statistics, legendField);
}, [chart, statistics, config]); // 计算legend宽高
var height = useMemo(function () {
return Math.min(containerHeight * (position === 'right' ? 1 : 0.3), 20 * legendItems.length + ((statistics === null || statistics === void 0 ? void 0 : statistics.length) > 0 ? 20 : 0));
}, [containerHeight, position, legendItems, statistics]);
var width = useMemo(function () {
return containerWidth * (position === 'right' ? 0.5 : 1);
}, [containerWidth, position]); // 修改图表宽高
useEffect(function () {
var chartHeight = position === 'right' ? containerHeight : containerHeight - height;
var chartWidth = position === 'right' ? containerWidth - width : containerWidth;
var chartDom = widgetsCtx === null || widgetsCtx === void 0 ? void 0 : widgetsCtx.chartDom; // @ts-ignore
chartDom.style.width = chartWidth + "px"; // @ts-ignore
chartDom.style.height = chartHeight + "px";
chart.changeSize(chartWidth, chartHeight);
}, [containerHeight, containerWidth, position, height, width, config]);
useEffect(function () {
setFilteredItems([]);
}, [config]);
useEffect(function () {
filterLegend(chart, function (value) {
return !filteredItems.includes(value);
}, legendField);
}, [filteredItems]);
var activeItem = function activeItem(itemName) {
highlightLegend(chart, function (value) {
return value === itemName;
}, legendField);
};
var clearActive = function clearActive() {
clearHighlight(chart);
};
useEffect(function () {
clearActive();
if (activedItem) {
activeItem(activedItem);
}
}, [activedItem]);
return /*#__PURE__*/React.createElement("table", {
className: prefix + "-container",
style: {
maxWidth: width,
maxHeight: height,
// marginTop: position === 'right' ? 0 : 10,
marginLeft: position === 'right' ? 10 : 0
}
}, (statistics === null || statistics === void 0 ? void 0 : statistics.length) > 0 && /*#__PURE__*/React.createElement("thead", {
className: prefix + "-thead"
}, /*#__PURE__*/React.createElement("tr", {
className: prefix + "-tr " + prefix + "-legend-title",
style: {
gridTemplateColumns: "8px minmax(80px, 100%) repeat(" + (statistics === null || statistics === void 0 ? void 0 : statistics.length) + ", 100px)"
}
}, /*#__PURE__*/React.createElement("th", null), /*#__PURE__*/React.createElement("th", null), statistics === null || statistics === void 0 ? void 0 : statistics.map(function (statistic) {
var _widgetsCtx$context;
return /*#__PURE__*/React.createElement("th", {
key: statistic
}, getText(statistic, widgetsCtx === null || widgetsCtx === void 0 ? void 0 : widgetsCtx.language, widgetsCtx === null || widgetsCtx === void 0 ? void 0 : (_widgetsCtx$context = widgetsCtx.context) === null || _widgetsCtx$context === void 0 ? void 0 : _widgetsCtx$context.locale));
}))), /*#__PURE__*/React.createElement("tbody", {
className: prefix + "-tbody",
style: {
maxHeight: height - ((statistics === null || statistics === void 0 ? void 0 : statistics.length) > 0 ? 20 : 0)
}
}, legendItems.map(function (legendItem) {
var _legendItem$id;
var name = legendItem.name,
marker = legendItem.marker;
var id = (_legendItem$id = legendItem.id) !== null && _legendItem$id !== void 0 ? _legendItem$id : name;
return /*#__PURE__*/React.createElement("tr", {
key: id,
className: prefix + "-tr " + prefix + "-legend-item",
style: {
gridTemplateColumns: (statistics === null || statistics === void 0 ? void 0 : statistics.length) > 0 ? "8px minmax(80px, 100%) repeat(" + (statistics === null || statistics === void 0 ? void 0 : statistics.length) + ", 100px)" : '8px minmax(80px, 100%)',
color: !filteredItems.includes(id) ? activedItem === id ? themes['widgets-legend-text-highlight'] : themes['widgets-legend-text-normal'] : themes['widgets-color-disable']
},
onMouseEnter: function onMouseEnter() {
if (!filteredItems.includes(id)) {
setActivedItem(id);
}
},
onMouseLeave: function onMouseLeave() {
if (!filteredItems.includes(id)) {
setActivedItem('');
}
},
onClick: function onClick() {
if ((filteredItems === null || filteredItems === void 0 ? void 0 : filteredItems.length) === (legendItems === null || legendItems === void 0 ? void 0 : legendItems.length) - 1 && !filteredItems.includes(id)) {
setFilteredItems([]);
} else {
setFilteredItems(legendItems.map(function (item) {
return item.id || item.name;
}).filter(function (legendName) {
return legendName !== id;
}));
}
}
}, /*#__PURE__*/React.createElement("td", {
className: prefix + "-marker",
onClick: function onClick(event) {
if (filteredItems.includes(id)) {
setFilteredItems(function (pre) {
return pre.filter(function (filteredItem) {
return filteredItem !== id;
});
});
} else if (filteredItems.length !== legendItems.length - 1) {
setFilteredItems(function (pre) {
return [].concat(pre, [id]);
});
clearActive();
} else {
setFilteredItems([]);
}
event.stopPropagation();
}
}, /*#__PURE__*/React.createElement(LegendMarker, {
marker: marker,
disable: filteredItems.includes(id)
})), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(LegendName, {
name: name
})), statistics === null || statistics === void 0 ? void 0 : statistics.map(function (statistic) {
var _statisticsRes$id;
var value = (_statisticsRes$id = statisticsRes[id]) === null || _statisticsRes$id === void 0 ? void 0 : _statisticsRes$id[statistic];
if (value || value === 0) {
if (config !== null && config !== void 0 && config.valueFormatter && typeof (config === null || config === void 0 ? void 0 : config.valueFormatter) === 'function') {
value = config === null || config === void 0 ? void 0 : config.valueFormatter(value);
} else {
var _config$table2;
value = formatValue(value, config === null || config === void 0 ? void 0 : (_config$table2 = config.table) === null || _config$table2 === void 0 ? void 0 : _config$table2.decimal);
}
} else {
value = '-';
}
return /*#__PURE__*/React.createElement("td", {
className: prefix + "-statistics",
key: statistic
}, value);
}));
})));
}
function LegendName(_ref2) {
var _ref2$name = _ref2.name,
name = _ref2$name === void 0 ? '' : _ref2$name;
var ref = useRef(null);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
ref: ref,
className: prefix + "-name"
}, name), /*#__PURE__*/React.createElement(WidgetsTooltip, {
ref: ref,
content: name
}));
}
/** 格式化数字 */
function formatValue(value, digits) {
if (digits === void 0) {
digits = 3;
}
return typeof value === 'number' ? value.toFixed(digits) : value.slice(0, digits + 2);
}