@perses-dev/pie-chart-plugin 0.10.0 → 0.12.1

package/lib/cjs/PieChartOptionsEditorSettings.js

@@ -27,6 +27,7 @@ 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");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -41,7 +42,6 @@ function PieChartOptionsEditorSettings(props) {
         }));
     };
     const handleLegendChange = (newLegend)=>{
-        // TODO (sjcobb): fix type, add position, fix glitch
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.legend = newLegend;
         }));
@@ -61,8 +61,68 @@ function PieChartOptionsEditorSettings(props) {
             draft.mode = newMode;
         }));
     };
+    const handleShowLabelsChange = (_, checked)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            draft.showLabels = checked;
+        }));
+    };
+    const chartsTheme = (0, _components.useChartsTheme)();
+    const themePalette = chartsTheme.echartsTheme.color;
+    const colorPalette = (0, _react.useMemo)(()=>{
+        return value.colorPalette || undefined;
+    }, [
+        value.colorPalette
+    ]);
+    const handleColorChange = (color)=>{
+        onChange((0, _immer.produce)(value, (draft)=>{
+            if (Array.isArray(color)) {
+                draft.colorPalette = color;
+            } else if (typeof color === 'string') {
+                draft.colorPalette = [
+                    color
+                ];
+            } else {
+                draft.colorPalette = undefined;
+            }
+        }));
+    };
     // ensures decimalPlaces defaults to correct value
     const format = (0, _merge.default)({}, _piechartmodel.DEFAULT_FORMAT, value.format);
+    const colorScheme = (0, _react.useMemo)(()=>{
+        return Array.isArray(colorPalette) ? colorPalette.length === 1 ? 'gradient' : 'theme' : 'default';
+    }, [
+        colorPalette
+    ]);
+    const handleColorSchemeChange = (scheme)=>{
+        if (scheme === 'theme') {
+            handleColorChange(themePalette);
+        } else if (scheme === 'default') {
+            handleColorChange();
+        } else {
+            // gradient: keep existing single color if present (user-chosen via OptionsColorPicker)
+            if (Array.isArray(colorPalette) && colorPalette.length === 1) {
+                return;
+            }
+            // initialize with a sensible default so the color picker shows a color
+            handleColorChange([
+                '#ff0000'
+            ]);
+        }
+    };
+    const colorHelpText = (0, _react.useMemo)(()=>{
+        if (colorPalette === undefined) {
+            return 'Colors will be automatically assigned using metrics name hash.';
+        }
+        if (Array.isArray(colorPalette) && colorPalette.length > 1) {
+            return 'Colors will be automatically assigned using the current theme color palette.';
+        }
+        if (Array.isArray(colorPalette) && colorPalette.length === 1) {
+            return 'All series will use a gradient based on the selected color.';
+        }
+        return undefined;
+    }, [
+        colorPalette
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGrid, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorColumn, {
@@ -75,6 +135,13 @@ function PieChartOptionsEditorSettings(props) {
                     /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorGroup, {
                         title: "Misc",
                         children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorControl, {
+                                label: "Show Labels",
+                                control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Switch, {
+                                    checked: Boolean(value.showLabels),
+                                    onChange: handleShowLabelsChange
+                                })
+                            }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.FormatControls, {
                                 value: format,
                                 onChange: handleUnitChange,
@@ -97,21 +164,81 @@ function PieChartOptionsEditorSettings(props) {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorColumn, {
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
-                    title: "Reset Settings",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
-                        variant: "outlined",
-                        color: "secondary",
-                        onClick: ()=>{
-                            onChange((0, _immer.produce)(value, (draft)=>{
-                                // reset button removes all optional panel options
-                                draft.legend = undefined;
-                            }));
-                        },
-                        children: "Reset To Defaults"
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.OptionsEditorColumn, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                        title: "Colors",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                                    direction: "row",
+                                    spacing: 2,
+                                    alignItems: "center",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
+                                            size: "small",
+                                            sx: {
+                                                minWidth: 150
+                                            },
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
+                                                    children: "Color Scheme"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
+                                                    value: colorScheme,
+                                                    label: "Color Scheme",
+                                                    onChange: (e)=>handleColorSchemeChange(e.target.value),
+                                                    children: [
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                            value: "default",
+                                                            children: "Default"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                            value: "theme",
+                                                            children: "Theme"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                                            value: "gradient",
+                                                            children: "Gradient"
+                                                        })
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        Array.isArray(colorPalette) && colorPalette.length === 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsColorPicker, {
+                                            label: "Color",
+                                            color: colorPalette?.[0] ?? themePalette[0] ?? '#ff0000',
+                                            onColorChange: (c)=>handleColorChange([
+                                                    c
+                                                ])
+                                        })
+                                    ]
+                                }),
+                                colorHelpText && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                    variant: "body2",
+                                    color: "text.secondary",
+                                    children: colorHelpText
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
+                        title: "Reset Settings",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                            variant: "outlined",
+                            color: "secondary",
+                            onClick: ()=>{
+                                onChange((0, _immer.produce)(value, (draft)=>{
+                                    // reset button removes all optional panel options
+                                    draft.legend = undefined;
+                                    draft.colorPalette = undefined;
+                                }));
+                            },
+                            children: "Reset To Defaults"
+                        })
                     })
