@perses-dev/bar-chart-plugin 0.9.1 → 0.10.1

package/lib/BarChartBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/BarChartBase.tsx"],"sourcesContent":["// Copyright 2023 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 { ReactElement, useMemo } from 'react';\nimport { EChart, ModeOption, getFormattedAxis, useChartsTheme } from '@perses-dev/components';\nimport { FormatOptions, formatValue } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { BarChart as EChartsBarChart } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\n\nuse([EChartsBarChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst BAR_WIN_WIDTH = 14;\nconst BAR_GAP = 6;\n\nexport interface BarChartData {\n  label: string;\n  value: number | null;\n}\n\nexport interface BarChartBaseProps {\n  width: number;\n  height: number;\n  data: BarChartData[] | null;\n  format?: FormatOptions;\n  mode?: ModeOption;\n}\n\nexport function BarChartBase(props: BarChartBaseProps): ReactElement {\n  const { width, height, data, format = { unit: 'decimal' }, mode = 'value' } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (!data || !data.length) return chartsTheme.noDataOption;\n\n    const source: Array<Array<BarChartData['label'] | BarChartData['value']>> = [];\n    data.map((d) => {\n      source.push([d.label, d.value]);\n    });\n\n    return {\n      title: {\n        show: false,\n      },\n      dataset: [\n        {\n          dimensions: ['label', 'value'],\n          source: source,\n        },\n      ],\n      xAxis: getFormattedAxis({}, format),\n      yAxis: {\n        type: 'category',\n        splitLine: {\n          show: false,\n        },\n        axisLabel: {\n          overflow: 'truncate',\n          width: width / 3,\n        },\n      },\n      series: {\n        type: 'bar',\n        label: {\n          show: true,\n          position: 'right',\n          formatter: (params: { data: number[] }): string | undefined => {\n            if (!params.data[1]) {\n              return undefined;\n            }\n\n            if (mode === 'percentage') {\n              return formatValue(params.data[1]!, {\n                unit: 'percent',\n                decimalPlaces: format.decimalPlaces,\n              });\n            }\n            return formatValue(params.data[1], format);\n          },\n          barMinWidth: BAR_WIN_WIDTH,\n          barCategoryGap: BAR_GAP,\n        },\n        itemStyle: {\n          borderRadius: 4,\n          color: chartsTheme.echartsTheme[0],\n        },\n      },\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: { name: string; data: number[] }) =>\n          params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], format)}`,\n      },\n      // increase distance between grid and container to prevent y axis labels from getting cut off\n      grid: {\n        left: '5%',\n        right: '5%',\n      },\n    };\n  }, [data, chartsTheme, width, mode, format]);\n\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{ overflow: 'auto' }}\n    >\n      <EChart\n        sx={{\n          minHeight: height,\n          height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","EChart","getFormattedAxis","useChartsTheme","formatValue","use","BarChart","EChartsBarChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","BAR_WIN_WIDTH","BAR_GAP","BarChartBase","props","width","height","data","format","unit","mode","chartsTheme","option","length","noDataOption","source","map","d","push","label","value","title","show","dataset","dimensions","xAxis","yAxis","type","splitLine","axisLabel","overflow","series","position","formatter","params","undefined","decimalPlaces","barMinWidth","barCategoryGap","itemStyle","borderRadius","color","echartsTheme","tooltip","appendToBody","confine","name","grid","left","right","style","sx","minHeight","theme"],"mappings":"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"}
+{"version":3,"sources":["../../src/BarChartBase.tsx"],"sourcesContent":["// Copyright 2023 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 { ReactElement, useMemo } from 'react';\nimport { EChart, ModeOption, getFormattedAxis, useChartsTheme } from '@perses-dev/components';\nimport { FormatOptions, formatValue } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { BarChart as EChartsBarChart } from 'echarts/charts';\nimport { GridComponent, DatasetComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { Box } from '@mui/material';\n\nuse([EChartsBarChart, GridComponent, DatasetComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst BAR_WIN_WIDTH = 14;\nconst BAR_GAP = 6;\n\nexport interface BarChartData {\n  label: string;\n  value: number | null;\n}\n\nexport interface BarChartBaseProps {\n  width: number;\n  height: number;\n  data: BarChartData[] | null;\n  format?: FormatOptions;\n  mode?: ModeOption;\n}\n\nexport function BarChartBase(props: BarChartBaseProps): ReactElement {\n  const { width, height, data, format = { unit: 'decimal' }, mode = 'value' } = props;\n  const chartsTheme = useChartsTheme();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (!data || !data.length) return chartsTheme.noDataOption;\n\n    const source: Array<Array<BarChartData['label'] | BarChartData['value']>> = [];\n    data.map((d) => {\n      source.push([d.label, d.value]);\n    });\n\n    return {\n      title: {\n        show: false,\n      },\n      dataset: [\n        {\n          dimensions: ['label', 'value'],\n          source: source,\n        },\n      ],\n      xAxis: getFormattedAxis({}, format),\n      yAxis: {\n        type: 'category',\n        splitLine: {\n          show: false,\n        },\n        axisLabel: {\n          overflow: 'truncate',\n          width: width / 3,\n        },\n      },\n      series: {\n        type: 'bar',\n        label: {\n          show: true,\n          position: 'right',\n          formatter: (params: { data: number[] }): string | undefined => {\n            if (!params.data[1]) {\n              return undefined;\n            }\n\n            if (mode === 'percentage') {\n              return formatValue(params.data[1]!, {\n                unit: 'percent',\n                decimalPlaces: format.decimalPlaces,\n              });\n            }\n            return formatValue(params.data[1], format);\n          },\n          barMinWidth: BAR_WIN_WIDTH,\n          barCategoryGap: BAR_GAP,\n        },\n        itemStyle: {\n          borderRadius: 4,\n          color: chartsTheme.echartsTheme[0],\n        },\n      },\n      tooltip: {\n        appendToBody: true,\n        confine: true,\n        formatter: (params: { name: string; data: number[] }) =>\n          params.data[1] && `<b>${params.name}</b> &emsp; ${formatValue(params.data[1], format)}`,\n      },\n      // increase distance between grid and container to prevent y axis labels from getting cut off\n      grid: {\n        left: '5%',\n        right: '5%',\n      },\n    };\n  }, [data, chartsTheme, width, mode, format]);\n\n  return (\n    <Box\n      style={{\n        width: width,\n        height: height,\n      }}\n      sx={{ overflow: 'auto' }}\n    >\n      <EChart\n        style={{\n          minHeight: height,\n          height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n}\n"],"names":["useMemo","EChart","getFormattedAxis","useChartsTheme","formatValue","use","BarChart","EChartsBarChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","CanvasRenderer","Box","BAR_WIN_WIDTH","BAR_GAP","BarChartBase","props","width","height","data","format","unit","mode","chartsTheme","option","length","noDataOption","source","map","d","push","label","value","title","show","dataset","dimensions","xAxis","yAxis","type","splitLine","axisLabel","overflow","series","position","formatter","params","undefined","decimalPlaces","barMinWidth","barCategoryGap","itemStyle","borderRadius","color","echartsTheme","tooltip","appendToBody","confine","name","grid","left","right","style","sx","minHeight","theme"],"mappings":"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"}

