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

package/lib/PieChartPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 //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.
@@ -10,7 +11,6 @@
 // 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 { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ContentWithLegend, useChartsTheme, useId } from '@perses-dev/components';
 import { CalculationsMap, DEFAULT_LEGEND } from '@perses-dev/core';

package/lib/PieChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/PieChartPanel.tsx"],"sourcesContent":["//Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport {\n  ChartInstance,\n  ContentWithLegend,\n  LegendItem,\n  LegendProps,\n  SelectedLegendItemState,\n  TableColumnConfig,\n  useChartsTheme,\n  useId,\n} from '@perses-dev/components';\nimport { CalculationType, CalculationsMap, DEFAULT_LEGEND, TimeSeriesData } from '@perses-dev/core';\nimport { comparisonLegends, ComparisonValues, PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { PieChartOptions } from './pie-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\nimport { getSeriesColor } from './colors';\nimport { PieChartBase, PieChartData } from './PieChartBase';\n\nexport type PieChartPanelProps = PanelProps<PieChartOptions, TimeSeriesData>;\n\nexport function PieChartPanel(props: PieChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, sort, mode, legend: pieChartLegend, colorPalette: colorPalette },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const chartId = useId('time-series-panel');\n  const seriesNames = queryResults.flatMap((result) => result?.data.series?.map((series) => series.name) || []);\n\n  // Memoize the color list so it only regenerates when color/palette/series count changes\n  const colorList = useMemo(() => {\n    return getSeriesColor(seriesNames, colorPalette);\n  }, [colorPalette, seriesNames]);\n\n  const { pieChartData, legendItems, legendColumns } = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const pieChartData: PieChartData[] = [];\n    const legendItems: LegendItem[] = [];\n    const legendColumns: Array<TableColumnConfig<LegendItem>> = [];\n\n    queryResults.forEach((result, queryIndex) => {\n      const series = result?.data.series ?? [];\n\n      series.forEach((seriesData, seriesIndex) => {\n        const seriesId = `${chartId}${seriesData.name}${seriesIndex}${queryIndex}`;\n        const seriesColor = colorList[queryIndex * series.length + seriesIndex] ?? '#ff0000';\n\n        const seriesItem = {\n          id: seriesId,\n          value: calculate(seriesData.values) ?? null,\n          name: seriesData.formattedName ?? '',\n          itemStyle: {\n            color: seriesColor,\n          },\n        };\n\n        pieChartData.push(seriesItem);\n        legendItems.push({\n          id: seriesId,\n          label: seriesData.formattedName ?? '',\n          color: seriesColor,\n          data: {},\n        });\n      });\n    });\n\n    const sortedPieChartData = sortSeriesData(pieChartData, sort);\n\n    // Reorder legend items to reflect the current sorting order of series\n    const valueById = new Map(sortedPieChartData.map((pd) => [pd.id ?? pd.name, pd.value ?? 0]));\n    legendItems.sort((a, b) => {\n      const av = valueById.get(a.id) ?? 0;\n      const bv = valueById.get(b.id) ?? 0;\n      return sort === 'asc' ? av - bv : bv - av;\n    });\n\n    if (pieChartLegend?.values?.length && pieChartLegend?.mode === 'table') {\n      const { values } = pieChartLegend;\n      [...values].sort().forEach((v) => {\n        /* First, create a column for the current legend value */\n        legendColumns.push({\n          accessorKey: `data.${v}`,\n          header: comparisonLegends[v as ComparisonValues]?.label || v,\n          headerDescription: comparisonLegends[v as ComparisonValues]?.description,\n          width: 90,\n          align: 'right',\n          cellDescription: true,\n          enableSorting: true,\n        });\n        /* Then, settle the legend items related to this legend value */\n        switch (v) {\n          case 'abs':\n            legendItems.forEach((li) => {\n              const { value: itemAbsoluteValue } = pieChartData.find((pd) => li.id === pd.id) || {};\n              if (typeof itemAbsoluteValue === 'number' && li.data) {\n                li.data['abs'] = itemAbsoluteValue;\n              }\n            });\n            break;\n          case 'relative':\n            legendItems.forEach((li) => {\n              const { value: itemPercentageValue } =\n                calculatePercentages(sortedPieChartData).find((ppd) => li.id === ppd.id) || {};\n              if (typeof itemPercentageValue === 'number' && li.data) {\n                li.data['relative'] = `${itemPercentageValue.toFixed(2)}%`;\n              }\n            });\n            break;\n          default:\n            break;\n        }\n      });\n    }\n\n    return {\n      pieChartData: mode === 'percentage' ? calculatePercentages(sortedPieChartData) : sortedPieChartData,\n      legendItems,\n      legendColumns,\n    };\n  }, [calculation, sort, mode, queryResults, colorList, chartId, pieChartLegend]);\n\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n\n  if (!contentDimensions) return null;\n\n  return (\n    <Box sx={{ padding: `${contentPadding}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions?.width ?? 400}\n        height={adjustedContentDimensions?.height ?? 1000}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems,\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: legendColumns,\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              <PieChartBase\n                data={pieChartData}\n                width={width}\n                height={height}\n                showLabels={Boolean(props.spec.showLabels)}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["Box","ContentWithLegend","useChartsTheme","useId","CalculationsMap","DEFAULT_LEGEND","comparisonLegends","validateLegendSpec","merge","useMemo","useRef","useState","calculatePercentages","sortSeriesData","getSeriesColor","PieChartBase","PieChartPanel","props","spec","calculation","sort","mode","legend","pieChartLegend","colorPalette","contentDimensions","queryResults","chartsTheme","chartId","seriesNames","flatMap","result","data","series","map","name","colorList","pieChartData","legendItems","legendColumns","calculate","forEach","queryIndex","seriesData","seriesIndex","seriesId","seriesColor","length","seriesItem","id","value","values","formattedName","itemStyle","color","push","label","sortedPieChartData","valueById","Map","pd","a","b","av","get","bv","v","accessorKey","header","headerDescription","description","width","align","cellDescription","enableSorting","li","itemAbsoluteValue","find","itemPercentageValue","ppd","toFixed","contentPadding","container","padding","default","adjustedContentDimensions","height","undefined","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","chartRef","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","columns","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style","showLabels","Boolean"],"mappings":"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"}
+{"version":3,"sources":["../../src/PieChartPanel.tsx"],"sourcesContent":["//Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport {\n  ChartInstance,\n  ContentWithLegend,\n  LegendItem,\n  LegendProps,\n  SelectedLegendItemState,\n  TableColumnConfig,\n  useChartsTheme,\n  useId,\n} from '@perses-dev/components';\nimport { CalculationType, CalculationsMap, DEFAULT_LEGEND, TimeSeriesData } from '@perses-dev/core';\nimport { comparisonLegends, ComparisonValues, PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport merge from 'lodash/merge';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { PieChartOptions } from './pie-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\nimport { getSeriesColor } from './colors';\nimport { PieChartBase, PieChartData } from './PieChartBase';\n\nexport type PieChartPanelProps = PanelProps<PieChartOptions, TimeSeriesData>;\n\nexport function PieChartPanel(props: PieChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, sort, mode, legend: pieChartLegend, colorPalette: colorPalette },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const chartId = useId('time-series-panel');\n  const seriesNames = queryResults.flatMap((result) => result?.data.series?.map((series) => series.name) || []);\n\n  // Memoize the color list so it only regenerates when color/palette/series count changes\n  const colorList = useMemo(() => {\n    return getSeriesColor(seriesNames, colorPalette);\n  }, [colorPalette, seriesNames]);\n\n  const { pieChartData, legendItems, legendColumns } = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const pieChartData: PieChartData[] = [];\n    const legendItems: LegendItem[] = [];\n    const legendColumns: Array<TableColumnConfig<LegendItem>> = [];\n\n    queryResults.forEach((result, queryIndex) => {\n      const series = result?.data.series ?? [];\n\n      series.forEach((seriesData, seriesIndex) => {\n        const seriesId = `${chartId}${seriesData.name}${seriesIndex}${queryIndex}`;\n        const seriesColor = colorList[queryIndex * series.length + seriesIndex] ?? '#ff0000';\n\n        const seriesItem = {\n          id: seriesId,\n          value: calculate(seriesData.values) ?? null,\n          name: seriesData.formattedName ?? '',\n          itemStyle: {\n            color: seriesColor,\n          },\n        };\n\n        pieChartData.push(seriesItem);\n        legendItems.push({\n          id: seriesId,\n          label: seriesData.formattedName ?? '',\n          color: seriesColor,\n          data: {},\n        });\n      });\n    });\n\n    const sortedPieChartData = sortSeriesData(pieChartData, sort);\n\n    // Reorder legend items to reflect the current sorting order of series\n    const valueById = new Map(sortedPieChartData.map((pd) => [pd.id ?? pd.name, pd.value ?? 0]));\n    legendItems.sort((a, b) => {\n      const av = valueById.get(a.id) ?? 0;\n      const bv = valueById.get(b.id) ?? 0;\n      return sort === 'asc' ? av - bv : bv - av;\n    });\n\n    if (pieChartLegend?.values?.length && pieChartLegend?.mode === 'table') {\n      const { values } = pieChartLegend;\n      [...values].sort().forEach((v) => {\n        /* First, create a column for the current legend value */\n        legendColumns.push({\n          accessorKey: `data.${v}`,\n          header: comparisonLegends[v as ComparisonValues]?.label || v,\n          headerDescription: comparisonLegends[v as ComparisonValues]?.description,\n          width: 90,\n          align: 'right',\n          cellDescription: true,\n          enableSorting: true,\n        });\n        /* Then, settle the legend items related to this legend value */\n        switch (v) {\n          case 'abs':\n            legendItems.forEach((li) => {\n              const { value: itemAbsoluteValue } = pieChartData.find((pd) => li.id === pd.id) || {};\n              if (typeof itemAbsoluteValue === 'number' && li.data) {\n                li.data['abs'] = itemAbsoluteValue;\n              }\n            });\n            break;\n          case 'relative':\n            legendItems.forEach((li) => {\n              const { value: itemPercentageValue } =\n                calculatePercentages(sortedPieChartData).find((ppd) => li.id === ppd.id) || {};\n              if (typeof itemPercentageValue === 'number' && li.data) {\n                li.data['relative'] = `${itemPercentageValue.toFixed(2)}%`;\n              }\n            });\n            break;\n          default:\n            break;\n        }\n      });\n    }\n\n    return {\n      pieChartData: mode === 'percentage' ? calculatePercentages(sortedPieChartData) : sortedPieChartData,\n      legendItems,\n      legendColumns,\n    };\n  }, [calculation, sort, mode, queryResults, colorList, chartId, pieChartLegend]);\n\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n\n  if (!contentDimensions) return null;\n\n  return (\n    <Box sx={{ padding: `${contentPadding}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions?.width ?? 400}\n        height={adjustedContentDimensions?.height ?? 1000}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems,\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: legendColumns,\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              <PieChartBase\n                data={pieChartData}\n                width={width}\n                height={height}\n                showLabels={Boolean(props.spec.showLabels)}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["Box","ContentWithLegend","useChartsTheme","useId","CalculationsMap","DEFAULT_LEGEND","comparisonLegends","validateLegendSpec","merge","useMemo","useRef","useState","calculatePercentages","sortSeriesData","getSeriesColor","PieChartBase","PieChartPanel","props","spec","calculation","sort","mode","legend","pieChartLegend","colorPalette","contentDimensions","queryResults","chartsTheme","chartId","seriesNames","flatMap","result","data","series","map","name","colorList","pieChartData","legendItems","legendColumns","calculate","forEach","queryIndex","seriesData","seriesIndex","seriesId","seriesColor","length","seriesItem","id","value","values","formattedName","itemStyle","color","push","label","sortedPieChartData","valueById","Map","pd","a","b","av","get","bv","v","accessorKey","header","headerDescription","description","width","align","cellDescription","enableSorting","li","itemAbsoluteValue","find","itemPercentageValue","ppd","toFixed","contentPadding","container","padding","default","adjustedContentDimensions","height","undefined","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","chartRef","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","columns","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style","showLabels","Boolean"],"mappings":"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"}

package/lib/bootstrap.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // 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.
@@ -10,7 +11,6 @@
 // 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 { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 const root = ReactDOM.createRoot(document.getElementById('root'));

package/lib/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/bootstrap.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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}
+{"version":3,"sources":["../../src/bootstrap.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 React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/colors.js

@@ -17,29 +17,29 @@ 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, {
-    generateGradientColor: function() {
+    get generateGradientColor () {
         return generateGradientColor;
     },
-    getAutoPaletteColor: function() {
+    get getAutoPaletteColor () {
         return getAutoPaletteColor;
     },
-    getColor: function() {
+    get getColor () {
         return getColor;
     },
-    getConsistentColor: function() {
+    get getConsistentColor () {
         return getConsistentColor;
     },
-    getConsistentSeriesNameColor: function() {
+    get getConsistentSeriesNameColor () {
         return getConsistentSeriesNameColor;
     },
-    getDefaultSeriesColor: function() {
+    get getDefaultSeriesColor () {
         return getDefaultSeriesColor;
     },
-    getSeriesColor: function() {
+    get getSeriesColor () {
         return getSeriesColor;
     }
 });

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/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;
     }
 });

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;
     }
 });

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "PieChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.12.0",
+      "buildVersion": "0.12.1",
       "buildName": "@perses-dev/pie-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/PieChart.1d58bffe.js",
+      "name": "__mf/js/PieChart.b1153c53.js",
       "path": "",
       "type": "global"
     },
@@ -20,7 +20,7 @@
       "api": ""
     },
     "globalName": "PieChart",
-    "pluginVersion": "0.19.1",
+    "pluginVersion": "0.21.6",
     "prefetchInterface": false,
     "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/PieChart/\"; }"
   },