-                })
+                ]
             })
         ]
     });

package/lib/cjs/PieChartPanel.js

@@ -27,8 +27,8 @@ const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
 const _react = require("react");
-const _palettegen = require("./palette-gen");
 const _utils = require("./utils");
+const _colors = require("./colors");
 const _PieChartBase = require("./PieChartBase");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
@@ -36,28 +36,28 @@ function _interop_require_default(obj) {
     };
 }
 function PieChartPanel(props) {
-    const { spec: { calculation, sort, mode, legend: pieChartLegend }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, sort, mode, legend: pieChartLegend, colorPalette: colorPalette }, contentDimensions, queryResults } = props;
     const chartsTheme = (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 seriesNames = queryResults.flatMap((result)=>result?.data.series?.map((series)=>series.name) || []);
+    // Memoize the color list so it only regenerates when color/palette/series count changes
+    const colorList = (0, _react.useMemo)(()=>{
+        return (0, _colors.getSeriesColor)(seriesNames, colorPalette);
+    }, [
+        colorPalette,
+        seriesNames
+    ]);
     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;
-            for (const seriesData of result?.data.series ?? []){
-                const seriesColor = (0, _palettegen.getSeriesColor)({
-                    categoricalPalette: categoricalPalette,
-                    muiPrimaryColor: muiTheme.palette.primary.main,
-                    seriesName: seriesData.name
-                });
-                const seriesId = `${chartId}${seriesData.name}${seriesIndex}`;
-                const series = {
+        queryResults.forEach((result, queryIndex)=>{
+            const series = result?.data.series ?? [];
+            series.forEach((seriesData, seriesIndex)=>{
+                const seriesId = `${chartId}${seriesData.name}${seriesIndex}${queryIndex}`;
+                const seriesColor = colorList[queryIndex * series.length + seriesIndex] ?? '#ff0000';
+                const seriesItem = {
                     id: seriesId,
                     value: calculate(seriesData.values) ?? null,
                     name: seriesData.formattedName ?? '',
@@ -65,17 +65,26 @@ function PieChartPanel(props) {
                         color: seriesColor
                     }
                 };
-                pieChartData.push(series);
+                pieChartData.push(seriesItem);
                 legendItems.push({
                     id: seriesId,
-                    label: series.name,
+                    label: seriesData.formattedName ?? '',
                     color: seriesColor,
                     data: {}
                 });
-                seriesIndex++;
-            }
-        }
+            });
+        });
         const sortedPieChartData = (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;
             [
@@ -122,8 +131,7 @@ function PieChartPanel(props) {
         sort,
         mode,
         queryResults,
-        categoricalPalette,
-        muiTheme.palette.primary.main,
+        colorList,
         chartId,
         pieChartLegend
     ]);
@@ -145,7 +153,7 @@ function PieChartPanel(props) {
     if (!contentDimensions) return null;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
-            padding: `${PADDING}px`
+            padding: `${contentPadding}px`
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ContentWithLegend, {
             width: adjustedContentDimensions?.width ?? 400,
@@ -181,8 +189,9 @@ function PieChartPanel(props) {
                     },
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PieChartBase.PieChartBase, {
                         data: pieChartData,
-                        width: contentDimensions.width - PADDING * 2,
-                        height: contentDimensions.height - PADDING * 2
+                        width: width,
+                        height: height,
+                        showLabels: Boolean(props.spec.showLabels)
                     })
                 });
             }

package/lib/cjs/colors.js

