@alicloud/cloud-charts
Version:
231 lines (195 loc) • 9.76 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
exports.__esModule = true;
exports["default"] = TableLegend;
var _react = _interopRequireWildcard(require("react"));
var _themes = _interopRequireDefault(require("../../../themes"));
var _constants = require("../../../constants");
var _chartRefs = require("../../../common/chartRefs");
var _Tooltip = _interopRequireDefault(require("../../../common/Tooltip"));
var _LegendMarker = _interopRequireDefault(require("../../../common/LegendMarker"));
var _ChartProvider = require("../../../ChartProvider");
require("./index.css");
var prefix = _constants.PrefixName + "-table-legend";
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 = (0, _react.useState)(''),
activedItem = _useState[0],
setActivedItem = _useState[1];
var _useState2 = (0, _react.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 = (0, _react.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 = (0, _react.useMemo)(function () {
return (0, _chartRefs.getStatistics)(chart, statistics, legendField);
}, [chart, statistics, config]); // 计算legend宽高
var height = (0, _react.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 = (0, _react.useMemo)(function () {
return containerWidth * (position === 'right' ? 0.5 : 1);
}, [containerWidth, position]); // 修改图表宽高
(0, _react.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]);
(0, _react.useEffect)(function () {
setFilteredItems([]);
}, [config]);
(0, _react.useEffect)(function () {
(0, _chartRefs.filterLegend)(chart, function (value) {
return !filteredItems.includes(value);
}, legendField);
}, [filteredItems]);
var activeItem = function activeItem(itemName) {
(0, _chartRefs.highlightLegend)(chart, function (value) {
return value === itemName;
}, legendField);
};
var clearActive = function clearActive() {
(0, _chartRefs.clearHighlight)(chart);
};
(0, _react.useEffect)(function () {
clearActive();
if (activedItem) {
activeItem(activedItem);
}
}, [activedItem]);
return /*#__PURE__*/_react["default"].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["default"].createElement("thead", {
className: prefix + "-thead"
}, /*#__PURE__*/_react["default"].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["default"].createElement("th", null), /*#__PURE__*/_react["default"].createElement("th", null), statistics === null || statistics === void 0 ? void 0 : statistics.map(function (statistic) {
var _widgetsCtx$context;
return /*#__PURE__*/_react["default"].createElement("th", {
key: statistic
}, (0, _ChartProvider.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["default"].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["default"].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["default"]['widgets-legend-text-highlight'] : _themes["default"]['widgets-legend-text-normal'] : _themes["default"]['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["default"].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["default"].createElement(_LegendMarker["default"], {
marker: marker,
disable: filteredItems.includes(id)
})), /*#__PURE__*/_react["default"].createElement("td", null, /*#__PURE__*/_react["default"].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["default"].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 = (0, _react.useRef)(null);
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
ref: ref,
className: prefix + "-name"
}, name), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
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);
}