@perses-dev/bar-chart-plugin 0.13.0 → 0.14.0-beta.2

package/lib/BarChartExportAction.js.map

@@ -1 +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"}
+{"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 { IconButton } from '@mui/material';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { exportDataAsCSV, extractExportableData, isExportableData, sanitizeFilename } from '@perses-dev/plugin-system';\nimport DownloadIcon from 'mdi-material-ui/Download';\nimport React, { useCallback, useMemo } from 'react';\n\nimport type { 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":["IconButton","InfoTooltip","exportDataAsCSV","extractExportableData","isExportableData","sanitizeFilename","DownloadIcon","React","useCallback","useMemo","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,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,eAAe,EAAEC,qBAAqB,EAAEC,gBAAgB,EAAEC,gBAAgB,QAAQ,4BAA4B;AACvH,OAAOC,kBAAkB,2BAA2B;AACpD,OAAOC,SAASC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AAIpD,OAAO,MAAMC,uBAAqD,CAAC,EAAEC,YAAY,EAAEC,UAAU,EAAE;IAC7F,MAAMC,iBAAiBJ,QAAQ;QAC7B,OAAON,sBAAsBQ;IAC/B,GAAG;QAACA;KAAa;IAEjB,MAAMG,YAAYL,QAAQ;QACxB,OAAOL,iBAAiBS;IAC1B,GAAG;QAACA;KAAe;IAEnB,MAAME,eAAeP,YAAY;QAC/B,IAAI,CAACK,kBAAkB,CAACC,WAAW;QAEnC,IAAI;YACF,MAAME,QAAQJ,YAAYK,MAAMC,SAASC,QAAQ;YAEjD,MAAMC,UAAUlB,gBAAgB;gBAC9BmB,MAAMR;YACR;YAEA,MAAMS,eAAejB,iBAAiBW;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,KAACb;QAAYqC,aAAY;kBACvB,cAAA,KAACtC;YAAWuC,MAAK;YAAQC,SAASzB;YAAc0B,cAAW;sBACzD,cAAA,KAACnC;gBAAaoC,UAAS;;;;AAI/B,EAAE"}

package/lib/BarChartOptionsEditorSettings.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
-import { BarChartOptionsEditorProps } from './bar-chart-model';
+import type { ReactElement } from 'react';
+import type { BarChartOptionsEditorProps } from './bar-chart-model';
 export declare function BarChartOptionsEditorSettings(props: BarChartOptionsEditorProps): ReactElement;
 //# sourceMappingURL=BarChartOptionsEditorSettings.d.ts.map

package/lib/BarChartOptionsEditorSettings.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BarChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/BarChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAgDA,OAAO,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAEL,0BAA0B,EAO3B,MAAM,mBAAmB,CAAC;AAE3B,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CAuI7F"}
+{"version":3,"file":"BarChartOptionsEditorSettings.d.ts","sourceRoot":"","sources":["../../src/BarChartOptionsEditorSettings.tsx"],"names":[],"mappings":"AAmDA,OAAO,KAAK,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,KAAK,EAAmB,0BAA0B,EAAE,MAAM,mBAAmB,CAAC;AAarF,wBAAgB,6BAA6B,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CAqM7F"}

package/lib/BarChartOptionsEditorSettings.js

@@ -12,13 +12,16 @@ import { createElement as _createElement } from "react";
 // 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 { Autocomplete, Button, Chip, FormControlLabel, Switch, TextField, ToggleButton, ToggleButtonGroup } from '@mui/material';
-import { FormatControls, isPercentUnit, isUnitWithShortValues, 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 omit from 'lodash/omit';
-import { DEFAULT_FORMAT, DEFAULT_MODE, DEFAULT_ORIENTATION, DEFAULT_SORT, DEFAULT_IS_STACKED, DEFAULT_GROUP_BY } from './bar-chart-model';
+import { Autocomplete, Button, Chip, FormControlLabel, IconButton, Stack, Switch, TextField, ToggleButton, ToggleButtonGroup } from "@mui/material";
+import { FormatControls, isPercentUnit, isUnitWithShortValues, ModeSelector, OptionsColorPicker, 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 omit from "lodash/omit";
+import DeleteIcon from "mdi-material-ui/DeleteOutline";
+import AddIcon from "mdi-material-ui/Plus";
+import { DEFAULT_FORMAT, DEFAULT_MODE, DEFAULT_ORIENTATION, DEFAULT_SORT, DEFAULT_IS_STACKED, DEFAULT_GROUP_BY, DEFAULT_VISUAL } from "./bar-chart-model.js";
+const DEFAULT_COLOR_VALUE = '#555';
 export function BarChartOptionsEditorSettings(props) {
     const { onChange, value } = props;
     const handleCalculationChange = (newCalculation)=>{
@@ -50,6 +53,34 @@ export function BarChartOptionsEditorSettings(props) {
             draft.groupBy = DEFAULT_GROUP_BY;
             draft.isStacked = DEFAULT_IS_STACKED;
             draft.orientation = DEFAULT_ORIENTATION;
+            draft.visual = DEFAULT_VISUAL;
+        }));
+    };
+    const handleAddColorOverride = ()=>{
+        onChange(produce(value, (draft)=>{
+            if (!draft.visual) draft.visual = {};
+            if (!draft.visual.colorOverrides) draft.visual.colorOverrides = [];
+            draft.visual.colorOverrides.push({
+                regex: '',
+                color: DEFAULT_COLOR_VALUE
+            });
+        }));
+    };
+    const handleRemoveColorOverride = (index)=>{
+        onChange(produce(value, (draft)=>{
+            draft.visual?.colorOverrides?.splice(index, 1);
+        }));
+    };
+    const handleColorOverrideRegexChange = (index, regex)=>{
+        onChange(produce(value, (draft)=>{
+            const override = draft.visual?.colorOverrides?.[index];
+            if (override) override.regex = regex;
+        }));
+    };
+    const handleColorOverrideColorChange = (index, color)=>{
+        onChange(produce(value, (draft)=>{
+            const override = draft.visual?.colorOverrides?.[index];
+            if (override) override.color = color;
         }));
     };
     // ensures decimalPlaces defaults to correct value
@@ -58,6 +89,7 @@ export function BarChartOptionsEditorSettings(props) {
     ]), value.format);
     const groupBy = value.groupBy ?? DEFAULT_GROUP_BY;
     const isStacked = value.isStacked ?? DEFAULT_IS_STACKED;
