@perses-dev/histogram-chart-plugin 0.9.0

package/lib/cjs/index.js

@@ -0,0 +1,47 @@
+// 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, {
+    HistogramChartPanel: function() {
+        return _components.HistogramChartPanel;
+    },
+    getPluginModule: function() {
+        return _getPluginModule.getPluginModule;
+    }
+});
+const _getPluginModule = require("./getPluginModule");
+const _components = require("./components");
+_export_star(require("./histogram-chart-model"), 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/setup-tests.js

@@ -0,0 +1,19 @@
+// 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
+});
+require("@testing-library/jest-dom");
+// Always mock e-charts during tests since we don't have a proper canvas in jsdom
+jest.mock('echarts/core');

package/lib/cjs/utils/index.js

@@ -0,0 +1,30 @@
+// 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("./thresholds"), 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/utils/thresholds.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "getColorFromThresholds", {
+    enumerable: true,
+    get: function() {
+        return getColorFromThresholds;
+    }
+});
+function getColorFromThresholds(value, thresholds, chartsTheme, defaultColor) {
+    if (thresholds?.steps) {
+        const matchingColors = thresholds.steps.map((step, index)=>{
+            if (value >= step.value) {
+                return step.color ?? chartsTheme.thresholds.palette[index] ?? thresholds.defaultColor ?? defaultColor;
+            }
+            return null;
+        }).filter((color)=>color !== null);
+        return matchingColors[matchingColors.length - 1] ?? thresholds.defaultColor ?? defaultColor;
+    }
+    return thresholds?.defaultColor ?? defaultColor;
+}

package/lib/components/HistogramChart.d.ts

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

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

@@ -0,0 +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,CAqG3C"}

package/lib/components/HistogramChart.js

