@perses-dev/bar-chart-plugin 0.11.0 → 0.13.0-beta.0

package/lib/BarChartExportAction.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BarChartPanelProps } from './BarChartPanel';
+export declare const BarChartExportAction: React.FC<BarChartPanelProps>;
+//# sourceMappingURL=BarChartExportAction.d.ts.map

package/lib/BarChartExportAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChartExportAction.d.ts","sourceRoot":"","sources":["../../src/BarChartExportAction.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAKpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6C7D,CAAC"}

package/lib/BarChartExportAction.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Copyright 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 React, { useCallback, useMemo } from 'react';
+import { exportDataAsCSV, extractExportableData, isExportableData, sanitizeFilename } from '@perses-dev/plugin-system';
+import { InfoTooltip } from '@perses-dev/components';
+import { IconButton } from '@mui/material';
+import DownloadIcon from 'mdi-material-ui/Download';
+export const BarChartExportAction = ({ queryResults, definition })=>{
+    const exportableData = useMemo(()=>{
+        return extractExportableData(queryResults);
+    }, [
+        queryResults
+    ]);
+    const canExport = useMemo(()=>{
+        return isExportableData(exportableData);
+    }, [
+        exportableData
+    ]);
+    const handleExport = useCallback(()=>{
+        if (!exportableData || !canExport) return;
+        try {
+            const title = definition?.spec?.display?.name || 'Time Series Data';
+            const csvBlob = exportDataAsCSV({
+                data: exportableData
+            });
+            const baseFilename = sanitizeFilename(title);
+            const filename = `${baseFilename}_data.csv`;
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(csvBlob);
+            link.download = filename;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            URL.revokeObjectURL(link.href);
+        } catch (error) {
+            console.error('Time series export failed:', error);
+        }
+    }, [
+        exportableData,
+        canExport,
+        definition
+    ]);
+    if (!canExport) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: "Export as CSV",
+        children: /*#__PURE__*/ _jsx(IconButton, {
+            size: "small",
+            onClick: handleExport,
+            "aria-label": "Export time series data as CSV",
+            children: /*#__PURE__*/ _jsx(DownloadIcon, {
+                fontSize: "inherit"
+            })
+        })
+    });
+};
+
+//# sourceMappingURL=BarChartExportAction.js.map

