@perses-dev/pie-chart-plugin 0.6.0

package/lib/PieChartPanel.js

@@ -0,0 +1,164 @@
+//Copyright 2024 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, useTheme } from '@mui/material';
+import { ContentWithLegend, PieChart, useChartsTheme, useId } from '@perses-dev/components';
+import { CalculationsMap, DEFAULT_LEGEND } from '@perses-dev/core';
+import { validateLegendSpec } from '@perses-dev/plugin-system';
+import merge from 'lodash/merge';
+import { useMemo, useRef, useState } from 'react';
+import { getSeriesColor } from './palette-gen';
+import { DEFAULT_VISUAL } from './pie-chart-model';
+import { calculatePercentages, sortSeriesData } from './utils';
+export function PieChartPanel(props) {
+    const { spec: { calculation, sort, mode, querySettings: querySettingsList }, contentDimensions, queryResults } = props;
+    const chartsTheme = useChartsTheme();
+    const muiTheme = useTheme();
+    const PADDING = chartsTheme.container.padding.default;
+    const chartId = useId('time-series-panel');
+    const categoricalPalette = chartsTheme.echartsTheme.color;
+    const visual = useMemo(()=>{
+        return merge({}, DEFAULT_VISUAL, props.spec.visual);
+    }, [
+        props.spec.visual
+    ]);
+    const { pieChartData, legendItems } = useMemo(()=>{
+        const calculate = CalculationsMap[calculation];
+        const pieChartData = [];
+        const legendItems = [];
+        for(let queryIndex = 0; queryIndex < queryResults.length; queryIndex++){
+            const result = queryResults[queryIndex];
+            let seriesIndex = 0;
+            for (const seriesData of result?.data.series ?? []){
+                // Retrieve querySettings for this query, if exists.
+                // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute
+                let querySettings;
+                for (const item of querySettingsList ?? []){
+                    if (item.queryIndex === queryIndex) {
+                        querySettings = item;
+                    // We don't break the loop here just in case there are multiple querySettings defined for the
+                    // same queryIndex, because in that case we want the last one to take precedence.
+                    }
+                }
+                const seriesColor = getSeriesColor({
+                    categoricalPalette: categoricalPalette,
+                    visual,
+                    muiPrimaryColor: muiTheme.palette.primary.main,
+                    seriesName: seriesData.name,
+                    seriesIndex,
+                    querySettings: querySettings,
+                    queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1
+                });
+                const series = {
+                    value: calculate(seriesData.values) ?? null,
+                    name: seriesData.formattedName ?? '',
+                    itemStyle: {
+                        color: seriesColor
+                    }
+                };
+                pieChartData.push(series);
+                const seriesId = chartId + seriesData.name + seriesIndex;
+                legendItems.push({
+                    id: seriesId,
+                    label: series.name,
+                    color: seriesColor
+                });
+                seriesIndex++;
+            }
+        }
+        const sortedPieChartData = sortSeriesData(pieChartData, sort);
+        if (mode === 'percentage') {
+            return {
+                pieChartData: calculatePercentages(sortedPieChartData),
+                legendItems
+            };
+        }
+        return {
+            pieChartData: sortedPieChartData,
+            legendItems
+        };
+    }, [
+        calculation,
+        sort,
+        mode,
+        queryResults,
+        categoricalPalette,
+        visual,
+        muiTheme.palette.primary.main,
+        chartId,
+        querySettingsList
+    ]);
+    const contentPadding = chartsTheme.container.padding.default;
+    const adjustedContentDimensions = contentDimensions ? {
+        width: contentDimensions.width - contentPadding * 2,
+        height: contentDimensions.height - contentPadding * 2
+    } : undefined;
+    const legend = useMemo(()=>{
+        return props.spec.legend && validateLegendSpec(props.spec.legend) ? merge({}, DEFAULT_LEGEND, props.spec.legend) : undefined;
+    }, [
+        props.spec.legend
+    ]);
+    const [selectedLegendItems, setSelectedLegendItems] = useState('ALL');
+    const [legendSorting, setLegendSorting] = useState();
+    const chartRef = useRef(null);
+    // ensures there are fallbacks for unset properties since most
+    // users should not need to customize visual display
+    if (contentDimensions === undefined) return null;
+    return /*#__PURE__*/ _jsx(Box, {
+        sx: {
+            padding: `${PADDING}px`
+        },
+        children: /*#__PURE__*/ _jsx(ContentWithLegend, {
+            width: adjustedContentDimensions?.width ?? 400,
+            height: adjustedContentDimensions?.height ?? 1000,
+            // Making this small enough that the medium size doesn't get
+            // responsive-handling-ed away when in the panel options editor.
+            minChildrenHeight: 50,
+            legendSize: legend?.size,
+            legendProps: legend && {
+                options: legend,
+                data: legendItems,
+                selectedItems: selectedLegendItems,
+                onSelectedItemsChange: setSelectedLegendItems,
+                tableProps: {
+                    columns: [],
+                    sorting: legendSorting,
+                    onSortingChange: setLegendSorting
+                },
+                onItemMouseOver: (e, { id })=>{
+                    chartRef.current?.highlightSeries({
+                        name: id
+                    });
+                },
+                onItemMouseOut: ()=>{
+                    chartRef.current?.clearHighlightedSeries();
+                }
+            },
+            children: ({ height, width })=>{
+                return /*#__PURE__*/ _jsx(Box, {
+                    style: {
+                        height,
+                        width
+                    },
+                    children: /*#__PURE__*/ _jsx(PieChart, {
+                        data: pieChartData,
+                        width: contentDimensions.width - PADDING * 2,
+                        height: contentDimensions.height - PADDING * 2
+                    })
+                });
+            }
+        })
+    });
+}
+
+//# sourceMappingURL=PieChartPanel.js.map

