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

package/lib/cjs/utils.js

@@ -21,24 +21,26 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    get calculatePercentages () {
-        return calculatePercentages;
+    get PieChartListLegendMapper () {
+        return PieChartListLegendMapper;
+    },
+    get PieChartTableLegendMapper () {
+        return PieChartTableLegendMapper;
+    },
+    get getLabelFormatter () {
+        return getLabelFormatter;
+    },
+    get getTooltipFormatter () {
+        return getTooltipFormatter;
     },
     get sortSeriesData () {
         return sortSeriesData;
     }
 });
+const _components = require("@perses-dev/components");
+const _echarts = require("echarts");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _piechartmodel = require("./pie-chart-model");
-function calculatePercentages(data) {
-    const sum = data.reduce((accumulator, { value })=>accumulator + (value ?? 0), 0);
-    return data.map((seriesData)=>{
-        const percentage = (seriesData.value ?? 0) / sum * 100;
-        return {
-            ...seriesData,
-            value: Number(percentage.toFixed(2))
-        };
-    });
-}
 function sortSeriesData(data, sortOrder = _piechartmodel.DEFAULT_SORT) {
     return data.sort((a, b)=>{
         // Handle null values - push them to the end regardless of sort order
@@ -50,3 +52,112 @@ function sortSeriesData(data, sortOrder = _piechartmodel.DEFAULT_SORT) {
         return sortOrder === 'asc' ? diff : -diff;
     });
 }
+const getTooltipFormatter = (formatOptions)=>{
+    const relativeFormatOptions = {
+        unit: 'percent',
+        decimalPlaces: formatOptions?.decimalPlaces
+    };
+    return ({ name, value, percent })=>{
+        if (typeof value === 'number') {
+            return `${_echarts.format.encodeHTML(name)}: ${(0, _components.formatValue)(value, formatOptions)} (${(0, _components.formatValue)(percent, relativeFormatOptions)})`;
+        }
+        return `${_echarts.format.encodeHTML(name)}: ${_echarts.format.encodeHTML(value.toString())}`;
+    };
+};
+const getLabelFormatter = (mode, formatOptions)=>{
+    if (mode === 'percentage') {
+        return percentageLabelFormatter(formatOptions);
+    }
+    return labelFormatter(formatOptions);
+};
+const labelFormatter = (formatOptions)=>{
+    return ({ name, value })=>{
+        if (typeof value === 'number') {
+            return `${name}:\n${(0, _components.formatValue)(value, formatOptions)}`;
+        }
+        return `${name}:\n${_echarts.format.encodeHTML(value.toString())}`;
+    };
+};
+const percentageLabelFormatter = (formatOptions)=>{
+    const relativeFormatOptions = {
+        unit: 'percent',
+        decimalPlaces: formatOptions?.decimalPlaces
+    };
+    return ({ name, percent })=>{
+        return `${name}:\n${(0, _components.formatValue)(percent, relativeFormatOptions)}`;
+    };
+};
+class PieChartListLegendMapper {
+    mapToLegendItems(pieChartData) {
+        return pieChartData.map(({ id, name, itemStyle })=>({
+                id: id,
+                label: name,
+                color: itemStyle.color,
+                data: {}
+            }));
+    }
+    mapToLegendColumns() {
+        return [];
+    }
+}
+class PieChartTableLegendMapper {
+    mapToLegendItems(pieChartData, selectedValues) {
+        const relativePieChartData = calculatePercentages(pieChartData);
+        const absoluteValueSelected = selectedValues?.includes('abs');
+        const relativeValueSelected = selectedValues?.includes('relative');
+        return pieChartData.map(({ id, name, itemStyle, value })=>{
+            const data = {};
+            if (absoluteValueSelected && typeof value === 'number') {
+                data['abs'] = value;
+            }
+            if (relativeValueSelected) {
+                const itemPercentageValue = relativePieChartData.find((rpd)=>rpd.id === id)?.value;
+                if (typeof itemPercentageValue === 'number') {
+                    data['relative'] = itemPercentageValue;
+                }
+            }
+            return {
+                id: id,
+                label: name,
+                color: itemStyle.color,
+                data: data
+            };
+        });
+    }
+    mapToLegendColumns(selectedValues, formatOptions) {
+        const relativeFormatOptions = {
+            unit: 'percent',
+            decimalPlaces: formatOptions?.decimalPlaces
+        };
+        return selectedValues?.toSorted().map((v)=>{
+            const comparisonValue = isComparisonValue(v);
+            return {
+                accessorKey: `data.${v}`,
+                header: comparisonValue ? _pluginsystem.comparisonLegends[v].label : v,
+                headerDescription: comparisonValue ? _pluginsystem.comparisonLegends[v].description : undefined,
+                width: 90,
+                align: 'right',
+                cellDescription: true,
+                enableSorting: true,
+                cell: ({ getValue })=>{
+                    const cellValue = getValue();
+                    return typeof cellValue === 'number' && formatOptions ? (0, _components.formatValue)(cellValue, v === 'relative' ? relativeFormatOptions : formatOptions) : cellValue;
+                }
+            };
+        }) ?? [];
+    }
+}
+function calculatePercentages(data) {
+    const sum = data.reduce((accumulator, { value })=>accumulator + (value ?? 0), 0);
+    return data.map((seriesData)=>{
+        const percentage = (seriesData.value ?? 0) / sum * 100;
+        return {
+            ...seriesData,
+            value: Number(percentage.toFixed(4))
+        };
+    });
+}
+const comparisonValuesArray = Object.keys(_pluginsystem.comparisonLegends);
+function isComparisonValue(value) {
+    return typeof value === 'string' && comparisonValuesArray.includes(value);
+}

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

@@ -1,6 +1,6 @@
-import { ModeOption, SortOption } from '@perses-dev/components';
-import { CalculationType, Definition, FormatOptions } from '@perses-dev/core';
-import { LegendSpecOptions, OptionsEditorProps } from '@perses-dev/plugin-system';
+import { FormatOptions, ModeOption, SortOption } from '@perses-dev/components';
+import { CalculationType, LegendSpecOptions, OptionsEditorProps } from '@perses-dev/plugin-system';
+import { Definition } from '@perses-dev/spec';
 export declare const DEFAULT_FORMAT: FormatOptions;
 export declare const DEFAULT_SORT: SortOption;
 export declare const DEFAULT_MODE: ModeOption;

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,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"}
+{"version":3,"file":"pie-chart-model.d.ts","sourceRoot":"","sources":["../../src/pie-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAuB,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACxH,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,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

@@ -10,7 +10,7 @@
 // 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 { DEFAULT_CALCULATION } from '@perses-dev/core';
+import { DEFAULT_CALCULATION } from '@perses-dev/plugin-system';
 export const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/pie-chart-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;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"}
+{"version":3,"sources":["../../src/pie-chart-model.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormatOptions, ModeOption, SortOption } from '@perses-dev/components';\nimport { CalculationType, DEFAULT_CALCULATION, LegendSpecOptions, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { Definition } from '@perses-dev/spec';\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,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAA0BA,mBAAmB,QAA+C,4BAA4B;AAGxH,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

@@ -1,9 +1,25 @@
-import { SortOption } from '@perses-dev/components';
+import { FormatOptions, LegendItem, ModeOption, SortOption, TableColumnConfig } from '@perses-dev/components';
+import { ComparisonValues, LegendValue } from '@perses-dev/plugin-system';
 import { PieChartData } from './PieChartBase';
-export declare function calculatePercentages(data: PieChartData[]): Array<{
-    id?: string;
+export declare function sortSeriesData<T extends PieChartData>(data: T[], sortOrder?: SortOption): T[];
+type formatterProps = {
     name: string;
-    value: number;
-}>;
-export declare function sortSeriesData(data: PieChartData[], sortOrder?: SortOption): PieChartData[];
+    value: number | unknown[] | object;
+    percent: number;
+};
+export declare const getTooltipFormatter: (formatOptions?: FormatOptions) => ((props: formatterProps) => string);
+export declare const getLabelFormatter: (mode?: ModeOption, formatOptions?: FormatOptions) => ((props: formatterProps) => string);
+export interface PieChartLegendMapper {
+    mapToLegendItems: (pieChartData: Array<Required<PieChartData>>, selectedValues?: Array<LegendValue | ComparisonValues>) => LegendItem[];
+    mapToLegendColumns: (selectedValues?: Array<LegendValue | ComparisonValues>, formatOptions?: FormatOptions) => Array<TableColumnConfig<LegendItem>>;
+}
+export declare class PieChartListLegendMapper implements PieChartLegendMapper {
+    mapToLegendItems(pieChartData: Array<Required<PieChartData>>): LegendItem[];
+    mapToLegendColumns(): Array<TableColumnConfig<LegendItem>>;
+}
+export declare class PieChartTableLegendMapper implements PieChartLegendMapper {
+    mapToLegendItems(pieChartData: Array<Required<PieChartData>>, selectedValues?: Array<LegendValue | ComparisonValues>): LegendItem[];
+    mapToLegendColumns(selectedValues?: Array<LegendValue | ComparisonValues>, formatOptions?: FormatOptions): Array<TableColumnConfig<LegendItem>>;
+}
+export {};
 //# sourceMappingURL=utils.d.ts.map

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,CAWzG"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EACL,aAAa,EAEb,UAAU,EACV,UAAU,EACV,UAAU,EACV,iBAAiB,EAClB,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAqB,gBAAgB,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAG9C,wBAAgB,cAAc,CAAC,CAAC,SAAS,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,SAAS,GAAE,UAAyB,GAAG,CAAC,EAAE,CAW3G;AAED,KAAK,cAAc,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,GAAG,OAAO,EAAE,GAAG,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAC5F,eAAO,MAAM,mBAAmB,GAAI,gBAAgB,aAAa,KAAG,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAQrG,CAAC;AACF,eAAO,MAAM,iBAAiB,GAC5B,OAAO,UAAU,EACjB,gBAAgB,aAAa,KAC5B,CAAC,CAAC,KAAK,EAAE,cAAc,KAAK,MAAM,CAKpC,CAAC;AAkBF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,CAChB,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,EAC3C,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,gBAAgB,CAAC,KACnD,UAAU,EAAE,CAAC;IAClB,kBAAkB,EAAE,CAClB,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,gBAAgB,CAAC,EACtD,aAAa,CAAC,EAAE,aAAa,KAC1B,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC,CAAC;CAC3C;AAED,qBAAa,wBAAyB,YAAW,oBAAoB;IACnE,gBAAgB,CAAC,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,GAAG,UAAU,EAAE;IAG3E,kBAAkB,IAAI,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAG3D;AAED,qBAAa,yBAA0B,YAAW,oBAAoB;IACpE,gBAAgB,CACd,YAAY,EAAE,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,EAC3C,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,gBAAgB,CAAC,GACrD,UAAU,EAAE;IAwBf,kBAAkB,CAChB,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,gBAAgB,CAAC,EACtD,aAAa,CAAC,EAAE,aAAa,GAC5B,KAAK,CAAC,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAuBxC"}

package/lib/utils.js

@@ -10,17 +10,10 @@
 // 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 { formatValue } from '@perses-dev/components';
+import { format } from 'echarts';
+import { comparisonLegends } from '@perses-dev/plugin-system';
 import { DEFAULT_SORT } from './pie-chart-model';
-export function calculatePercentages(data) {
-    const sum = data.reduce((accumulator, { value })=>accumulator + (value ?? 0), 0);
-    return data.map((seriesData)=>{
-        const percentage = (seriesData.value ?? 0) / sum * 100;
-        return {
-            ...seriesData,
-            value: Number(percentage.toFixed(2))
-        };
-    });
-}
 export function sortSeriesData(data, sortOrder = DEFAULT_SORT) {
     return data.sort((a, b)=>{
         // Handle null values - push them to the end regardless of sort order
@@ -32,5 +25,114 @@ export function sortSeriesData(data, sortOrder = DEFAULT_SORT) {
         return sortOrder === 'asc' ? diff : -diff;
     });
 }
+export const getTooltipFormatter = (formatOptions)=>{
+    const relativeFormatOptions = {
+        unit: 'percent',
+        decimalPlaces: formatOptions?.decimalPlaces
+    };
+    return ({ name, value, percent })=>{
+        if (typeof value === 'number') {
+            return `${format.encodeHTML(name)}: ${formatValue(value, formatOptions)} (${formatValue(percent, relativeFormatOptions)})`;
+        }
+        return `${format.encodeHTML(name)}: ${format.encodeHTML(value.toString())}`;
+    };
+};
+export const getLabelFormatter = (mode, formatOptions)=>{
+    if (mode === 'percentage') {
+        return percentageLabelFormatter(formatOptions);
+    }
+    return labelFormatter(formatOptions);
+};
+const labelFormatter = (formatOptions)=>{
+    return ({ name, value })=>{
+        if (typeof value === 'number') {
+            return `${name}:\n${formatValue(value, formatOptions)}`;
+        }
+        return `${name}:\n${format.encodeHTML(value.toString())}`;
+    };
+};
+const percentageLabelFormatter = (formatOptions)=>{
+    const relativeFormatOptions = {
+        unit: 'percent',
+        decimalPlaces: formatOptions?.decimalPlaces
+    };
+    return ({ name, percent })=>{
+        return `${name}:\n${formatValue(percent, relativeFormatOptions)}`;
+    };
+};
+export class PieChartListLegendMapper {
+    mapToLegendItems(pieChartData) {
+        return pieChartData.map(({ id, name, itemStyle })=>({
+                id: id,
+                label: name,
+                color: itemStyle.color,
+                data: {}
+            }));
+    }
+    mapToLegendColumns() {
+        return [];
+    }
+}
+export class PieChartTableLegendMapper {
+    mapToLegendItems(pieChartData, selectedValues) {
+        const relativePieChartData = calculatePercentages(pieChartData);
+        const absoluteValueSelected = selectedValues?.includes('abs');
+        const relativeValueSelected = selectedValues?.includes('relative');
+        return pieChartData.map(({ id, name, itemStyle, value })=>{
+            const data = {};
+            if (absoluteValueSelected && typeof value === 'number') {
+                data['abs'] = value;
+            }
+            if (relativeValueSelected) {
+                const itemPercentageValue = relativePieChartData.find((rpd)=>rpd.id === id)?.value;
+                if (typeof itemPercentageValue === 'number') {
+                    data['relative'] = itemPercentageValue;
+                }
+            }
+            return {
+                id: id,
+                label: name,
+                color: itemStyle.color,
+                data: data
+            };
+        });
+    }
+    mapToLegendColumns(selectedValues, formatOptions) {
+        const relativeFormatOptions = {
+            unit: 'percent',
+            decimalPlaces: formatOptions?.decimalPlaces
+        };
+        return selectedValues?.toSorted().map((v)=>{
+            const comparisonValue = isComparisonValue(v);
+            return {
+                accessorKey: `data.${v}`,
+                header: comparisonValue ? comparisonLegends[v].label : v,
+                headerDescription: comparisonValue ? comparisonLegends[v].description : undefined,
+                width: 90,
+                align: 'right',
+                cellDescription: true,
+                enableSorting: true,
+                cell: ({ getValue })=>{
+                    const cellValue = getValue();
+                    return typeof cellValue === 'number' && formatOptions ? formatValue(cellValue, v === 'relative' ? relativeFormatOptions : formatOptions) : cellValue;
+                }
+            };
+        }) ?? [];
+    }
+}
+function calculatePercentages(data) {
+    const sum = data.reduce((accumulator, { value })=>accumulator + (value ?? 0), 0);
+    return data.map((seriesData)=>{
+        const percentage = (seriesData.value ?? 0) / sum * 100;
+        return {
+            ...seriesData,
+            value: Number(percentage.toFixed(4))
+        };
+    });
+}
+const comparisonValuesArray = Object.keys(comparisonLegends);
+function isComparisonValue(value) {
+    return typeof value === 'string' && comparisonValuesArray.includes(value);
+}
 
 //# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { 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,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;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"}
+{"version":3,"sources":["../../src/utils.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  FormatOptions,\n  formatValue,\n  LegendItem,\n  ModeOption,\n  SortOption,\n  TableColumnConfig,\n} from '@perses-dev/components';\nimport { format } from 'echarts';\nimport { comparisonLegends, ComparisonValues, LegendValue } from '@perses-dev/plugin-system';\nimport { PieChartData } from './PieChartBase';\nimport { DEFAULT_SORT } from './pie-chart-model';\n\nexport function sortSeriesData<T extends PieChartData>(data: T[], sortOrder: SortOption = DEFAULT_SORT): T[] {\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\ntype formatterProps = { name: string; value: number | unknown[] | object; percent: number };\nexport const getTooltipFormatter = (formatOptions?: FormatOptions): ((props: formatterProps) => string) => {\n  const relativeFormatOptions = { unit: 'percent', decimalPlaces: formatOptions?.decimalPlaces } as const;\n  return ({ name, value, percent }: formatterProps): string => {\n    if (typeof value === 'number') {\n      return `${format.encodeHTML(name)}: ${formatValue(value, formatOptions)} (${formatValue(percent, relativeFormatOptions)})`;\n    }\n    return `${format.encodeHTML(name)}: ${format.encodeHTML(value.toString())}`;\n  };\n};\nexport const getLabelFormatter = (\n  mode?: ModeOption,\n  formatOptions?: FormatOptions\n): ((props: formatterProps) => string) => {\n  if (mode === 'percentage') {\n    return percentageLabelFormatter(formatOptions);\n  }\n  return labelFormatter(formatOptions);\n};\n\nconst labelFormatter = (formatOptions?: FormatOptions) => {\n  return ({ name, value }: formatterProps): string => {\n    if (typeof value === 'number') {\n      return `${name}:\\n${formatValue(value, formatOptions)}`;\n    }\n    return `${name}:\\n${format.encodeHTML(value.toString())}`;\n  };\n};\n\nconst percentageLabelFormatter = (formatOptions?: FormatOptions) => {\n  const relativeFormatOptions = { unit: 'percent', decimalPlaces: formatOptions?.decimalPlaces } as const;\n  return ({ name, percent }: formatterProps): string => {\n    return `${name}:\\n${formatValue(percent, relativeFormatOptions)}`;\n  };\n};\n\nexport interface PieChartLegendMapper {\n  mapToLegendItems: (\n    pieChartData: Array<Required<PieChartData>>,\n    selectedValues?: Array<LegendValue | ComparisonValues>\n  ) => LegendItem[];\n  mapToLegendColumns: (\n    selectedValues?: Array<LegendValue | ComparisonValues>,\n    formatOptions?: FormatOptions\n  ) => Array<TableColumnConfig<LegendItem>>;\n}\n\nexport class PieChartListLegendMapper implements PieChartLegendMapper {\n  mapToLegendItems(pieChartData: Array<Required<PieChartData>>): LegendItem[] {\n    return pieChartData.map(({ id, name, itemStyle }) => ({ id: id, label: name, color: itemStyle.color, data: {} }));\n  }\n  mapToLegendColumns(): Array<TableColumnConfig<LegendItem>> {\n    return [];\n  }\n}\n\nexport class PieChartTableLegendMapper implements PieChartLegendMapper {\n  mapToLegendItems(\n    pieChartData: Array<Required<PieChartData>>,\n    selectedValues?: Array<LegendValue | ComparisonValues>\n  ): LegendItem[] {\n    const relativePieChartData = calculatePercentages(pieChartData);\n    const absoluteValueSelected = selectedValues?.includes('abs');\n    const relativeValueSelected = selectedValues?.includes('relative');\n    return pieChartData.map(({ id, name, itemStyle, value }) => {\n      const data: { [k in ComparisonValues]?: number } = {};\n      if (absoluteValueSelected && typeof value === 'number') {\n        data['abs'] = value;\n      }\n      if (relativeValueSelected) {\n        const itemPercentageValue = relativePieChartData.find((rpd) => rpd.id === id)?.value;\n        if (typeof itemPercentageValue === 'number') {\n          data['relative'] = itemPercentageValue;\n        }\n      }\n      return {\n        id: id,\n        label: name,\n        color: itemStyle.color,\n        data: data,\n      };\n    });\n  }\n\n  mapToLegendColumns(\n    selectedValues?: Array<LegendValue | ComparisonValues>,\n    formatOptions?: FormatOptions\n  ): Array<TableColumnConfig<LegendItem>> {\n    const relativeFormatOptions = { unit: 'percent', decimalPlaces: formatOptions?.decimalPlaces } as const;\n    return (\n      selectedValues?.toSorted().map((v) => {\n        const comparisonValue = isComparisonValue(v);\n        return {\n          accessorKey: `data.${v}`,\n          header: comparisonValue ? comparisonLegends[v].label : v,\n          headerDescription: comparisonValue ? comparisonLegends[v].description : undefined,\n          width: 90,\n          align: 'right',\n          cellDescription: true,\n          enableSorting: true,\n          cell: ({ getValue }): string => {\n            const cellValue = getValue();\n            return typeof cellValue === 'number' && formatOptions\n              ? formatValue(cellValue, v === 'relative' ? relativeFormatOptions : formatOptions)\n              : cellValue;\n          },\n        };\n      }) ?? []\n    );\n  }\n}\n\nfunction calculatePercentages<T extends PieChartData>(data: T[]): T[] {\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(4)),\n    };\n  });\n}\n\nconst comparisonValuesArray = Object.keys(comparisonLegends);\nfunction isComparisonValue(value: string | undefined): value is ComparisonValues {\n  return typeof value === 'string' && comparisonValuesArray.includes(value);\n}\n"],"names":["formatValue","format","comparisonLegends","DEFAULT_SORT","sortSeriesData","data","sortOrder","sort","a","b","value","diff","getTooltipFormatter","formatOptions","relativeFormatOptions","unit","decimalPlaces","name","percent","encodeHTML","toString","getLabelFormatter","mode","percentageLabelFormatter","labelFormatter","PieChartListLegendMapper","mapToLegendItems","pieChartData","map","id","itemStyle","label","color","mapToLegendColumns","PieChartTableLegendMapper","selectedValues","relativePieChartData","calculatePercentages","absoluteValueSelected","includes","relativeValueSelected","itemPercentageValue","find","rpd","toSorted","v","comparisonValue","isComparisonValue","accessorKey","header","headerDescription","description","undefined","width","align","cellDescription","enableSorting","cell","getValue","cellValue","sum","reduce","accumulator","seriesData","percentage","Number","toFixed","comparisonValuesArray","Object","keys"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAEEA,WAAW,QAKN,yBAAyB;AAChC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,iBAAiB,QAAuC,4BAA4B;AAE7F,SAASC,YAAY,QAAQ,oBAAoB;AAEjD,OAAO,SAASC,eAAuCC,IAAS,EAAEC,YAAwBH,YAAY;IACpG,OAAOE,KAAKE,IAAI,CAAC,CAACC,GAAGC;QACnB,qEAAqE;QACrE,IAAID,EAAEE,KAAK,KAAK,QAAQD,EAAEC,KAAK,KAAK,MAAM,OAAO;QACjD,IAAIF,EAAEE,KAAK,KAAK,MAAM,OAAO;QAC7B,IAAID,EAAEC,KAAK,KAAK,MAAM,OAAO,CAAC;QAE9B,gBAAgB;QAChB,MAAMC,OAAO,AAACH,CAAAA,EAAEE,KAAK,IAAI,CAAA,IAAMD,CAAAA,EAAEC,KAAK,IAAI,CAAA;QAC1C,OAAOJ,cAAc,QAAQK,OAAO,CAACA;IACvC;AACF;AAGA,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAMC,wBAAwB;QAAEC,MAAM;QAAWC,eAAeH,eAAeG;IAAc;IAC7F,OAAO,CAAC,EAAEC,IAAI,EAAEP,KAAK,EAAEQ,OAAO,EAAkB;QAC9C,IAAI,OAAOR,UAAU,UAAU;YAC7B,OAAO,GAAGT,OAAOkB,UAAU,CAACF,MAAM,EAAE,EAAEjB,YAAYU,OAAOG,eAAe,EAAE,EAAEb,YAAYkB,SAASJ,uBAAuB,CAAC,CAAC;QAC5H;QACA,OAAO,GAAGb,OAAOkB,UAAU,CAACF,MAAM,EAAE,EAAEhB,OAAOkB,UAAU,CAACT,MAAMU,QAAQ,KAAK;IAC7E;AACF,EAAE;AACF,OAAO,MAAMC,oBAAoB,CAC/BC,MACAT;IAEA,IAAIS,SAAS,cAAc;QACzB,OAAOC,yBAAyBV;IAClC;IACA,OAAOW,eAAeX;AACxB,EAAE;AAEF,MAAMW,iBAAiB,CAACX;IACtB,OAAO,CAAC,EAAEI,IAAI,EAAEP,KAAK,EAAkB;QACrC,IAAI,OAAOA,UAAU,UAAU;YAC7B,OAAO,GAAGO,KAAK,GAAG,EAAEjB,YAAYU,OAAOG,gBAAgB;QACzD;QACA,OAAO,GAAGI,KAAK,GAAG,EAAEhB,OAAOkB,UAAU,CAACT,MAAMU,QAAQ,KAAK;IAC3D;AACF;AAEA,MAAMG,2BAA2B,CAACV;IAChC,MAAMC,wBAAwB;QAAEC,MAAM;QAAWC,eAAeH,eAAeG;IAAc;IAC7F,OAAO,CAAC,EAAEC,IAAI,EAAEC,OAAO,EAAkB;QACvC,OAAO,GAAGD,KAAK,GAAG,EAAEjB,YAAYkB,SAASJ,wBAAwB;IACnE;AACF;AAaA,OAAO,MAAMW;IACXC,iBAAiBC,YAA2C,EAAgB;QAC1E,OAAOA,aAAaC,GAAG,CAAC,CAAC,EAAEC,EAAE,EAAEZ,IAAI,EAAEa,SAAS,EAAE,GAAM,CAAA;gBAAED,IAAIA;gBAAIE,OAAOd;gBAAMe,OAAOF,UAAUE,KAAK;gBAAE3B,MAAM,CAAC;YAAE,CAAA;IAChH;IACA4B,qBAA2D;QACzD,OAAO,EAAE;IACX;AACF;AAEA,OAAO,MAAMC;IACXR,iBACEC,YAA2C,EAC3CQ,cAAsD,EACxC;QACd,MAAMC,uBAAuBC,qBAAqBV;QAClD,MAAMW,wBAAwBH,gBAAgBI,SAAS;QACvD,MAAMC,wBAAwBL,gBAAgBI,SAAS;QACvD,OAAOZ,aAAaC,GAAG,CAAC,CAAC,EAAEC,EAAE,EAAEZ,IAAI,EAAEa,SAAS,EAAEpB,KAAK,EAAE;YACrD,MAAML,OAA6C,CAAC;YACpD,IAAIiC,yBAAyB,OAAO5B,UAAU,UAAU;gBACtDL,IAAI,CAAC,MAAM,GAAGK;YAChB;YACA,IAAI8B,uBAAuB;gBACzB,MAAMC,sBAAsBL,qBAAqBM,IAAI,CAAC,CAACC,MAAQA,IAAId,EAAE,KAAKA,KAAKnB;gBAC/E,IAAI,OAAO+B,wBAAwB,UAAU;oBAC3CpC,IAAI,CAAC,WAAW,GAAGoC;gBACrB;YACF;YACA,OAAO;gBACLZ,IAAIA;gBACJE,OAAOd;gBACPe,OAAOF,UAAUE,KAAK;gBACtB3B,MAAMA;YACR;QACF;IACF;IAEA4B,mBACEE,cAAsD,EACtDtB,aAA6B,EACS;QACtC,MAAMC,wBAAwB;YAAEC,MAAM;YAAWC,eAAeH,eAAeG;QAAc;QAC7F,OACEmB,gBAAgBS,WAAWhB,IAAI,CAACiB;YAC9B,MAAMC,kBAAkBC,kBAAkBF;YAC1C,OAAO;gBACLG,aAAa,CAAC,KAAK,EAAEH,GAAG;gBACxBI,QAAQH,kBAAkB5C,iBAAiB,CAAC2C,EAAE,CAACd,KAAK,GAAGc;gBACvDK,mBAAmBJ,kBAAkB5C,iBAAiB,CAAC2C,EAAE,CAACM,WAAW,GAAGC;gBACxEC,OAAO;gBACPC,OAAO;gBACPC,iBAAiB;gBACjBC,eAAe;gBACfC,MAAM,CAAC,EAAEC,QAAQ,EAAE;oBACjB,MAAMC,YAAYD;oBAClB,OAAO,OAAOC,cAAc,YAAY9C,gBACpCb,YAAY2D,WAAWd,MAAM,aAAa/B,wBAAwBD,iBAClE8C;gBACN;YACF;QACF,MAAM,EAAE;IAEZ;AACF;AAEA,SAAStB,qBAA6ChC,IAAS;IAC7D,MAAMuD,MAAMvD,KAAKwD,MAAM,CAAC,CAACC,aAAa,EAAEpD,KAAK,EAAE,GAAKoD,cAAepD,CAAAA,SAAS,CAAA,GAAI;IAChF,OAAOL,KAAKuB,GAAG,CAAC,CAACmC;QACf,MAAMC,aAAa,AAAED,CAAAA,WAAWrD,KAAK,IAAI,CAAA,IAAKkD,MAAO;QACrD,OAAO;YACL,GAAGG,UAAU;YACbrD,OAAOuD,OAAOD,WAAWE,OAAO,CAAC;QACnC;IACF;AACF;AAEA,MAAMC,wBAAwBC,OAAOC,IAAI,CAACnE;AAC1C,SAAS6C,kBAAkBrC,KAAyB;IAClD,OAAO,OAAOA,UAAU,YAAYyD,sBAAsB5B,QAAQ,CAAC7B;AACrE"}