@@ -35,7 +35,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/960.021d7634.js"
+            "__mf/js/async/274.78035147.js"
           ]
         },
         "css": {
@@ -54,8 +54,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/694.011b21e8.js",
-            "__mf/js/async/770.73dda090.js"
+            "__mf/js/async/235.88141957.js",
+            "__mf/js/async/616.b6650249.js"
           ]
         },
         "css": {
@@ -74,8 +74,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/214.a7648318.js",
-            "__mf/js/async/738.5a36e399.js"
+            "__mf/js/async/587.6f746ff5.js",
+            "__mf/js/async/968.a62ee0f7.js"
           ]
         },
         "css": {
@@ -87,14 +87,14 @@
     {
       "id": "PieChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.53.0-beta.1",
+      "version": "0.53.0-beta.2",
       "singleton": true,
-      "requiredVersion": "^0.53.0-beta.1",
+      "requiredVersion": "^0.53.0-beta.2",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/922.560b8115.js"
+            "__mf/js/async/250.baaa2e6d.js"
           ]
         },
         "css": {
@@ -106,14 +106,14 @@
     {
       "id": "PieChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.53.0-beta.1",
+      "version": "0.53.0-beta.2",
       "singleton": true,
-      "requiredVersion": "^0.53.0-beta.1",
+      "requiredVersion": "^0.53.0-beta.2",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/711.2e914849.js"
+            "__mf/js/async/252.f2f74aad.js"
           ]
         },
         "css": {
@@ -132,7 +132,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.b6a33f75.js"
+            "__mf/js/async/192.b0eb01c2.js"
           ]
         },
         "css": {
@@ -151,7 +151,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/409.9c48d616.js"
+            "__mf/js/async/873.8b5831f0.js"
           ]
         },
         "css": {
@@ -170,7 +170,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/981.e6f0d188.js"
+            "__mf/js/async/392.4e64389c.js"
           ]
         },
         "css": {
@@ -189,7 +189,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/173.c694e6f7.js"
+            "__mf/js/async/470.844ea64f.js"
           ]
         },
         "css": {
@@ -208,7 +208,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.7fdfdfd5.js"
+            "__mf/js/async/121.281eb287.js"
           ]
         },
         "css": {
@@ -226,26 +226,26 @@
       "assets": {
         "js": {
           "sync": [
-            "__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.6ae68990.js"
+            "__mf/js/async/554.2692322c.js",
+            "__mf/js/async/217.01ced8ce.js",
+            "__mf/js/async/721.8dc45583.js",
+            "__mf/js/async/337.13482c5c.js",
+            "__mf/js/async/__federation_expose_PieChart.af9fd247.js"
           ],
           "async": [
-            "__mf/js/async/lib-router.5205dc27.js",
-            "__mf/js/async/292.67519c5b.js",
-            "__mf/js/async/706.3e6ace36.js",
-            "__mf/js/async/488.a0bde6cf.js",
-            "__mf/js/async/398.9b0b9c83.js",
-            "__mf/js/async/156.1cf9ec35.js"
+            "__mf/js/async/lib-router.34969c19.js",
+            "__mf/js/async/356.75a8af4c.js",
+            "__mf/js/async/941.ca6b716b.js",
+            "__mf/js/async/177.c83badab.js",
+            "__mf/js/async/469.e52e96c4.js",
+            "__mf/js/async/663.c0629798.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/263.d3010b86.css",
-            "__mf/css/async/341.d3010b86.css"
+            "__mf/css/async/823.d3010b86.css",
+            "__mf/css/async/61.d3010b86.css"
           ]
         }
       },

package/mf-stats.json

@@ -5,11 +5,11 @@
     "name": "PieChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.12.0",
+      "buildVersion": "0.12.1",
       "buildName": "@perses-dev/pie-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/PieChart.1d58bffe.js",
+      "name": "__mf/js/PieChart.b1153c53.js",
       "path": "",
       "type": "global"
     },
