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