@grafana/ui/dist/cjs/components/VizLegend/SeriesIcon.cjs

Grafana Components Library

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var jsxRuntime = require('react/jsx-runtime');
var css = require('@emotion/css');
var React = require('react');
var data = require('@grafana/data');
var ThemeContext = require('../../themes/ThemeContext.cjs');

function _interopNamespaceCompat(e) {
  if (e && typeof e === 'object' && 'default' in e) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var React__namespace = /*#__PURE__*/_interopNamespaceCompat(React);

"use strict";
const SeriesIcon = React__namespace.memo(
  React__namespace.forwardRef(({ color, className, gradient, lineStyle, ...restProps }, ref) => {
    var _a, _b;
    const theme = ThemeContext.useTheme2();
    const styles = ThemeContext.useStyles2(getStyles);
    let cssColor;
    if (gradient) {
      const colors = (_b = (_a = data.fieldColorModeRegistry.get(gradient)).getColors) == null ? void 0 : _b.call(_a, theme);
      if (colors == null ? void 0 : colors.length) {
        cssColor = `linear-gradient(90deg, ${colors.join(", ")})`;
      } else {
        cssColor = theme.visualization.getColorByName("");
      }
    } else {
      cssColor = color;
    }
    let customStyle;
    if ((lineStyle == null ? void 0 : lineStyle.fill) === "dot" && !gradient) {
      customStyle = {
        backgroundImage: `radial-gradient(circle at 2px 2px, ${color} 2px, transparent 0)`,
        backgroundSize: "4px 4px",
        backgroundRepeat: "space"
      };
    } else if ((lineStyle == null ? void 0 : lineStyle.fill) === "dash" && !gradient) {
      customStyle = {
        backgroundImage: `linear-gradient(to right, ${color} 100%, transparent 0%)`,
        backgroundSize: "6px 4px",
        backgroundRepeat: "space"
      };
    } else {
      customStyle = {
        background: cssColor,
        borderRadius: theme.shape.radius.pill
      };
    }
    return /* @__PURE__ */ jsxRuntime.jsx(
      "div",
      {
        "data-testid": "series-icon",
        ref,
        className: css.cx(className, styles.forcedColors, styles.container),
        style: customStyle,
        ...restProps
      }
    );
  })
);
const getStyles = (theme) => ({
  container: css.css({
    display: "inline-block",
    verticalAlign: "middle",
    width: "14px",
    height: "4px"
  }),
  forcedColors: css.css({
    "@media (forced-colors: active)": {
      forcedColorAdjust: "none"
    }
  })
});
SeriesIcon.displayName = "SeriesIcon";

exports.SeriesIcon = SeriesIcon;
//# sourceMappingURL=SeriesIcon.cjs.map