@@ -20,7 +20,7 @@
       "api": ""
     },
     "globalName": "PieChart",
-    "pluginVersion": "0.19.1",
+    "pluginVersion": "0.21.6",
     "prefetchInterface": false,
     "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/PieChart/\"; }"
   },
@@ -37,7 +37,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/960.021d7634.js"
+            "__mf/js/async/274.78035147.js"
           ]
         },
         "css": {
@@ -59,8 +59,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/694.011b21e8.js",
-            "__mf/js/async/770.73dda090.js"
+            "__mf/js/async/235.88141957.js",
+            "__mf/js/async/616.b6650249.js"
           ]
         },
         "css": {
@@ -82,8 +82,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/214.a7648318.js",
-            "__mf/js/async/738.5a36e399.js"
+            "__mf/js/async/587.6f746ff5.js",
+            "__mf/js/async/968.a62ee0f7.js"
           ]
         },
         "css": {
@@ -95,17 +95,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.53.0-beta.1",
+      "requiredVersion": "^0.53.0-beta.2",
       "shareScope": "default",
       "name": "@perses-dev/components",
-      "version": "0.53.0-beta.1",
+      "version": "0.53.0-beta.2",
       "eager": false,
       "id": "PieChart:@perses-dev/components",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/922.560b8115.js"
+            "__mf/js/async/250.baaa2e6d.js"
           ]
         },
         "css": {
@@ -119,17 +119,17 @@
     },
     {
       "singleton": true,
-      "requiredVersion": "^0.53.0-beta.1",
+      "requiredVersion": "^0.53.0-beta.2",
       "shareScope": "default",
       "name": "@perses-dev/plugin-system",
-      "version": "0.53.0-beta.1",
+      "version": "0.53.0-beta.2",
       "eager": false,
       "id": "PieChart:@perses-dev/plugin-system",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/711.2e914849.js"
+            "__mf/js/async/252.f2f74aad.js"
           ]
         },
         "css": {
@@ -153,7 +153,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.b6a33f75.js"
+            "__mf/js/async/192.b0eb01c2.js"
           ]
         },
         "css": {
@@ -175,7 +175,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/409.9c48d616.js"
+            "__mf/js/async/873.8b5831f0.js"
           ]
         },
         "css": {
@@ -197,7 +197,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/981.e6f0d188.js"
+            "__mf/js/async/392.4e64389c.js"
           ]
         },
         "css": {
@@ -219,7 +219,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/173.c694e6f7.js"
+            "__mf/js/async/470.844ea64f.js"
           ]
         },
         "css": {
@@ -241,7 +241,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.7fdfdfd5.js"
+            "__mf/js/async/121.281eb287.js"
           ]
         },
         "css": {
@@ -269,26 +269,26 @@
       "assets": {
         "js": {
           "sync": [
-            "__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.6ae68990.js"
+            "__mf/js/async/554.2692322c.js",
+            "__mf/js/async/217.01ced8ce.js",
+            "__mf/js/async/721.8dc45583.js",
+            "__mf/js/async/337.13482c5c.js",
+            "__mf/js/async/__federation_expose_PieChart.af9fd247.js"
           ],
           "async": [
-            "__mf/js/async/lib-router.5205dc27.js",
-            "__mf/js/async/292.67519c5b.js",
-            "__mf/js/async/706.3e6ace36.js",
-            "__mf/js/async/488.a0bde6cf.js",
-            "__mf/js/async/398.9b0b9c83.js",
-            "__mf/js/async/156.1cf9ec35.js"
+            "__mf/js/async/lib-router.34969c19.js",
+            "__mf/js/async/356.75a8af4c.js",
+            "__mf/js/async/941.ca6b716b.js",
+            "__mf/js/async/177.c83badab.js",
+            "__mf/js/async/469.e52e96c4.js",
+            "__mf/js/async/663.c0629798.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/263.d3010b86.css",
-            "__mf/css/async/341.d3010b86.css"
+            "__mf/css/async/823.d3010b86.css",
+            "__mf/css/async/61.d3010b86.css"
           ]
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/pie-chart-plugin",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "homepage": "https://github.com/perses/plugins/blob/main/README.md",
   "repository": {
     "type": "git",
@@ -27,9 +27,9 @@
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hookform/resolvers": "^3.2.0",
-    "@perses-dev/components": "^0.53.0-beta.1",
-    "@perses-dev/core": "^0.53.0-beta.1",
-    "@perses-dev/plugin-system": "^0.53.0-beta.1",
+    "@perses-dev/components": "^0.53.0-beta.2",
+    "@perses-dev/core": "^0.53.0-beta.2",
+    "@perses-dev/plugin-system": "^0.53.0-beta.2",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "echarts": "5.5.0",