IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Barchart docs and styling fix (#41362)

Browse Source 
* Barchart docs and styling fix

* Fix name of max length

* rename valueRotation -> xTickLabelRotation

also limits slider padding on sliders without marks
This commit is contained in:
Oscar Kilhed
2021-11-12 15:03:19 +01:00
committed by GitHub
parent d72e389d3d
commit 6fe29dda33
10 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/grafana-ui/src/components/Slider/Slider.tsx
View File

@@ -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);

5
packages/grafana-ui/src/components/Slider/styles.ts
View File

@@ -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`

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

@@ -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,