package/lib/BarChartOptionsEditorSettings.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import { FormatControls, ModeSelector, OptionsEditorColumn, OptionsEditorGrid, OptionsEditorGroup, SortSelector } from '@perses-dev/components';
 import { DEFAULT_CALCULATION, isPercentUnit } from '@perses-dev/core';

package/lib/BarChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/BarChartOptionsEditorSettings.tsx"],"sourcesContent":["// Copyright 2023 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,oCAAoC;AACpC,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 2023 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,oCAAoC;AACpC,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"}

package/lib/BarChartPanel.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2023 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import { useChartsTheme } from '@perses-dev/components';
 import { Box } from '@mui/material';
 import { useMemo } from 'react';

package/lib/BarChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/BarChartPanel.tsx"],"sourcesContent":["// Copyright 2023 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,oCAAoC;AACpC,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 2023 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,oCAAoC;AACpC,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"}

package/lib/bootstrap.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 // Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -10,7 +11,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 const root = ReactDOM.createRoot(document.getElementById('root'));

package/lib/bootstrap.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}
+{"version":3,"sources":["../../src/bootstrap.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\nimport ReactDOM from 'react-dom/client';\n\nconst root = ReactDOM.createRoot(document.getElementById('root')!);\nroot.render(<React.StrictMode></React.StrictMode>);\n"],"names":["React","ReactDOM","root","createRoot","document","getElementById","render","StrictMode"],"mappings":";AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAOA,WAAW,QAAQ;AAC1B,OAAOC,cAAc,mBAAmB;AAExC,MAAMC,OAAOD,SAASE,UAAU,CAACC,SAASC,cAAc,CAAC;AACzDH,KAAKI,MAAM,eAAC,KAACN,MAAMO,UAAU"}