+    const colorOverrides = value.visual?.colorOverrides ?? [];
     return /*#__PURE__*/ _jsxs(OptionsEditorGrid, {
         children: [
             /*#__PURE__*/ _jsxs(OptionsEditorColumn, {
@@ -149,16 +181,55 @@ export function BarChartOptionsEditorSettings(props) {
                     })
                 ]
             }),
-            /*#__PURE__*/ _jsx(OptionsEditorColumn, {
-                children: /*#__PURE__*/ _jsx(OptionsEditorGroup, {
-                    title: "Reset Settings",
-                    children: /*#__PURE__*/ _jsx(Button, {
-                        variant: "outlined",
-                        color: "secondary",
-                        onClick: handleResetSettings,
-                        children: "Reset To Defaults"
+            /*#__PURE__*/ _jsxs(OptionsEditorColumn, {
+                children: [
+                    /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+                        title: "Color Overrides",
+                        children: [
+                            colorOverrides.map((override, i)=>/*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    alignItems: "center",
+                                    spacing: 1,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(TextField, {
+                                            size: "small",
+                                            label: "Regex",
+                                            value: override.regex,
+                                            onChange: (e)=>handleColorOverrideRegexChange(i, e.target.value),
+                                            sx: {
+                                                flexGrow: 1
+                                            }
+                                        }),
+                                        /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                                            label: override.regex || `Color override n°${i + 1}`,
+                                            color: override.color || DEFAULT_COLOR_VALUE,
+                                            onColorChange: (color)=>handleColorOverrideColorChange(i, color)
+                                        }),
+                                        /*#__PURE__*/ _jsx(IconButton, {
+                                            "aria-label": `delete color override n°${i + 1}`,
+                                            onClick: ()=>handleRemoveColorOverride(i),
+                                            children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                                        })
+                                    ]
+                                }, i)),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                                onClick: handleAddColorOverride,
+                                children: "Add Color Override"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(OptionsEditorGroup, {
+                        title: "Reset Settings",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            variant: "outlined",
+                            color: "secondary",
+                            onClick: handleResetSettings,
+                            children: "Reset To Defaults"
+                        })
                     })
-                })
+                ]
             })
         ]
     });

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 {\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  isUnitWithShortValues,\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 omit from 'lodash/omit';\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(\n    {},\n    !value.format || isUnitWithShortValues(value.format) ? DEFAULT_FORMAT : omit(DEFAULT_FORMAT, ['shortValues']),\n    value.format\n  );\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","isUnitWithShortValues","ModeSelector","OptionsEditorColumn","OptionsEditorGrid","OptionsEditorGroup","SortSelector","CalculationSelector","DEFAULT_CALCULATION","produce","merge","omit","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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"}
+{"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  IconButton,\n  Stack,\n  Switch,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n} from '@mui/material';\nimport type {\n  FormatControlsProps,\n  FormatOptions,\n  ModeOption,\n  ModeSelectorProps,\n  SortOption,\n  SortSelectorProps,\n} from '@perses-dev/components';\nimport {\n  FormatControls,\n  isPercentUnit,\n  isUnitWithShortValues,\n  ModeSelector,\n  OptionsColorPicker,\n  OptionsEditorColumn,\n  OptionsEditorGrid,\n  OptionsEditorGroup,\n  SortSelector,\n} from '@perses-dev/components';\nimport type { CalculationSelectorProps, CalculationType } from '@perses-dev/plugin-system';\nimport { CalculationSelector, DEFAULT_CALCULATION } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport merge from 'lodash/merge';\nimport omit from 'lodash/omit';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport type { MouseEventHandler, ReactElement } from 'react';\n\nimport type { BarChartOptions, BarChartOptionsEditorProps } from './bar-chart-model';\nimport {\n  DEFAULT_FORMAT,\n  DEFAULT_MODE,\n  DEFAULT_ORIENTATION,\n  DEFAULT_SORT,\n  DEFAULT_IS_STACKED,\n  DEFAULT_GROUP_BY,\n  DEFAULT_VISUAL,\n} from './bar-chart-model';\n\nconst DEFAULT_COLOR_VALUE = '#555';\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        draft.visual = DEFAULT_VISUAL;\n      }),\n    );\n  };\n\n  const handleAddColorOverride = (): void => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        if (!draft.visual) draft.visual = {};\n        if (!draft.visual.colorOverrides) draft.visual.colorOverrides = [];\n        draft.visual.colorOverrides.push({ regex: '', color: DEFAULT_COLOR_VALUE });\n      }),\n    );\n  };\n\n  const handleRemoveColorOverride = (index: number): void => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        draft.visual?.colorOverrides?.splice(index, 1);\n      }),\n    );\n  };\n\n  const handleColorOverrideRegexChange = (index: number, regex: string): void => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        const override = draft.visual?.colorOverrides?.[index];\n        if (override) override.regex = regex;\n      }),\n    );\n  };\n\n  const handleColorOverrideColorChange = (index: number, color: string): void => {\n    onChange(\n      produce(value, (draft: BarChartOptions) => {\n        const override = draft.visual?.colorOverrides?.[index];\n        if (override) override.color = color;\n      }),\n    );\n  };\n\n  // ensures decimalPlaces defaults to correct value\n  const format = merge(\n    {},\n    !value.format || isUnitWithShortValues(value.format) ? DEFAULT_FORMAT : omit(DEFAULT_FORMAT, ['shortValues']),\n    value.format,\n  );\n  const groupBy = value.groupBy ?? DEFAULT_GROUP_BY;\n  const isStacked = value.isStacked ?? DEFAULT_IS_STACKED;\n  const colorOverrides = value.visual?.colorOverrides ?? [];\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=\"Color Overrides\">\n          {colorOverrides.map((override, i) => (\n            <Stack key={i} direction=\"row\" alignItems=\"center\" spacing={1}>\n              <TextField\n                size=\"small\"\n                label=\"Regex\"\n                value={override.regex}\n                onChange={(e) => handleColorOverrideRegexChange(i, e.target.value)}\n                sx={{ flexGrow: 1 }}\n              />\n              <OptionsColorPicker\n                label={override.regex || `Color override n°${i + 1}`}\n                color={override.color || DEFAULT_COLOR_VALUE}\n                onColorChange={(color) => handleColorOverrideColorChange(i, color)}\n              />\n              <IconButton aria-label={`delete color override n°${i + 1}`} onClick={() => handleRemoveColorOverride(i)}>\n                <DeleteIcon />\n              </IconButton>\n            </Stack>\n          ))}\n          <Button variant=\"outlined\" startIcon={<AddIcon />} onClick={handleAddColorOverride}>\n            Add Color Override\n          </Button>\n        </OptionsEditorGroup>\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","IconButton","Stack","Switch","TextField","ToggleButton","ToggleButtonGroup","FormatControls","isPercentUnit","isUnitWithShortValues","ModeSelector","OptionsColorPicker","OptionsEditorColumn","OptionsEditorGrid","OptionsEditorGroup","SortSelector","CalculationSelector","DEFAULT_CALCULATION","produce","merge","omit","DeleteIcon","AddIcon","DEFAULT_FORMAT","DEFAULT_MODE","DEFAULT_ORIENTATION","DEFAULT_SORT","DEFAULT_IS_STACKED","DEFAULT_GROUP_BY","DEFAULT_VISUAL","DEFAULT_COLOR_VALUE","BarChartOptionsEditorSettings","props","onChange","value","handleCalculationChange","newCalculation","draft","calculation","handleUnitChange","newFormat","format","handleSortChange","newSort","sort","handleModeChange","newMode","mode","handleResetSettings","groupBy","isStacked","orientation","visual","handleAddColorOverride","colorOverrides","push","regex","color","handleRemoveColorOverride","index","splice","handleColorOverrideRegexChange","override","handleColorOverrideColorChange","title","disabled","disablePercentageMode","exclusive","size","_","v","multiple","freeSolo","newValue","filtered","filter","trim","length","options","renderTags","tagValues","getTagProps","map","option","variant","label","key","renderInput","params","placeholder","control","checked","e","target","i","direction","alignItems","spacing","sx","flexGrow","onColorChange","aria-label","onClick","startIcon"],"mappings":"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"}

