@alicloud/cloud-charts
Version:
68 lines (66 loc) • 2.33 kB
JavaScript
import React from 'react';
import { PrefixName } from '../../../constants';
import themes from '../../../themes';
import { highlightLegend, clearHighlight } from '../../../common/chartRefs';
import "./index.css";
var Prefix = PrefixName + "-gradient-legend-";
// 默认的颜色映射
var DefaultColors = [{
type: 'green',
color: themes['widgets-color-green']
}, {
type: 'yellow',
color: themes['widgets-color-yellow']
}, {
type: 'orange',
color: themes['widgets-color-orange']
}, {
type: 'red',
color: themes['widgets-color-red']
}];
export default function GradientLegend(_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 legendField = (widgetsCtx === null || widgetsCtx === void 0 ? void 0 : widgetsCtx.legendField) || 'type';
var _ref2 = (config === null || config === void 0 ? void 0 : config.gradient) || {},
_ref2$valueRange = _ref2.valueRange,
valueRange = _ref2$valueRange === void 0 ? [0, 100] : _ref2$valueRange,
_ref2$colors = _ref2.colors,
colors = _ref2$colors === void 0 ? DefaultColors : _ref2$colors;
// hover高亮legend
var activeItem = function activeItem(itemName) {
highlightLegend(chart, function (value) {
return value === itemName;
}, legendField);
};
// 清除高亮
var clearActive = function clearActive() {
clearHighlight(chart);
};
return /*#__PURE__*/React.createElement("div", {
className: Prefix + "container"
}, /*#__PURE__*/React.createElement("div", null, valueRange === null || valueRange === void 0 ? void 0 : valueRange[0]), /*#__PURE__*/React.createElement("div", {
className: Prefix + "items"
}, colors.map(function (_ref3) {
var type = _ref3.type,
color = _ref3.color;
return /*#__PURE__*/React.createElement("div", {
key: type,
style: {
width: 50,
height: 20,
background: color
},
onMouseEnter: function onMouseEnter() {
activeItem(type);
},
onMouseLeave: function onMouseLeave() {
clearActive();
}
});
})), /*#__PURE__*/React.createElement("div", null, valueRange === null || valueRange === void 0 ? void 0 : valueRange[1]));
}