package/lib/PieChartPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/PieChartPanel.tsx"],"sourcesContent":["//Copyright 2024 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, useTheme } from '@mui/material';\nimport {\n  ChartInstance,\n  ContentWithLegend,\n  LegendItem,\n  LegendProps,\n  PieChart,\n  PieChartData,\n  SelectedLegendItemState,\n  useChartsTheme,\n  useId,\n} from '@perses-dev/components';\nimport { CalculationType, CalculationsMap, DEFAULT_LEGEND, TimeSeriesData } from '@perses-dev/core';\nimport { PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { QuerySettingsOptions } from './model';\nimport { getSeriesColor } from './palette-gen';\nimport { DEFAULT_VISUAL, PieChartOptions } from './pie-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\n\nexport type PieChartPanelProps = PanelProps<PieChartOptions, TimeSeriesData>;\n\nexport function PieChartPanel(props: PieChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, sort, mode, querySettings: querySettingsList },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n  const PADDING = chartsTheme.container.padding.default;\n  const chartId = useId('time-series-panel');\n  const categoricalPalette = chartsTheme.echartsTheme.color;\n\n  const visual = useMemo(() => {\n    return merge({}, DEFAULT_VISUAL, props.spec.visual);\n  }, [props.spec.visual]);\n\n  const { pieChartData, legendItems } = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const pieChartData: PieChartData[] = [];\n    const legendItems: LegendItem[] = [];\n\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      let seriesIndex = 0;\n      for (const seriesData of result?.data.series ?? []) {\n        // Retrieve querySettings for this query, if exists.\n        // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute\n        let querySettings: QuerySettingsOptions | undefined;\n        for (const item of querySettingsList ?? []) {\n          if (item.queryIndex === queryIndex) {\n            querySettings = item;\n            // We don't break the loop here just in case there are multiple querySettings defined for the\n            // same queryIndex, because in that case we want the last one to take precedence.\n          }\n        }\n        const seriesColor = getSeriesColor({\n          categoricalPalette: categoricalPalette as string[],\n          visual,\n          muiPrimaryColor: muiTheme.palette.primary.main,\n          seriesName: seriesData.name,\n          seriesIndex,\n          querySettings: querySettings,\n          queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1,\n        });\n        const series = {\n          value: calculate(seriesData.values) ?? null,\n          name: seriesData.formattedName ?? '',\n          itemStyle: {\n            color: seriesColor,\n          },\n        };\n        pieChartData.push(series);\n\n        const seriesId = chartId + seriesData.name + seriesIndex;\n        legendItems.push({\n          id: seriesId,\n          label: series.name,\n          color: seriesColor,\n        });\n        seriesIndex++;\n      }\n    }\n\n    const sortedPieChartData = sortSeriesData(pieChartData, sort);\n    if (mode === 'percentage') {\n      return {\n        pieChartData: calculatePercentages(sortedPieChartData),\n        legendItems,\n      };\n    }\n    return {\n      pieChartData: sortedPieChartData,\n      legendItems,\n    };\n  }, [\n    calculation,\n    sort,\n    mode,\n    queryResults,\n    categoricalPalette,\n    visual,\n    muiTheme.palette.primary.main,\n    chartId,\n    querySettingsList,\n  ]);\n\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions?.width ?? 400}\n        height={adjustedContentDimensions?.height ?? 1000}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems,\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: [],\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              <PieChart\n                data={pieChartData}\n                width={contentDimensions.width - PADDING * 2}\n                height={contentDimensions.height - PADDING * 2}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["Box","useTheme","ContentWithLegend","PieChart","useChartsTheme","useId","CalculationsMap","DEFAULT_LEGEND","validateLegendSpec","merge","useMemo","useRef","useState","getSeriesColor","DEFAULT_VISUAL","calculatePercentages","sortSeriesData","PieChartPanel","props","spec","calculation","sort","mode","querySettings","querySettingsList","contentDimensions","queryResults","chartsTheme","muiTheme","PADDING","container","padding","default","chartId","categoricalPalette","echartsTheme","color","visual","pieChartData","legendItems","calculate","queryIndex","length","result","seriesIndex","seriesData","data","series","item","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","name","queryHasMultipleResults","value","values","formattedName","itemStyle","push","seriesId","id","label","sortedPieChartData","contentPadding","adjustedContentDimensions","width","height","undefined","legend","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","chartRef","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","columns","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style"],"mappings":"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"}

