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

package/lib/colors.js

@@ -0,0 +1,192 @@
+// 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.
+import ColorHash from 'color-hash';
+// 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({
+    hue: {
+        min: ERROR_HUE_CUTOFF,
+        max: 360
+    }
+});
+const redColorGenerator = new ColorHash({
+    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;
+}
+/**
+ * Helper function to generate gradient colors for series within a query
+ */ export 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)}`;
+}
+/**
+ * Generates a list of color strings for a given number of series using a categorical palette.
+ * When the number of series exceeds the palette size, it cycles through the palette
+ * and applies gradients to create visual distinction.
+ * @param totalSeries - The total number of series that need colors
+ * @param colorPalette - Array of color strings to use as the base palette
+ * @returns Array of color strings, one for each series
+ */ export 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;
+}
+/**
+ * Default classical qualitative palette that cycles through the colors array by index.
+ * When colors start repeating (after exhausting the palette), applies gradients for distinction.
+ */ export 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 = {};
+/**
+ * Return a consistent color for (name, error) tuple
+ */ export function getConsistentColor(name, error) {
+    const key = `${name}_____${error}`;
+    let value = colorLookup[key];
+    if (!value) {
+        value = computeConsistentColor(name, error);
+        colorLookup[key] = value;
+    }
+    return value;
+}
+/*
+ * Generate a consistent series name color (if series name includes 'error', it will have a red hue).
+ */ export function getConsistentSeriesNameColor(inputString) {
+    return getConsistentColor(inputString, inputString.toLowerCase().includes('error'));
+}
+/**
+ * Get line color as well as color for tooltip and legend, account for whether palette is 'categorical' or 'auto' aka generative
+ */ export 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);
+}
+/**
+ * Get color from generative color palette, this approaches uses series name as the seed and
+ * allows for consistent colors across panels (when all panels use this approach).
+ */ export function getAutoPaletteColor(name, fallbackColor) {
+    // corresponds to 'Auto' in palette.kind for generative color palette
+    const generatedColor = getConsistentSeriesNameColor(name);
+    return generatedColor ?? fallbackColor;
+}
+
+//# sourceMappingURL=colors.js.map

package/lib/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/colors.ts"],"sourcesContent":["// Copyright 2025 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 ColorHash from 'color-hash';\n\n// Valid hue values are 0 to 360 and can be adjusted to control the generated colors.\n// More info: https://github.com/zenozeng/color-hash#custom-hue\n// Picked min of 20 and max of 360 to exclude common threshold colors (red).\n// Items with \"error\" in them will always be generated as red.\nconst ERROR_HUE_CUTOFF = 20;\nconst colorGenerator = new ColorHash({ hue: { min: ERROR_HUE_CUTOFF, max: 360 } });\nconst redColorGenerator = new ColorHash({ hue: { min: 0, max: ERROR_HUE_CUTOFF } });\n\nexport interface SeriesColorProps {\n  categoricalPalette: string[];\n  muiPrimaryColor: string;\n  seriesName: string;\n}\n\n// Color utility functions\n/**\n * Converts a number to a 2-digit hex string\n */\nfunction toHex(n: number): string {\n  const hex = n.toString(16);\n  return hex.length === 1 ? '0' + hex : hex;\n}\n\n/**\n * Converts a hex color string to RGB values\n */\nfunction hexToRgb(hex: string): { r: number; g: number; b: number } {\n  const cleanHex = hex.replace('#', '');\n  return {\n    r: parseInt(cleanHex.substring(0, 2), 16),\n    g: parseInt(cleanHex.substring(2, 4), 16),\n    b: parseInt(cleanHex.substring(4, 6), 16),\n  };\n}\n\n/**\n * Returns a deterministic number between 0 and 1 for a given string\n */\nfunction stringToSeed(str: string): number {\n  let hash = 0;\n  for (let i = 0; i < str.length; i++) {\n    const char = str.charCodeAt(i);\n    hash = (hash << 5) - hash + char;\n    hash = hash & hash; // Convert to 32-bit integer\n  }\n  // Convert to positive number and normalize to 0-1 range\n  return Math.abs(hash) / 2147483647;\n}\n\n/**\n * Helper function to generate gradient colors for series within a query\n */\nexport function generateGradientColor(baseColor: string, factor: number): string {\n  // Convert hex color to RGB\n  const { r, g, b } = hexToRgb(baseColor);\n\n  const newR = Math.round(r * factor);\n  const newG = Math.round(g * factor);\n  const newB = Math.round(b * factor);\n\n  return `#${toHex(newR)}${toHex(newG)}${toHex(newB)}`;\n}\n\n/**\n * Generates a list of color strings for a given number of series using a categorical palette.\n * When the number of series exceeds the palette size, it cycles through the palette\n * and applies gradients to create visual distinction.\n * @param totalSeries - The total number of series that need colors\n * @param colorPalette - Array of color strings to use as the base palette\n * @returns Array of color strings, one for each series\n */\nexport function getSeriesColor(seriesNames: string[], colorPalette?: string[]): string[] {\n  const totalSeries = seriesNames.length;\n\n  if (totalSeries <= 0) {\n    return [];\n  }\n\n  const colors: string[] = [];\n\n  // undefined palette - default\n  if (colorPalette === undefined) {\n    for (let nameIndex = 0; nameIndex < seriesNames.length; nameIndex++) {\n      const seriesColor = getDefaultSeriesColor({\n        categoricalPalette: ['#ff0000'],\n        muiPrimaryColor: '#ff0000',\n        seriesName: seriesNames[nameIndex] || '',\n      });\n      colors.push(seriesColor);\n    }\n    return colors;\n  }\n\n  // single color palette - generate gradients from that color\n  if (colorPalette.length === 1) {\n    const baseColor = colorPalette[0] ?? '#ff0000';\n    for (let i = 0; i < totalSeries; i++) {\n      if (i === 0) {\n        colors.push(baseColor);\n      } else {\n        const gradientFactor = 1 * ((totalSeries - i) / totalSeries);\n        colors.push(generateGradientColor(baseColor, gradientFactor));\n      }\n    }\n    return colors.sort((a, b) => {\n      const seedA = stringToSeed(seriesNames[colors.indexOf(a)] || 'fallback');\n      const seedB = stringToSeed(seriesNames[colors.indexOf(b)] || 'fallback');\n      return seedA - seedB;\n    });\n  }\n\n  // multi color palette - loops through colors and adds gradient when palette is exhausted\n  for (let i = 0; i < totalSeries; i++) {\n    const color = getColor(colorPalette, i);\n    colors.push(color);\n  }\n\n  if (totalSeries > colorPalette.length) {\n    return colors.sort((a, b) => {\n      const seedA = stringToSeed(seriesNames[colors.indexOf(a)] || 'fallback');\n      const seedB = stringToSeed(seriesNames[colors.indexOf(b)] || 'fallback');\n      return seedA - seedB;\n    });\n  }\n  return colors;\n}\n\n/**\n * Default classical qualitative palette that cycles through the colors array by index.\n * When colors start repeating (after exhausting the palette), applies gradients for distinction.\n */\nexport function getColor(palette: string[], seriesIndex: number): string {\n  // Handle undefined or empty palette\n  if (!palette || palette.length === 0) {\n    return '#ff0000';\n  }\n\n  const paletteTotalColors = palette.length;\n  const paletteIndex = seriesIndex % paletteTotalColors;\n  const baseColor = palette[paletteIndex] ?? '#ff0000';\n\n  // If we haven't exhausted the palette yet, use the original color\n  if (seriesIndex < paletteTotalColors) {\n    return baseColor;\n  }\n\n  // Calculate which \"cycle\" we're in (0 = first repeat, 1 = second repeat, etc.)\n  const cycleNumber = Math.floor(seriesIndex / paletteTotalColors);\n\n  // Apply gradient based on cycle number to create visual distinction\n  const gradientFactor = Math.min(1 - cycleNumber * 0.2, 1);\n  return generateGradientColor(baseColor, gradientFactor);\n}\n\nfunction computeConsistentColor(name: string, error: boolean): string {\n  const [hue, saturation, lightness] = error ? redColorGenerator.hsl(name) : colorGenerator.hsl(name);\n  const saturationPercent = `${(saturation * 100).toFixed(0)}%`;\n  const lightnessPercent = `${(lightness * 100).toFixed(0)}%`;\n  return `hsla(${hue.toFixed(2)},${saturationPercent},${lightnessPercent},0.9)`;\n}\n\n// To check whether a color has already been generated for a given string.\n// TODO: Predefined color aliases will be defined here\nconst colorLookup: Record<string, string> = {};\n\n/**\n * Return a consistent color for (name, error) tuple\n */\nexport function getConsistentColor(name: string, error: boolean): string {\n  const key = `${name}_____${error}`;\n  let value = colorLookup[key];\n  if (!value) {\n    value = computeConsistentColor(name, error);\n    colorLookup[key] = value;\n  }\n  return value;\n}\n\n/*\n * Generate a consistent series name color (if series name includes 'error', it will have a red hue).\n */\nexport function getConsistentSeriesNameColor(inputString: string): string {\n  return getConsistentColor(inputString, inputString.toLowerCase().includes('error'));\n}\n\n/**\n * Get line color as well as color for tooltip and legend, account for whether palette is 'categorical' or 'auto' aka generative\n */\nexport function getDefaultSeriesColor(props: SeriesColorProps): string {\n  const { categoricalPalette, muiPrimaryColor, seriesName } = props;\n\n  // Fallback is unlikely to set unless echarts theme palette in charts theme provider is undefined.\n  const fallbackColor =\n    Array.isArray(categoricalPalette) && categoricalPalette[0]\n      ? (categoricalPalette[0] as string) // Needed since echarts color property isn't always an array.\n      : muiPrimaryColor;\n\n  return getAutoPaletteColor(seriesName, fallbackColor);\n}\n\n/**\n * Get color from generative color palette, this approaches uses series name as the seed and\n * allows for consistent colors across panels (when all panels use this approach).\n */\nexport function getAutoPaletteColor(name: string, fallbackColor: string): string {\n  // corresponds to 'Auto' in palette.kind for generative color palette\n  const generatedColor = getConsistentSeriesNameColor(name);\n  return generatedColor ?? fallbackColor;\n}\n"],"names":["ColorHash","ERROR_HUE_CUTOFF","colorGenerator","hue","min","max","redColorGenerator","toHex","n","hex","toString","length","hexToRgb","cleanHex","replace","r","parseInt","substring","g","b","stringToSeed","str","hash","i","char","charCodeAt","Math","abs","generateGradientColor","baseColor","factor","newR","round","newG","newB","getSeriesColor","seriesNames","colorPalette","totalSeries","colors","undefined","nameIndex","seriesColor","getDefaultSeriesColor","categoricalPalette","muiPrimaryColor","seriesName","push","gradientFactor","sort","a","seedA","indexOf","seedB","color","getColor","palette","seriesIndex","paletteTotalColors","paletteIndex","cycleNumber","floor","computeConsistentColor","name","error","saturation","lightness","hsl","saturationPercent","toFixed","lightnessPercent","colorLookup","getConsistentColor","key","value","getConsistentSeriesNameColor","inputString","toLowerCase","includes","props","fallbackColor","Array","isArray","getAutoPaletteColor","generatedColor"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,eAAe,aAAa;AAEnC,qFAAqF;AACrF,+DAA+D;AAC/D,4EAA4E;AAC5E,8DAA8D;AAC9D,MAAMC,mBAAmB;AACzB,MAAMC,iBAAiB,IAAIF,UAAU;IAAEG,KAAK;QAAEC,KAAKH;QAAkBI,KAAK;IAAI;AAAE;AAChF,MAAMC,oBAAoB,IAAIN,UAAU;IAAEG,KAAK;QAAEC,KAAK;QAAGC,KAAKJ;IAAiB;AAAE;AAQjF,0BAA0B;AAC1B;;CAEC,GACD,SAASM,MAAMC,CAAS;IACtB,MAAMC,MAAMD,EAAEE,QAAQ,CAAC;IACvB,OAAOD,IAAIE,MAAM,KAAK,IAAI,MAAMF,MAAMA;AACxC;AAEA;;CAEC,GACD,SAASG,SAASH,GAAW;IAC3B,MAAMI,WAAWJ,IAAIK,OAAO,CAAC,KAAK;IAClC,OAAO;QACLC,GAAGC,SAASH,SAASI,SAAS,CAAC,GAAG,IAAI;QACtCC,GAAGF,SAASH,SAASI,SAAS,CAAC,GAAG,IAAI;QACtCE,GAAGH,SAASH,SAASI,SAAS,CAAC,GAAG,IAAI;IACxC;AACF;AAEA;;CAEC,GACD,SAASG,aAAaC,GAAW;IAC/B,IAAIC,OAAO;IACX,IAAK,IAAIC,IAAI,GAAGA,IAAIF,IAAIV,MAAM,EAAEY,IAAK;QACnC,MAAMC,OAAOH,IAAII,UAAU,CAACF;QAC5BD,OAAO,AAACA,CAAAA,QAAQ,CAAA,IAAKA,OAAOE;QAC5BF,OAAOA,OAAOA,MAAM,4BAA4B;IAClD;IACA,wDAAwD;IACxD,OAAOI,KAAKC,GAAG,CAACL,QAAQ;AAC1B;AAEA;;CAEC,GACD,OAAO,SAASM,sBAAsBC,SAAiB,EAAEC,MAAc;IACrE,2BAA2B;IAC3B,MAAM,EAAEf,CAAC,EAAEG,CAAC,EAAEC,CAAC,EAAE,GAAGP,SAASiB;IAE7B,MAAME,OAAOL,KAAKM,KAAK,CAACjB,IAAIe;IAC5B,MAAMG,OAAOP,KAAKM,KAAK,CAACd,IAAIY;IAC5B,MAAMI,OAAOR,KAAKM,KAAK,CAACb,IAAIW;IAE5B,OAAO,CAAC,CAAC,EAAEvB,MAAMwB,QAAQxB,MAAM0B,QAAQ1B,MAAM2B,OAAO;AACtD;AAEA;;;;;;;CAOC,GACD,OAAO,SAASC,eAAeC,WAAqB,EAAEC,YAAuB;IAC3E,MAAMC,cAAcF,YAAYzB,MAAM;IAEtC,IAAI2B,eAAe,GAAG;QACpB,OAAO,EAAE;IACX;IAEA,MAAMC,SAAmB,EAAE;IAE3B,8BAA8B;IAC9B,IAAIF,iBAAiBG,WAAW;QAC9B,IAAK,IAAIC,YAAY,GAAGA,YAAYL,YAAYzB,MAAM,EAAE8B,YAAa;YACnE,MAAMC,cAAcC,sBAAsB;gBACxCC,oBAAoB;oBAAC;iBAAU;gBAC/BC,iBAAiB;gBACjBC,YAAYV,WAAW,CAACK,UAAU,IAAI;YACxC;YACAF,OAAOQ,IAAI,CAACL;QACd;QACA,OAAOH;IACT;IAEA,4DAA4D;IAC5D,IAAIF,aAAa1B,MAAM,KAAK,GAAG;QAC7B,MAAMkB,YAAYQ,YAAY,CAAC,EAAE,IAAI;QACrC,IAAK,IAAId,IAAI,GAAGA,IAAIe,aAAaf,IAAK;YACpC,IAAIA,MAAM,GAAG;gBACXgB,OAAOQ,IAAI,CAAClB;YACd,OAAO;gBACL,MAAMmB,iBAAiB,IAAK,CAAA,AAACV,CAAAA,cAAcf,CAAAA,IAAKe,WAAU;gBAC1DC,OAAOQ,IAAI,CAACnB,sBAAsBC,WAAWmB;YAC/C;QACF;QACA,OAAOT,OAAOU,IAAI,CAAC,CAACC,GAAG/B;YACrB,MAAMgC,QAAQ/B,aAAagB,WAAW,CAACG,OAAOa,OAAO,CAACF,GAAG,IAAI;YAC7D,MAAMG,QAAQjC,aAAagB,WAAW,CAACG,OAAOa,OAAO,CAACjC,GAAG,IAAI;YAC7D,OAAOgC,QAAQE;QACjB;IACF;IAEA,yFAAyF;IACzF,IAAK,IAAI9B,IAAI,GAAGA,IAAIe,aAAaf,IAAK;QACpC,MAAM+B,QAAQC,SAASlB,cAAcd;QACrCgB,OAAOQ,IAAI,CAACO;IACd;IAEA,IAAIhB,cAAcD,aAAa1B,MAAM,EAAE;QACrC,OAAO4B,OAAOU,IAAI,CAAC,CAACC,GAAG/B;YACrB,MAAMgC,QAAQ/B,aAAagB,WAAW,CAACG,OAAOa,OAAO,CAACF,GAAG,IAAI;YAC7D,MAAMG,QAAQjC,aAAagB,WAAW,CAACG,OAAOa,OAAO,CAACjC,GAAG,IAAI;YAC7D,OAAOgC,QAAQE;QACjB;IACF;IACA,OAAOd;AACT;AAEA;;;CAGC,GACD,OAAO,SAASgB,SAASC,OAAiB,EAAEC,WAAmB;IAC7D,oCAAoC;IACpC,IAAI,CAACD,WAAWA,QAAQ7C,MAAM,KAAK,GAAG;QACpC,OAAO;IACT;IAEA,MAAM+C,qBAAqBF,QAAQ7C,MAAM;IACzC,MAAMgD,eAAeF,cAAcC;IACnC,MAAM7B,YAAY2B,OAAO,CAACG,aAAa,IAAI;IAE3C,kEAAkE;IAClE,IAAIF,cAAcC,oBAAoB;QACpC,OAAO7B;IACT;IAEA,+EAA+E;IAC/E,MAAM+B,cAAclC,KAAKmC,KAAK,CAACJ,cAAcC;IAE7C,oEAAoE;IACpE,MAAMV,iBAAiBtB,KAAKtB,GAAG,CAAC,IAAIwD,cAAc,KAAK;IACvD,OAAOhC,sBAAsBC,WAAWmB;AAC1C;AAEA,SAASc,uBAAuBC,IAAY,EAAEC,KAAc;IAC1D,MAAM,CAAC7D,KAAK8D,YAAYC,UAAU,GAAGF,QAAQ1D,kBAAkB6D,GAAG,CAACJ,QAAQ7D,eAAeiE,GAAG,CAACJ;IAC9F,MAAMK,oBAAoB,GAAG,AAACH,CAAAA,aAAa,GAAE,EAAGI,OAAO,CAAC,GAAG,CAAC,CAAC;IAC7D,MAAMC,mBAAmB,GAAG,AAACJ,CAAAA,YAAY,GAAE,EAAGG,OAAO,CAAC,GAAG,CAAC,CAAC;IAC3D,OAAO,CAAC,KAAK,EAAElE,IAAIkE,OAAO,CAAC,GAAG,CAAC,EAAED,kBAAkB,CAAC,EAAEE,iBAAiB,KAAK,CAAC;AAC/E;AAEA,0EAA0E;AAC1E,sDAAsD;AACtD,MAAMC,cAAsC,CAAC;AAE7C;;CAEC,GACD,OAAO,SAASC,mBAAmBT,IAAY,EAAEC,KAAc;IAC7D,MAAMS,MAAM,GAAGV,KAAK,KAAK,EAAEC,OAAO;IAClC,IAAIU,QAAQH,WAAW,CAACE,IAAI;IAC5B,IAAI,CAACC,OAAO;QACVA,QAAQZ,uBAAuBC,MAAMC;QACrCO,WAAW,CAACE,IAAI,GAAGC;IACrB;IACA,OAAOA;AACT;AAEA;;CAEC,GACD,OAAO,SAASC,6BAA6BC,WAAmB;IAC9D,OAAOJ,mBAAmBI,aAAaA,YAAYC,WAAW,GAAGC,QAAQ,CAAC;AAC5E;AAEA;;CAEC,GACD,OAAO,SAASnC,sBAAsBoC,KAAuB;IAC3D,MAAM,EAAEnC,kBAAkB,EAAEC,eAAe,EAAEC,UAAU,EAAE,GAAGiC;IAE5D,kGAAkG;IAClG,MAAMC,gBACJC,MAAMC,OAAO,CAACtC,uBAAuBA,kBAAkB,CAAC,EAAE,GACrDA,kBAAkB,CAAC,EAAE,CAAY,6DAA6D;OAC/FC;IAEN,OAAOsC,oBAAoBrC,YAAYkC;AACzC;AAEA;;;CAGC,GACD,OAAO,SAASG,oBAAoBpB,IAAY,EAAEiB,aAAqB;IACrE,qEAAqE;IACrE,MAAMI,iBAAiBT,6BAA6BZ;IACpD,OAAOqB,kBAAkBJ;AAC3B"}

