@antv/f2/lib/components/legend/legendView.js

Charts for mobile visualization.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _util = require("@antv/util");
var _jsx = require("../../jsx");
var Marker = function Marker(_ref) {
  var type = _ref.type,
    color = _ref.color;
  if (type === 'square') {
    return (0, _jsx.jsx)("rect", {
      style: {
        width: '12px',
        height: '12px',
        marginRight: '10px'
      },
      attrs: {
        fill: color
      }
    });
  }
  if (type === 'line') {
    return (0, _jsx.jsx)("line", {
      style: {
        width: '19px',
        marginRight: '10px'
      },
      attrs: {
        strokeStyle: color,
        lineCap: 'round',
        lineWidth: '4px'
      }
    });
  }
  return (0, _jsx.jsx)("circle", {
    style: {
      width: '12px',
      height: '12px',
      marginRight: '10px'
    },
    attrs: {
      fill: color
    }
  });
};
var _default = function _default(props) {
  var items = props.items,
    itemWidth = props.itemWidth,
    itemFormatter = props.itemFormatter,
    style = props.style,
    _props$marker = props.marker,
    marker = _props$marker === void 0 ? 'circle' : _props$marker,
    itemStyle = props.itemStyle,
    nameStyle = props.nameStyle,
    valueStyle = props.valueStyle,
    valuePrefix = props.valuePrefix;
  var formatValue = function formatValue(value) {
    var valuePrefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ': ';
    return "".concat(valuePrefix).concat(value);
  };
  return (0, _jsx.jsx)("group", {
    style: style
  }, items.map(function (item) {
    var color = item.color,
      name = item.name,
      value = item.value,
      filtered = item.filtered,
      tickValue = item.tickValue;
    var valueText = (0, _util.isFunction)(itemFormatter) ? itemFormatter(value, tickValue) : value;
    return (0, _jsx.jsx)("group", {
      className: "legend-item",
      style: (0, _objectSpread2.default)({
        width: itemWidth,
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
        padding: ['6px', '6px', '6px', 0]
      }, itemStyle),
      "data-item": item
    }, (0, _jsx.jsx)(Marker, {
      color: filtered ? '#bfbfbf' : color,
      type: marker
    }), (0, _jsx.jsx)("text", {
      attrs: (0, _objectSpread2.default)({
        fill: filtered ? '#bfbfbf' : '#808080',
        text: name
      }, nameStyle)
    }), valueText ? (0, _jsx.jsx)("text", {
      attrs: (0, _objectSpread2.default)({
        fill: '#808080',
        text: formatValue(valueText, valuePrefix)
      }, valueStyle)
    }) : null);
  }));
};
exports.default = _default;