package/lib/bootstrap.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=bootstrap.d.ts.map

package/lib/bootstrap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.d.ts","sourceRoot":"","sources":["../../src/bootstrap.tsx"],"names":[],"mappings":""}

package/lib/bootstrap.js

@@ -0,0 +1,19 @@
+// Copyright 2024 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 React from 'react';
+import ReactDOM from 'react-dom/client';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(/*#__PURE__*/ _jsx(React.StrictMode, {}));
+
+//# sourceMappingURL=bootstrap.js.map

package/lib/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"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,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/PieChart.js

@@ -0,0 +1,38 @@
+// Copyright 2024 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, "PieChart", {
+    enumerable: true,
+    get: function() {
+        return PieChart;
+    }
+});
+const _piechartmodel = require("./pie-chart-model");
+const _PieChartOptionsEditorSettings = require("./PieChartOptionsEditorSettings");
+const _PieChartPanel = require("./PieChartPanel");
+const PieChart = {
+    PanelComponent: _PieChartPanel.PieChartPanel,
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: _PieChartOptionsEditorSettings.PieChartOptionsEditorSettings
+        }
+    ],
+    supportedQueryTypes: [
+        'TimeSeriesQuery'
+    ],
+    createInitialOptions: _piechartmodel.createInitialPieChartOptions
+};

package/lib/cjs/PieChartOptionsEditorSettings.js