package/lib/index.d.ts

@@ -1,8 +1,6 @@
-export * from './/PieChartPanel';
+export * from './PieChartPanel';
 export { getPluginModule } from './getPluginModule';
-export * from './model';
-export * from './palette';
-export * from './palette-gen';
+export * from './colors';
 export * from './pie-chart-model';
 export * from './PieChart';
 export * from './PieChartOptionsEditorSettings';

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,iCAAiC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC;AAC3B,cAAc,iCAAiC,CAAC"}

package/lib/index.js

@@ -1,8 +1,6 @@
-export * from './/PieChartPanel';
+export * from './PieChartPanel';
 export { getPluginModule } from './getPluginModule';
-export * from './model';
-export * from './palette';
-export * from './palette-gen';
+export * from './colors';
 export * from './pie-chart-model';
 export * from './PieChart';
 export * from './PieChartOptionsEditorSettings';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './/PieChartPanel';\nexport { getPluginModule } from './getPluginModule';\nexport * from './model';\nexport * from './palette';\nexport * from './palette-gen';\nexport * from './pie-chart-model';\nexport * from './PieChart';\nexport * from './PieChartOptionsEditorSettings';\n"],"names":["getPluginModule"],"mappings":"AAAA,cAAc,mBAAmB;AACjC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,UAAU;AACxB,cAAc,YAAY;AAC1B,cAAc,gBAAgB;AAC9B,cAAc,oBAAoB;AAClC,cAAc,aAAa;AAC3B,cAAc,kCAAkC"}
