@perses-dev/heatmap-chart-plugin 0.4.0-rc.0 → 0.4.0

package/lib/components/HeatMapChart.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from 'react';
 import { FormatOptions, TimeScale } from '@perses-dev/core';
-export type HeatMapData = [number, number, number | undefined];
+import { LOG_BASE } from '../heat-map-chart-model';
+export type HeatMapData = [number, number, number, number | undefined];
 export interface HeatMapDataItem {
     value: HeatMapData;
     label: string;
@@ -15,13 +16,15 @@ export interface HeatMapChartProps {
     height: number;
     data: HeatMapDataItem[];
     xAxisCategories: number[];
-    yAxisCategories: string[];
     yAxisFormat?: FormatOptions;
     countFormat?: FormatOptions;
     countMin?: number;
     countMax?: number;
     timeScale?: TimeScale;
     showVisualMap?: boolean;
+    min?: number;
+    max?: number;
+    logBase?: LOG_BASE;
 }
-export declare function HeatMapChart({ width, height, data, xAxisCategories, yAxisCategories, yAxisFormat, countFormat, countMin, countMax, timeScale, showVisualMap, }: HeatMapChartProps): ReactElement | null;
+export declare function HeatMapChart({ width, height, data, xAxisCategories, yAxisFormat, countFormat, countMin, countMax, timeScale, showVisualMap, min, max, logBase, }: HeatMapChartProps): ReactElement | null;
 //# sourceMappingURL=HeatMapChart.d.ts.map

package/lib/components/HeatMapChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeatMapChart.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMapChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAyB5D,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;CAEzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,IAAI,EACJ,eAAe,EACf,eAAe,EACf,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CA0GzC"}
+{"version":3,"file":"HeatMapChart.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMapChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAe,aAAa,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAMzE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAqBnD,MAAM,MAAM,WAAW,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,WAAW,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE;QACV,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;CACH;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,eAAe,EAAE,CAAC;IACxB,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,WAAW,CAAC,EAAE,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,MAAM,EACN,IAAI,EACJ,eAAe,EACf,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,aAAa,EACb,GAAG,EACH,GAAG,EACH,OAAO,GACR,EAAE,iBAAiB,GAAG,YAAY,GAAG,IAAI,CAqJzC"}

package/lib/components/HeatMapChart.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -12,14 +12,15 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { useMemo } from 'react';
-import { EChart, getFormattedAxis, useChartsTheme, useTimeZone } from '@perses-dev/components';
+import { formatValue } from '@perses-dev/core';
+import { EChart, useChartsTheme, useTimeZone } from '@perses-dev/components';
 import { use } from 'echarts/core';
-import { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
+import { CustomChart } from 'echarts/charts';
 import { useTheme } from '@mui/material';
 import { getFormattedHeatmapAxisLabel } from '../utils';
 import { generateTooltipHTML } from './HeatMapTooltip';
 use([
-    EChartsHeatmapChart
+    CustomChart
 ]);
 // The default coloring is a blue->yellow->red gradient
 const DEFAULT_VISUAL_MAP_COLORS = [
@@ -35,7 +36,7 @@ const DEFAULT_VISUAL_MAP_COLORS = [
     '#d73027',
     '#a50026'
 ];
-export function HeatMapChart({ width, height, data, xAxisCategories, yAxisCategories, yAxisFormat, countFormat, countMin, countMax, timeScale, showVisualMap }) {
+export function HeatMapChart({ width, height, data, xAxisCategories, yAxisFormat, countFormat, countMin, countMax, timeScale, showVisualMap, min, max, logBase }) {
     const chartsTheme = useChartsTheme();
     const theme = useTheme();
     const { timeZone } = useTimeZone();
@@ -49,7 +50,6 @@ export function HeatMapChart({ width, height, data, xAxisCategories, yAxisCatego
                         label: params.data.label,
                         marker: params.marker,
                         xAxisCategories,
-                        yAxisCategories,
                         theme,
                         yAxisFormat: yAxisFormat,
                         countFormat: countFormat
@@ -64,10 +64,27 @@ export function HeatMapChart({ width, height, data, xAxisCategories, yAxisCatego
                     formatter: getFormattedHeatmapAxisLabel(timeScale?.rangeMs ?? 0, timeZone)
                 }
             },
-            yAxis: getFormattedAxis({
-                type: 'category',
-                data: yAxisCategories
-            }, yAxisFormat),
+            yAxis: {
+                type: logBase !== undefined ? 'log' : 'value',
+                logBase: logBase,
+                boundaryGap: [
+                    0,
+                    '10%'
+                ],
+                min: min,
+                max: max,
+                axisLabel: {
+                    hideOverlap: true,
+                    formatter: (value)=>{
+                        // On log scales, ECharts may generate a tick at 0 which is mathematically
+                        // invalid (log(0) is undefined). Return empty string to hide such labels.
+                        if (logBase !== undefined && value === 0) {
+                            return '';
+                        }
+                        return formatValue(value, yAxisFormat);
+                    }
+                }
+            },
             visualMap: {
                 show: showVisualMap ?? false,
                 type: 'continuous',
@@ -86,19 +103,77 @@ export function HeatMapChart({ width, height, data, xAxisCategories, yAxisCatego
                     color: theme.palette.text.primary,
                     textBorderColor: theme.palette.background.default,
                     textBorderWidth: 5
-                }
+                },
+                // Color by the count dimension (index 3)
+                dimension: 3
             },
             series: [
                 {
-                    name: 'Gaussian',
-                    type: 'heatmap',
-                    data: data,
-                    emphasis: {
-                        itemStyle: {
-                            borderColor: '#333',
-                            borderWidth: 1
+                    name: 'HeatMap',
+                    type: 'custom',
+                    renderItem: function(params, api) {
+                        const xIndex = api.value(0);
+                        const yLower = api.value(1);
+                        const yUpper = api.value(2);
+                        // Pixel coordinates
+                        const upperStart = api.coord([
+                            xIndex,
+                            yUpper
+                        ]);
+                        const lowerStart = api.coord([
+                            xIndex,
+                            yLower
+                        ]);
+                        const upperNext = api.coord([
+                            xIndex + 1,
+                            yUpper
+                        ]);
+                        const startX = upperStart?.[0];
+                        const upperY = upperStart?.[1];
+                        const lowerY = lowerStart?.[1];
+                        const nextX = upperNext?.[0];
+                        if (startX === undefined || upperY === undefined || lowerY === undefined || nextX === undefined) {
+                            return null;
                         }
+                        const topY = Math.min(upperY, lowerY);
+                        const bottomY = Math.max(upperY, lowerY);
+                        const width = nextX - startX;
+                        const height = bottomY - topY;
+                        return {
+                            type: 'rect',
+                            shape: {
+                                x: startX,
+                                y: topY,
+                                width,
+                                height
+                            },
+                            style: {
+                                fill: api.visual('color')
+                            }
+                        };
                     },
+                    label: {
+                        show: false
+                    },
+                    dimensions: [
+                        'xIndex',
+                        'yLower',
+                        'yUpper',
+                        'count'
+                    ],
+                    encode: {
+                        x: 0,
+                        y: [
+                            1,
+                            2
+                        ],
+                        tooltip: [
+                            1,
+                            2,
+                            3
+                        ]
+                    },
+                    data: data,
                     progressive: 1000,
                     animation: false
                 }
@@ -108,7 +183,6 @@ export function HeatMapChart({ width, height, data, xAxisCategories, yAxisCatego
         xAxisCategories,
         timeScale?.rangeMs,
         timeZone,
-        yAxisCategories,
         yAxisFormat,
         showVisualMap,
         countMin,
@@ -116,7 +190,10 @@ export function HeatMapChart({ width, height, data, xAxisCategories, yAxisCatego
         height,
         theme,
         data,
-        countFormat
+        countFormat,
+        min,
+        max,
+        logBase
     ]);
     const chart = useMemo(()=>/*#__PURE__*/ _jsx(EChart, {
             style: {

package/lib/components/HeatMapChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HeatMapChart.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo } from 'react';\nimport { FormatOptions, TimeScale } from '@perses-dev/core';\nimport { EChart, getFormattedAxis, useChartsTheme, useTimeZone } from '@perses-dev/components';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';\nimport { useTheme } from '@mui/material';\nimport { getFormattedHeatmapAxisLabel } from '../utils';\nimport { generateTooltipHTML } from './HeatMapTooltip';\n\nuse([EChartsHeatmapChart]);\n\n// The default coloring is a blue->yellow->red gradient\nconst DEFAULT_VISUAL_MAP_COLORS = [\n  '#313695',\n  '#4575b4',\n  '#74add1',\n  '#abd9e9',\n  '#e0f3f8',\n  '#ffffbf',\n  '#fee090',\n  '#fdae61',\n  '#f46d43',\n  '#d73027',\n  '#a50026',\n];\n\nexport type HeatMapData = [number, number, number | undefined]; // [x, y, value]\n\nexport interface HeatMapDataItem {\n  value: HeatMapData;\n  label: string;\n  itemStyle?: {\n    color?: string;\n    borderColor?: string;\n    borderWidth?: number;\n  };\n}\n\nexport interface HeatMapChartProps {\n  width: number;\n  height: number;\n  data: HeatMapDataItem[];\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  yAxisFormat?: FormatOptions;\n  countFormat?: FormatOptions;\n  countMin?: number;\n  countMax?: number;\n  timeScale?: TimeScale;\n  showVisualMap?: boolean;\n  // TODO: exponential?: boolean;\n}\n\nexport function HeatMapChart({\n  width,\n  height,\n  data,\n  xAxisCategories,\n  yAxisCategories,\n  yAxisFormat,\n  countFormat,\n  countMin,\n  countMax,\n  timeScale,\n  showVisualMap,\n}: HeatMapChartProps): ReactElement | null {\n  const chartsTheme = useChartsTheme();\n  const theme = useTheme();\n  const { timeZone } = useTimeZone();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    return {\n      tooltip: {\n        appendToBody: true,\n        formatter: (params: { data: HeatMapDataItem; marker: string }) => {\n          return generateTooltipHTML({\n            data: params.data.value,\n            label: params.data.label,\n            marker: params.marker,\n            xAxisCategories,\n            yAxisCategories,\n            theme,\n            yAxisFormat: yAxisFormat,\n            countFormat: countFormat,\n          });\n        },\n      },\n      xAxis: {\n        type: 'category',\n        data: xAxisCategories,\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getFormattedHeatmapAxisLabel(timeScale?.rangeMs ?? 0, timeZone),\n        },\n      },\n      yAxis: getFormattedAxis(\n        {\n          type: 'category',\n          data: yAxisCategories,\n        },\n        yAxisFormat\n      ),\n      visualMap: {\n        show: showVisualMap ?? false,\n        type: 'continuous',\n        min: countMin,\n        max: countMax,\n        realtime: false,\n        itemHeight: height - 30,\n        itemWidth: 10,\n        orient: 'vertical',\n        left: 'right',\n        top: 'center',\n        inRange: {\n          color: DEFAULT_VISUAL_MAP_COLORS,\n        },\n        textStyle: {\n          color: theme.palette.text.primary,\n          textBorderColor: theme.palette.background.default,\n          textBorderWidth: 5,\n        },\n      },\n      series: [\n        {\n          name: 'Gaussian',\n          type: 'heatmap',\n          data: data,\n          emphasis: {\n            itemStyle: {\n              borderColor: '#333',\n              borderWidth: 1,\n            },\n          },\n          progressive: 1000,\n          animation: false,\n        },\n      ],\n    };\n  }, [\n    xAxisCategories,\n    timeScale?.rangeMs,\n    timeZone,\n    yAxisCategories,\n    yAxisFormat,\n    showVisualMap,\n    countMin,\n    countMax,\n    height,\n    theme,\n    data,\n    countFormat,\n  ]);\n\n  const chart = useMemo(\n    () => (\n      <EChart\n        style={{\n          width: width,\n          height: height,\n        }}\n        sx={{\n          padding: `${chartsTheme.container.padding.default}px`,\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    ),\n    [chartsTheme.container.padding.default, chartsTheme.echartsTheme, height, option, width]\n  );\n\n  return <>{chart}</>;\n}\n"],"names":["useMemo","EChart","getFormattedAxis","useChartsTheme","useTimeZone","use","HeatmapChart","EChartsHeatmapChart","useTheme","getFormattedHeatmapAxisLabel","generateTooltipHTML","DEFAULT_VISUAL_MAP_COLORS","HeatMapChart","width","height","data","xAxisCategories","yAxisCategories","yAxisFormat","countFormat","countMin","countMax","timeScale","showVisualMap","chartsTheme","theme","timeZone","option","tooltip","appendToBody","formatter","params","value","label","marker","xAxis","type","axisLabel","hideOverlap","rangeMs","yAxis","visualMap","show","min","max","realtime","itemHeight","itemWidth","orient","left","top","inRange","color","textStyle","palette","text","primary","textBorderColor","background","default","textBorderWidth","series","name","emphasis","itemStyle","borderColor","borderWidth","progressive","animation","chart","style","sx","padding","container","echartsTheme"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HeatMapChart.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo } from 'react';\nimport { formatValue, FormatOptions, TimeScale } from '@perses-dev/core';\nimport { EChart, useChartsTheme, useTimeZone } from '@perses-dev/components';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { CustomChart } from 'echarts/charts';\nimport type { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams } from 'echarts';\nimport { useTheme } from '@mui/material';\nimport { LOG_BASE } from '../heat-map-chart-model';\nimport { getFormattedHeatmapAxisLabel } from '../utils';\nimport { generateTooltipHTML } from './HeatMapTooltip';\n\nuse([CustomChart]);\n\n// The default coloring is a blue->yellow->red gradient\nconst DEFAULT_VISUAL_MAP_COLORS = [\n  '#313695',\n  '#4575b4',\n  '#74add1',\n  '#abd9e9',\n  '#e0f3f8',\n  '#ffffbf',\n  '#fee090',\n  '#fdae61',\n  '#f46d43',\n  '#d73027',\n  '#a50026',\n];\n\nexport type HeatMapData = [number, number, number, number | undefined]; // [xIndex, yLower, yUpper, count]\n\nexport interface HeatMapDataItem {\n  value: HeatMapData;\n  label: string;\n  itemStyle?: {\n    color?: string;\n    borderColor?: string;\n    borderWidth?: number;\n  };\n}\n\nexport interface HeatMapChartProps {\n  width: number;\n  height: number;\n  data: HeatMapDataItem[];\n  xAxisCategories: number[];\n  yAxisFormat?: FormatOptions;\n  countFormat?: FormatOptions;\n  countMin?: number;\n  countMax?: number;\n  timeScale?: TimeScale;\n  showVisualMap?: boolean;\n  min?: number;\n  max?: number;\n  logBase?: LOG_BASE;\n}\n\nexport function HeatMapChart({\n  width,\n  height,\n  data,\n  xAxisCategories,\n  yAxisFormat,\n  countFormat,\n  countMin,\n  countMax,\n  timeScale,\n  showVisualMap,\n  min,\n  max,\n  logBase,\n}: HeatMapChartProps): ReactElement | null {\n  const chartsTheme = useChartsTheme();\n  const theme = useTheme();\n  const { timeZone } = useTimeZone();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    return {\n      tooltip: {\n        appendToBody: true,\n        formatter: (params: { data: HeatMapDataItem; marker: string }) => {\n          return generateTooltipHTML({\n            data: params.data.value,\n            label: params.data.label,\n            marker: params.marker,\n            xAxisCategories,\n            theme,\n            yAxisFormat: yAxisFormat,\n            countFormat: countFormat,\n          });\n        },\n      },\n      xAxis: {\n        type: 'category',\n        data: xAxisCategories,\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getFormattedHeatmapAxisLabel(timeScale?.rangeMs ?? 0, timeZone),\n        },\n      },\n      yAxis: {\n        type: logBase !== undefined ? 'log' : 'value',\n        logBase: logBase,\n        boundaryGap: [0, '10%'],\n        min: min,\n        max: max,\n        axisLabel: {\n          hideOverlap: true,\n          formatter: (value: number): string => {\n            // On log scales, ECharts may generate a tick at 0 which is mathematically\n            // invalid (log(0) is undefined). Return empty string to hide such labels.\n            if (logBase !== undefined && value === 0) {\n              return '';\n            }\n            return formatValue(value, yAxisFormat);\n          },\n        },\n      },\n      visualMap: {\n        show: showVisualMap ?? false,\n        type: 'continuous',\n        min: countMin,\n        max: countMax,\n        realtime: false,\n        itemHeight: height - 30,\n        itemWidth: 10,\n        orient: 'vertical',\n        left: 'right',\n        top: 'center',\n        inRange: {\n          color: DEFAULT_VISUAL_MAP_COLORS,\n        },\n        textStyle: {\n          color: theme.palette.text.primary,\n          textBorderColor: theme.palette.background.default,\n          textBorderWidth: 5,\n        },\n        // Color by the count dimension (index 3)\n        dimension: 3,\n      },\n      series: [\n        {\n          name: 'HeatMap',\n          type: 'custom',\n          renderItem: function (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) {\n            const xIndex = api.value(0) as number;\n            const yLower = api.value(1) as number;\n            const yUpper = api.value(2) as number;\n\n            // Pixel coordinates\n            const upperStart = api.coord([xIndex, yUpper]);\n            const lowerStart = api.coord([xIndex, yLower]);\n            const upperNext = api.coord([xIndex + 1, yUpper]);\n\n            const startX = upperStart?.[0];\n            const upperY = upperStart?.[1];\n            const lowerY = lowerStart?.[1];\n            const nextX = upperNext?.[0];\n\n            if (startX === undefined || upperY === undefined || lowerY === undefined || nextX === undefined) {\n              return null;\n            }\n\n            const topY = Math.min(upperY, lowerY);\n            const bottomY = Math.max(upperY, lowerY);\n            const width = nextX - startX;\n            const height = bottomY - topY;\n\n            return {\n              type: 'rect',\n              shape: { x: startX, y: topY, width, height },\n              style: {\n                fill: api.visual('color'),\n              },\n            };\n          },\n          label: { show: false },\n          dimensions: ['xIndex', 'yLower', 'yUpper', 'count'],\n          encode: { x: 0, y: [1, 2], tooltip: [1, 2, 3] },\n          data: data,\n          progressive: 1000,\n          animation: false,\n        },\n      ],\n    };\n  }, [\n    xAxisCategories,\n    timeScale?.rangeMs,\n    timeZone,\n    yAxisFormat,\n    showVisualMap,\n    countMin,\n    countMax,\n    height,\n    theme,\n    data,\n    countFormat,\n    min,\n    max,\n    logBase,\n  ]);\n\n  const chart = useMemo(\n    () => (\n      <EChart\n        style={{\n          width: width,\n          height: height,\n        }}\n        sx={{\n          padding: `${chartsTheme.container.padding.default}px`,\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    ),\n    [chartsTheme.container.padding.default, chartsTheme.echartsTheme, height, option, width]\n  );\n\n  return <>{chart}</>;\n}\n"],"names":["useMemo","formatValue","EChart","useChartsTheme","useTimeZone","use","CustomChart","useTheme","getFormattedHeatmapAxisLabel","generateTooltipHTML","DEFAULT_VISUAL_MAP_COLORS","HeatMapChart","width","height","data","xAxisCategories","yAxisFormat","countFormat","countMin","countMax","timeScale","showVisualMap","min","max","logBase","chartsTheme","theme","timeZone","option","tooltip","appendToBody","formatter","params","value","label","marker","xAxis","type","axisLabel","hideOverlap","rangeMs","yAxis","undefined","boundaryGap","visualMap","show","realtime","itemHeight","itemWidth","orient","left","top","inRange","color","textStyle","palette","text","primary","textBorderColor","background","default","textBorderWidth","dimension","series","name","renderItem","api","xIndex","yLower","yUpper","upperStart","coord","lowerStart","upperNext","startX","upperY","lowerY","nextX","topY","Math","bottomY","shape","x","y","style","fill","visual","dimensions","encode","progressive","animation","chart","sx","padding","container","echartsTheme"],"mappings":"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"}

package/lib/components/HeatMapChartOptionsEditorSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeatMapChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMapChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAuC,8BAA8B,EAAE,MAAM,yBAAyB,CAAC;AAE9G,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,8BAA8B,GAAG,YAAY,CAiDrG"}
+{"version":3,"file":"HeatMapChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMapChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAGL,8BAA8B,EAG/B,MAAM,yBAAyB,CAAC;AAEjC,wBAAgB,iCAAiC,CAAC,KAAK,EAAE,8BAA8B,GAAG,YAAY,CA4GrG"}

package/lib/components/HeatMapChartOptionsEditorSettings.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -11,11 +11,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Switch } from '@mui/material';
-import { FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup } from '@perses-dev/components';
+import { Switch, TextField } from '@mui/material';
+import { FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';
 import { produce } from 'immer';
 import merge from 'lodash/merge';
-import { DEFAULT_FORMAT } from '../heat-map-chart-model';
+import { DEFAULT_FORMAT, LOG_BASE_CONFIG, LOG_BASE_OPTIONS } from '../heat-map-chart-model';
 export function HeatMapChartOptionsEditorSettings(props) {
     const { onChange, value } = props;
     const handleYAxisFormatChange = (newFormat)=>{
@@ -36,6 +36,9 @@ export function HeatMapChartOptionsEditorSettings(props) {
     // ensures decimalPlaces defaults to correct value
     const yAxisFormat = merge({}, DEFAULT_FORMAT, value.yAxisFormat);
     const countFormat = merge({}, DEFAULT_FORMAT, value.countFormat);
+    // Get the current log base configuration, defaulting to 'none' if not set
+    const logBaseKey = value.logBase ? String(value.logBase) : 'none';
+    const logBase = LOG_BASE_CONFIG[logBaseKey] ?? LOG_BASE_CONFIG['none'];
     return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
         children: [
             /*#__PURE__*/ _jsx(OptionsEditorColumn, {
@@ -57,12 +60,64 @@ export function HeatMapChartOptionsEditorSettings(props) {
                 })
             }),
             /*#__PURE__*/ _jsx(OptionsEditorColumn, {
-                children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
                     title: "Y Axis",
-                    children: /*#__PURE__*/ _jsx(FormatControls, {
-                        value: yAxisFormat,
-                        onChange: handleYAxisFormatChange
-                    })
+                    children: [
+                        /*#__PURE__*/ _jsx(FormatControls, {
+                            value: yAxisFormat,
+                            onChange: handleYAxisFormatChange
+                        }),
+                        /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                            label: "Min",
+                            control: /*#__PURE__*/ _jsx(TextField, {
+                                type: "number",
+                                value: value.min ?? '',
+                                onChange: (e)=>{
+                                    const newValue = e.target.value ? Number(e.target.value) : undefined;
+                                    onChange(produce(value, (draft)=>{
+                                        draft.min = newValue;
+                                    }));
+                                },
+                                placeholder: "Auto",
+                                sx: {
+                                    width: '100%'
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                            label: "Max",
+                            control: /*#__PURE__*/ _jsx(TextField, {
+                                type: "number",
+                                value: value.max ?? '',
+                                onChange: (e)=>{
+                                    const newValue = e.target.value ? Number(e.target.value) : undefined;
+                                    onChange(produce(value, (draft)=>{
+                                        draft.max = newValue;
+                                    }));
+                                },
+                                placeholder: "Auto",
+                                sx: {
+                                    width: '100%'
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                            label: "Log Base",
+                            control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                                value: {
+                                    ...logBase,
+                                    id: logBase?.label ?? 'None'
+                                },
+                                options: LOG_BASE_OPTIONS,
+                                onChange: (__, newValue)=>{
+                                    onChange(produce(value, (draft)=>{
+                                        draft.logBase = newValue.log;
+                                    }));
+                                },
+                                disableClearable: true
+                            })
+                        })
+                    ]
                 })
             })
         ]

package/lib/components/HeatMapChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HeatMapChartOptionsEditorSettings.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Switch, SwitchProps } from '@mui/material';\nimport {\n  FormatControls,\n  FormatControlsProps,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n} from '@perses-dev/components';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport { ReactElement } from 'react';\nimport { DEFAULT_FORMAT, HeatMapChartOptions, HeatMapChartOptionsEditorProps } from '../heat-map-chart-model';\n\nexport function HeatMapChartOptionsEditorSettings(props: HeatMapChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleYAxisFormatChange: FormatControlsProps['onChange'] = (newFormat) => {\n    onChange(\n      produce(value, (draft: HeatMapChartOptions) => {\n        draft.yAxisFormat = newFormat;\n      })\n    );\n  };\n\n  const handleCountFormatChange: FormatControlsProps['onChange'] = (newFormat) => {\n    onChange(\n      produce(value, (draft: HeatMapChartOptions) => {\n        draft.countFormat = newFormat;\n      })\n    );\n  };\n\n  const handleShowVisualMapChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChange(\n      produce(value, (draft: HeatMapChartOptions) => {\n        draft.showVisualMap = checked;\n      })\n    );\n  };\n\n  // ensures decimalPlaces defaults to correct value\n  const yAxisFormat = merge({}, DEFAULT_FORMAT, value.yAxisFormat);\n  const countFormat = merge({}, DEFAULT_FORMAT, value.countFormat);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Bucket Count\">\n          <FormatControls value={countFormat} onChange={handleCountFormatChange} />\n          <OptionsEditorControl\n            label=\"Show Visual Map\"\n            control={<Switch checked={!!value.showVisualMap} onChange={handleShowVisualMapChange} />}\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Y Axis\">\n          <FormatControls value={yAxisFormat} onChange={handleYAxisFormatChange} />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Switch","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","produce","merge","DEFAULT_FORMAT","HeatMapChartOptionsEditorSettings","props","onChange","value","handleYAxisFormatChange","newFormat","draft","yAxisFormat","handleCountFormatChange","countFormat","handleShowVisualMapChange","_","checked","showVisualMap","title","label","control"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,MAAM,QAAqB,gBAAgB;AACpD,SACEC,cAAc,EAEdC,mBAAmB,EACnBC,oBAAoB,EACpBC,iBAAiB,EACjBC,kBAAkB,QACb,yBAAyB;AAChC,SAASC,OAAO,QAAQ,QAAQ;AAChC,OAAOC,WAAW,eAAe;AAEjC,SAASC,cAAc,QAA6D,0BAA0B;AAE9G,OAAO,SAASC,kCAAkCC,KAAqC;IACrF,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,0BAA2D,CAACC;QAChEH,SACEL,QAAQM,OAAO,CAACG;YACdA,MAAMC,WAAW,GAAGF;QACtB;IAEJ;IAEA,MAAMG,0BAA2D,CAACH;QAChEH,SACEL,QAAQM,OAAO,CAACG;YACdA,MAAMG,WAAW,GAAGJ;QACtB;IAEJ;IAEA,MAAMK,4BAAqD,CAACC,GAAYC;QACtEV,SACEL,QAAQM,OAAO,CAACG;YACdA,MAAMO,aAAa,GAAGD;QACxB;IAEJ;IAEA,kDAAkD;IAClD,MAAML,cAAcT,MAAM,CAAC,GAAGC,gBAAgBI,MAAMI,WAAW;IAC/D,MAAME,cAAcX,MAAM,CAAC,GAAGC,gBAAgBI,MAAMM,WAAW;IAE/D,qBACE,MAACd;;0BACC,KAACF;0BACC,cAAA,MAACG;oBAAmBkB,OAAM;;sCACxB,KAACtB;4BAAeW,OAAOM;4BAAaP,UAAUM;;sCAC9C,KAACd;4BACCqB,OAAM;4BACNC,uBAAS,KAACzB;gCAAOqB,SAAS,CAAC,CAACT,MAAMU,aAAa;gCAAEX,UAAUQ;;;;;;0BAIjE,KAACjB;0BACC,cAAA,KAACG;oBAAmBkB,OAAM;8BACxB,cAAA,KAACtB;wBAAeW,OAAOI;wBAAaL,UAAUE;;;;;;AAKxD"}
+{"version":3,"sources":["../../../src/components/HeatMapChartOptionsEditorSettings.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Switch, SwitchProps, TextField } from '@mui/material';\nimport {\n  FormatControls,\n  FormatControlsProps,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SettingsAutocomplete,\n} from '@perses-dev/components';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport { ReactElement } from 'react';\nimport {\n  DEFAULT_FORMAT,\n  HeatMapChartOptions,\n  HeatMapChartOptionsEditorProps,\n  LOG_BASE_CONFIG,\n  LOG_BASE_OPTIONS,\n} from '../heat-map-chart-model';\n\nexport function HeatMapChartOptionsEditorSettings(props: HeatMapChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleYAxisFormatChange: FormatControlsProps['onChange'] = (newFormat) => {\n    onChange(\n      produce(value, (draft: HeatMapChartOptions) => {\n        draft.yAxisFormat = newFormat;\n      })\n    );\n  };\n\n  const handleCountFormatChange: FormatControlsProps['onChange'] = (newFormat) => {\n    onChange(\n      produce(value, (draft: HeatMapChartOptions) => {\n        draft.countFormat = newFormat;\n      })\n    );\n  };\n\n  const handleShowVisualMapChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChange(\n      produce(value, (draft: HeatMapChartOptions) => {\n        draft.showVisualMap = checked;\n      })\n    );\n  };\n\n  // ensures decimalPlaces defaults to correct value\n  const yAxisFormat = merge({}, DEFAULT_FORMAT, value.yAxisFormat);\n  const countFormat = merge({}, DEFAULT_FORMAT, value.countFormat);\n\n  // Get the current log base configuration, defaulting to 'none' if not set\n  const logBaseKey = value.logBase ? String(value.logBase) : 'none';\n  const logBase = LOG_BASE_CONFIG[logBaseKey] ?? LOG_BASE_CONFIG['none'];\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Bucket Count\">\n          <FormatControls value={countFormat} onChange={handleCountFormatChange} />\n          <OptionsEditorControl\n            label=\"Show Visual Map\"\n            control={<Switch checked={!!value.showVisualMap} onChange={handleShowVisualMapChange} />}\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Y Axis\">\n          <FormatControls value={yAxisFormat} onChange={handleYAxisFormatChange} />\n          <OptionsEditorControl\n            label=\"Min\"\n            control={\n              <TextField\n                type=\"number\"\n                value={value.min ?? ''}\n                onChange={(e) => {\n                  const newValue = e.target.value ? Number(e.target.value) : undefined;\n                  onChange(\n                    produce(value, (draft: HeatMapChartOptions) => {\n                      draft.min = newValue;\n                    })\n                  );\n                }}\n                placeholder=\"Auto\"\n                sx={{ width: '100%' }}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label=\"Max\"\n            control={\n              <TextField\n                type=\"number\"\n                value={value.max ?? ''}\n                onChange={(e) => {\n                  const newValue = e.target.value ? Number(e.target.value) : undefined;\n                  onChange(\n                    produce(value, (draft: HeatMapChartOptions) => {\n                      draft.max = newValue;\n                    })\n                  );\n                }}\n                placeholder=\"Auto\"\n                sx={{ width: '100%' }}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label=\"Log Base\"\n            control={\n              <SettingsAutocomplete\n                value={{ ...logBase, id: logBase?.label ?? 'None' }}\n                options={LOG_BASE_OPTIONS}\n                onChange={(__, newValue) => {\n                  onChange(\n                    produce(value, (draft: HeatMapChartOptions) => {\n                      draft.logBase = newValue.log;\n                    })\n                  );\n                }}\n                disableClearable\n              />\n            }\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Switch","TextField","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","SettingsAutocomplete","produce","merge","DEFAULT_FORMAT","LOG_BASE_CONFIG","LOG_BASE_OPTIONS","HeatMapChartOptionsEditorSettings","props","onChange","value","handleYAxisFormatChange","newFormat","draft","yAxisFormat","handleCountFormatChange","countFormat","handleShowVisualMapChange","_","checked","showVisualMap","logBaseKey","logBase","String","title","label","control","type","min","e","newValue","target","Number","undefined","placeholder","sx","width","max","id","options","__","log","disableClearable"],"mappings":"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"}

package/lib/components/HeatMapChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HeatMapChartPanel.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMapChartPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAyB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAO9E,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;AAErF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CAmKpF"}
+{"version":3,"file":"HeatMapChartPanel.d.ts","sourceRoot":"","sources":["../../../src/components/HeatMapChartPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAyB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAkB,mBAAmB,EAAY,MAAM,yBAAyB,CAAC;AAiBxF,MAAM,MAAM,sBAAsB,GAAG,UAAU,CAAC,mBAAmB,EAAE,cAAc,CAAC,CAAC;AAErF,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,GAAG,IAAI,CA0MpF"}

package/lib/components/HeatMapChartPanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-// Copyright 2025 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -17,19 +17,29 @@ import { useMemo } from 'react';
 import { DEFAULT_FORMAT } from '../heat-map-chart-model';
 import { generateCompleteTimestamps, getCommonTimeScaleForQueries } from '../utils';
 import { HeatMapChart } from './HeatMapChart';
-const HEATMAP_MIN_HEIGHT = 200;
-const HEATMAP_ITEM_MIN_HEIGHT = 2;
+/**
+ * Helper function to get the effective lower bound for log scale.
+ * For values <= 0, we use a small fraction of the upper bound.
+ */ const getEffectiveLowerBound = (lowerBound, upperBound, logBase)=>{
+    if (logBase === undefined || lowerBound > 0) {
+        return lowerBound;
+    }
+    // For log scales with non-positive lower bounds, use a small fraction of upper bound
+    // This ensures the bucket is still visible on the log scale
+    return upperBound * 0.001;
+};
 export function HeatMapChartPanel(props) {
     const { spec: pluginSpec, contentDimensions, queryResults } = props;
     // ensures all default format properties set if undef
     const yAxisFormat = merge({}, DEFAULT_FORMAT, pluginSpec.yAxisFormat);
     const countFormat = merge({}, DEFAULT_FORMAT, pluginSpec.countFormat);
-    const { data, xAxisCategories, yAxisCategories, countMin, countMax, timeScale } = useMemo(()=>{
+    const { data, xAxisCategories, min, max, countMin, countMax, timeScale } = useMemo(()=>{
         if (!queryResults || queryResults.length === 0) {
             return {
                 data: [],
                 xAxisCategories: [],
-                yAxisCategories: [],
+                min: 0,
+                max: 0,
                 countMin: 0,
                 countMax: 0,
                 timeScale: undefined
@@ -39,7 +49,8 @@ export function HeatMapChartPanel(props) {
             return {
                 data: [],
                 xAxisCategories: [],
-                yAxisCategories: [],
+                min: 0,
+                max: 0,
                 countMin: 0,
                 countMax: 0,
                 timeScale: undefined
@@ -48,19 +59,26 @@ export function HeatMapChartPanel(props) {
         const series = queryResults[0].data.series[0];
         const timeScale = getCommonTimeScaleForQueries(queryResults);
         const xAxisCategories = generateCompleteTimestamps(timeScale);
+        const logBase = pluginSpec.logBase;
         // Dummy value that will be replaced at the first iteration
         let lowestBound = Infinity;
         let highestBound = -Infinity;
         let countMin = Infinity;
         let countMax = -Infinity;
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        for (const [_, histogram] of series?.histograms ?? []){
+        for (const [, histogram] of series?.histograms ?? []){
             for (const bucket of histogram?.buckets ?? []){
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const [_, lowerBound, upperBound, count] = bucket;
-                const lowerBoundFloat = parseFloat(lowerBound);
+                const [, lowerBound, upperBound, count] = bucket;
+                let lowerBoundFloat = parseFloat(lowerBound);
                 const upperBoundFloat = parseFloat(upperBound);
                 const countFloat = parseFloat(count);
+                // For logarithmic scales, skip buckets that would be entirely non-positive
+                if (logBase !== undefined && upperBoundFloat <= 0) {
+                    continue;
+                }
+                // For log scales, adjust non-positive lower bounds
+                if (logBase !== undefined) {
+                    lowerBoundFloat = getEffectiveLowerBound(lowerBoundFloat, upperBoundFloat, logBase);
+                }
                 if (lowerBoundFloat < lowestBound) {
                     lowestBound = lowerBoundFloat;
                 }
@@ -75,48 +93,77 @@ export function HeatMapChartPanel(props) {
                 }
             }
         }
-        const height = contentDimensions?.height ?? HEATMAP_MIN_HEIGHT;
-        const totalRange = highestBound - lowestBound;
-        const rangePerItem = totalRange * HEATMAP_ITEM_MIN_HEIGHT / height;
-        const totalItems = Math.ceil(height / HEATMAP_ITEM_MIN_HEIGHT);
-        // Generating value of the Y axis based on the height divided by the size of a cell (item)
-        const yAxisCategories = Array.from({
-            length: totalItems
-        }, (_, index)=>(lowestBound + index * rangePerItem).toFixed(3));
         const data = [];
-        // Logic for filling all cells where a bucket is present
+        // Each bucket becomes a rectangle spanning [lowerBound, upperBound] at the given x index
         for (const [time, histogram] of series?.histograms ?? []){
             const itemIndexOnXaxis = xAxisCategories.findIndex((v)=>v === time * 1000);
             for (const bucket of histogram?.buckets ?? []){
-                // eslint-disable-next-line @typescript-eslint/no-unused-vars
-                const [_, lowerBound, upperBound, count] = bucket;
-                const yLowerBoundItem = Math.floor((parseFloat(lowerBound) - lowestBound) / rangePerItem);
-                const yUpperBoundItem = Math.ceil((parseFloat(upperBound) - lowestBound) / rangePerItem);
-                for(let i = 0; i < yUpperBoundItem - yLowerBoundItem; i++){
-                    // TODO: some bucket may have overlapping cells, we could use avg value. Probably will need to move to a matrix data structure for performance reasons
-                    data.push({
-                        value: [
-                            itemIndexOnXaxis,
-                            yLowerBoundItem + i,
-                            parseFloat(count)
-                        ],
-                        label: count
-                    });
+                const [, lowerBound, upperBound, count] = bucket;
+                let lowerBoundFloat = parseFloat(lowerBound);
+                const upperBoundFloat = parseFloat(upperBound);
+                // For logarithmic scales, skip buckets that would be entirely non-positive
+                if (logBase !== undefined && upperBoundFloat <= 0) {
+                    continue;
                 }
+                // For log scales, adjust non-positive lower bounds
+                if (logBase !== undefined) {
+                    lowerBoundFloat = getEffectiveLowerBound(lowerBoundFloat, upperBoundFloat, logBase);
+                }
+                data.push({
+                    value: [
+                        itemIndexOnXaxis,
+                        lowerBoundFloat,
+                        upperBoundFloat,
+                        parseFloat(count)
+                    ],
+                    label: count
+                });
             }
         }
         return {
             data,
             xAxisCategories,
-            yAxisCategories,
+            min: lowestBound === Infinity ? undefined : lowestBound,
+            max: highestBound === -Infinity ? undefined : highestBound,
             countMin,
             countMax,
             timeScale
         };
     }, [
-        contentDimensions?.height,
+        pluginSpec.logBase,
         queryResults
     ]);
+    // Use configured min/max if provided, otherwise use calculated values
+    // For logarithmic scales, ignore user-provided min if it's <= 0 (log of non-positive is undefined)
+    // and let ECharts auto-calculate the range to avoid rendering issues
+    const finalMin = useMemo(()=>{
+        if (pluginSpec.logBase !== undefined) {
+            // For log scale, ignore min if it's <= 0 or let ECharts auto-calculate
+            if (pluginSpec.min !== undefined && pluginSpec.min <= 0) {
+                return undefined; // Let ECharts auto-calculate
+            }
+            return pluginSpec.min ?? min;
+        }
+        return pluginSpec.min ?? min;
+    }, [
+        pluginSpec.logBase,
+        pluginSpec.min,
+        min
+    ]);
+    const finalMax = useMemo(()=>{
+        if (pluginSpec.logBase !== undefined) {
+            // For log scale, ignore max if it's <= 0
+            if (pluginSpec.max !== undefined && pluginSpec.max <= 0) {
+                return undefined; // Let ECharts auto-calculate
+            }
+            return pluginSpec.max ?? max;
+        }
+        return pluginSpec.max ?? max;
+    }, [
+        pluginSpec.logBase,
+        pluginSpec.max,
+        max
+    ]);
     // TODO: add support for multiple queries
     if (queryResults.length > 1) {
         return /*#__PURE__*/ _jsx(Stack, {
@@ -151,13 +198,15 @@ export function HeatMapChartPanel(props) {
             height: contentDimensions.height,
             data: data,
             xAxisCategories: xAxisCategories,
-            yAxisCategories: yAxisCategories,
             yAxisFormat: yAxisFormat,
             countFormat: countFormat,
             countMin: countMin,
             countMax: countMax,
             timeScale: timeScale,
-            showVisualMap: pluginSpec.showVisualMap
+            showVisualMap: pluginSpec.showVisualMap,
+            min: finalMin,
+            max: finalMax,
+            logBase: pluginSpec.logBase
         })
     });
 }