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}>
<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};
`,
};
};