@@ -0,0 +1,146 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { EChart, getFormattedAxis, useChartsTheme } from '@perses-dev/components';
+import { use } from 'echarts/core';
+import { CustomChart } from 'echarts/charts';
+import { getColorFromThresholds } from '../utils';
+use([
+    CustomChart
+]);
+export function HistogramChart({ width, height, data, format, min, max, thresholds }) {
+    const chartsTheme = useChartsTheme();
+    const transformedData = useMemo(()=>{
+        return data.buckets.map(([bucket, lowerBound, upperBound, count])=>{
+            return {
+                value: [
+                    parseFloat(lowerBound),
+                    parseFloat(upperBound),
+                    parseFloat(count),
+                    bucket
+                ],
+                itemStyle: {
+                    color: getColorFromThresholds(parseFloat(lowerBound), thresholds, chartsTheme, chartsTheme.echartsTheme[0])
+                }
+            };
+        });
+    }, [
+        chartsTheme,
+        data.buckets,
+        thresholds
+    ]);
+    const minXAxis = 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 = 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 = useMemo(()=>{
+        if (!transformedData) return chartsTheme.noDataOption;
+        return {
+            title: {
+                show: false
+            },
+            tooltip: {},
+            xAxis: {
+                scale: false,
+                min: minXAxis,
+                max: maxXAxis
+            },
+            yAxis: 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__*/ _jsx(EChart, {
+        sx: {
+            width: width,
+            height: height,
+            padding: `${chartsTheme.container.padding.default}px`
+        },
+        option: option,
+        theme: chartsTheme.echartsTheme
+    });
+}
+
+//# sourceMappingURL=HistogramChart.js.map

package/lib/components/HistogramChart.js.map

@@ -0,0 +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      sx={{\n        width: width,\n        height: height,\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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"}

package/lib/components/HistogramChartOptionsEditorSettings.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { HistogramChartOptionsEditorProps } from '../histogram-chart-model';
+export declare function HistogramChartOptionsEditorSettings(props: HistogramChartOptionsEditorProps): ReactElement;
+//# sourceMappingURL=HistogramChartOptionsEditorSettings.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/HistogramChartOptionsEditorSettings.js

@@ -0,0 +1,107 @@
+// 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.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TextField } from '@mui/material';
+import { FormatControls, OptionsEditorColumn, OptionsEditorControl, OptionsEditorGrid, OptionsEditorGroup, ThresholdsEditor } 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';
+export function HistogramChartOptionsEditorSettings(props) {
+    const { onChange, value } = props;
+    const handleUnitChange = (newFormat)=>{
+        onChange(produce(value, (draft)=>{
+            draft.format = newFormat;
+        }));
+    };
+    const handleThresholdsChange = (thresholds)=>{
+        onChange(produce(value, (draft)=>{
+            draft.thresholds = thresholds;
+        }));
+    };
+    // ensures decimalPlaces defaults to correct value
+    const format = merge({}, DEFAULT_FORMAT, value.format);
+    const thresholds = merge({}, 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 = DEFAULT_MIN_PERCENT.toString();
+    } else if (format.unit === 'percent-decimal') {
+        minPlaceholder = 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 = DEFAULT_MAX_PERCENT.toString();
+    } else if (format.unit === 'percent-decimal') {
+        maxPlaceholder = DEFAULT_MAX_PERCENT_DECIMAL.toString();
+    }
+    return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
+        children: [
+            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+                    title: "Misc",
+                    children: [
+                        /*#__PURE__*/ _jsx(FormatControls, {
+                            value: format,
+                            onChange: handleUnitChange
+                        }),
+                        /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                            label: "Min",
+                            control: /*#__PURE__*/ _jsx(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(produce(value, (draft)=>{
+                                        draft.min = newValue;
+                                    }));
+                                },
+                                placeholder: minPlaceholder,
+                                sx: {
+                                    width: '100%'
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                            label: "Max",
+                            control: /*#__PURE__*/ _jsx(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(produce(value, (draft)=>{
+                                        draft.max = newValue;
+                                    }));
+                                },
+                                placeholder: maxPlaceholder,
+                                sx: {
+                                    width: '100%'
+                                }
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
+                children: /*#__PURE__*/ _jsx(ThresholdsEditor, {
+                    thresholds: thresholds,
+                    onChange: handleThresholdsChange
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=HistogramChartOptionsEditorSettings.js.map

package/lib/components/HistogramChartOptionsEditorSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HistogramChartOptionsEditorSettings.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 { TextField } from '@mui/material';\nimport {\n  FormatControls,\n  FormatControlsProps,\n  OptionsEditorColumn,\n  OptionsEditorControl,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  ThresholdsEditor,\n  ThresholdsEditorProps,\n} from '@perses-dev/components';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport { ReactElement } from 'react';\nimport {\n  DEFAULT_FORMAT,\n  DEFAULT_MAX_PERCENT,\n  DEFAULT_MAX_PERCENT_DECIMAL,\n  DEFAULT_MIN_PERCENT,\n  DEFAULT_MIN_PERCENT_DECIMAL,\n  DEFAULT_THRESHOLDS,\n  HistogramChartOptions,\n  HistogramChartOptionsEditorProps,\n} from '../histogram-chart-model';\n\nexport function HistogramChartOptionsEditorSettings(props: HistogramChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleUnitChange: FormatControlsProps['onChange'] = (newFormat) => {\n    onChange(\n      produce(value, (draft: HistogramChartOptions) => {\n        draft.format = newFormat;\n      })\n    );\n  };\n\n  const handleThresholdsChange: ThresholdsEditorProps['onChange'] = (thresholds) => {\n    onChange(\n      produce(value, (draft: HistogramChartOptions) => {\n        draft.thresholds = thresholds;\n      })\n    );\n  };\n\n  // ensures decimalPlaces defaults to correct value\n  const format = merge({}, DEFAULT_FORMAT, value.format);\n  const thresholds = merge({}, DEFAULT_THRESHOLDS, value.thresholds);\n\n  // max only needs to be set explicitly for units other than percent and percent-decimal\n  let minPlaceholder = 'Enter value';\n  if (format.unit === 'percent') {\n    minPlaceholder = DEFAULT_MIN_PERCENT.toString();\n  } else if (format.unit === 'percent-decimal') {\n    minPlaceholder = DEFAULT_MIN_PERCENT_DECIMAL.toString();\n  }\n\n  // max only needs to be set explicitly for units other than percent and percent-decimal\n  let maxPlaceholder = 'Enter value';\n  if (format.unit === 'percent') {\n    maxPlaceholder = DEFAULT_MAX_PERCENT.toString();\n  } else if (format.unit === 'percent-decimal') {\n    maxPlaceholder = DEFAULT_MAX_PERCENT_DECIMAL.toString();\n  }\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Misc\">\n          <FormatControls value={format} onChange={handleUnitChange} />\n          <OptionsEditorControl\n            label=\"Min\"\n            control={\n              <TextField\n                type=\"number\"\n                value={value.min ?? ''}\n                onChange={(e) => {\n                  // ensure empty value resets to undef to allow chart to calculate max\n                  const newValue = e.target.value ? Number(e.target.value) : undefined;\n                  onChange(\n                    produce(value, (draft: HistogramChartOptions) => {\n                      draft.min = newValue;\n                    })\n                  );\n                }}\n                placeholder={minPlaceholder}\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                  // ensure empty value resets to undef to allow chart to calculate max\n                  const newValue = e.target.value ? Number(e.target.value) : undefined;\n                  onChange(\n                    produce(value, (draft: HistogramChartOptions) => {\n                      draft.max = newValue;\n                    })\n                  );\n                }}\n                placeholder={maxPlaceholder}\n                sx={{ width: '100%' }}\n              />\n            }\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <ThresholdsEditor thresholds={thresholds} onChange={handleThresholdsChange} />\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["TextField","FormatControls","OptionsEditorColumn","OptionsEditorControl","OptionsEditorGrid","OptionsEditorGroup","ThresholdsEditor","produce","merge","DEFAULT_FORMAT","DEFAULT_MAX_PERCENT","DEFAULT_MAX_PERCENT_DECIMAL","DEFAULT_MIN_PERCENT","DEFAULT_MIN_PERCENT_DECIMAL","DEFAULT_THRESHOLDS","HistogramChartOptionsEditorSettings","props","onChange","value","handleUnitChange","newFormat","draft","format","handleThresholdsChange","thresholds","minPlaceholder","unit","toString","maxPlaceholder","title","label","control","type","min","e","newValue","target","Number","undefined","placeholder","sx","width","max"],"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,SAAS,QAAQ,gBAAgB;AAC1C,SACEC,cAAc,EAEdC,mBAAmB,EACnBC,oBAAoB,EACpBC,iBAAiB,EACjBC,kBAAkB,EAClBC,gBAAgB,QAEX,yBAAyB;AAChC,SAASC,OAAO,QAAQ,QAAQ;AAChC,OAAOC,WAAW,eAAe;AAEjC,SACEC,cAAc,EACdC,mBAAmB,EACnBC,2BAA2B,EAC3BC,mBAAmB,EACnBC,2BAA2B,EAC3BC,kBAAkB,QAGb,2BAA2B;AAElC,OAAO,SAASC,oCAAoCC,KAAuC;IACzF,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,mBAAoD,CAACC;QACzDH,SACEV,QAAQW,OAAO,CAACG;YACdA,MAAMC,MAAM,GAAGF;QACjB;IAEJ;IAEA,MAAMG,yBAA4D,CAACC;QACjEP,SACEV,QAAQW,OAAO,CAACG;YACdA,MAAMG,UAAU,GAAGA;QACrB;IAEJ;IAEA,kDAAkD;IAClD,MAAMF,SAASd,MAAM,CAAC,GAAGC,gBAAgBS,MAAMI,MAAM;IACrD,MAAME,aAAahB,MAAM,CAAC,GAAGM,oBAAoBI,MAAMM,UAAU;IAEjE,uFAAuF;IACvF,IAAIC,iBAAiB;IACrB,IAAIH,OAAOI,IAAI,KAAK,WAAW;QAC7BD,iBAAiBb,oBAAoBe,QAAQ;IAC/C,OAAO,IAAIL,OAAOI,IAAI,KAAK,mBAAmB;QAC5CD,iBAAiBZ,4BAA4Bc,QAAQ;IACvD;IAEA,uFAAuF;IACvF,IAAIC,iBAAiB;IACrB,IAAIN,OAAOI,IAAI,KAAK,WAAW;QAC7BE,iBAAiBlB,oBAAoBiB,QAAQ;IAC/C,OAAO,IAAIL,OAAOI,IAAI,KAAK,mBAAmB;QAC5CE,iBAAiBjB,4BAA4BgB,QAAQ;IACvD;IAEA,qBACE,MAACvB;;0BACC,KAACF;0BACC,cAAA,MAACG;oBAAmBwB,OAAM;;sCACxB,KAAC5B;4BAAeiB,OAAOI;4BAAQL,UAAUE;;sCACzC,KAAChB;4BACC2B,OAAM;4BACNC,uBACE,KAAC/B;gCACCgC,MAAK;gCACLd,OAAOA,MAAMe,GAAG,IAAI;gCACpBhB,UAAU,CAACiB;oCACT,qEAAqE;oCACrE,MAAMC,WAAWD,EAAEE,MAAM,CAAClB,KAAK,GAAGmB,OAAOH,EAAEE,MAAM,CAAClB,KAAK,IAAIoB;oCAC3DrB,SACEV,QAAQW,OAAO,CAACG;wCACdA,MAAMY,GAAG,GAAGE;oCACd;gCAEJ;gCACAI,aAAad;gCACbe,IAAI;oCAAEC,OAAO;gCAAO;;;sCAI1B,KAACtC;4BACC2B,OAAM;4BACNC,uBACE,KAAC/B;gCACCgC,MAAK;gCACLd,OAAOA,MAAMwB,GAAG,IAAI;gCACpBzB,UAAU,CAACiB;oCACT,qEAAqE;oCACrE,MAAMC,WAAWD,EAAEE,MAAM,CAAClB,KAAK,GAAGmB,OAAOH,EAAEE,MAAM,CAAClB,KAAK,IAAIoB;oCAC3DrB,SACEV,QAAQW,OAAO,CAACG;wCACdA,MAAMqB,GAAG,GAAGP;oCACd;gCAEJ;gCACAI,aAAaX;gCACbY,IAAI;oCAAEC,OAAO;gCAAO;;;;;;0BAM9B,KAACvC;0BACC,cAAA,KAACI;oBAAiBkB,YAAYA;oBAAYP,UAAUM;;;;;AAI5D"}

package/lib/components/HistogramChartPanel.d.ts

@@ -0,0 +1,7 @@
+import { TimeSeriesData } from '@perses-dev/core';
+import { PanelProps } from '@perses-dev/plugin-system';
+import { ReactElement } from 'react';
+import { HistogramChartOptions } from '../histogram-chart-model';
+export type HistogramChartPanelProps = PanelProps<HistogramChartOptions, TimeSeriesData>;
+export declare function HistogramChartPanel(props: HistogramChartPanelProps): ReactElement | null;
+//# sourceMappingURL=HistogramChartPanel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HistogramChartPanel.d.ts","sourceRoot":"","sources":["../../../src/components/HistogramChartPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAEvD,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAsC,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAKrG,MAAM,MAAM,wBAAwB,GAAG,UAAU,CAAC,qBAAqB,EAAE,cAAc,CAAC,CAAC;AAEzF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,GAAG,YAAY,GAAG,IAAI,CA0ExF"}

package/lib/components/HistogramChartPanel.js

@@ -0,0 +1,90 @@
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box, Stack, Typography } from '@mui/material';
+import merge from 'lodash/merge';
+import { useMemo } from 'react';
+import { useChartsTheme } from '@perses-dev/components';
+import { DEFAULT_FORMAT, DEFAULT_THRESHOLDS } from '../histogram-chart-model';
+import { HistogramChart } from './HistogramChart';
+const HISTOGRAM_MIN_WIDTH = 90;
+export function HistogramChartPanel(props) {
+    const { spec: pluginSpec, contentDimensions, queryResults } = props;
+    const { min, max } = pluginSpec;
+    const chartsTheme = useChartsTheme();
+    // ensures all default format properties set if undef
+    const format = merge({}, DEFAULT_FORMAT, pluginSpec.format);
+    const thresholds = merge({}, DEFAULT_THRESHOLDS, pluginSpec.thresholds);
+    const histogramData = 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__*/ _jsx(Stack, {
+            justifyContent: "center",
+            height: "100%",
+            children: /*#__PURE__*/ _jsx(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__*/ _jsx(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__*/ _jsx(Box, {
+                children: /*#__PURE__*/ _jsx(HistogramChart, {
+                    width: chartWidth,
+                    height: contentDimensions.height,
+                    data: series,
+                    format: format,
+                    min: min,
+                    max: max,
+                    thresholds: thresholds
+                })
+            }, `histogram-series-${seriesIndex}`);
+        })
+    });
+}
+
+//# sourceMappingURL=HistogramChartPanel.js.map

package/lib/components/HistogramChartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HistogramChartPanel.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 { Box, Stack, Typography } from '@mui/material';\nimport { TimeSeriesData } from '@perses-dev/core';\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo } from 'react';\nimport { useChartsTheme } from '@perses-dev/components';\nimport { DEFAULT_FORMAT, DEFAULT_THRESHOLDS, HistogramChartOptions } from '../histogram-chart-model';\nimport { HistogramChart, HistogramChartData } from './HistogramChart';\n\nconst HISTOGRAM_MIN_WIDTH = 90;\n\nexport type HistogramChartPanelProps = PanelProps<HistogramChartOptions, TimeSeriesData>;\n\nexport function HistogramChartPanel(props: HistogramChartPanelProps): ReactElement | null {\n  const { spec: pluginSpec, contentDimensions, queryResults } = props;\n  const { min, max } = pluginSpec;\n\n  const chartsTheme = useChartsTheme();\n  // ensures all default format properties set if undef\n  const format = merge({}, DEFAULT_FORMAT, pluginSpec.format);\n  const thresholds = merge({}, DEFAULT_THRESHOLDS, pluginSpec.thresholds);\n\n  const histogramData: HistogramChartData[] = useMemo(() => {\n    const histograms: HistogramChartData[] = [];\n\n    for (const result of queryResults) {\n      for (const timeSeries of result.data.series) {\n        if (!timeSeries.histograms || timeSeries.histograms.length === 0) {\n          continue;\n        }\n\n        const [, histoBuckets] = timeSeries.histograms[0]!;\n        if (histoBuckets && histoBuckets.buckets) {\n          histograms.push({ buckets: histoBuckets.buckets });\n        }\n      }\n    }\n    return histograms;\n  }, [queryResults]);\n\n  // no data message handled inside chart component\n  if (histogramData.length === 0) {\n    return (\n      <Stack justifyContent=\"center\" height=\"100%\">\n        <Typography variant=\"body2\" textAlign=\"center\">\n          No data available (only native histograms are supported for now)\n        </Typography>\n      </Stack>\n    );\n  }\n\n  if (contentDimensions === undefined) return null;\n\n  // accounts for showing a separate chart for each time series\n  let chartWidth = contentDimensions.width / histogramData.length - chartsTheme.container.padding.default;\n  if (chartWidth < HISTOGRAM_MIN_WIDTH && histogramData.length > 1) {\n    // enables horizontal scroll when charts overflow outside of panel\n    chartWidth = HISTOGRAM_MIN_WIDTH;\n  }\n\n  return (\n    <Stack\n      direction=\"row\"\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      sx={{\n        // so scrollbar only shows when necessary\n        overflowX: histogramData.length > 1 ? 'scroll' : 'auto',\n      }}\n    >\n      {histogramData.map((series, seriesIndex) => {\n        return (\n          <Box key={`histogram-series-${seriesIndex}`}>\n            <HistogramChart\n              width={chartWidth}\n              height={contentDimensions.height}\n              data={series}\n              format={format}\n              min={min}\n              max={max}\n              thresholds={thresholds}\n            />\n          </Box>\n        );\n      })}\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","Typography","merge","useMemo","useChartsTheme","DEFAULT_FORMAT","DEFAULT_THRESHOLDS","HistogramChart","HISTOGRAM_MIN_WIDTH","HistogramChartPanel","props","spec","pluginSpec","contentDimensions","queryResults","min","max","chartsTheme","format","thresholds","histogramData","histograms","result","timeSeries","data","series","length","histoBuckets","buckets","push","justifyContent","height","variant","textAlign","undefined","chartWidth","width","container","padding","default","direction","alignItems","sx","overflowX","map","seriesIndex"],"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,GAAG,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAGvD,OAAOC,WAAW,eAAe;AACjC,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAASC,cAAc,QAAQ,yBAAyB;AACxD,SAASC,cAAc,EAAEC,kBAAkB,QAA+B,2BAA2B;AACrG,SAASC,cAAc,QAA4B,mBAAmB;AAEtE,MAAMC,sBAAsB;AAI5B,OAAO,SAASC,oBAAoBC,KAA+B;IACjE,MAAM,EAAEC,MAAMC,UAAU,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGJ;IAC9D,MAAM,EAAEK,GAAG,EAAEC,GAAG,EAAE,GAAGJ;IAErB,MAAMK,cAAcb;IACpB,qDAAqD;IACrD,MAAMc,SAAShB,MAAM,CAAC,GAAGG,gBAAgBO,WAAWM,MAAM;IAC1D,MAAMC,aAAajB,MAAM,CAAC,GAAGI,oBAAoBM,WAAWO,UAAU;IAEtE,MAAMC,gBAAsCjB,QAAQ;QAClD,MAAMkB,aAAmC,EAAE;QAE3C,KAAK,MAAMC,UAAUR,aAAc;YACjC,KAAK,MAAMS,cAAcD,OAAOE,IAAI,CAACC,MAAM,CAAE;gBAC3C,IAAI,CAACF,WAAWF,UAAU,IAAIE,WAAWF,UAAU,CAACK,MAAM,KAAK,GAAG;oBAChE;gBACF;gBAEA,MAAM,GAAGC,aAAa,GAAGJ,WAAWF,UAAU,CAAC,EAAE;gBACjD,IAAIM,gBAAgBA,aAAaC,OAAO,EAAE;oBACxCP,WAAWQ,IAAI,CAAC;wBAAED,SAASD,aAAaC,OAAO;oBAAC;gBAClD;YACF;QACF;QACA,OAAOP;IACT,GAAG;QAACP;KAAa;IAEjB,iDAAiD;IACjD,IAAIM,cAAcM,MAAM,KAAK,GAAG;QAC9B,qBACE,KAAC1B;YAAM8B,gBAAe;YAASC,QAAO;sBACpC,cAAA,KAAC9B;gBAAW+B,SAAQ;gBAAQC,WAAU;0BAAS;;;IAKrD;IAEA,IAAIpB,sBAAsBqB,WAAW,OAAO;IAE5C,6DAA6D;IAC7D,IAAIC,aAAatB,kBAAkBuB,KAAK,GAAGhB,cAAcM,MAAM,GAAGT,YAAYoB,SAAS,CAACC,OAAO,CAACC,OAAO;IACvG,IAAIJ,aAAa3B,uBAAuBY,cAAcM,MAAM,GAAG,GAAG;QAChE,kEAAkE;QAClES,aAAa3B;IACf;IAEA,qBACE,KAACR;QACCwC,WAAU;QACVV,gBAAe;QACfW,YAAW;QACXC,IAAI;YACF,yCAAyC;YACzCC,WAAWvB,cAAcM,MAAM,GAAG,IAAI,WAAW;QACnD;kBAECN,cAAcwB,GAAG,CAAC,CAACnB,QAAQoB;YAC1B,qBACE,KAAC9C;0BACC,cAAA,KAACQ;oBACC6B,OAAOD;oBACPJ,QAAQlB,kBAAkBkB,MAAM;oBAChCP,MAAMC;oBACNP,QAAQA;oBACRH,KAAKA;oBACLC,KAAKA;oBACLG,YAAYA;;eARN,CAAC,iBAAiB,EAAE0B,aAAa;QAY/C;;AAGN"}

package/lib/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './HistogramChartOptionsEditorSettings';
+export * from './HistogramChartPanel';
+export * from './HistogramChart';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,uCAAuC,CAAC;AACtD,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC"}

package/lib/components/index.js

@@ -0,0 +1,17 @@
+// 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.
+export * from './HistogramChartOptionsEditorSettings';
+export * from './HistogramChartPanel';
+export * from './HistogramChart';
+
+//# sourceMappingURL=index.js.map

package/lib/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/index.ts"],"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\nexport * from './HistogramChartOptionsEditorSettings';\nexport * from './HistogramChartPanel';\nexport * from './HistogramChart';\n"],"names":[],"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,cAAc,wCAAwC;AACtD,cAAc,wBAAwB;AACtC,cAAc,mBAAmB"}

package/lib/env.d.js

@@ -0,0 +1,15 @@
+// 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" />
+
+//# sourceMappingURL=env.d.js.map

package/lib/env.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/env.d.ts"],"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\n/// <reference types=\"@rsbuild/core/types\" />\n"],"names":[],"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,6CAA6C"}

package/lib/getPluginModule.d.ts

@@ -0,0 +1,6 @@
+import { PluginModuleResource } from '@perses-dev/plugin-system';
+/**
+ * Returns the plugin module information from package.json
+ */
+export declare function getPluginModule(): PluginModuleResource;
+//# sourceMappingURL=getPluginModule.d.ts.map

package/lib/getPluginModule.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"getPluginModule.d.ts","sourceRoot":"","sources":["../../src/getPluginModule.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,2BAA2B,CAAC;AAGnF;;GAEG;AACH,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}