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

[Timeseries] Place legend to bottom when on <lg display (#69045)

Browse Source 
Place timeseries legend to bottom when on <lg display
This commit is contained in:
Simon Podlipsky 2023-05-26 10:07:09 +02:00 committed by GitHub
parent bf4ab36bc0
commit f515d2efac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
View File

@ -5,7 +5,7 @@ import { useMeasure } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { LegendPlacement } from '@grafana/schema';
import { useStyles2 } from '../../themes/ThemeContext';
import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
import { getFocusStyles } from '../../themes/mixins';
import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
@ -30,6 +30,7 @@ export interface VizLayoutComponentType extends FC<VizLayoutProps> {
* @beta
*/
export const VizLayout: VizLayoutComponentType = ({ width, height, legend, children }) => {
const theme = useTheme2();
const styles = useStyles2(getVizStyles);
const containerStyle: CSSProperties = {
display: 'flex',
@ -50,7 +51,11 @@ export const VizLayout: VizLayoutComponentType = ({ width, height, legend, child
);
}
const { placement, maxHeight = '35%', maxWidth = '60%' } = legend.props;
let { placement, maxHeight = '35%', maxWidth = '60%' } = legend.props;
if (document.body.clientWidth < theme.breakpoints.values.lg) {
placement = 'bottom';
}
let size: VizSize | null = null;