IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-28 01:41:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

TimeSeriesPanel: Remove unnecessary margin from legend (#31467)

Browse Source 
* TimeSeriesPanel: Remove unnessary padding

* add back margin for right aligned legend
This commit is contained in:
Torkel Ödegaard 2021-02-26 11:09:07 +01:00 committed by GitHub
parent c433393533
commit 14e7f70eac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 43 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
packages/grafana-ui/src/components/VizLegend/VizLegendList.tsx
View File

@ -29,21 +29,26 @@ export const VizLegendList: React.FunctionComponent<Props> = ({
);
}
const renderItem = (item: VizLegendItem, index: number) => {
return <span className={styles.item}>{itemRenderer!(item, index)}</span>;
};
const getItemKey = (item: VizLegendItem) => `${item.label}`;
switch (placement) {
case 'right':
case 'right': {
const renderItem = (item: VizLegendItem, index: number) => {
return <span className={styles.itemRight}>{itemRenderer!(item, index)}</span>;
};
return (
<div className={cx(styles.rightWrapper, className)}>
<List items={items} renderItem={renderItem} getItemKey={getItemKey} className={className} />
</div>
);
}
case 'bottom':
default:
default: {
const renderItem = (item: VizLegendItem, index: number) => {
return <span className={styles.itemBottom}>{itemRenderer!(item, index)}</span>;
};
return (
<div className={cx(styles.bottomWrapper, className)}>
<div className={styles.section}>
@ -62,34 +67,44 @@ export const VizLegendList: React.FunctionComponent<Props> = ({
</div>
</div>
);
}
}
};
VizLegendList.displayName = 'VizLegendList';
const getStyles = (theme: GrafanaTheme) => ({
item: css`
const getStyles = (theme: GrafanaTheme) => {
const itemStyles = css`
padding-right: 10px;
display: flex;
font-size: ${theme.typography.size.sm};
white-space: nowrap;
margin-bottom: ${theme.spacing.xs};
`,
rightWrapper: css`
padding-left: ${theme.spacing.sm};
`,
bottomWrapper: css`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
padding-left: ${theme.spacing.md};
`,
section: css`
display: flex;
`,
sectionRight: css`
justify-content: flex-end;
flex-grow: 1;
`,
});
`;
return {
itemBottom: itemStyles,
itemRight: cx(
itemStyles,
css`
margin-bottom: ${theme.spacing.xs};
`
),
rightWrapper: css`
padding-left: ${theme.spacing.sm};
`,
bottomWrapper: css`
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
padding-left: ${theme.spacing.md};
`,
section: css`
display: flex;
`,
sectionRight: css`
justify-content: flex-end;
flex-grow: 1;
`,
};
};