@@ -0,0 +1,117 @@
+// Copyright 2024 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, "PieChartOptionsEditorSettings", {
+    enumerable: true,
+    get: function() {
+        return PieChartOptionsEditorSettings;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _immer = require("immer");
+const _components = require("@perses-dev/components");
+const _core = require("@perses-dev/core");
+const _material = require("@mui/material");
+const _piechartmodel = require("./pie-chart-model");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PieChartOptionsEditorSettings(props) {
+    const { onChange, value } = props;
+    const handleCalculationChange = (newCalculation)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.calculation = newCalculation;
+        }));
+    };
+    const handleLegendChange = (newLegend)=>{
+        // TODO (sjcobb): fix type, add position, fix glitch
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.legend = newLegend;
+        }));
+    };
+    const handleUnitChange = (newFormat)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.format = newFormat;
+        }));
+    };
+    const handleSortChange = (newSort)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.sort = newSort;
+        }));
+    };
+    const handleModeChange = (newMode)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.mode = newMode;
+        }));
+    };
+    // ensures decimalPlaces defaults to correct value
+    const format = (0, _merge.default)({}, _piechartmodel.DEFAULT_FORMAT, value.format);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGrid, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorColumn, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.LegendOptionsEditor, {
+                        value: value.legend,
+                        onChange: handleLegendChange
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
+                        title: "Misc",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
+                                value: format,
+                                onChange: handleUnitChange,
+                                disabled: value.mode === 'percentage'
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.CalculationSelector, {
+                                value: value.calculation,
+                                onChange: handleCalculationChange
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.SortSelector, {
+                                value: value.sort,
+                                onChange: handleSortChange
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ModeSelector, {
+                                value: value.mode,
+                                onChange: handleModeChange,
+                                disablePercentageMode: (0, _core.isPercentUnit)(format)
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                    title: "Reset Settings",
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                        variant: "outlined",
+                        color: "secondary",
+                        onClick: ()=>{
+                            onChange((0, _immer.produce)(value, (draft)=>{
+                                // reset button removes all optional panel options
+                                draft.legend = undefined;
+                            }));
+                        },
+                        children: "Reset To Defaults"
+                    })
+                })
+            })
+        ]
+    });
+}

package/lib/cjs/PieChartPanel.js

