IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-28 18:01:40 -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}`; 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}>
@ -62,34 +67,44 @@ export const VizLegendList: React.FunctionComponent<Props> = ({
</div> </div>
</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;
margin-bottom: ${theme.spacing.xs}; `;
`,
rightWrapper: css` return {
padding-left: ${theme.spacing.sm}; itemBottom: itemStyles,
`, itemRight: cx(
bottomWrapper: css` itemStyles,
display: flex; css`
flex-wrap: wrap; margin-bottom: ${theme.spacing.xs};
justify-content: space-between; `
width: 100%; ),
padding-left: ${theme.spacing.md}; rightWrapper: css`
`, padding-left: ${theme.spacing.sm};
section: css` `,
display: flex; bottomWrapper: css`
`, display: flex;
sectionRight: css` flex-wrap: wrap;
justify-content: flex-end; justify-content: space-between;
flex-grow: 1; width: 100%;
`, padding-left: ${theme.spacing.md};
}); `,
section: css`
display: flex;
`,
sectionRight: css`
justify-content: flex-end;
flex-grow: 1;
`,
};
};