@perses-dev/histogram-chart-plugin 0.9.0

package/lib/cjs/HistogramChart.js

@@ -0,0 +1,40 @@
+// Copyright 2025 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
+});
+Object.defineProperty(exports, "HistogramChart", {
+    enumerable: true,
+    get: function() {
+        return HistogramChart;
+    }
+});
+const _components = require("./components");
+const _histogramchartmodel = require("./histogram-chart-model");
+const HistogramChart = {
+    PanelComponent: _components.HistogramChartPanel,
+    supportedQueryTypes: [
+        'TimeSeriesQuery'
+    ],
+    queryOptions: {
+        mode: 'instant'
+    },
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: _components.HistogramChartOptionsEditorSettings
+        }
+    ],
+    createInitialOptions: _histogramchartmodel.createInitialHistogramChartOptions
+};

package/lib/cjs/bootstrap.js

@@ -0,0 +1,26 @@
+// Copyright 2025 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
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _client = /*#__PURE__*/ _interop_require_default(require("react-dom/client"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const root = _client.default.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ (0, _jsxruntime.jsx)(_react.default.StrictMode, {}));

package/lib/cjs/components/HistogramChart.js

@@ -0,0 +1,154 @@
+// Copyright 2025 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
+});
+Object.defineProperty(exports, "HistogramChart", {
+    enumerable: true,
+    get: function() {
+        return HistogramChart;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _components = require("@perses-dev/components");
+const _core = require("echarts/core");
+const _charts = require("echarts/charts");
+const _utils = require("../utils");
+(0, _core.use)([
+    _charts.CustomChart
+]);
+function HistogramChart({ width, height, data, format, min, max, thresholds }) {
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const transformedData = (0, _react.useMemo)(()=>{
+        return data.buckets.map(([bucket, lowerBound, upperBound, count])=>{
+            return {
+                value: [
+                    parseFloat(lowerBound),
+                    parseFloat(upperBound),
+                    parseFloat(count),
+                    bucket
+                ],
+                itemStyle: {
+                    color: (0, _utils.getColorFromThresholds)(parseFloat(lowerBound), thresholds, chartsTheme, chartsTheme.echartsTheme[0])
+                }
+            };
+        });
+    }, [
+        chartsTheme,
+        data.buckets,
+        thresholds
+    ]);
+    const minXAxis = (0, _react.useMemo)(()=>{
+        if (min) {
+            return min;
+        }
+        if (transformedData && transformedData[0]) {
+            return Math.min(0, Math.floor(transformedData[0]?.value[0] ?? 0));
+        }
+        return undefined;
+    }, [
+        min,
+        transformedData
+    ]);
+    const maxXAxis = (0, _react.useMemo)(()=>{
+        if (max) {
+            return max;
+        }
+        if (transformedData && transformedData[transformedData.length - 1]) {
+            return Math.ceil(transformedData[transformedData.length - 1]?.value[1] ?? 1);
+        }
+        return undefined;
+    }, [
+        max,
+        transformedData
+    ]);
+    const option = (0, _react.useMemo)(()=>{
+        if (!transformedData) return chartsTheme.noDataOption;
+        return {
+            title: {
+                show: false
+            },
+            tooltip: {},
+            xAxis: {
+                scale: false,
+                min: minXAxis,
+                max: maxXAxis
+            },
+            yAxis: (0, _components.getFormattedAxis)({}, format),
+            series: [
+                {
+                    type: 'custom',
+                    renderItem: function(params, api) {
+                        const yValue = api.value(2);
+                        const start = api.coord([
+                            api.value(0),
+                            yValue
+                        ]);
+                        const size = api.size?.([
+                            api.value(1) - api.value(0),
+                            yValue
+                        ]);
+                        const style = api.style?.();
+                        return {
+                            type: 'rect',
+                            shape: {
+                                x: start[0],
+                                y: start[1],
+                                width: size[0],
+                                height: size[1]
+                            },
+                            style: style
+                        };
+                    },
+                    label: {
+                        show: false
+                    },
+                    dimensions: [
+                        'from',
+                        'to'
+                    ],
+                    encode: {
+                        x: [
+                            0,
+                            1
+                        ],
+                        y: 2,
+                        tooltip: [
+                            0,
+                            1
+                        ],
+                        itemName: 2
+                    },
+                    data: transformedData
+                }
+            ]
+        };
+    }, [
+        chartsTheme.noDataOption,
+        format,
+        maxXAxis,
+        minXAxis,
+        transformedData
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EChart, {
+        sx: {
+            width: width,
+            height: height,
+            padding: `${chartsTheme.container.padding.default}px`
+        },
+        option: option,
+        theme: chartsTheme.echartsTheme
+    });
+}

package/lib/cjs/components/HistogramChartOptionsEditorSettings.js

@@ -0,0 +1,120 @@
+// Copyright 2025 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
+});
+Object.defineProperty(exports, "HistogramChartOptionsEditorSettings", {
+    enumerable: true,
+    get: function() {
+        return HistogramChartOptionsEditorSettings;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _immer = require("immer");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _histogramchartmodel = require("../histogram-chart-model");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function HistogramChartOptionsEditorSettings(props) {
+    const { onChange, value } = props;
+    const handleUnitChange = (newFormat)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.format = newFormat;
+        }));
+    };
+    const handleThresholdsChange = (thresholds)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.thresholds = thresholds;
+        }));
+    };
+    // 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);
+    // max only needs to be set explicitly for units other than percent and percent-decimal
+    let minPlaceholder = 'Enter value';
+    if (format.unit === 'percent') {
+        minPlaceholder = _histogramchartmodel.DEFAULT_MIN_PERCENT.toString();
+    } else if (format.unit === 'percent-decimal') {
+        minPlaceholder = _histogramchartmodel.DEFAULT_MIN_PERCENT_DECIMAL.toString();
+    }
+    // max only needs to be set explicitly for units other than percent and percent-decimal
+    let maxPlaceholder = 'Enter value';
+    if (format.unit === 'percent') {
+        maxPlaceholder = _histogramchartmodel.DEFAULT_MAX_PERCENT.toString();
+    } else if (format.unit === 'percent-decimal') {
+        maxPlaceholder = _histogramchartmodel.DEFAULT_MAX_PERCENT_DECIMAL.toString();
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGrid, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+                    title: "Misc",
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
+                            value: format,
+                            onChange: handleUnitChange
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                            label: "Min",
+                            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                type: "number",
+                                value: value.min ?? '',
+                                onChange: (e)=>{
+                                    // ensure empty value resets to undef to allow chart to calculate max
+                                    const newValue = e.target.value ? Number(e.target.value) : undefined;
+                                    onChange((0, _immer.produce)(value, (draft)=>{
+                                        draft.min = newValue;
+                                    }));
+                                },
+                                placeholder: minPlaceholder,
+                                sx: {
+                                    width: '100%'
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                            label: "Max",
+                            control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                                type: "number",
+                                value: value.max ?? '',
+                                onChange: (e)=>{
+                                    // ensure empty value resets to undef to allow chart to calculate max
+                                    const newValue = e.target.value ? Number(e.target.value) : undefined;
+                                    onChange((0, _immer.produce)(value, (draft)=>{
+                                        draft.max = newValue;
+                                    }));
+                                },
+                                placeholder: maxPlaceholder,
+                                sx: {
+                                    width: '100%'
+                                }
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ThresholdsEditor, {
+                    thresholds: thresholds,
+                    onChange: handleThresholdsChange
+                })
+            })
+        ]
+    });
+}

