Barchart docs and styling fix (#41362)

* Barchart docs and styling fix

* Fix name of max length

* rename valueRotation -> xTickLabelRotation

also limits slider padding on sliders without marks

docs/sources/visualizations/bar-chart.md

@@ -42,6 +42,14 @@ Use these options to refine your visualization.
 - **Horizontal** - Will make the X axis the category axis.
 - **Vertical** - Will make the Y axis the category axis.
 
+### Rotate bar labels
+
+When the graph is in vertical orientation you can use this setting to rotate the labels under the bars. Useful if the labels are long and overlap.
+
+### Bar label max length
+
+Sets the max length of the bar label. Labels longer than the max length will be truncated and `...` will be appended to the end.
+
 ### Show values
 
 This controls whether values are shown on top or to the left of bars.

packages/grafana-ui/src/components/Slider/Slider.tsx

@@ -26,7 +26,7 @@ export const Slider: FunctionComponent<SliderProps> = ({
 }) => {
   const isHorizontal = orientation === 'horizontal';
   const theme = useTheme2();
-  const styles = getStyles(theme, isHorizontal);
+  const styles = getStyles(theme, isHorizontal, Boolean(marks));
   const SliderWithTooltip = SliderComponent;
   const [sliderValue, setSliderValue] = useState<number>(value ?? min);
 

packages/grafana-ui/src/components/Slider/styles.ts

@@ -3,7 +3,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { css as cssCore } from '@emotion/react';
 import { css } from '@emotion/css';
 
-export const getStyles = stylesFactory((theme: GrafanaTheme2, isHorizontal: boolean) => {
+export const getStyles = stylesFactory((theme: GrafanaTheme2, isHorizontal: boolean, hasMarks = false) => {
   const { spacing } = theme;
   const railColor = theme.colors.border.strong;
   const trackColor = theme.colors.primary.main;
@@ -14,7 +14,8 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, isHorizontal: bool
   return {
     container: css`
       width: 100%;
-      margin: ${isHorizontal ? 'none' : `${spacing(1, 3, 1, 1)}`};
+      margin: ${isHorizontal ? 'inherit' : `${spacing(1, 3, 1, 1)}`};
+      padding-bottom: ${isHorizontal && hasMarks ? theme.spacing(1) : 'inherit'};
       height: ${isHorizontal ? 'auto' : '100%'};
     `,
     slider: css`

packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts

@@ -12,7 +12,7 @@ export interface AxisProps {
   show?: boolean;
   size?: number | null;
   gap?: number;
-  valueRotation?: number;
+  tickLabelRotation?: number;
   placement?: AxisPlacement;
   grid?: Axis.Grid;
   ticks?: Axis.Ticks;
@@ -98,7 +98,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
       isTime,
       timeZone,
       theme,
-      valueRotation,
+      tickLabelRotation,
       size,
     } = this.props;
 
@@ -121,7 +121,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder<AxisProps, Axis> {
         ((self, values, axisIdx) => {
           return this.calculateAxisSize(self, values, axisIdx);
         }),
-      rotate: valueRotation,
+      rotate: tickLabelRotation,
       gap,
 
       labelGap: 0,

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

@@ -17,8 +17,8 @@ export interface BarChartProps
 const propsToDiff: Array<string | PropDiffFn> = [
   'orientation',
   'barWidth',
-  'valueRotation',
+  'xTickLabelRotation',
-  'valueMaxLength',
+  'xTickLabelMaxLength',
   'groupWidth',
   'stacking',
   'showValue',
@@ -64,8 +64,8 @@ export const BarChart: React.FC<BarChartProps> = (props) => {
       legend,
       tooltip,
       text,
-      valueRotation,
+      xTickLabelRotation,
-      valueMaxLength,
+      xTickLabelMaxLength,
     } = props;
 
     return preparePlotConfigBuilder({
@@ -78,8 +78,8 @@ export const BarChart: React.FC<BarChartProps> = (props) => {
       barWidth,
       showValue,
       groupWidth,
-      valueRotation,
+      xTickLabelRotation,
-      valueMaxLength,
+      xTickLabelMaxLength,
       stacking,
       legend,
       tooltip,

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

@@ -23,10 +23,10 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({ data, options, w
     return options.orientation;
   }, [width, height, options.orientation]);
 
-  const valueMaxLength = useMemo(() => {
+  const xTickLabelMaxLength = useMemo(() => {
     // If no max length is set, limit the number of characters to a length where it will use a maximum of half of the height of the viz.
-    if (!options.valueMaxLength) {
+    if (!options.xTickLabelMaxLength) {
-      const rotationAngle = options.valueRotation;
+      const rotationAngle = options.xTickLabelRotation;
       const textSize = measureText('M', UPLOT_AXIS_FONT_SIZE).width; // M is usually the widest character so let's use that as an aproximation.
       const maxHeightForValues = height / 2;
 
@@ -36,9 +36,9 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({ data, options, w
         3 //Subtract 3 for the "..." added to the end.
       );
     } else {
-      return options.valueMaxLength;
+      return options.xTickLabelMaxLength;
     }
-  }, [height, options.valueRotation, options.valueMaxLength]);
+  }, [height, options.xTickLabelRotation, options.xTickLabelMaxLength]);
 
   // Force 'multi' tooltip setting or stacking mode
   const tooltip = useMemo(() => {
@@ -66,7 +66,7 @@ export const BarChartPanel: React.FunctionComponent<Props> = ({ data, options, w
       height={height}
       {...options}
       orientation={orientation}
-      valueMaxLength={valueMaxLength}
+      xTickLabelMaxLength={xTickLabelMaxLength}
     >
       {(config, alignedFrame) => {
         return <TooltipPlugin data={alignedFrame} config={config} mode={tooltip.mode} timeZone={timeZone} />;

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

@@ -77,8 +77,8 @@ export const plugin = new PanelPlugin<BarChartOptions, BarChartFieldConfig>(BarC
         defaultValue: VizOrientation.Auto,
       })
       .addSliderInput({
-        path: 'valueRotation',
+        path: 'xTickLabelRotation',
-        name: 'Rotate values',
+        name: 'Rotate bar labels',
         defaultValue: 0,
         settings: {
           min: -90,
@@ -92,9 +92,9 @@ export const plugin = new PanelPlugin<BarChartOptions, BarChartFieldConfig>(BarC
         },
       })
       .addNumberInput({
-        path: 'valueMaxLength',
+        path: 'xTickLabelMaxLength',
-        name: 'Value max length',
+        name: 'Bar label max length',
-        description: 'Axis value labels will be truncated to the length provided',
+        description: 'Bar labels will be truncated to the length provided',
         settings: {
           placeholder: 'Auto',
           min: 0,

public/app/plugins/panel/barchart/types.ts

@@ -19,8 +19,8 @@ export interface BarChartOptions extends OptionsWithLegend, OptionsWithTooltip,
   showValue: VisibilityMode;
   barWidth: number;
   groupWidth: number;
-  valueRotation: number;
+  xTickLabelRotation: number;
-  valueMaxLength: number;
+  xTickLabelMaxLength: number;
   rawValue: (seriesIdx: number, valueIdx: number) => number;
 }
 

public/app/plugins/panel/barchart/utils.test.ts

@@ -87,8 +87,8 @@ describe('BarChart utils', () => {
         placement: 'bottom',
         calcs: [],
       },
-      valueRotation: 0,
+      xTickLabelRotation: 0,
-      valueMaxLength: 20,
+      xTickLabelMaxLength: 20,
       stacking: StackingMode.None,
       tooltip: {
         mode: TooltipDisplayMode.None,

public/app/plugins/panel/barchart/utils.ts

@@ -56,13 +56,13 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
   text,
   rawValue,
   allFrames,
-  valueRotation,
+  xTickLabelRotation,
-  valueMaxLength,
+  xTickLabelMaxLength,
   legend,
 }) => {
   const builder = new UPlotConfigBuilder();
   const defaultValueFormatter = (seriesIdx: number, value: any) => {
-    return shortenValue(formattedValueToString(frame.fields[seriesIdx].display!(value)), valueMaxLength);
+    return shortenValue(formattedValueToString(frame.fields[seriesIdx].display!(value)), xTickLabelMaxLength);
   };
 
   // bar orientation -> x scale orientation & direction
@@ -99,8 +99,8 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
 
   builder.setTooltipInterpolator(config.interpolateTooltip);
 
-  if (vizOrientation.xOri === ScaleOrientation.Horizontal && valueRotation !== 0) {
+  if (vizOrientation.xOri === ScaleOrientation.Horizontal && xTickLabelRotation !== 0) {
-    builder.setPadding(getRotationPadding(frame, valueRotation, valueMaxLength));
+    builder.setPadding(getRotationPadding(frame, xTickLabelRotation, xTickLabelMaxLength));
   }
 
   builder.setPrepData(config.prepData);
@@ -123,7 +123,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
     grid: { show: false },
     ticks: { show: false },
     gap: 15,
-    valueRotation: valueRotation * -1,
+    tickLabelRotation: xTickLabelRotation * -1,
     theme,
   });