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