@grafana/ui/dist/cjs/options/builder/legend.cjs

Grafana Components Library

'use strict';

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

var jsxRuntime = require('react/jsx-runtime');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var schema = require('@grafana/schema');
var Input = require('../../components/Input/Input.cjs');

"use strict";
function addLegendOptions(builder, includeLegendCalcs = true, showLegend = true) {
  const category = [i18n.t("grafana-ui.builder.legend.category", "Legend")];
  builder.addBooleanSwitch({
    path: "legend.showLegend",
    name: i18n.t("grafana-ui.builder.legend.name-visibility", "Visibility"),
    category,
    description: "",
    defaultValue: showLegend
  }).addRadio({
    path: "legend.displayMode",
    name: i18n.t("grafana-ui.builder.legend.name-mode", "Mode"),
    category,
    description: "",
    defaultValue: schema.LegendDisplayMode.List,
    settings: {
      options: [
        { value: schema.LegendDisplayMode.List, label: i18n.t("grafana-ui.builder.legend.mode-options.label-list", "List") },
        { value: schema.LegendDisplayMode.Table, label: i18n.t("grafana-ui.builder.legend.mode-options.label-table", "Table") }
      ]
    },
    showIf: (c) => c.legend.showLegend
  }).addRadio({
    path: "legend.placement",
    name: i18n.t("grafana-ui.builder.legend.name-placement", "Placement"),
    category,
    description: "",
    defaultValue: "bottom",
    settings: {
      options: [
        { value: "bottom", label: i18n.t("grafana-ui.builder.legend.placement-options.label-bottom", "Bottom") },
        { value: "right", label: i18n.t("grafana-ui.builder.legend.placement-options.label-right", "Right") }
      ]
    },
    showIf: (c) => c.legend.showLegend
  }).addCustomEditor({
    id: "legend.width",
    path: "legend.width",
    name: i18n.t("grafana-ui.builder.legend.name-width", "Width"),
    category,
    showIf: (c) => c.legend.showLegend && c.legend.placement === "right",
    editor: ({ onChange, ...props }) => {
      return /* @__PURE__ */ jsxRuntime.jsx(
        Input.Input,
        {
          ...props,
          placeholder: i18n.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: i18n.t("grafana-ui.builder.legend.name-overflow", "Overflow"),
    category,
    description: "",
    defaultValue: "ellipsis",
    settings: {
      options: [
        { value: "ellipsis", label: i18n.t("grafana-ui.builder.legend.overflow-options.label-ellipsis", "Ellipsis") },
        { value: "wrap", label: i18n.t("grafana-ui.builder.legend.overflow-options.label-wrap", "Wrap") }
      ]
    },
    showIf: (c) => c.legend.showLegend && c.legend.displayMode === schema.LegendDisplayMode.Table
  }).addNumberInput({
    path: "legend.limit",
    name: i18n.t("grafana-ui.builder.legend.name-limit", "Limit"),
    category,
    description: i18n.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: i18n.t("grafana-ui.builder.legend.name-values", "Values"),
      category,
      description: i18n.t("grafana-ui.builder.legend.description-values", "Select values or calculations to show in legend"),
      editor: data.standardEditorsRegistry.get("stats-picker").editor,
      defaultValue: [],
      settings: {
        allowMultiple: true
      },
      showIf: (currentConfig) => currentConfig.legend.showLegend !== false
    });
  }
}

exports.addLegendOptions = addLegendOptions;
//# sourceMappingURL=legend.cjs.map