IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-30 10:47:30 -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

35
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}`; const getItemKey = (item: VizLegendItem) => `${item.label}`;
switch (placement) { switch (placement) {
case 'right': case 'right': {
const renderItem = (item: VizLegendItem, index: number) => {
return <span className={styles.itemRight}>{itemRenderer!(item, index)}</span>;
};
return ( return (
<div className={cx(styles.rightWrapper, className)}> <div className={cx(styles.rightWrapper, className)}>
<List items={items} renderItem={renderItem} getItemKey={getItemKey} className={className} /> <List items={items} renderItem={renderItem} getItemKey={getItemKey} className={className} />
</div> </div>
); );
}
case 'bottom': case 'bottom':
default: default: {
const renderItem = (item: VizLegendItem, index: number) => {
return <span className={styles.itemBottom}>{itemRenderer!(item, index)}</span>;
};
return ( return (
<div className={cx(styles.bottomWrapper, className)}> <div className={cx(styles.bottomWrapper, className)}>
<div className={styles.section}> <div className={styles.section}>
@ -63,18 +68,27 @@ export const VizLegendList: React.FunctionComponent<Props> = ({
</div> </div>
); );
} }
}
}; };
VizLegendList.displayName = 'VizLegendList'; VizLegendList.displayName = 'VizLegendList';
const getStyles = (theme: GrafanaTheme) => ({ const getStyles = (theme: GrafanaTheme) => {
item: css` const itemStyles = css`
padding-right: 10px; padding-right: 10px;
display: flex; display: flex;
font-size: ${theme.typography.size.sm}; font-size: ${theme.typography.size.sm};
white-space: nowrap; white-space: nowrap;
`;
return {
itemBottom: itemStyles,
itemRight: cx(
itemStyles,
css`
margin-bottom: ${theme.spacing.xs}; margin-bottom: ${theme.spacing.xs};
`, `
),
rightWrapper: css` rightWrapper: css`
padding-left: ${theme.spacing.sm}; padding-left: ${theme.spacing.sm};
`, `,
@ -92,4 +106,5 @@ const getStyles = (theme: GrafanaTheme) => ({
justify-content: flex-end; justify-content: flex-end;
flex-grow: 1; flex-grow: 1;
`, `,
}); };
};