From 6fe29dda33f09fe9dc1974a7d5a94ad02be28274 Mon Sep 17 00:00:00 2001 From: Oscar Kilhed Date: Fri, 12 Nov 2021 15:03:19 +0100 Subject: [PATCH] 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 | 8 ++++++++ packages/grafana-ui/src/components/Slider/Slider.tsx | 2 +- packages/grafana-ui/src/components/Slider/styles.ts | 5 +++-- .../src/components/uPlot/config/UPlotAxisBuilder.ts | 6 +++--- public/app/plugins/panel/barchart/BarChart.tsx | 12 ++++++------ public/app/plugins/panel/barchart/BarChartPanel.tsx | 12 ++++++------ public/app/plugins/panel/barchart/module.tsx | 10 +++++----- public/app/plugins/panel/barchart/types.ts | 4 ++-- public/app/plugins/panel/barchart/utils.test.ts | 4 ++-- public/app/plugins/panel/barchart/utils.ts | 12 ++++++------ 10 files changed, 42 insertions(+), 33 deletions(-) diff --git a/docs/sources/visualizations/bar-chart.md b/docs/sources/visualizations/bar-chart.md index 74467399c19..c918ab65b31 100644 --- a/docs/sources/visualizations/bar-chart.md +++ b/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. diff --git a/packages/grafana-ui/src/components/Slider/Slider.tsx b/packages/grafana-ui/src/components/Slider/Slider.tsx index 0ce6d58e328..57c7b643302 100644 --- a/packages/grafana-ui/src/components/Slider/Slider.tsx +++ b/packages/grafana-ui/src/components/Slider/Slider.tsx @@ -26,7 +26,7 @@ export const Slider: FunctionComponent = ({ }) => { 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(value ?? min); diff --git a/packages/grafana-ui/src/components/Slider/styles.ts b/packages/grafana-ui/src/components/Slider/styles.ts index 07c816ef02c..d3fb8df7b57 100644 --- a/packages/grafana-ui/src/components/Slider/styles.ts +++ b/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` diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts index 271ebbbe42d..80b245141f7 100644 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts +++ b/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 { isTime, timeZone, theme, - valueRotation, + tickLabelRotation, size, } = this.props; @@ -121,7 +121,7 @@ export class UPlotAxisBuilder extends PlotConfigBuilder { ((self, values, axisIdx) => { return this.calculateAxisSize(self, values, axisIdx); }), - rotate: valueRotation, + rotate: tickLabelRotation, gap, labelGap: 0, diff --git a/public/app/plugins/panel/barchart/BarChart.tsx b/public/app/plugins/panel/barchart/BarChart.tsx index 6d583a83c2f..f75670914b0 100644 --- a/public/app/plugins/panel/barchart/BarChart.tsx +++ b/public/app/plugins/panel/barchart/BarChart.tsx @@ -17,8 +17,8 @@ export interface BarChartProps const propsToDiff: Array = [ 'orientation', 'barWidth', - 'valueRotation', - 'valueMaxLength', + 'xTickLabelRotation', + 'xTickLabelMaxLength', 'groupWidth', 'stacking', 'showValue', @@ -64,8 +64,8 @@ export const BarChart: React.FC = (props) => { legend, tooltip, text, - valueRotation, - valueMaxLength, + xTickLabelRotation, + xTickLabelMaxLength, } = props; return preparePlotConfigBuilder({ @@ -78,8 +78,8 @@ export const BarChart: React.FC = (props) => { barWidth, showValue, groupWidth, - valueRotation, - valueMaxLength, + xTickLabelRotation, + xTickLabelMaxLength, stacking, legend, tooltip, diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx index b48548e5d54..b83a75d155f 100755 --- a/public/app/plugins/panel/barchart/BarChartPanel.tsx +++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx @@ -23,10 +23,10 @@ export const BarChartPanel: React.FunctionComponent = ({ 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) { - const rotationAngle = options.valueRotation; + if (!options.xTickLabelMaxLength) { + 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 = ({ 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 = ({ data, options, w height={height} {...options} orientation={orientation} - valueMaxLength={valueMaxLength} + xTickLabelMaxLength={xTickLabelMaxLength} > {(config, alignedFrame) => { return ; diff --git a/public/app/plugins/panel/barchart/module.tsx b/public/app/plugins/panel/barchart/module.tsx index 74494016c60..4c009111ec9 100755 --- a/public/app/plugins/panel/barchart/module.tsx +++ b/public/app/plugins/panel/barchart/module.tsx @@ -77,8 +77,8 @@ export const plugin = new PanelPlugin(BarC defaultValue: VizOrientation.Auto, }) .addSliderInput({ - path: 'valueRotation', - name: 'Rotate values', + path: 'xTickLabelRotation', + name: 'Rotate bar labels', defaultValue: 0, settings: { min: -90, @@ -92,9 +92,9 @@ export const plugin = new PanelPlugin(BarC }, }) .addNumberInput({ - path: 'valueMaxLength', - name: 'Value max length', - description: 'Axis value labels will be truncated to the length provided', + path: 'xTickLabelMaxLength', + name: 'Bar label max length', + description: 'Bar labels will be truncated to the length provided', settings: { placeholder: 'Auto', min: 0, diff --git a/public/app/plugins/panel/barchart/types.ts b/public/app/plugins/panel/barchart/types.ts index be70fe7ae8f..f1fabd89aba 100644 --- a/public/app/plugins/panel/barchart/types.ts +++ b/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; - valueMaxLength: number; + xTickLabelRotation: number; + xTickLabelMaxLength: number; rawValue: (seriesIdx: number, valueIdx: number) => number; } diff --git a/public/app/plugins/panel/barchart/utils.test.ts b/public/app/plugins/panel/barchart/utils.test.ts index 45fabeec84c..94f35220d91 100644 --- a/public/app/plugins/panel/barchart/utils.test.ts +++ b/public/app/plugins/panel/barchart/utils.test.ts @@ -87,8 +87,8 @@ describe('BarChart utils', () => { placement: 'bottom', calcs: [], }, - valueRotation: 0, - valueMaxLength: 20, + xTickLabelRotation: 0, + xTickLabelMaxLength: 20, stacking: StackingMode.None, tooltip: { mode: TooltipDisplayMode.None, diff --git a/public/app/plugins/panel/barchart/utils.ts b/public/app/plugins/panel/barchart/utils.ts index 5992f446e4d..f9d70febe08 100644 --- a/public/app/plugins/panel/barchart/utils.ts +++ b/public/app/plugins/panel/barchart/utils.ts @@ -56,13 +56,13 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ({ text, rawValue, allFrames, - valueRotation, - valueMaxLength, + xTickLabelRotation, + 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 = ({ builder.setTooltipInterpolator(config.interpolateTooltip); - if (vizOrientation.xOri === ScaleOrientation.Horizontal && valueRotation !== 0) { - builder.setPadding(getRotationPadding(frame, valueRotation, valueMaxLength)); + if (vizOrientation.xOri === ScaleOrientation.Horizontal && xTickLabelRotation !== 0) { + builder.setPadding(getRotationPadding(frame, xTickLabelRotation, xTickLabelMaxLength)); } builder.setPrepData(config.prepData); @@ -123,7 +123,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn = ({ grid: { show: false }, ticks: { show: false }, gap: 15, - valueRotation: valueRotation * -1, + tickLabelRotation: xTickLabelRotation * -1, theme, });