diff --git a/packages/grafana-ui/src/options/builder/axis.test.tsx b/packages/grafana-ui/src/options/builder/axis.test.tsx
new file mode 100644
index 00000000000..0b749ec6f63
--- /dev/null
+++ b/packages/grafana-ui/src/options/builder/axis.test.tsx
@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ScaleDistribution } from '@grafana/schema';
+
+import { ScaleDistributionEditor } from './axis';
+
+describe('ScaleDistributionEditor', () => {
+ describe('Symlog', () => {
+ it('linear threshold should not dispatch a change for 0', async () => {
+ const onChange = jest.fn();
+ const origValue = { type: ScaleDistribution.Symlog, log: 10 };
+
+ render();
+
+ // so annoying that this doesn't work.
+ // const el = await screen.findByLabelText('Linear threshold');
+ const el = screen.getByTestId('input-wrapper').querySelector('input')!;
+
+ await userEvent.type(el, '0');
+ expect(onChange).not.toHaveBeenCalled();
+
+ await userEvent.type(el, '.');
+ expect(onChange).not.toHaveBeenCalled();
+
+ await userEvent.type(el, '5');
+ expect(onChange).toHaveBeenCalledWith({ linearThreshold: 0.5, ...origValue });
+
+ await userEvent.clear(el);
+ expect(onChange).toHaveBeenCalledWith(origValue);
+ });
+ });
+});
diff --git a/packages/grafana-ui/src/options/builder/axis.tsx b/packages/grafana-ui/src/options/builder/axis.tsx
index d3b6a74ee07..83237cb310c 100644
--- a/packages/grafana-ui/src/options/builder/axis.tsx
+++ b/packages/grafana-ui/src/options/builder/axis.tsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
import {
FieldConfigEditorBuilder,
FieldType,
@@ -126,12 +128,31 @@ const LOG_DISTRIBUTION_OPTIONS: Array> = [
},
];
+const isValidLinearThreshold = (value: number): string | undefined => {
+ 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;
+};
+
/**
* @internal
*/
-export const ScaleDistributionEditor = ({ value, onChange }: StandardEditorProps) => {
+export const ScaleDistributionEditor = ({
+ value,
+ onChange,
+}: Pick, 'value' | 'onChange'>) => {
const type = value?.type ?? ScaleDistribution.Linear;
const log = value?.log ?? 2;
+
+ const [localLinearThreshold, setLocalLinearThreshold] = useState(
+ value?.linearThreshold != null ? String(value.linearThreshold) : ''
+ );
+ const [linearThresholdWarning, setLinearThresholdWarning] = useState();
+
const DISTRIBUTION_OPTIONS: Array> = [
{
label: t('grafana-ui.builder.axis.scale-distribution-editor.distribution-options.label-linear', 'Linear'),
@@ -161,7 +182,7 @@ export const ScaleDistributionEditor = ({ value, onChange }: StandardEditorProps
}}
/>
{(type === ScaleDistribution.Log || type === ScaleDistribution.Symlog) && (
-
+