@grafana/ui/dist/esm/options/builder/legend.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { standardEditorsRegistry } from '@grafana/data';
import { t } from '@grafana/i18n';
import { LegendDisplayMode } from '@grafana/schema';
import { Input } from '../../components/Input/Input.mjs';

"use strict";
function addLegendOptions(builder, includeLegendCalcs = true, showLegend = true) {
  const category = [t("grafana-ui.builder.legend.category", "Legend")];
  builder.addBooleanSwitch({
    path: "legend.showLegend",
    name: t("grafana-ui.builder.legend.name-visibility", "Visibility"),
    category,
    description: "",
    defaultValue: showLegend
  }).addRadio({
    path: "legend.displayMode",
    name: t("grafana-ui.builder.legend.name-mode", "Mode"),
    category,
    description: "",
    defaultValue: LegendDisplayMode.List,
    settings: {
      options: [
        { value: LegendDisplayMode.List, label: t("grafana-ui.builder.legend.mode-options.label-list", "List") },
        { value: LegendDisplayMode.Table, label: t("grafana-ui.builder.legend.mode-options.label-table", "Table") }
      ]
    },
    showIf: (c) => c.legend.showLegend
  }).addRadio({
    path: "legend.placement",
    name: t("grafana-ui.builder.legend.name-placement", "Placement"),
    category,
    description: "",
    defaultValue: "bottom",
    settings: {
      options: [
        { value: "bottom", label: t("grafana-ui.builder.legend.placement-options.label-bottom", "Bottom") },
        { value: "right", label: t("grafana-ui.builder.legend.placement-options.label-right", "Right") }
      ]
    },
    showIf: (c) => c.legend.showLegend
  }).addCustomEditor({
    id: "legend.width",
    path: "legend.width",
    name: t("grafana-ui.builder.legend.name-width", "Width"),
    category,
    showIf: (c) => c.legend.showLegend && c.legend.placement === "right",
    editor: ({ onChange, ...props }) => {
      return /* @__PURE__ */ jsx(
        Input,
        {
          ...props,
          placeholder: t("grafana-ui.builder.legend.placeholder-width", "Auto, px, or % (e.g. 220 or 35%)"),
          onChange: (e) => {
            let value = e.currentTarget.value.trim();
            if (value === "") {
              value = void 0;
            }
            let numeric = Number(value);
            onChange(Number.isNaN(numeric) ? value : numeric);
          },
          onInputCapture: (e) => {
            e.stopPropagation();
          }
        }
      );
    }
  }).addRadio({
    path: "legend.overflow",
    name: t("grafana-ui.builder.legend.name-overflow", "Overflow"),
    category,
    description: "",
    defaultValue: "ellipsis",
    settings: {
      options: [
        { value: "ellipsis", label: t("grafana-ui.builder.legend.overflow-options.label-ellipsis", "Ellipsis") },
        { value: "wrap", label: t("grafana-ui.builder.legend.overflow-options.label-wrap", "Wrap") }
      ]
    },
    showIf: (c) => c.legend.showLegend && c.legend.displayMode === LegendDisplayMode.Table
  }).addNumberInput({
    path: "legend.limit",
    name: t("grafana-ui.builder.legend.name-limit", "Limit"),
    category,
    description: t("grafana-ui.builder.legend.description-limit", "Limits how many items are shown by default"),
    showIf: (c) => c.legend.showLegend
  });
  if (includeLegendCalcs) {
    builder.addCustomEditor({
      id: "legend.calcs",
      path: "legend.calcs",
      name: t("grafana-ui.builder.legend.name-values", "Values"),
      category,
      description: t("grafana-ui.builder.legend.description-values", "Select values or calculations to show in legend"),
      editor: standardEditorsRegistry.get("stats-picker").editor,
      defaultValue: [],
      settings: {
        allowMultiple: true
      },
      showIf: (currentConfig) => currentConfig.legend.showLegend !== false
    });
  }
}

export { addLegendOptions };
//# sourceMappingURL=legend.mjs.map