public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v9.0.x] Heatmap: Sync main and 9.0.1 heatmap-new (#51136)

Browse Source
This commit is contained in:
Ryan McKinley
2022-06-20 20:52:11 -07:00
committed by GitHub
parent 1922ff6756
commit 2e14e277a9
20 changed files with 865 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/types/dataFrameTypes.ts
+4 -9
View File
@@ -13,22 +13,17 @@ export enum DataFrameType {
DirectoryListing = 'directory-listing',
/**
* First field is X, the rest are bucket values
* First field is X, the rest are ordinal values used as rows in the heatmap
*/
HeatmapBuckets = 'heatmap-buckets',
HeatmapRows = 'heatmap-rows',
/**
* Explicit fields for:
* xMin, yMin, count, ...
*
* All values in the grid exist and have regular spacing
*/
HeatmapScanlines = 'heatmap-scanlines',
/**
* WIP sparse heatmap support
*
* @private
* If the y value is actually ordinal, use `meta.custom` to specify the bucket lookup values
*/
HeatmapSparse = 'heatmap-cells-sparse',
HeatmapCells = 'heatmap-cells',
}
pkg/util/converter/prom.go
+2 -2
View File
@@ -429,7 +429,7 @@ func readMatrixOrVectorWide(iter *jsoniter.Iterator, resultType string) *backend
histogram.yMin.Labels = valueField.Labels
frame := data.NewFrame(valueField.Name, histogram.time, histogram.yMin, histogram.yMax, histogram.count, histogram.yLayout)
frame.Meta = &data.FrameMeta{
Type: "heatmap-cells-sparse",
Type: "heatmap-cells",
}
if frame.Name == data.TimeSeriesValueFieldName {
frame.Name = "" // only set the name if useful
@@ -535,7 +535,7 @@ func readMatrixOrVectorMulti(iter *jsoniter.Iterator, resultType string) *backen
histogram.yMin.Labels = valueField.Labels
frame := data.NewFrame(valueField.Name, histogram.time, histogram.yMin, histogram.yMax, histogram.count, histogram.yLayout)
frame.Meta = &data.FrameMeta{
Type: "heatmap-cells-sparse",
Type: "heatmap-cells",
}
if frame.Name == data.TimeSeriesValueFieldName {
frame.Name = "" // only set the name if useful
pkg/util/converter/testdata/prom-matrix-histogram-no-labels-frame.jsonc
Vendored
+6 -6
View File
@@ -1,9 +1,9 @@
// 🌟 This was machine generated. Do not edit. 🌟
//
//
// Frame[0] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 932 Rows
// +-------------------------------+------------------------+------------------------+--------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -21,15 +21,15 @@
// | 2022-04-14 19:08:20 +0000 UTC | 9.07293025972535e-06 | 9.894100606163098e-06 | 3.712286008031362 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------+------------------------+--------------------+---------------+
//
//
//
//
// 🌟 This was machine generated. Do not edit. 🌟
{
"frames": [
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
pkg/util/converter/testdata/prom-matrix-histogram-no-labels-wide-frame.jsonc
Vendored
+6 -6
View File
@@ -1,9 +1,9 @@
// 🌟 This was machine generated. Do not edit. 🌟
//
//
// Frame[0] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 932 Rows
// +-------------------------------+------------------------+------------------------+--------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -21,15 +21,15 @@
// | 2022-04-14 19:08:20 +0000 UTC | 9.07293025972535e-06 | 9.894100606163098e-06 | 3.712286008031362 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------+------------------------+--------------------+---------------+
//
//
//
//
// 🌟 This was machine generated. Do not edit. 🌟
{
"frames": [
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
pkg/util/converter/testdata/prom-matrix-histogram-partitioned-frame.jsonc
Vendored
+144 -144
View File
@@ -1,9 +1,9 @@
// 🌟 This was machine generated. Do not edit. 🌟
//
//
// Frame[0] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+--------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -11,13 +11,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+--------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+--------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[1] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+---------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -25,13 +25,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+---------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+---------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[2] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+--------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -39,13 +39,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+--------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+--------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[3] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -53,13 +53,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[4] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+-----------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -67,13 +67,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+-----------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+-----------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[5] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+--------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -81,13 +81,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+--------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+--------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[6] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -95,13 +95,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[7] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+--------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -109,13 +109,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+--------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+--------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[8] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 1 Rows
// +-------------------------------+--------------------------------------------------------------------------------------------+----------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -124,13 +124,13 @@
// +-------------------------------+--------------------------------------------------------------------------------------------+----------------------+----------------------+---------------+
// | 2022-04-14 19:08:20 +0000 UTC | 0.05255602595335715 | 0.057312752700291944 | 0.003508784241348215 | 0 |
// +-------------------------------+--------------------------------------------------------------------------------------------+----------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[9] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -138,13 +138,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[10] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 426 Rows
// +-------------------------------+------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -162,13 +162,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.002762135864009951 | 0.0030121305183748843 | 0.30175469375429953 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[11] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 1 Rows
// +-------------------------------+-------------------------------------------------------------------------------------+--------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -177,13 +177,13 @@
// +-------------------------------+-------------------------------------------------------------------------------------+--------------------+-----------------------+---------------+
// | 2022-04-14 19:08:20 +0000 UTC | 1 | 1.0905077326652577 | 0.0035087596183873042 | 0 |
// +-------------------------------+-------------------------------------------------------------------------------------+--------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[12] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 6 Rows
// +-------------------------------+-----------------------------------------------------------------------------------+--------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -197,13 +197,13 @@
// | 2022-04-14 19:13:20 +0000 UTC | 0.8408964152537144 | 0.9170040432046711 | 0.003508771929824561 | 0 |
// | 2022-04-14 19:13:20 +0000 UTC | 1 | 1.0905077326652577 | 0.003508771929824561 | 0 |
// +-------------------------------+-----------------------------------------------------------------------------------+--------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[13] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 269 Rows
// +-------------------------------+---------------------------------------------------------------------------+------------------------+--------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -221,13 +221,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 9.07293025972535e-06 | 9.894100606163098e-06 | 3.533338799658994 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+---------------------------------------------------------------------------+------------------------+--------------------+---------------+
//
//
//
//
//
//
// Frame[14] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 303 Rows
// +-------------------------------+-----------------------------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -245,13 +245,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.005065779510355506 | 0.005524271728019902 | 0.06666662973235489 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-----------------------------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[15] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 56 Rows
// +-------------------------------+------------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -269,13 +269,13 @@
// | 2022-04-14 19:10:00 +0000 UTC | 0.005524271728019902 | 0.0060242610367497685 | 0.00713925 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[16] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 41 Rows
// +-------------------------------+-----------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -293,13 +293,13 @@
// | 2022-04-14 19:10:00 +0000 UTC | 0.0060242610367497685 | 0.006569503244169644 | 0.0035300277777777778 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-----------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[17] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 29 Rows
// +-------------------------------+-----------------------------------------------------------------------------------------------------------+----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -317,13 +317,13 @@
// | 2022-04-14 19:11:40 +0000 UTC | 0.04052623608284405 | 0.044194173824159216 | 0.003508771929824561 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-----------------------------------------------------------------------------------------------------------+----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[18] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 38 Rows
// +-------------------------------+------------------------------------------------------------------------------------------------------+----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -341,13 +341,13 @@
// | 2022-04-14 19:11:40 +0000 UTC | 0.0060242610367497685 | 0.006569503244169644 | 0.003508771929824561 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------------------------------------------------------------------------------------+----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[19] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 195 Rows
// +-------------------------------+---------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -365,13 +365,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.0021298979153618314 | 0.0023226701464896895 | 0.07368416128056675 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+---------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[20] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 261 Rows
// +-------------------------------+-------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -389,13 +389,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.0009765625 | 0.0010649489576809157 | 0.03508765774105932 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[21] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 176 Rows
// +-------------------------------+-------------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -413,13 +413,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.009290680585958758 | 0.010131559020711013 | 0.003508771929824561 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-------------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[22] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 255 Rows
// +-------------------------------+-------------------------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -437,13 +437,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.04052623608284405 | 0.044194173824159216 | 0 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-------------------------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[23] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 167 Rows
// +-------------------------------+------------------------------------------------------------------------------------+------------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -461,15 +461,15 @@
// | 2022-04-14 19:08:20 +0000 UTC | 1.1766134837401892e-05 | 1.2831061023768835e-05 | 0.1578945767934209 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------------------------------------------------------------------+------------------------+-----------------------+---------------+
//
//
//
//
// 🌟 This was machine generated. Do not edit. 🌟
{
"frames": [
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -527,7 +527,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -585,7 +585,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -643,7 +643,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -701,7 +701,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -759,7 +759,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -817,7 +817,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -875,7 +875,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -933,7 +933,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -1001,7 +1001,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -1059,7 +1059,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -3252,7 +3252,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -3320,7 +3320,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -3413,7 +3413,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -4821,7 +4821,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -6399,7 +6399,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -6742,7 +6742,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -7010,7 +7010,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -7218,7 +7218,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -7471,7 +7471,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -8509,7 +8509,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -9877,7 +9877,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -10820,7 +10820,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -12158,7 +12158,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
pkg/util/converter/testdata/prom-matrix-histogram-partitioned-wide-frame.jsonc
Vendored
+144 -144
View File
@@ -1,9 +1,9 @@
// 🌟 This was machine generated. Do not edit. 🌟
//
//
// Frame[0] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+--------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -11,13 +11,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+--------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+--------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[1] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+---------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -25,13 +25,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+---------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+---------------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[2] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+--------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -39,13 +39,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+--------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+--------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[3] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -53,13 +53,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[4] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+-----------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -67,13 +67,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+-----------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+-----------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[5] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+--------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -81,13 +81,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+--------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+--------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[6] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -95,13 +95,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+------------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[7] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+--------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -109,13 +109,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+--------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+--------------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[8] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 1 Rows
// +-------------------------------+--------------------------------------------------------------------------------------------+----------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -124,13 +124,13 @@
// +-------------------------------+--------------------------------------------------------------------------------------------+----------------------+----------------------+---------------+
// | 2022-04-14 19:08:20 +0000 UTC | 0.05255602595335715 | 0.057312752700291944 | 0.003508784241348215 | 0 |
// +-------------------------------+--------------------------------------------------------------------------------------------+----------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[9] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 0 Rows
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -138,13 +138,13 @@
// | Type: []time.Time | Type: []float64 | Type: []float64 | Type: []float64 | Type: []int8 |
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
// +-------------------+---------------------------------------------------------------------------------------------+-----------------+-----------------+---------------+
//
//
//
//
//
//
// Frame[10] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 426 Rows
// +-------------------------------+------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -162,13 +162,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.002762135864009951 | 0.0030121305183748843 | 0.30175469375429953 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[11] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 1 Rows
// +-------------------------------+-------------------------------------------------------------------------------------+--------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -177,13 +177,13 @@
// +-------------------------------+-------------------------------------------------------------------------------------+--------------------+-----------------------+---------------+
// | 2022-04-14 19:08:20 +0000 UTC | 1 | 1.0905077326652577 | 0.0035087596183873042 | 0 |
// +-------------------------------+-------------------------------------------------------------------------------------+--------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[12] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 6 Rows
// +-------------------------------+-----------------------------------------------------------------------------------+--------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -197,13 +197,13 @@
// | 2022-04-14 19:13:20 +0000 UTC | 0.8408964152537144 | 0.9170040432046711 | 0.003508771929824561 | 0 |
// | 2022-04-14 19:13:20 +0000 UTC | 1 | 1.0905077326652577 | 0.003508771929824561 | 0 |
// +-------------------------------+-----------------------------------------------------------------------------------+--------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[13] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 269 Rows
// +-------------------------------+---------------------------------------------------------------------------+------------------------+--------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -221,13 +221,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 9.07293025972535e-06 | 9.894100606163098e-06 | 3.533338799658994 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+---------------------------------------------------------------------------+------------------------+--------------------+---------------+
//
//
//
//
//
//
// Frame[14] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 303 Rows
// +-------------------------------+-----------------------------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -245,13 +245,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.005065779510355506 | 0.005524271728019902 | 0.06666662973235489 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-----------------------------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[15] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 56 Rows
// +-------------------------------+------------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -269,13 +269,13 @@
// | 2022-04-14 19:10:00 +0000 UTC | 0.005524271728019902 | 0.0060242610367497685 | 0.00713925 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[16] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 41 Rows
// +-------------------------------+-----------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -293,13 +293,13 @@
// | 2022-04-14 19:10:00 +0000 UTC | 0.0060242610367497685 | 0.006569503244169644 | 0.0035300277777777778 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-----------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[17] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 29 Rows
// +-------------------------------+-----------------------------------------------------------------------------------------------------------+----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -317,13 +317,13 @@
// | 2022-04-14 19:11:40 +0000 UTC | 0.04052623608284405 | 0.044194173824159216 | 0.003508771929824561 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-----------------------------------------------------------------------------------------------------------+----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[18] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 38 Rows
// +-------------------------------+------------------------------------------------------------------------------------------------------+----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -341,13 +341,13 @@
// | 2022-04-14 19:11:40 +0000 UTC | 0.0060242610367497685 | 0.006569503244169644 | 0.003508771929824561 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------------------------------------------------------------------------------------+----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[19] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 195 Rows
// +-------------------------------+---------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -365,13 +365,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.0021298979153618314 | 0.0023226701464896895 | 0.07368416128056675 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+---------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[20] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 261 Rows
// +-------------------------------+-------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -389,13 +389,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.0009765625 | 0.0010649489576809157 | 0.03508765774105932 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[21] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 176 Rows
// +-------------------------------+-------------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -413,13 +413,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.009290680585958758 | 0.010131559020711013 | 0.003508771929824561 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-------------------------------------------------------------------------------------------------------+-----------------------+-----------------------+---------------+
//
//
//
//
//
//
// Frame[22] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 255 Rows
// +-------------------------------+-------------------------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -437,13 +437,13 @@
// | 2022-04-14 19:08:20 +0000 UTC | 0.04052623608284405 | 0.044194173824159216 | 0 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+-------------------------------------------------------------------------------------------------------------+-----------------------+----------------------+---------------+
//
//
//
//
//
//
// Frame[23] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 167 Rows
// +-------------------------------+------------------------------------------------------------------------------------+------------------------+-----------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -461,15 +461,15 @@
// | 2022-04-14 19:08:20 +0000 UTC | 1.1766134837401892e-05 | 1.2831061023768835e-05 | 0.1578945767934209 | 0 |
// | ... | ... | ... | ... | ... |
// +-------------------------------+------------------------------------------------------------------------------------+------------------------+-----------------------+---------------+
//
//
//
//
// 🌟 This was machine generated. Do not edit. 🌟
{
"frames": [
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -527,7 +527,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -585,7 +585,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -643,7 +643,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -701,7 +701,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -759,7 +759,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -817,7 +817,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -875,7 +875,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -933,7 +933,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -1001,7 +1001,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -1059,7 +1059,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -3252,7 +3252,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -3320,7 +3320,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -3413,7 +3413,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -4821,7 +4821,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -6399,7 +6399,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -6742,7 +6742,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -7010,7 +7010,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -7218,7 +7218,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -7471,7 +7471,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -8509,7 +8509,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -9877,7 +9877,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -10820,7 +10820,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
@@ -12158,7 +12158,7 @@
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
pkg/util/converter/testdata/prom-vector-histogram-no-labels-frame.jsonc
Vendored
+6 -6
View File
@@ -1,9 +1,9 @@
// 🌟 This was machine generated. Do not edit. 🌟
//
//
// Frame[0] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 134 Rows
// +-----------------------------------+------------------------+------------------------+---------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -21,15 +21,15 @@
// | 2022-04-14 20:21:08.042 +0000 UTC | 9.07293025972535e-06 | 9.894100606163098e-06 | 3.392982456140351 | 0 |
// | ... | ... | ... | ... | ... |
// +-----------------------------------+------------------------+------------------------+---------------------+---------------+
//
//
//
//
// 🌟 This was machine generated. Do not edit. 🌟
{
"frames": [
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
pkg/util/converter/testdata/prom-vector-histogram-no-labels-wide-frame.jsonc
Vendored
+6 -6
View File
@@ -1,9 +1,9 @@
// 🌟 This was machine generated. Do not edit. 🌟
//
//
// Frame[0] {
// "type": "heatmap-cells-sparse"
// "type": "heatmap-cells"
// }
// Name:
// Name:
// Dimensions: 5 Fields by 134 Rows
// +-----------------------------------+------------------------+------------------------+---------------------+---------------+
// | Name: xMax | Name: yMin | Name: yMax | Name: count | Name: yLayout |
@@ -21,15 +21,15 @@
// | 2022-04-14 20:21:08.042 +0000 UTC | 9.07293025972535e-06 | 9.894100606163098e-06 | 3.392982456140351 | 0 |
// | ... | ... | ... | ... | ... |
// +-----------------------------------+------------------------+------------------------+---------------------+---------------+
//
//
//
//
// 🌟 This was machine generated. Do not edit. 🌟
{
"frames": [
{
"schema": {
"meta": {
"type": "heatmap-cells-sparse"
"type": "heatmap-cells"
},
"fields": [
{
public/app/features/transformers/calculateHeatmap/heatmap.test.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import { FieldType } from '@grafana/data';
import { toDataFrame } from '@grafana/data/src/dataframe/processDataFrame';
import { bucketsToScanlines, calculateHeatmapFromData } from './heatmap';
import { rowsToCellsHeatmap, calculateHeatmapFromData } from './heatmap';
import { HeatmapCalculationOptions } from './models.gen';
describe('Heatmap transformer', () => {
@@ -58,7 +58,7 @@ describe('Heatmap transformer', () => {
],
});
const heatmap = bucketsToScanlines({ frame, value: 'Speed' });
const heatmap = rowsToCellsHeatmap({ frame, value: 'Speed' });
expect(heatmap.fields.map((f) => ({ name: f.name, type: f.type, config: f.config }))).toMatchInlineSnapshot(`
Array [
Object {
@@ -92,7 +92,7 @@ describe('Heatmap transformer', () => {
"C",
],
},
"type": "heatmap-scanlines",
"type": "heatmap-cells",
}
`);
expect(heatmap.fields[1].values.toArray()).toMatchInlineSnapshot(`
public/app/features/transformers/calculateHeatmap/heatmap.ts
+64 -17
View File
@@ -11,10 +11,14 @@ import {
DataFrameType,
getFieldDisplayName,
Field,
getValueFormat,
formattedValueToString,
durationToMilliseconds,
parseDuration,
} from '@grafana/data';
import { ScaleDistribution } from '@grafana/schema';
import { HeatmapBucketLayout, HeatmapCalculationMode, HeatmapCalculationOptions } from './models.gen';
import { HeatmapCellLayout, HeatmapCalculationMode, HeatmapCalculationOptions } from './models.gen';
import { niceLinearIncrs, niceTimeIncrs } from './utils';
export interface HeatmapTransformerOptions extends HeatmapCalculationOptions {
@@ -49,27 +53,50 @@ export function sortAscStrInf(aName?: string | null, bName?: string | null) {
return parseNumeric(aName) - parseNumeric(bName);
}
export interface HeatmapScanlinesCustomMeta {
export interface HeatmapRowsCustomMeta {
/** This provides the lookup values */
yOrdinalDisplay: string[];
yOrdinalLabel?: string[];
yMatchWithLabel?: string;
yMinDisplay?: string;
}
/** simple utility to get heatmap metadata from a frame */
export function readHeatmapScanlinesCustomMeta(frame?: DataFrame): HeatmapScanlinesCustomMeta {
return (frame?.meta?.custom ?? {}) as HeatmapScanlinesCustomMeta;
export function readHeatmapRowsCustomMeta(frame?: DataFrame): HeatmapRowsCustomMeta {
return (frame?.meta?.custom ?? {}) as HeatmapRowsCustomMeta;
}
export interface BucketsOptions {
export function isHeatmapCellsDense(frame: DataFrame) {
let foundY = false;
for (let field of frame.fields) {
// dense heatmap frames can only have one of these fields
switch (field.name) {
case 'y':
case 'yMin':
case 'yMax':
if (foundY) {
return false;
}
foundY = true;
}
}
return foundY;
}
export interface RowsHeatmapOptions {
frame: DataFrame;
value?: string; // the field value name
layout?: HeatmapBucketLayout;
unit?: string;
decimals?: number;
layout?: HeatmapCellLayout;
}
/** Given existing buckets, create a values style frame */
// Assumes frames have already been sorted ASC and de-accumulated.
export function bucketsToScanlines(opts: BucketsOptions): DataFrame {
export function rowsToCellsHeatmap(opts: RowsHeatmapOptions): DataFrame {
// TODO: handle null-filling w/ fields[0].config.interval?
const xField = opts.frame.fields[0];
const xValues = xField.values.toArray();
@@ -106,29 +133,51 @@ export function bucketsToScanlines(opts: BucketsOptions): DataFrame {
// this name determines whether cells are drawn above, below, or centered on the values
let ordinalFieldName = yFields[0].labels?.le != null ? 'yMax' : 'y';
switch (opts.layout) {
case HeatmapBucketLayout.le:
case HeatmapCellLayout.le:
ordinalFieldName = 'yMax';
break;
case HeatmapBucketLayout.ge:
case HeatmapCellLayout.ge:
ordinalFieldName = 'yMin';
break;
case HeatmapBucketLayout.unknown:
case HeatmapCellLayout.unknown:
ordinalFieldName = 'y';
break;
}
const custom: HeatmapScanlinesCustomMeta = {
const custom: HeatmapRowsCustomMeta = {
yOrdinalDisplay: yFields.map((f) => getFieldDisplayName(f, opts.frame)),
yMatchWithLabel: Object.keys(yFields[0].labels ?? {})[0],
};
if (custom.yMatchWithLabel) {
custom.yOrdinalLabel = yFields.map((f) => f.labels?.[custom.yMatchWithLabel!] ?? '');
if (custom.yMatchWithLabel === 'le') {
custom.yMinDisplay = '0.0';
}
}
// Format the labels as a value
// TODO: this leaves the internally prepended '0.0' without this formatting treatment
if (opts.unit?.length || opts.decimals != null) {
const fmt = getValueFormat(opts.unit ?? 'short');
if (custom.yMinDisplay) {
custom.yMinDisplay = formattedValueToString(fmt(0, opts.decimals));
}
custom.yOrdinalDisplay = custom.yOrdinalDisplay.map((name) => {
let num = +name;
if (!Number.isNaN(num)) {
return formattedValueToString(fmt(num, opts.decimals));
}
return name;
});
}
return {
length: xs.length,
refId: opts.frame.refId,
meta: {
type: DataFrameType.HeatmapScanlines,
type: DataFrameType.HeatmapCells,
custom,
},
fields: [
@@ -247,11 +296,12 @@ export function calculateHeatmapFromData(frames: DataFrame[], options: HeatmapCa
const scaleDistribution = options.yBuckets?.scale ?? {
type: ScaleDistribution.Linear,
};
const heat2d = heatmap(xs, ys, {
xSorted: true,
xTime: xField.type === FieldType.time,
xMode: xBucketsCfg.mode,
xSize: xBucketsCfg.value ? +xBucketsCfg.value : undefined,
xSize: durationToMilliseconds(parseDuration(xBucketsCfg.value ?? '')),
yMode: yBucketsCfg.mode,
ySize: yBucketsCfg.value ? +yBucketsCfg.value : undefined,
yLog: scaleDistribution?.type === ScaleDistribution.Log ? (scaleDistribution?.log as any) : undefined,
@@ -261,7 +311,7 @@ export function calculateHeatmapFromData(frames: DataFrame[], options: HeatmapCa
length: heat2d.x.length,
name: getFieldDisplayName(yField),
meta: {
type: DataFrameType.HeatmapScanlines,
type: DataFrameType.HeatmapCells,
},
fields: [
{
@@ -293,9 +343,6 @@ export function calculateHeatmapFromData(frames: DataFrame[], options: HeatmapCa
};
//console.timeEnd('calculateHeatmapFromData');
//console.log({ tiles: frame.length });
return frame;
}
public/app/features/transformers/calculateHeatmap/models.gen.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export enum HeatmapCalculationMode {
Count = 'count',
}
export const enum HeatmapBucketLayout {
export const enum HeatmapCellLayout {
le = 'le',
ge = 'ge',
unknown = 'unknown', // unknown
public/app/plugins/datasource/prometheus/result_transformer.ts
+1 -1
View File
@@ -558,7 +558,7 @@ function mergeHeatmapFrames(frames: DataFrame[]): DataFrame[] {
...frames[0],
meta: {
...frames[0].meta,
type: DataFrameType.HeatmapBuckets,
type: DataFrameType.HeatmapRows,
},
fields: [timeField!, ...countFields],
},
public/app/plugins/panel/heatmap-new/HeatmapHoverView.tsx
+12 -8
View File
@@ -1,10 +1,10 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { DataFrameType, Field, FieldType, formattedValueToString, getFieldDisplayName, LinkModel } from '@grafana/data';
import { LinkButton, VerticalGroup } from '@grafana/ui';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { readHeatmapScanlinesCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
import { HeatmapBucketLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
import { DataHoverView } from '../geomap/components/DataHoverView';
@@ -47,14 +47,14 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
const countVals = countField?.values.toArray();
// labeled buckets
const meta = readHeatmapScanlinesCustomMeta(data.heatmap);
const meta = readHeatmapRowsCustomMeta(data.heatmap);
const yDispSrc = meta.yOrdinalDisplay ?? yVals;
const yDisp = yField?.display ? (v: any) => formattedValueToString(yField.display!(v)) : (v: any) => `${v}`;
const yValueIdx = index % data.yBucketCount! ?? 0;
const yMinIdx = data.yLayout === HeatmapBucketLayout.le ? yValueIdx - 1 : yValueIdx;
const yMaxIdx = data.yLayout === HeatmapBucketLayout.le ? yValueIdx : yValueIdx + 1;
const yMinIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx - 1 : yValueIdx;
const yMaxIdx = data.yLayout === HeatmapCellLayout.le ? yValueIdx : yValueIdx + 1;
const yBucketMin = yDispSrc?.[yMinIdx];
const yBucketMax = yDispSrc?.[yMaxIdx];
@@ -154,7 +154,11 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
[index]
);
if (data.heatmap?.meta?.type === DataFrameType.HeatmapSparse) {
const [isSparse] = useState(
() => data.heatmap?.meta?.type === DataFrameType.HeatmapCells && !isHeatmapCellsDense(data.heatmap)
);
if (isSparse) {
return (
<div>
<DataHoverView data={data.heatmap} rowIndex={index} />
@@ -164,7 +168,7 @@ const HeatmapHoverCell = ({ data, hover, showHistogram }: Props) => {
const renderYBuckets = () => {
switch (data.yLayout) {
case HeatmapBucketLayout.unknown:
case HeatmapCellLayout.unknown:
return <div>{yDisp(yBucketMin)}</div>;
}
return (
public/app/plugins/panel/heatmap-new/HeatmapPanel.tsx
+17 -19
View File
@@ -1,13 +1,14 @@
import { css } from '@emotion/css';
import React, { useCallback, useMemo, useRef, useState } from 'react';
import { DataFrameType, GrafanaTheme2, PanelProps, reduceField, ReducerID, TimeRange } from '@grafana/data';
import { DataFrameType, GrafanaTheme2, PanelProps, TimeRange } from '@grafana/data';
import { PanelDataErrorView } from '@grafana/runtime';
import { ScaleDistributionConfig } from '@grafana/schema';
import {
Portal,
ScaleDistribution,
UPlotChart,
usePanelContext,
useStyles2,
useTheme2,
VizLayout,
@@ -15,7 +16,7 @@ import {
} from '@grafana/ui';
import { CloseButton } from 'app/core/components/CloseButton/CloseButton';
import { ColorScale } from 'app/core/components/ColorScale/ColorScale';
import { readHeatmapScanlinesCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
import { HeatmapHoverView } from './HeatmapHoverView';
import { prepareHeatmapData } from './fields';
@@ -34,11 +35,13 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
height,
options,
fieldConfig,
eventBus,
onChangeTimeRange,
replaceVariables,
}) => {
const theme = useTheme2();
const styles = useStyles2(getStyles);
const { sync } = usePanelContext();
// ugh
let timeRangeRef = useRef<TimeRange>(timeRange);
@@ -56,7 +59,7 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
let exemplarsXFacet: number[] = []; // "Time" field
let exemplarsyFacet: number[] = [];
const meta = readHeatmapScanlinesCustomMeta(info.heatmap);
const meta = readHeatmapRowsCustomMeta(info.heatmap);
if (info.exemplars?.length && meta.yMatchWithLabel) {
exemplarsXFacet = info.exemplars?.fields[0].values.toArray();
@@ -113,6 +116,7 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
return prepConfig({
dataRef,
theme,
eventBus,
onhover: onhover,
onclick: options.tooltip.show ? onclick : null,
onzoom: (evt) => {
@@ -124,12 +128,11 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
isToolTipOpen,
timeZone,
getTimeRange: () => timeRangeRef.current,
sync,
palette,
cellGap: options.cellGap,
hideLE: options.filterValues?.le,
hideGE: options.filterValues?.ge,
valueMin: options.color.min,
valueMax: options.color.max,
exemplarColor: options.exemplars?.color ?? 'rgba(255,0,255,0.7)',
yAxisConfig: options.yAxis,
ySizeDivisor: scaleConfig?.type === ScaleDistribution.Log ? +(options.calculation?.yBuckets?.value || 1) : 1,
@@ -143,21 +146,10 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
}
let heatmapType = dataRef.current?.heatmap?.meta?.type;
let countFieldIdx = heatmapType === DataFrameType.HeatmapScanlines ? 2 : 3;
let isSparseHeatmap = heatmapType === DataFrameType.HeatmapCells && !isHeatmapCellsDense(dataRef.current?.heatmap!);
let countFieldIdx = !isSparseHeatmap ? 2 : 3;
const countField = info.heatmap.fields[countFieldIdx];
// TODO -- better would be to get the range from the real color scale!
let { min, max } = options.color;
if (min == null || max == null) {
const calc = reduceField({ field: countField, reducers: [ReducerID.min, ReducerID.max] });
if (min == null) {
min = calc[ReducerID.min];
}
if (max == null) {
max = calc[ReducerID.max];
}
}
let hoverValue: number | undefined = undefined;
// seriesIdx: 1 is heatmap layer; 2 is exemplar layer
if (hover && info.heatmap.fields && hover.seriesIdx === 1) {
@@ -167,7 +159,13 @@ export const HeatmapPanel: React.FC<HeatmapPanelProps> = ({
return (
<VizLayout.Legend placement="bottom" maxHeight="20%">
<div className={styles.colorScaleWrapper}>
<ColorScale hoverValue={hoverValue} colorPalette={palette} min={min!} max={max!} display={info.display} />
<ColorScale
hoverValue={hoverValue}
colorPalette={palette}
min={dataRef.current.minValue!}
max={dataRef.current.maxValue!}
display={info.display}
/>
</div>
</VizLayout.Legend>
);
public/app/plugins/panel/heatmap-new/fields.ts
+141 -41
View File
@@ -1,17 +1,25 @@
import {
DataFrame,
DataFrameType,
Field,
FieldType,
formattedValueToString,
getDisplayProcessor,
getValueFormat,
GrafanaTheme2,
outerJoinDataFrames,
PanelData,
ValueFormatter,
} from '@grafana/data';
import { calculateHeatmapFromData, bucketsToScanlines } from 'app/features/transformers/calculateHeatmap/heatmap';
import { HeatmapBucketLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
import {
calculateHeatmapFromData,
isHeatmapCellsDense,
readHeatmapRowsCustomMeta,
rowsToCellsHeatmap,
} from 'app/features/transformers/calculateHeatmap/heatmap';
import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
import { PanelOptions } from './models.gen';
import { CellValues, PanelOptions } from './models.gen';
import { boundedMinMax } from './utils';
export interface HeatmapData {
heatmap?: DataFrame; // data we will render
@@ -24,8 +32,12 @@ export interface HeatmapData {
xBucketCount?: number;
yBucketCount?: number;
xLayout?: HeatmapBucketLayout;
yLayout?: HeatmapBucketLayout;
xLayout?: HeatmapCellLayout;
yLayout?: HeatmapCellLayout;
// color scale range
minValue?: number;
maxValue?: number;
// Print a heatmap cell value
display?: (v: number) => string;
@@ -43,63 +55,92 @@ export function prepareHeatmapData(data: PanelData, options: PanelOptions, theme
const exemplars = data.annotations?.find((f) => f.name === 'exemplar');
if (options.calculate) {
// TODO, check for error etc
return getHeatmapData(calculateHeatmapFromData(frames, options.calculation ?? {}), exemplars, theme);
return getDenseHeatmapData(calculateHeatmapFromData(frames, options.calculation ?? {}), exemplars, options, theme);
}
// Check for known heatmap types
let bucketHeatmap: DataFrame | undefined = undefined;
let rowsHeatmap: DataFrame | undefined = undefined;
for (const frame of frames) {
switch (frame.meta?.type) {
case DataFrameType.HeatmapSparse:
return getSparseHeatmapData(frame, exemplars, theme);
case DataFrameType.HeatmapCells:
return isHeatmapCellsDense(frame)
? getDenseHeatmapData(frame, exemplars, options, theme)
: getSparseHeatmapData(frame, exemplars, options, theme);
case DataFrameType.HeatmapScanlines:
return getHeatmapData(frame, exemplars, theme);
case DataFrameType.HeatmapBuckets:
bucketHeatmap = frame; // the default format
case DataFrameType.HeatmapRows:
rowsHeatmap = frame; // the default format
}
}
// Everything past here assumes a field for each row in the heatmap (buckets)
if (!bucketHeatmap) {
if (!rowsHeatmap) {
if (frames.length > 1) {
bucketHeatmap = [
rowsHeatmap = [
outerJoinDataFrames({
frames,
})!,
][0];
} else {
bucketHeatmap = frames[0];
rowsHeatmap = frames[0];
}
}
return getHeatmapData(bucketsToScanlines({ ...options.bucketFrame, frame: bucketHeatmap }), exemplars, theme);
return getDenseHeatmapData(
rowsToCellsHeatmap({
unit: options.yAxis?.unit, // used to format the ordinal lookup values
decimals: options.yAxis?.decimals,
...options.rowsFrame,
frame: rowsHeatmap,
}),
exemplars,
options,
theme
);
}
const getSparseHeatmapData = (
frame: DataFrame,
exemplars: DataFrame | undefined,
options: PanelOptions,
theme: GrafanaTheme2
): HeatmapData => {
if (frame.meta?.type !== DataFrameType.HeatmapSparse) {
if (frame.meta?.type !== DataFrameType.HeatmapCells || isHeatmapCellsDense(frame)) {
return {
warning: 'Expected sparse heatmap format',
heatmap: frame,
};
}
const disp = frame.fields[3].display ?? getValueFormat('short');
// y axis tick label display
updateFieldDisplay(frame.fields[1], options.yAxis, theme);
// cell value display
const disp = updateFieldDisplay(frame.fields[3], options.cellValues, theme);
let [minValue, maxValue] = boundedMinMax(
frame.fields[3].values.toArray(),
options.color.min,
options.color.max,
options.filterValues?.le,
options.filterValues?.ge
);
return {
heatmap: frame,
minValue,
maxValue,
exemplars,
display: (v) => formattedValueToString(disp(v)),
};
};
const getHeatmapData = (frame: DataFrame, exemplars: DataFrame | undefined, theme: GrafanaTheme2): HeatmapData => {
if (frame.meta?.type !== DataFrameType.HeatmapScanlines) {
const getDenseHeatmapData = (
frame: DataFrame,
exemplars: DataFrame | undefined,
options: PanelOptions,
theme: GrafanaTheme2
): HeatmapData => {
if (frame.meta?.type !== DataFrameType.HeatmapCells) {
return {
warning: 'Expected heatmap scanlines format',
heatmap: frame,
@@ -110,11 +151,54 @@ const getHeatmapData = (frame: DataFrame, exemplars: DataFrame | undefined, them
return { heatmap: frame };
}
// Y field values (display is used in the axis)
if (!frame.fields[1].display) {
frame.fields[1].display = getDisplayProcessor({ field: frame.fields[1], theme });
const meta = readHeatmapRowsCustomMeta(frame);
let xName: string | undefined = undefined;
let yName: string | undefined = undefined;
let valueField: Field | undefined = undefined;
// validate field display properties
for (const field of frame.fields) {
switch (field.name) {
case 'y':
yName = field.name;
case 'yMin':
case 'yMax': {
if (!yName) {
yName = field.name;
}
if (meta.yOrdinalDisplay == null) {
updateFieldDisplay(field, options.yAxis, theme);
}
break;
}
case 'x':
case 'xMin':
case 'xMax':
xName = field.name;
break;
default: {
if (field.type === FieldType.number && !valueField) {
valueField = field;
}
}
}
}
if (!yName) {
return { warning: 'Missing Y field', heatmap: frame };
}
if (!yName) {
return { warning: 'Missing X field', heatmap: frame };
}
if (!valueField) {
return { warning: 'Missing value field', heatmap: frame };
}
const disp = updateFieldDisplay(valueField, options.cellValues, theme);
// infer bucket sizes from data (for now)
// the 'heatmap-scanlines' dense frame format looks like:
// x: 1,1,1,1,2,2,2,2
@@ -132,10 +216,13 @@ const getHeatmapData = (frame: DataFrame, exemplars: DataFrame | undefined, them
let yBinIncr = ys[1] - ys[0];
let xBinIncr = xs[yBinQty] - xs[0];
// The "count" field
const disp = frame.fields[2].display ?? getValueFormat('short');
const xName = frame.fields[0].name;
const yName = frame.fields[1].name;
let [minValue, maxValue] = boundedMinMax(
valueField.values.toArray(),
options.color.min,
options.color.max,
options.filterValues?.le,
options.filterValues?.ge
);
const data: HeatmapData = {
heatmap: frame,
@@ -145,22 +232,35 @@ const getHeatmapData = (frame: DataFrame, exemplars: DataFrame | undefined, them
xBucketCount: xBinQty,
yBucketCount: yBinQty,
minValue,
maxValue,
// TODO: improve heuristic
xLayout:
xName === 'xMax'
? HeatmapBucketLayout.le
: xName === 'xMin'
? HeatmapBucketLayout.ge
: HeatmapBucketLayout.unknown,
xName === 'xMax' ? HeatmapCellLayout.le : xName === 'xMin' ? HeatmapCellLayout.ge : HeatmapCellLayout.unknown,
yLayout:
yName === 'yMax'
? HeatmapBucketLayout.le
: yName === 'yMin'
? HeatmapBucketLayout.ge
: HeatmapBucketLayout.unknown,
yName === 'yMax' ? HeatmapCellLayout.le : yName === 'yMin' ? HeatmapCellLayout.ge : HeatmapCellLayout.unknown,
display: (v) => formattedValueToString(disp(v)),
};
return data;
};
function updateFieldDisplay(field: Field, opts: CellValues | undefined, theme: GrafanaTheme2): ValueFormatter {
if (opts?.unit?.length || opts?.decimals != null) {
const { unit, decimals } = opts;
field.display = undefined;
field.config = { ...field.config };
if (unit?.length) {
field.config.unit = unit;
}
if (decimals != null) {
field.config.decimals = decimals;
}
}
if (!field.display) {
field.display = getDisplayProcessor({ field, theme });
}
return field.display;
}
public/app/plugins/panel/heatmap-new/migrations.test.ts
+9 -7
View File
@@ -21,16 +21,10 @@ describe('Heatmap Migrations', () => {
expect(panel).toMatchInlineSnapshot(`
Object {
"fieldConfig": Object {
"defaults": Object {
"decimals": 6,
"unit": "short",
},
"defaults": Object {},
"overrides": Array [],
},
"options": Object {
"bucketFrame": Object {
"layout": "auto",
},
"calculate": true,
"calculation": Object {
"xBuckets": Object {
@@ -48,6 +42,9 @@ describe('Heatmap Migrations', () => {
},
"cellGap": 2,
"cellRadius": 10,
"cellValues": Object {
"decimals": undefined,
},
"color": Object {
"exponent": 0.5,
"fill": "dark-orange",
@@ -67,6 +64,9 @@ describe('Heatmap Migrations', () => {
"legend": Object {
"show": true,
},
"rowsFrame": Object {
"layout": "auto",
},
"showValue": "never",
"tooltip": Object {
"show": true,
@@ -75,9 +75,11 @@ describe('Heatmap Migrations', () => {
"yAxis": Object {
"axisPlacement": "left",
"axisWidth": 400,
"decimals": 6,
"max": 22,
"min": 7,
"reverse": false,
"unit": "short",
},
},
}
public/app/plugins/panel/heatmap-new/migrations.ts
+31 -20
View File
@@ -1,7 +1,7 @@
import { FieldConfigSource, PanelModel, PanelTypeChangedHandler } from '@grafana/data';
import { AxisPlacement, ScaleDistribution, VisibilityMode } from '@grafana/schema';
import {
HeatmapBucketLayout,
HeatmapCellLayout,
HeatmapCalculationMode,
HeatmapCalculationOptions,
} from 'app/features/transformers/calculateHeatmap/models.gen';
@@ -9,6 +9,15 @@ import {
import { PanelOptions, defaultPanelOptions, HeatmapColorMode } from './models.gen';
import { colorSchemes } from './palettes';
/** Called when the version number changes */
export const heatmapMigrationHandler = (panel: PanelModel): Partial<PanelOptions> => {
// Migrating from angular
if (Object.keys(panel.options).length === 0) {
return heatmapChangedHandler(panel, 'heatmap', { angular: panel }, panel.fieldConfig);
}
return panel.options;
};
/**
* This is called when the panel changes from another panel
*/
@@ -21,6 +30,14 @@ export const heatmapChangedHandler: PanelTypeChangedHandler = (panel, prevPlugin
panel.fieldConfig = fieldConfig; // Mutates the incoming panel
return options;
}
// alpha for 8.5+, then beta at 9.0.1
if (prevPluginId === 'heatmap-new') {
const { bucketFrame, ...options } = panel.options;
if (bucketFrame) {
return { ...options, rowsFrame: bucketFrame };
}
return panel.options;
}
return {};
};
@@ -60,9 +77,6 @@ export function angularToReactHeatmap(angular: any): { fieldConfig: FieldConfigS
},
};
}
fieldConfig.defaults.unit = oldYAxis.format;
fieldConfig.defaults.decimals = oldYAxis.decimals;
}
const options: PanelOptions = {
@@ -77,12 +91,17 @@ export function angularToReactHeatmap(angular: any): { fieldConfig: FieldConfigS
yAxis: {
axisPlacement: oldYAxis.show === false ? AxisPlacement.Hidden : AxisPlacement.Left,
reverse: Boolean(angular.reverseYBuckets),
axisWidth: oldYAxis.width ? +oldYAxis.width : undefined,
axisWidth: asNumber(oldYAxis.width),
min: oldYAxis.min,
max: oldYAxis.max,
unit: oldYAxis.format,
decimals: oldYAxis.decimals,
},
bucketFrame: {
layout: getHeatmapBucketLayout(angular.yBucketBound),
cellValues: {
decimals: asNumber(angular.tooltipDecimals),
},
rowsFrame: {
layout: getHeatmapCellLayout(angular.yBucketBound),
},
legend: {
show: Boolean(angular.legend.show),
@@ -127,16 +146,16 @@ export function angularToReactHeatmap(angular: any): { fieldConfig: FieldConfigS
return { fieldConfig, options };
}
function getHeatmapBucketLayout(v?: string): HeatmapBucketLayout {
function getHeatmapCellLayout(v?: string): HeatmapCellLayout {
switch (v) {
case 'upper':
return HeatmapBucketLayout.ge;
return HeatmapCellLayout.ge;
case 'lower':
return HeatmapBucketLayout.le;
return HeatmapCellLayout.le;
case 'middle':
return HeatmapBucketLayout.unknown;
return HeatmapCellLayout.unknown;
}
return HeatmapBucketLayout.auto;
return HeatmapCellLayout.auto;
}
function asNumber(v: any, defaultValue?: number): number | undefined {
@@ -146,11 +165,3 @@ function asNumber(v: any, defaultValue?: number): number | undefined {
const num = +v;
return isNaN(num) ? defaultValue : num;
}
export const heatmapMigrationHandler = (panel: PanelModel): Partial<PanelOptions> => {
// Migrating from angular
if (!panel.pluginVersion && Object.keys(panel.options).length === 0) {
return heatmapChangedHandler(panel, 'heatmap', { angular: panel }, panel.fieldConfig);
}
return panel.options;
};
public/app/plugins/panel/heatmap-new/models.gen.ts
+17 -7
View File
@@ -4,7 +4,7 @@
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
import { AxisConfig, AxisPlacement, HideableFieldConfig, ScaleDistributionConfig, VisibilityMode } from '@grafana/schema';
import { HeatmapBucketLayout, HeatmapCalculationOptions } from 'app/features/transformers/calculateHeatmap/models.gen';
import { HeatmapCellLayout, HeatmapCalculationOptions } from 'app/features/transformers/calculateHeatmap/models.gen';
export const modelVersion = Object.freeze([1, 0]);
@@ -39,6 +39,11 @@ export interface YAxisConfig extends AxisConfig {
max?: number;
}
export interface CellValues {
unit?: string;
decimals?: number;
}
export interface FilterValueRange {
le?: number;
ge?: number;
@@ -56,9 +61,9 @@ export interface ExemplarConfig {
color: string;
}
export interface BucketFrameOptions {
export interface RowsHeatmapOptions {
value?: string; // value field name
layout?: HeatmapBucketLayout;
layout?: HeatmapCellLayout;
}
export interface PanelOptions {
@@ -67,13 +72,15 @@ export interface PanelOptions {
color: HeatmapColorOptions;
filterValues?: FilterValueRange; // was hideZeroBuckets
bucketFrame?: BucketFrameOptions;
rowsFrame?: RowsHeatmapOptions;
showValue: VisibilityMode;
cellGap?: number; // was cardPadding
cellRadius?: number; // was cardRadius (not used, but migrated from angular)
cellValues?: CellValues;
yAxis: YAxisConfig;
legend: HeatmapLegend;
tooltip: HeatmapTooltip;
@@ -90,11 +97,14 @@ export const defaultPanelOptions: PanelOptions = {
exponent: 0.5,
steps: 64,
},
bucketFrame: {
layout: HeatmapBucketLayout.auto,
rowsFrame: {
layout: HeatmapCellLayout.auto,
},
yAxis: {
axisPlacement: AxisPlacement.Left,
},
cellValues: {
},
showValue: VisibilityMode.Auto,
tooltip: {
public/app/plugins/panel/heatmap-new/module.tsx
+65 -32
View File
@@ -1,14 +1,16 @@
import React from 'react';
import { FieldConfigProperty, FieldType, identityOverrideProcessor, PanelPlugin } from '@grafana/data';
import { FieldConfigProperty, FieldType, identityOverrideProcessor, PanelData, PanelPlugin } from '@grafana/data';
import { config } from '@grafana/runtime';
import { AxisPlacement, GraphFieldConfig, ScaleDistribution, ScaleDistributionConfig } from '@grafana/schema';
import { addHideFrom, ScaleDistributionEditor } from '@grafana/ui/src/options/builder';
import { ColorScale } from 'app/core/components/ColorScale/ColorScale';
import { addHeatmapCalculationOptions } from 'app/features/transformers/calculateHeatmap/editor/helper';
import { HeatmapBucketLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
import { readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
import { HeatmapPanel } from './HeatmapPanel';
import { prepareHeatmapData } from './fields';
import { heatmapChangedHandler, heatmapMigrationHandler } from './migrations';
import { PanelOptions, defaultPanelOptions, HeatmapColorMode, HeatmapColorScale } from './models.gen';
import { colorSchemes, quantizeScheme } from './palettes';
@@ -16,15 +18,7 @@ import { HeatmapSuggestionsSupplier } from './suggestions';
export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPanel)
.useFieldConfig({
// This keeps: unit, decimals, displayName
disableStandardOptions: [
FieldConfigProperty.Color,
FieldConfigProperty.Thresholds,
FieldConfigProperty.Min,
FieldConfigProperty.Max,
FieldConfigProperty.Mappings,
FieldConfigProperty.NoValue,
],
disableStandardOptions: Object.values(FieldConfigProperty).filter((v) => v !== FieldConfigProperty.Links),
useCustomConfig: (builder) => {
builder.addCustomEditor<void, ScaleDistributionConfig>({
id: 'scaleDistribution',
@@ -46,6 +40,13 @@ export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPan
.setPanelOptions((builder, context) => {
const opts = context.options ?? defaultPanelOptions;
let isOrdinalY = false;
try {
const v = prepareHeatmapData({ series: context.data } as PanelData, opts, config.theme2);
isOrdinalY = readHeatmapRowsCustomMeta(v.heatmap).yOrdinalDisplay != null;
} catch {}
let category = ['Heatmap'];
builder.addRadio({
@@ -81,8 +82,24 @@ export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPan
},
});
// TODO: support clamping the min/max range when there is a real axis
if (false && opts.calculate) {
builder
.addUnitPicker({
category,
path: 'yAxis.unit',
name: 'Unit',
defaultValue: undefined,
})
.addNumberInput({
category,
path: 'yAxis.decimals',
name: 'Decimals',
settings: {
placeholder: 'Auto',
},
});
if (!isOrdinalY) {
// if undefined, then show the min+max
builder
.addNumberInput({
path: 'yAxis.min',
@@ -125,16 +142,16 @@ export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPan
if (!opts.calculate) {
builder.addRadio({
path: 'bucketFrame.layout',
path: 'rowsFrame.layout',
name: 'Tick alignment',
defaultValue: defaultPanelOptions.bucketFrame?.layout ?? HeatmapBucketLayout.auto,
defaultValue: defaultPanelOptions.rowsFrame?.layout ?? HeatmapCellLayout.auto,
category,
settings: {
options: [
{ label: 'Auto', value: HeatmapBucketLayout.auto },
{ label: 'Top (LE)', value: HeatmapBucketLayout.le },
{ label: 'Middle', value: HeatmapBucketLayout.unknown },
{ label: 'Bottom (GE)', value: HeatmapBucketLayout.ge },
{ label: 'Auto', value: HeatmapCellLayout.auto },
{ label: 'Top (LE)', value: HeatmapCellLayout.le },
{ label: 'Middle', value: HeatmapCellLayout.unknown },
{ label: 'Bottom (GE)', value: HeatmapCellLayout.ge },
],
},
});
@@ -260,7 +277,35 @@ export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPan
category,
});
category = ['Display'];
category = ['Cell display'];
if (!opts.calculate) {
builder.addTextInput({
path: 'rowsFrame.value',
name: 'Value name',
defaultValue: defaultPanelOptions.rowsFrame?.value,
settings: {
placeholder: 'Value',
},
category,
});
}
builder
.addUnitPicker({
category,
path: 'cellValues.unit',
name: 'Unit',
defaultValue: undefined,
})
.addNumberInput({
category,
path: 'cellValues.decimals',
name: 'Decimals',
settings: {
placeholder: 'Auto',
},
});
builder
// .addRadio({
@@ -324,18 +369,6 @@ export const plugin = new PanelPlugin<PanelOptions, GraphFieldConfig>(HeatmapPan
category,
});
if (!opts.calculate) {
builder.addTextInput({
path: 'bucketFrame.value',
name: 'Cell value name',
defaultValue: defaultPanelOptions.bucketFrame?.value,
settings: {
placeholder: 'Value',
},
category,
});
}
builder.addBooleanSwitch({
path: 'tooltip.yHistogram',
name: 'Show histogram (Y axis)',
public/app/plugins/panel/heatmap-new/utils.ts
+186 -73
View File
@@ -1,8 +1,13 @@
import { MutableRefObject, RefObject } from 'react';
import uPlot from 'uplot';
import uPlot, { Cursor } from 'uplot';
import {
DashboardCursorSync,
DataFrameType,
DataHoverClearEvent,
DataHoverEvent,
DataHoverPayload,
EventBus,
formattedValueToString,
getValueFormat,
GrafanaTheme2,
@@ -12,8 +17,8 @@ import {
} from '@grafana/data';
import { AxisPlacement, ScaleDirection, ScaleDistribution, ScaleOrientation } from '@grafana/schema';
import { UPlotConfigBuilder } from '@grafana/ui';
import { readHeatmapScanlinesCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
import { HeatmapBucketLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
import { isHeatmapCellsDense, readHeatmapRowsCustomMeta } from 'app/features/transformers/calculateHeatmap/heatmap';
import { HeatmapCellLayout } from 'app/features/transformers/calculateHeatmap/models.gen';
import { pointWithin, Quadtree, Rect } from '../barchart/quadtree';
@@ -55,6 +60,7 @@ export interface HeatmapZoomEvent {
interface PrepConfigOpts {
dataRef: RefObject<HeatmapData>;
theme: GrafanaTheme2;
eventBus: EventBus;
onhover?: null | ((evt?: HeatmapHoverEvent | null) => void);
onclick?: null | ((evt?: any) => void);
onzoom?: null | ((evt: HeatmapZoomEvent) => void);
@@ -66,16 +72,16 @@ interface PrepConfigOpts {
cellGap?: number | null; // in css pixels
hideLE?: number;
hideGE?: number;
valueMin?: number;
valueMax?: number;
yAxisConfig: YAxisConfig;
ySizeDivisor?: number;
sync?: () => DashboardCursorSync;
}
export function prepConfig(opts: PrepConfigOpts) {
const {
dataRef,
theme,
eventBus,
onhover,
onclick,
onzoom,
@@ -86,12 +92,14 @@ export function prepConfig(opts: PrepConfigOpts) {
cellGap,
hideLE,
hideGE,
valueMin,
valueMax,
yAxisConfig,
ySizeDivisor,
sync,
} = opts;
const xScaleKey = 'x';
const xScaleUnit = 'time';
const pxRatio = devicePixelRatio;
let heatmapType = dataRef.current?.heatmap?.meta?.type;
@@ -131,8 +139,8 @@ export function prepConfig(opts: PrepConfigOpts) {
onzoom &&
builder.addHook('setSelect', (u) => {
onzoom({
xMin: u.posToVal(u.select.left, 'x'),
xMax: u.posToVal(u.select.left + u.select.width, 'x'),
xMin: u.posToVal(u.select.left, xScaleKey),
xMax: u.posToVal(u.select.left + u.select.width, xScaleKey),
});
u.setSelect({ left: 0, top: 0, width: 0, height: 0 }, false);
});
@@ -140,7 +148,7 @@ export function prepConfig(opts: PrepConfigOpts) {
// this is a tmp hack because in mode: 2, uplot does not currently call scales.x.range() for setData() calls
// scales.x.range() typically reads back from drilled-down panelProps.timeRange via getTimeRange()
builder.addHook('setData', (u) => {
//let [min, max] = (u.scales!.x!.range! as uPlot.Range.Function)(u, 0, 100, 'x');
//let [min, max] = (u.scales!.x!.range! as uPlot.Range.Function)(u, 0, 100, xScaleKey);
let { min: xMin, max: xMax } = u.scales!.x;
@@ -149,7 +157,7 @@ export function prepConfig(opts: PrepConfigOpts) {
if (xMin !== min || xMax !== max) {
queueMicrotask(() => {
u.setScale('x', { min, max });
u.setScale(xScaleKey, { min, max });
});
}
});
@@ -159,6 +167,14 @@ export function prepConfig(opts: PrepConfigOpts) {
rect = r;
});
const payload: DataHoverPayload = {
point: {
[xScaleUnit]: null,
},
data: dataRef.current?.heatmap,
};
const hoverEvent = new DataHoverEvent(payload);
let pendingOnleave = 0;
onhover &&
@@ -166,20 +182,25 @@ export function prepConfig(opts: PrepConfigOpts) {
if (u.cursor.idxs != null) {
for (let i = 0; i < u.cursor.idxs.length; i++) {
const sel = u.cursor.idxs[i];
if (sel != null && !isToolTipOpen.current) {
if (pendingOnleave) {
clearTimeout(pendingOnleave);
pendingOnleave = 0;
if (sel != null) {
const { left, top } = u.cursor;
payload.rowIndex = sel;
payload.point[xScaleUnit] = u.posToVal(left!, xScaleKey);
eventBus.publish(hoverEvent);
if (!isToolTipOpen.current) {
if (pendingOnleave) {
clearTimeout(pendingOnleave);
pendingOnleave = 0;
}
onhover({
seriesIdx: i,
dataIdx: sel,
pageX: rect.left + left!,
pageY: rect.top + top!,
});
}
onhover({
seriesIdx: i,
dataIdx: sel,
pageX: rect.left + u.cursor.left!,
pageY: rect.top + u.cursor.top!,
});
return; // only show the first one
return;
}
}
}
@@ -187,7 +208,12 @@ export function prepConfig(opts: PrepConfigOpts) {
if (!isToolTipOpen.current) {
// if tiles have gaps, reduce flashing / re-render (debounce onleave by 100ms)
if (!pendingOnleave) {
pendingOnleave = setTimeout(() => onhover(null), 100) as any;
pendingOnleave = setTimeout(() => {
onhover(null);
payload.rowIndex = undefined;
payload.point[xScaleUnit] = null;
eventBus.publish(hoverEvent);
}, 100) as any;
}
}
});
@@ -209,7 +235,7 @@ export function prepConfig(opts: PrepConfigOpts) {
builder.setMode(2);
builder.addScale({
scaleKey: 'x',
scaleKey: xScaleKey,
isTime: true,
orientation: ScaleOrientation.Horizontal,
direction: ScaleDirection.Right,
@@ -220,19 +246,30 @@ export function prepConfig(opts: PrepConfigOpts) {
});
builder.addAxis({
scaleKey: 'x',
scaleKey: xScaleKey,
placement: AxisPlacement.Bottom,
isTime: true,
theme: theme,
});
const yFieldConfig = dataRef.current?.heatmap?.fields[1]?.config?.custom as PanelFieldConfig | undefined;
const yField = dataRef.current?.heatmap?.fields[1]!;
if (!yField) {
return builder; // early abort (avoids error)
}
const yFieldConfig = yField.config?.custom as PanelFieldConfig | undefined;
const yScale = yFieldConfig?.scaleDistribution ?? { type: ScaleDistribution.Linear };
const yAxisReverse = Boolean(yAxisConfig.reverse);
const shouldUseLogScale = yScale.type !== ScaleDistribution.Linear || heatmapType === DataFrameType.HeatmapSparse;
const isSparseHeatmap = heatmapType === DataFrameType.HeatmapCells && !isHeatmapCellsDense(dataRef.current?.heatmap!);
const shouldUseLogScale = yScale.type !== ScaleDistribution.Linear || isSparseHeatmap;
const isOrdianalY = readHeatmapRowsCustomMeta(dataRef.current?.heatmap).yOrdinalDisplay != null;
// random to prevent syncing y in other heatmaps
// TODO: try to match TimeSeries y keygen algo to sync with TimeSeries panels (when not isOrdianalY)
const yScaleKey = 'y_' + (Math.random() + 1).toString(36).substring(7);
builder.addScale({
scaleKey: 'y',
scaleKey: yScaleKey,
isTime: false,
// distribution: ScaleDistribution.Ordinal, // does not work with facets/scatter yet
orientation: ScaleOrientation.Vertical,
@@ -241,14 +278,37 @@ export function prepConfig(opts: PrepConfigOpts) {
distribution: shouldUseLogScale ? ScaleDistribution.Log : ScaleDistribution.Linear,
log: yScale.log ?? 2,
range:
// sparse already accounts for le/ge by explicit yMin & yMax cell bounds, so use default log ranging
heatmapType === DataFrameType.HeatmapSparse
? undefined
// sparse already accounts for le/ge by explicit yMin & yMax cell bounds, so no need to expand y range
isSparseHeatmap
? (u, dataMin, dataMax) => {
let scaleMin: number | null, scaleMax: number | null;
[scaleMin, scaleMax] = shouldUseLogScale
? uPlot.rangeLog(dataMin, dataMax, (yScale.log ?? 2) as unknown as uPlot.Scale.LogBase, true)
: [dataMin, dataMax];
if (shouldUseLogScale && !isOrdianalY) {
let { min: explicitMin, max: explicitMax } = yAxisConfig;
// guard against <= 0
if (explicitMin != null && explicitMin > 0) {
scaleMin = explicitMin;
}
if (explicitMax != null && explicitMax > 0) {
scaleMax = explicitMax;
}
}
return [scaleMin, scaleMax];
}
: // dense and ordinal only have one of yMin|yMax|y, so expand range by one cell in the direction of le/ge/unknown
(u, dataMin, dataMax) => {
let { min: explicitMin, max: explicitMax } = yAxisConfig;
// logarithmic expansion
if (shouldUseLogScale) {
let yExp = u.scales['y'].log!;
let yExp = u.scales[yScaleKey].log!;
let minExpanded = false;
let maxExpanded = false;
@@ -270,11 +330,11 @@ export function prepConfig(opts: PrepConfigOpts) {
}
}
if (dataRef.current?.yLayout === HeatmapBucketLayout.le) {
if (dataRef.current?.yLayout === HeatmapCellLayout.le) {
if (!minExpanded) {
dataMin /= yExp;
}
} else if (dataRef.current?.yLayout === HeatmapBucketLayout.ge) {
} else if (dataRef.current?.yLayout === HeatmapCellLayout.ge) {
if (!maxExpanded) {
dataMax *= yExp;
}
@@ -282,6 +342,17 @@ export function prepConfig(opts: PrepConfigOpts) {
dataMin /= yExp / 2;
dataMax *= yExp / 2;
}
if (!isOrdianalY) {
// guard against <= 0
if (explicitMin != null && explicitMin > 0) {
dataMin = explicitMin;
}
if (explicitMax != null && explicitMax > 0) {
dataMax = explicitMax;
}
}
}
// linear expansion
else {
@@ -292,9 +363,9 @@ export function prepConfig(opts: PrepConfigOpts) {
}
if (bucketSize) {
if (dataRef.current?.yLayout === HeatmapBucketLayout.le) {
if (dataRef.current?.yLayout === HeatmapCellLayout.le) {
dataMin -= bucketSize!;
} else if (dataRef.current?.yLayout === HeatmapBucketLayout.ge) {
} else if (dataRef.current?.yLayout === HeatmapCellLayout.ge) {
dataMax += bucketSize!;
} else {
dataMin -= bucketSize! / 2;
@@ -303,35 +374,40 @@ export function prepConfig(opts: PrepConfigOpts) {
} else {
// how to expand scale range if inferred non-regular or log buckets?
}
if (!isOrdianalY) {
dataMin = explicitMin ?? dataMin;
dataMax = explicitMax ?? dataMax;
}
}
return [dataMin, dataMax];
},
});
const isOrdianalY = readHeatmapScanlinesCustomMeta(dataRef.current?.heatmap).yOrdinalDisplay != null;
const disp = dataRef.current?.heatmap?.fields[1].display ?? getValueFormat('short');
const dispY = yField.display ?? getValueFormat('short');
builder.addAxis({
scaleKey: 'y',
scaleKey: yScaleKey,
show: yAxisConfig.axisPlacement !== AxisPlacement.Hidden,
placement: yAxisConfig.axisPlacement || AxisPlacement.Left,
size: yAxisConfig.axisWidth || null,
label: yAxisConfig.axisLabel,
theme: theme,
formatValue: (v: any) => formattedValueToString(disp(v)),
formatValue: (v: any) => formattedValueToString(dispY(v)),
splits: isOrdianalY
? (self: uPlot) => {
const meta = readHeatmapScanlinesCustomMeta(dataRef.current?.heatmap);
const meta = readHeatmapRowsCustomMeta(dataRef.current?.heatmap);
if (!meta.yOrdinalDisplay) {
return [0, 1]; //?
}
let splits = meta.yOrdinalDisplay.map((v, idx) => idx);
switch (dataRef.current?.yLayout) {
case HeatmapBucketLayout.le:
case HeatmapCellLayout.le:
splits.unshift(-1);
break;
case HeatmapBucketLayout.ge:
case HeatmapCellLayout.ge:
splits.push(splits.length);
break;
}
@@ -349,36 +425,31 @@ export function prepConfig(opts: PrepConfigOpts) {
: undefined,
values: isOrdianalY
? (self: uPlot, splits) => {
const meta = readHeatmapScanlinesCustomMeta(dataRef.current?.heatmap);
const meta = readHeatmapRowsCustomMeta(dataRef.current?.heatmap);
if (meta.yOrdinalDisplay) {
return splits.map((v) => {
const txt = meta.yOrdinalDisplay[v];
if (!txt && v < 0) {
// Check prometheus style labels
if ('le' === meta.yMatchWithLabel) {
return '0.0';
}
}
return txt;
});
return splits.map((v) =>
v < 0
? meta.yMinDisplay ?? '' // Check prometheus style labels
: meta.yOrdinalDisplay[v] ?? ''
);
}
return splits.map((v) => `${v}`);
return splits;
}
: undefined,
});
const pathBuilder = heatmapType === DataFrameType.HeatmapScanlines ? heatmapPathsDense : heatmapPathsSparse;
const pathBuilder = isSparseHeatmap ? heatmapPathsSparse : heatmapPathsDense;
// heatmap layer
builder.addSeries({
facets: [
{
scale: 'x',
scale: xScaleKey,
auto: true,
sorted: 1,
},
{
scale: 'y',
scale: yScaleKey,
auto: true,
},
],
@@ -397,22 +468,27 @@ export function prepConfig(opts: PrepConfigOpts) {
hideLE,
hideGE,
xAlign:
dataRef.current?.xLayout === HeatmapBucketLayout.le
dataRef.current?.xLayout === HeatmapCellLayout.le
? -1
: dataRef.current?.xLayout === HeatmapBucketLayout.ge
: dataRef.current?.xLayout === HeatmapCellLayout.ge
? 1
: 0,
yAlign: ((dataRef.current?.yLayout === HeatmapBucketLayout.le
yAlign: ((dataRef.current?.yLayout === HeatmapCellLayout.le
? -1
: dataRef.current?.yLayout === HeatmapBucketLayout.ge
: dataRef.current?.yLayout === HeatmapCellLayout.ge
? 1
: 0) * (yAxisReverse ? -1 : 1)) as -1 | 0 | 1,
ySizeDivisor,
disp: {
fill: {
values: (u, seriesIdx) => {
let countFacetIdx = heatmapType === DataFrameType.HeatmapScanlines ? 2 : 3;
return valuesToFills(u.data[seriesIdx][countFacetIdx] as unknown as number[], palette, valueMin, valueMax);
let countFacetIdx = !isSparseHeatmap ? 2 : 3;
return valuesToFills(
u.data[seriesIdx][countFacetIdx] as unknown as number[],
palette,
dataRef.current?.minValue!,
dataRef.current?.maxValue!
);
},
index: palette,
},
@@ -426,12 +502,12 @@ export function prepConfig(opts: PrepConfigOpts) {
builder.addSeries({
facets: [
{
scale: 'x',
scale: xScaleKey,
auto: true,
sorted: 1,
},
{
scale: 'y',
scale: yScaleKey,
auto: true,
},
],
@@ -454,7 +530,7 @@ export function prepConfig(opts: PrepConfigOpts) {
scaleKey: '', // facets' scales used (above)
});
builder.setCursor({
const cursor: Cursor = {
drag: {
x: true,
y: false,
@@ -489,7 +565,30 @@ export function prepConfig(opts: PrepConfigOpts) {
};
},
},
});
};
if (sync && sync() !== DashboardCursorSync.Off) {
cursor.sync = {
key: '__global_',
filters: {
pub: (type: string, src: uPlot, x: number, y: number, w: number, h: number, dataIdx: number) => {
if (x < 0) {
payload.point[xScaleUnit] = null;
eventBus.publish(new DataHoverClearEvent());
} else {
payload.point[xScaleUnit] = src.posToVal(x, xScaleKey);
eventBus.publish(hoverEvent);
}
return true;
},
},
};
builder.setSync();
}
builder.setCursor(cursor);
return builder;
}
@@ -789,12 +888,20 @@ export function heatmapPathsSparse(opts: PathbuilderOpts) {
};
}
export const valuesToFills = (values: number[], palette: string[], minValue?: number, maxValue?: number) => {
export const boundedMinMax = (
values: number[],
minValue?: number,
maxValue?: number,
hideLE = -Infinity,
hideGE = Infinity
) => {
if (minValue == null) {
minValue = Infinity;
for (let i = 0; i < values.length; i++) {
minValue = Math.min(minValue, values[i]);
if (values[i] > hideLE && values[i] < hideGE) {
minValue = Math.min(minValue, values[i]);
}
}
}
@@ -802,10 +909,16 @@ export const valuesToFills = (values: number[], palette: string[], minValue?: nu
maxValue = -Infinity;
for (let i = 0; i < values.length; i++) {
maxValue = Math.max(maxValue, values[i]);
if (values[i] > hideLE && values[i] < hideGE) {
maxValue = Math.max(maxValue, values[i]);
}
}
}
return [minValue, maxValue];
};
export const valuesToFills = (values: number[], palette: string[], minValue: number, maxValue: number) => {
let range = maxValue - minValue;
let paletteSize = palette.length;