mirror of https://github.com/grafana/grafana
XYChart: Improved new tooltip (#75818)
Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com> Co-authored-by: Leon Sorokin <leeoniya@gmail.com>pull/80052/head
Adela Almasan
2 years ago
committed by
GitHub
parent
a03eca29eb
commit
935ecdd809
@ -0,0 +1,687 @@ |
||||
{ |
||||
"annotations": { |
||||
"list": [ |
||||
{ |
||||
"builtIn": 1, |
||||
"datasource": { |
||||
"type": "grafana", |
||||
"uid": "-- Grafana --" |
||||
}, |
||||
"enable": true, |
||||
"hide": true, |
||||
"iconColor": "rgba(0, 211, 255, 1)", |
||||
"name": "Annotations & Alerts", |
||||
"type": "dashboard" |
||||
} |
||||
] |
||||
}, |
||||
"editable": true, |
||||
"fiscalYearStartMonth": 0, |
||||
"graphTooltip": 0, |
||||
"links": [], |
||||
"liveNow": false, |
||||
"panels": [ |
||||
{ |
||||
"datasource": {}, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"fixedColor": "blue", |
||||
"mode": "fixed" |
||||
}, |
||||
"custom": { |
||||
"axisBorderShow": false, |
||||
"axisCenteredZero": false, |
||||
"axisColorMode": "text", |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"hideFrom": { |
||||
"legend": false, |
||||
"tooltip": false, |
||||
"viz": false |
||||
}, |
||||
"pointSize": { |
||||
"fixed": 32 |
||||
}, |
||||
"scaleDistribution": { |
||||
"type": "linear" |
||||
}, |
||||
"show": "points" |
||||
}, |
||||
"fieldMinMax": false, |
||||
"mappings": [], |
||||
"thresholds": { |
||||
"mode": "absolute", |
||||
"steps": [ |
||||
{ |
||||
"color": "green", |
||||
"value": null |
||||
}, |
||||
{ |
||||
"color": "red", |
||||
"value": 80 |
||||
} |
||||
] |
||||
}, |
||||
"unitScale": true |
||||
}, |
||||
"overrides": [] |
||||
}, |
||||
"gridPos": { |
||||
"h": 11, |
||||
"w": 7, |
||||
"x": 0, |
||||
"y": 0 |
||||
}, |
||||
"id": 1, |
||||
"options": { |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "list", |
||||
"placement": "bottom", |
||||
"showLegend": true |
||||
}, |
||||
"series": [ |
||||
{ |
||||
"pointColor": { |
||||
"fixed": "orange" |
||||
}, |
||||
"x": "Miles_per_Gallon", |
||||
"y": "Horsepower" |
||||
} |
||||
], |
||||
"seriesMapping": "auto", |
||||
"tooltip": { |
||||
"mode": "single", |
||||
"sort": "none" |
||||
} |
||||
}, |
||||
"targets": [ |
||||
{ |
||||
"csvContent": "x,y,z\n1,2,3\n3,4,5\n5,6,7", |
||||
"datasource": { |
||||
"type": "grafana-testdata-datasource", |
||||
"uid": "${DS_GDEV-TESTDATA}" |
||||
}, |
||||
"refId": "A", |
||||
"scenarioId": "csv_content" |
||||
} |
||||
], |
||||
"title": "Standard options: Single color", |
||||
"type": "xychart" |
||||
}, |
||||
{ |
||||
"datasource": {}, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"fixedColor": "green", |
||||
"mode": "shades" |
||||
}, |
||||
"custom": { |
||||
"axisBorderShow": false, |
||||
"axisCenteredZero": false, |
||||
"axisColorMode": "text", |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"hideFrom": { |
||||
"legend": false, |
||||
"tooltip": false, |
||||
"viz": false |
||||
}, |
||||
"pointSize": { |
||||
"fixed": 32 |
||||
}, |
||||
"scaleDistribution": { |
||||
"type": "linear" |
||||
}, |
||||
"show": "points" |
||||
}, |
||||
"fieldMinMax": false, |
||||
"mappings": [], |
||||
"thresholds": { |
||||
"mode": "absolute", |
||||
"steps": [ |
||||
{ |
||||
"color": "green", |
||||
"value": null |
||||
}, |
||||
{ |
||||
"color": "red", |
||||
"value": 80 |
||||
} |
||||
] |
||||
}, |
||||
"unitScale": true |
||||
}, |
||||
"overrides": [] |
||||
}, |
||||
"gridPos": { |
||||
"h": 11, |
||||
"w": 7, |
||||
"x": 7, |
||||
"y": 0 |
||||
}, |
||||
"id": 4, |
||||
"options": { |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "list", |
||||
"placement": "bottom", |
||||
"showLegend": true |
||||
}, |
||||
"series": [ |
||||
{ |
||||
"pointColor": { |
||||
"fixed": "orange" |
||||
}, |
||||
"x": "Miles_per_Gallon", |
||||
"y": "Horsepower" |
||||
} |
||||
], |
||||
"seriesMapping": "auto", |
||||
"tooltip": { |
||||
"mode": "single", |
||||
"sort": "none" |
||||
} |
||||
}, |
||||
"targets": [ |
||||
{ |
||||
"csvContent": "x,y,z\n1,2,3\n3,4,5\n5,6,7", |
||||
"datasource": { |
||||
"type": "grafana-testdata-datasource", |
||||
"uid": "${DS_GDEV-TESTDATA}" |
||||
}, |
||||
"refId": "A", |
||||
"scenarioId": "csv_content" |
||||
} |
||||
], |
||||
"title": "Standard options: Shades of a color", |
||||
"type": "xychart" |
||||
}, |
||||
{ |
||||
"datasource": {}, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"fixedColor": "yellow", |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisBorderShow": false, |
||||
"axisCenteredZero": false, |
||||
"axisColorMode": "text", |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"hideFrom": { |
||||
"legend": false, |
||||
"tooltip": false, |
||||
"viz": false |
||||
}, |
||||
"pointSize": { |
||||
"fixed": 32 |
||||
}, |
||||
"scaleDistribution": { |
||||
"type": "linear" |
||||
}, |
||||
"show": "points" |
||||
}, |
||||
"fieldMinMax": false, |
||||
"mappings": [], |
||||
"thresholds": { |
||||
"mode": "absolute", |
||||
"steps": [ |
||||
{ |
||||
"color": "green", |
||||
"value": null |
||||
}, |
||||
{ |
||||
"color": "red", |
||||
"value": 80 |
||||
} |
||||
] |
||||
}, |
||||
"unitScale": true |
||||
}, |
||||
"overrides": [] |
||||
}, |
||||
"gridPos": { |
||||
"h": 11, |
||||
"w": 7, |
||||
"x": 14, |
||||
"y": 0 |
||||
}, |
||||
"id": 3, |
||||
"options": { |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "list", |
||||
"placement": "bottom", |
||||
"showLegend": true |
||||
}, |
||||
"series": [ |
||||
{ |
||||
"pointColor": { |
||||
"fixed": "orange" |
||||
}, |
||||
"x": "Miles_per_Gallon", |
||||
"y": "Horsepower" |
||||
} |
||||
], |
||||
"seriesMapping": "auto", |
||||
"tooltip": { |
||||
"mode": "single", |
||||
"sort": "none" |
||||
} |
||||
}, |
||||
"targets": [ |
||||
{ |
||||
"csvContent": "x,y,z\n1,2,3\n3,4,5\n5,6,7", |
||||
"datasource": { |
||||
"type": "grafana-testdata-datasource", |
||||
"uid": "${DS_GDEV-TESTDATA}" |
||||
}, |
||||
"refId": "A", |
||||
"scenarioId": "csv_content" |
||||
} |
||||
], |
||||
"title": "Standard options: Classic palette", |
||||
"type": "xychart" |
||||
}, |
||||
{ |
||||
"datasource": {}, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"fixedColor": "blue", |
||||
"mode": "fixed" |
||||
}, |
||||
"custom": { |
||||
"axisBorderShow": false, |
||||
"axisCenteredZero": false, |
||||
"axisColorMode": "text", |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"hideFrom": { |
||||
"legend": false, |
||||
"tooltip": false, |
||||
"viz": false |
||||
}, |
||||
"pointSize": { |
||||
"fixed": 32 |
||||
}, |
||||
"scaleDistribution": { |
||||
"type": "linear" |
||||
}, |
||||
"show": "points" |
||||
}, |
||||
"fieldMinMax": false, |
||||
"mappings": [], |
||||
"thresholds": { |
||||
"mode": "absolute", |
||||
"steps": [ |
||||
{ |
||||
"color": "green", |
||||
"value": null |
||||
}, |
||||
{ |
||||
"color": "red", |
||||
"value": 80 |
||||
} |
||||
] |
||||
}, |
||||
"unitScale": true |
||||
}, |
||||
"overrides": [] |
||||
}, |
||||
"gridPos": { |
||||
"h": 12, |
||||
"w": 7, |
||||
"x": 0, |
||||
"y": 11 |
||||
}, |
||||
"id": 5, |
||||
"options": { |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "list", |
||||
"placement": "bottom", |
||||
"showLegend": true |
||||
}, |
||||
"series": [ |
||||
{ |
||||
"pointColor": { |
||||
"fixed": "orange" |
||||
}, |
||||
"x": "x", |
||||
"y": "y" |
||||
}, |
||||
{ |
||||
"pointColor": { |
||||
"fixed": "green" |
||||
}, |
||||
"x": "x", |
||||
"y": "z" |
||||
} |
||||
], |
||||
"seriesMapping": "manual", |
||||
"tooltip": { |
||||
"mode": "single", |
||||
"sort": "none" |
||||
} |
||||
}, |
||||
"targets": [ |
||||
{ |
||||
"csvContent": "x,y,z\n1,2,3\n3,4,5\n5,6,7", |
||||
"datasource": { |
||||
"type": "grafana-testdata-datasource", |
||||
"uid": "${DS_GDEV-TESTDATA}" |
||||
}, |
||||
"refId": "A", |
||||
"scenarioId": "csv_content" |
||||
} |
||||
], |
||||
"title": "Standard options: Single color + Mapping: Fixed color", |
||||
"type": "xychart" |
||||
}, |
||||
{ |
||||
"datasource": {}, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"fixedColor": "blue", |
||||
"mode": "shades" |
||||
}, |
||||
"custom": { |
||||
"axisBorderShow": false, |
||||
"axisCenteredZero": false, |
||||
"axisColorMode": "text", |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"hideFrom": { |
||||
"legend": false, |
||||
"tooltip": false, |
||||
"viz": false |
||||
}, |
||||
"pointSize": { |
||||
"fixed": 32 |
||||
}, |
||||
"scaleDistribution": { |
||||
"type": "linear" |
||||
}, |
||||
"show": "points" |
||||
}, |
||||
"fieldMinMax": false, |
||||
"mappings": [], |
||||
"thresholds": { |
||||
"mode": "absolute", |
||||
"steps": [ |
||||
{ |
||||
"color": "green", |
||||
"value": null |
||||
}, |
||||
{ |
||||
"color": "red", |
||||
"value": 80 |
||||
} |
||||
] |
||||
}, |
||||
"unitScale": true |
||||
}, |
||||
"overrides": [] |
||||
}, |
||||
"gridPos": { |
||||
"h": 12, |
||||
"w": 7, |
||||
"x": 7, |
||||
"y": 11 |
||||
}, |
||||
"id": 6, |
||||
"options": { |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "list", |
||||
"placement": "bottom", |
||||
"showLegend": true |
||||
}, |
||||
"series": [ |
||||
{ |
||||
"pointColor": { |
||||
"fixed": "orange" |
||||
}, |
||||
"x": "x", |
||||
"y": "y" |
||||
}, |
||||
{ |
||||
"pointColor": { |
||||
"fixed": "green" |
||||
}, |
||||
"x": "x", |
||||
"y": "z" |
||||
} |
||||
], |
||||
"seriesMapping": "manual", |
||||
"tooltip": { |
||||
"mode": "single", |
||||
"sort": "none" |
||||
} |
||||
}, |
||||
"targets": [ |
||||
{ |
||||
"csvContent": "x,y,z\n1,2,3\n3,4,5\n5,6,7", |
||||
"datasource": { |
||||
"type": "grafana-testdata-datasource", |
||||
"uid": "${DS_GDEV-TESTDATA}" |
||||
}, |
||||
"refId": "A", |
||||
"scenarioId": "csv_content" |
||||
} |
||||
], |
||||
"title": "Standard options: Shades of color + Mapping: Fixed color", |
||||
"type": "xychart" |
||||
}, |
||||
{ |
||||
"datasource": {}, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"fixedColor": "blue", |
||||
"mode": "palette-classic" |
||||
}, |
||||
"custom": { |
||||
"axisBorderShow": false, |
||||
"axisCenteredZero": false, |
||||
"axisColorMode": "text", |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"hideFrom": { |
||||
"legend": false, |
||||
"tooltip": false, |
||||
"viz": false |
||||
}, |
||||
"pointSize": { |
||||
"fixed": 32 |
||||
}, |
||||
"scaleDistribution": { |
||||
"type": "linear" |
||||
}, |
||||
"show": "points" |
||||
}, |
||||
"fieldMinMax": false, |
||||
"mappings": [], |
||||
"thresholds": { |
||||
"mode": "absolute", |
||||
"steps": [ |
||||
{ |
||||
"color": "green", |
||||
"value": null |
||||
}, |
||||
{ |
||||
"color": "red", |
||||
"value": 80 |
||||
} |
||||
] |
||||
}, |
||||
"unitScale": true |
||||
}, |
||||
"overrides": [] |
||||
}, |
||||
"gridPos": { |
||||
"h": 12, |
||||
"w": 7, |
||||
"x": 14, |
||||
"y": 11 |
||||
}, |
||||
"id": 7, |
||||
"options": { |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "list", |
||||
"placement": "bottom", |
||||
"showLegend": true |
||||
}, |
||||
"series": [ |
||||
{ |
||||
"pointColor": { |
||||
"fixed": "orange" |
||||
}, |
||||
"x": "x", |
||||
"y": "y" |
||||
}, |
||||
{ |
||||
"pointColor": { |
||||
"fixed": "green" |
||||
}, |
||||
"x": "x", |
||||
"y": "z" |
||||
} |
||||
], |
||||
"seriesMapping": "manual", |
||||
"tooltip": { |
||||
"mode": "single", |
||||
"sort": "none" |
||||
} |
||||
}, |
||||
"targets": [ |
||||
{ |
||||
"csvContent": "x,y,z\n1,2,3\n3,4,5\n5,6,7", |
||||
"datasource": { |
||||
"type": "grafana-testdata-datasource", |
||||
"uid": "${DS_GDEV-TESTDATA}" |
||||
}, |
||||
"refId": "A", |
||||
"scenarioId": "csv_content" |
||||
} |
||||
], |
||||
"title": "Standard options: Classic palette + Mapping: Fixed color", |
||||
"type": "xychart" |
||||
}, |
||||
{ |
||||
"datasource": { |
||||
"type": "testdata", |
||||
"uid": "PD8C576611E62080A" |
||||
}, |
||||
"fieldConfig": { |
||||
"defaults": { |
||||
"color": { |
||||
"mode": "continuous-BlYlRd" |
||||
}, |
||||
"custom": { |
||||
"axisBorderShow": false, |
||||
"axisCenteredZero": false, |
||||
"axisColorMode": "text", |
||||
"axisLabel": "", |
||||
"axisPlacement": "auto", |
||||
"hideFrom": { |
||||
"legend": false, |
||||
"tooltip": false, |
||||
"viz": false |
||||
}, |
||||
"pointSize": { |
||||
"fixed": 50 |
||||
}, |
||||
"scaleDistribution": { |
||||
"type": "linear" |
||||
}, |
||||
"show": "points" |
||||
}, |
||||
"mappings": [], |
||||
"thresholds": { |
||||
"mode": "absolute", |
||||
"steps": [ |
||||
{ |
||||
"color": "green", |
||||
"value": null |
||||
}, |
||||
{ |
||||
"color": "red", |
||||
"value": 80 |
||||
} |
||||
] |
||||
}, |
||||
"unitScale": true |
||||
}, |
||||
"overrides": [] |
||||
}, |
||||
"gridPos": { |
||||
"h": 9, |
||||
"w": 7, |
||||
"x": 0, |
||||
"y": 23 |
||||
}, |
||||
"id": 8, |
||||
"options": { |
||||
"legend": { |
||||
"calcs": [], |
||||
"displayMode": "list", |
||||
"placement": "bottom", |
||||
"showLegend": true |
||||
}, |
||||
"series": [ |
||||
{ |
||||
"pointColor": { |
||||
"field": "c", |
||||
"fixed": "dark-green" |
||||
}, |
||||
"x": "x", |
||||
"y": "y" |
||||
} |
||||
], |
||||
"seriesMapping": "manual", |
||||
"tooltip": { |
||||
"mode": "single", |
||||
"sort": "none" |
||||
} |
||||
}, |
||||
"targets": [ |
||||
{ |
||||
"csvContent": "x,y,c\n0,0,0\n50,50,25\n100,100,50", |
||||
"datasource": { |
||||
"type": "testdata", |
||||
"uid": "PD8C576611E62080A" |
||||
}, |
||||
"refId": "A", |
||||
"scenarioId": "csv_content" |
||||
} |
||||
], |
||||
"title": "Panel Title", |
||||
"type": "xychart" |
||||
} |
||||
], |
||||
"refresh": "", |
||||
"schemaVersion": 39, |
||||
"tags": [], |
||||
"templating": { |
||||
"list": [] |
||||
}, |
||||
"time": { |
||||
"from": "now-6h", |
||||
"to": "now" |
||||
}, |
||||
"timepicker": {}, |
||||
"timezone": "", |
||||
"title": "XYChart tooltip color test", |
||||
"uid": "cb67db43-dd72-4ada-a313-53f46c20adcc", |
||||
"version": 1, |
||||
"weekStart": "" |
||||
} |
||||
@ -0,0 +1,136 @@ |
||||
import { css } from '@emotion/css'; |
||||
import React from 'react'; |
||||
|
||||
import { DataFrame, Field, getFieldDisplayName, GrafanaTheme2, LinkModel } from '@grafana/data'; |
||||
import { alpha } from '@grafana/data/src/themes/colorManipulator'; |
||||
import { useStyles2 } from '@grafana/ui'; |
||||
import { VizTooltipContent } from '@grafana/ui/src/components/VizTooltip/VizTooltipContent'; |
||||
import { VizTooltipFooter } from '@grafana/ui/src/components/VizTooltip/VizTooltipFooter'; |
||||
import { VizTooltipHeader } from '@grafana/ui/src/components/VizTooltip/VizTooltipHeader'; |
||||
import { ColorIndicator, LabelValue } from '@grafana/ui/src/components/VizTooltip/types'; |
||||
import { getTitleFromHref } from 'app/features/explore/utils/links'; |
||||
|
||||
import { Options } from './panelcfg.gen'; |
||||
import { ScatterSeries, YValue } from './types'; |
||||
import { fmt } from './utils'; |
||||
|
||||
export interface Props { |
||||
dataIdxs: Array<number | null>; |
||||
seriesIdx: number | null | undefined; |
||||
isPinned: boolean; |
||||
dismiss: () => void; |
||||
options: Options; |
||||
data: DataFrame[]; // source data
|
||||
allSeries: ScatterSeries[]; |
||||
} |
||||
|
||||
export const XYChartTooltip = ({ dataIdxs, seriesIdx, data, allSeries, dismiss, options, isPinned }: Props) => { |
||||
const styles = useStyles2(getStyles); |
||||
|
||||
const rowIndex = dataIdxs.find((idx) => idx !== null); |
||||
// @todo: remove -1 when uPlot v2 arrive
|
||||
// context: first value in dataIdxs always null and represent X series
|
||||
const hoveredPointIndex = seriesIdx! - 1; |
||||
|
||||
if (!allSeries || rowIndex == null) { |
||||
return null; |
||||
} |
||||
|
||||
const series = allSeries[hoveredPointIndex]; |
||||
const frame = series.frame(data); |
||||
const xField = series.x(frame); |
||||
const yField = series.y(frame); |
||||
|
||||
const getHeaderLabel = (): LabelValue => { |
||||
let label = series.name; |
||||
if (options.seriesMapping === 'manual') { |
||||
label = options.series?.[hoveredPointIndex]?.name ?? `Series ${hoveredPointIndex + 1}`; |
||||
} |
||||
|
||||
let colorThing = series.pointColor(frame); |
||||
|
||||
if (Array.isArray(colorThing)) { |
||||
colorThing = colorThing[rowIndex]; |
||||
} |
||||
|
||||
return { |
||||
label, |
||||
value: null, |
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
color: alpha(colorThing as string, 0.5), |
||||
colorIndicator: ColorIndicator.marker_md, |
||||
}; |
||||
}; |
||||
|
||||
const getContentLabel = (): LabelValue[] => { |
||||
let colorThing = series.pointColor(frame); |
||||
|
||||
if (Array.isArray(colorThing)) { |
||||
colorThing = colorThing[rowIndex]; |
||||
} |
||||
|
||||
const yValue: YValue = { |
||||
name: getFieldDisplayName(yField, frame), |
||||
val: yField.values[rowIndex], |
||||
field: yField, |
||||
// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
|
||||
color: alpha(colorThing as string, 0.5), |
||||
}; |
||||
|
||||
const content: LabelValue[] = [ |
||||
{ |
||||
label: getFieldDisplayName(xField, frame), |
||||
value: fmt(xField, xField.values[rowIndex]), |
||||
}, |
||||
{ |
||||
label: yValue.name, |
||||
value: fmt(yValue.field, yValue.val), |
||||
}, |
||||
]; |
||||
|
||||
// add extra fields
|
||||
const extraFields: Field[] = frame.fields.filter((f) => f !== xField && f !== yField); |
||||
if (extraFields) { |
||||
extraFields.forEach((field) => { |
||||
content.push({ |
||||
label: field.name, |
||||
value: fmt(field, field.values[rowIndex]), |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
return content; |
||||
}; |
||||
|
||||
const getLinks = (): Array<LinkModel<Field>> => { |
||||
let links: Array<LinkModel<Field>> = []; |
||||
if (yField.getLinks) { |
||||
const v = yField.values[rowIndex]; |
||||
const disp = yField.display ? yField.display(v) : { text: `${v}`, numeric: +v }; |
||||
links = yField.getLinks({ calculatedValue: disp, valueRowIndex: rowIndex }).map((linkModel) => { |
||||
if (!linkModel.title) { |
||||
linkModel.title = getTitleFromHref(linkModel.href); |
||||
} |
||||
|
||||
return linkModel; |
||||
}); |
||||
} |
||||
return links; |
||||
}; |
||||
|
||||
return ( |
||||
<div className={styles.wrapper}> |
||||
<VizTooltipHeader headerLabel={getHeaderLabel()} /> |
||||
<VizTooltipContent contentLabelValue={getContentLabel()} /> |
||||
{isPinned && <VizTooltipFooter dataLinks={getLinks()} canAnnotate={false} />} |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
const getStyles = (theme: GrafanaTheme2) => ({ |
||||
wrapper: css({ |
||||
display: 'flex', |
||||
flexDirection: 'column', |
||||
width: '280px', |
||||
}), |
||||
}); |
||||
@ -0,0 +1,9 @@ |
||||
import { Field, formattedValueToString } from '@grafana/data'; |
||||
|
||||
export function fmt(field: Field, val: number): string { |
||||
if (field.display) { |
||||
return formattedValueToString(field.display(val)); |
||||
} |
||||
|
||||
return `${val}`; |
||||
} |
||||
Loading…
Reference in new issue