@grafana/ui
Version:
Grafana Components Library
248 lines (245 loc) • 8.96 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { useId, useState } from 'react';
import { FieldType, identityOverrideProcessor } from '@grafana/data';
import { t } from '@grafana/i18n';
import { AxisPlacement, AxisColorMode, ScaleDistribution } from '@grafana/schema';
import { Field } from '../../components/Forms/Field.mjs';
import { RadioButtonGroup } from '../../components/Forms/RadioButtonGroup/RadioButtonGroup.mjs';
import { Input } from '../../components/Input/Input.mjs';
import { Stack } from '../../components/Layout/Stack/Stack.mjs';
import { Select } from '../../components/Select/Select.mjs';
import { getGraphFieldOptions } from '../../components/uPlot/config.mjs';
"use strict";
function addAxisConfig(builder, defaultConfig) {
addAxisPlacement(builder);
const category = [t("grafana-ui.builder.axis.category-axis", "Axis")];
builder.addTextInput({
path: "axisLabel",
name: t("grafana-ui.builder.axis.name-label", "Label"),
category,
defaultValue: "",
settings: {
placeholder: t("grafana-ui.builder.axis.placeholder-label", "Optional text"),
expandTemplateVars: true
},
showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden,
// Do not apply default settings to time and string fields which are used as x-axis fields in Time series and Bar chart panels
shouldApply: (f) => f.type !== FieldType.time && f.type !== FieldType.string
});
addAxisWidth(builder);
builder.addRadio({
path: "axisGridShow",
name: t("grafana-ui.builder.axis.name-grid-lines", "Show grid lines"),
category,
defaultValue: void 0,
settings: {
options: [
{ value: void 0, label: t("grafana-ui.builder.axis.grid-line-options.label-auto", "Auto") },
{ value: true, label: t("grafana-ui.builder.axis.grid-line-options.label-on", "On") },
{ value: false, label: t("grafana-ui.builder.axis.grid-line-options.label-off", "Off") }
]
},
showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden
}).addRadio({
path: "axisColorMode",
name: t("grafana-ui.builder.axis.color-label", "Color"),
category,
defaultValue: AxisColorMode.Text,
settings: {
options: [
{ value: AxisColorMode.Text, label: t("grafana-ui.builder.axis.color-options.label-text", "Text") },
{ value: AxisColorMode.Series, label: t("grafana-ui.builder.axis.color-options.label-series", "Series") }
]
},
showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden
}).addBooleanSwitch({
path: "axisBorderShow",
name: t("grafana-ui.builder.axis.name-show-border", "Show border"),
category,
defaultValue: false,
showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden
});
builder.addCustomEditor({
id: "scaleDistribution",
path: "scaleDistribution",
name: t("grafana-ui.builder.axis.name-scale", "Scale"),
category,
useFieldset: true,
editor: ScaleDistributionEditor,
override: ScaleDistributionEditor,
defaultValue: { type: ScaleDistribution.Linear },
shouldApply: (f) => f.type === FieldType.number,
process: identityOverrideProcessor
}).addBooleanSwitch({
path: "axisCenteredZero",
name: t("grafana-ui.builder.axis.name-centered-zero", "Centered zero"),
category,
defaultValue: false,
showIf: (c) => {
var _a;
return ((_a = c.scaleDistribution) == null ? void 0 : _a.type) !== ScaleDistribution.Log;
}
}).addNumberInput({
path: "axisSoftMin",
name: t("grafana-ui.builder.axis.name-soft-min", "Soft min"),
defaultValue: defaultConfig.axisSoftMin,
category,
settings: {
placeholder: t("grafana-ui.builder.axis.placeholder-soft-min", "See: Standard options > Min")
}
}).addNumberInput({
path: "axisSoftMax",
name: t("grafana-ui.builder.axis.name-soft-max", "Soft max"),
defaultValue: defaultConfig.axisSoftMax,
category,
settings: {
placeholder: t("grafana-ui.builder.axis.placeholder-soft-max", "See: Standard options > Max")
}
});
}
const LOG_DISTRIBUTION_OPTIONS = [
{
label: "2",
value: 2
},
{
label: "10",
value: 10
}
];
const isValidLinearThreshold = (value) => {
if (Number.isNaN(value)) {
return t("grafana-ui.axis-builder.linear-threshold.warning.nan", "Linear threshold must be a number");
}
if (value === 0) {
return t("grafana-ui.axis-builder.linear-threshold.warning.zero", "Linear threshold cannot be zero");
}
return;
};
const ScaleDistributionEditor = ({
value,
onChange
}) => {
var _a, _b;
const type = (_a = value == null ? void 0 : value.type) != null ? _a : ScaleDistribution.Linear;
const log = (_b = value == null ? void 0 : value.log) != null ? _b : 2;
const logBaseId = useId();
const linearThresholdId = useId();
const [localLinearThreshold, setLocalLinearThreshold] = useState(
(value == null ? void 0 : value.linearThreshold) != null ? String(value.linearThreshold) : ""
);
const [linearThresholdWarning, setLinearThresholdWarning] = useState();
const DISTRIBUTION_OPTIONS = [
{
label: t("grafana-ui.builder.axis.scale-distribution-editor.distribution-options.label-linear", "Linear"),
value: ScaleDistribution.Linear
},
{
label: t("grafana-ui.builder.axis.scale-distribution-editor.distribution-options.label-log", "Logarithmic"),
value: ScaleDistribution.Log
},
{
label: t("grafana-ui.builder.axis.scale-distribution-editor.distribution-options.label-symlog", "Symlog"),
value: ScaleDistribution.Symlog
}
];
return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 2, children: [
/* @__PURE__ */ jsx(
RadioButtonGroup,
{
value: type,
options: DISTRIBUTION_OPTIONS,
onChange: (v) => {
onChange({
...value,
type: v,
log: v === ScaleDistribution.Linear ? void 0 : log
});
}
}
),
(type === ScaleDistribution.Log || type === ScaleDistribution.Symlog) && /* @__PURE__ */ jsx(Field, { label: t("grafana-ui.axis-builder.log-base", "Log base"), noMargin: true, children: /* @__PURE__ */ jsx(
Select,
{
inputId: logBaseId,
options: LOG_DISTRIBUTION_OPTIONS,
value: log,
onChange: (v) => {
onChange({
...value,
log: v.value
});
}
}
) }),
type === ScaleDistribution.Symlog && // ADD error and invalid to field when needed
/* @__PURE__ */ jsx(
Field,
{
label: t("grafana-ui.axis-builder.linear-threshold.label", "Linear threshold"),
invalid: !!linearThresholdWarning,
error: linearThresholdWarning,
style: { marginBottom: 0 },
noMargin: true,
children: /* @__PURE__ */ jsx(
Input,
{
id: linearThresholdId,
placeholder: "1",
value: localLinearThreshold,
invalid: !!linearThresholdWarning,
type: "number",
onBlur: (ev) => {
if (ev.currentTarget.value) {
setLinearThresholdWarning(isValidLinearThreshold(Number(ev.currentTarget.value)));
}
},
onChange: (v) => {
setLocalLinearThreshold(v.currentTarget.value);
if (v.currentTarget.value === "") {
const newValue = { ...value };
delete newValue.linearThreshold;
onChange(newValue);
setLinearThresholdWarning(void 0);
return;
}
const asNumber = Number(v.currentTarget.value);
if (isValidLinearThreshold(asNumber) == null) {
setLinearThresholdWarning(void 0);
onChange({
...value,
linearThreshold: asNumber
});
}
}
}
)
}
)
] });
};
function addAxisWidth(builder) {
builder.addNumberInput({
path: "axisWidth",
name: t("grafana-ui.builder.axis.name-width", "Width"),
category: [t("grafana-ui.builder.axis.category-axis", "Axis")],
settings: {
placeholder: t("grafana-ui.builder.axis.placeholder-width", "Auto")
},
showIf: (c) => c.axisPlacement !== AxisPlacement.Hidden
});
}
function addAxisPlacement(builder, optionsFilter = (placement) => true) {
const graphFieldOptions = getGraphFieldOptions();
builder.addRadio({
path: "axisPlacement",
name: t("grafana-ui.builder.axis.name-placement", "Placement"),
category: [t("grafana-ui.builder.axis.category-axis", "Axis")],
defaultValue: graphFieldOptions.axisPlacement[0].value,
settings: {
options: graphFieldOptions.axisPlacement.filter((placement) => optionsFilter(placement.value))
}
});
}
export { ScaleDistributionEditor, addAxisConfig, addAxisPlacement, addAxisWidth };
//# sourceMappingURL=axis.mjs.map