@perses-dev/pie-chart-plugin 0.8.1 → 0.9.0

package/lib/PieChartPanel.js

@@ -14,23 +14,24 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Box, useTheme } from '@mui/material';
 import { ContentWithLegend, useChartsTheme, useId } from '@perses-dev/components';
 import { CalculationsMap, DEFAULT_LEGEND } from '@perses-dev/core';
-import { validateLegendSpec } from '@perses-dev/plugin-system';
+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 { PieChartBase } from './PieChartBase';
 export function PieChartPanel(props) {
-    const { spec: { calculation, sort, mode }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, sort, mode, legend: pieChartLegend }, 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 { pieChartData, legendItems } = useMemo(()=>{
+    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;
@@ -40,7 +41,9 @@ export function PieChartPanel(props) {
                     muiPrimaryColor: muiTheme.palette.primary.main,
                     seriesName: seriesData.name
                 });
+                const seriesId = `${chartId}${seriesData.name}${seriesIndex}`;
                 const series = {
+                    id: seriesId,
                     value: calculate(seriesData.values) ?? null,
                     name: seriesData.formattedName ?? '',
                     itemStyle: {
@@ -48,25 +51,56 @@ export function PieChartPanel(props) {
                     }
                 };
                 pieChartData.push(series);
-                const seriesId = chartId + seriesData.name + seriesIndex;
                 legendItems.push({
                     id: seriesId,
                     label: series.name,
-                    color: seriesColor
+                    color: seriesColor,
+                    data: {}
                 });
                 seriesIndex++;
             }
         }
         const sortedPieChartData = sortSeriesData(pieChartData, sort);
-        if (mode === 'percentage') {
-            return {
-                pieChartData: calculatePercentages(sortedPieChartData),
-                legendItems
-            };
+        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 {
-            pieChartData: sortedPieChartData,
-            legendItems
+            pieChartData: mode === 'percentage' ? calculatePercentages(sortedPieChartData) : sortedPieChartData,
+            legendItems,
+            legendColumns
         };
     }, [
         calculation,
@@ -75,7 +109,8 @@ export function PieChartPanel(props) {
         queryResults,
         categoricalPalette,
         muiTheme.palette.primary.main,
-        chartId
+        chartId,
+        pieChartLegend
     ]);
     const contentPadding = chartsTheme.container.padding.default;
     const adjustedContentDimensions = contentDimensions ? {
@@ -92,7 +127,7 @@ export function PieChartPanel(props) {
     const chartRef = useRef(null);
     // ensures there are fallbacks for unset properties since most
     // users should not need to customize visual display
-    if (contentDimensions === undefined) return null;
+    if (!contentDimensions) return null;
     return /*#__PURE__*/ _jsx(Box, {
         sx: {
             padding: `${PADDING}px`
@@ -110,7 +145,7 @@ export function PieChartPanel(props) {
                 selectedItems: selectedLegendItems,
                 onSelectedItemsChange: setSelectedLegendItems,
                 tableProps: {
-                    columns: [],
+                    columns: legendColumns,
                     sorting: legendSorting,
                     onSortingChange: setLegendSorting
                 },

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  useChartsTheme,\n  useId,\n} from '@perses-dev/components';\nimport { CalculationType, CalculationsMap, DEFAULT_LEGEND, TimeSeriesData } from '@perses-dev/core';\nimport { PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { 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 },\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 } = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const pieChartData: PieChartData[] = [];\n    const legendItems: LegendItem[] = [];\n\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      let seriesIndex = 0;\n      for (const seriesData of result?.data.series ?? []) {\n        const seriesColor = getSeriesColor({\n          categoricalPalette: categoricalPalette as string[],\n          muiPrimaryColor: muiTheme.palette.primary.main,\n          seriesName: seriesData.name,\n        });\n        const series = {\n          value: calculate(seriesData.values) ?? null,\n          name: seriesData.formattedName ?? '',\n          itemStyle: {\n            color: seriesColor,\n          },\n        };\n        pieChartData.push(series);\n\n        const seriesId = chartId + seriesData.name + seriesIndex;\n        legendItems.push({\n          id: seriesId,\n          label: series.name,\n          color: seriesColor,\n        });\n        seriesIndex++;\n      }\n    }\n\n    const sortedPieChartData = sortSeriesData(pieChartData, sort);\n    if (mode === 'percentage') {\n      return {\n        pieChartData: calculatePercentages(sortedPieChartData),\n        legendItems,\n      };\n    }\n    return {\n      pieChartData: sortedPieChartData,\n      legendItems,\n    };\n  }, [calculation, sort, mode, queryResults, categoricalPalette, muiTheme.palette.primary.main, chartId]);\n\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions?.width ?? 400}\n        height={adjustedContentDimensions?.height ?? 1000}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems,\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: [],\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              <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","validateLegendSpec","merge","useMemo","useRef","useState","getSeriesColor","calculatePercentages","sortSeriesData","PieChartBase","PieChartPanel","props","spec","calculation","sort","mode","contentDimensions","queryResults","chartsTheme","muiTheme","PADDING","container","padding","default","chartId","categoricalPalette","echartsTheme","color","pieChartData","legendItems","calculate","queryIndex","length","result","seriesIndex","seriesData","data","series","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","name","value","values","formattedName","itemStyle","push","seriesId","id","label","sortedPieChartData","contentPadding","adjustedContentDimensions","width","height","undefined","legend","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","chartRef","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","columns","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style"],"mappings":"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"}
+{"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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"}

package/lib/cjs/PieChartOptionsEditorSettings.js

@@ -68,6 +68,7 @@ function PieChartOptionsEditorSettings(props) {
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorColumn, {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.LegendOptionsEditor, {
+                        calculation: "comparison",
                         value: value.legend,
                         onChange: handleLegendChange
                     }),

package/lib/cjs/PieChartPanel.js

@@ -36,16 +36,17 @@ function _interop_require_default(obj) {
     };
 }
 function PieChartPanel(props) {
-    const { spec: { calculation, sort, mode }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, sort, mode, legend: pieChartLegend }, contentDimensions, queryResults } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const muiTheme = (0, _material.useTheme)();
     const PADDING = chartsTheme.container.padding.default;
     const chartId = (0, _components.useId)('time-series-panel');
     const categoricalPalette = chartsTheme.echartsTheme.color;
-    const { pieChartData, legendItems } = (0, _react.useMemo)(()=>{
+    const { pieChartData, legendItems, legendColumns } = (0, _react.useMemo)(()=>{
         const calculate = _core.CalculationsMap[calculation];
         const pieChartData = [];
         const legendItems = [];
+        const legendColumns = [];
         for(let queryIndex = 0; queryIndex < queryResults.length; queryIndex++){
             const result = queryResults[queryIndex];
             let seriesIndex = 0;
@@ -55,7 +56,9 @@ function PieChartPanel(props) {
                     muiPrimaryColor: muiTheme.palette.primary.main,
                     seriesName: seriesData.name
                 });
+                const seriesId = `${chartId}${seriesData.name}${seriesIndex}`;
                 const series = {
+                    id: seriesId,
                     value: calculate(seriesData.values) ?? null,
                     name: seriesData.formattedName ?? '',
                     itemStyle: {
@@ -63,25 +66,56 @@ function PieChartPanel(props) {
                     }
                 };
                 pieChartData.push(series);
-                const seriesId = chartId + seriesData.name + seriesIndex;
                 legendItems.push({
                     id: seriesId,
                     label: series.name,
-                    color: seriesColor
+                    color: seriesColor,
+                    data: {}
                 });
                 seriesIndex++;
             }
         }
         const sortedPieChartData = (0, _utils.sortSeriesData)(pieChartData, sort);
-        if (mode === 'percentage') {
-            return {
-                pieChartData: (0, _utils.calculatePercentages)(sortedPieChartData),
-                legendItems
-            };
+        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 {
-            pieChartData: sortedPieChartData,
-            legendItems
+            pieChartData: mode === 'percentage' ? (0, _utils.calculatePercentages)(sortedPieChartData) : sortedPieChartData,
+            legendItems,
+            legendColumns
         };
     }, [
         calculation,
@@ -90,7 +124,8 @@ function PieChartPanel(props) {
         queryResults,
         categoricalPalette,
         muiTheme.palette.primary.main,
-        chartId
+        chartId,
+        pieChartLegend
     ]);
     const contentPadding = chartsTheme.container.padding.default;
     const adjustedContentDimensions = contentDimensions ? {
@@ -107,7 +142,7 @@ function PieChartPanel(props) {
     const chartRef = (0, _react.useRef)(null);
     // ensures there are fallbacks for unset properties since most
     // users should not need to customize visual display
-    if (contentDimensions === undefined) return null;
+    if (!contentDimensions) return null;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             padding: `${PADDING}px`
@@ -125,7 +160,7 @@ function PieChartPanel(props) {
                 selectedItems: selectedLegendItems,
                 onSelectedItemsChange: setSelectedLegendItems,
                 tableProps: {
-                    columns: [],
+                    columns: legendColumns,
                     sorting: legendSorting,
                     onSortingChange: setLegendSorting
                 },

package/lib/utils.d.ts

@@ -1,6 +1,7 @@
 import { SortOption } from '@perses-dev/components';
 import { PieChartData } from './PieChartBase';
 export declare function calculatePercentages(data: PieChartData[]): Array<{
+    id?: string;
     name: string;
     value: number;
 }>;

package/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CASjG;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,SAAS,GAAE,UAAyB,GAAG,YAAY,EAAE,CA8BzG"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,wBAAgB,oBAAoB,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC;IAAE,EAAE,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC,CAS9G;AAED,wBAAgB,cAAc,CAAC,IAAI,EAAE,YAAY,EAAE,EAAE,SAAS,GAAE,UAAyB,GAAG,YAAY,EAAE,CA8BzG"}

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils.ts"],"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 { SortOption } from '@perses-dev/components';\nimport { DEFAULT_SORT } from './pie-chart-model';\nimport { PieChartData } from './PieChartBase';\n\nexport function calculatePercentages(data: PieChartData[]): Array<{ name: string; value: number }> {\n  const sum = data.reduce((accumulator, { value }) => accumulator + (value ?? 0), 0);\n  return data.map((seriesData) => {\n    const percentage = ((seriesData.value ?? 0) / sum) * 100;\n    return {\n      ...seriesData,\n      value: percentage,\n    };\n  });\n}\n\nexport function sortSeriesData(data: PieChartData[], sortOrder: SortOption = DEFAULT_SORT): PieChartData[] {\n  if (sortOrder === 'asc') {\n    // sort in ascending order by value\n    return data.sort((a, b) => {\n      if (a.value === null) {\n        return 1;\n      }\n      if (b.value === null) {\n        return -1;\n      }\n      if (a.value === b.value) {\n        return 0;\n      }\n      return a.value < b.value ? 1 : -1;\n    });\n  } else {\n    // sort in descending order by value\n    return data.sort((a, b) => {\n      if (a.value === null) {\n        return -1;\n      }\n      if (b.value === null) {\n        return 1;\n      }\n      if (a.value === b.value) {\n        return 0;\n      }\n      return a.value < b.value ? -1 : 1;\n    });\n  }\n}\n"],"names":["DEFAULT_SORT","calculatePercentages","data","sum","reduce","accumulator","value","map","seriesData","percentage","sortSeriesData","sortOrder","sort","a","b"],"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;AAGjC,SAASA,YAAY,QAAQ,oBAAoB;AAGjD,OAAO,SAASC,qBAAqBC,IAAoB;IACvD,MAAMC,MAAMD,KAAKE,MAAM,CAAC,CAACC,aAAa,EAAEC,KAAK,EAAE,GAAKD,cAAeC,CAAAA,SAAS,CAAA,GAAI;IAChF,OAAOJ,KAAKK,GAAG,CAAC,CAACC;QACf,MAAMC,aAAa,AAAED,CAAAA,WAAWF,KAAK,IAAI,CAAA,IAAKH,MAAO;QACrD,OAAO;YACL,GAAGK,UAAU;YACbF,OAAOG;QACT;IACF;AACF;AAEA,OAAO,SAASC,eAAeR,IAAoB,EAAES,YAAwBX,YAAY;IACvF,IAAIW,cAAc,OAAO;QACvB,mCAAmC;QACnC,OAAOT,KAAKU,IAAI,CAAC,CAACC,GAAGC;YACnB,IAAID,EAAEP,KAAK,KAAK,MAAM;gBACpB,OAAO;YACT;YACA,IAAIQ,EAAER,KAAK,KAAK,MAAM;gBACpB,OAAO,CAAC;YACV;YACA,IAAIO,EAAEP,KAAK,KAAKQ,EAAER,KAAK,EAAE;gBACvB,OAAO;YACT;YACA,OAAOO,EAAEP,KAAK,GAAGQ,EAAER,KAAK,GAAG,IAAI,CAAC;QAClC;IACF,OAAO;QACL,oCAAoC;QACpC,OAAOJ,KAAKU,IAAI,CAAC,CAACC,GAAGC;YACnB,IAAID,EAAEP,KAAK,KAAK,MAAM;gBACpB,OAAO,CAAC;YACV;YACA,IAAIQ,EAAER,KAAK,KAAK,MAAM;gBACpB,OAAO;YACT;YACA,IAAIO,EAAEP,KAAK,KAAKQ,EAAER,KAAK,EAAE;gBACvB,OAAO;YACT;YACA,OAAOO,EAAEP,KAAK,GAAGQ,EAAER,KAAK,GAAG,CAAC,IAAI;QAClC;IACF;AACF"}
+{"version":3,"sources":["../../src/utils.ts"],"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 { SortOption } from '@perses-dev/components';\nimport { DEFAULT_SORT } from './pie-chart-model';\nimport { PieChartData } from './PieChartBase';\n\nexport function calculatePercentages(data: PieChartData[]): Array<{ id?: string; name: string; value: number }> {\n  const sum = data.reduce((accumulator, { value }) => accumulator + (value ?? 0), 0);\n  return data.map((seriesData) => {\n    const percentage = ((seriesData.value ?? 0) / sum) * 100;\n    return {\n      ...seriesData,\n      value: percentage,\n    };\n  });\n}\n\nexport function sortSeriesData(data: PieChartData[], sortOrder: SortOption = DEFAULT_SORT): PieChartData[] {\n  if (sortOrder === 'asc') {\n    // sort in ascending order by value\n    return data.sort((a, b) => {\n      if (a.value === null) {\n        return 1;\n      }\n      if (b.value === null) {\n        return -1;\n      }\n      if (a.value === b.value) {\n        return 0;\n      }\n      return a.value < b.value ? 1 : -1;\n    });\n  } else {\n    // sort in descending order by value\n    return data.sort((a, b) => {\n      if (a.value === null) {\n        return -1;\n      }\n      if (b.value === null) {\n        return 1;\n      }\n      if (a.value === b.value) {\n        return 0;\n      }\n      return a.value < b.value ? -1 : 1;\n    });\n  }\n}\n"],"names":["DEFAULT_SORT","calculatePercentages","data","sum","reduce","accumulator","value","map","seriesData","percentage","sortSeriesData","sortOrder","sort","a","b"],"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;AAGjC,SAASA,YAAY,QAAQ,oBAAoB;AAGjD,OAAO,SAASC,qBAAqBC,IAAoB;IACvD,MAAMC,MAAMD,KAAKE,MAAM,CAAC,CAACC,aAAa,EAAEC,KAAK,EAAE,GAAKD,cAAeC,CAAAA,SAAS,CAAA,GAAI;IAChF,OAAOJ,KAAKK,GAAG,CAAC,CAACC;QACf,MAAMC,aAAa,AAAED,CAAAA,WAAWF,KAAK,IAAI,CAAA,IAAKH,MAAO;QACrD,OAAO;YACL,GAAGK,UAAU;YACbF,OAAOG;QACT;IACF;AACF;AAEA,OAAO,SAASC,eAAeR,IAAoB,EAAES,YAAwBX,YAAY;IACvF,IAAIW,cAAc,OAAO;QACvB,mCAAmC;QACnC,OAAOT,KAAKU,IAAI,CAAC,CAACC,GAAGC;YACnB,IAAID,EAAEP,KAAK,KAAK,MAAM;gBACpB,OAAO;YACT;YACA,IAAIQ,EAAER,KAAK,KAAK,MAAM;gBACpB,OAAO,CAAC;YACV;YACA,IAAIO,EAAEP,KAAK,KAAKQ,EAAER,KAAK,EAAE;gBACvB,OAAO;YACT;YACA,OAAOO,EAAEP,KAAK,GAAGQ,EAAER,KAAK,GAAG,IAAI,CAAC;QAClC;IACF,OAAO;QACL,oCAAoC;QACpC,OAAOJ,KAAKU,IAAI,CAAC,CAACC,GAAGC;YACnB,IAAID,EAAEP,KAAK,KAAK,MAAM;gBACpB,OAAO,CAAC;YACV;YACA,IAAIQ,EAAER,KAAK,KAAK,MAAM;gBACpB,OAAO;YACT;YACA,IAAIO,EAAEP,KAAK,KAAKQ,EAAER,KAAK,EAAE;gBACvB,OAAO;YACT;YACA,OAAOO,EAAEP,KAAK,GAAGQ,EAAER,KAAK,GAAG,CAAC,IAAI;QAClC;IACF;AACF"}

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "PieChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.8.1",
+      "buildVersion": "0.9.0",
       "buildName": "@perses-dev/pie-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/PieChart.a1d90662.js",
+      "name": "__mf/js/PieChart.4c358ac5.js",
       "path": "",
       "type": "global"
     },
@@ -20,7 +20,7 @@
       "api": ""
     },
     "globalName": "PieChart",
-    "pluginVersion": "0.11.2",
+    "pluginVersion": "0.18.1",
     "prefetchInterface": false,
     "publicPath": "/plugins/PieChart/"
   },
@@ -33,11 +33,9 @@
       "requiredVersion": "^11.11.3",
       "assets": {
         "js": {
-          "async": [
-            "__mf/js/async/964.6df60c3e.js"
-          ],
+          "async": [],
           "sync": [
-            "__mf/js/async/960.208437e1.js"
+            "__mf/js/async/960.021d7634.js"
           ]
         },
         "css": {
@@ -54,13 +52,10 @@
       "requiredVersion": "^11.14.0",
       "assets": {
         "js": {
-          "async": [
-            "__mf/js/async/964.6df60c3e.js",
-            "__mf/js/async/960.208437e1.js"
-          ],
+          "async": [],
           "sync": [
-            "__mf/js/async/694.b227b636.js",
-            "__mf/js/async/770.93415255.js"
+            "__mf/js/async/694.011b21e8.js",
+            "__mf/js/async/770.73dda090.js"
           ]
         },
         "css": {
@@ -77,12 +72,10 @@
       "requiredVersion": "^3.10.0",
       "assets": {
         "js": {
-          "async": [
-            "__mf/js/async/964.6df60c3e.js"
-          ],
+          "async": [],
           "sync": [
-            "__mf/js/async/214.df2e7807.js",
-            "__mf/js/async/738.4ac98841.js"
+            "__mf/js/async/214.a7648318.js",
+            "__mf/js/async/738.5a36e399.js"
           ]
         },
         "css": {
@@ -94,21 +87,14 @@
     {
       "id": "PieChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.51.0-rc.1",
+      "version": "0.52.0-beta.5",
       "singleton": true,
-      "requiredVersion": "^0.51.0-rc.1",
+      "requiredVersion": "^0.52.0-beta.5",
       "assets": {
         "js": {
-          "async": [
-            "__mf/js/async/964.6df60c3e.js",
-            "__mf/js/async/173.ee70b493.js",
-            "__mf/js/async/960.208437e1.js",
-            "__mf/js/async/770.93415255.js",
-            "__mf/js/async/75.905151a5.js",
-            "__mf/js/async/740.b86dfa00.js"
-          ],
+          "async": [],
           "sync": [
-            "__mf/js/async/530.f071fc6b.js"
+            "__mf/js/async/358.76279409.js"
           ]
         },
         "css": {
@@ -120,36 +106,18 @@
     {
       "id": "PieChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.51.0-rc.1",
+      "version": "0.52.0-beta.5",
       "singleton": true,
-      "requiredVersion": "^0.51.0-rc.1",
+      "requiredVersion": "^0.52.0-beta.5",
       "assets": {
         "js": {
-          "async": [
-            "__mf/js/async/964.6df60c3e.js",
-            "__mf/js/async/173.ee70b493.js",
-            "__mf/js/async/960.208437e1.js",
-            "__mf/js/async/770.93415255.js",
-            "__mf/js/async/238.5287310b.js",
-            "__mf/js/async/224.dbeed4db.js",
-            "__mf/js/async/75.905151a5.js",
-            "__mf/js/async/740.b86dfa00.js",
-            "__mf/js/async/470.be19e17e.js",
-            "__mf/js/async/105.7a85ee04.js",
-            "__mf/js/async/530.f071fc6b.js",
-            "__mf/js/async/331.067ac3da.js",
-            "__mf/js/async/738.4ac98841.js",
-            "__mf/js/async/503.28e7e4f1.js",
-            "__mf/js/async/981.3ecbf5ea.js"
-          ],
+          "async": [],
           "sync": [
-            "__mf/js/async/845.1b2e72ed.js"
+            "__mf/js/async/109.9a84a1ac.js"
           ]
         },
         "css": {
-          "async": [
-            "__mf/css/async/263.80005a4a.css"
-          ],
+          "async": [],
           "sync": []
         }
       }
@@ -164,7 +132,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.905151a5.js"
+            "__mf/js/async/75.a825d10b.js"
           ]
         },
         "css": {
@@ -183,7 +151,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/503.28e7e4f1.js"
+            "__mf/js/async/409.9c48d616.js"
           ]
         },
         "css": {
@@ -202,7 +170,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/981.3ecbf5ea.js"
+            "__mf/js/async/981.e6f0d188.js"
           ]
         },
         "css": {
@@ -219,11 +187,9 @@
       "requiredVersion": "18.2.0",
       "assets": {
         "js": {
-          "async": [
-            "__mf/js/async/964.6df60c3e.js"
-          ],
+          "async": [],
           "sync": [
-            "__mf/js/async/173.ee70b493.js"
+            "__mf/js/async/173.c694e6f7.js"
           ]
         },
         "css": {
@@ -242,7 +208,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.6df60c3e.js"
+            "__mf/js/async/964.7fdfdfd5.js"
           ]
         },
         "css": {
@@ -259,12 +225,9 @@
       "requiredVersion": "^3.2.0",
       "assets": {
         "js": {
-          "async": [
-            "__mf/js/async/238.5287310b.js",
-            "__mf/js/async/75.905151a5.js"
-          ],
+          "async": [],
           "sync": [
-            "__mf/js/async/740.b86dfa00.js"
+            "__mf/js/async/740.254a5697.js"
           ]
         },
         "css": {
@@ -282,31 +245,20 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/470.be19e17e.js",
-            "__mf/js/async/973.74031340.js",
-            "__mf/js/async/331.067ac3da.js",
-            "__mf/js/async/707.55fda5d1.js",
-            "__mf/js/async/__federation_expose_PieChart.869001bb.js"
+            "__mf/js/async/470.1e913aa7.js",
+            "__mf/js/async/680.f1da299d.js",
+            "__mf/js/async/298.707087d2.js",
+            "__mf/js/async/707.c77cb775.js",
+            "__mf/js/async/__federation_expose_PieChart.f4937330.js"
           ],
           "async": [
-            "__mf/js/async/964.6df60c3e.js",
-            "__mf/js/async/960.208437e1.js",
-            "__mf/js/async/770.93415255.js",
-            "__mf/js/async/lib-router.d29f3ef0.js",
-            "__mf/js/async/292.f278784e.js",
-            "__mf/js/async/925.92a059f1.js",
-            "__mf/js/async/845.1b2e72ed.js",
-            "__mf/js/async/488.0fc5dcbb.js",
-            "__mf/js/async/238.5287310b.js",
-            "__mf/js/async/224.dbeed4db.js",
-            "__mf/js/async/105.7a85ee04.js",
-            "__mf/js/async/530.f071fc6b.js",
-            "__mf/js/async/738.4ac98841.js",
-            "__mf/js/async/173.ee70b493.js",
-            "__mf/js/async/75.905151a5.js",
-            "__mf/js/async/503.28e7e4f1.js",
-            "__mf/js/async/740.b86dfa00.js",
-            "__mf/js/async/981.3ecbf5ea.js"
+            "__mf/js/async/lib-router.5205dc27.js",
+            "__mf/js/async/292.67519c5b.js",
+            "__mf/js/async/618.544e0c46.js",
+            "__mf/js/async/488.a0bde6cf.js",
+            "__mf/js/async/238.3e689a99.js",
+            "__mf/js/async/224.43460380.js",
+            "__mf/js/async/708.77a1c1f6.js"
           ]
         },
         "css": {