HeatmapNG: expand log y axis min/max config to full powers (#51472)

also fix x bucket count setting for calculate (regressed in #51089)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>

.betterer.results

@@ -7071,10 +7071,10 @@ exports[`better eslint`] = {
     "public/app/features/transformers/calculateHeatmap/editor/helper.ts:2898656130": [
       [10, 37, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
-    "public/app/features/transformers/calculateHeatmap/heatmap.ts:992367420": [
+    "public/app/features/transformers/calculateHeatmap/heatmap.ts:3354697941": [
       [65, 9, 52, "Do not use any type assertions.", "3480700880"],
-      [321, 63, 29, "Do not use any type assertions.", "255738422"],
+      [326, 63, 29, "Do not use any type assertions.", "255738422"],
-      [321, 89, 3, "Unexpected any. Specify a different type.", "193409811"]
+      [326, 89, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
     "public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.test.tsx:1060905279": [
       [44, 29, 21, "Do not use any type assertions.", "1548027068"]
@@ -11734,29 +11734,29 @@ exports[`better eslint`] = {
       [87, 39, 23, "Do not use any type assertions.", "3906212682"],
       [87, 59, 3, "Unexpected any. Specify a different type.", "193409811"]
     ],
-    "public/app/plugins/panel/heatmap/utils.ts:215809412": [
+    "public/app/plugins/panel/heatmap/utils.ts:2227722730": [
       [260, 23, 53, "Do not use any type assertions.", "4087268626"],
       [287, 49, 51, "Do not use any type assertions.", "4216242190"],
       [287, 49, 28, "Do not use any type assertions.", "1631991143"],
-      [476, 14, 190, "Do not use any type assertions.", "4120382085"],
+      [488, 14, 190, "Do not use any type assertions.", "4120382085"],
-      [487, 14, 55, "Do not use any type assertions.", "2123957774"],
+      [499, 14, 55, "Do not use any type assertions.", "2123957774"],
-      [487, 14, 43, "Do not use any type assertions.", "3195961945"],
+      [499, 14, 43, "Do not use any type assertions.", "3195961945"],
-      [630, 19, 27, "Do not use any type assertions.", "3603045978"],
+      [642, 19, 27, "Do not use any type assertions.", "3603045978"],
-      [630, 19, 15, "Do not use any type assertions.", "3099372941"],
+      [642, 19, 15, "Do not use any type assertions.", "3099372941"],
-      [631, 19, 27, "Do not use any type assertions.", "3664280731"],
+      [643, 19, 27, "Do not use any type assertions.", "3664280731"],
-      [631, 19, 15, "Do not use any type assertions.", "2963010956"],
+      [643, 19, 15, "Do not use any type assertions.", "2963010956"],
-      [632, 23, 27, "Do not use any type assertions.", "1493467224"],
+      [644, 23, 27, "Do not use any type assertions.", "1493467224"],
-      [632, 23, 15, "Do not use any type assertions.", "2572578447"],
+      [644, 23, 15, "Do not use any type assertions.", "2572578447"],
-      [738, 25, 30, "Do not use any type assertions.", "1186575399"],
+      [750, 25, 30, "Do not use any type assertions.", "1186575399"],
-      [738, 25, 16, "Do not use any type assertions.", "1728826198"],
+      [750, 25, 16, "Do not use any type assertions.", "1728826198"],
-      [810, 22, 27, "Do not use any type assertions.", "3603045978"],
+      [822, 22, 27, "Do not use any type assertions.", "3603045978"],
-      [810, 22, 15, "Do not use any type assertions.", "3099372941"],
+      [822, 22, 15, "Do not use any type assertions.", "3099372941"],
-      [811, 22, 27, "Do not use any type assertions.", "3664280731"],
+      [823, 22, 27, "Do not use any type assertions.", "3664280731"],
-      [811, 22, 15, "Do not use any type assertions.", "2963010956"],
+      [823, 22, 15, "Do not use any type assertions.", "2963010956"],
-      [812, 22, 27, "Do not use any type assertions.", "1493467224"],
+      [824, 22, 27, "Do not use any type assertions.", "1493467224"],
-      [812, 22, 15, "Do not use any type assertions.", "2572578447"],
+      [824, 22, 15, "Do not use any type assertions.", "2572578447"],
-      [813, 23, 27, "Do not use any type assertions.", "1554701977"],
+      [825, 23, 27, "Do not use any type assertions.", "1554701977"],
-      [813, 23, 15, "Do not use any type assertions.", "2436216462"]
+      [825, 23, 15, "Do not use any type assertions.", "2436216462"]
     ],
     "public/app/plugins/panel/histogram/Histogram.tsx:3993177092": [
       [130, 31, 3, "Unexpected any. Specify a different type.", "193409811"],

devenv/dev-dashboards/panel-heatmap/heatmap-calculate-log.json

@@ -178,6 +178,9 @@
           "show": true
         },
         "mode": "calculate",
+        "rowsFrame": {
+          "layout": "auto"
+        },
         "tooltip": {
           "show": true,
           "yHistogram": false
@@ -189,7 +192,7 @@
         "yAxisLabels": "auto",
         "yAxisReverse": false
       },
-      "pluginVersion": "9.0.0-pre",
+      "pluginVersion": "9.1.0-pre",
       "targets": [
         {
           "datasource": {
@@ -201,7 +204,7 @@
         }
       ],
       "title": "log2",
-      "type": "heatmap-new"
+      "type": "heatmap"
     },
     {
       "datasource": {
@@ -263,6 +266,9 @@
           "show": true
         },
         "mode": "calculate",
+        "rowsFrame": {
+          "layout": "auto"
+        },
         "tooltip": {
           "show": true,
           "yHistogram": false
@@ -274,7 +280,7 @@
         "yAxisLabels": "auto",
         "yAxisReverse": false
       },
-      "pluginVersion": "9.0.0-pre",
+      "pluginVersion": "9.1.0-pre",
       "targets": [
         {
           "datasource": {
@@ -286,7 +292,7 @@
         }
       ],
       "title": "log2 split 2",
-      "type": "heatmap-new"
+      "type": "heatmap"
     },
     {
       "datasource": {
@@ -339,6 +345,9 @@
           "show": true
         },
         "mode": "calculate",
+        "rowsFrame": {
+          "layout": "auto"
+        },
         "tooltip": {
           "show": true,
           "yHistogram": false
@@ -350,7 +359,7 @@
         "yAxisLabels": "auto",
         "yAxisReverse": false
       },
-      "pluginVersion": "9.0.0-pre",
+      "pluginVersion": "9.1.0-pre",
       "targets": [
         {
           "datasource": {
@@ -362,7 +371,7 @@
         }
       ],
       "title": "linear",
-      "type": "heatmap-new"
+      "type": "heatmap"
     },
     {
       "datasource": {
@@ -423,6 +432,9 @@
           "show": true
         },
         "mode": "calculate",
+        "rowsFrame": {
+          "layout": "auto"
+        },
         "tooltip": {
           "show": true,
           "yHistogram": false
@@ -434,7 +446,7 @@
         "yAxisLabels": "auto",
         "yAxisReverse": false
       },
-      "pluginVersion": "9.0.0-pre",
+      "pluginVersion": "9.1.0-pre",
       "targets": [
         {
           "datasource": {
@@ -446,7 +458,7 @@
         }
       ],
       "title": "log10",
-      "type": "heatmap-new"
+      "type": "heatmap"
     },
     {
       "datasource": {
@@ -508,6 +520,9 @@
           "show": true
         },
         "mode": "calculate",
+        "rowsFrame": {
+          "layout": "auto"
+        },
         "tooltip": {
           "show": true,
           "yHistogram": false
@@ -519,7 +534,7 @@
         "yAxisLabels": "auto",
         "yAxisReverse": false
       },
-      "pluginVersion": "9.0.0-pre",
+      "pluginVersion": "9.1.0-pre",
       "targets": [
         {
           "datasource": {
@@ -531,12 +546,276 @@
         }
       ],
       "title": "log10 split 2",
-      "type": "heatmap-new"
+      "type": "heatmap"
+    },
+    {
+      "datasource": {
+        "type": "datasource",
+        "uid": "-- Dashboard --"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "scaleDistribution": {
+              "type": "linear"
+            }
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 14,
+        "w": 8,
+        "x": 0,
+        "y": 28
+      },
+      "id": 10,
+      "options": {
+        "bucket": {
+          "layout": "auto"
+        },
+        "calculate": true,
+        "cellGap": 1,
+        "color": {
+          "exponent": 0.5,
+          "fill": "dark-orange",
+          "mode": "scheme",
+          "scale": "exponential",
+          "scheme": "Spectral",
+          "steps": 64
+        },
+        "exemplars": {
+          "color": "rgba(255,0,255,0.7)"
+        },
+        "filterValues": {
+          "le": 1e-9
+        },
+        "legend": {
+          "show": true
+        },
+        "mode": "calculate",
+        "rowsFrame": {
+          "layout": "auto"
+        },
+        "tooltip": {
+          "show": true,
+          "yHistogram": false
+        },
+        "yAxis": {
+          "axisPlacement": "left",
+          "max": "15000",
+          "min": 700,
+          "reverse": false
+        },
+        "yAxisLabels": "auto",
+        "yAxisReverse": false
+      },
+      "pluginVersion": "9.1.0-pre",
+      "targets": [
+        {
+          "datasource": {
+            "type": "datasource",
+            "uid": "-- Dashboard --"
+          },
+          "panelId": 3,
+          "refId": "A"
+        }
+      ],
+      "title": "linear (y range = 700-15k)",
+      "type": "heatmap"
+    },
+    {
+      "datasource": {
+        "type": "datasource",
+        "uid": "-- Dashboard --"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "scaleDistribution": {
+              "type": "linear"
+            }
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 14,
+        "w": 8,
+        "x": 8,
+        "y": 28
+      },
+      "id": 9,
+      "options": {
+        "bucket": {
+          "layout": "auto"
+        },
+        "calculate": true,
+        "calculation": {
+          "yBuckets": {
+            "scale": {
+              "log": 10,
+              "type": "log"
+            }
+          }
+        },
+        "cellGap": 1,
+        "color": {
+          "exponent": 0.5,
+          "fill": "dark-orange",
+          "mode": "scheme",
+          "scale": "exponential",
+          "scheme": "Spectral",
+          "steps": 64
+        },
+        "exemplars": {
+          "color": "rgba(255,0,255,0.7)"
+        },
+        "filterValues": {
+          "le": 1e-9
+        },
+        "legend": {
+          "show": true
+        },
+        "mode": "calculate",
+        "rowsFrame": {
+          "layout": "auto"
+        },
+        "tooltip": {
+          "show": true,
+          "yHistogram": false
+        },
+        "yAxis": {
+          "axisPlacement": "left",
+          "max": "15000",
+          "min": 700,
+          "reverse": false
+        },
+        "yAxisLabels": "auto",
+        "yAxisReverse": false
+      },
+      "pluginVersion": "9.1.0-pre",
+      "targets": [
+        {
+          "datasource": {
+            "type": "datasource",
+            "uid": "-- Dashboard --"
+          },
+          "panelId": 3,
+          "refId": "A"
+        }
+      ],
+      "title": "log10 (y range = 700-15k)",
+      "type": "heatmap"
+    },
+    {
+      "datasource": {
+        "type": "datasource",
+        "uid": "-- Dashboard --"
+      },
+      "fieldConfig": {
+        "defaults": {
+          "custom": {
+            "hideFrom": {
+              "legend": false,
+              "tooltip": false,
+              "viz": false
+            },
+            "scaleDistribution": {
+              "type": "linear"
+            }
+          }
+        },
+        "overrides": []
+      },
+      "gridPos": {
+        "h": 14,
+        "w": 8,
+        "x": 16,
+        "y": 28
+      },
+      "id": 11,
+      "options": {
+        "bucket": {
+          "layout": "auto"
+        },
+        "calculate": true,
+        "calculation": {
+          "yBuckets": {
+            "scale": {
+              "log": 10,
+              "type": "log"
+            },
+            "value": "2"
+          }
+        },
+        "cellGap": 1,
+        "color": {
+          "exponent": 0.5,
+          "fill": "dark-orange",
+          "mode": "scheme",
+          "scale": "exponential",
+          "scheme": "Spectral",
+          "steps": 64
+        },
+        "exemplars": {
+          "color": "rgba(255,0,255,0.7)"
+        },
+        "filterValues": {
+          "le": 1e-9
+        },
+        "legend": {
+          "show": true
+        },
+        "mode": "calculate",
+        "rowsFrame": {
+          "layout": "auto"
+        },
+        "tooltip": {
+          "show": true,
+          "yHistogram": false
+        },
+        "yAxis": {
+          "axisPlacement": "left",
+          "max": "15000",
+          "min": 700,
+          "reverse": false
+        },
+        "yAxisLabels": "auto",
+        "yAxisReverse": false
+      },
+      "pluginVersion": "9.1.0-pre",
+      "targets": [
+        {
+          "datasource": {
+            "type": "datasource",
+            "uid": "-- Dashboard --"
+          },
+          "panelId": 3,
+          "refId": "A"
+        }
+      ],
+      "title": "log10 split 2 (y range = 700-15k)",
+      "type": "heatmap"
     }
   ],
   "schemaVersion": 36,
   "style": "dark",
-  "tags": ["gdev", "panel-tests", "graph-ng"],
+  "tags": [
+    "gdev",
+    "panel-tests",
+    "graph-ng"
+  ],
   "templating": {
     "list": []
   },
@@ -548,6 +827,6 @@
   "timezone": "",
   "title": "Heatmap calculate (log)",
   "uid": "ZXYQTA97ZZ",
-  "version": 1,
+  "version": 9,
   "weekStart": ""
 }

public/app/features/transformers/calculateHeatmap/heatmap.ts

@@ -316,7 +316,12 @@ export function calculateHeatmapFromData(frames: DataFrame[], options: HeatmapCa
     xSorted: true,
     xTime: xField.type === FieldType.time,
     xMode: xBucketsCfg.mode,
-    xSize: durationToMilliseconds(parseDuration(xBucketsCfg.value ?? '')),
+    xSize:
+      xBucketsCfg.mode === HeatmapCalculationMode.Size
+        ? durationToMilliseconds(parseDuration(xBucketsCfg.value ?? ''))
+        : xBucketsCfg.value
+        ? +xBucketsCfg.value
+        : undefined,
     yMode: yBucketsCfg.mode,
     ySize: yBucketsCfg.value ? +yBucketsCfg.value : undefined,
     yLog: scaleDistribution?.type === ScaleDistribution.Log ? (scaleDistribution?.log as any) : undefined,

public/app/plugins/panel/heatmap/utils.ts

@@ -289,15 +289,21 @@ export function prepConfig(opts: PrepConfigOpts) {
               : [dataMin, dataMax];
 
             if (shouldUseLogScale && !isOrdianalY) {
+              let yExp = u.scales[yScaleKey].log!;
+              let log = yExp === 2 ? Math.log2 : Math.log10;
+
               let { min: explicitMin, max: explicitMax } = yAxisConfig;
 
               // guard against <= 0
               if (explicitMin != null && explicitMin > 0) {
-                scaleMin = explicitMin;
+                // snap to magnitude
+                let minLog = log(explicitMin);
+                scaleMin = yExp ** incrRoundDn(minLog, 1);
               }
 
               if (explicitMax != null && explicitMax > 0) {
-                scaleMax = explicitMax;
+                let maxLog = log(explicitMax);
+                scaleMax = yExp ** incrRoundUp(maxLog, 1);
               }
             }
 
@@ -305,6 +311,9 @@ export function prepConfig(opts: PrepConfigOpts) {
           }
         : // 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 scaleMin = dataMin,
+              scaleMax = dataMax;
+
             let { min: explicitMin, max: explicitMax } = yAxisConfig;
 
             // logarithmic expansion
@@ -314,44 +323,47 @@ export function prepConfig(opts: PrepConfigOpts) {
               let minExpanded = false;
               let maxExpanded = false;
 
-              if (ySizeDivisor !== 1) {
+              let log = yExp === 2 ? Math.log2 : Math.log10;
-                let log = yExp === 2 ? Math.log2 : Math.log10;
 
+              if (ySizeDivisor !== 1) {
                 let minLog = log(dataMin);
                 let maxLog = log(dataMax);
 
                 if (!Number.isInteger(minLog)) {
-                  dataMin = yExp ** incrRoundDn(minLog, 1);
+                  scaleMin = yExp ** incrRoundDn(minLog, 1);
                   minExpanded = true;
                 }
 
                 if (!Number.isInteger(maxLog)) {
-                  dataMax = yExp ** incrRoundUp(maxLog, 1);
+                  scaleMax = yExp ** incrRoundUp(maxLog, 1);
                   maxExpanded = true;
                 }
               }
 
               if (dataRef.current?.yLayout === HeatmapCellLayout.le) {
                 if (!minExpanded) {
-                  dataMin /= yExp;
+                  scaleMin /= yExp;
                 }
               } else if (dataRef.current?.yLayout === HeatmapCellLayout.ge) {
                 if (!maxExpanded) {
-                  dataMax *= yExp;
+                  scaleMax *= yExp;
                 }
               } else {
-                dataMin /= yExp / 2;
+                scaleMin /= yExp / 2;
-                dataMax *= yExp / 2;
+                scaleMax *= yExp / 2;
               }
 
               if (!isOrdianalY) {
                 // guard against <= 0
                 if (explicitMin != null && explicitMin > 0) {
-                  dataMin = explicitMin;
+                  // snap down to magnitude
+                  let minLog = log(explicitMin);
+                  scaleMin = yExp ** incrRoundDn(minLog, 1);
                 }
 
                 if (explicitMax != null && explicitMax > 0) {
-                  dataMax = explicitMax;
+                  let maxLog = log(explicitMax);
+                  scaleMax = yExp ** incrRoundUp(maxLog, 1);
                 }
               }
             }
@@ -365,24 +377,24 @@ export function prepConfig(opts: PrepConfigOpts) {
 
               if (bucketSize) {
                 if (dataRef.current?.yLayout === HeatmapCellLayout.le) {
-                  dataMin -= bucketSize!;
+                  scaleMin -= bucketSize!;
                 } else if (dataRef.current?.yLayout === HeatmapCellLayout.ge) {
-                  dataMax += bucketSize!;
+                  scaleMax += bucketSize!;
                 } else {
-                  dataMin -= bucketSize! / 2;
+                  scaleMin -= bucketSize! / 2;
-                  dataMax += bucketSize! / 2;
+                  scaleMax += bucketSize! / 2;
                 }
               } else {
                 // how to expand scale range if inferred non-regular or log buckets?
               }
 
               if (!isOrdianalY) {
-                dataMin = explicitMin ?? dataMin;
+                scaleMin = explicitMin ?? scaleMin;
-                dataMax = explicitMax ?? dataMax;
+                scaleMax = explicitMax ?? scaleMax;
               }
             }
 
-            return [dataMin, dataMax];
+            return [scaleMin, scaleMax];
           },
   });