@perses-dev/histogram-chart-plugin 0.11.0-beta.0 → 0.11.0

package/lib/cjs/components/HistogramChart.js

@@ -1,4 +1,4 @@
-// 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
@@ -29,28 +29,49 @@ const _utils = require("../utils");
 (0, _core.use)([
     _charts.CustomChart
 ]);
-function HistogramChart({ width, height, data, format, min, max, thresholds }) {
+function HistogramChart({ width, height, data, format, min, max, thresholds, logBase }) {
     const chartsTheme = (0, _components.useChartsTheme)();
     const transformedData = (0, _react.useMemo)(()=>{
         return data.buckets.map(([bucket, lowerBound, upperBound, count])=>{
+            let lower = parseFloat(lowerBound);
+            const upper = parseFloat(upperBound);
+            const countValue = parseFloat(count);
+            // For logarithmic scales, we need to handle non-positive lower bounds
+            // since log(0) and log(negative) are undefined
+            if (logBase !== undefined && lower <= 0) {
+                // Skip buckets that would be entirely non-positive on a log scale
+                if (upper <= 0) {
+                    return null;
+                }
+                // For buckets that span from 0 (or negative) to positive,
+                // use a small fraction of the upper bound as the lower bound
+                // This ensures the bucket is still visible on the log scale
+                lower = upper * 0.001; // Use 0.1% of upper bound as minimum
+            }
             return {
                 value: [
-                    parseFloat(lowerBound),
-                    parseFloat(upperBound),
-                    parseFloat(count),
+                    lower,
+                    upper,
+                    countValue,
                     bucket
                 ],
                 itemStyle: {
                     color: (0, _utils.getColorFromThresholds)(parseFloat(lowerBound), thresholds, chartsTheme, chartsTheme.echartsTheme[0])
                 }
             };
-        });
+        }).filter((item)=>item !== null);
     }, [
         chartsTheme,
         data.buckets,
+        logBase,
         thresholds
     ]);
     const minXAxis = (0, _react.useMemo)(()=>{
+        if (logBase !== undefined) {
+            // For logarithmic scales, let ECharts auto-calculate the range based on data
+            // to avoid issues with non-positive values
+            return undefined;
+        }
         if (min) {
             return min;
         }
@@ -59,6 +80,7 @@ function HistogramChart({ width, height, data, format, min, max, thresholds }) {
         }
         return undefined;
     }, [
+        logBase,
         min,
         transformedData
     ]);