@@ -0,0 +1,207 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get generateGradientColor () {
+        return generateGradientColor;
+    },
+    get getAutoPaletteColor () {
+        return getAutoPaletteColor;
+    },
+    get getColor () {
+        return getColor;
+    },
+    get getConsistentColor () {
+        return getConsistentColor;
+    },
+    get getConsistentSeriesNameColor () {
+        return getConsistentSeriesNameColor;
+    },
+    get getDefaultSeriesColor () {
+        return getDefaultSeriesColor;
+    },
+    get getSeriesColor () {
+        return getSeriesColor;
+    }
+});
+const _colorhash = /*#__PURE__*/ _interop_require_default(require("color-hash"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.
+// More info: https://github.com/zenozeng/color-hash#custom-hue
+// Picked min of 20 and max of 360 to exclude common threshold colors (red).
+// Items with "error" in them will always be generated as red.
+const ERROR_HUE_CUTOFF = 20;
+const colorGenerator = new _colorhash.default({
+    hue: {
+        min: ERROR_HUE_CUTOFF,
+        max: 360
+    }
+});
+const redColorGenerator = new _colorhash.default({
+    hue: {
+        min: 0,
+        max: ERROR_HUE_CUTOFF
+    }
+});
+// Color utility functions
+/**
+ * Converts a number to a 2-digit hex string
+ */ function toHex(n) {
+    const hex = n.toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+}
+/**
+ * Converts a hex color string to RGB values
+ */ function hexToRgb(hex) {
+    const cleanHex = hex.replace('#', '');
+    return {
+        r: parseInt(cleanHex.substring(0, 2), 16),
+        g: parseInt(cleanHex.substring(2, 4), 16),
+        b: parseInt(cleanHex.substring(4, 6), 16)
+    };
+}
+/**
+ * Returns a deterministic number between 0 and 1 for a given string
+ */ function stringToSeed(str) {
+    let hash = 0;
+    for(let i = 0; i < str.length; i++){
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash; // Convert to 32-bit integer
+    }
+    // Convert to positive number and normalize to 0-1 range
+    return Math.abs(hash) / 2147483647;
+}
+function generateGradientColor(baseColor, factor) {
+    // Convert hex color to RGB
+    const { r, g, b } = hexToRgb(baseColor);
+    const newR = Math.round(r * factor);
+    const newG = Math.round(g * factor);
+    const newB = Math.round(b * factor);
+    return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;
+}
+function getSeriesColor(seriesNames, colorPalette) {
+    const totalSeries = seriesNames.length;
+    if (totalSeries <= 0) {
+        return [];
+    }
+    const colors = [];
+    // undefined palette - default
+    if (colorPalette === undefined) {
+        for(let nameIndex = 0; nameIndex < seriesNames.length; nameIndex++){
+            const seriesColor = getDefaultSeriesColor({
+                categoricalPalette: [
+                    '#ff0000'
+                ],
+                muiPrimaryColor: '#ff0000',
+                seriesName: seriesNames[nameIndex] || ''
+            });
+            colors.push(seriesColor);
+        }
+        return colors;
+    }
+    // single color palette - generate gradients from that color
+    if (colorPalette.length === 1) {
+        const baseColor = colorPalette[0] ?? '#ff0000';
+        for(let i = 0; i < totalSeries; i++){
+            if (i === 0) {
+                colors.push(baseColor);
+            } else {
+                const gradientFactor = 1 * ((totalSeries - i) / totalSeries);
+                colors.push(generateGradientColor(baseColor, gradientFactor));
+            }
+        }
+        return colors.sort((a, b)=>{
+            const seedA = stringToSeed(seriesNames[colors.indexOf(a)] || 'fallback');
+            const seedB = stringToSeed(seriesNames[colors.indexOf(b)] || 'fallback');
+            return seedA - seedB;
+        });
+    }
+    // multi color palette - loops through colors and adds gradient when palette is exhausted
+    for(let i = 0; i < totalSeries; i++){
+        const color = getColor(colorPalette, i);
+        colors.push(color);
+    }
+    if (totalSeries > colorPalette.length) {
+        return colors.sort((a, b)=>{
+            const seedA = stringToSeed(seriesNames[colors.indexOf(a)] || 'fallback');
+            const seedB = stringToSeed(seriesNames[colors.indexOf(b)] || 'fallback');
+            return seedA - seedB;
+        });
+    }
+    return colors;
+}
+function getColor(palette, seriesIndex) {
+    // Handle undefined or empty palette
+    if (!palette || palette.length === 0) {
+        return '#ff0000';
+    }
+    const paletteTotalColors = palette.length;
+    const paletteIndex = seriesIndex % paletteTotalColors;
+    const baseColor = palette[paletteIndex] ?? '#ff0000';
+    // If we haven't exhausted the palette yet, use the original color
+    if (seriesIndex < paletteTotalColors) {
+        return baseColor;
+    }
+    // Calculate which "cycle" we're in (0 = first repeat, 1 = second repeat, etc.)
+    const cycleNumber = Math.floor(seriesIndex / paletteTotalColors);
+    // Apply gradient based on cycle number to create visual distinction
+    const gradientFactor = Math.min(1 - cycleNumber * 0.2, 1);
+    return generateGradientColor(baseColor, gradientFactor);
+}
+function computeConsistentColor(name, error) {
+    const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);
+    const saturationPercent = `${(saturation * 100).toFixed(0)}%`;
+    const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;
+    return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;
+}
+// To check whether a color has already been generated for a given string.
+// TODO: Predefined color aliases will be defined here
+const colorLookup = {};
+function getConsistentColor(name, error) {
+    const key = `${name}_____${error}`;
+    let value = colorLookup[key];
+    if (!value) {
+        value = computeConsistentColor(name, error);
+        colorLookup[key] = value;
+    }
+    return value;
+}
+function getConsistentSeriesNameColor(inputString) {
+    return getConsistentColor(inputString, inputString.toLowerCase().includes('error'));
+}
+function getDefaultSeriesColor(props) {
+    const { categoricalPalette, muiPrimaryColor, seriesName } = props;
+    // Fallback is unlikely to set unless echarts theme palette in charts theme provider is undefined.
+    const fallbackColor = Array.isArray(categoricalPalette) && categoricalPalette[0] ? categoricalPalette[0] // Needed since echarts color property isn't always an array.
+     : muiPrimaryColor;
+    return getAutoPaletteColor(seriesName, fallbackColor);
+}
+function getAutoPaletteColor(name, fallbackColor) {
+    // corresponds to 'Auto' in palette.kind for generative color palette
+    const generatedColor = getConsistentSeriesNameColor(name);
+    return generatedColor ?? fallbackColor;
+}

package/lib/cjs/index-federation.js

@@ -1,15 +1,3 @@
-// Copyright 2024 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
 "use strict";
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -52,4 +40,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

package/lib/cjs/index.js

@@ -8,11 +8,9 @@ Object.defineProperty(exports, "getPluginModule", {
         return _getPluginModule.getPluginModule;
     }
 });
