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

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/BarChartBase.js

@@ -23,28 +23,97 @@ Object.defineProperty(exports, "BarChartBase", {
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _components = require("@perses-dev/components");
-const _core = require("@perses-dev/core");
-const _core1 = require("echarts/core");
+const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components1 = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _material = require("@mui/material");
-(0, _core1.use)([
+(0, _core.use)([
     _charts.BarChart,
     _components1.GridComponent,
     _components1.DatasetComponent,
     _components1.TitleComponent,
     _components1.TooltipComponent,
+    _components1.LegendComponent,
     _renderers.CanvasRenderer
 ]);
 const BAR_WIN_WIDTH = 14;
 const BAR_GAP = 6;
+const LEGEND_HEIGHT = 20;
 function BarChartBase(props) {
     const { width, height, data, format = {
         unit: 'decimal'
-    }, mode = 'value' } = props;
+    }, mode = 'value', groupedData, isStacked = false, orientation = 'horizontal' } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
+    const isHorizontal = orientation === 'horizontal';
     const option = (0, _react.useMemo)(()=>{
+        if (groupedData) {
+            if (!groupedData.series.length || !groupedData.categories.length) return chartsTheme.noDataOption;
+            const { categories, series } = groupedData;
+            return {
+                title: {
+                    show: false
+                },
+                legend: {
+                    type: 'scroll',
+                    show: true,
+                    bottom: 0
+                },
+                xAxis: isHorizontal ? (0, _components.getFormattedAxis)({}, format) : {
+                    type: 'category',
+                    data: categories,
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        overflow: 'truncate',
+                        width: width / 3
+                    }
+                },
+                yAxis: isHorizontal ? {
+                    type: 'category',
+                    data: categories,
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        overflow: 'truncate',
+                        width: width / 3
+                    }
+                } : (0, _components.getFormattedAxis)({}, format),
+                series: series.map((s)=>({
+                        name: s.name,
+                        type: 'bar',
+                        stack: isStacked ? 'total' : undefined,
+                        data: s.values,
+                        label: {
+                            show: false
+                        },
+                        itemStyle: {
+                            borderRadius: isStacked ? 0 : 4
+                        }
+                    })),
+                tooltip: {
+                    trigger: 'axis',
+                    axisPointer: {
+                        type: 'shadow'
+                    },
+                    appendToBody: true,
+                    confine: true,
+                    formatter: (params)=>{
+                        if (!params.length) return '';
+                        const header = `<b>${params[0]?.name}</b><br/>`;
+                        const rows = params.filter((p)=>p.data !== null).map((p)=>`<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${p.color}"></span>` + `${p.seriesName}: <b>${(0, _components.formatValue)(p.data, format)}</b>`).join('<br/>');
+                        return header + rows;
+                    }
+                },
+                grid: {
+                    left: '5%',
+                    right: '5%',
+                    bottom: LEGEND_HEIGHT * 2
+                }
+            };
+        }
         if (!data || !data.length) return chartsTheme.noDataOption;
         const source = [];
         data.map((d)=>{
@@ -66,8 +135,7 @@ function BarChartBase(props) {
                     source: source
                 }
             ],
-            xAxis: (0, _components.getFormattedAxis)({}, format),
-            yAxis: {
+            xAxis: isHorizontal ? (0, _components.getFormattedAxis)({}, format) : {
                 type: 'category',
                 splitLine: {
                     show: false
@@ -77,25 +145,35 @@ function BarChartBase(props) {
                     width: width / 3
                 }
             },
+            yAxis: isHorizontal ? {
+                type: 'category',
+                splitLine: {
+                    show: false
+                },
+                axisLabel: {
+                    overflow: 'truncate',
+                    width: width / 3
+                }
+            } : (0, _components.getFormattedAxis)({}, format),
             series: {
                 type: 'bar',
+                barMinWidth: BAR_WIN_WIDTH,
+                barCategoryGap: BAR_GAP,
                 label: {
                     show: true,
-                    position: 'right',
+                    position: isHorizontal ? 'right' : 'top',
                     formatter: (params)=>{
                         if (!params.data[1]) {
                             return undefined;
                         }
                         if (mode === 'percentage') {
-                            return (0, _core.formatValue)(params.data[1], {
+                            return (0, _components.formatValue)(params.data[1], {
                                 unit: 'percent',
                                 decimalPlaces: format.decimalPlaces
                             });
                         }
-                        return (0, _core.formatValue)(params.data[1], format);
-                    },
-                    barMinWidth: BAR_WIN_WIDTH,
-                    barCategoryGap: BAR_GAP
+                        return (0, _components.formatValue)(params.data[1], format);
+                    }
                 },
                 itemStyle: {
                     borderRadius: 4,
@@ -105,7 +183,7 @@ function BarChartBase(props) {
             tooltip: {
                 appendToBody: true,
                 confine: true,
-                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${(0, _core.formatValue)(params.data[1], format)}`
+                formatter: (params)=>params.data[1] && `<b>${params.name}</b> &emsp; ${(0, _components.formatValue)(params.data[1], format)}`
             },
             // increase distance between grid and container to prevent y axis labels from getting cut off
             grid: {
@@ -115,11 +193,25 @@ function BarChartBase(props) {
         };
     }, [
         data,
+        groupedData,
+        isStacked,
         chartsTheme,
         width,
         mode,
-        format
+        format,
+        isHorizontal
     ]);
+    const numGroupedRows = groupedData ? isStacked ? groupedData.categories.length : groupedData.categories.length * groupedData.series.length : 0;
+    function getChartHeight() {
+        if (groupedData) {
+            if (!isHorizontal) return height;
+            return Math.max(height, numGroupedRows * (BAR_WIN_WIDTH + BAR_GAP) + LEGEND_HEIGHT * 2 + 20);
+        }
+        if (data) {
+            return data.length * (BAR_WIN_WIDTH + BAR_GAP);
+        }
+        return '100%';
+    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         style: {
             width: width,
@@ -131,7 +223,7 @@ function BarChartBase(props) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EChart, {
             style: {
                 minHeight: height,
-                height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%'
+                height: getChartHeight()
             },
             option: option,
             theme: chartsTheme.echartsTheme