package/lib/cjs/components/HistogramChartPanel.js

@@ -0,0 +1,103 @@
+// Copyright 2025 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
+});
+Object.defineProperty(exports, "HistogramChartPanel", {
+    enumerable: true,
+    get: function() {
+        return HistogramChartPanel;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _react = require("react");
+const _components = require("@perses-dev/components");
+const _histogramchartmodel = require("../histogram-chart-model");
+const _HistogramChart = require("./HistogramChart");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const HISTOGRAM_MIN_WIDTH = 90;
+function HistogramChartPanel(props) {
+    const { spec: pluginSpec, contentDimensions, queryResults } = props;
+    const { min, max } = pluginSpec;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    // ensures all default format properties set if undef
+    const format = (0, _merge.default)({}, _histogramchartmodel.DEFAULT_FORMAT, pluginSpec.format);
+    const thresholds = (0, _merge.default)({}, _histogramchartmodel.DEFAULT_THRESHOLDS, pluginSpec.thresholds);
+    const histogramData = (0, _react.useMemo)(()=>{
+        const histograms = [];
+        for (const result of queryResults){
+            for (const timeSeries of result.data.series){
+                if (!timeSeries.histograms || timeSeries.histograms.length === 0) {
+                    continue;
+                }
+                const [, histoBuckets] = timeSeries.histograms[0];
+                if (histoBuckets && histoBuckets.buckets) {
+                    histograms.push({
+                        buckets: histoBuckets.buckets
+                    });
+                }
+            }
+        }
+        return histograms;
+    }, [
+        queryResults
+    ]);
+    // no data message handled inside chart component
+    if (histogramData.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+            justifyContent: "center",
+            height: "100%",
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                variant: "body2",
+                textAlign: "center",
+                children: "No data available (only native histograms are supported for now)"
+            })
+        });
+    }
+    if (contentDimensions === undefined) return null;
+    // accounts for showing a separate chart for each time series
+    let chartWidth = contentDimensions.width / histogramData.length - chartsTheme.container.padding.default;
+    if (chartWidth < HISTOGRAM_MIN_WIDTH && histogramData.length > 1) {
+        // enables horizontal scroll when charts overflow outside of panel
+        chartWidth = HISTOGRAM_MIN_WIDTH;
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        direction: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        sx: {
+            // so scrollbar only shows when necessary
+            overflowX: histogramData.length > 1 ? 'scroll' : 'auto'
+        },
+        children: histogramData.map((series, seriesIndex)=>{
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HistogramChart.HistogramChart, {
+                    width: chartWidth,
+                    height: contentDimensions.height,
+                    data: series,
+                    format: format,
+                    min: min,
+                    max: max,
+                    thresholds: thresholds
+                })
+            }, `histogram-series-${seriesIndex}`);
+        })
+    });
+}