@@ -76,38 +98,66 @@ function HistogramChart({ width, height, data, format, min, max, thresholds }) {
     ]);
     const option = (0, _react.useMemo)(()=>{
         if (!transformedData) return chartsTheme.noDataOption;
+        // Build xAxis configuration based on whether logarithmic scale is requested
+        const xAxisConfig = {
+            scale: false,
+            min: minXAxis,
+            max: maxXAxis
+        };
+        // Apply logarithmic scale settings if requested
+        if (logBase !== undefined) {
+            xAxisConfig.type = 'log';
+            xAxisConfig.logBase = logBase;
+        }
         return {
             title: {
                 show: false
             },
             tooltip: {},
-            xAxis: {
-                scale: false,
-                min: minXAxis,
-                max: maxXAxis
-            },
+            xAxis: xAxisConfig,
             yAxis: (0, _components.getFormattedAxis)({}, format),
             series: [
                 {
                     type: 'custom',
                     renderItem: function(params, api) {
+                        const lowerBound = api.value(0);
+                        const upperBound = api.value(1);
                         const yValue = api.value(2);
-                        const start = api.coord([
-                            api.value(0),
+                        // Get the pixel coordinates for the start and end points of the bar
+                        const startCoord = api.coord([
+                            lowerBound,
                             yValue
                         ]);
-                        const size = api.size?.([
-                            api.value(1) - api.value(0),
-                            yValue
+                        const endCoord = api.coord([
+                            upperBound,
+                            0
                         ]);
+                        // Extract coordinates with safety checks
+                        const startX = startCoord?.[0];
+                        const startY = startCoord?.[1];
+                        const endX = endCoord?.[0];
+                        const endY = endCoord?.[1];
+                        // Check if coordinates are valid before proceeding
+                        if (startX === undefined || startY === undefined || endX === undefined || endY === undefined) {
+                            return null;
+                        }
+                        // For logarithmic scales, api.size() doesn't work correctly because
+                        // the visual width isn't linear. Instead, we calculate the width
+                        // directly from the pixel coordinates.
+                        const barWidth = endX - startX;
+                        const barHeight = endY - startY;
                         const style = api.style?.();
+                        // Skip rendering if coordinates are invalid (can happen with log scale edge cases)
+                        if (!Number.isFinite(startX) || !Number.isFinite(startY) || !Number.isFinite(barWidth) || !Number.isFinite(barHeight)) {
+                            return null;
+                        }
                         return {
                             type: 'rect',
                             shape: {
-                                x: start[0],
-                                y: start[1],
-                                width: size[0],
-                                height: size[1]
+                                x: startX,
+                                y: startY,
+                                width: barWidth,
+                                height: barHeight
                             },
                             style: style
                         };
@@ -138,6 +188,7 @@ function HistogramChart({ width, height, data, format, min, max, thresholds }) {
     }, [
         chartsTheme.noDataOption,
         format,
+        logBase,
         maxXAxis,
         minXAxis,
         transformedData

package/lib/cjs/components/HistogramChartOptionsEditorSettings.js

@@ -1,4 +1,4 @@
-// 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
@@ -46,6 +46,8 @@ function HistogramChartOptionsEditorSettings(props) {
     // ensures decimalPlaces defaults to correct value
     const format = (0, _merge.default)({}, _histogramchartmodel.DEFAULT_FORMAT, value.format);
     const thresholds = (0, _merge.default)({}, _histogramchartmodel.DEFAULT_THRESHOLDS, value.thresholds);
+    // Get the current log base configuration
+    const logBase = value.logBase ? _histogramchartmodel.LOG_BASE_CONFIG[value.logBase] : _histogramchartmodel.LOG_BASE_CONFIG['none'];
     // max only needs to be set explicitly for units other than percent and percent-decimal
     let minPlaceholder = 'Enter value';
     if (format.unit === 'percent') {
@@ -105,6 +107,22 @@ function HistogramChartOptionsEditorSettings(props) {
                                     width: '100%'
                                 }
                             })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                            label: "Log Base",
+                            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SettingsAutocomplete, {
+                                value: {
+                                    ...logBase,
+                                    id: logBase?.label ?? 'None'
+                                },
+                                options: _histogramchartmodel.LOG_BASE_OPTIONS,
+                                onChange: (__, newValue)=>{
+                                    onChange((0, _immer.produce)(value, (draft)=>{
+                                        draft.logBase = newValue.log;
+                                    }));
+                                },
+                                disableClearable: true
+                            })
                         })
                     ]
                 })

package/lib/cjs/components/HistogramChartPanel.js

@@ -1,4 +1,4 @@
-// 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
@@ -95,7 +95,8 @@ function HistogramChartPanel(props) {
                     format: format,
                     min: min,
                     max: max,
-                    thresholds: thresholds
+                    thresholds: thresholds,
+                    logBase: pluginSpec.logBase
                 })
             }, `histogram-series-${seriesIndex}`);
         })

package/lib/cjs/components/index.js

@@ -1,4 +1,4 @@
-// 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

package/lib/cjs/env.d.js

@@ -1,4 +1,4 @@
-// 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

package/lib/cjs/getPluginModule.js

@@ -1,3 +1,15 @@
+// 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// 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.
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib/cjs/histogram-chart-model.js