@@ -0,0 +1,177 @@
+//Copyright 2024 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, "PieChartPanel", {
+    enumerable: true,
+    get: function() {
+        return PieChartPanel;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _core = require("@perses-dev/core");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
+const _react = require("react");
+const _palettegen = require("./palette-gen");
+const _piechartmodel = require("./pie-chart-model");
+const _utils = require("./utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function PieChartPanel(props) {
+    const { spec: { calculation, sort, mode, querySettings: querySettingsList }, contentDimensions, queryResults } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const muiTheme = (0, _material.useTheme)();
+    const PADDING = chartsTheme.container.padding.default;
+    const chartId = (0, _components.useId)('time-series-panel');
+    const categoricalPalette = chartsTheme.echartsTheme.color;
+    const visual = (0, _react.useMemo)(()=>{
+        return (0, _merge.default)({}, _piechartmodel.DEFAULT_VISUAL, props.spec.visual);
+    }, [
+        props.spec.visual
+    ]);
+    const { pieChartData, legendItems } = (0, _react.useMemo)(()=>{
+        const calculate = _core.CalculationsMap[calculation];
+        const pieChartData = [];
+        const legendItems = [];
+        for(let queryIndex = 0; queryIndex < queryResults.length; queryIndex++){
+            const result = queryResults[queryIndex];
+            let seriesIndex = 0;
+            for (const seriesData of result?.data.series ?? []){
+                // Retrieve querySettings for this query, if exists.
+                // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute
+                let querySettings;
+                for (const item of querySettingsList ?? []){
+                    if (item.queryIndex === queryIndex) {
+                        querySettings = item;
+                    // We don't break the loop here just in case there are multiple querySettings defined for the
+                    // same queryIndex, because in that case we want the last one to take precedence.
+                    }
+                }
+                const seriesColor = (0, _palettegen.getSeriesColor)({
+                    categoricalPalette: categoricalPalette,
+                    visual,
+                    muiPrimaryColor: muiTheme.palette.primary.main,
+                    seriesName: seriesData.name,
+                    seriesIndex,
+                    querySettings: querySettings,
+                    queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1
+                });
+                const series = {
+                    value: calculate(seriesData.values) ?? null,
+                    name: seriesData.formattedName ?? '',
+                    itemStyle: {
+                        color: seriesColor
+                    }
+                };
+                pieChartData.push(series);
+                const seriesId = chartId + seriesData.name + seriesIndex;
+                legendItems.push({
+                    id: seriesId,
+                    label: series.name,
+                    color: seriesColor
+                });
+                seriesIndex++;
+            }
+        }
+        const sortedPieChartData = (0, _utils.sortSeriesData)(pieChartData, sort);
+        if (mode === 'percentage') {
+            return {
+                pieChartData: (0, _utils.calculatePercentages)(sortedPieChartData),
+                legendItems
+            };
+        }
+        return {
+            pieChartData: sortedPieChartData,
+            legendItems
+        };
+    }, [
+        calculation,
+        sort,
+        mode,
+        queryResults,
+        categoricalPalette,
+        visual,
+        muiTheme.palette.primary.main,
+        chartId,
+        querySettingsList
+    ]);
+    const contentPadding = chartsTheme.container.padding.default;
+    const adjustedContentDimensions = contentDimensions ? {
+        width: contentDimensions.width - contentPadding * 2,
+        height: contentDimensions.height - contentPadding * 2
+    } : undefined;
+    const legend = (0, _react.useMemo)(()=>{
+        return props.spec.legend && (0, _pluginsystem.validateLegendSpec)(props.spec.legend) ? (0, _merge.default)({}, _core.DEFAULT_LEGEND, props.spec.legend) : undefined;
+    }, [
+        props.spec.legend
+    ]);
+    const [selectedLegendItems, setSelectedLegendItems] = (0, _react.useState)('ALL');
+    const [legendSorting, setLegendSorting] = (0, _react.useState)();
+    const chartRef = (0, _react.useRef)(null);
+    // ensures there are fallbacks for unset properties since most
+    // users should not need to customize visual display
+    if (contentDimensions === undefined) return null;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        sx: {
+            padding: `${PADDING}px`
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ContentWithLegend, {
+            width: adjustedContentDimensions?.width ?? 400,
+            height: adjustedContentDimensions?.height ?? 1000,
+            // Making this small enough that the medium size doesn't get
+            // responsive-handling-ed away when in the panel options editor.
+            minChildrenHeight: 50,
+            legendSize: legend?.size,
+            legendProps: legend && {
+                options: legend,
+                data: legendItems,
+                selectedItems: selectedLegendItems,
+                onSelectedItemsChange: setSelectedLegendItems,
+                tableProps: {
+                    columns: [],
+                    sorting: legendSorting,
+                    onSortingChange: setLegendSorting
+                },
+                onItemMouseOver: (e, { id })=>{
+                    chartRef.current?.highlightSeries({
+                        name: id
+                    });
+                },
+                onItemMouseOut: ()=>{
+                    chartRef.current?.clearHighlightedSeries();
+                }
+            },
+            children: ({ height, width })=>{
+                return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    style: {
+                        height,
+                        width
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.PieChart, {
+                        data: pieChartData,
+                        width: contentDimensions.width - PADDING * 2,
+                        height: contentDimensions.height - PADDING * 2
+                    })
+                });
+            }
+        })
+    });
+}

package/lib/cjs/bootstrap.js

@@ -0,0 +1,26 @@
+// Copyright 2024 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/env.d.js

@@ -0,0 +1,14 @@
+// Copyright 2024 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
+    };
+}