+{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["export * from './PieChartPanel';\nexport { getPluginModule } from './getPluginModule';\nexport * from './colors';\nexport * from './pie-chart-model';\nexport * from './PieChart';\nexport * from './PieChartOptionsEditorSettings';\n"],"names":["getPluginModule"],"mappings":"AAAA,cAAc,kBAAkB;AAChC,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,WAAW;AACzB,cAAc,oBAAoB;AAClC,cAAc,aAAa;AAC3B,cAAc,kCAAkC"}

package/lib/pie-chart-model.d.ts

@@ -8,12 +8,14 @@ export interface BarChartDefinition extends Definition<PieChartOptions> {
     kind: 'PieChart';
 }
 export interface PieChartOptions {
-    legend?: LegendSpecOptions;
     calculation: CalculationType;
-    radius: number;
     format?: FormatOptions;
-    sort?: SortOption;
+    colorPalette?: string[];
+    legend?: LegendSpecOptions;
     mode?: ModeOption;
+    radius: number;
+    showLabels?: boolean;
+    sort?: SortOption;
 }
 export type PieChartOptionsEditorProps = OptionsEditorProps<PieChartOptions>;
 export declare function createInitialPieChartOptions(): PieChartOptions;

package/lib/pie-chart-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pie-chart-model.d.ts","sourceRoot":"","sources":["../../src/pie-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAuB,UAAU,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAElF,eAAO,MAAM,cAAc,EAAE,aAAsD,CAAC;AACpF,eAAO,MAAM,YAAY,EAAE,UAAmB,CAAC;AAC/C,eAAO,MAAM,YAAY,EAAE,UAAoB,CAAC;AAEhD,MAAM,WAAW,kBAAmB,SAAQ,UAAU,CAAC,eAAe,CAAC;IACrE,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;AAE7E,wBAAgB,4BAA4B,IAAI,eAAe,CAQ9D"}
+{"version":3,"file":"pie-chart-model.d.ts","sourceRoot":"","sources":["../../src/pie-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAuB,UAAU,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACnG,OAAO,EAAE,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAElF,eAAO,MAAM,cAAc,EAAE,aAAsD,CAAC;AACpF,eAAO,MAAM,YAAY,EAAE,UAAmB,CAAC;AAC/C,eAAO,MAAM,YAAY,EAAE,UAAoB,CAAC;AAEhD,MAAM,WAAW,kBAAmB,SAAQ,UAAU,CAAC,eAAe,CAAC;IACrE,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB;AAED,MAAM,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;AAE7E,wBAAgB,4BAA4B,IAAI,eAAe,CAS9D"}

package/lib/pie-chart-model.js

@@ -21,9 +21,10 @@ export function createInitialPieChartOptions() {
     return {
         calculation: DEFAULT_CALCULATION,
         format: DEFAULT_FORMAT,
+        mode: DEFAULT_MODE,
         radius: 50,
-        sort: DEFAULT_SORT,
-        mode: DEFAULT_MODE
+        showLabels: false,
+        sort: DEFAULT_SORT
     };
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/pie-chart-model.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 { ModeOption, SortOption } from '@perses-dev/components';\nimport { CalculationType, DEFAULT_CALCULATION, Definition, FormatOptions } from '@perses-dev/core';\nimport { LegendSpecOptions, OptionsEditorProps } from '@perses-dev/plugin-system';\n\nexport const DEFAULT_FORMAT: FormatOptions = { unit: 'decimal', shortValues: true };\nexport const DEFAULT_SORT: SortOption = 'desc';\nexport const DEFAULT_MODE: ModeOption = 'value';\n\nexport interface BarChartDefinition extends Definition<PieChartOptions> {\n  kind: 'PieChart';\n}\n\nexport interface PieChartOptions {\n  legend?: LegendSpecOptions;\n  calculation: CalculationType;\n  radius: number;\n  format?: FormatOptions;\n  sort?: SortOption;\n  mode?: ModeOption;\n}\n\nexport type PieChartOptionsEditorProps = OptionsEditorProps<PieChartOptions>;\n\nexport function createInitialPieChartOptions(): PieChartOptions {\n  return {\n    calculation: DEFAULT_CALCULATION,\n    format: DEFAULT_FORMAT,\n    radius: 50,\n    sort: DEFAULT_SORT,\n    mode: DEFAULT_MODE,\n  };\n}\n"],"names":["DEFAULT_CALCULATION","DEFAULT_FORMAT","unit","shortValues","DEFAULT_SORT","DEFAULT_MODE","createInitialPieChartOptions","calculation","format","radius","sort","mode"],"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,SAA0BA,mBAAmB,QAAmC,mBAAmB;AAGnG,OAAO,MAAMC,iBAAgC;IAAEC,MAAM;IAAWC,aAAa;AAAK,EAAE;AACpF,OAAO,MAAMC,eAA2B,OAAO;AAC/C,OAAO,MAAMC,eAA2B,QAAQ;AAiBhD,OAAO,SAASC;IACd,OAAO;QACLC,aAAaP;QACbQ,QAAQP;QACRQ,QAAQ;QACRC,MAAMN;QACNO,MAAMN;IACR;AACF"}
+{"version":3,"sources":["../../src/pie-chart-model.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 { ModeOption, SortOption } from '@perses-dev/components';\nimport { CalculationType, DEFAULT_CALCULATION, Definition, FormatOptions } from '@perses-dev/core';\nimport { LegendSpecOptions, OptionsEditorProps } from '@perses-dev/plugin-system';\n\nexport const DEFAULT_FORMAT: FormatOptions = { unit: 'decimal', shortValues: true };\nexport const DEFAULT_SORT: SortOption = 'desc';\nexport const DEFAULT_MODE: ModeOption = 'value';\n\nexport interface BarChartDefinition extends Definition<PieChartOptions> {\n  kind: 'PieChart';\n}\n\nexport interface PieChartOptions {\n  calculation: CalculationType;\n  format?: FormatOptions;\n  colorPalette?: string[];\n  legend?: LegendSpecOptions;\n  mode?: ModeOption;\n  radius: number;\n  showLabels?: boolean;\n  sort?: SortOption;\n}\n\nexport type PieChartOptionsEditorProps = OptionsEditorProps<PieChartOptions>;\n\nexport function createInitialPieChartOptions(): PieChartOptions {\n  return {\n    calculation: DEFAULT_CALCULATION,\n    format: DEFAULT_FORMAT,\n    mode: DEFAULT_MODE,\n    radius: 50,\n    showLabels: false,\n    sort: DEFAULT_SORT,\n  };\n}\n"],"names":["DEFAULT_CALCULATION","DEFAULT_FORMAT","unit","shortValues","DEFAULT_SORT","DEFAULT_MODE","createInitialPieChartOptions","calculation","format","mode","radius","showLabels","sort"],"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,SAA0BA,mBAAmB,QAAmC,mBAAmB;AAGnG,OAAO,MAAMC,iBAAgC;IAAEC,MAAM;IAAWC,aAAa;AAAK,EAAE;AACpF,OAAO,MAAMC,eAA2B,OAAO;AAC/C,OAAO,MAAMC,eAA2B,QAAQ;AAmBhD,OAAO,SAASC;IACd,OAAO;QACLC,aAAaP;QACbQ,QAAQP;QACRQ,MAAMJ;QACNK,QAAQ;QACRC,YAAY;QACZC,MAAMR;IACR;AACF"}

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,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"}
+{"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,CAWzG"}

package/lib/utils.js

@@ -17,40 +17,20 @@ export function calculatePercentages(data) {
         const percentage = (seriesData.value ?? 0) / sum * 100;
         return {
             ...seriesData,
-            value: percentage
+            value: Number(percentage.toFixed(2))
         };
     });
 }
 export function sortSeriesData(data, sortOrder = 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;
+    });
 }
 
 //# sourceMappingURL=utils.js.map

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<{ 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"}
+{"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: Number(percentage.toFixed(2)),\n    };\n  });\n}\n\nexport function sortSeriesData(data: PieChartData[], sortOrder: SortOption = DEFAULT_SORT): PieChartData[] {\n  return data.sort((a, b) => {\n    // Handle null values - push them to the end regardless of sort order\n    if (a.value === null && b.value === null) return 0;\n    if (a.value === null) return 1;\n    if (b.value === null) return -1;\n\n    // Sort by value\n    const diff = (a.value ?? 0) - (b.value ?? 0);\n    return sortOrder === 'asc' ? diff : -diff;\n  });\n}\n"],"names":["DEFAULT_SORT","calculatePercentages","data","sum","reduce","accumulator","value","map","seriesData","percentage","Number","toFixed","sortSeriesData","sortOrder","sort","a","b","diff"],"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,OAAOI,OAAOD,WAAWE,OAAO,CAAC;QACnC;IACF;AACF;AAEA,OAAO,SAASC,eAAeV,IAAoB,EAAEW,YAAwBb,YAAY;IACvF,OAAOE,KAAKY,IAAI,CAAC,CAACC,GAAGC;QACnB,qEAAqE;QACrE,IAAID,EAAET,KAAK,KAAK,QAAQU,EAAEV,KAAK,KAAK,MAAM,OAAO;QACjD,IAAIS,EAAET,KAAK,KAAK,MAAM,OAAO;QAC7B,IAAIU,EAAEV,KAAK,KAAK,MAAM,OAAO,CAAC;QAE9B,gBAAgB;QAChB,MAAMW,OAAO,AAACF,CAAAA,EAAET,KAAK,IAAI,CAAA,IAAMU,CAAAA,EAAEV,KAAK,IAAI,CAAA;QAC1C,OAAOO,cAAc,QAAQI,OAAO,CAACA;IACvC;AACF"}

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "PieChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.9.1",
+      "buildVersion": "0.12.0",
       "buildName": "@perses-dev/pie-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/PieChart.684c09d1.js",
