mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
BarChart: Fixes barchart tooltip styling (#74506)
This commit is contained in:
parent
f70990d8eb
commit
8caf85b99a
@ -117,8 +117,8 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
|
||||
<table className={styles.infoWrap}>
|
||||
<tbody>
|
||||
{displayValues.map((displayValue, i) => (
|
||||
<tr key={`${i}/${rowIndex}`} className={displayValue.highlight ? styles.highlight : ''}>
|
||||
<th>{displayValue.name}:</th>
|
||||
<tr key={`${i}/${rowIndex}`}>
|
||||
<th>{displayValue.name}</th>
|
||||
<td>{renderValue(displayValue.valueString)}</td>
|
||||
</tr>
|
||||
))}
|
||||
@ -128,26 +128,21 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
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 {
|
||||
wrapper: css`
|
||||
background: ${bg};
|
||||
border: 1px solid ${headerBg};
|
||||
background: ${theme.components.tooltip.background};
|
||||
border-radius: ${theme.shape.borderRadius(2)};
|
||||
`,
|
||||
header: css`
|
||||
background: ${headerBg};
|
||||
padding: 6px 10px;
|
||||
background: ${theme.colors.background.secondary};
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
padding-bottom: ${theme.spacing(1)};
|
||||
`,
|
||||
title: css`
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
padding-right: ${theme.spacing(2)};
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
@ -155,24 +150,24 @@ const getStyles = (theme: GrafanaTheme2) => {
|
||||
flex-grow: 1;
|
||||
`,
|
||||
infoWrap: css`
|
||||
padding: 8px;
|
||||
padding: ${theme.spacing(1)};
|
||||
background: transparent;
|
||||
border: none;
|
||||
th {
|
||||
font-weight: ${theme.typography.fontWeightMedium};
|
||||
padding: ${theme.spacing(0.25, 2)};
|
||||
padding: ${theme.spacing(0.25, 2, 0.25, 0)};
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: ${theme.colors.background.primary};
|
||||
&:nth-child(even) {
|
||||
background-color: ${tableBgOdd};
|
||||
border-bottom: 1px solid ${theme.colors.border.weak};
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
`,
|
||||
highlight: css`
|
||||
/* !important is required to overwrite default table styles */
|
||||
background: ${theme.colors.action.hover} !important;
|
||||
`,
|
||||
highlight: css``,
|
||||
link: css`
|
||||
color: #6e9fff;
|
||||
color: ${theme.colors.text.link};
|
||||
`,
|
||||
};
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user