package/lib/BarChartPanel.d.ts

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

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,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"}
+{"version":3,"file":"BarChartPanel.d.ts","sourceRoot":"","sources":["../../src/BarChartPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAmB,UAAU,EAAE,MAAM,2BAA2B,CAAC;AAE7E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAKzD,MAAM,MAAM,kBAAkB,GAAG,UAAU,CAAC,eAAe,EAAE,cAAc,CAAC,CAAC;AAE7E,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,YAAY,GAAG,IAAI,CAkH5E"}

package/lib/BarChartPanel.js

@@ -11,14 +11,14 @@ import { jsx as _jsx } 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 { useChartsTheme } from '@perses-dev/components';
-import { Box } from '@mui/material';
-import { useMemo } from 'react';
-import { CalculationsMap } from '@perses-dev/plugin-system';
-import { calculatePercentages, sortSeriesData } from './utils';
-import { BarChartBase } from './BarChartBase';
+import { Box } from "@mui/material";
+import { useChartsTheme } from "@perses-dev/components";
+import { CalculationsMap } from "@perses-dev/plugin-system";
+import { useMemo } from "react";
+import { BarChartBase } from "./BarChartBase.js";
+import { calculatePercentages, sortSeriesData } from "./utils.js";
 export function BarChartPanel(props) {
-    const { spec: { calculation, format, sort, mode, groupBy = [], isStacked = false, orientation = 'horizontal' }, contentDimensions, queryResults } = props;
+    const { spec: { calculation, format, sort, mode, groupBy = [], isStacked = false, orientation = 'horizontal', visual }, contentDimensions, queryResults } = props;
     const chartsTheme = useChartsTheme();
     const PADDING = chartsTheme.container.padding.default;
     const barChartData = useMemo(()=>{
@@ -76,9 +76,9 @@ export function BarChartPanel(props) {
         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));
+            categories = categories.toSorted((a, b)=>getTotalValue(a) - getTotalValue(b));
         } else if (sort === 'desc') {
-            categories = categories.sort((a, b)=>getTotalValue(b) - getTotalValue(a));
+            categories = categories.toSorted((a, b)=>getTotalValue(b) - getTotalValue(a));
         }
         const series = segmentNamesOrdered.map((segName)=>{
             const values = categories.map((cat)=>{
@@ -122,7 +122,8 @@ export function BarChartPanel(props) {
             mode: mode,
             groupedData: stackedBarChartData,
             isStacked: isStacked,
-            orientation: orientation
+            orientation: orientation,
+            colorOverrides: visual?.colorOverrides
         })
     });
 }

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 { 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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"}
+{"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 { Box } from '@mui/material';\nimport { useChartsTheme } from '@perses-dev/components';\nimport type { CalculationType, PanelProps } from '@perses-dev/plugin-system';\nimport { CalculationsMap } from '@perses-dev/plugin-system';\nimport type { TimeSeriesData } from '@perses-dev/spec';\nimport type { ReactElement } from 'react';\nimport { useMemo } from 'react';\n\nimport type { BarChartOptions } from './bar-chart-model';\nimport type { BarChartData, StackedBarChartData, StackedBarChartSeries } from './BarChartBase';\nimport { BarChartBase } from './BarChartBase';\nimport { calculatePercentages, sortSeriesData } from './utils';\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', visual },\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.toSorted((a, b) => getTotalValue(a) - getTotalValue(b));\n    } else if (sort === 'desc') {\n      categories = categories.toSorted((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        colorOverrides={visual?.colorOverrides}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","useChartsTheme","CalculationsMap","useMemo","BarChartBase","calculatePercentages","sortSeriesData","BarChartPanel","props","spec","calculation","format","sort","mode","groupBy","isStacked","orientation","visual","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","toSorted","segName","rawVal","total","undefined","effectiveFormat","unit","decimalPlaces","sx","width","height","groupedData","colorOverrides"],"mappings":"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"}

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

@@ -1,12 +1,26 @@
-import { FormatOptions, ModeOption, SortOption } from '@perses-dev/components';
-import { CalculationType, OptionsEditorProps } from '@perses-dev/plugin-system';
-import { Definition } from '@perses-dev/spec';
+import type { FormatOptions, ModeOption, SortOption } from '@perses-dev/components';
+import type { CalculationType, OptionsEditorProps } from '@perses-dev/plugin-system';
+import type { 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;
+export declare const DEFAULT_VISUAL: BarChartVisual;
+/**
+ * A regex-based color override for a series/bar.
+ */
+export interface ColorOverride {
+    regex: string;
+    color: string;
+}
+/**
+ * Visual display options for a BarChart panel.
+ */
+export interface BarChartVisual {
+    colorOverrides?: ColorOverride[];
+}
 /**
  * The schema for a BarChart panel.
  */
@@ -24,6 +38,7 @@ export interface BarChartOptions {
     orientation?: 'horizontal' | 'vertical';
     groupBy?: string[];
     isStacked?: boolean;
+    visual?: BarChartVisual;
 }
 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,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"}
+{"version":3,"file":"bar-chart-model.d.ts","sourceRoot":"","sources":["../../src/bar-chart-model.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AACpF,OAAO,KAAK,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAErF,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,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;AACxC,eAAO,MAAM,cAAc,EAAE,cAAmB,CAAC;AAEjD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,cAAc,CAAC,EAAE,aAAa,EAAE,CAAC;CAClC;AAED;;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;IACpB,MAAM,CAAC,EAAE,cAAc,CAAC;CACzB;AAED,MAAM,MAAM,0BAA0B,GAAG,kBAAkB,CAAC,eAAe,CAAC,CAAC;AAE7E;;GAEG;AACH,wBAAgB,4BAA4B,IAAI,eAAe,CAW9D"}

package/lib/bar-chart-model.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { DEFAULT_CALCULATION } from '@perses-dev/plugin-system';
+import { DEFAULT_CALCULATION } from "@perses-dev/plugin-system";
 export const DEFAULT_FORMAT = {
     unit: 'decimal',
     shortValues: true
@@ -20,6 +20,7 @@ export const DEFAULT_MODE = 'value';
 export const DEFAULT_ORIENTATION = 'horizontal';
 export const DEFAULT_GROUP_BY = [];
 export const DEFAULT_IS_STACKED = false;
+export const DEFAULT_VISUAL = {};
 /**
  * Creates the initial/empty options for a BarChart panel.
  */ export function createInitialBarChartOptions() {
@@ -30,7 +31,8 @@ export const DEFAULT_IS_STACKED = false;
         mode: DEFAULT_MODE,
         orientation: DEFAULT_ORIENTATION,
         groupBy: DEFAULT_GROUP_BY,
-        isStacked: DEFAULT_IS_STACKED
+        isStacked: DEFAULT_IS_STACKED,
+        visual: DEFAULT_VISUAL
     };
 }
 

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 { 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"}
+{"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 type { FormatOptions, ModeOption, SortOption } from '@perses-dev/components';\nimport type { CalculationType, OptionsEditorProps } from '@perses-dev/plugin-system';\nimport { DEFAULT_CALCULATION } from '@perses-dev/plugin-system';\nimport type { 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;\nexport const DEFAULT_VISUAL: BarChartVisual = {};\n\n/**\n * A regex-based color override for a series/bar.\n */\nexport interface ColorOverride {\n  regex: string;\n  color: string;\n}\n\n/**\n * Visual display options for a BarChart panel.\n */\nexport interface BarChartVisual {\n  colorOverrides?: ColorOverride[];\n}\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  visual?: BarChartVisual;\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    visual: DEFAULT_VISUAL,\n  };\n}\n"],"names":["DEFAULT_CALCULATION","DEFAULT_FORMAT","unit","shortValues","DEFAULT_SORT","DEFAULT_MODE","DEFAULT_ORIENTATION","DEFAULT_GROUP_BY","DEFAULT_IS_STACKED","DEFAULT_VISUAL","createInitialBarChartOptions","calculation","format","sort","mode","orientation","groupBy","isStacked","visual"],"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;AAIjC,SAASA,mBAAmB,QAAQ,4BAA4B;AAGhE,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;AACxC,OAAO,MAAMC,iBAAiC,CAAC,EAAE;AAwCjD;;CAEC,GACD,OAAO,SAASC;IACd,OAAO;QACLC,aAAaX;QACbY,QAAQX;QACRY,MAAMT;QACNU,MAAMT;QACNU,aAAaT;QACbU,SAAST;QACTU,WAAWT;QACXU,QAAQT;IACV;AACF"}

package/lib/bootstrap.js

@@ -11,8 +11,8 @@ import { jsx as _jsx } 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 React from 'react';
-import ReactDOM from 'react-dom/client';
+import React from "react";
+import ReactDOM from "react-dom/client";
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(/*#__PURE__*/ _jsx(React.StrictMode, {}));
 

package/lib/getPluginModule.d.ts

@@ -1,4 +1,4 @@
-import { PluginModuleResource } from '@perses-dev/plugin-system';
+import type { PluginModuleResource } from '@perses-dev/plugin-system';
 /**
  * Returns the plugin module information from package.json
  */

package/lib/getPluginModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getPluginModule.d.ts","sourceRoot":"","sources":["../../src/getPluginModule.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,oBAAoB,EAAoB,MAAM,2BAA2B,CAAC;AAGnF;;GAEG;AACH,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}
+{"version":3,"file":"getPluginModule.d.ts","sourceRoot":"","sources":["../../src/getPluginModule.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAoB,MAAM,2BAA2B,CAAC;AAIxF;;GAEG;AACH,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}

package/lib/getPluginModule.js

@@ -10,7 +10,9 @@
 // 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 packageJson from '../package.json';
+import packageJson from "../package.json" with {
+    type: 'json'
+};
 /**
  * Returns the plugin module information from package.json
  */ export function getPluginModule() {

package/lib/getPluginModule.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/getPluginModule.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 { PluginModuleResource, PluginModuleSpec } from '@perses-dev/plugin-system';\nimport packageJson from '../package.json';\n\n/**\n * Returns the plugin module information from package.json\n */\nexport function getPluginModule(): PluginModuleResource {\n  const { name, version, perses } = packageJson;\n  return {\n    kind: 'PluginModule',\n    metadata: {\n      name,\n      version,\n    },\n    spec: perses as PluginModuleSpec,\n  };\n}\n"],"names":["packageJson","getPluginModule","name","version","perses","kind","metadata","spec"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,OAAOA,iBAAiB,kBAAkB;AAE1C;;CAEC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGJ;IAClC,OAAO;QACLK,MAAM;QACNC,UAAU;YACRJ;YACAC;QACF;QACAI,MAAMH;IACR;AACF"}
+{"version":3,"sources":["../../src/getPluginModule.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 type { PluginModuleResource, PluginModuleSpec } from '@perses-dev/plugin-system';\n\nimport packageJson from '../package.json' with { type: 'json' };\n\n/**\n * Returns the plugin module information from package.json\n */\nexport function getPluginModule(): PluginModuleResource {\n  const { name, version, perses } = packageJson;\n  return {\n    kind: 'PluginModule',\n    metadata: {\n      name,\n      version,\n    },\n    spec: perses as PluginModuleSpec,\n  };\n}\n"],"names":["packageJson","type","getPluginModule","name","version","perses","kind","metadata","spec"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAIjC,OAAOA,iBAAiB,uBAAuB;IAAEC,MAAM;AAAO,EAAE;AAEhE;;CAEC,GACD,OAAO,SAASC;IACd,MAAM,EAAEC,IAAI,EAAEC,OAAO,EAAEC,MAAM,EAAE,GAAGL;IAClC,OAAO;QACLM,MAAM;QACNC,UAAU;YACRJ;YACAC;QACF;QACAI,MAAMH;IACR;AACF"}

package/lib/index-federation.js

@@ -10,6 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import('./bootstrap');
+import("./bootstrap.js");
 
 //# sourceMappingURL=index-federation.js.map

package/lib/index.js

@@ -10,10 +10,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './bar-chart-model';
-export * from './BarChart';
-export * from './BarChartOptionsEditorSettings';
-export { getPluginModule } from './getPluginModule';
-export * from './utils';
+export * from "./bar-chart-model.js";
+export * from "./BarChart.js";
+export * from "./BarChartOptionsEditorSettings.js";
+export { getPluginModule } from "./getPluginModule.js";
+export * from "./utils.js";
 
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.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\nexport * from './bar-chart-model';\nexport * from './BarChart';\nexport * from './BarChartOptionsEditorSettings';\nexport { getPluginModule } from './getPluginModule';\nexport * from './utils';\n"],"names":["getPluginModule"],"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,cAAc,oBAAoB;AAClC,cAAc,aAAa;AAC3B,cAAc,kCAAkC;AAChD,SAASA,eAAe,QAAQ,oBAAoB;AACpD,cAAc,UAAU"}
+{"version":3,"sources":["../../src/index.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\nexport * from './bar-chart-model';\nexport * from './BarChart';\nexport * from './BarChartOptionsEditorSettings';\nexport { getPluginModule } from './getPluginModule';\nexport * from './utils';\n"],"names":["getPluginModule"],"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,cAAc,uBAAoB;AAClC,cAAc,gBAAa;AAC3B,cAAc,qCAAkC;AAChD,SAASA,eAAe,QAAQ,uBAAoB;AACpD,cAAc,aAAU"}

package/lib/setup-tests.d.ts

@@ -1,2 +1,2 @@
-import '@testing-library/jest-dom';
+import '@testing-library/jest-dom/vitest';
 //# sourceMappingURL=setup-tests.d.ts.map

package/lib/setup-tests.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"setup-tests.d.ts","sourceRoot":"","sources":["../../src/setup-tests.ts"],"names":[],"mappings":"AAaA,OAAO,2BAA2B,CAAC"}
+{"version":3,"file":"setup-tests.d.ts","sourceRoot":"","sources":["../../src/setup-tests.ts"],"names":[],"mappings":"AAaA,OAAO,kCAAkC,CAAC"}

package/lib/setup-tests.js

@@ -10,8 +10,8 @@
 // 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 '@testing-library/jest-dom';
+import "@testing-library/jest-dom/vitest";
 // Always mock e-charts during tests since we don't have a proper canvas in jsdom
-jest.mock('echarts/core');
+vi.mock('echarts/core');
 
 //# sourceMappingURL=setup-tests.js.map

package/lib/setup-tests.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/setup-tests.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 '@testing-library/jest-dom';\n\n// Always mock e-charts during tests since we don't have a proper canvas in jsdom\njest.mock('echarts/core');\n"],"names":["jest","mock"],"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,OAAO,4BAA4B;AAEnC,iFAAiF;AACjFA,KAAKC,IAAI,CAAC"}
+{"version":3,"sources":["../../src/setup-tests.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 '@testing-library/jest-dom/vitest';\n\n// Always mock e-charts during tests since we don't have a proper canvas in jsdom\nvi.mock('echarts/core');\n"],"names":["vi","mock"],"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,OAAO,mCAAmC;AAE1C,iFAAiF;AACjFA,GAAGC,IAAI,CAAC"}

package/lib/tresholds.d.ts

@@ -1,4 +1,4 @@
-import { FormatOptions, ThresholdColorPalette, ThresholdOptions } from '@perses-dev/components';
+import type { FormatOptions, ThresholdColorPalette, ThresholdOptions } from '@perses-dev/components';
 export type GaugeColorStop = [number, string];
 export type EChartsAxisLineColors = GaugeColorStop[];
 export declare const defaultThresholdInput: ThresholdOptions;

package/lib/tresholds.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tresholds.d.ts","sourceRoot":"","sources":["../../src/tresholds.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAe,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAG7G,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,cAAc,EAAE,CAAC;AAErD,eAAO,MAAM,qBAAqB,EAAE,gBAA4C,CAAC;AAEjF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,gBAAgB,EAC5B,IAAI,EAAE,aAAa,EACnB,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,qBAAqB,GAC7B,qBAAqB,CA4BvB"}
+{"version":3,"file":"tresholds.d.ts","sourceRoot":"","sources":["../../src/tresholds.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAe,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAGlH,MAAM,MAAM,cAAc,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE9C,MAAM,MAAM,qBAAqB,GAAG,cAAc,EAAE,CAAC;AAErD,eAAO,MAAM,qBAAqB,EAAE,gBAA4C,CAAC;AAEjF,wBAAgB,iBAAiB,CAC/B,UAAU,EAAE,gBAAgB,EAC5B,IAAI,EAAE,aAAa,EACnB,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,qBAAqB,GAC7B,qBAAqB,CA4BvB"}