package/lib/BarChartExportAction.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/BarChartExportAction.tsx"],"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 React, { useCallback, useMemo } from 'react';\nimport { exportDataAsCSV, extractExportableData, isExportableData, sanitizeFilename } from '@perses-dev/plugin-system';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { IconButton } from '@mui/material';\nimport DownloadIcon from 'mdi-material-ui/Download';\nimport { BarChartPanelProps } from './BarChartPanel';\n\nexport const BarChartExportAction: React.FC<BarChartPanelProps> = ({ queryResults, definition }) => {\n  const exportableData = useMemo(() => {\n    return extractExportableData(queryResults);\n  }, [queryResults]);\n\n  const canExport = useMemo(() => {\n    return isExportableData(exportableData);\n  }, [exportableData]);\n\n  const handleExport = useCallback(() => {\n    if (!exportableData || !canExport) return;\n\n    try {\n      const title = definition?.spec?.display?.name || 'Time Series Data';\n\n      const csvBlob = exportDataAsCSV({\n        data: exportableData,\n      });\n\n      const baseFilename = sanitizeFilename(title);\n      const filename = `${baseFilename}_data.csv`;\n\n      const link = document.createElement('a');\n      link.href = URL.createObjectURL(csvBlob);\n      link.download = filename;\n      document.body.appendChild(link);\n      link.click();\n      document.body.removeChild(link);\n      URL.revokeObjectURL(link.href);\n    } catch (error) {\n      console.error('Time series export failed:', error);\n    }\n  }, [exportableData, canExport, definition]);\n\n  if (!canExport) {\n    return null;\n  }\n\n  return (\n    <InfoTooltip description=\"Export as CSV\">\n      <IconButton size=\"small\" onClick={handleExport} aria-label=\"Export time series data as CSV\">\n        <DownloadIcon fontSize=\"inherit\" />\n      </IconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["React","useCallback","useMemo","exportDataAsCSV","extractExportableData","isExportableData","sanitizeFilename","InfoTooltip","IconButton","DownloadIcon","BarChartExportAction","queryResults","definition","exportableData","canExport","handleExport","title","spec","display","name","csvBlob","data","baseFilename","filename","link","document","createElement","href","URL","createObjectURL","download","body","appendChild","click","removeChild","revokeObjectURL","error","console","description","size","onClick","aria-label","fontSize"],"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,OAAOA,SAASC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AACpD,SAASC,eAAe,EAAEC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACvH,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,UAAU,QAAQ,gBAAgB;AAC3C,OAAOC,kBAAkB,2BAA2B;AAGpD,OAAO,MAAMC,uBAAqD,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAE;IAC7F,MAAMC,iBAAiBX,QAAQ;QAC7B,OAAOE,sBAAsBO;IAC/B,GAAG;QAACA;KAAa;IAEjB,MAAMG,YAAYZ,QAAQ;QACxB,OAAOG,iBAAiBQ;IAC1B,GAAG;QAACA;KAAe;IAEnB,MAAME,eAAed,YAAY;QAC/B,IAAI,CAACY,kBAAkB,CAACC,WAAW;QAEnC,IAAI;YACF,MAAME,QAAQJ,YAAYK,MAAMC,SAASC,QAAQ;YAEjD,MAAMC,UAAUjB,gBAAgB;gBAC9BkB,MAAMR;YACR;YAEA,MAAMS,eAAehB,iBAAiBU;YACtC,MAAMO,WAAW,GAAGD,aAAa,SAAS,CAAC;YAE3C,MAAME,OAAOC,SAASC,aAAa,CAAC;YACpCF,KAAKG,IAAI,GAAGC,IAAIC,eAAe,CAACT;YAChCI,KAAKM,QAAQ,GAAGP;YAChBE,SAASM,IAAI,CAACC,WAAW,CAACR;YAC1BA,KAAKS,KAAK;YACVR,SAASM,IAAI,CAACG,WAAW,CAACV;YAC1BI,IAAIO,eAAe,CAACX,KAAKG,IAAI;QAC/B,EAAE,OAAOS,OAAO;YACdC,QAAQD,KAAK,CAAC,8BAA8BA;QAC9C;IACF,GAAG;QAACvB;QAAgBC;QAAWF;KAAW;IAE1C,IAAI,CAACE,WAAW;QACd,OAAO;IACT;IAEA,qBACE,KAACP;QAAY+B,aAAY;kBACvB,cAAA,KAAC9B;YAAW+B,MAAK;YAAQC,SAASzB;YAAc0B,cAAW;sBACzD,cAAA,KAAChC;gBAAaiC,UAAS;;;;AAI/B,EAAE"}

package/lib/BarChartOptionsEditorSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/BarChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AA+BA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAEL,0BAA0B,EAI3B,MAAM,mBAAmB,CAAC;AAE3B,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CAoE7F"}
+{"version":3,"file":"BarChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/BarChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AA8CA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAEL,0BAA0B,EAO3B,MAAM,mBAAmB,CAAC;AAE3B,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CAmI7F"}

package/lib/BarChartOptionsEditorSettings.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 // Copyright 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.
@@ -11,13 +12,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { Button } from '@mui/material';
-import { FormatControls, ModeSelector, OptionsEditorColumn, OptionsEditorGrid, OptionsEditorGroup, SortSelector } from '@perses-dev/components';
-import { DEFAULT_CALCULATION, isPercentUnit } from '@perses-dev/core';
-import { CalculationSelector } from '@perses-dev/plugin-system';
+import { Autocomplete, Button, Chip, FormControlLabel, Switch, TextField, ToggleButton, ToggleButtonGroup } from '@mui/material';
+import { FormatControls, isPercentUnit, ModeSelector, OptionsEditorColumn, OptionsEditorGrid, OptionsEditorGroup, SortSelector } from '@perses-dev/components';
+import { CalculationSelector, DEFAULT_CALCULATION } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
 import merge from 'lodash/merge';
-import { DEFAULT_FORMAT, DEFAULT_MODE, DEFAULT_SORT } from './bar-chart-model';
+import { DEFAULT_FORMAT, DEFAULT_MODE, DEFAULT_ORIENTATION, DEFAULT_SORT, DEFAULT_IS_STACKED, DEFAULT_GROUP_BY } from './bar-chart-model';
 export function BarChartOptionsEditorSettings(props) {
     const { onChange, value } = props;
     const handleCalculationChange = (newCalculation)=>{
@@ -46,36 +46,105 @@ export function BarChartOptionsEditorSettings(props) {
             draft.format = DEFAULT_FORMAT;
             draft.sort = DEFAULT_SORT;
             draft.mode = DEFAULT_MODE;
+            draft.groupBy = DEFAULT_GROUP_BY;
+            draft.isStacked = DEFAULT_IS_STACKED;
+            draft.orientation = DEFAULT_ORIENTATION;
         }));
     };
     // ensures decimalPlaces defaults to correct value
     const format = merge({}, DEFAULT_FORMAT, value.format);
+    const groupBy = value.groupBy ?? DEFAULT_GROUP_BY;
+    const isStacked = value.isStacked ?? DEFAULT_IS_STACKED;
     return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
         children: [
-            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
-                children: /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
-                    title: "Misc",
-                    children: [
-                        /*#__PURE__*/ _jsx(FormatControls, {
-                            value: format,
-                            onChange: handleUnitChange,
-                            disabled: value.mode === 'percentage'
-                        }),
-                        /*#__PURE__*/ _jsx(CalculationSelector, {
-                            value: value.calculation,
-                            onChange: handleCalculationChange
-                        }),
-                        /*#__PURE__*/ _jsx(SortSelector, {
-                            value: value.sort,
-                            onChange: handleSortChange
-                        }),
-                        /*#__PURE__*/ _jsx(ModeSelector, {
-                            value: value.mode,
-                            onChange: handleModeChange,
-                            disablePercentageMode: isPercentUnit(format)
-                        })
-                    ]
-                })
+            /*#__PURE__*/ _jsxs(OptionsEditorColumn, {
+                children: [
+                    /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+                        title: "Misc",
+                        children: [
+                            /*#__PURE__*/ _jsx(FormatControls, {
+                                value: format,
+                                onChange: handleUnitChange,
+                                disabled: value.mode === 'percentage'
+                            }),
+                            /*#__PURE__*/ _jsx(CalculationSelector, {
+                                value: value.calculation,
+                                onChange: handleCalculationChange
+                            }),
+                            /*#__PURE__*/ _jsx(SortSelector, {
+                                value: value.sort,
+                                onChange: handleSortChange
+                            }),
+                            /*#__PURE__*/ _jsx(ModeSelector, {
+                                value: value.mode,
+                                onChange: handleModeChange,
+                                disablePercentageMode: isPercentUnit(format)
+                            }),
+                            /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                                exclusive: true,
+                                size: "small",
+                                value: value.orientation ?? 'horizontal',
+                                onChange: (_, v)=>v && onChange(produce(value, (draft)=>{
+                                        draft.orientation = v;
+                                    })),
+                                children: [
+                                    /*#__PURE__*/ _jsx(ToggleButton, {
+                                        value: "horizontal",
+                                        children: "Horizontal"
+                                    }),
+                                    /*#__PURE__*/ _jsx(ToggleButton, {
+                                        value: "vertical",
+                                        children: "Vertical"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+                        title: "Stacking",
+                        children: [
+                            /*#__PURE__*/ _jsx(Autocomplete, {
+                                multiple: true,
+                                freeSolo: true,
+                                value: groupBy,
+                                onChange: (_, newValue)=>{
+                                    const filtered = newValue.filter((v)=>v.trim() !== '');
+                                    onChange(produce(value, (draft)=>{
+                                        draft.groupBy = filtered;
+                                        if (filtered.length === 0) draft.isStacked = false;
+                                    }));
+                                },
+                                options: [],
+                                renderTags: (tagValues, getTagProps)=>tagValues.map((option, index)=>/*#__PURE__*/ _createElement(Chip, {
+                                            size: "small",
+                                            variant: "outlined",
+                                            label: option,
+                                            ...getTagProps({
+                                                index
+                                            }),
+                                            key: option
+                                        })),
+                                renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
+                                        ...params,
+                                        size: "small",
+                                        label: "Group By Labels",
+                                        placeholder: "Type label name + Enter"
+                                    })
+                            }),
+                            /*#__PURE__*/ _jsx(FormControlLabel, {
+                                control: /*#__PURE__*/ _jsx(Switch, {
+                                    size: "small",
+                                    checked: isStacked,
+                                    disabled: groupBy.length === 0,
+                                    onChange: (e)=>onChange(produce(value, (draft)=>{
+                                            draft.isStacked = e.target.checked;
+                                        }))
+                                }),
+                                label: "Stack bars"
+                            })
+                        ]
+                    })
+                ]
             }),
             /*#__PURE__*/ _jsx(OptionsEditorColumn, {
                 children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {

package/lib/BarChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/BarChartOptionsEditorSettings.tsx"],"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 { Button } from '@mui/material';\nimport {\n  FormatControls,\n  FormatControlsProps,\n  ModeOption,\n  ModeSelector,\n  ModeSelectorProps,\n  OptionsEditorColumn,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortOption,\n  SortSelector,\n  SortSelectorProps,\n} from '@perses-dev/components';\nimport { CalculationType, DEFAULT_CALCULATION, FormatOptions, isPercentUnit } from '@perses-dev/core';\nimport { CalculationSelector, CalculationSelectorProps } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport { MouseEventHandler, ReactElement } from 'react';\nimport {\n  BarChartOptions,\n  BarChartOptionsEditorProps,\n  DEFAULT_FORMAT,\n  DEFAULT_MODE,\n  DEFAULT_SORT,\n} from './bar-chart-model';\n\nexport function BarChartOptionsEditorSettings(props: BarChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleCalculationChange: CalculationSelectorProps['onChange'] = (newCalculation: CalculationType) => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.calculation = newCalculation;\n      })\n    );\n  };\n\n  const handleUnitChange: FormatControlsProps['onChange'] = (newFormat: FormatOptions) => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.format = newFormat;\n      })\n    );\n  };\n\n  const handleSortChange: SortSelectorProps['onChange'] = (newSort: SortOption) => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.sort = newSort;\n      })\n    );\n  };\n\n  const handleModeChange: ModeSelectorProps['onChange'] = (newMode: ModeOption) => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.mode = newMode;\n      })\n    );\n  };\n\n  const handleResetSettings: MouseEventHandler<HTMLButtonElement> = () => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.calculation = DEFAULT_CALCULATION;\n        draft.format = DEFAULT_FORMAT;\n        draft.sort = DEFAULT_SORT;\n        draft.mode = DEFAULT_MODE;\n      })\n    );\n  };\n\n  // ensures decimalPlaces defaults to correct value\n  const format = merge({}, DEFAULT_FORMAT, value.format);\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Misc\">\n          <FormatControls value={format} onChange={handleUnitChange} disabled={value.mode === 'percentage'} />\n          <CalculationSelector value={value.calculation} onChange={handleCalculationChange} />\n          <SortSelector value={value.sort} onChange={handleSortChange} />\n          <ModeSelector value={value.mode} onChange={handleModeChange} disablePercentageMode={isPercentUnit(format)} />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button variant=\"outlined\" color=\"secondary\" onClick={handleResetSettings}>\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Button","FormatControls","ModeSelector","OptionsEditorColumn","OptionsEditorGrid","OptionsEditorGroup","SortSelector","DEFAULT_CALCULATION","isPercentUnit","CalculationSelector","produce","merge","DEFAULT_FORMAT","DEFAULT_MODE","DEFAULT_SORT","BarChartOptionsEditorSettings","props","onChange","value","handleCalculationChange","newCalculation","draft","calculation","handleUnitChange","newFormat","format","handleSortChange","newSort","sort","handleModeChange","newMode","mode","handleResetSettings","title","disabled","disablePercentageMode","variant","color","onClick"],"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,SAASA,MAAM,QAAQ,gBAAgB;AACvC,SACEC,cAAc,EAGdC,YAAY,EAEZC,mBAAmB,EACnBC,iBAAiB,EACjBC,kBAAkB,EAElBC,YAAY,QAEP,yBAAyB;AAChC,SAA0BC,mBAAmB,EAAiBC,aAAa,QAAQ,mBAAmB;AACtG,SAASC,mBAAmB,QAAkC,4BAA4B;AAC1F,SAASC,OAAO,QAAQ,QAAQ;AAChC,OAAOC,WAAW,eAAe;AAEjC,SAGEC,cAAc,EACdC,YAAY,EACZC,YAAY,QACP,oBAAoB;AAE3B,OAAO,SAASC,8BAA8BC,KAAiC;IAC7E,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,0BAAgE,CAACC;QACrEH,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMC,WAAW,GAAGF;QACtB;IAEJ;IAEA,MAAMG,mBAAoD,CAACC;QACzDP,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMI,MAAM,GAAGD;QACjB;IAEJ;IAEA,MAAME,mBAAkD,CAACC;QACvDV,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMO,IAAI,GAAGD;QACf;IAEJ;IAEA,MAAME,mBAAkD,CAACC;QACvDb,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMU,IAAI,GAAGD;QACf;IAEJ;IAEA,MAAME,sBAA4D;QAChEf,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMC,WAAW,GAAGf;YACpBc,MAAMI,MAAM,GAAGb;YACfS,MAAMO,IAAI,GAAGd;YACbO,MAAMU,IAAI,GAAGlB;QACf;IAEJ;IAEA,kDAAkD;IAClD,MAAMY,SAASd,MAAM,CAAC,GAAGC,gBAAgBM,MAAMO,MAAM;IAErD,qBACE,MAACrB;;0BACC,KAACD;0BACC,cAAA,MAACE;oBAAmB4B,OAAM;;sCACxB,KAAChC;4BAAeiB,OAAOO;4BAAQR,UAAUM;4BAAkBW,UAAUhB,MAAMa,IAAI,KAAK;;sCACpF,KAACtB;4BAAoBS,OAAOA,MAAMI,WAAW;4BAAEL,UAAUE;;sCACzD,KAACb;4BAAaY,OAAOA,MAAMU,IAAI;4BAAEX,UAAUS;;sCAC3C,KAACxB;4BAAagB,OAAOA,MAAMa,IAAI;4BAAEd,UAAUY;4BAAkBM,uBAAuB3B,cAAciB;;;;;0BAGtG,KAACtB;0BACC,cAAA,KAACE;oBAAmB4B,OAAM;8BACxB,cAAA,KAACjC;wBAAOoC,SAAQ;wBAAWC,OAAM;wBAAYC,SAASN;kCAAqB;;;;;;AAOrF"}
+{"version":3,"sources":["../../src/BarChartOptionsEditorSettings.tsx"],"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  Autocomplete,\n  Button,\n  Chip,\n  FormControlLabel,\n  Switch,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n} from '@mui/material';\nimport {\n  FormatControls,\n  FormatControlsProps,\n  FormatOptions,\n  isPercentUnit,\n  ModeOption,\n  ModeSelector,\n  ModeSelectorProps,\n  OptionsEditorColumn,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortOption,\n  SortSelector,\n  SortSelectorProps,\n} from '@perses-dev/components';\nimport {\n  CalculationSelector,\n  CalculationSelectorProps,\n  CalculationType,\n  DEFAULT_CALCULATION,\n} from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport { MouseEventHandler, ReactElement } from 'react';\nimport {\n  BarChartOptions,\n  BarChartOptionsEditorProps,\n  DEFAULT_FORMAT,\n  DEFAULT_MODE,\n  DEFAULT_ORIENTATION,\n  DEFAULT_SORT,\n  DEFAULT_IS_STACKED,\n  DEFAULT_GROUP_BY,\n} from './bar-chart-model';\n\nexport function BarChartOptionsEditorSettings(props: BarChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleCalculationChange: CalculationSelectorProps['onChange'] = (newCalculation: CalculationType) => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.calculation = newCalculation;\n      })\n    );\n  };\n\n  const handleUnitChange: FormatControlsProps['onChange'] = (newFormat: FormatOptions) => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.format = newFormat;\n      })\n    );\n  };\n\n  const handleSortChange: SortSelectorProps['onChange'] = (newSort: SortOption) => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.sort = newSort;\n      })\n    );\n  };\n\n  const handleModeChange: ModeSelectorProps['onChange'] = (newMode: ModeOption) => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.mode = newMode;\n      })\n    );\n  };\n\n  const handleResetSettings: MouseEventHandler<HTMLButtonElement> = () => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.calculation = DEFAULT_CALCULATION;\n        draft.format = DEFAULT_FORMAT;\n        draft.sort = DEFAULT_SORT;\n        draft.mode = DEFAULT_MODE;\n        draft.groupBy = DEFAULT_GROUP_BY;\n        draft.isStacked = DEFAULT_IS_STACKED;\n        draft.orientation = DEFAULT_ORIENTATION;\n      })\n    );\n  };\n\n  // ensures decimalPlaces defaults to correct value\n  const format = merge({}, DEFAULT_FORMAT, value.format);\n  const groupBy = value.groupBy ?? DEFAULT_GROUP_BY;\n  const isStacked = value.isStacked ?? DEFAULT_IS_STACKED;\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Misc\">\n          <FormatControls value={format} onChange={handleUnitChange} disabled={value.mode === 'percentage'} />\n          <CalculationSelector value={value.calculation} onChange={handleCalculationChange} />\n          <SortSelector value={value.sort} onChange={handleSortChange} />\n          <ModeSelector value={value.mode} onChange={handleModeChange} disablePercentageMode={isPercentUnit(format)} />\n          <ToggleButtonGroup\n            exclusive\n            size=\"small\"\n            value={value.orientation ?? 'horizontal'}\n            onChange={(_, v) =>\n              v &&\n              onChange(\n                produce(value, (draft: BarChartOptions) => {\n                  draft.orientation = v;\n                })\n              )\n            }\n          >\n            <ToggleButton value=\"horizontal\">Horizontal</ToggleButton>\n            <ToggleButton value=\"vertical\">Vertical</ToggleButton>\n          </ToggleButtonGroup>\n        </OptionsEditorGroup>\n        <OptionsEditorGroup title=\"Stacking\">\n          <Autocomplete\n            multiple\n            freeSolo\n            value={groupBy}\n            onChange={(_, newValue) => {\n              const filtered = (newValue as string[]).filter((v) => v.trim() !== '');\n              onChange(\n                produce(value, (draft: BarChartOptions) => {\n                  draft.groupBy = filtered;\n                  if (filtered.length === 0) draft.isStacked = false;\n                })\n              );\n            }}\n            options={[]}\n            renderTags={(tagValues, getTagProps) =>\n              tagValues.map((option, index) => (\n                <Chip size=\"small\" variant=\"outlined\" label={option} {...getTagProps({ index })} key={option} />\n              ))\n            }\n            renderInput={(params) => (\n              <TextField {...params} size=\"small\" label=\"Group By Labels\" placeholder=\"Type label name + Enter\" />\n            )}\n          />\n          <FormControlLabel\n            control={\n              <Switch\n                size=\"small\"\n                checked={isStacked}\n                disabled={groupBy.length === 0}\n                onChange={(e) =>\n                  onChange(\n                    produce(value, (draft: BarChartOptions) => {\n                      draft.isStacked = e.target.checked;\n                    })\n                  )\n                }\n              />\n            }\n            label=\"Stack bars\"\n          />\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button variant=\"outlined\" color=\"secondary\" onClick={handleResetSettings}>\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Autocomplete","Button","Chip","FormControlLabel","Switch","TextField","ToggleButton","ToggleButtonGroup","FormatControls","isPercentUnit","ModeSelector","OptionsEditorColumn","OptionsEditorGrid","OptionsEditorGroup","SortSelector","CalculationSelector","DEFAULT_CALCULATION","produce","merge","DEFAULT_FORMAT","DEFAULT_MODE","DEFAULT_ORIENTATION","DEFAULT_SORT","DEFAULT_IS_STACKED","DEFAULT_GROUP_BY","BarChartOptionsEditorSettings","props","onChange","value","handleCalculationChange","newCalculation","draft","calculation","handleUnitChange","newFormat","format","handleSortChange","newSort","sort","handleModeChange","newMode","mode","handleResetSettings","groupBy","isStacked","orientation","title","disabled","disablePercentageMode","exclusive","size","_","v","multiple","freeSolo","newValue","filtered","filter","trim","length","options","renderTags","tagValues","getTagProps","map","option","index","variant","label","key","renderInput","params","placeholder","control","checked","e","target","color","onClick"],"mappings":"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"}