-_export_star(require(".//PieChartPanel"), exports);
+_export_star(require("./PieChartPanel"), exports);
 const _getPluginModule = require("./getPluginModule");
-_export_star(require("./model"), exports);
-_export_star(require("./palette"), exports);
-_export_star(require("./palette-gen"), exports);
+_export_star(require("./colors"), exports);
 _export_star(require("./pie-chart-model"), exports);
 _export_star(require("./PieChart"), exports);
 _export_star(require("./PieChartOptionsEditorSettings"), exports);

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

@@ -17,20 +17,20 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    DEFAULT_FORMAT: function() {
+    get DEFAULT_FORMAT () {
         return DEFAULT_FORMAT;
     },
-    DEFAULT_MODE: function() {
+    get DEFAULT_MODE () {
         return DEFAULT_MODE;
     },
-    DEFAULT_SORT: function() {
+    get DEFAULT_SORT () {
         return DEFAULT_SORT;
     },
-    createInitialPieChartOptions: function() {
+    get createInitialPieChartOptions () {
         return createInitialPieChartOptions;
     }
 });
@@ -45,8 +45,9 @@ function createInitialPieChartOptions() {
     return {
         calculation: _core.DEFAULT_CALCULATION,
         format: DEFAULT_FORMAT,
+        mode: DEFAULT_MODE,
         radius: 50,
-        sort: DEFAULT_SORT,
-        mode: DEFAULT_MODE
+        showLabels: false,
+        sort: DEFAULT_SORT
     };
 }

package/lib/cjs/utils.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    calculatePercentages: function() {
+    get calculatePercentages () {
         return calculatePercentages;
     },
-    sortSeriesData: function() {
+    get sortSeriesData () {
         return sortSeriesData;
     }
 });
@@ -35,38 +35,18 @@ function calculatePercentages(data) {
         const percentage = (seriesData.value ?? 0) / sum * 100;
         return {
             ...seriesData,
-            value: percentage
+            value: Number(percentage.toFixed(2))
         };
     });
 }
 function sortSeriesData(data, sortOrder = _piechartmodel.DEFAULT_SORT) {
-    if (sortOrder === 'asc') {
-        // sort in ascending order by value
-        return data.sort((a, b)=>{
-            if (a.value === null) {
-                return 1;
-            }
-            if (b.value === null) {
-                return -1;
-            }
-            if (a.value === b.value) {
-                return 0;
-            }
-            return a.value < b.value ? 1 : -1;
-        });
-    } else {
-        // sort in descending order by value
-        return data.sort((a, b)=>{
-            if (a.value === null) {
-                return -1;
-            }
-            if (b.value === null) {
-                return 1;
-            }
-            if (a.value === b.value) {
-                return 0;
-            }
-            return a.value < b.value ? -1 : 1;
-        });
-    }
+    return data.sort((a, b)=>{
+        // Handle null values - push them to the end regardless of sort order
+        if (a.value === null && b.value === null) return 0;
+        if (a.value === null) return 1;
+        if (b.value === null) return -1;
+        // Sort by value
+        const diff = (a.value ?? 0) - (b.value ?? 0);
+        return sortOrder === 'asc' ? diff : -diff;
+    });
 }