@@ -1,4 +1,4 @@
-// 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
@@ -39,6 +39,12 @@ _export(exports, {
     get DEFAULT_THRESHOLDS () {
         return DEFAULT_THRESHOLDS;
     },
+    get LOG_BASE_CONFIG () {
+        return LOG_BASE_CONFIG;
+    },
+    get LOG_BASE_OPTIONS () {
+        return LOG_BASE_OPTIONS;
+    },
     get createInitialHistogramChartOptions () {
         return createInitialHistogramChartOptions;
     }
@@ -53,6 +59,24 @@ const DEFAULT_MIN_PERCENT = 0;
 const DEFAULT_MAX_PERCENT = 100;
 const DEFAULT_MIN_PERCENT_DECIMAL = 0;
 const DEFAULT_MAX_PERCENT_DECIMAL = 1;
+const LOG_BASE_CONFIG = {
+    none: {
+        label: 'None',
+        log: undefined
+    },
+    '2': {
+        label: '2',
+        log: 2
+    },
+    '10': {
+        label: '10',
+        log: 10
+    }
+};
+const LOG_BASE_OPTIONS = Object.entries(LOG_BASE_CONFIG).map(([id, config])=>({
+        id: id,
+        ...config
+    }));
 function createInitialHistogramChartOptions() {
     return {
         format: DEFAULT_FORMAT

package/lib/cjs/index-federation.js

@@ -40,7 +40,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-// 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

package/lib/cjs/index.js

@@ -1,4 +1,4 @@
-// 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

package/lib/cjs/setup-tests.js

@@ -1,4 +1,4 @@
-// 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

package/lib/cjs/utils/index.js

@@ -1,4 +1,4 @@
-// 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

package/lib/cjs/utils/thresholds.js

@@ -1,3 +1,15 @@
+// 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
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an \"AS IS\" BASIS,
+// 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.
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib/components/HistogramChart.d.ts

@@ -1,5 +1,6 @@
 import { ReactElement } from 'react';
 import { FormatOptions, BucketTuple, ThresholdOptions } from '@perses-dev/core';
+import { LOG_BASE } from '../histogram-chart-model';
 export interface HistogramChartData {
     buckets: BucketTuple[];
 }
@@ -11,6 +12,7 @@ export interface HistogramChartProps {
     min?: number;
     max?: number;
     thresholds?: ThresholdOptions;
+    logBase?: LOG_BASE;
 }
-export declare function HistogramChart({ width, height, data, format, min, max, thresholds, }: HistogramChartProps): ReactElement | null;
+export declare function HistogramChart({ width, height, data, format, min, max, thresholds, logBase, }: HistogramChartProps): ReactElement | null;
 //# sourceMappingURL=HistogramChart.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"HistogramChart.d.ts","sourceRoot":"","sources":["../../../src/components/HistogramChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAShF,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,kBAAkB,CAAC;IACzB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,gBAAgB,CAAC;CAE/B;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAU,GACX,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAuG3C"}
+{"version":3,"file":"HistogramChart.d.ts","sourceRoot":"","sources":["../../../src/components/HistogramChart.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAMhF,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAIpD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,WAAW,EAAE,CAAC;CACxB;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,kBAAkB,CAAC;IACzB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,OAAO,CAAC,EAAE,QAAQ,CAAC;CACpB;AAED,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,EACH,UAAU,EACV,OAAO,GACR,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAyK3C"}

package/lib/components/HistogramChart.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
@@ -19,28 +19,49 @@ import { getColorFromThresholds } from '../utils';
 use([
     CustomChart
 ]);
-export function HistogramChart({ width, height, data, format, min, max, thresholds }) {
+export function HistogramChart({ width, height, data, format, min, max, thresholds, logBase }) {
     const chartsTheme = useChartsTheme();
     const transformedData = useMemo(()=>{
         return data.buckets.map(([bucket, lowerBound, upperBound, count])=>{
+            let lower = parseFloat(lowerBound);
+            const upper = parseFloat(upperBound);
+            const countValue = parseFloat(count);
+            // For logarithmic scales, we need to handle non-positive lower bounds
+            // since log(0) and log(negative) are undefined
+            if (logBase !== undefined && lower <= 0) {
+                // Skip buckets that would be entirely non-positive on a log scale
+                if (upper <= 0) {
+                    return null;
+                }
+                // For buckets that span from 0 (or negative) to positive,
+                // use a small fraction of the upper bound as the lower bound
+                // This ensures the bucket is still visible on the log scale
+                lower = upper * 0.001; // Use 0.1% of upper bound as minimum
+            }
             return {
                 value: [
-                    parseFloat(lowerBound),
-                    parseFloat(upperBound),
-                    parseFloat(count),
+                    lower,
+                    upper,
+                    countValue,
                     bucket
                 ],
                 itemStyle: {
                     color: getColorFromThresholds(parseFloat(lowerBound), thresholds, chartsTheme, chartsTheme.echartsTheme[0])
                 }
             };
-        });
+        }).filter((item)=>item !== null);
     }, [
         chartsTheme,
         data.buckets,
+        logBase,
         thresholds
     ]);
     const minXAxis = useMemo(()=>{
+        if (logBase !== undefined) {
+            // For logarithmic scales, let ECharts auto-calculate the range based on data
+            // to avoid issues with non-positive values
+            return undefined;
+        }
         if (min) {
             return min;
         }
@@ -49,6 +70,7 @@ export function HistogramChart({ width, height, data, format, min, max, threshol
         }
         return undefined;
     }, [
+        logBase,
         min,
         transformedData
     ]);
@@ -66,38 +88,66 @@ export function HistogramChart({ width, height, data, format, min, max, threshol
     ]);
     const option = useMemo(()=>{
         if (!transformedData) return chartsTheme.noDataOption;
+        // Build xAxis configuration based on whether logarithmic scale is requested
+        const xAxisConfig = {
+            scale: false,
+            min: minXAxis,
+            max: maxXAxis
+        };
+        // Apply logarithmic scale settings if requested
+        if (logBase !== undefined) {
+            xAxisConfig.type = 'log';
+            xAxisConfig.logBase = logBase;
+        }
         return {
             title: {
                 show: false
             },
             tooltip: {},
-            xAxis: {
-                scale: false,
-                min: minXAxis,
-                max: maxXAxis
-            },
+            xAxis: xAxisConfig,
             yAxis: getFormattedAxis({}, format),
             series: [
                 {
                     type: 'custom',
                     renderItem: function(params, api) {
+                        const lowerBound = api.value(0);
+                        const upperBound = api.value(1);
                         const yValue = api.value(2);
-                        const start = api.coord([
-                            api.value(0),
+                        // Get the pixel coordinates for the start and end points of the bar
+                        const startCoord = api.coord([
+                            lowerBound,
                             yValue
                         ]);
-                        const size = api.size?.([
-                            api.value(1) - api.value(0),
-                            yValue
+                        const endCoord = api.coord([
+                            upperBound,
+                            0
                         ]);
+                        // Extract coordinates with safety checks
+                        const startX = startCoord?.[0];
+                        const startY = startCoord?.[1];
+                        const endX = endCoord?.[0];
+                        const endY = endCoord?.[1];
+                        // Check if coordinates are valid before proceeding
+                        if (startX === undefined || startY === undefined || endX === undefined || endY === undefined) {
+                            return null;
+                        }
+                        // For logarithmic scales, api.size() doesn't work correctly because
+                        // the visual width isn't linear. Instead, we calculate the width
+                        // directly from the pixel coordinates.
+                        const barWidth = endX - startX;
+                        const barHeight = endY - startY;
                         const style = api.style?.();
+                        // Skip rendering if coordinates are invalid (can happen with log scale edge cases)
+                        if (!Number.isFinite(startX) || !Number.isFinite(startY) || !Number.isFinite(barWidth) || !Number.isFinite(barHeight)) {
+                            return null;
+                        }
                         return {
                             type: 'rect',
                             shape: {
-                                x: start[0],
-                                y: start[1],
-                                width: size[0],
-                                height: size[1]
+                                x: startX,
+                                y: startY,
+                                width: barWidth,
+                                height: barHeight
                             },
                             style: style
                         };
@@ -128,6 +178,7 @@ export function HistogramChart({ width, height, data, format, min, max, threshol
     }, [
         chartsTheme.noDataOption,
         format,
+        logBase,
         maxXAxis,
         minXAxis,
         transformedData

package/lib/components/HistogramChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/HistogramChart.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, BucketTuple, ThresholdOptions } from '@perses-dev/core';\nimport { EChart, getFormattedAxis, useChartsTheme } from '@perses-dev/components';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams } from 'echarts';\nimport { CustomChart } from 'echarts/charts';\nimport { getColorFromThresholds } from '../utils';\n\nuse([CustomChart]);\n\nexport interface HistogramChartData {\n  buckets: BucketTuple[];\n}\n\nexport interface HistogramChartProps {\n  width: number;\n  height: number;\n  data: HistogramChartData;\n  format?: FormatOptions;\n  min?: number;\n  max?: number;\n  thresholds?: ThresholdOptions;\n  // TODO: exponential?: boolean;\n}\n\nexport function HistogramChart({\n  width,\n  height,\n  data,\n  format,\n  min,\n  max,\n  thresholds,\n}: HistogramChartProps): ReactElement | null {\n  const chartsTheme = useChartsTheme();\n\n  const transformedData = useMemo(() => {\n    return data.buckets.map(([bucket, lowerBound, upperBound, count]) => {\n      return {\n        value: [parseFloat(lowerBound), parseFloat(upperBound), parseFloat(count), bucket],\n        itemStyle: {\n          color: getColorFromThresholds(\n            parseFloat(lowerBound),\n            thresholds,\n            chartsTheme,\n            chartsTheme.echartsTheme[0] as string\n          ),\n        },\n      };\n    });\n  }, [chartsTheme, data.buckets, thresholds]);\n\n  const minXAxis: number | undefined = useMemo(() => {\n    if (min) {\n      return min;\n    }\n\n    if (transformedData && transformedData[0]) {\n      return Math.min(0, Math.floor(transformedData[0]?.value[0] ?? 0));\n    }\n    return undefined;\n  }, [min, transformedData]);\n\n  const maxXAxis: number | undefined = useMemo(() => {\n    if (max) {\n      return max;\n    }\n    if (transformedData && transformedData[transformedData.length - 1]) {\n      return Math.ceil(transformedData[transformedData.length - 1]?.value[1] ?? 1);\n    }\n    return undefined;\n  }, [max, transformedData]);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (!transformedData) return chartsTheme.noDataOption;\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {},\n      xAxis: {\n        scale: false,\n        min: minXAxis,\n        max: maxXAxis,\n      },\n      yAxis: getFormattedAxis({}, format),\n      series: [\n        {\n          type: 'custom',\n          renderItem: function (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) {\n            const yValue = api.value(2);\n            const start = api.coord([api.value(0), yValue]);\n            const size = api.size?.([(api.value(1) as number) - (api.value(0) as number), yValue]) as number[];\n            const style = api.style?.();\n\n            return {\n              type: 'rect',\n              shape: {\n                x: start[0],\n                y: start[1],\n                width: size[0],\n                height: size[1],\n              },\n              style: style,\n            };\n          },\n          label: {\n            show: false,\n          },\n          dimensions: ['from', 'to'],\n          encode: {\n            x: [0, 1],\n            y: 2,\n            tooltip: [0, 1],\n            itemName: 2,\n          },\n          data: transformedData,\n        },\n      ],\n    };\n  }, [chartsTheme.noDataOption, format, maxXAxis, minXAxis, transformedData]);\n\n  return (\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}\n"],"names":["useMemo","EChart","getFormattedAxis","useChartsTheme","use","CustomChart","getColorFromThresholds","HistogramChart","width","height","data","format","min","max","thresholds","chartsTheme","transformedData","buckets","map","bucket","lowerBound","upperBound","count","value","parseFloat","itemStyle","color","echartsTheme","minXAxis","Math","floor","undefined","maxXAxis","length","ceil","option","noDataOption","title","show","tooltip","xAxis","scale","yAxis","series","type","renderItem","params","api","yValue","start","coord","size","style","shape","x","y","label","dimensions","encode","itemName","sx","padding","container","default","theme"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/HistogramChart.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 { FormatOptions, BucketTuple, ThresholdOptions } from '@perses-dev/core';\nimport { EChart, getFormattedAxis, useChartsTheme } from '@perses-dev/components';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { CustomSeriesRenderItemAPI, CustomSeriesRenderItemParams } from 'echarts';\nimport { CustomChart } from 'echarts/charts';\nimport { getColorFromThresholds } from '../utils';\nimport { LOG_BASE } from '../histogram-chart-model';\n\nuse([CustomChart]);\n\nexport interface HistogramChartData {\n  buckets: BucketTuple[];\n}\n\nexport interface HistogramChartProps {\n  width: number;\n  height: number;\n  data: HistogramChartData;\n  format?: FormatOptions;\n  min?: number;\n  max?: number;\n  thresholds?: ThresholdOptions;\n  logBase?: LOG_BASE;\n}\n\nexport function HistogramChart({\n  width,\n  height,\n  data,\n  format,\n  min,\n  max,\n  thresholds,\n  logBase,\n}: HistogramChartProps): ReactElement | null {\n  const chartsTheme = useChartsTheme();\n\n  const transformedData = useMemo(() => {\n    return data.buckets\n      .map(([bucket, lowerBound, upperBound, count]) => {\n        let lower = parseFloat(lowerBound);\n        const upper = parseFloat(upperBound);\n        const countValue = parseFloat(count);\n\n        // For logarithmic scales, we need to handle non-positive lower bounds\n        // since log(0) and log(negative) are undefined\n        if (logBase !== undefined && lower <= 0) {\n          // Skip buckets that would be entirely non-positive on a log scale\n          if (upper <= 0) {\n            return null;\n          }\n          // For buckets that span from 0 (or negative) to positive,\n          // use a small fraction of the upper bound as the lower bound\n          // This ensures the bucket is still visible on the log scale\n          lower = upper * 0.001; // Use 0.1% of upper bound as minimum\n        }\n\n        return {\n          value: [lower, upper, countValue, bucket],\n          itemStyle: {\n            color: getColorFromThresholds(\n              parseFloat(lowerBound), // Use original lower bound for threshold coloring\n              thresholds,\n              chartsTheme,\n              chartsTheme.echartsTheme[0] as string\n            ),\n          },\n        };\n      })\n      .filter((item): item is NonNullable<typeof item> => item !== null);\n  }, [chartsTheme, data.buckets, logBase, thresholds]);\n\n  const minXAxis: number | undefined = useMemo(() => {\n    if (logBase !== undefined) {\n      // For logarithmic scales, let ECharts auto-calculate the range based on data\n      // to avoid issues with non-positive values\n      return undefined;\n    }\n\n    if (min) {\n      return min;\n    }\n\n    if (transformedData && transformedData[0]) {\n      return Math.min(0, Math.floor(transformedData[0]?.value[0] ?? 0));\n    }\n    return undefined;\n  }, [logBase, min, transformedData]);\n\n  const maxXAxis: number | undefined = useMemo(() => {\n    if (max) {\n      return max;\n    }\n    if (transformedData && transformedData[transformedData.length - 1]) {\n      return Math.ceil(transformedData[transformedData.length - 1]?.value[1] ?? 1);\n    }\n    return undefined;\n  }, [max, transformedData]);\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (!transformedData) return chartsTheme.noDataOption;\n\n    // Build xAxis configuration based on whether logarithmic scale is requested\n    const xAxisConfig: Record<string, unknown> = {\n      scale: false,\n      min: minXAxis,\n      max: maxXAxis,\n    };\n\n    // Apply logarithmic scale settings if requested\n    if (logBase !== undefined) {\n      xAxisConfig.type = 'log';\n      xAxisConfig.logBase = logBase;\n    }\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {},\n      xAxis: xAxisConfig,\n      yAxis: getFormattedAxis({}, format),\n      series: [\n        {\n          type: 'custom',\n          renderItem: function (params: CustomSeriesRenderItemParams, api: CustomSeriesRenderItemAPI) {\n            const lowerBound = api.value(0) as number;\n            const upperBound = api.value(1) as number;\n            const yValue = api.value(2) as number;\n\n            // Get the pixel coordinates for the start and end points of the bar\n            const startCoord = api.coord([lowerBound, yValue]);\n            const endCoord = api.coord([upperBound, 0]);\n\n            // Extract coordinates with safety checks\n            const startX = startCoord?.[0];\n            const startY = startCoord?.[1];\n            const endX = endCoord?.[0];\n            const endY = endCoord?.[1];\n\n            // Check if coordinates are valid before proceeding\n            if (startX === undefined || startY === undefined || endX === undefined || endY === undefined) {\n              return null;\n            }\n\n            // For logarithmic scales, api.size() doesn't work correctly because\n            // the visual width isn't linear. Instead, we calculate the width\n            // directly from the pixel coordinates.\n            const barWidth = endX - startX;\n            const barHeight = endY - startY;\n\n            const style = api.style?.();\n\n            // Skip rendering if coordinates are invalid (can happen with log scale edge cases)\n            if (\n              !Number.isFinite(startX) ||\n              !Number.isFinite(startY) ||\n              !Number.isFinite(barWidth) ||\n              !Number.isFinite(barHeight)\n            ) {\n              return null;\n            }\n\n            return {\n              type: 'rect',\n              shape: {\n                x: startX,\n                y: startY,\n                width: barWidth,\n                height: barHeight,\n              },\n              style: style,\n            };\n          },\n          label: {\n            show: false,\n          },\n          dimensions: ['from', 'to'],\n          encode: {\n            x: [0, 1],\n            y: 2,\n            tooltip: [0, 1],\n            itemName: 2,\n          },\n          data: transformedData,\n        },\n      ],\n    };\n  }, [chartsTheme.noDataOption, format, logBase, maxXAxis, minXAxis, transformedData]);\n\n  return (\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}\n"],"names":["useMemo","EChart","getFormattedAxis","useChartsTheme","use","CustomChart","getColorFromThresholds","HistogramChart","width","height","data","format","min","max","thresholds","logBase","chartsTheme","transformedData","buckets","map","bucket","lowerBound","upperBound","count","lower","parseFloat","upper","countValue","undefined","value","itemStyle","color","echartsTheme","filter","item","minXAxis","Math","floor","maxXAxis","length","ceil","option","noDataOption","xAxisConfig","scale","type","title","show","tooltip","xAxis","yAxis","series","renderItem","params","api","yValue","startCoord","coord","endCoord","startX","startY","endX","endY","barWidth","barHeight","style","Number","isFinite","shape","x","y","label","dimensions","encode","itemName","sx","padding","container","default","theme"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"HistogramChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../../src/components/HistogramChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAQL,gCAAgC,EACjC,MAAM,0BAA0B,CAAC;AAElC,wBAAgB,mCAAmC,CAAC,KAAK,EAAE,gCAAgC,GAAG,YAAY,CA2FzG"}
+{"version":3,"file":"HistogramChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../../src/components/HistogramChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAQL,gCAAgC,EAGjC,MAAM,0BAA0B,CAAC;AAElC,wBAAgB,mCAAmC,CAAC,KAAK,EAAE,gCAAgC,GAAG,YAAY,CAkHzG"}

package/lib/components/HistogramChartOptionsEditorSettings.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
@@ -12,10 +12,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { TextField } from '@mui/material';
-import { FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, ThresholdsEditor } from '@perses-dev/components';
+import { FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, ThresholdsEditor, SettingsAutocomplete } from '@perses-dev/components';
 import { produce } from 'immer';
 import merge from 'lodash/merge';
-import { DEFAULT_FORMAT, DEFAULT_MAX_PERCENT, DEFAULT_MAX_PERCENT_DECIMAL, DEFAULT_MIN_PERCENT, DEFAULT_MIN_PERCENT_DECIMAL, DEFAULT_THRESHOLDS } from '../histogram-chart-model';
+import { DEFAULT_FORMAT, DEFAULT_MAX_PERCENT, DEFAULT_MAX_PERCENT_DECIMAL, DEFAULT_MIN_PERCENT, DEFAULT_MIN_PERCENT_DECIMAL, DEFAULT_THRESHOLDS, LOG_BASE_CONFIG, LOG_BASE_OPTIONS } from '../histogram-chart-model';
 export function HistogramChartOptionsEditorSettings(props) {
     const { onChange, value } = props;
     const handleUnitChange = (newFormat)=>{
@@ -31,6 +31,8 @@ export function HistogramChartOptionsEditorSettings(props) {
     // ensures decimalPlaces defaults to correct value
     const format = merge({}, DEFAULT_FORMAT, value.format);
     const thresholds = merge({}, DEFAULT_THRESHOLDS, value.thresholds);
+    // Get the current log base configuration
+    const logBase = value.logBase ? LOG_BASE_CONFIG[value.logBase] : LOG_BASE_CONFIG['none'];
     // max only needs to be set explicitly for units other than percent and percent-decimal
     let minPlaceholder = 'Enter value';
     if (format.unit === 'percent') {
@@ -90,6 +92,22 @@ export function HistogramChartOptionsEditorSettings(props) {
                                     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
+                            })
                         })
                     ]
                 })