package/lib/cjs/components/index.js

@@ -0,0 +1,32 @@
+// Copyright 2025 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
+});
+_export_star(require("./HistogramChartOptionsEditorSettings"), exports);
+_export_star(require("./HistogramChartPanel"), exports);
+_export_star(require("./HistogramChart"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/lib/cjs/env.d.js

@@ -0,0 +1,14 @@
+// Copyright 2025 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.
+/// <reference types="@rsbuild/core/types" />
+"use strict";

package/lib/cjs/getPluginModule.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getPluginModule", {
+    enumerable: true,
+    get: function() {
+        return getPluginModule;
+    }
+});
+const _packagejson = /*#__PURE__*/ _interop_require_default(require("../package.json"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getPluginModule() {
+    const { name, version, perses } = _packagejson.default;
+    return {
+        kind: 'PluginModule',
+        metadata: {
+            name,
+            version
+        },
+        spec: perses
+    };
+}

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

@@ -0,0 +1,60 @@
+// Copyright 2025 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DEFAULT_FORMAT: function() {
+        return DEFAULT_FORMAT;
+    },
+    DEFAULT_MAX_PERCENT: function() {
+        return DEFAULT_MAX_PERCENT;
+    },
+    DEFAULT_MAX_PERCENT_DECIMAL: function() {
+        return DEFAULT_MAX_PERCENT_DECIMAL;
+    },
+    DEFAULT_MIN_PERCENT: function() {
+        return DEFAULT_MIN_PERCENT;
+    },
+    DEFAULT_MIN_PERCENT_DECIMAL: function() {
+        return DEFAULT_MIN_PERCENT_DECIMAL;
+    },
+    DEFAULT_THRESHOLDS: function() {
+        return DEFAULT_THRESHOLDS;
+    },
+    createInitialHistogramChartOptions: function() {
+        return createInitialHistogramChartOptions;
+    }
+});
+const DEFAULT_FORMAT = {
+    unit: 'decimal'
+};
+const DEFAULT_THRESHOLDS = {
+    defaultColor: '#56b4e9'
+};
+const DEFAULT_MIN_PERCENT = 0;
+const DEFAULT_MAX_PERCENT = 100;
+const DEFAULT_MIN_PERCENT_DECIMAL = 0;
+const DEFAULT_MAX_PERCENT_DECIMAL = 1;
+function createInitialHistogramChartOptions() {
+    return {
+        format: DEFAULT_FORMAT
+    };
+}

package/lib/cjs/index-federation.js

@@ -0,0 +1,55 @@
+// Copyright 2025 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";
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));