mirror of https://github.com/grafana/grafana
Tooltip: Improved Heatmap tooltip (#75712)
Co-authored-by: Leon Sorokin <leeoniya@gmail.com> Co-authored-by: nmarrs <nathanielmarrs@gmail.com>pull/78919/head
Adela Almasan
2 years ago
committed by
GitHub
parent
5a80962de9
commit
e361839261
@ -0,0 +1,239 @@ |
|||||||
|
import React, { useEffect, useRef, useState } from 'react'; |
||||||
|
import uPlot from 'uplot'; |
||||||
|
|
||||||
|
import { |
||||||
|
DataFrameType, |
||||||
|
Field, |
||||||
|
FieldType, |
||||||
|
formattedValueToString, |
||||||
|
getFieldDisplayName, |
||||||
|
LinkModel, |
||||||
|
TimeRange, |
||||||
|
getLinksSupplier, |
||||||
|
InterpolateFunction, |
||||||
|
ScopedVars, |
||||||
|
} from '@grafana/data'; |
||||||
|
import { HeatmapCellLayout } from '@grafana/schema'; |
||||||
|
import { LinkButton, VerticalGroup } from '@grafana/ui'; |
||||||
|
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; |
||||||
|
import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap'; |
||||||
|
import { DataHoverView } from 'app/features/visualization/data-hover/DataHoverView'; |
||||||
|
|
||||||
|
import { HeatmapData } from './fields'; |
||||||
|
import { renderHistogram } from './renderHistogram'; |
||||||
|
import { HeatmapHoverEvent } from './utils'; |
||||||
|
|
||||||
|
type Props = { |
||||||
|
data: HeatmapData; |
||||||
|
hover: HeatmapHoverEvent; |
||||||
|
showHistogram?: boolean; |
||||||
|
timeRange: TimeRange; |
||||||
|
replaceVars: InterpolateFunction; |
||||||
|
scopedVars: ScopedVars[]; |
||||||
|
}; |
||||||
|
|
||||||
|
export const HeatmapHoverView = (props: Props) => { |
||||||
|
if (props.hover.seriesIdx === 2) { |
||||||
|
return <DataHoverView data={props.data.exemplars} rowIndex={props.hover.dataIdx} header={'Exemplar'} />; |
||||||
|
} |
||||||
|
return <HeatmapHoverCell {...props} />; |
||||||
|
}; |
||||||
|
|
||||||
|
const HeatmapHoverCell = ({ data, hover, showHistogram = false, scopedVars, replaceVars }: Props) => { |
||||||
|
const index = hover.dataIdx; |
||||||
|
|
||||||
|
const [isSparse] = useState( |
||||||
|
() => data.heatmap?.meta?.type === DataFrameType.HeatmapCells && !isHeatmapCellsDense(data.heatmap) |
||||||
|
); |
||||||
|
|
||||||
|
const xField = data.heatmap?.fields[0]; |
||||||
|
const yField = data.heatmap?.fields[1]; |
||||||
|
const countField = data.heatmap?.fields[2]; |
||||||
|
|
||||||
|
const xDisp = (v: number) => { |
||||||
|
if (xField?.display) { |
||||||
|
return formattedValueToString(xField.display(v)); |
||||||
|
} |
||||||
|
if (xField?.type === FieldType.time) { |
||||||
|
const tooltipTimeFormat = 'YYYY-MM-DD HH:mm:ss'; |
||||||
|
const dashboard = getDashboardSrv().getCurrent(); |
||||||
|
return dashboard?.formatDate(v, tooltipTimeFormat); |
||||||
|
} |
||||||
|
return `${v}`; |
||||||
|
}; |
||||||
|
|
||||||
|
const xVals = xField?.values; |
||||||
|
const yVals = yField?.values; |
||||||
|
const countVals = countField?.values; |
||||||
|
|
||||||
|
// labeled buckets
|
||||||
|
const meta = readHeatmapRowsCustomMeta(data.heatmap); |
||||||
|
const yDisp = yField?.display ? (v: string) => formattedValueToString(yField.display!(v)) : (v: string) => `${v}`; |
||||||
|
|
||||||
|
const yValueIdx = index % data.yBucketCount! ?? 0; |
||||||
|
|
||||||
|
let yBucketMin: string; |
||||||
|
let yBucketMax: string; |
||||||
|
|
||||||
|
let nonNumericOrdinalDisplay: string | undefined = undefined; |
||||||
|
|
||||||
|
if (meta.yOrdinalDisplay) { |
||||||
|
const yMinIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx - 1 : yValueIdx; |
||||||
|
const yMaxIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx : yValueIdx + 1; |
||||||
|
yBucketMin = yMinIdx < 0 ? meta.yMinDisplay! : `${meta.yOrdinalDisplay[yMinIdx]}`; |
||||||
|
yBucketMax = `${meta.yOrdinalDisplay[yMaxIdx]}`; |
||||||
|
|
||||||
|
// e.g. "pod-xyz123"
|
||||||
|
if (!meta.yOrdinalLabel || Number.isNaN(+meta.yOrdinalLabel[0])) { |
||||||
|
nonNumericOrdinalDisplay = data.yLayout === HeatmapCellLayout.le ? yBucketMax : yBucketMin; |
||||||
|
} |
||||||
|
} else { |
||||||
|
const value = yVals?.[yValueIdx]; |
||||||
|
|
||||||
|
if (data.yLayout === HeatmapCellLayout.le) { |
||||||
|
yBucketMax = `${value}`; |
||||||
|
|
||||||
|
if (data.yLog) { |
||||||
|
let logFn = data.yLog === 2 ? Math.log2 : Math.log10; |
||||||
|
let exp = logFn(value) - 1 / data.yLogSplit!; |
||||||
|
yBucketMin = `${data.yLog ** exp}`; |
||||||
|
} else { |
||||||
|
yBucketMin = `${value - data.yBucketSize!}`; |
||||||
|
} |
||||||
|
} else { |
||||||
|
yBucketMin = `${value}`; |
||||||
|
|
||||||
|
if (data.yLog) { |
||||||
|
let logFn = data.yLog === 2 ? Math.log2 : Math.log10; |
||||||
|
let exp = logFn(value) + 1 / data.yLogSplit!; |
||||||
|
yBucketMax = `${data.yLog ** exp}`; |
||||||
|
} else { |
||||||
|
yBucketMax = `${value + data.yBucketSize!}`; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let xBucketMin: number; |
||||||
|
let xBucketMax: number; |
||||||
|
|
||||||
|
if (data.xLayout === HeatmapCellLayout.le) { |
||||||
|
xBucketMax = xVals?.[index]; |
||||||
|
xBucketMin = xBucketMax - data.xBucketSize!; |
||||||
|
} else { |
||||||
|
xBucketMin = xVals?.[index]; |
||||||
|
xBucketMax = xBucketMin + data.xBucketSize!; |
||||||
|
} |
||||||
|
|
||||||
|
const count = countVals?.[index]; |
||||||
|
|
||||||
|
const visibleFields = data.heatmap?.fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.tooltip)); |
||||||
|
const links: Array<LinkModel<Field>> = []; |
||||||
|
const linkLookup = new Set<string>(); |
||||||
|
|
||||||
|
for (const field of visibleFields ?? []) { |
||||||
|
const hasLinks = field.config.links && field.config.links.length > 0; |
||||||
|
|
||||||
|
if (hasLinks && data.heatmap) { |
||||||
|
const appropriateScopedVars = scopedVars.find( |
||||||
|
(scopedVar) => |
||||||
|
scopedVar && scopedVar.__dataContext && scopedVar.__dataContext.value.field.name === nonNumericOrdinalDisplay |
||||||
|
); |
||||||
|
|
||||||
|
field.getLinks = getLinksSupplier(data.heatmap, field, appropriateScopedVars || {}, replaceVars); |
||||||
|
} |
||||||
|
|
||||||
|
if (field.getLinks) { |
||||||
|
const value = field.values[index]; |
||||||
|
const display = field.display ? field.display(value) : { text: `${value}`, numeric: +value }; |
||||||
|
|
||||||
|
field.getLinks({ calculatedValue: display, valueRowIndex: index }).forEach((link) => { |
||||||
|
const key = `${link.title}/${link.href}`; |
||||||
|
if (!linkLookup.has(key)) { |
||||||
|
links.push(link); |
||||||
|
linkLookup.add(key); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
let can = useRef<HTMLCanvasElement>(null); |
||||||
|
|
||||||
|
let histCssWidth = 264; |
||||||
|
let histCssHeight = 64; |
||||||
|
let histCanWidth = Math.round(histCssWidth * uPlot.pxRatio); |
||||||
|
let histCanHeight = Math.round(histCssHeight * uPlot.pxRatio); |
||||||
|
|
||||||
|
useEffect( |
||||||
|
() => { |
||||||
|
if (showHistogram && xVals != null && countVals != null) { |
||||||
|
renderHistogram(can, histCanWidth, histCanHeight, xVals, countVals, index, data.yBucketCount!); |
||||||
|
} |
||||||
|
}, |
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
[index] |
||||||
|
); |
||||||
|
|
||||||
|
if (isSparse) { |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
<DataHoverView data={data.heatmap} rowIndex={index} /> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
const renderYBucket = () => { |
||||||
|
if (nonNumericOrdinalDisplay) { |
||||||
|
return <div>Name: {nonNumericOrdinalDisplay}</div>; |
||||||
|
} |
||||||
|
|
||||||
|
switch (data.yLayout) { |
||||||
|
case HeatmapCellLayout.unknown: |
||||||
|
return <div>{yDisp(yBucketMin)}</div>; |
||||||
|
} |
||||||
|
return ( |
||||||
|
<div> |
||||||
|
Bucket: {yDisp(yBucketMin)} - {yDisp(yBucketMax)} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<> |
||||||
|
<div> |
||||||
|
<div>{xDisp(xBucketMin)}</div> |
||||||
|
{data.xLayout !== HeatmapCellLayout.unknown && <div>{xDisp(xBucketMax)}</div>} |
||||||
|
</div> |
||||||
|
{showHistogram && ( |
||||||
|
<canvas |
||||||
|
width={histCanWidth} |
||||||
|
height={histCanHeight} |
||||||
|
ref={can} |
||||||
|
style={{ width: histCssWidth + 'px', height: histCssHeight + 'px' }} |
||||||
|
/> |
||||||
|
)} |
||||||
|
<div> |
||||||
|
{renderYBucket()} |
||||||
|
<div> |
||||||
|
{getFieldDisplayName(countField!, data.heatmap)}: {data.display!(count)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
{links.length > 0 && ( |
||||||
|
<VerticalGroup> |
||||||
|
{links.map((link, i) => ( |
||||||
|
<LinkButton |
||||||
|
key={i} |
||||||
|
icon={'external-link-alt'} |
||||||
|
target={link.target} |
||||||
|
href={link.href} |
||||||
|
onClick={link.onClick} |
||||||
|
fill="text" |
||||||
|
style={{ width: '100%' }} |
||||||
|
> |
||||||
|
{link.title} |
||||||
|
</LinkButton> |
||||||
|
))} |
||||||
|
</VerticalGroup> |
||||||
|
)} |
||||||
|
</> |
||||||
|
); |
||||||
|
}; |
||||||
@ -0,0 +1,45 @@ |
|||||||
|
import { formatMilliseconds } from './utils'; |
||||||
|
|
||||||
|
describe('heatmap tooltip utils', () => { |
||||||
|
it('converts ms to appropriate unit', async () => { |
||||||
|
let msToFormat = 10; |
||||||
|
let formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('10 milliseconds'); |
||||||
|
|
||||||
|
msToFormat = 1000; |
||||||
|
formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('1 second'); |
||||||
|
|
||||||
|
msToFormat = 1000 * 120; |
||||||
|
formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('2 minutes'); |
||||||
|
|
||||||
|
msToFormat = 1000 * 60 * 60; |
||||||
|
formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('1 hour'); |
||||||
|
|
||||||
|
msToFormat = 1000 * 60 * 60 * 24; |
||||||
|
formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('1 day'); |
||||||
|
|
||||||
|
msToFormat = 1000 * 60 * 60 * 24 * 7 * 3; |
||||||
|
formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('3 weeks'); |
||||||
|
|
||||||
|
msToFormat = 1000 * 60 * 60 * 24 * 7 * 4; |
||||||
|
formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('4 weeks'); |
||||||
|
|
||||||
|
msToFormat = 1000 * 60 * 60 * 24 * 7 * 5; |
||||||
|
formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('1 month'); |
||||||
|
|
||||||
|
msToFormat = 1000 * 60 * 60 * 24 * 365; |
||||||
|
formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('1 year'); |
||||||
|
|
||||||
|
msToFormat = 1000 * 60 * 60 * 24 * 365 * 2; |
||||||
|
formatted = formatMilliseconds(msToFormat); |
||||||
|
expect(formatted).toBe('2 years'); |
||||||
|
}); |
||||||
|
}); |
||||||
@ -0,0 +1,90 @@ |
|||||||
|
import { DataFrame, Field } from '@grafana/data'; |
||||||
|
|
||||||
|
import { HeatmapData } from '../fields'; |
||||||
|
|
||||||
|
type BucketsMinMax = { |
||||||
|
xBucketMin: number; |
||||||
|
xBucketMax: number; |
||||||
|
yBucketMin: string; |
||||||
|
yBucketMax: string; |
||||||
|
}; |
||||||
|
|
||||||
|
export const getHoverCellColor = (data: HeatmapData, index: number) => { |
||||||
|
const colorPalette = data.heatmapColors?.palette!; |
||||||
|
const colorIndex = data.heatmapColors?.values[index]; |
||||||
|
|
||||||
|
let cellColor: string | undefined = undefined; |
||||||
|
|
||||||
|
if (colorIndex != null) { |
||||||
|
cellColor = colorPalette[colorIndex]; |
||||||
|
} |
||||||
|
|
||||||
|
return { cellColor, colorPalette }; |
||||||
|
}; |
||||||
|
|
||||||
|
const conversions: Record<string, number> = { |
||||||
|
year: 1000 * 60 * 60 * 24 * 365, |
||||||
|
month: 1000 * 60 * 60 * 24 * 30, |
||||||
|
week: 1000 * 60 * 60 * 24 * 7, |
||||||
|
day: 1000 * 60 * 60 * 24, |
||||||
|
hour: 1000 * 60 * 60, |
||||||
|
minute: 1000 * 60, |
||||||
|
second: 1000, |
||||||
|
millisecond: 1, |
||||||
|
}; |
||||||
|
|
||||||
|
// @TODO: display "~ 1 year/month"?
|
||||||
|
export const formatMilliseconds = (milliseconds: number) => { |
||||||
|
let value = 1; |
||||||
|
let unit = 'millisecond'; |
||||||
|
|
||||||
|
for (unit in conversions) { |
||||||
|
if (milliseconds >= conversions[unit]) { |
||||||
|
value = Math.floor(milliseconds / conversions[unit]); |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
const unitString = value === 1 ? unit : unit + 's'; |
||||||
|
|
||||||
|
return `${value} ${unitString}`; |
||||||
|
}; |
||||||
|
|
||||||
|
export const getFieldFromData = (data: DataFrame, fieldType: string, isSparse: boolean) => { |
||||||
|
let field: Field | undefined; |
||||||
|
|
||||||
|
switch (fieldType) { |
||||||
|
case 'x': |
||||||
|
field = isSparse |
||||||
|
? data?.fields.find(({ name }) => name === 'x' || name === 'xMin' || name === 'xMax') |
||||||
|
: data?.fields[0]; |
||||||
|
break; |
||||||
|
case 'y': |
||||||
|
field = isSparse |
||||||
|
? data?.fields.find(({ name }) => name === 'y' || name === 'yMin' || name === 'yMax') |
||||||
|
: data?.fields[1]; |
||||||
|
break; |
||||||
|
case 'count': |
||||||
|
field = isSparse ? data?.fields.find(({ name }) => name === 'count') : data?.fields[2]; |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
return field; |
||||||
|
}; |
||||||
|
|
||||||
|
export const getSparseCellMinMax = (data: HeatmapData, index: number): BucketsMinMax => { |
||||||
|
let fields = data.heatmap!.fields; |
||||||
|
|
||||||
|
let xMax = fields.find((f) => f.name === 'xMax')!; |
||||||
|
let yMin = fields.find((f) => f.name === 'yMin')!; |
||||||
|
let yMax = fields.find((f) => f.name === 'yMax')!; |
||||||
|
|
||||||
|
let interval = xMax.config.interval!; |
||||||
|
|
||||||
|
return { |
||||||
|
xBucketMin: xMax.values[index] - interval, |
||||||
|
xBucketMax: xMax.values[index], |
||||||
|
yBucketMin: yMin.values[index], |
||||||
|
yBucketMax: yMax.values[index], |
||||||
|
}; |
||||||
|
}; |
||||||
Loading…
Reference in new issue