package/lib/cjs/BarChartBase.js

@@ -129,7 +129,7 @@ function BarChartBase(props) {
             overflow: 'auto'
         },
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.EChart, {
-            sx: {
+            style: {
                 minHeight: height,
                 height: data ? data.length * (BAR_WIN_WIDTH + BAR_GAP) : '100%'
             },

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

@@ -17,20 +17,20 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    DEFAULT_FORMAT: function() {
+    get DEFAULT_FORMAT () {
         return DEFAULT_FORMAT;
     },
-    DEFAULT_MODE: function() {
+    get DEFAULT_MODE () {
         return DEFAULT_MODE;
     },
-    DEFAULT_SORT: function() {
+    get DEFAULT_SORT () {
         return DEFAULT_SORT;
     },
-    createInitialBarChartOptions: function() {
+    get createInitialBarChartOptions () {
         return createInitialBarChartOptions;
     }
 });

package/lib/cjs/index-federation.js

@@ -1,15 +1,3 @@
-// Copyright 2024 The Perses Authors
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
 "use strict";
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -52,4 +40,16 @@ function _interop_require_wildcard(obj, nodeInterop) {
     }
     return newObj;
 }
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
 Promise.resolve().then(()=>/*#__PURE__*/ _interop_require_wildcard(require("./bootstrap")));

package/lib/cjs/tresholds.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    convertThresholds: function() {
+    get convertThresholds () {
         return convertThresholds;
     },
-    defaultThresholdInput: function() {
+    get defaultThresholdInput () {
         return defaultThresholdInput;
     }
 });

package/lib/cjs/utils.js

@@ -17,14 +17,14 @@ Object.defineProperty(exports, "__esModule", {
 function _export(target, all) {
     for(var name in all)Object.defineProperty(target, name, {
         enumerable: true,
-        get: all[name]
+        get: Object.getOwnPropertyDescriptor(all, name).get
     });
 }
 _export(exports, {
-    calculatePercentages: function() {
+    get calculatePercentages () {
         return calculatePercentages;
     },
-    sortSeriesData: function() {
+    get sortSeriesData () {
         return sortSeriesData;
     }
 });

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "BarChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.9.1",
+      "buildVersion": "0.10.1",
       "buildName": "@perses-dev/bar-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/BarChart.f638b0dc.js",
+      "name": "__mf/js/BarChart.fd19299c.js",
       "path": "",
       "type": "global"
     },
@@ -20,9 +20,9 @@
       "api": ""
     },
     "globalName": "BarChart",
-    "pluginVersion": "0.19.1",
+    "pluginVersion": "0.21.6",
     "prefetchInterface": false,
-    "publicPath": "/plugins/BarChart/"
+    "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/BarChart/\"; }"
   },
   "shared": [
     {
@@ -35,7 +35,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/960.33cdf4ef.js"
+            "__mf/js/async/274.9bfff28e.js"
           ]
         },
         "css": {
@@ -54,9 +54,9 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/694.beb18780.js",
-            "__mf/js/async/770.ece8043c.js",
-            "__mf/js/async/790.219148ac.js"
+            "__mf/js/async/235.951938a6.js",
+            "__mf/js/async/616.302bdae0.js",
+            "__mf/js/async/854.63eee34f.js"
           ]
         },
         "css": {
@@ -75,8 +75,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/214.c9488f88.js",
-            "__mf/js/async/738.7c9852d4.js"
+            "__mf/js/async/587.bcc920f1.js",
+            "__mf/js/async/968.d562d0d2.js"
           ]
         },
         "css": {
@@ -88,14 +88,14 @@
     {
       "id": "BarChart:@perses-dev/components",
       "name": "@perses-dev/components",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.2",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.2",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/288.70b237a6.js"
+            "__mf/js/async/790.847088e2.js"
           ]
         },
         "css": {
@@ -107,14 +107,14 @@
     {
       "id": "BarChart:@perses-dev/plugin-system",
       "name": "@perses-dev/plugin-system",
-      "version": "0.52.0",
+      "version": "0.53.0-beta.2",
       "singleton": true,
-      "requiredVersion": "^0.52.0",
+      "requiredVersion": "^0.53.0-beta.2",
       "assets": {
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/109.b86d041e.js"
+            "__mf/js/async/252.3ffb7009.js"
           ]
         },
         "css": {
@@ -133,7 +133,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.c086bb12.js"
+            "__mf/js/async/192.73182890.js"
           ]
         },
         "css": {
@@ -152,7 +152,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/409.fdf96221.js"
+            "__mf/js/async/873.fa6a97f2.js"
           ]
         },
         "css": {
@@ -171,7 +171,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/774.aec5dd0e.js"
+            "__mf/js/async/963.85d5346b.js"
           ]
         },
         "css": {
@@ -190,7 +190,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/981.5c1d40ce.js"
+            "__mf/js/async/392.7bfcf9f9.js"
           ]
         },
         "css": {
@@ -209,7 +209,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/296.78a77608.js"
+            "__mf/js/async/496.b35b3a0a.js"
           ]
         },
         "css": {
@@ -228,7 +228,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/173.3531997c.js"
+            "__mf/js/async/470.82e9b967.js"
           ]
         },
         "css": {
@@ -247,7 +247,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.1b58e06a.js"
+            "__mf/js/async/121.517e00e8.js"
           ]
         },
         "css": {
@@ -266,8 +266,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/553.846194ff.js",
-            "__mf/js/async/623.e68b6216.js"
+            "__mf/js/async/458.cffba90f.js",
+            "__mf/js/async/77.f584b802.js"
           ]
         },
         "css": {
@@ -286,7 +286,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/740.6d6370ec.js"
+            "__mf/js/async/978.458b6e7d.js"
           ]
         },
         "css": {
@@ -304,27 +304,27 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/679.6fb75801.js",
-            "__mf/js/async/69.3c81e152.js",
-            "__mf/js/async/838.bc0c4131.js",
-            "__mf/js/async/298.e67cf440.js",
-            "__mf/js/async/__federation_expose_BarChart.ea2eb1bc.js"
+            "__mf/js/async/703.16dd2eaa.js",
+            "__mf/js/async/255.41e8af2d.js",
+            "__mf/js/async/582.9dfe893c.js",
+            "__mf/js/async/102.b7abdc1f.js",
+            "__mf/js/async/__federation_expose_BarChart.13bf419c.js"
           ],
           "async": [
-            "__mf/js/async/238.45a5ec9c.js",
-            "__mf/js/async/224.5f9af696.js",
-            "__mf/js/async/292.faabc281.js",
-            "__mf/js/async/45.7ccf6b51.js",
-            "__mf/js/async/922.2ce525ff.js",
-            "__mf/js/async/lib-router.10c5a0f9.js",
-            "__mf/js/async/488.b4de54ee.js"
+            "__mf/js/async/588.680cfad0.js",
+            "__mf/js/async/71.dab9ec76.js",
+            "__mf/js/async/356.6146b01c.js",
+            "__mf/js/async/160.0b10468b.js",
+            "__mf/js/async/554.82e03ea5.js",
+            "__mf/js/async/lib-router.4740fed2.js",
+            "__mf/js/async/177.91621efa.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/341.1f61a808.css",
-            "__mf/css/async/263.1f61a808.css"
+            "__mf/css/async/61.d3010b86.css",
+            "__mf/css/async/823.d3010b86.css"
           ]
         }
       },