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

BarChart: Fixes barchart tooltip styling (#74506)

Browse Source
This commit is contained in:
Torkel Ödegaard 2023-09-12 17:46:24 +02:00 committed by GitHub
parent f70990d8eb
commit 8caf85b99a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
public/app/features/visualization/data-hover/DataHoverView.tsx
View File

@ -117,8 +117,8 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
<table className={styles.infoWrap}> <table className={styles.infoWrap}>
<tbody> <tbody>
{displayValues.map((displayValue, i) => ( {displayValues.map((displayValue, i) => (
<tr key={`${i}/${rowIndex}`} className={displayValue.highlight ? styles.highlight : ''}> <tr key={`${i}/${rowIndex}`}>
<th>{displayValue.name}:</th> <th>{displayValue.name}</th>
<td>{renderValue(displayValue.valueString)}</td> <td>{renderValue(displayValue.valueString)}</td>
</tr> </tr>
))} ))}
@ -128,26 +128,21 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
</div> </div>
); );
}; };
const getStyles = (theme: GrafanaTheme2) => { const getStyles = (theme: GrafanaTheme2) => {
const bg = theme.isDark ? theme.v1.palette.dark2 : theme.v1.palette.white;
const headerBg = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
const tableBgOdd = theme.isDark ? theme.v1.palette.dark3 : theme.v1.palette.gray6;
return { return {
wrapper: css` wrapper: css`
background: ${bg}; background: ${theme.components.tooltip.background};
border: 1px solid ${headerBg};
border-radius: ${theme.shape.borderRadius(2)}; border-radius: ${theme.shape.borderRadius(2)};
`, `,
header: css` header: css`
background: ${headerBg}; background: ${theme.colors.background.secondary};
padding: 6px 10px; align-items: center;
align-content: center;
display: flex; display: flex;
padding-bottom: ${theme.spacing(1)};
`, `,
title: css` title: css`
font-weight: ${theme.typography.fontWeightMedium}; font-weight: ${theme.typography.fontWeightMedium};
padding-right: ${theme.spacing(2)};
overflow: hidden; overflow: hidden;
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
@ -155,24 +150,24 @@ const getStyles = (theme: GrafanaTheme2) => {
flex-grow: 1; flex-grow: 1;
`, `,
infoWrap: css` infoWrap: css`
padding: 8px; padding: ${theme.spacing(1)};
background: transparent;
border: none;
th { th {
font-weight: ${theme.typography.fontWeightMedium}; font-weight: ${theme.typography.fontWeightMedium};
padding: ${theme.spacing(0.25, 2)}; padding: ${theme.spacing(0.25, 2, 0.25, 0)};
} }
tr { tr {
background-color: ${theme.colors.background.primary}; border-bottom: 1px solid ${theme.colors.border.weak};
&:nth-child(even) { &:last-child {
background-color: ${tableBgOdd}; border-bottom: none;
} }
} }
`, `,
highlight: css` highlight: css``,
/* !important is required to overwrite default table styles */
background: ${theme.colors.action.hover} !important;
`,
link: css` link: css`
color: #6e9fff; color: ${theme.colors.text.link};
`, `,
}; };
}; };