BarChart: show x tick picker (#43510)

public/app/plugins/panel/barchart/TickSpacingEditor.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { SelectableValue, StandardEditorProps } from '@grafana/data';
+import { Checkbox, HorizontalGroup, RadioButtonGroup, Tooltip } from '@grafana/ui';
+
+const GAPS_OPTIONS: Array<SelectableValue<number>> = [
+  {
+    label: 'None',
+    value: 0,
+    description: 'Show all tick marks',
+  },
+  {
+    label: 'Small',
+    value: 100,
+    description: 'Require 100px spacing',
+  },
+  {
+    label: 'Medium',
+    value: 200,
+    description: 'Require 200px spacing',
+  },
+  {
+    label: 'Large',
+    value: 300,
+    description: 'Require 300px spacing',
+  },
+];
+
+export const TickSpacingEditor: React.FC<StandardEditorProps<number, any>> = (props) => {
+  let value = props.value ?? 0;
+  const isRTL = value < 0;
+  if (isRTL) {
+    value *= -1;
+  }
+  let gap = GAPS_OPTIONS[0];
+  for (const v of GAPS_OPTIONS) {
+    gap = v;
+    if (value <= gap.value!) {
+      break;
+    }
+  }
+
+  const onSpacingChange = (val: number) => {
+    props.onChange(val * (isRTL ? -1 : 1));
+  };
+
+  const onRTLChange = () => {
+    props.onChange(props.value * -1);
+  };
+
+  return (
+    <HorizontalGroup>
+      <RadioButtonGroup value={gap.value} options={GAPS_OPTIONS} onChange={onSpacingChange} />
+      {value !== 0 && (
+        <Tooltip content="Require space from the right side" placement="top">
+          <div>
+            <Checkbox value={isRTL} onChange={onRTLChange} label="RTL" />
+          </div>
+        </Tooltip>
+      )}
+    </HorizontalGroup>
+  );
+};

public/app/plugins/panel/barchart/models.gen.ts

@@ -28,7 +28,7 @@ export const defaultPanelOptions: Partial<PanelOptions> = {
   stacking: StackingMode.None,
   orientation: VizOrientation.Auto,
   xTickLabelRotation: 0,
-  xTickLabelMaxLength: 0,
+  xTickLabelSpacing: 0,
   showValue: VisibilityMode.Auto,
   groupWidth: 0.7,
   barWidth: 0.97,

public/app/plugins/panel/barchart/module.tsx

@@ -14,6 +14,7 @@ import { BarChartFieldConfig, PanelOptions, defaultBarChartFieldConfig, defaultP
 import { BarChartSuggestionsSupplier } from './suggestions';
 import { prepareBarChartDisplayValues } from './utils';
 import { config } from '@grafana/runtime';
+import { TickSpacingEditor } from './TickSpacingEditor';
 
 export const plugin = new PanelPlugin<PanelOptions, BarChartFieldConfig>(BarChartPanel)
   .useFieldConfig({
@@ -113,23 +114,17 @@ export const plugin = new PanelPlugin<PanelOptions, BarChartFieldConfig>(BarChar
         name: 'Bar label max length',
         description: 'Bar labels will be truncated to the length provided',
         settings: {
-          placeholder: 'Auto',
+          placeholder: 'None',
           min: 0,
         },
       })
-      // .addSliderInput({
-      //   path: 'xTickLabelSpacing',
-      //   name: 'Bar label minimum spacing',
-      //   description: 'Bar labels will be skipped to maintain this distance',
-      //   defaultValue: 0,
-      //   settings: {
-      //     min: -300,
-      //     max: 300,
-      //     step: 10,
-      //     marks: { '-300': 'Backward', 0: 'None', 300: 'Forward' },
-      //     included: false,
-      //   },
-      // })
+      .addCustomEditor({
+        id: 'xTickLabelSpacing',
+        path: 'xTickLabelSpacing',
+        name: 'Bar labels minimum spacing',
+        defaultValue: defaultPanelOptions.xTickLabelSpacing,
+        editor: TickSpacingEditor,
+      })
       .addRadio({
         path: 'showValue',
         name: 'Show values',