@perses-dev/pie-chart-plugin 0.9.1 → 0.12.0

package/lib/PieChartBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PieChartBase.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 { use } from 'echarts/core';\nimport { PieChart as EChartsPieChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  LegendComponentOption,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { EChart, useChartsTheme } from '@perses-dev/components';\n\nuse([EChartsPieChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PIE_WIN_WIDTH = 12;\nconst PIE_GAP = 4;\nexport interface PieChartData {\n  id?: string;\n  name: string;\n  value: number | null;\n}\n\nexport interface PieChartBaseProps {\n  width: number;\n  height: number;\n  data: PieChartData[] | null;\n  legend?: LegendComponentOption;\n}\n\nexport function PieChartBase(props: PieChartBaseProps): ReactElement {\n  const { width, height, data } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option = {\n    title: {\n      text: 'Referer of a Website',\n      subtext: 'Fake Data',\n      left: 'center',\n    },\n    tooltip: {\n      trigger: 'item',\n      formatter: '{b} : {c} ({d}%)',\n    },\n    axisLabel: {\n      overflow: 'truncate',\n      width: width / 3,\n    },\n    series: [\n      {\n        type: 'pie',\n        radius: '55%',\n        label: false,\n        center: ['40%', '50%'],\n        data: data,\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowOffsetX: 0,\n            shadowColor: 'rgba(0, 0, 0, 0.5)',\n          },\n        },\n      },\n    ],\n    itemStyle: {\n      borderRadius: 2,\n      color: chartsTheme.echartsTheme[0],\n    },\n  };\n\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{ overflow: 'auto' }}\n    >\n      <EChart\n        sx={{\n          minHeight: height,\n          height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["use","PieChart","EChartsPieChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","EChart","useChartsTheme","PIE_WIN_WIDTH","PIE_GAP","PieChartBase","props","width","height","data","chartsTheme","option","title","text","subtext","left","tooltip","trigger","formatter","axisLabel","overflow","series","type","radius","label","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","borderRadius","color","echartsTheme","style","sx","minHeight","length","theme"],"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,QAAQ,eAAe;AACnC,SAASC,YAAYC,eAAe,QAAQ,iBAAiB;AAC7D,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,QAEX,qBAAqB;AAC5B,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,MAAM,EAAEC,cAAc,QAAQ,yBAAyB;AAEhEV,IAAI;IAACE;IAAiBC;IAAeC;IAAkBC;IAAgBC;IAAkBC;CAAe;AAExG,MAAMI,gBAAgB;AACtB,MAAMC,UAAU;AAchB,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IAChC,MAAMI,cAAcR;IAEpB,MAAMS,SAAS;QACbC,OAAO;YACLC,MAAM;YACNC,SAAS;YACTC,MAAM;QACR;QACAC,SAAS;YACPC,SAAS;YACTC,WAAW;QACb;QACAC,WAAW;YACTC,UAAU;YACVb,OAAOA,QAAQ;QACjB;QACAc,QAAQ;YACN;gBACEC,MAAM;gBACNC,QAAQ;gBACRC,OAAO;gBACPC,QAAQ;oBAAC;oBAAO;iBAAM;gBACtBhB,MAAMA;gBACNiB,UAAU;oBACRC,WAAW;wBACTC,YAAY;wBACZC,eAAe;wBACfC,aAAa;oBACf;gBACF;YACF;SACD;QACDH,WAAW;YACTI,cAAc;YACdC,OAAOtB,YAAYuB,YAAY,CAAC,EAAE;QACpC;IACF;IAEA,qBACE,KAACjC;QACCkC,OAAO;YACL3B,OAAOA;YACPC,QAAQA;QACV;QACA2B,IAAI;YAAEf,UAAU;QAAO;kBAEvB,cAAA,KAACnB;YACCkC,IAAI;gBACFC,WAAW5B;gBACXA,QAAQC,OAAOA,KAAK4B,MAAM,GAAIlC,CAAAA,gBAAgBC,OAAM,IAAK;YAC3D;YACAO,QAAQA;YACR2B,OAAO5B,YAAYuB,YAAY;;;AAIvC"}
+{"version":3,"sources":["../../src/PieChartBase.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 { use } from 'echarts/core';\nimport { PieChart as EChartsPieChart } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box, useTheme } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { EChart, useChartsTheme } from '@perses-dev/components';\n\nuse([\n  EChartsPieChart,\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  LegendComponent,\n  CanvasRenderer,\n]);\nexport interface PieChartData {\n  id?: string;\n  name: string;\n  value: number | null;\n}\n\nexport interface PieChartBaseProps {\n  width: number;\n  height: number;\n  data: PieChartData[] | null;\n  showLabels?: boolean;\n}\n\nexport function PieChartBase(props: PieChartBaseProps): ReactElement {\n  const { width, height, data, showLabels } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n\n  const option = {\n    tooltip: {\n      trigger: 'item',\n      formatter: '{b}: {c} ({d}%)',\n      appendTo: document.body,\n      confine: false,\n    },\n    series: [\n      {\n        type: 'pie',\n        radius: '90%',\n        label: {\n          show: Boolean(showLabels),\n          position: 'inner',\n          fontSize: 14,\n          formatter: '{b}\\n{c}',\n          overflow: 'truncate',\n          fontWeight: 'bold',\n        },\n        center: ['50%', '50%'],\n        data: data,\n        emphasis: {\n          itemStyle: {\n            shadowBlur: 10,\n            shadowOffsetX: 0,\n            shadowColor: 'rgba(0, 0, 0, 0.5)',\n          },\n        },\n        itemStyle: {\n          borderRadius: 5,\n          borderColor: muiTheme.palette.background.default,\n          borderWidth: 2,\n        },\n      },\n    ],\n  };\n\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{ overflow: 'auto' }}\n    >\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["use","PieChart","EChartsPieChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","LegendComponent","CanvasRenderer","Box","useTheme","EChart","useChartsTheme","PieChartBase","props","width","height","data","showLabels","chartsTheme","muiTheme","option","tooltip","trigger","formatter","appendTo","document","body","confine","series","type","radius","label","show","Boolean","position","fontSize","overflow","fontWeight","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","borderRadius","borderColor","palette","background","default","borderWidth","style","sx","theme","echartsTheme"],"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,QAAQ,eAAe;AACnC,SAASC,YAAYC,eAAe,QAAQ,iBAAiB;AAC7D,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,cAAc,EAAEC,gBAAgB,EAAEC,eAAe,QAAQ,qBAAqB;AACxH,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAE9C,SAASC,MAAM,EAAEC,cAAc,QAAQ,yBAAyB;AAEhEZ,IAAI;IACFE;IACAC;IACAC;IACAC;IACAC;IACAC;IACAC;CACD;AAcD,OAAO,SAASK,aAAaC,KAAwB;IACnD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAE,GAAGJ;IAC5C,MAAMK,cAAcP;IACpB,MAAMQ,WAAWV;IAEjB,MAAMW,SAAS;QACbC,SAAS;YACPC,SAAS;YACTC,WAAW;YACXC,UAAUC,SAASC,IAAI;YACvBC,SAAS;QACX;QACAC,QAAQ;YACN;gBACEC,MAAM;gBACNC,QAAQ;gBACRC,OAAO;oBACLC,MAAMC,QAAQhB;oBACdiB,UAAU;oBACVC,UAAU;oBACVZ,WAAW;oBACXa,UAAU;oBACVC,YAAY;gBACd;gBACAC,QAAQ;oBAAC;oBAAO;iBAAM;gBACtBtB,MAAMA;gBACNuB,UAAU;oBACRC,WAAW;wBACTC,YAAY;wBACZC,eAAe;wBACfC,aAAa;oBACf;gBACF;gBACAH,WAAW;oBACTI,cAAc;oBACdC,aAAa1B,SAAS2B,OAAO,CAACC,UAAU,CAACC,OAAO;oBAChDC,aAAa;gBACf;YACF;SACD;IACH;IAEA,qBACE,KAACzC;QACC0C,OAAO;YACLpC,OAAOA;YACPC,QAAQA;QACV;QACAoC,IAAI;YAAEf,UAAU;QAAO;kBAEvB,cAAA,KAAC1B;YACCyC,IAAI;gBACFrC,OAAO;gBACPC,QAAQ;YACV;YACAK,QAAQA;YACRgC,OAAOlC,YAAYmC,YAAY;;;AAIvC"}

package/lib/PieChartOptionsEditorSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/PieChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAoCA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAmB,0BAA0B,EAAkB,MAAM,mBAAmB,CAAC;AAEhG,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CA8E7F"}
+{"version":3,"file":"PieChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/PieChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAiDA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAmB,0BAA0B,EAAkB,MAAM,mBAAmB,CAAC;AAEhG,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CA+K7F"}

package/lib/PieChartOptionsEditorSettings.js

@@ -14,9 +14,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import merge from 'lodash/merge';
 import { CalculationSelector, LegendOptionsEditor } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
-import { FormatControls, OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, SortSelector, ModeSelector } from '@perses-dev/components';
+import { FormatControls, OptionsColorPicker, OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, SortSelector, ModeSelector, OptionsEditorControl, useChartsTheme } from '@perses-dev/components';
 import { isPercentUnit } from '@perses-dev/core';
-import { Button } from '@mui/material';
+import { Button, FormControl, InputLabel, MenuItem, Select, Stack, Switch, Typography } from '@mui/material';
+import { useMemo } from 'react';
 import { DEFAULT_FORMAT } from './pie-chart-model';
 export function PieChartOptionsEditorSettings(props) {
     const { onChange, value } = props;
@@ -26,7 +27,6 @@ export function PieChartOptionsEditorSettings(props) {
         }));
     };
     const handleLegendChange = (newLegend)=>{
-        // TODO (sjcobb): fix type, add position, fix glitch
         onChange(produce(value, (draft)=>{
             draft.legend = newLegend;
         }));
@@ -46,8 +46,68 @@ export function PieChartOptionsEditorSettings(props) {
             draft.mode = newMode;
         }));
     };
