@perses-dev/pie-chart-plugin 0.13.0 → 0.14.0-beta.0

package/lib/PieChartBase.js

@@ -13,10 +13,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // limitations under the License.
 import { use } from 'echarts/core';
 import { PieChart as EChartsPieChart } from 'echarts/charts';
-import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
+import { DatasetComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components';
 import { CanvasRenderer } from 'echarts/renderers';
 import { Box, useTheme } from '@mui/material';
 import { EChart, useChartsTheme } from '@perses-dev/components';
+import { getLabelFormatter, getTooltipFormatter } from './utils';
 use([
     EChartsPieChart,
     GridComponent,
@@ -27,13 +28,13 @@ use([
     CanvasRenderer
 ]);
 export function PieChartBase(props) {
-    const { width, height, data, showLabels } = props;
+    const { width, height, data, mode, formatOptions, showLabels } = props;
     const chartsTheme = useChartsTheme();
     const muiTheme = useTheme();
     const option = {
         tooltip: {
             trigger: 'item',
-            formatter: '{b}: {c} ({d}%)',
+            formatter: getTooltipFormatter(formatOptions),
             appendTo: document.body,
             confine: false
         },
@@ -45,7 +46,7 @@ export function PieChartBase(props) {
                     show: Boolean(showLabels),
                     position: 'inner',
                     fontSize: 14,
-                    formatter: '{b}\n{c}',
+                    formatter: getLabelFormatter(mode, formatOptions),
                     overflow: 'truncate',
                     fontWeight: 'bold'
                 },

package/lib/PieChartBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PieChartBase.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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,+BAA+B;AAC/B,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"}
+{"version":3,"sources":["../../src/PieChartBase.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { use } from 'echarts/core';\nimport { PieChart as EChartsPieChart } from 'echarts/charts';\nimport { DatasetComponent, GridComponent, LegendComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box, useTheme } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { EChart, FormatOptions, ModeOption, useChartsTheme } from '@perses-dev/components';\nimport { getLabelFormatter, getTooltipFormatter } from './utils';\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  itemStyle?: {\n    color: string;\n  };\n}\n\nexport interface PieChartBaseProps {\n  width: number;\n  height: number;\n  data: PieChartData[] | null;\n  mode?: ModeOption;\n  showLabels?: boolean;\n  formatOptions?: FormatOptions;\n}\n\nexport function PieChartBase(props: PieChartBaseProps): ReactElement {\n  const { width, height, data, mode, formatOptions, showLabels } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n\n  const option = {\n    tooltip: {\n      trigger: 'item',\n      formatter: getTooltipFormatter(formatOptions),\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: getLabelFormatter(mode, formatOptions),\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","DatasetComponent","GridComponent","LegendComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","useTheme","EChart","useChartsTheme","getLabelFormatter","getTooltipFormatter","PieChartBase","props","width","height","data","mode","formatOptions","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,+BAA+B;AAC/B,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,gBAAgB,EAAEC,aAAa,EAAEC,eAAe,EAAEC,cAAc,EAAEC,gBAAgB,QAAQ,qBAAqB;AACxH,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAE9C,SAASC,MAAM,EAA6BC,cAAc,QAAQ,yBAAyB;AAC3F,SAASC,iBAAiB,EAAEC,mBAAmB,QAAQ,UAAU;AAEjEd,IAAI;IACFE;IACAE;IACAD;IACAG;IACAC;IACAF;IACAG;CACD;AAmBD,OAAO,SAASO,aAAaC,KAAwB;IACnD,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,aAAa,EAAEC,UAAU,EAAE,GAAGN;IACjE,MAAMO,cAAcX;IACpB,MAAMY,WAAWd;IAEjB,MAAMe,SAAS;QACbC,SAAS;YACPC,SAAS;YACTC,WAAWd,oBAAoBO;YAC/BQ,UAAUC,SAASC,IAAI;YACvBC,SAAS;QACX;QACAC,QAAQ;YACN;gBACEC,MAAM;gBACNC,QAAQ;gBACRC,OAAO;oBACLC,MAAMC,QAAQhB;oBACdiB,UAAU;oBACVC,UAAU;oBACVZ,WAAWf,kBAAkBO,MAAMC;oBACnCoB,UAAU;oBACVC,YAAY;gBACd;gBACAC,QAAQ;oBAAC;oBAAO;iBAAM;gBACtBxB,MAAMA;gBACNyB,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,KAAC7C;QACC8C,OAAO;YACLtC,OAAOA;YACPC,QAAQA;QACV;QACAsC,IAAI;YAAEf,UAAU;QAAO;kBAEvB,cAAA,KAAC9B;YACC6C,IAAI;gBACFvC,OAAO;gBACPC,QAAQ;YACV;YACAO,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":"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"}
+{"version":3,"file":"PieChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/PieChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAmDA,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,8 +14,7 @@ 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, OptionsColorPicker, OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, SortSelector, ModeSelector, OptionsEditorControl, useChartsTheme } from '@perses-dev/components';
-import { isPercentUnit } from '@perses-dev/core';
+import { FormatControls, OptionsColorPicker, OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, SortSelector, ModeSelector, OptionsEditorControl, useChartsTheme, isPercentUnit } from '@perses-dev/components';
 import { Button, FormControl, InputLabel, MenuItem, Select, Stack, Switch, Typography } from '@mui/material';
 import { useMemo } from 'react';
 import { DEFAULT_FORMAT } from './pie-chart-model';

package/lib/PieChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PieChartOptionsEditorSettings.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport 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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"}
+{"version":3,"sources":["../../src/PieChartOptionsEditorSettings.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport merge from 'lodash/merge';\nimport {\n  CalculationSelector,\n  CalculationSelectorProps,\n  CalculationType,\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  FormatOptions,\n  isPercentUnit,\n} from '@perses-dev/components';\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[]): void => {\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): void => {\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

@@ -1,6 +1,6 @@
-import { TimeSeriesData } from '@perses-dev/core';
 import { PanelProps } from '@perses-dev/plugin-system';
 import { ReactElement } from 'react';
+import { TimeSeriesData } from '@perses-dev/spec';
 import { PieChartOptions } from './pie-chart-model';
 export type PieChartPanelProps = PanelProps<PieChartOptions, TimeSeriesData>;
 export declare function PieChartPanel(props: PieChartPanelProps): ReactElement | null;

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;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"}
+{"version":3,"file":"PieChartPanel.d.ts","sourceRoot":"","sources":["../../src/PieChartPanel.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAoC,UAAU,EAAsB,MAAM,2BAA2B,CAAC;AAE7G,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,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,CA4H5E"}

package/lib/PieChartPanel.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-//Copyright 2024 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -12,16 +12,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // See the License for the specific language governing permissions and
 // limitations under the License.
 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 { ContentWithLegend, DEFAULT_LEGEND, useChartsTheme, useId } from '@perses-dev/components';
+import { CalculationsMap, validateLegendSpec } from '@perses-dev/plugin-system';
 import merge from 'lodash/merge';
 import { useMemo, useRef, useState } from 'react';
-import { calculatePercentages, sortSeriesData } from './utils';
+import { PieChartListLegendMapper, PieChartTableLegendMapper, sortSeriesData } from './utils';
 import { getSeriesColor } from './colors';
 import { PieChartBase } from './PieChartBase';
 export function PieChartPanel(props) {
-    const { spec: { calculation, sort, mode, legend: pieChartLegend, colorPalette: colorPalette }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, sort, mode, format: formatOptions, legend: pieChartLegend, colorPalette: colorPalette }, contentDimensions, queryResults } = props;
     const chartsTheme = useChartsTheme();
     const chartId = useId('time-series-panel');
     const seriesNames = queryResults.flatMap((result)=>result?.data.series?.map((series)=>series.name) || []);
@@ -32,11 +31,9 @@ export function PieChartPanel(props) {
         colorPalette,
         seriesNames
     ]);
-    const { pieChartData, legendItems, legendColumns } = useMemo(()=>{
+    const pieChartData = useMemo(()=>{
         const calculate = CalculationsMap[calculation];
         const pieChartData = [];
-        const legendItems = [];
-        const legendColumns = [];
         queryResults.forEach((result, queryIndex)=>{
             const series = result?.data.series ?? [];
             series.forEach((seriesData, seriesIndex)=>{
@@ -51,74 +48,30 @@ export function PieChartPanel(props) {
                     }
                 };
                 pieChartData.push(seriesItem);
-                legendItems.push({
-                    id: seriesId,
-                    label: seriesData.formattedName ?? '',
-                    color: seriesColor,
-                    data: {}
-                });
             });
         });
-        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;
-            [
-                ...values
-            ].sort().forEach((v)=>{
-                /* First, create a column for the current legend value */ legendColumns.push({
-                    accessorKey: `data.${v}`,
-                    header: comparisonLegends[v]?.label || v,
-                    headerDescription: comparisonLegends[v]?.description,
-                    width: 90,
-                    align: 'right',
-                    cellDescription: true,
-                    enableSorting: true
-                });
-                /* Then, settle the legend items related to this legend value */ switch(v){
-                    case 'abs':
-                        legendItems.forEach((li)=>{
-                            const { value: itemAbsoluteValue } = pieChartData.find((pd)=>li.id === pd.id) || {};
-                            if (typeof itemAbsoluteValue === 'number' && li.data) {
-                                li.data['abs'] = itemAbsoluteValue;
-                            }
-                        });
-                        break;
-                    case 'relative':
-                        legendItems.forEach((li)=>{
-                            const { value: itemPercentageValue } = calculatePercentages(sortedPieChartData).find((ppd)=>li.id === ppd.id) || {};
-                            if (typeof itemPercentageValue === 'number' && li.data) {
-                                li.data['relative'] = `${itemPercentageValue.toFixed(2)}%`;
-                            }
-                        });
-                        break;
-                    default:
-                        break;
-                }
-            });
-        }
+        return sortSeriesData(pieChartData, sort);
+    }, [
+        calculation,
+        chartId,
+        colorList,
+        queryResults,
+        sort
+    ]);
+    const { legendItems, legendColumns } = useMemo(()=>{
+        const pieChartLegendMapper = pieChartLegend?.mode === 'table' ? new PieChartTableLegendMapper() : new PieChartListLegendMapper();
+        const values = pieChartLegend?.values;
+        const legendItems = pieChartLegendMapper.mapToLegendItems(pieChartData, values);
+        const legendColumns = pieChartLegendMapper.mapToLegendColumns(values, formatOptions);
         return {
-            pieChartData: mode === 'percentage' ? calculatePercentages(sortedPieChartData) : sortedPieChartData,
             legendItems,
             legendColumns
         };
     }, [
-        calculation,
-        sort,
-        mode,
-        queryResults,
-        colorList,
-        chartId,
-        pieChartLegend
+        formatOptions,
+        pieChartData,
+        pieChartLegend?.mode,
+        pieChartLegend?.values
     ]);
     const contentPadding = chartsTheme.container.padding.default;
     const adjustedContentDimensions = contentDimensions ? {
@@ -176,6 +129,8 @@ export function PieChartPanel(props) {
                         data: pieChartData,
                         width: width,
                         height: height,
+                        mode: mode,
+                        formatOptions: formatOptions,
                         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 } 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":"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"}
+{"version":3,"sources":["../../src/PieChartPanel.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport {\n  ChartInstance,\n  ContentWithLegend,\n  DEFAULT_LEGEND,\n  LegendProps,\n  SelectedLegendItemState,\n  useChartsTheme,\n  useId,\n} from '@perses-dev/components';\nimport { CalculationsMap, CalculationType, PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { TimeSeriesData } from '@perses-dev/spec';\nimport { PieChartOptions } from './pie-chart-model';\nimport { PieChartLegendMapper, PieChartListLegendMapper, PieChartTableLegendMapper, 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, format: formatOptions, 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 = useMemo((): Array<Required<PieChartData>> => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const pieChartData: Array<Required<PieChartData>> = [];\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      });\n    });\n\n    return sortSeriesData(pieChartData, sort);\n  }, [calculation, chartId, colorList, queryResults, sort]);\n\n  const { legendItems, legendColumns } = useMemo(() => {\n    const pieChartLegendMapper: PieChartLegendMapper =\n      pieChartLegend?.mode === 'table' ? new PieChartTableLegendMapper() : new PieChartListLegendMapper();\n    const values = pieChartLegend?.values;\n    const legendItems = pieChartLegendMapper.mapToLegendItems(pieChartData, values);\n    const legendColumns = pieChartLegendMapper.mapToLegendColumns(values, formatOptions);\n    return {\n      legendItems,\n      legendColumns,\n    };\n  }, [formatOptions, pieChartData, pieChartLegend?.mode, pieChartLegend?.values]);\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                mode={mode}\n                formatOptions={formatOptions}\n                showLabels={Boolean(props.spec.showLabels)}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["Box","ContentWithLegend","DEFAULT_LEGEND","useChartsTheme","useId","CalculationsMap","validateLegendSpec","merge","useMemo","useRef","useState","PieChartListLegendMapper","PieChartTableLegendMapper","sortSeriesData","getSeriesColor","PieChartBase","PieChartPanel","props","spec","calculation","sort","mode","format","formatOptions","legend","pieChartLegend","colorPalette","contentDimensions","queryResults","chartsTheme","chartId","seriesNames","flatMap","result","data","series","map","name","colorList","pieChartData","calculate","forEach","queryIndex","seriesData","seriesIndex","seriesId","seriesColor","length","seriesItem","id","value","values","formattedName","itemStyle","color","push","legendItems","legendColumns","pieChartLegendMapper","mapToLegendItems","mapToLegendColumns","contentPadding","container","padding","default","adjustedContentDimensions","width","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":"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"}

package/lib/cjs/PieChartBase.js

@@ -27,6 +27,7 @@ const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _material = require("@mui/material");
 const _components1 = require("@perses-dev/components");
+const _utils = require("./utils");
 (0, _core.use)([
     _charts.PieChart,
     _components.GridComponent,
@@ -37,13 +38,13 @@ const _components1 = require("@perses-dev/components");
     _renderers.CanvasRenderer
 ]);
 function PieChartBase(props) {
-    const { width, height, data, showLabels } = props;
+    const { width, height, data, mode, formatOptions, showLabels } = props;
     const chartsTheme = (0, _components1.useChartsTheme)();
     const muiTheme = (0, _material.useTheme)();
     const option = {
         tooltip: {
             trigger: 'item',
-            formatter: '{b}: {c} ({d}%)',
+            formatter: (0, _utils.getTooltipFormatter)(formatOptions),
             appendTo: document.body,
             confine: false
         },
@@ -55,7 +56,7 @@ function PieChartBase(props) {
                     show: Boolean(showLabels),
                     position: 'inner',
                     fontSize: 14,
-                    formatter: '{b}\n{c}',
+                    formatter: (0, _utils.getLabelFormatter)(mode, formatOptions),
                     overflow: 'truncate',
                     fontWeight: 'bold'
                 },

package/lib/cjs/PieChartOptionsEditorSettings.js

@@ -25,7 +25,6 @@ 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 _react = require("react");
 const _piechartmodel = require("./pie-chart-model");
@@ -158,7 +157,7 @@ function PieChartOptionsEditorSettings(props) {
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ModeSelector, {
                                 value: value.mode,
                                 onChange: handleModeChange,
-                                disablePercentageMode: (0, _core.isPercentUnit)(format)
+                                disablePercentageMode: (0, _components.isPercentUnit)(format)
                             })
                         ]
                     })

package/lib/cjs/PieChartPanel.js

@@ -1,4 +1,4 @@
-//Copyright 2024 The Perses Authors
+// Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -23,7 +23,6 @@ Object.defineProperty(exports, "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");
@@ -36,7 +35,7 @@ function _interop_require_default(obj) {
     };
 }
 function PieChartPanel(props) {
-    const { spec: { calculation, sort, mode, legend: pieChartLegend, colorPalette: colorPalette }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, sort, mode, format: formatOptions, legend: pieChartLegend, colorPalette: colorPalette }, contentDimensions, queryResults } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const chartId = (0, _components.useId)('time-series-panel');
     const seriesNames = queryResults.flatMap((result)=>result?.data.series?.map((series)=>series.name) || []);
@@ -47,11 +46,9 @@ function PieChartPanel(props) {
         colorPalette,
         seriesNames
     ]);
-    const { pieChartData, legendItems, legendColumns } = (0, _react.useMemo)(()=>{
-        const calculate = _core.CalculationsMap[calculation];
+    const pieChartData = (0, _react.useMemo)(()=>{
+        const calculate = _pluginsystem.CalculationsMap[calculation];
         const pieChartData = [];
-        const legendItems = [];
-        const legendColumns = [];
         queryResults.forEach((result, queryIndex)=>{
             const series = result?.data.series ?? [];
             series.forEach((seriesData, seriesIndex)=>{
@@ -66,74 +63,30 @@ function PieChartPanel(props) {
                     }
                 };
                 pieChartData.push(seriesItem);
-                legendItems.push({
-                    id: seriesId,
-                    label: seriesData.formattedName ?? '',
-                    color: seriesColor,
-                    data: {}
-                });
             });
         });
-        const sortedPieChartData = (0, _utils.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;
-            [
-                ...values
-            ].sort().forEach((v)=>{
-                /* First, create a column for the current legend value */ legendColumns.push({
-                    accessorKey: `data.${v}`,
-                    header: _pluginsystem.comparisonLegends[v]?.label || v,
-                    headerDescription: _pluginsystem.comparisonLegends[v]?.description,
-                    width: 90,
-                    align: 'right',
-                    cellDescription: true,
-                    enableSorting: true
-                });
-                /* Then, settle the legend items related to this legend value */ switch(v){
-                    case 'abs':
-                        legendItems.forEach((li)=>{
-                            const { value: itemAbsoluteValue } = pieChartData.find((pd)=>li.id === pd.id) || {};
-                            if (typeof itemAbsoluteValue === 'number' && li.data) {
-                                li.data['abs'] = itemAbsoluteValue;
-                            }
-                        });
-                        break;
-                    case 'relative':
-                        legendItems.forEach((li)=>{
-                            const { value: itemPercentageValue } = (0, _utils.calculatePercentages)(sortedPieChartData).find((ppd)=>li.id === ppd.id) || {};
-                            if (typeof itemPercentageValue === 'number' && li.data) {
-                                li.data['relative'] = `${itemPercentageValue.toFixed(2)}%`;
-                            }
-                        });
-                        break;
-                    default:
-                        break;
-                }
-            });
-        }
+        return (0, _utils.sortSeriesData)(pieChartData, sort);
+    }, [
+        calculation,
+        chartId,
+        colorList,
+        queryResults,
+        sort
+    ]);
+    const { legendItems, legendColumns } = (0, _react.useMemo)(()=>{
+        const pieChartLegendMapper = pieChartLegend?.mode === 'table' ? new _utils.PieChartTableLegendMapper() : new _utils.PieChartListLegendMapper();
+        const values = pieChartLegend?.values;
+        const legendItems = pieChartLegendMapper.mapToLegendItems(pieChartData, values);
+        const legendColumns = pieChartLegendMapper.mapToLegendColumns(values, formatOptions);
         return {
-            pieChartData: mode === 'percentage' ? (0, _utils.calculatePercentages)(sortedPieChartData) : sortedPieChartData,
             legendItems,
             legendColumns
         };
     }, [
-        calculation,
-        sort,
-        mode,
-        queryResults,
-        colorList,
-        chartId,
-        pieChartLegend
+        formatOptions,
+        pieChartData,
+        pieChartLegend?.mode,
+        pieChartLegend?.values
     ]);
     const contentPadding = chartsTheme.container.padding.default;
     const adjustedContentDimensions = contentDimensions ? {
@@ -141,7 +94,7 @@ function PieChartPanel(props) {
         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;
+        return props.spec.legend && (0, _pluginsystem.validateLegendSpec)(props.spec.legend) ? (0, _merge.default)({}, _components.DEFAULT_LEGEND, props.spec.legend) : undefined;
     }, [
         props.spec.legend
     ]);
@@ -191,6 +144,8 @@ function PieChartPanel(props) {
                         data: pieChartData,
                         width: width,
                         height: height,
+                        mode: mode,
+                        formatOptions: formatOptions,
                         showLabels: Boolean(props.spec.showLabels)
                     })
                 });

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

@@ -34,7 +34,7 @@ _export(exports, {
         return createInitialPieChartOptions;
     }
 });
-const _core = require("@perses-dev/core");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
@@ -43,7 +43,7 @@ const DEFAULT_SORT = 'desc';
 const DEFAULT_MODE = 'value';
 function createInitialPieChartOptions() {
     return {
-        calculation: _core.DEFAULT_CALCULATION,
+        calculation: _pluginsystem.DEFAULT_CALCULATION,
         format: DEFAULT_FORMAT,
         mode: DEFAULT_MODE,
         radius: 50,