@grafana/ui
Version:
Grafana Components Library
255 lines (250 loc) • 9.47 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var jsxRuntime = require('react/jsx-runtime');
var React = require('react');
var data = require('@grafana/data');
var i18n = require('@grafana/i18n');
var schema = require('@grafana/schema');
var Field = require('../../components/Forms/Field.cjs');
var RadioButtonGroup = require('../../components/Forms/RadioButtonGroup/RadioButtonGroup.cjs');
var Input = require('../../components/Input/Input.cjs');
var Stack = require('../../components/Layout/Stack/Stack.cjs');
var Select = require('../../components/Select/Select.cjs');
var config = require('../../components/uPlot/config.cjs');
"use strict";
function addAxisConfig(builder, defaultConfig) {
addAxisPlacement(builder);
const category = [i18n.t("grafana-ui.builder.axis.category-axis", "Axis")];
builder.addTextInput({
path: "axisLabel",
name: i18n.t("grafana-ui.builder.axis.name-label", "Label"),
category,
defaultValue: "",
settings: {
placeholder: i18n.t("grafana-ui.builder.axis.placeholder-label", "Optional text"),
expandTemplateVars: true
},
showIf: (c) => c.axisPlacement !== schema.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 !== data.FieldType.time && f.type !== data.FieldType.string
});
addAxisWidth(builder);
builder.addRadio({
path: "axisGridShow",
name: i18n.t("grafana-ui.builder.axis.name-grid-lines", "Show grid lines"),
category,
defaultValue: void 0,
settings: {
options: [
{ value: void 0, label: i18n.t("grafana-ui.builder.axis.grid-line-options.label-auto", "Auto") },
{ value: true, label: i18n.t("grafana-ui.builder.axis.grid-line-options.label-on", "On") },
{ value: false, label: i18n.t("grafana-ui.builder.axis.grid-line-options.label-off", "Off") }
]
},
showIf: (c) => c.axisPlacement !== schema.AxisPlacement.Hidden
}).addRadio({
path: "axisColorMode",
name: i18n.t("grafana-ui.builder.axis.color-label", "Color"),
category,
defaultValue: schema.AxisColorMode.Text,
settings: {
options: [
{ value: schema.AxisColorMode.Text, label: i18n.t("grafana-ui.builder.axis.color-options.label-text", "Text") },
{ value: schema.AxisColorMode.Series, label: i18n.t("grafana-ui.builder.axis.color-options.label-series", "Series") }
]
},
showIf: (c) => c.axisPlacement !== schema.AxisPlacement.Hidden
}).addBooleanSwitch({
path: "axisBorderShow",
name: i18n.t("grafana-ui.builder.axis.name-show-border", "Show border"),
category,
defaultValue: false,
showIf: (c) => c.axisPlacement !== schema.AxisPlacement.Hidden
});
builder.addCustomEditor({
id: "scaleDistribution",
path: "scaleDistribution",
name: i18n.t("grafana-ui.builder.axis.name-scale", "Scale"),
category,
useFieldset: true,
editor: ScaleDistributionEditor,
override: ScaleDistributionEditor,
defaultValue: { type: schema.ScaleDistribution.Linear },
shouldApply: (f) => f.type === data.FieldType.number,
process: data.identityOverrideProcessor
}).addBooleanSwitch({
path: "axisCenteredZero",
name: i18n.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) !== schema.ScaleDistribution.Log;
}
}).addNumberInput({
path: "axisSoftMin",
name: i18n.t("grafana-ui.builder.axis.name-soft-min", "Soft min"),
defaultValue: defaultConfig.axisSoftMin,
category,
settings: {
placeholder: i18n.t("grafana-ui.builder.axis.placeholder-soft-min", "See: Standard options > Min")
}
}).addNumberInput({
path: "axisSoftMax",
name: i18n.t("grafana-ui.builder.axis.name-soft-max", "Soft max"),
defaultValue: defaultConfig.axisSoftMax,
category,
settings: {
placeholder: i18n.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 i18n.t("grafana-ui.axis-builder.linear-threshold.warning.nan", "Linear threshold must be a number");
}
if (value === 0) {
return i18n.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 : schema.ScaleDistribution.Linear;
const log = (_b = value == null ? void 0 : value.log) != null ? _b : 2;
const logBaseId = React.useId();
const linearThresholdId = React.useId();
const [localLinearThreshold, setLocalLinearThreshold] = React.useState(
(value == null ? void 0 : value.linearThreshold) != null ? String(value.linearThreshold) : ""
);
const [linearThresholdWarning, setLinearThresholdWarning] = React.useState();
const DISTRIBUTION_OPTIONS = [
{
label: i18n.t("grafana-ui.builder.axis.scale-distribution-editor.distribution-options.label-linear", "Linear"),
value: schema.ScaleDistribution.Linear
},
{
label: i18n.t("grafana-ui.builder.axis.scale-distribution-editor.distribution-options.label-log", "Logarithmic"),
value: schema.ScaleDistribution.Log
},
{
label: i18n.t("grafana-ui.builder.axis.scale-distribution-editor.distribution-options.label-symlog", "Symlog"),
value: schema.ScaleDistribution.Symlog
}
];
return /* @__PURE__ */ jsxRuntime.jsxs(Stack.Stack, { direction: "column", gap: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(
RadioButtonGroup.RadioButtonGroup,
{
value: type,
options: DISTRIBUTION_OPTIONS,
onChange: (v) => {
onChange({
...value,
type: v,
log: v === schema.ScaleDistribution.Linear ? void 0 : log
});
}
}
),
(type === schema.ScaleDistribution.Log || type === schema.ScaleDistribution.Symlog) && /* @__PURE__ */ jsxRuntime.jsx(Field.Field, { label: i18n.t("grafana-ui.axis-builder.log-base", "Log base"), noMargin: true, children: /* @__PURE__ */ jsxRuntime.jsx(
Select.Select,
{
inputId: logBaseId,
options: LOG_DISTRIBUTION_OPTIONS,
value: log,
onChange: (v) => {
onChange({
...value,
log: v.value
});
}
}
) }),
type === schema.ScaleDistribution.Symlog && // ADD error and invalid to field when needed
/* @__PURE__ */ jsxRuntime.jsx(
Field.Field,
{
label: i18n.t("grafana-ui.axis-builder.linear-threshold.label", "Linear threshold"),
invalid: !!linearThresholdWarning,
error: linearThresholdWarning,
style: { marginBottom: 0 },
noMargin: true,
children: /* @__PURE__ */ jsxRuntime.jsx(
Input.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: i18n.t("grafana-ui.builder.axis.name-width", "Width"),
category: [i18n.t("grafana-ui.builder.axis.category-axis", "Axis")],
settings: {
placeholder: i18n.t("grafana-ui.builder.axis.placeholder-width", "Auto")
},
showIf: (c) => c.axisPlacement !== schema.AxisPlacement.Hidden
});
}
function addAxisPlacement(builder, optionsFilter = (placement) => true) {
const graphFieldOptions = config.getGraphFieldOptions();
builder.addRadio({
path: "axisPlacement",
name: i18n.t("grafana-ui.builder.axis.name-placement", "Placement"),
category: [i18n.t("grafana-ui.builder.axis.category-axis", "Axis")],
defaultValue: graphFieldOptions.axisPlacement[0].value,
settings: {
options: graphFieldOptions.axisPlacement.filter((placement) => optionsFilter(placement.value))
}
});
}
exports.ScaleDistributionEditor = ScaleDistributionEditor;
exports.addAxisConfig = addAxisConfig;
exports.addAxisPlacement = addAxisPlacement;
exports.addAxisWidth = addAxisWidth;
//# sourceMappingURL=axis.cjs.map