+    const handleShowLabelsChange = (_, checked)=>{
+        onChange(produce(value, (draft)=>{
+            draft.showLabels = checked;
+        }));
+    };
+    const chartsTheme = useChartsTheme();
+    const themePalette = chartsTheme.echartsTheme.color;
+    const colorPalette = useMemo(()=>{
+        return value.colorPalette || undefined;
+    }, [
+        value.colorPalette
+    ]);
+    const handleColorChange = (color)=>{
+        onChange(produce(value, (draft)=>{
+            if (Array.isArray(color)) {
+                draft.colorPalette = color;
+            } else if (typeof color === 'string') {
+                draft.colorPalette = [
+                    color
+                ];
+            } else {
+                draft.colorPalette = undefined;
+            }
+        }));
+    };
     // ensures decimalPlaces defaults to correct value
     const format = merge({}, DEFAULT_FORMAT, value.format);
+    const colorScheme = useMemo(()=>{
+        return Array.isArray(colorPalette) ? colorPalette.length === 1 ? 'gradient' : 'theme' : 'default';
+    }, [
+        colorPalette
+    ]);
+    const handleColorSchemeChange = (scheme)=>{
+        if (scheme === 'theme') {
+            handleColorChange(themePalette);
+        } else if (scheme === 'default') {
+            handleColorChange();
+        } else {
+            // gradient: keep existing single color if present (user-chosen via OptionsColorPicker)
+            if (Array.isArray(colorPalette) && colorPalette.length === 1) {
+                return;
+            }
+            // initialize with a sensible default so the color picker shows a color
+            handleColorChange([
+                '#ff0000'
+            ]);
+        }
+    };
+    const colorHelpText = useMemo(()=>{
+        if (colorPalette === undefined) {
+            return 'Colors will be automatically assigned using metrics name hash.';
+        }
+        if (Array.isArray(colorPalette) && colorPalette.length > 1) {
+            return 'Colors will be automatically assigned using the current theme color palette.';
+        }
+        if (Array.isArray(colorPalette) && colorPalette.length === 1) {
+            return 'All series will use a gradient based on the selected color.';
+        }
+        return undefined;
+    }, [
+        colorPalette
+    ]);
     return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
         children: [
             /*#__PURE__*/ _jsxs(OptionsEditorColumn, {
@@ -60,6 +120,13 @@ export function PieChartOptionsEditorSettings(props) {
                     /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
                         title: "Misc",
                         children: [
+                            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                                label: "Show Labels",
+                                control: /*#__PURE__*/ _jsx(Switch, {
+                                    checked: Boolean(value.showLabels),
+                                    onChange: handleShowLabelsChange
+                                })
+                            }),
                             /*#__PURE__*/ _jsx(FormatControls, {
                                 value: format,
                                 onChange: handleUnitChange,
@@ -82,21 +149,81 @@ export function PieChartOptionsEditorSettings(props) {
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
-                children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
-                    title: "Reset Settings",
-                    children: /*#__PURE__*/ _jsx(Button, {
-                        variant: "outlined",
-                        color: "secondary",
-                        onClick: ()=>{
-                            onChange(produce(value, (draft)=>{
-                                // reset button removes all optional panel options
-                                draft.legend = undefined;
-                            }));
-                        },
-                        children: "Reset To Defaults"
+            /*#__PURE__*/ _jsxs(OptionsEditorColumn, {
+                children: [
+                    /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                        title: "Colors",
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 2,
+                                    alignItems: "center",
+                                    children: [
+                                        /*#__PURE__*/ _jsxs(FormControl, {
+                                            size: "small",
+                                            sx: {
+                                                minWidth: 150
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ _jsx(InputLabel, {
+                                                    children: "Color Scheme"
+                                                }),
+                                                /*#__PURE__*/ _jsxs(Select, {
+                                                    value: colorScheme,
+                                                    label: "Color Scheme",
+                                                    onChange: (e)=>handleColorSchemeChange(e.target.value),
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "default",
+                                                            children: "Default"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "theme",
+                                                            children: "Theme"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(MenuItem, {
+                                                            value: "gradient",
+                                                            children: "Gradient"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        Array.isArray(colorPalette) && colorPalette.length === 1 && /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                                            label: "Color",
+                                            color: colorPalette?.[0] ?? themePalette[0] ?? '#ff0000',
+                                            onColorChange: (c)=>handleColorChange([
+                                                    c
+                                                ])
+                                        })
+                                    ]
+                                }),
+                                colorHelpText && /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: colorHelpText
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                        title: "Reset Settings",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "outlined",
+                            color: "secondary",
+                            onClick: ()=>{
+                                onChange(produce(value, (draft)=>{
+                                    // reset button removes all optional panel options
+                                    draft.legend = undefined;
+                                    draft.colorPalette = undefined;
+                                }));
+                            },
+                            children: "Reset To Defaults"
+                        })
                     })
-                })
+                ]
             })
         ]
     });

package/lib/PieChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PieChartOptionsEditorSettings.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 merge from 'lodash/merge';\nimport {\n  CalculationSelector,\n  CalculationSelectorProps,\n  LegendOptionsEditor,\n  LegendOptionsEditorProps,\n} from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport {\n  FormatControls,\n  FormatControlsProps,\n  OptionsEditorGroup,\n  OptionsEditorGrid,\n  OptionsEditorColumn,\n  SortSelector,\n  SortSelectorProps,\n  ModeSelector,\n  ModeSelectorProps,\n  ModeOption,\n  SortOption,\n} from '@perses-dev/components';\nimport { CalculationType, isPercentUnit, FormatOptions } from '@perses-dev/core';\nimport { Button } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { PieChartOptions, PieChartOptionsEditorProps, DEFAULT_FORMAT } from './pie-chart-model';\n\nexport function PieChartOptionsEditorSettings(props: PieChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleCalculationChange: CalculationSelectorProps['onChange'] = (newCalculation: CalculationType) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.calculation = newCalculation;\n      })\n    );\n  };\n\n  const handleLegendChange: LegendOptionsEditorProps['onChange'] = (newLegend) => {\n    // TODO (sjcobb): fix type, add position, fix glitch\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.legend = newLegend;\n      })\n    );\n  };\n\n  const handleUnitChange: FormatControlsProps['onChange'] = (newFormat: FormatOptions) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.format = newFormat;\n      })\n    );\n  };\n\n  const handleSortChange: SortSelectorProps['onChange'] = (newSort: SortOption) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.sort = newSort;\n      })\n    );\n  };\n\n  const handleModeChange: ModeSelectorProps['onChange'] = (newMode: ModeOption) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.mode = newMode;\n      })\n    );\n  };\n\n  // ensures decimalPlaces defaults to correct value\n  const format = merge({}, DEFAULT_FORMAT, value.format);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <LegendOptionsEditor calculation=\"comparison\" value={value.legend} onChange={handleLegendChange} />\n        <OptionsEditorGroup title=\"Misc\">\n          <FormatControls value={format} onChange={handleUnitChange} disabled={value.mode === 'percentage'} />\n          <CalculationSelector value={value.calculation} onChange={handleCalculationChange} />\n          <SortSelector value={value.sort} onChange={handleSortChange} />\n          <ModeSelector value={value.mode} onChange={handleModeChange} disablePercentageMode={isPercentUnit(format)} />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button\n            variant=\"outlined\"\n            color=\"secondary\"\n            onClick={() => {\n              onChange(\n                produce(value, (draft: PieChartOptions) => {\n                  // reset button removes all optional panel options\n                  draft.legend = undefined;\n                })\n              );\n            }}\n          >\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["merge","CalculationSelector","LegendOptionsEditor","produce","FormatControls","OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","SortSelector","ModeSelector","isPercentUnit","Button","DEFAULT_FORMAT","PieChartOptionsEditorSettings","props","onChange","value","handleCalculationChange","newCalculation","draft","calculation","handleLegendChange","newLegend","legend","handleUnitChange","newFormat","format","handleSortChange","newSort","sort","handleModeChange","newMode","mode","title","disabled","disablePercentageMode","variant","color","onClick","undefined"],"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,eAAe;AACjC,SACEC,mBAAmB,EAEnBC,mBAAmB,QAEd,4BAA4B;AACnC,SAASC,OAAO,QAAQ,QAAQ;AAChC,SACEC,cAAc,EAEdC,kBAAkB,EAClBC,iBAAiB,EACjBC,mBAAmB,EACnBC,YAAY,EAEZC,YAAY,QAIP,yBAAyB;AAChC,SAA0BC,aAAa,QAAuB,mBAAmB;AACjF,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,SAAsDC,cAAc,QAAQ,oBAAoB;AAEhG,OAAO,SAASC,8BAA8BC,KAAiC;IAC7E,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,0BAAgE,CAACC;QACrEH,SACEZ,QAAQa,OAAO,CAACG;YACdA,MAAMC,WAAW,GAAGF;QACtB;IAEJ;IAEA,MAAMG,qBAA2D,CAACC;QAChE,oDAAoD;QACpDP,SACEZ,QAAQa,OAAO,CAACG;YACdA,MAAMI,MAAM,GAAGD;QACjB;IAEJ;IAEA,MAAME,mBAAoD,CAACC;QACzDV,SACEZ,QAAQa,OAAO,CAACG;YACdA,MAAMO,MAAM,GAAGD;QACjB;IAEJ;IAEA,MAAME,mBAAkD,CAACC;QACvDb,SACEZ,QAAQa,OAAO,CAACG;YACdA,MAAMU,IAAI,GAAGD;QACf;IAEJ;IAEA,MAAME,mBAAkD,CAACC;QACvDhB,SACEZ,QAAQa,OAAO,CAACG;YACdA,MAAMa,IAAI,GAAGD;QACf;IAEJ;IAEA,kDAAkD;IAClD,MAAML,SAAS1B,MAAM,CAAC,GAAGY,gBAAgBI,MAAMU,MAAM;IAErD,qBACE,MAACpB;;0BACC,MAACC;;kCACC,KAACL;wBAAoBkB,aAAY;wBAAaJ,OAAOA,MAAMO,MAAM;wBAAER,UAAUM;;kCAC7E,MAAChB;wBAAmB4B,OAAM;;0CACxB,KAAC7B;gCAAeY,OAAOU;gCAAQX,UAAUS;gCAAkBU,UAAUlB,MAAMgB,IAAI,KAAK;;0CACpF,KAAC/B;gCAAoBe,OAAOA,MAAMI,WAAW;gCAAEL,UAAUE;;0CACzD,KAACT;gCAAaQ,OAAOA,MAAMa,IAAI;gCAAEd,UAAUY;;0CAC3C,KAAClB;gCAAaO,OAAOA,MAAMgB,IAAI;gCAAEjB,UAAUe;gCAAkBK,uBAAuBzB,cAAcgB;;;;;;0BAGtG,KAACnB;0BACC,cAAA,KAACF;oBAAmB4B,OAAM;8BACxB,cAAA,KAACtB;wBACCyB,SAAQ;wBACRC,OAAM;wBACNC,SAAS;4BACPvB,SACEZ,QAAQa,OAAO,CAACG;gCACd,kDAAkD;gCAClDA,MAAMI,MAAM,GAAGgB;4BACjB;wBAEJ;kCACD;;;;;;AAOX"}
+{"version":3,"sources":["../../src/PieChartOptionsEditorSettings.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 merge from 'lodash/merge';\nimport {\n  CalculationSelector,\n  CalculationSelectorProps,\n  LegendOptionsEditor,\n  LegendOptionsEditorProps,\n} from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport {\n  FormatControls,\n  FormatControlsProps,\n  OptionsColorPicker,\n  OptionsEditorGroup,\n  OptionsEditorGrid,\n  OptionsEditorColumn,\n  SortSelector,\n  SortSelectorProps,\n  ModeSelector,\n  ModeSelectorProps,\n  ModeOption,\n  SortOption,\n  OptionsEditorControl,\n  useChartsTheme,\n} from '@perses-dev/components';\nimport { CalculationType, isPercentUnit, FormatOptions } from '@perses-dev/core';\nimport {\n  Button,\n  FormControl,\n  InputLabel,\n  MenuItem,\n  Select,\n  Stack,\n  Switch,\n  SwitchProps,\n  Typography,\n} from '@mui/material';\nimport { ReactElement, useMemo } from 'react';\nimport { PieChartOptions, PieChartOptionsEditorProps, DEFAULT_FORMAT } from './pie-chart-model';\n\nexport function PieChartOptionsEditorSettings(props: PieChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleCalculationChange: CalculationSelectorProps['onChange'] = (newCalculation: CalculationType) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.calculation = newCalculation;\n      })\n    );\n  };\n\n  const handleLegendChange: LegendOptionsEditorProps['onChange'] = (newLegend) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.legend = newLegend;\n      })\n    );\n  };\n\n  const handleUnitChange: FormatControlsProps['onChange'] = (newFormat: FormatOptions) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.format = newFormat;\n      })\n    );\n  };\n\n  const handleSortChange: SortSelectorProps['onChange'] = (newSort: SortOption) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.sort = newSort;\n      })\n    );\n  };\n\n  const handleModeChange: ModeSelectorProps['onChange'] = (newMode: ModeOption) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.mode = newMode;\n      })\n    );\n  };\n\n  const handleShowLabelsChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        draft.showLabels = checked;\n      })\n    );\n  };\n\n  const chartsTheme = useChartsTheme();\n  const themePalette = chartsTheme.echartsTheme.color;\n\n  const colorPalette: string[] | undefined = useMemo(() => {\n    return value.colorPalette || undefined;\n  }, [value.colorPalette]);\n\n  const handleColorChange = (color?: string[]) => {\n    onChange(\n      produce(value, (draft: PieChartOptions) => {\n        if (Array.isArray(color)) {\n          draft.colorPalette = color;\n        } else if (typeof color === 'string') {\n          draft.colorPalette = [color];\n        } else {\n          draft.colorPalette = undefined;\n        }\n      })\n    );\n  };\n\n  // ensures decimalPlaces defaults to correct value\n  const format = merge({}, DEFAULT_FORMAT, value.format);\n\n  type ColorScheme = 'default' | 'theme' | 'gradient';\n\n  const colorScheme: ColorScheme = useMemo(() => {\n    return Array.isArray(colorPalette) ? (colorPalette.length === 1 ? 'gradient' : 'theme') : 'default';\n  }, [colorPalette]);\n\n  const handleColorSchemeChange = (scheme: ColorScheme) => {\n    if (scheme === 'theme') {\n      handleColorChange(themePalette as string[]);\n    } else if (scheme === 'default') {\n      handleColorChange();\n    } else {\n      // gradient: keep existing single color if present (user-chosen via OptionsColorPicker)\n      if (Array.isArray(colorPalette) && colorPalette.length === 1) {\n        return;\n      }\n      // initialize with a sensible default so the color picker shows a color\n      handleColorChange(['#ff0000']);\n    }\n  };\n\n  const colorHelpText = useMemo(() => {\n    if (colorPalette === undefined) {\n      return 'Colors will be automatically assigned using metrics name hash.';\n    }\n    if (Array.isArray(colorPalette) && colorPalette.length > 1) {\n      return 'Colors will be automatically assigned using the current theme color palette.';\n    }\n    if (Array.isArray(colorPalette) && colorPalette.length === 1) {\n      return 'All series will use a gradient based on the selected color.';\n    }\n    return undefined;\n  }, [colorPalette]);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <LegendOptionsEditor calculation=\"comparison\" value={value.legend} onChange={handleLegendChange} />\n        <OptionsEditorGroup title=\"Misc\">\n          <OptionsEditorControl\n            label=\"Show Labels\"\n            control={<Switch checked={Boolean(value.showLabels)} onChange={handleShowLabelsChange} />}\n          />\n          <FormatControls value={format} onChange={handleUnitChange} disabled={value.mode === 'percentage'} />\n          <CalculationSelector value={value.calculation} onChange={handleCalculationChange} />\n          <SortSelector value={value.sort} onChange={handleSortChange} />\n          <ModeSelector value={value.mode} onChange={handleModeChange} disablePercentageMode={isPercentUnit(format)} />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Colors\">\n          <Stack spacing={2}>\n            <Stack direction=\"row\" spacing={2} alignItems=\"center\">\n              <FormControl size=\"small\" sx={{ minWidth: 150 }}>\n                <InputLabel>Color Scheme</InputLabel>\n                <Select\n                  value={colorScheme}\n                  label=\"Color Scheme\"\n                  onChange={(e) => handleColorSchemeChange(e.target.value as ColorScheme)}\n                >\n                  <MenuItem value=\"default\">Default</MenuItem>\n                  <MenuItem value=\"theme\">Theme</MenuItem>\n                  <MenuItem value=\"gradient\">Gradient</MenuItem>\n                </Select>\n              </FormControl>\n              {Array.isArray(colorPalette) && colorPalette.length === 1 && (\n                <OptionsColorPicker\n                  label=\"Color\"\n                  color={colorPalette?.[0] ?? (themePalette as string[])[0] ?? '#ff0000'}\n                  onColorChange={(c: string) => handleColorChange([c])}\n                />\n              )}\n            </Stack>\n            {colorHelpText && (\n              <Typography variant=\"body2\" color=\"text.secondary\">\n                {colorHelpText}\n              </Typography>\n            )}\n          </Stack>\n        </OptionsEditorGroup>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button\n            variant=\"outlined\"\n            color=\"secondary\"\n            onClick={() => {\n              onChange(\n                produce(value, (draft: PieChartOptions) => {\n                  // reset button removes all optional panel options\n                  draft.legend = undefined;\n                  draft.colorPalette = undefined;\n                })\n              );\n            }}\n          >\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["merge","CalculationSelector","LegendOptionsEditor","produce","FormatControls","OptionsColorPicker","OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","SortSelector","ModeSelector","OptionsEditorControl","useChartsTheme","isPercentUnit","Button","FormControl","InputLabel","MenuItem","Select","Stack","Switch","Typography","useMemo","DEFAULT_FORMAT","PieChartOptionsEditorSettings","props","onChange","value","handleCalculationChange","newCalculation","draft","calculation","handleLegendChange","newLegend","legend","handleUnitChange","newFormat","format","handleSortChange","newSort","sort","handleModeChange","newMode","mode","handleShowLabelsChange","_","checked","showLabels","chartsTheme","themePalette","echartsTheme","color","colorPalette","undefined","handleColorChange","Array","isArray","colorScheme","length","handleColorSchemeChange","scheme","colorHelpText","title","label","control","Boolean","disabled","disablePercentageMode","spacing","direction","alignItems","size","sx","minWidth","e","target","onColorChange","c","variant","onClick"],"mappings":"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"}

package/lib/PieChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChartPanel.d.ts","sourceRoot":"","sources":["../../src/PieChartPanel.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAoD,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAuC,UAAU,EAAsB,MAAM,2BAA2B,CAAC;AAEhH,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIpD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CA+K5E"}
+{"version":3,"file":"PieChartPanel.d.ts","sourceRoot":"","sources":["../../src/PieChartPanel.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAoD,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAuC,UAAU,EAAsB,MAAM,2BAA2B,CAAC;AAEhH,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKpD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CA2K5E"}

package/lib/PieChartPanel.js

@@ -11,38 +11,38 @@
 // 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 { Box } from '@mui/material';
 import { ContentWithLegend, useChartsTheme, useId } from '@perses-dev/components';
 import { CalculationsMap, DEFAULT_LEGEND } from '@perses-dev/core';
 import { comparisonLegends, validateLegendSpec } from '@perses-dev/plugin-system';
 import merge from 'lodash/merge';
 import { useMemo, useRef, useState } from 'react';
-import { getSeriesColor } from './palette-gen';
 import { calculatePercentages, sortSeriesData } from './utils';
+import { getSeriesColor } from './colors';
 import { PieChartBase } from './PieChartBase';
 export function PieChartPanel(props) {
-    const { spec: { calculation, sort, mode, legend: pieChartLegend }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, sort, mode, legend: pieChartLegend, colorPalette: colorPalette }, 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 seriesNames = queryResults.flatMap((result)=>result?.data.series?.map((series)=>series.name) || []);
+    // Memoize the color list so it only regenerates when color/palette/series count changes
+    const colorList = useMemo(()=>{
+        return getSeriesColor(seriesNames, colorPalette);
+    }, [
+        colorPalette,
+        seriesNames
+    ]);
     const { pieChartData, legendItems, legendColumns } = useMemo(()=>{
         const calculate = CalculationsMap[calculation];
         const pieChartData = [];
         const legendItems = [];
         const legendColumns = [];
-        for(let queryIndex = 0; queryIndex < queryResults.length; queryIndex++){
-            const result = queryResults[queryIndex];
-            let seriesIndex = 0;
-            for (const seriesData of result?.data.series ?? []){
-                const seriesColor = getSeriesColor({
-                    categoricalPalette: categoricalPalette,
-                    muiPrimaryColor: muiTheme.palette.primary.main,
-                    seriesName: seriesData.name
-                });
-                const seriesId = `${chartId}${seriesData.name}${seriesIndex}`;
-                const series = {
+        queryResults.forEach((result, queryIndex)=>{
+            const series = result?.data.series ?? [];
+            series.forEach((seriesData, seriesIndex)=>{
+                const seriesId = `${chartId}${seriesData.name}${seriesIndex}${queryIndex}`;
+                const seriesColor = colorList[queryIndex * series.length + seriesIndex] ?? '#ff0000';
+                const seriesItem = {
                     id: seriesId,
                     value: calculate(seriesData.values) ?? null,
                     name: seriesData.formattedName ?? '',
@@ -50,17 +50,26 @@ export function PieChartPanel(props) {
                         color: seriesColor
                     }
                 };
-                pieChartData.push(series);
+                pieChartData.push(seriesItem);
                 legendItems.push({
                     id: seriesId,
-                    label: series.name,
+                    label: seriesData.formattedName ?? '',
                     color: seriesColor,
                     data: {}
                 });
-                seriesIndex++;
-            }
-        }
+            });
+        });
         const sortedPieChartData = sortSeriesData(pieChartData, sort);
+        // Reorder legend items to reflect the current sorting order of series
+        const valueById = new Map(sortedPieChartData.map((pd)=>[
+                pd.id ?? pd.name,
+                pd.value ?? 0
+            ]));
+        legendItems.sort((a, b)=>{
+            const av = valueById.get(a.id) ?? 0;
+            const bv = valueById.get(b.id) ?? 0;
+            return sort === 'asc' ? av - bv : bv - av;
+        });
         if (pieChartLegend?.values?.length && pieChartLegend?.mode === 'table') {
             const { values } = pieChartLegend;
             [
@@ -107,8 +116,7 @@ export function PieChartPanel(props) {
         sort,
         mode,
         queryResults,
-        categoricalPalette,
-        muiTheme.palette.primary.main,
+        colorList,
         chartId,
         pieChartLegend
     ]);
@@ -130,7 +138,7 @@ export function PieChartPanel(props) {
     if (!contentDimensions) return null;
     return /*#__PURE__*/ _jsx(Box, {
         sx: {
-            padding: `${PADDING}px`
+            padding: `${contentPadding}px`
         },
         children: /*#__PURE__*/ _jsx(ContentWithLegend, {
             width: adjustedContentDimensions?.width ?? 400,
@@ -166,8 +174,9 @@ export function PieChartPanel(props) {
                     },
                     children: /*#__PURE__*/ _jsx(PieChartBase, {
                         data: pieChartData,
-                        width: contentDimensions.width - PADDING * 2,
-                        height: contentDimensions.height - PADDING * 2
+                        width: width,
+                        height: height,
+                        showLabels: Boolean(props.spec.showLabels)
                     })
                 });
             }

package/lib/PieChartPanel.js.map

@@ -1 +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  SelectedLegendItemState,\n  TableColumnConfig,\n  useChartsTheme,\n  useId,\n} from '@perses-dev/components';\nimport { CalculationType, CalculationsMap, DEFAULT_LEGEND, TimeSeriesData } from '@perses-dev/core';\nimport { comparisonLegends, ComparisonValues, PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { getSeriesColor } from './palette-gen';\nimport { PieChartOptions } from './pie-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\nimport { PieChartBase, PieChartData } from './PieChartBase';\n\nexport type PieChartPanelProps = PanelProps<PieChartOptions, TimeSeriesData>;\n\nexport function PieChartPanel(props: PieChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, sort, mode, legend: pieChartLegend },\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 { pieChartData, legendItems, legendColumns } = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const pieChartData: PieChartData[] = [];\n    const legendItems: LegendItem[] = [];\n    const legendColumns: Array<TableColumnConfig<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        const seriesColor = getSeriesColor({\n          categoricalPalette: categoricalPalette as string[],\n          muiPrimaryColor: muiTheme.palette.primary.main,\n          seriesName: seriesData.name,\n        });\n\n        const seriesId = `${chartId}${seriesData.name}${seriesIndex}`;\n\n        const series = {\n          id: seriesId,\n          value: calculate(seriesData.values) ?? null,\n          name: seriesData.formattedName ?? '',\n          itemStyle: {\n            color: seriesColor,\n          },\n        };\n        pieChartData.push(series);\n\n        legendItems.push({\n          id: seriesId,\n          label: series.name,\n          color: seriesColor,\n          data: {},\n        });\n        seriesIndex++;\n      }\n    }\n\n    const sortedPieChartData = sortSeriesData(pieChartData, sort);\n\n    if (pieChartLegend?.values?.length && pieChartLegend?.mode === 'table') {\n      const { values } = pieChartLegend;\n      [...values].sort().forEach((v) => {\n        /* First, create a column for the current legend value */\n        legendColumns.push({\n          accessorKey: `data.${v}`,\n          header: comparisonLegends[v as ComparisonValues]?.label || v,\n          headerDescription: comparisonLegends[v as ComparisonValues]?.description,\n          width: 90,\n          align: 'right',\n          cellDescription: true,\n          enableSorting: true,\n        });\n        /* Then, settle the legend items related to this legend value */\n        switch (v) {\n          case 'abs':\n            legendItems.forEach((li) => {\n              const { value: itemAbsoluteValue } = pieChartData.find((pd) => li.id === pd.id) || {};\n              if (typeof itemAbsoluteValue === 'number' && li.data) {\n                li.data['abs'] = itemAbsoluteValue;\n              }\n            });\n            break;\n          case 'relative':\n            legendItems.forEach((li) => {\n              const { value: itemPercentageValue } =\n                calculatePercentages(sortedPieChartData).find((ppd) => li.id === ppd.id) || {};\n              if (typeof itemPercentageValue === 'number' && li.data) {\n                li.data['relative'] = `${itemPercentageValue.toFixed(2)}%`;\n              }\n            });\n            break;\n          default:\n            break;\n        }\n      });\n    }\n\n    return {\n      pieChartData: mode === 'percentage' ? calculatePercentages(sortedPieChartData) : sortedPieChartData,\n      legendItems,\n      legendColumns,\n    };\n  }, [\n    calculation,\n    sort,\n    mode,\n    queryResults,\n    categoricalPalette,\n    muiTheme.palette.primary.main,\n    chartId,\n    pieChartLegend,\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) 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: legendColumns,\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              <PieChartBase\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","useChartsTheme","useId","CalculationsMap","DEFAULT_LEGEND","comparisonLegends","validateLegendSpec","merge","useMemo","useRef","useState","getSeriesColor","calculatePercentages","sortSeriesData","PieChartBase","PieChartPanel","props","spec","calculation","sort","mode","legend","pieChartLegend","contentDimensions","queryResults","chartsTheme","muiTheme","PADDING","container","padding","default","chartId","categoricalPalette","echartsTheme","color","pieChartData","legendItems","legendColumns","calculate","queryIndex","length","result","seriesIndex","seriesData","data","series","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","name","seriesId","id","value","values","formattedName","itemStyle","push","label","sortedPieChartData","forEach","v","accessorKey","header","headerDescription","description","width","align","cellDescription","enableSorting","li","itemAbsoluteValue","find","pd","itemPercentageValue","ppd","toFixed","contentPadding","adjustedContentDimensions","height","undefined","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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"}
+{"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 } from '@mui/material';\nimport {\n  ChartInstance,\n  ContentWithLegend,\n  LegendItem,\n  LegendProps,\n  SelectedLegendItemState,\n  TableColumnConfig,\n  useChartsTheme,\n  useId,\n} from '@perses-dev/components';\nimport { CalculationType, CalculationsMap, DEFAULT_LEGEND, TimeSeriesData } from '@perses-dev/core';\nimport { comparisonLegends, ComparisonValues, PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { PieChartOptions } from './pie-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\nimport { getSeriesColor } from './colors';\nimport { PieChartBase, PieChartData } from './PieChartBase';\n\nexport type PieChartPanelProps = PanelProps<PieChartOptions, TimeSeriesData>;\n\nexport function PieChartPanel(props: PieChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, sort, mode, legend: pieChartLegend, colorPalette: colorPalette },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const chartId = useId('time-series-panel');\n  const seriesNames = queryResults.flatMap((result) => result?.data.series?.map((series) => series.name) || []);\n\n  // Memoize the color list so it only regenerates when color/palette/series count changes\n  const colorList = useMemo(() => {\n    return getSeriesColor(seriesNames, colorPalette);\n  }, [colorPalette, seriesNames]);\n\n  const { pieChartData, legendItems, legendColumns } = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const pieChartData: PieChartData[] = [];\n    const legendItems: LegendItem[] = [];\n    const legendColumns: Array<TableColumnConfig<LegendItem>> = [];\n\n    queryResults.forEach((result, queryIndex) => {\n      const series = result?.data.series ?? [];\n\n      series.forEach((seriesData, seriesIndex) => {\n        const seriesId = `${chartId}${seriesData.name}${seriesIndex}${queryIndex}`;\n        const seriesColor = colorList[queryIndex * series.length + seriesIndex] ?? '#ff0000';\n\n        const seriesItem = {\n          id: seriesId,\n          value: calculate(seriesData.values) ?? null,\n          name: seriesData.formattedName ?? '',\n          itemStyle: {\n            color: seriesColor,\n          },\n        };\n\n        pieChartData.push(seriesItem);\n        legendItems.push({\n          id: seriesId,\n          label: seriesData.formattedName ?? '',\n          color: seriesColor,\n          data: {},\n        });\n      });\n    });\n\n    const sortedPieChartData = sortSeriesData(pieChartData, sort);\n\n    // Reorder legend items to reflect the current sorting order of series\n    const valueById = new Map(sortedPieChartData.map((pd) => [pd.id ?? pd.name, pd.value ?? 0]));\n    legendItems.sort((a, b) => {\n      const av = valueById.get(a.id) ?? 0;\n      const bv = valueById.get(b.id) ?? 0;\n      return sort === 'asc' ? av - bv : bv - av;\n    });\n\n    if (pieChartLegend?.values?.length && pieChartLegend?.mode === 'table') {\n      const { values } = pieChartLegend;\n      [...values].sort().forEach((v) => {\n        /* First, create a column for the current legend value */\n        legendColumns.push({\n          accessorKey: `data.${v}`,\n          header: comparisonLegends[v as ComparisonValues]?.label || v,\n          headerDescription: comparisonLegends[v as ComparisonValues]?.description,\n          width: 90,\n          align: 'right',\n          cellDescription: true,\n          enableSorting: true,\n        });\n        /* Then, settle the legend items related to this legend value */\n        switch (v) {\n          case 'abs':\n            legendItems.forEach((li) => {\n              const { value: itemAbsoluteValue } = pieChartData.find((pd) => li.id === pd.id) || {};\n              if (typeof itemAbsoluteValue === 'number' && li.data) {\n                li.data['abs'] = itemAbsoluteValue;\n              }\n            });\n            break;\n          case 'relative':\n            legendItems.forEach((li) => {\n              const { value: itemPercentageValue } =\n                calculatePercentages(sortedPieChartData).find((ppd) => li.id === ppd.id) || {};\n              if (typeof itemPercentageValue === 'number' && li.data) {\n                li.data['relative'] = `${itemPercentageValue.toFixed(2)}%`;\n              }\n            });\n            break;\n          default:\n            break;\n        }\n      });\n    }\n\n    return {\n      pieChartData: mode === 'percentage' ? calculatePercentages(sortedPieChartData) : sortedPieChartData,\n      legendItems,\n      legendColumns,\n    };\n  }, [calculation, sort, mode, queryResults, colorList, chartId, pieChartLegend]);\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) return null;\n\n  return (\n    <Box sx={{ padding: `${contentPadding}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: legendColumns,\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              <PieChartBase\n                data={pieChartData}\n                width={width}\n                height={height}\n                showLabels={Boolean(props.spec.showLabels)}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["Box","ContentWithLegend","useChartsTheme","useId","CalculationsMap","DEFAULT_LEGEND","comparisonLegends","validateLegendSpec","merge","useMemo","useRef","useState","calculatePercentages","sortSeriesData","getSeriesColor","PieChartBase","PieChartPanel","props","spec","calculation","sort","mode","legend","pieChartLegend","colorPalette","contentDimensions","queryResults","chartsTheme","chartId","seriesNames","flatMap","result","data","series","map","name","colorList","pieChartData","legendItems","legendColumns","calculate","forEach","queryIndex","seriesData","seriesIndex","seriesId","seriesColor","length","seriesItem","id","value","values","formattedName","itemStyle","color","push","label","sortedPieChartData","valueById","Map","pd","a","b","av","get","bv","v","accessorKey","header","headerDescription","description","width","align","cellDescription","enableSorting","li","itemAbsoluteValue","find","itemPercentageValue","ppd","toFixed","contentPadding","container","padding","default","adjustedContentDimensions","height","undefined","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","chartRef","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","columns","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style","showLabels","Boolean"],"mappings":"AAAA,mCAAmC;AACnC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAEEC,iBAAiB,EAKjBC,cAAc,EACdC,KAAK,QACA,yBAAyB;AAChC,SAA0BC,eAAe,EAAEC,cAAc,QAAwB,mBAAmB;AACpG,SAASC,iBAAiB,EAAgCC,kBAAkB,QAAQ,4BAA4B;AAChH,OAAOC,WAAW,eAAe;AACjC,SAAuBC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,oBAAoB,EAAEC,cAAc,QAAQ,UAAU;AAC/D,SAASC,cAAc,QAAQ,WAAW;AAC1C,SAASC,YAAY,QAAsB,iBAAiB;AAI5D,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,EAAEC,WAAW,EAAEC,IAAI,EAAEC,IAAI,EAAEC,QAAQC,cAAc,EAAEC,cAAcA,YAAY,EAAE,EACrFC,iBAAiB,EACjBC,YAAY,EACb,GAAGT;IACJ,MAAMU,cAAczB;IACpB,MAAM0B,UAAUzB,MAAM;IACtB,MAAM0B,cAAcH,aAAaI,OAAO,CAAC,CAACC,SAAWA,QAAQC,KAAKC,QAAQC,IAAI,CAACD,SAAWA,OAAOE,IAAI,KAAK,EAAE;IAE5G,wFAAwF;IACxF,MAAMC,YAAY3B,QAAQ;QACxB,OAAOK,eAAee,aAAaL;IACrC,GAAG;QAACA;QAAcK;KAAY;IAE9B,MAAM,EAAEQ,YAAY,EAAEC,WAAW,EAAEC,aAAa,EAAE,GAAG9B,QAAQ;QAC3D,MAAM+B,YAAYpC,eAAe,CAACe,YAA+B;QACjE,MAAMkB,eAA+B,EAAE;QACvC,MAAMC,cAA4B,EAAE;QACpC,MAAMC,gBAAsD,EAAE;QAE9Db,aAAae,OAAO,CAAC,CAACV,QAAQW;YAC5B,MAAMT,SAASF,QAAQC,KAAKC,UAAU,EAAE;YAExCA,OAAOQ,OAAO,CAAC,CAACE,YAAYC;gBAC1B,MAAMC,WAAW,GAAGjB,UAAUe,WAAWR,IAAI,GAAGS,cAAcF,YAAY;gBAC1E,MAAMI,cAAcV,SAAS,CAACM,aAAaT,OAAOc,MAAM,GAAGH,YAAY,IAAI;gBAE3E,MAAMI,aAAa;oBACjBC,IAAIJ;oBACJK,OAAOV,UAAUG,WAAWQ,MAAM,KAAK;oBACvChB,MAAMQ,WAAWS,aAAa,IAAI;oBAClCC,WAAW;wBACTC,OAAOR;oBACT;gBACF;gBAEAT,aAAakB,IAAI,CAACP;gBAClBV,YAAYiB,IAAI,CAAC;oBACfN,IAAIJ;oBACJW,OAAOb,WAAWS,aAAa,IAAI;oBACnCE,OAAOR;oBACPd,MAAM,CAAC;gBACT;YACF;QACF;QAEA,MAAMyB,qBAAqB5C,eAAewB,cAAcjB;QAExD,sEAAsE;QACtE,MAAMsC,YAAY,IAAIC,IAAIF,mBAAmBvB,GAAG,CAAC,CAAC0B,KAAO;gBAACA,GAAGX,EAAE,IAAIW,GAAGzB,IAAI;gBAAEyB,GAAGV,KAAK,IAAI;aAAE;QAC1FZ,YAAYlB,IAAI,CAAC,CAACyC,GAAGC;YACnB,MAAMC,KAAKL,UAAUM,GAAG,CAACH,EAAEZ,EAAE,KAAK;YAClC,MAAMgB,KAAKP,UAAUM,GAAG,CAACF,EAAEb,EAAE,KAAK;YAClC,OAAO7B,SAAS,QAAQ2C,KAAKE,KAAKA,KAAKF;QACzC;QAEA,IAAIxC,gBAAgB4B,QAAQJ,UAAUxB,gBAAgBF,SAAS,SAAS;YACtE,MAAM,EAAE8B,MAAM,EAAE,GAAG5B;YACnB;mBAAI4B;aAAO,CAAC/B,IAAI,GAAGqB,OAAO,CAAC,CAACyB;gBAC1B,uDAAuD,GACvD3B,cAAcgB,IAAI,CAAC;oBACjBY,aAAa,CAAC,KAAK,EAAED,GAAG;oBACxBE,QAAQ9D,iBAAiB,CAAC4D,EAAsB,EAAEV,SAASU;oBAC3DG,mBAAmB/D,iBAAiB,CAAC4D,EAAsB,EAAEI;oBAC7DC,OAAO;oBACPC,OAAO;oBACPC,iBAAiB;oBACjBC,eAAe;gBACjB;gBACA,8DAA8D,GAC9D,OAAQR;oBACN,KAAK;wBACH5B,YAAYG,OAAO,CAAC,CAACkC;4BACnB,MAAM,EAAEzB,OAAO0B,iBAAiB,EAAE,GAAGvC,aAAawC,IAAI,CAAC,CAACjB,KAAOe,GAAG1B,EAAE,KAAKW,GAAGX,EAAE,KAAK,CAAC;4BACpF,IAAI,OAAO2B,sBAAsB,YAAYD,GAAG3C,IAAI,EAAE;gCACpD2C,GAAG3C,IAAI,CAAC,MAAM,GAAG4C;4BACnB;wBACF;wBACA;oBACF,KAAK;wBACHtC,YAAYG,OAAO,CAAC,CAACkC;4BACnB,MAAM,EAAEzB,OAAO4B,mBAAmB,EAAE,GAClClE,qBAAqB6C,oBAAoBoB,IAAI,CAAC,CAACE,MAAQJ,GAAG1B,EAAE,KAAK8B,IAAI9B,EAAE,KAAK,CAAC;4BAC/E,IAAI,OAAO6B,wBAAwB,YAAYH,GAAG3C,IAAI,EAAE;gCACtD2C,GAAG3C,IAAI,CAAC,WAAW,GAAG,GAAG8C,oBAAoBE,OAAO,CAAC,GAAG,CAAC,CAAC;4BAC5D;wBACF;wBACA;oBACF;wBACE;gBACJ;YACF;QACF;QAEA,OAAO;YACL3C,cAAchB,SAAS,eAAeT,qBAAqB6C,sBAAsBA;YACjFnB;YACAC;QACF;IACF,GAAG;QAACpB;QAAaC;QAAMC;QAAMK;QAAcU;QAAWR;QAASL;KAAe;IAE9E,MAAM0D,iBAAiBtD,YAAYuD,SAAS,CAACC,OAAO,CAACC,OAAO;IAC5D,MAAMC,4BAAsD5D,oBACxD;QACE8C,OAAO9C,kBAAkB8C,KAAK,GAAGU,iBAAiB;QAClDK,QAAQ7D,kBAAkB6D,MAAM,GAAGL,iBAAiB;IACtD,IACAM;IAEJ,MAAMjE,SAASb,QAAQ;QACrB,OAAOQ,MAAMC,IAAI,CAACI,MAAM,IAAIf,mBAAmBU,MAAMC,IAAI,CAACI,MAAM,IAC5Dd,MAAM,CAAC,GAAGH,gBAAgBY,MAAMC,IAAI,CAACI,MAAM,IAC3CiE;IACN,GAAG;QAACtE,MAAMC,IAAI,CAACI,MAAM;KAAC;IAEtB,MAAM,CAACkE,qBAAqBC,uBAAuB,GAAG9E,SAAkC;IAExF,MAAM,CAAC+E,eAAeC,iBAAiB,GAAGhF;IAE1C,MAAMiF,WAAWlF,OAAsB;IAEvC,8DAA8D;IAC9D,oDAAoD;IAEpD,IAAI,CAACe,mBAAmB,OAAO;IAE/B,qBACE,KAACzB;QAAI6F,IAAI;YAAEV,SAAS,GAAGF,eAAe,EAAE,CAAC;QAAC;kBACxC,cAAA,KAAChF;YACCsE,OAAOc,2BAA2Bd,SAAS;YAC3Ce,QAAQD,2BAA2BC,UAAU;YAC7C,4DAA4D;YAC5D,gEAAgE;YAChEQ,mBAAmB;YACnBC,YAAYzE,QAAQ0E;YACpBC,aACE3E,UAAU;gBACR4E,SAAS5E;gBACTU,MAAMM;gBACN6D,eAAeX;gBACfY,uBAAuBX;gBACvBY,YAAY;oBACVC,SAAS/D;oBACTgE,SAASb;oBACTc,iBAAiBb;gBACnB;gBACAc,iBAAiB,CAACC,GAAG,EAAEzD,EAAE,EAAE;oBACzB2C,SAASe,OAAO,EAAEC,gBAAgB;wBAAEzE,MAAMc;oBAAG;gBAC/C;gBACA4D,gBAAgB;oBACdjB,SAASe,OAAO,EAAEG;gBACpB;YACF;sBAGD,CAAC,EAAExB,MAAM,EAAEf,KAAK,EAAE;gBACjB,qBACE,KAACvE;oBAAI+G,OAAO;wBAAEzB;wBAAQf;oBAAM;8BAC1B,cAAA,KAACxD;wBACCiB,MAAMK;wBACNkC,OAAOA;wBACPe,QAAQA;wBACR0B,YAAYC,QAAQhG,MAAMC,IAAI,CAAC8F,UAAU;;;YAIjD;;;AAIR"}

package/lib/cjs/PieChartBase.js

@@ -33,34 +33,34 @@ const _components1 = require("@perses-dev/components");
     _components.DatasetComponent,
     _components.TitleComponent,
     _components.TooltipComponent,
+    _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-const PIE_WIN_WIDTH = 12;
-const PIE_GAP = 4;
 function PieChartBase(props) {
-    const { width, height, data } = props;
+    const { width, height, data, showLabels } = props;
     const chartsTheme = (0, _components1.useChartsTheme)();
+    const muiTheme = (0, _material.useTheme)();
     const option = {
-        title: {
-            text: 'Referer of a Website',
-            subtext: 'Fake Data',
-            left: 'center'
-        },
         tooltip: {
             trigger: 'item',
-            formatter: '{b} : {c} ({d}%)'
-        },
-        axisLabel: {
-            overflow: 'truncate',
-            width: width / 3
+            formatter: '{b}: {c} ({d}%)',
+            appendTo: document.body,
+            confine: false
         },
         series: [
             {
                 type: 'pie',
-                radius: '55%',
-                label: false,
+                radius: '90%',
+                label: {
+                    show: Boolean(showLabels),
+                    position: 'inner',
+                    fontSize: 14,
+                    formatter: '{b}\n{c}',
+                    overflow: 'truncate',
+                    fontWeight: 'bold'
+                },
                 center: [
-                    '40%',
+                    '50%',
                     '50%'
                 ],
                 data: data,
@@ -70,13 +70,14 @@ function PieChartBase(props) {
                         shadowOffsetX: 0,
                         shadowColor: 'rgba(0, 0, 0, 0.5)'
                     }
+                },
+                itemStyle: {
+                    borderRadius: 5,
+                    borderColor: muiTheme.palette.background.default,
+                    borderWidth: 2
                 }
             }
-        ],
-        itemStyle: {
-            borderRadius: 2,
-            color: chartsTheme.echartsTheme[0]
-        }
+        ]
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         style: {
@@ -88,8 +89,8 @@ function PieChartBase(props) {
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EChart, {
             sx: {
-                minHeight: height,
-                height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%'
+                width: '100%',
+                height: '100%'
             },
             option: option,
             theme: chartsTheme.echartsTheme