+      "name": "__mf/js/PieChart.1d58bffe.js",
       "path": "",
       "type": "global"
     },
@@ -22,7 +22,7 @@
     "globalName": "PieChart",
     "pluginVersion": "0.19.1",
     "prefetchInterface": false,
-    "publicPath": "/plugins/PieChart/"
+    "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/PieChart/\"; }"
   },
   "shared": [
     {
@@ -49,7 +49,7 @@
       "name": "@emotion/styled",
       "version": "11.14.0",
       "singleton": true,
-      "requiredVersion": "^11.14.0",
+      "requiredVersion": "^11.6.0",
       "assets": {
         "js": {
           "async": [],
@@ -69,7 +69,7 @@
       "name": "@hookform/resolvers",
       "version": "3.10.0",
       "singleton": true,
-      "requiredVersion": "^3.10.0",
+      "requiredVersion": "^3.2.0",
       "assets": {
         "js": {
           "async": [],
@@ -87,14 +87,14 @@
     {
       "id": "PieChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.1",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/288.4cad0403.js"
+            "__mf/js/async/922.560b8115.js"
           ]
         },
         "css": {
@@ -106,14 +106,14 @@
     {
       "id": "PieChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.1",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.1",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/109.77dcc7d9.js"
+            "__mf/js/async/711.2e914849.js"
           ]
         },
         "css": {
@@ -132,7 +132,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.a825d10b.js"
+            "__mf/js/async/75.b6a33f75.js"
           ]
         },
         "css": {
@@ -146,7 +146,7 @@
       "name": "echarts",
       "version": "5.5.0",
       "singleton": true,
-      "requiredVersion": "^undefined",
+      "requiredVersion": "5.5.0",
       "assets": {
         "js": {
           "async": [],
@@ -216,25 +216,6 @@
           "sync": []
         }
       }
-    },
-    {
-      "id": "PieChart:date-fns-tz",
-      "name": "date-fns-tz",
-      "version": "3.2.0",
-      "singleton": true,
-      "requiredVersion": "^3.2.0",
-      "assets": {
-        "js": {
-          "async": [],
-          "sync": [
-            "__mf/js/async/740.254a5697.js"
-          ]
-        },
-        "css": {
-          "async": [],
-          "sync": []
-        }
-      }
     }
   ],
   "remotes": [],
@@ -245,27 +226,26 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/470.1e913aa7.js",
-            "__mf/js/async/680.f1da299d.js",
-            "__mf/js/async/298.707087d2.js",
+            "__mf/js/async/567.672f2dce.js",
+            "__mf/js/async/264.6e9f3f27.js",
+            "__mf/js/async/298.e575048a.js",
             "__mf/js/async/707.c77cb775.js",
-            "__mf/js/async/__federation_expose_PieChart.3d887a98.js"
+            "__mf/js/async/__federation_expose_PieChart.6ae68990.js"
           ],
           "async": [
             "__mf/js/async/lib-router.5205dc27.js",
             "__mf/js/async/292.67519c5b.js",
-            "__mf/js/async/289.c295f73f.js",
+            "__mf/js/async/706.3e6ace36.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"
+            "__mf/js/async/398.9b0b9c83.js",
+            "__mf/js/async/156.1cf9ec35.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/263.80005a4a.css",
-            "__mf/css/async/341.80005a4a.css"
+            "__mf/css/async/263.d3010b86.css",
+            "__mf/css/async/341.d3010b86.css"
           ]
         }
       },