package/lib/BarChartPanel.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
-import { TimeSeriesData } from '@perses-dev/core';
 import { PanelProps } from '@perses-dev/plugin-system';
+import { TimeSeriesData } from '@perses-dev/spec';
 import { BarChartOptions } from './bar-chart-model';
 export type BarChartPanelProps = PanelProps<BarChartOptions, TimeSeriesData>;
 export declare function BarChartPanel(props: BarChartPanelProps): ReactElement | null;

package/lib/BarChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartPanel.d.ts","sourceRoot":"","sources":["../../src/BarChartPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAoC,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACpF,OAAO,EAAE,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACvD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIpD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CA4C5E"}
+{"version":3,"file":"BarChartPanel.d.ts","sourceRoot":"","sources":["../../src/BarChartPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAoC,UAAU,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAIpD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CAiH5E"}

package/lib/BarChartPanel.js

@@ -14,14 +14,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useChartsTheme } from '@perses-dev/components';
 import { Box } from '@mui/material';
 import { useMemo } from 'react';
-import { CalculationsMap } from '@perses-dev/core';
+import { CalculationsMap } from '@perses-dev/plugin-system';
 import { calculatePercentages, sortSeriesData } from './utils';
 import { BarChartBase } from './BarChartBase';
 export function BarChartPanel(props) {
-    const { spec: { calculation, format, sort, mode }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, format, sort, mode, groupBy = [], isStacked = false, orientation = 'horizontal' }, contentDimensions, queryResults } = props;
     const chartsTheme = useChartsTheme();
     const PADDING = chartsTheme.container.padding.default;
     const barChartData = useMemo(()=>{
+        if (groupBy.length > 0) return [];
         const calculate = CalculationsMap[calculation];
         const barChartData = [];
         for (const result of queryResults){
@@ -43,9 +44,72 @@ export function BarChartPanel(props) {
         queryResults,
         sort,
         mode,
+        calculation,
+        groupBy
+    ]);
+    const stackedBarChartData = useMemo(()=>{
+        if (groupBy.length === 0) return null;
+        const calculate = CalculationsMap[calculation];
+        const groupMap = new Map();
+        const segmentNamesOrdered = [];
+        const segmentNamesSet = new Set();
+        for (const queryResult of queryResults){
+            for (const seriesData of queryResult.data.series){
+                const labels = seriesData.labels ?? {};
+                const groupKey = groupBy.map((k)=>labels[k] ?? '').join(' / ');
+                const remainingEntries = Object.entries(labels).filter(([k])=>!groupBy.includes(k));
+                const segmentName = remainingEntries.length > 0 ? '{' + remainingEntries.map(([k, v])=>`${k}="${v}"`).join(', ') + '}' : seriesData.formattedName ?? seriesData.name;
+                if (!groupMap.has(groupKey)) {
+                    groupMap.set(groupKey, new Map());
+                }
+                const segMap = groupMap.get(groupKey);
+                if (!segMap) continue;
+                const value = calculate(seriesData.values) ?? 0;
+                segMap.set(segmentName, (segMap.get(segmentName) ?? 0) + value);
+                if (!segmentNamesSet.has(segmentName)) {
+                    segmentNamesSet.add(segmentName);
+                    segmentNamesOrdered.push(segmentName);
+                }
+            }
+        }
+        if (groupMap.size === 0) return null;
+        const getTotalValue = (cat)=>Array.from(groupMap.get(cat)?.values() ?? []).reduce((a, b)=>a + b, 0);
+        let categories = Array.from(groupMap.keys());
+        if (sort === 'asc') {
+            categories = categories.sort((a, b)=>getTotalValue(a) - getTotalValue(b));
+        } else if (sort === 'desc') {
+            categories = categories.sort((a, b)=>getTotalValue(b) - getTotalValue(a));
+        }
+        const series = segmentNamesOrdered.map((segName)=>{
+            const values = categories.map((cat)=>{
+                const rawVal = groupMap.get(cat)?.get(segName) ?? null;
+                if (mode === 'percentage' && rawVal !== null) {
+                    const total = getTotalValue(cat);
+                    return total > 0 ? rawVal / total * 100 : 0;
+                }
+                return rawVal;
+            });
+            return {
+                name: segName,
+                values
+            };
+        });
+        return {
+            categories,
+            series
+        };
+    }, [
+        queryResults,
+        groupBy,
+        sort,
+        mode,
         calculation
     ]);
     if (contentDimensions === undefined) return null;
+    const effectiveFormat = mode === 'percentage' ? {
+        unit: 'percent',
+        decimalPlaces: format?.decimalPlaces
+    } : format;
     return /*#__PURE__*/ _jsx(Box, {
         sx: {
             padding: `${PADDING}px`
@@ -54,8 +118,11 @@ export function BarChartPanel(props) {
             width: contentDimensions.width - PADDING * 2,
             height: contentDimensions.height - PADDING * 2,
             data: barChartData,
-            format: format,
-            mode: mode
+            format: groupBy.length > 0 ? effectiveFormat : format,
+            mode: mode,
+            groupedData: stackedBarChartData,
+            isStacked: isStacked,
+            orientation: orientation
         })
     });
 }

package/lib/BarChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/BarChartPanel.tsx"],"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 { useChartsTheme } from '@perses-dev/components';\nimport { Box } from '@mui/material';\nimport { ReactElement, useMemo } from 'react';\nimport { CalculationType, CalculationsMap, TimeSeriesData } from '@perses-dev/core';\nimport { PanelProps } from '@perses-dev/plugin-system';\nimport { BarChartOptions } from './bar-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\nimport { BarChartBase, BarChartData } from './BarChartBase';\n\nexport type BarChartPanelProps = PanelProps<BarChartOptions, TimeSeriesData>;\n\nexport function BarChartPanel(props: BarChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, format, sort, mode },\n    contentDimensions,\n    queryResults,\n  } = props;\n\n  const chartsTheme = useChartsTheme();\n  const PADDING = chartsTheme.container.padding.default;\n\n  const barChartData: BarChartData[] = useMemo(() => {\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const barChartData: BarChartData[] = [];\n    for (const result of queryResults) {\n      for (const seriesData of result.data.series) {\n        const series = {\n          value: calculate(seriesData.values) ?? null,\n          label: seriesData.formattedName ?? '',\n        };\n        barChartData.push(series);\n      }\n    }\n\n    const sortedBarChartData = sortSeriesData(barChartData, sort);\n    if (mode === 'percentage') {\n      return calculatePercentages(sortedBarChartData);\n    } else {\n      return sortedBarChartData;\n    }\n  }, [queryResults, sort, mode, calculation]);\n\n  if (contentDimensions === undefined) return null;\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <BarChartBase\n        width={contentDimensions.width - PADDING * 2}\n        height={contentDimensions.height - PADDING * 2}\n        data={barChartData}\n        format={format}\n        mode={mode}\n      />\n    </Box>\n  );\n}\n"],"names":["useChartsTheme","Box","useMemo","CalculationsMap","calculatePercentages","sortSeriesData","BarChartBase","BarChartPanel","props","spec","calculation","format","sort","mode","contentDimensions","queryResults","chartsTheme","PADDING","container","padding","default","barChartData","calculate","result","seriesData","data","series","value","values","label","formattedName","push","sortedBarChartData","undefined","sx","width","height"],"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,SAASA,cAAc,QAAQ,yBAAyB;AACxD,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAAuBC,OAAO,QAAQ,QAAQ;AAC9C,SAA0BC,eAAe,QAAwB,mBAAmB;AAGpF,SAASC,oBAAoB,EAAEC,cAAc,QAAQ,UAAU;AAC/D,SAASC,YAAY,QAAsB,iBAAiB;AAI5D,OAAO,SAASC,cAAcC,KAAyB;IACrD,MAAM,EACJC,MAAM,EAAEC,WAAW,EAAEC,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAE,EACzCC,iBAAiB,EACjBC,YAAY,EACb,GAAGP;IAEJ,MAAMQ,cAAchB;IACpB,MAAMiB,UAAUD,YAAYE,SAAS,CAACC,OAAO,CAACC,OAAO;IAErD,MAAMC,eAA+BnB,QAAQ;QAC3C,MAAMoB,YAAYnB,eAAe,CAACO,YAA+B;QACjE,MAAMW,eAA+B,EAAE;QACvC,KAAK,MAAME,UAAUR,aAAc;YACjC,KAAK,MAAMS,cAAcD,OAAOE,IAAI,CAACC,MAAM,CAAE;gBAC3C,MAAMA,SAAS;oBACbC,OAAOL,UAAUE,WAAWI,MAAM,KAAK;oBACvCC,OAAOL,WAAWM,aAAa,IAAI;gBACrC;gBACAT,aAAaU,IAAI,CAACL;YACpB;QACF;QAEA,MAAMM,qBAAqB3B,eAAegB,cAAcT;QACxD,IAAIC,SAAS,cAAc;YACzB,OAAOT,qBAAqB4B;QAC9B,OAAO;YACL,OAAOA;QACT;IACF,GAAG;QAACjB;QAAcH;QAAMC;QAAMH;KAAY;IAE1C,IAAII,sBAAsBmB,WAAW,OAAO;IAE5C,qBACE,KAAChC;QAAIiC,IAAI;YAAEf,SAAS,GAAGF,QAAQ,EAAE,CAAC;QAAC;kBACjC,cAAA,KAACX;YACC6B,OAAOrB,kBAAkBqB,KAAK,GAAGlB,UAAU;YAC3CmB,QAAQtB,kBAAkBsB,MAAM,GAAGnB,UAAU;YAC7CQ,MAAMJ;YACNV,QAAQA;YACRE,MAAMA;;;AAId"}
+{"version":3,"sources":["../../src/BarChartPanel.tsx"],"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 { useChartsTheme } from '@perses-dev/components';\nimport { Box } from '@mui/material';\nimport { ReactElement, useMemo } from 'react';\nimport { CalculationsMap, CalculationType, PanelProps } from '@perses-dev/plugin-system';\nimport { TimeSeriesData } from '@perses-dev/spec';\nimport { BarChartOptions } from './bar-chart-model';\nimport { calculatePercentages, sortSeriesData } from './utils';\nimport { BarChartBase, BarChartData, StackedBarChartData, StackedBarChartSeries } from './BarChartBase';\n\nexport type BarChartPanelProps = PanelProps<BarChartOptions, TimeSeriesData>;\n\nexport function BarChartPanel(props: BarChartPanelProps): ReactElement | null {\n  const {\n    spec: { calculation, format, sort, mode, groupBy = [], isStacked = false, orientation = 'horizontal' },\n    contentDimensions,\n    queryResults,\n  } = props;\n\n  const chartsTheme = useChartsTheme();\n  const PADDING = chartsTheme.container.padding.default;\n\n  const barChartData: BarChartData[] = useMemo(() => {\n    if (groupBy.length > 0) return [];\n\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const barChartData: BarChartData[] = [];\n    for (const result of queryResults) {\n      for (const seriesData of result.data.series) {\n        const series = {\n          value: calculate(seriesData.values) ?? null,\n          label: seriesData.formattedName ?? '',\n        };\n        barChartData.push(series);\n      }\n    }\n\n    const sortedBarChartData = sortSeriesData(barChartData, sort);\n    if (mode === 'percentage') {\n      return calculatePercentages(sortedBarChartData);\n    } else {\n      return sortedBarChartData;\n    }\n  }, [queryResults, sort, mode, calculation, groupBy]);\n\n  const stackedBarChartData: StackedBarChartData | null = useMemo(() => {\n    if (groupBy.length === 0) return null;\n\n    const calculate = CalculationsMap[calculation as CalculationType];\n    const groupMap = new Map<string, Map<string, number>>();\n    const segmentNamesOrdered: string[] = [];\n    const segmentNamesSet = new Set<string>();\n\n    for (const queryResult of queryResults) {\n      for (const seriesData of queryResult.data.series) {\n        const labels = seriesData.labels ?? {};\n\n        const groupKey = groupBy.map((k) => labels[k] ?? '').join(' / ');\n\n        const remainingEntries = Object.entries(labels).filter(([k]) => !groupBy.includes(k));\n        const segmentName =\n          remainingEntries.length > 0\n            ? '{' + remainingEntries.map(([k, v]) => `${k}=\"${v}\"`).join(', ') + '}'\n            : (seriesData.formattedName ?? seriesData.name);\n\n        if (!groupMap.has(groupKey)) {\n          groupMap.set(groupKey, new Map());\n        }\n        const segMap = groupMap.get(groupKey);\n        if (!segMap) continue;\n        const value = calculate(seriesData.values) ?? 0;\n        segMap.set(segmentName, (segMap.get(segmentName) ?? 0) + value);\n\n        if (!segmentNamesSet.has(segmentName)) {\n          segmentNamesSet.add(segmentName);\n          segmentNamesOrdered.push(segmentName);\n        }\n      }\n    }\n\n    if (groupMap.size === 0) return null;\n    const getTotalValue = (cat: string): number =>\n      Array.from(groupMap.get(cat)?.values() ?? []).reduce((a, b) => a + b, 0);\n\n    let categories = Array.from(groupMap.keys());\n    if (sort === 'asc') {\n      categories = categories.sort((a, b) => getTotalValue(a) - getTotalValue(b));\n    } else if (sort === 'desc') {\n      categories = categories.sort((a, b) => getTotalValue(b) - getTotalValue(a));\n    }\n\n    const series: StackedBarChartSeries[] = segmentNamesOrdered.map((segName) => {\n      const values = categories.map((cat) => {\n        const rawVal = groupMap.get(cat)?.get(segName) ?? null;\n        if (mode === 'percentage' && rawVal !== null) {\n          const total = getTotalValue(cat);\n          return total > 0 ? (rawVal / total) * 100 : 0;\n        }\n        return rawVal;\n      });\n      return { name: segName, values };\n    });\n\n    return { categories, series };\n  }, [queryResults, groupBy, sort, mode, calculation]);\n\n  if (contentDimensions === undefined) return null;\n\n  const effectiveFormat =\n    mode === 'percentage' ? { unit: 'percent' as const, decimalPlaces: format?.decimalPlaces } : format;\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <BarChartBase\n        width={contentDimensions.width - PADDING * 2}\n        height={contentDimensions.height - PADDING * 2}\n        data={barChartData}\n        format={groupBy.length > 0 ? effectiveFormat : format}\n        mode={mode}\n        groupedData={stackedBarChartData}\n        isStacked={isStacked}\n        orientation={orientation}\n      />\n    </Box>\n  );\n}\n"],"names":["useChartsTheme","Box","useMemo","CalculationsMap","calculatePercentages","sortSeriesData","BarChartBase","BarChartPanel","props","spec","calculation","format","sort","mode","groupBy","isStacked","orientation","contentDimensions","queryResults","chartsTheme","PADDING","container","padding","default","barChartData","length","calculate","result","seriesData","data","series","value","values","label","formattedName","push","sortedBarChartData","stackedBarChartData","groupMap","Map","segmentNamesOrdered","segmentNamesSet","Set","queryResult","labels","groupKey","map","k","join","remainingEntries","Object","entries","filter","includes","segmentName","v","name","has","set","segMap","get","add","size","getTotalValue","cat","Array","from","reduce","a","b","categories","keys","segName","rawVal","total","undefined","effectiveFormat","unit","decimalPlaces","sx","width","height","groupedData"],"mappings":"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"}

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

