@alicloud/cloud-charts/lib/aop/component/GradientLegend/index.js


"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = GradientLegend;
var _react = _interopRequireDefault(require("react"));
var _constants = require("../../../constants");
var _themes = _interopRequireDefault(require("../../../themes"));
var _chartRefs = require("../../../common/chartRefs");
require("./index.css");
var Prefix = _constants.PrefixName + "-gradient-legend-";
// 默认的颜色映射
var DefaultColors = [{
  type: 'green',
  color: _themes["default"]['widgets-color-green']
}, {
  type: 'yellow',
  color: _themes["default"]['widgets-color-yellow']
}, {
  type: 'orange',
  color: _themes["default"]['widgets-color-orange']
}, {
  type: 'red',
  color: _themes["default"]['widgets-color-red']
}];
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) {
    (0, _chartRefs.highlightLegend)(chart, function (value) {
      return value === itemName;
    }, legendField);
  };

  // 清除高亮
  var clearActive = function clearActive() {
    (0, _chartRefs.clearHighlight)(chart);
  };
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: Prefix + "container"
  }, /*#__PURE__*/_react["default"].createElement("div", null, valueRange === null || valueRange === void 0 ? void 0 : valueRange[0]), /*#__PURE__*/_react["default"].createElement("div", {
    className: Prefix + "items"
  }, colors.map(function (_ref3) {
    var type = _ref3.type,
      color = _ref3.color;
    return /*#__PURE__*/_react["default"].createElement("div", {
      key: type,
      style: {
        width: 50,
        height: 20,
        background: color
      },
      onMouseEnter: function onMouseEnter() {
        activeItem(type);
      },
      onMouseLeave: function onMouseLeave() {
        clearActive();
      }
    });
  })), /*#__PURE__*/_react["default"].createElement("div", null, valueRange === null || valueRange === void 0 ? void 0 : valueRange[1]));
}