public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v10.0.x] [Timeseries] Place legend to bottom when on <lg display (#69128)

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

Place timeseries legend to bottom when on <lg display

(cherry picked from commit f515d2efac)

Co-authored-by: Simon Podlipsky <simon@podlipsky.net>
This commit is contained in:
Grot (@grafanabot)
2023-05-26 01:34:37 -07:00
committed by GitHub
co-authored by Simon Podlipsky
parent 21f45c85d9
commit 0b846e7f1f
1 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
+7 -2
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;