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: Ensure data field overrides apply (#67872)

Browse Source 
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
This commit is contained in:
Drew Slobodnjak 2023-05-11 08:35:57 -07:00 committed by GitHub
parent 8b1afb594d
commit a5e9a1f140
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
public/app/plugins/panel/geomap/components/DataHoverView.tsx
View File

@ -24,31 +24,43 @@ export interface Props {
header?: string; header?: string;
} }
interface DisplayValue {
name: string;
value: unknown;
valueString: string;
highlight: boolean;
}
export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, header = undefined }: Props) => { export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, header = undefined }: Props) => {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
if (!data || rowIndex == null) { if (!data || rowIndex == null) {
return null; return null;
} }
const fields = data.fields.map((f, idx) => {
return { ...f, hovered: idx === columnIndex };
});
// Put the traceID field in front. // Put the traceID field in front.
const visibleFields = data.fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.tooltip)); const visibleFields = fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.tooltip));
const traceIDField = visibleFields.find((field) => field.name === 'traceID') || data.fields[0]; const traceIDField = visibleFields.find((field) => field.name === 'traceID') || fields[0];
const orderedVisibleFields = [traceIDField, ...visibleFields.filter((field) => traceIDField !== field)]; const orderedVisibleFields = [traceIDField, ...visibleFields.filter((field) => traceIDField !== field)];
if (orderedVisibleFields.length === 0) { if (orderedVisibleFields.length === 0) {
return null; return null;
} }
const displayValues: Array<[string, unknown, string]> = []; const displayValues: DisplayValue[] = [];
const links: Array<LinkModel<Field>> = []; const links: Array<LinkModel<Field>> = [];
const linkLookup = new Set<string>(); const linkLookup = new Set<string>();
for (const f of orderedVisibleFields) { for (const field of orderedVisibleFields) {
const v = f.values[rowIndex]; if (mode === TooltipDisplayMode.Single && columnIndex != null && !field.hovered) {
const disp = f.display ? f.display(v) : { text: `${v}`, numeric: +v }; continue;
if (f.getLinks) { }
f.getLinks({ calculatedValue: disp, valueRowIndex: rowIndex }).forEach((link) => { const value = field.values[rowIndex];
const fieldDisplay = field.display ? field.display(value) : { text: `${value}`, numeric: +value };
if (field.getLinks) {
field.getLinks({ calculatedValue: fieldDisplay, valueRowIndex: rowIndex }).forEach((link) => {
const key = `${link.title}/${link.href}`; const key = `${link.title}/${link.href}`;
if (!linkLookup.has(key)) { if (!linkLookup.has(key)) {
links.push(link); links.push(link);
@ -57,11 +69,16 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
}); });
} }
displayValues.push([getFieldDisplayName(f, data), v, formattedValueToString(disp)]); displayValues.push({
name: getFieldDisplayName(field, data),
value,
valueString: formattedValueToString(fieldDisplay),
highlight: field.hovered,
});
} }
if (sortOrder && sortOrder !== SortOrder.None) { if (sortOrder && sortOrder !== SortOrder.None) {
displayValues.sort((a, b) => arrayUtils.sortValues(sortOrder)(a[1], b[1])); displayValues.sort((a, b) => arrayUtils.sortValues(sortOrder)(a.value, b.value));
} }
const renderLinks = () => const renderLinks = () =>
@ -96,19 +113,12 @@ export const DataHoverView = ({ data, rowIndex, columnIndex, sortOrder, mode, he
)} )}
<table className={styles.infoWrap}> <table className={styles.infoWrap}>
<tbody> <tbody>
{(mode === TooltipDisplayMode.Multi || mode == null) && {displayValues.map((displayValue, i) => (
displayValues.map((v, i) => ( <tr key={`${i}/${rowIndex}`} className={displayValue.highlight ? styles.highlight : ''}>
<tr key={`${i}/${rowIndex}`} className={i === columnIndex ? styles.highlight : ''}> <th>{displayValue.name}:</th>
<th>{v[0]}:</th> <td>{renderValue(displayValue.valueString)}</td>
<td>{renderValue(v[2])}</td>
</tr>
))}
{mode === TooltipDisplayMode.Single && columnIndex && (
<tr key={`${columnIndex}/${rowIndex}`}>
<th>{displayValues[columnIndex][0]}:</th>
<td>{renderValue(displayValues[columnIndex][2])}</td>
</tr> </tr>
)} ))}
{renderLinks()} {renderLinks()}
</tbody> </tbody>
</table> </table>
@ -155,7 +165,8 @@ const getStyles = (theme: GrafanaTheme2) => {
} }
`, `,
highlight: css` highlight: css`
background: ${theme.colors.action.hover}; /* !important is required to overwrite default table styles */
background: ${theme.colors.action.hover} !important;
`, `,
link: css` link: css`
color: #6e9fff; color: #6e9fff;