@@ -1,9 +1,12 @@
-import { ModeOption, SortOption } from '@perses-dev/components';
-import { CalculationType, Definition, FormatOptions } from '@perses-dev/core';
-import { OptionsEditorProps } from '@perses-dev/plugin-system';
+import { FormatOptions, ModeOption, SortOption } from '@perses-dev/components';
+import { CalculationType, 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;
+export declare const DEFAULT_ORIENTATION: 'horizontal' | 'vertical';
+export declare const DEFAULT_GROUP_BY: string[];
+export declare const DEFAULT_IS_STACKED = false;
 /**
  * The schema for a BarChart panel.
  */
@@ -18,6 +21,9 @@ export interface BarChartOptions {
     format?: FormatOptions;
     sort?: SortOption;
     mode?: ModeOption;
+    orientation?: 'horizontal' | 'vertical';
+    groupBy?: string[];
+    isStacked?: boolean;
 }
 export type BarChartOptionsEditorProps = OptionsEditorProps<BarChartOptions>;
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"bar-chart-model.d.ts","sourceRoot":"","sources":["../../src/bar-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,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,eAAO,MAAM,cAAc,EAAE,aAAsD,CAAC;AACpF,eAAO,MAAM,YAAY,EAAE,UAAmB,CAAC;AAC/C,eAAO,MAAM,YAAY,EAAE,UAAoB,CAAC;AAEhD;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,UAAU,CAAC,eAAe,CAAC;IACrE,IAAI,EAAE,UAAU,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,eAAe,CAAC;IAC7B,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;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,eAAe,CAO9D"}
+{"version":3,"file":"bar-chart-model.d.ts","sourceRoot":"","sources":["../../src/bar-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,eAAe,EAAuB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AACrG,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;AAChD,eAAO,MAAM,mBAAmB,EAAE,YAAY,GAAG,UAAyB,CAAC;AAC3E,eAAO,MAAM,gBAAgB,EAAE,MAAM,EAAO,CAAC;AAC7C,eAAO,MAAM,kBAAkB,QAAQ,CAAC;AAExC;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,UAAU,CAAC,eAAe,CAAC;IACrE,IAAI,EAAE,UAAU,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,MAAM,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;AAE7E;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,eAAe,CAU9D"}

package/lib/bar-chart-model.js

@@ -10,13 +10,16 @@
 // 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
 };
 export const DEFAULT_SORT = 'desc';
 export const DEFAULT_MODE = 'value';
+export const DEFAULT_ORIENTATION = 'horizontal';
+export const DEFAULT_GROUP_BY = [];
+export const DEFAULT_IS_STACKED = false;
 /**
  * Creates the initial/empty options for a BarChart panel.
  */ export function createInitialBarChartOptions() {
@@ -24,7 +27,10 @@ export const DEFAULT_MODE = 'value';
         calculation: DEFAULT_CALCULATION,
         format: DEFAULT_FORMAT,
         sort: DEFAULT_SORT,
-        mode: DEFAULT_MODE
+        mode: DEFAULT_MODE,
+        orientation: DEFAULT_ORIENTATION,
+        groupBy: DEFAULT_GROUP_BY,
+        isStacked: DEFAULT_IS_STACKED
     };
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/bar-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 { 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\n/**\n * The schema for a BarChart panel.\n */\nexport interface BarChartDefinition extends Definition<BarChartOptions> {\n  kind: 'BarChart';\n}\n\n/**\n * The Options object type supported by the BarChart panel plugin.\n */\nexport interface BarChartOptions {\n  calculation: CalculationType;\n  format?: FormatOptions;\n  sort?: SortOption;\n  mode?: ModeOption;\n}\n\nexport type BarChartOptionsEditorProps = OptionsEditorProps<BarChartOptions>;\n\n/**\n * Creates the initial/empty options for a BarChart panel.\n */\nexport function createInitialBarChartOptions(): BarChartOptions {\n  return {\n    calculation: DEFAULT_CALCULATION,\n    format: DEFAULT_FORMAT,\n    sort: DEFAULT_SORT,\n    mode: DEFAULT_MODE,\n  };\n}\n"],"names":["DEFAULT_CALCULATION","DEFAULT_FORMAT","unit","shortValues","DEFAULT_SORT","DEFAULT_MODE","createInitialBarChartOptions","calculation","format","sort","mode"],"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;AAqBhD;;CAEC,GACD,OAAO,SAASC;IACd,OAAO;QACLC,aAAaP;QACbQ,QAAQP;QACRQ,MAAML;QACNM,MAAML;IACR;AACF"}
+{"version":3,"sources":["../../src/bar-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, 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';\nexport const DEFAULT_ORIENTATION: 'horizontal' | 'vertical' = 'horizontal';\nexport const DEFAULT_GROUP_BY: string[] = [];\nexport const DEFAULT_IS_STACKED = false;\n\n/**\n * The schema for a BarChart panel.\n */\nexport interface BarChartDefinition extends Definition<BarChartOptions> {\n  kind: 'BarChart';\n}\n\n/**\n * The Options object type supported by the BarChart panel plugin.\n */\nexport interface BarChartOptions {\n  calculation: CalculationType;\n  format?: FormatOptions;\n  sort?: SortOption;\n  mode?: ModeOption;\n  orientation?: 'horizontal' | 'vertical';\n  groupBy?: string[];\n  isStacked?: boolean;\n}\n\nexport type BarChartOptionsEditorProps = OptionsEditorProps<BarChartOptions>;\n\n/**\n * Creates the initial/empty options for a BarChart panel.\n */\nexport function createInitialBarChartOptions(): BarChartOptions {\n  return {\n    calculation: DEFAULT_CALCULATION,\n    format: DEFAULT_FORMAT,\n    sort: DEFAULT_SORT,\n    mode: DEFAULT_MODE,\n    orientation: DEFAULT_ORIENTATION,\n    groupBy: DEFAULT_GROUP_BY,\n    isStacked: DEFAULT_IS_STACKED,\n  };\n}\n"],"names":["DEFAULT_CALCULATION","DEFAULT_FORMAT","unit","shortValues","DEFAULT_SORT","DEFAULT_MODE","DEFAULT_ORIENTATION","DEFAULT_GROUP_BY","DEFAULT_IS_STACKED","createInitialBarChartOptions","calculation","format","sort","mode","orientation","groupBy","isStacked"],"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,QAA4B,4BAA4B;AAGrG,OAAO,MAAMC,iBAAgC;IAAEC,MAAM;IAAWC,aAAa;AAAK,EAAE;AACpF,OAAO,MAAMC,eAA2B,OAAO;AAC/C,OAAO,MAAMC,eAA2B,QAAQ;AAChD,OAAO,MAAMC,sBAAiD,aAAa;AAC3E,OAAO,MAAMC,mBAA6B,EAAE,CAAC;AAC7C,OAAO,MAAMC,qBAAqB,MAAM;AAwBxC;;CAEC,GACD,OAAO,SAASC;IACd,OAAO;QACLC,aAAaV;QACbW,QAAQV;QACRW,MAAMR;QACNS,MAAMR;QACNS,aAAaR;QACbS,SAASR;QACTS,WAAWR;IACb;AACF"}

package/lib/cjs/BarChart.js

@@ -23,6 +23,7 @@ Object.defineProperty(exports, "BarChart", {
 const _barchartmodel = require("./bar-chart-model");
 const _BarChartOptionsEditorSettings = require("./BarChartOptionsEditorSettings");
 const _BarChartPanel = require("./BarChartPanel");
+const _BarChartExportAction = require("./BarChartExportAction");
 const BarChart = {
     PanelComponent: _BarChartPanel.BarChartPanel,
     panelOptionsEditorComponents: [
@@ -34,5 +35,11 @@ const BarChart = {
     supportedQueryTypes: [
         'TimeSeriesQuery'
     ],
-    createInitialOptions: _barchartmodel.createInitialBarChartOptions
+    createInitialOptions: _barchartmodel.createInitialBarChartOptions,
+    actions: [
+        {
+            component: _BarChartExportAction.BarChartExportAction,
+            location: 'header'
+        }
+    ]
 };