@perses-dev/status-history-chart-plugin 0.10.0 → 0.11.1

package/lib/StatusHistoryChartBase.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,8 +11,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 { jsx as _jsx } from "react/jsx-runtime";
-import { Box, useTheme } from '@mui/material';
+import { Box, Typography, useTheme } from '@mui/material';
 import { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';
 import { GridComponent, DatasetComponent, TitleComponent, TooltipComponent, VisualMapComponent } from 'echarts/components';
 import { use } from 'echarts/core';
@@ -33,6 +33,7 @@ export const StatusHistoryChartBase = (props)=>{
     const { timeZone } = useTimeZone();
     const chartsTheme = useChartsTheme();
     const theme = useTheme();
+    const noDataTextStyle = chartsTheme.noDataOption.title.textStyle;
     const option = {
         tooltip: {
             appendToBody: true,
@@ -114,15 +115,23 @@ export const StatusHistoryChartBase = (props)=>{
             height: height
         },
         sx: {
-            overflow: 'auto'
+            overflow: 'auto',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
         },
-        children: /*#__PURE__*/ _jsx(EChart, {
-            sx: {
+        children: data.length ? /*#__PURE__*/ _jsx(EChart, {
+            style: {
                 width: '100%',
                 height: height
             },
             option: option,
             theme: chartsTheme.echartsTheme
+        }) : /*#__PURE__*/ _jsx(Typography, {
+            sx: {
+                ...noDataTextStyle
+            },
+            children: "No data"
         })
     });
 };

package/lib/StatusHistoryChartBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatusHistoryChartBase.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 { Box, useTheme } from '@mui/material';\nimport { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  VisualMapComponent,\n  LegendComponentOption,\n} from 'echarts/components';\nimport { use } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { TimeScale } from '@perses-dev/core';\nimport { EChartsCoreOption } from 'echarts';\nimport { FC } from 'react';\nimport { EChart, useChartsTheme, useTimeZone } from '@perses-dev/components';\nimport { getFormattedStatusHistoryAxisLabel } from './utils/get-formatted-axis-label';\nimport { generateTooltipHTML } from './StatusHistoryTooltip';\n\nuse([\n  EChartsHeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport type StatusHistoryData = [number, number, number | undefined];\n\nexport interface StatusHistoryDataItem {\n  value: StatusHistoryData;\n  label?: string;\n  itemStyle?: {\n    color?: string;\n    borderColor?: string;\n    borderWidth?: number;\n  };\n}\n\nexport interface StatusHistoryChartBaseProps {\n  height: number;\n  data: StatusHistoryDataItem[];\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  legend?: LegendComponentOption;\n  timeScale?: TimeScale;\n  colors?: Array<{ value: number | string; color: string }>;\n}\n\nexport const StatusHistoryChartBase: FC<StatusHistoryChartBaseProps> = (props) => {\n  const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;\n  const { timeZone } = useTimeZone();\n  const chartsTheme = useChartsTheme();\n  const theme = useTheme();\n\n  const option: EChartsCoreOption = {\n    tooltip: {\n      appendToBody: true,\n      formatter: (params: { data: StatusHistoryDataItem; marker: string }) => {\n        return generateTooltipHTML({\n          data: params.data.value,\n          label: params.data.label,\n          marker: params.marker,\n          xAxisCategories,\n          yAxisCategories,\n          theme,\n        });\n      },\n    },\n    grid: {\n      top: '5%',\n      bottom: '5%',\n    },\n    xAxis: {\n      type: 'category',\n      data: xAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n      },\n      axisLabel: {\n        hideOverlap: true,\n        formatter: getFormattedStatusHistoryAxisLabel(timeScale?.rangeMs ?? 0, timeZone),\n      },\n    },\n    yAxis: {\n      type: 'category',\n      data: yAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n        interval: 0,\n      },\n      splitLine: {\n        show: false,\n      },\n      axisLabel: {\n        interval: 0,\n      },\n    },\n    visualMap: {\n      show: false,\n      type: 'piecewise',\n      pieces: colors,\n    },\n    series: [\n      {\n        name: 'Status history',\n        type: 'heatmap',\n        coordinateSystem: 'cartesian2d',\n        data: data,\n        label: {\n          show: false,\n        },\n        itemStyle: {\n          borderWidth: 1,\n          borderType: 'solid',\n          borderColor: '#ffffff',\n        },\n        emphasis: {\n          itemStyle: {\n            opacity: 0.5,\n          },\n        },\n      },\n    ],\n  };\n\n  return (\n    <Box style={{ height: height }} sx={{ overflow: 'auto' }}>\n      <EChart\n        sx={{\n          width: '100%',\n          height: height,\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n      />\n    </Box>\n  );\n};\n"],"names":["Box","useTheme","HeatmapChart","EChartsHeatmapChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","VisualMapComponent","use","CanvasRenderer","EChart","useChartsTheme","useTimeZone","getFormattedStatusHistoryAxisLabel","generateTooltipHTML","StatusHistoryChartBase","props","height","data","xAxisCategories","yAxisCategories","timeScale","colors","timeZone","chartsTheme","theme","option","tooltip","appendToBody","formatter","params","value","label","marker","grid","top","bottom","xAxis","type","axisLine","show","splitArea","axisLabel","hideOverlap","rangeMs","yAxis","interval","splitLine","visualMap","pieces","series","name","coordinateSystem","itemStyle","borderWidth","borderType","borderColor","emphasis","opacity","style","sx","overflow","width","echartsTheme"],"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,GAAG,EAAEC,QAAQ,QAAQ,gBAAgB;AAC9C,SAASC,gBAAgBC,mBAAmB,QAAQ,iBAAiB;AACrE,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,EAChBC,kBAAkB,QAEb,qBAAqB;AAC5B,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,cAAc,QAAQ,oBAAoB;AAInD,SAASC,MAAM,EAAEC,cAAc,EAAEC,WAAW,QAAQ,yBAAyB;AAC7E,SAASC,kCAAkC,QAAQ,mCAAmC;AACtF,SAASC,mBAAmB,QAAQ,yBAAyB;AAE7DN,IAAI;IACFN;IACAK;IACAJ;IACAC;IACAC;IACAC;IACAG;CACD;AAwBD,OAAO,MAAMM,yBAA0D,CAACC;IACtE,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,eAAe,EAAEC,eAAe,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGN;IAC9E,MAAM,EAAEO,QAAQ,EAAE,GAAGX;IACrB,MAAMY,cAAcb;IACpB,MAAMc,QAAQzB;IAEd,MAAM0B,SAA4B;QAChCC,SAAS;YACPC,cAAc;YACdC,WAAW,CAACC;gBACV,OAAOhB,oBAAoB;oBACzBI,MAAMY,OAAOZ,IAAI,CAACa,KAAK;oBACvBC,OAAOF,OAAOZ,IAAI,CAACc,KAAK;oBACxBC,QAAQH,OAAOG,MAAM;oBACrBd;oBACAC;oBACAK;gBACF;YACF;QACF;QACAS,MAAM;YACJC,KAAK;YACLC,QAAQ;QACV;QACAC,OAAO;YACLC,MAAM;YACNpB,MAAMC;YACNoB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;YACR;YACAE,WAAW;gBACTC,aAAa;gBACbd,WAAWhB,mCAAmCQ,WAAWuB,WAAW,GAAGrB;YACzE;QACF;QACAsB,OAAO;YACLP,MAAM;YACNpB,MAAME;YACNmB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;gBACNM,UAAU;YACZ;YACAC,WAAW;gBACTP,MAAM;YACR;YACAE,WAAW;gBACTI,UAAU;YACZ;QACF;QACAE,WAAW;YACTR,MAAM;YACNF,MAAM;YACNW,QAAQ3B;QACV;QACA4B,QAAQ;YACN;gBACEC,MAAM;gBACNb,MAAM;gBACNc,kBAAkB;gBAClBlC,MAAMA;gBACNc,OAAO;oBACLQ,MAAM;gBACR;gBACAa,WAAW;oBACTC,aAAa;oBACbC,YAAY;oBACZC,aAAa;gBACf;gBACAC,UAAU;oBACRJ,WAAW;wBACTK,SAAS;oBACX;gBACF;YACF;SACD;IACH;IAEA,qBACE,KAAC3D;QAAI4D,OAAO;YAAE1C,QAAQA;QAAO;QAAG2C,IAAI;YAAEC,UAAU;QAAO;kBACrD,cAAA,KAACnD;YACCkD,IAAI;gBACFE,OAAO;gBACP7C,QAAQA;YACV;YACAS,QAAQA;YACRD,OAAOD,YAAYuC,YAAY;;;AAIvC,EAAE"}
+{"version":3,"sources":["../../src/StatusHistoryChartBase.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 { Box, SxProps, Typography, useTheme } from '@mui/material';\nimport { HeatmapChart as EChartsHeatmapChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  VisualMapComponent,\n  LegendComponentOption,\n} from 'echarts/components';\nimport { use } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { TimeScale } from '@perses-dev/core';\nimport { EChartsCoreOption, TitleComponentOption } from 'echarts';\nimport { FC } from 'react';\nimport { EChart, useChartsTheme, useTimeZone } from '@perses-dev/components';\nimport { getFormattedStatusHistoryAxisLabel } from './utils/get-formatted-axis-label';\nimport { generateTooltipHTML } from './StatusHistoryTooltip';\n\nuse([\n  EChartsHeatmapChart,\n  VisualMapComponent,\n  GridComponent,\n  DatasetComponent,\n  TitleComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport type StatusHistoryData = [number, number, number | undefined];\n\nexport interface StatusHistoryDataItem {\n  value: StatusHistoryData;\n  label?: string;\n  itemStyle?: {\n    color?: string;\n    borderColor?: string;\n    borderWidth?: number;\n  };\n}\n\nexport interface StatusHistoryChartBaseProps {\n  height: number;\n  data: StatusHistoryDataItem[];\n  xAxisCategories: number[];\n  yAxisCategories: string[];\n  legend?: LegendComponentOption;\n  timeScale?: TimeScale;\n  colors?: Array<{ value: number | string; color: string }>;\n}\n\nexport const StatusHistoryChartBase: FC<StatusHistoryChartBaseProps> = (props) => {\n  const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;\n\n  const { timeZone } = useTimeZone();\n  const chartsTheme = useChartsTheme();\n  const theme = useTheme();\n\n  const noDataTextStyle = (chartsTheme.noDataOption.title as TitleComponentOption).textStyle as SxProps;\n\n  const option: EChartsCoreOption = {\n    tooltip: {\n      appendToBody: true,\n      formatter: (params: { data: StatusHistoryDataItem; marker: string }) => {\n        return generateTooltipHTML({\n          data: params.data.value,\n          label: params.data.label,\n          marker: params.marker,\n          xAxisCategories,\n          yAxisCategories,\n          theme,\n        });\n      },\n    },\n    grid: {\n      top: '5%',\n      bottom: '5%',\n    },\n    xAxis: {\n      type: 'category',\n      data: xAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n      },\n      axisLabel: {\n        hideOverlap: true,\n        formatter: getFormattedStatusHistoryAxisLabel(timeScale?.rangeMs ?? 0, timeZone),\n      },\n    },\n    yAxis: {\n      type: 'category',\n      data: yAxisCategories,\n      axisLine: {\n        show: false,\n      },\n      splitArea: {\n        show: false,\n        interval: 0,\n      },\n      splitLine: {\n        show: false,\n      },\n      axisLabel: {\n        interval: 0,\n      },\n    },\n    visualMap: {\n      show: false,\n      type: 'piecewise',\n      pieces: colors,\n    },\n    series: [\n      {\n        name: 'Status history',\n        type: 'heatmap',\n        coordinateSystem: 'cartesian2d',\n        data: data,\n        label: {\n          show: false,\n        },\n        itemStyle: {\n          borderWidth: 1,\n          borderType: 'solid',\n          borderColor: '#ffffff',\n        },\n        emphasis: {\n          itemStyle: {\n            opacity: 0.5,\n          },\n        },\n      },\n    ],\n  };\n\n  return (\n    <Box\n      style={{ height: height }}\n      sx={{\n        overflow: 'auto',\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n      }}\n    >\n      {data.length ? (\n        <EChart\n          style={{\n            width: '100%',\n            height: height,\n          }}\n          option={option}\n          theme={chartsTheme.echartsTheme}\n        />\n      ) : (\n        <Typography sx={{ ...noDataTextStyle }}>No data</Typography>\n      )}\n    </Box>\n  );\n};\n"],"names":["Box","Typography","useTheme","HeatmapChart","EChartsHeatmapChart","GridComponent","DatasetComponent","TitleComponent","TooltipComponent","VisualMapComponent","use","CanvasRenderer","EChart","useChartsTheme","useTimeZone","getFormattedStatusHistoryAxisLabel","generateTooltipHTML","StatusHistoryChartBase","props","height","data","xAxisCategories","yAxisCategories","timeScale","colors","timeZone","chartsTheme","theme","noDataTextStyle","noDataOption","title","textStyle","option","tooltip","appendToBody","formatter","params","value","label","marker","grid","top","bottom","xAxis","type","axisLine","show","splitArea","axisLabel","hideOverlap","rangeMs","yAxis","interval","splitLine","visualMap","pieces","series","name","coordinateSystem","itemStyle","borderWidth","borderType","borderColor","emphasis","opacity","style","sx","overflow","display","justifyContent","alignItems","length","width","echartsTheme"],"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,GAAG,EAAWC,UAAU,EAAEC,QAAQ,QAAQ,gBAAgB;AACnE,SAASC,gBAAgBC,mBAAmB,QAAQ,iBAAiB;AACrE,SACEC,aAAa,EACbC,gBAAgB,EAChBC,cAAc,EACdC,gBAAgB,EAChBC,kBAAkB,QAEb,qBAAqB;AAC5B,SAASC,GAAG,QAAQ,eAAe;AACnC,SAASC,cAAc,QAAQ,oBAAoB;AAInD,SAASC,MAAM,EAAEC,cAAc,EAAEC,WAAW,QAAQ,yBAAyB;AAC7E,SAASC,kCAAkC,QAAQ,mCAAmC;AACtF,SAASC,mBAAmB,QAAQ,yBAAyB;AAE7DN,IAAI;IACFN;IACAK;IACAJ;IACAC;IACAC;IACAC;IACAG;CACD;AAwBD,OAAO,MAAMM,yBAA0D,CAACC;IACtE,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,eAAe,EAAEC,eAAe,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAAGN;IAE9E,MAAM,EAAEO,QAAQ,EAAE,GAAGX;IACrB,MAAMY,cAAcb;IACpB,MAAMc,QAAQzB;IAEd,MAAM0B,kBAAkB,AAACF,YAAYG,YAAY,CAACC,KAAK,CAA0BC,SAAS;IAE1F,MAAMC,SAA4B;QAChCC,SAAS;YACPC,cAAc;YACdC,WAAW,CAACC;gBACV,OAAOpB,oBAAoB;oBACzBI,MAAMgB,OAAOhB,IAAI,CAACiB,KAAK;oBACvBC,OAAOF,OAAOhB,IAAI,CAACkB,KAAK;oBACxBC,QAAQH,OAAOG,MAAM;oBACrBlB;oBACAC;oBACAK;gBACF;YACF;QACF;QACAa,MAAM;YACJC,KAAK;YACLC,QAAQ;QACV;QACAC,OAAO;YACLC,MAAM;YACNxB,MAAMC;YACNwB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;YACR;YACAE,WAAW;gBACTC,aAAa;gBACbd,WAAWpB,mCAAmCQ,WAAW2B,WAAW,GAAGzB;YACzE;QACF;QACA0B,OAAO;YACLP,MAAM;YACNxB,MAAME;YACNuB,UAAU;gBACRC,MAAM;YACR;YACAC,WAAW;gBACTD,MAAM;gBACNM,UAAU;YACZ;YACAC,WAAW;gBACTP,MAAM;YACR;YACAE,WAAW;gBACTI,UAAU;YACZ;QACF;QACAE,WAAW;YACTR,MAAM;YACNF,MAAM;YACNW,QAAQ/B;QACV;QACAgC,QAAQ;YACN;gBACEC,MAAM;gBACNb,MAAM;gBACNc,kBAAkB;gBAClBtC,MAAMA;gBACNkB,OAAO;oBACLQ,MAAM;gBACR;gBACAa,WAAW;oBACTC,aAAa;oBACbC,YAAY;oBACZC,aAAa;gBACf;gBACAC,UAAU;oBACRJ,WAAW;wBACTK,SAAS;oBACX;gBACF;YACF;SACD;IACH;IAEA,qBACE,KAAChE;QACCiE,OAAO;YAAE9C,QAAQA;QAAO;QACxB+C,IAAI;YACFC,UAAU;YACVC,SAAS;YACTC,gBAAgB;YAChBC,YAAY;QACd;kBAEClD,KAAKmD,MAAM,iBACV,KAAC3D;YACCqD,OAAO;gBACLO,OAAO;gBACPrD,QAAQA;YACV;YACAa,QAAQA;YACRL,OAAOD,YAAY+C,YAAY;2BAGjC,KAACxE;YAAWiE,IAAI;gBAAE,GAAGtC,eAAe;YAAC;sBAAG;;;AAIhD,EAAE"}

package/lib/StatusHistoryChartOptionsEditorSettings.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } 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, jsxs as _jsxs } from "react/jsx-runtime";
 import { LegendOptionsEditor } from '@perses-dev/plugin-system';
 import { produce } from 'immer';
 import { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn } from '@perses-dev/components';

package/lib/StatusHistoryChartOptionsEditorSettings.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatusHistoryChartOptionsEditorSettings.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 { LegendOptionsEditor, LegendOptionsEditorProps } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn } from '@perses-dev/components';\nimport { Button } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { StatusHistoryChartOptions, StatusHistroyChartEditorProps } from './status-history-model.js';\n\nexport function StatusHistoryChartOptionsEditorSettings(props: StatusHistroyChartEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleLegendChange: LegendOptionsEditorProps['onChange'] = (newLegend) => {\n    // TODO (sjcobb): fix type, add position, fix glitch\n    onChange(\n      produce(value, (draft: StatusHistoryChartOptions) => {\n        draft.legend = newLegend;\n      })\n    );\n  };\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <LegendOptionsEditor\n          calculation=\"aggregation\"\n          showValuesEditor={false}\n          value={value.legend}\n          onChange={handleLegendChange}\n        />\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button\n            variant=\"outlined\"\n            color=\"secondary\"\n            onClick={() => {\n              onChange(\n                produce(value, (draft: StatusHistoryChartOptions) => {\n                  // reset button removes all optional panel options\n                  draft.legend = undefined;\n                })\n              );\n            }}\n          >\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["LegendOptionsEditor","produce","OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","Button","StatusHistoryChartOptionsEditorSettings","props","onChange","value","handleLegendChange","newLegend","draft","legend","calculation","showValuesEditor","title","variant","color","onClick","undefined"],"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,mBAAmB,QAAkC,4BAA4B;AAC1F,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAQ,yBAAyB;AACpG,SAASC,MAAM,QAAQ,gBAAgB;AAIvC,OAAO,SAASC,wCAAwCC,KAAoC;IAC1F,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,qBAA2D,CAACC;QAChE,oDAAoD;QACpDH,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMC,MAAM,GAAGF;QACjB;IAEJ;IAEA,qBACE,MAACR;;0BACC,KAACC;0BACC,cAAA,KAACJ;oBACCc,aAAY;oBACZC,kBAAkB;oBAClBN,OAAOA,MAAMI,MAAM;oBACnBL,UAAUE;;;0BAGd,KAACN;0BACC,cAAA,KAACF;oBAAmBc,OAAM;8BACxB,cAAA,KAACX;wBACCY,SAAQ;wBACRC,OAAM;wBACNC,SAAS;4BACPX,SACEP,QAAQQ,OAAO,CAACG;gCACd,kDAAkD;gCAClDA,MAAMC,MAAM,GAAGO;4BACjB;wBAEJ;kCACD;;;;;;AAOX"}
+{"version":3,"sources":["../../src/StatusHistoryChartOptionsEditorSettings.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 { LegendOptionsEditor, LegendOptionsEditorProps } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn } from '@perses-dev/components';\nimport { Button } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { StatusHistoryChartOptions, StatusHistroyChartEditorProps } from './status-history-model.js';\n\nexport function StatusHistoryChartOptionsEditorSettings(props: StatusHistroyChartEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleLegendChange: LegendOptionsEditorProps['onChange'] = (newLegend) => {\n    // TODO (sjcobb): fix type, add position, fix glitch\n    onChange(\n      produce(value, (draft: StatusHistoryChartOptions) => {\n        draft.legend = newLegend;\n      })\n    );\n  };\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <LegendOptionsEditor\n          calculation=\"aggregation\"\n          showValuesEditor={false}\n          value={value.legend}\n          onChange={handleLegendChange}\n        />\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button\n            variant=\"outlined\"\n            color=\"secondary\"\n            onClick={() => {\n              onChange(\n                produce(value, (draft: StatusHistoryChartOptions) => {\n                  // reset button removes all optional panel options\n                  draft.legend = undefined;\n                })\n              );\n            }}\n          >\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["LegendOptionsEditor","produce","OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","Button","StatusHistoryChartOptionsEditorSettings","props","onChange","value","handleLegendChange","newLegend","draft","legend","calculation","showValuesEditor","title","variant","color","onClick","undefined"],"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,mBAAmB,QAAkC,4BAA4B;AAC1F,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,mBAAmB,QAAQ,yBAAyB;AACpG,SAASC,MAAM,QAAQ,gBAAgB;AAIvC,OAAO,SAASC,wCAAwCC,KAAoC;IAC1F,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,qBAA2D,CAACC;QAChE,oDAAoD;QACpDH,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMC,MAAM,GAAGF;QACjB;IAEJ;IAEA,qBACE,MAACR;;0BACC,KAACC;0BACC,cAAA,KAACJ;oBACCc,aAAY;oBACZC,kBAAkB;oBAClBN,OAAOA,MAAMI,MAAM;oBACnBL,UAAUE;;;0BAGd,KAACN;0BACC,cAAA,KAACF;oBAAmBc,OAAM;8BACxB,cAAA,KAACX;wBACCY,SAAQ;wBACRC,OAAM;wBACNC,SAAS;4BACPX,SACEP,QAAQQ,OAAO,CAACG;gCACd,kDAAkD;gCAClDA,MAAMC,MAAM,GAAGO;4BACjB;wBAEJ;kCACD;;;;;;AAOX"}

package/lib/StatusHistoryPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusHistoryPanel.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,UAAU,EAAsB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,MAAM,MAAM,4BAA4B,GAAG,UAAU,CAAC,yBAAyB,EAAE,cAAc,CAAC,CAAC;AAEjG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,4BAA4B,GAAG,YAAY,GAAG,IAAI,CAwD3F"}
+{"version":3,"file":"StatusHistoryPanel.d.ts","sourceRoot":"","sources":["../../src/StatusHistoryPanel.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,UAAU,EAAsB,MAAM,2BAA2B,CAAC;AAE3E,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAGtE,MAAM,MAAM,4BAA4B,GAAG,UAAU,CAAC,yBAAyB,EAAE,cAAc,CAAC,CAAC;AAEjG,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,4BAA4B,GAAG,YAAY,GAAG,IAAI,CAoD3F"}

package/lib/StatusHistoryPanel.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 { Box } from '@mui/material';
 import { ContentWithLegend, useChartsTheme } from '@perses-dev/components';
 import { validateLegendSpec } from '@perses-dev/plugin-system';
@@ -32,9 +32,6 @@ export function StatusHistoryPanel(props) {
         width: contentDimensions.width - PADDING * 2,
         height: contentDimensions.height - PADDING * 2
     } : undefined;
-    if (!statusHistoryData || statusHistoryData.length === 0) {
-        return null;
-    }
     return /*#__PURE__*/ _jsx(Box, {
         sx: {
             padding: `${PADDING}px`
@@ -58,7 +55,7 @@ export function StatusHistoryPanel(props) {
                     children: /*#__PURE__*/ _jsx(StatusHistoryChartBase, {
                         xAxisCategories: xAxisCategories,
                         yAxisCategories: yAxisCategories,
-                        data: statusHistoryData,
+                        data: statusHistoryData ?? [],
                         timeScale: timeScale,
                         height: height,
                         colors: colors

package/lib/StatusHistoryPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/StatusHistoryPanel.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 { Box } from '@mui/material';\nimport { ContentWithLegend, useChartsTheme } from '@perses-dev/components';\nimport { PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport { merge } from 'lodash';\nimport { ReactElement, useMemo } from 'react';\nimport { TimeSeriesData } from '@perses-dev/core';\nimport { useStatusHistoryDataModel } from './utils/data-transform';\nimport { StatusHistoryChartOptions } from './status-history-model.js';\nimport { StatusHistoryChartBase } from './StatusHistoryChartBase';\n\nexport type StatusHistoryChartPanelProps = PanelProps<StatusHistoryChartOptions, TimeSeriesData>;\n\nexport function StatusHistoryPanel(props: StatusHistoryChartPanelProps): ReactElement | null {\n  const { spec, contentDimensions, queryResults } = props;\n\n  const legend = useMemo(() => {\n    return spec.legend && validateLegendSpec(spec.legend) ? merge({}, spec.legend) : undefined;\n  }, [spec.legend]);\n\n  const chartsTheme = useChartsTheme();\n  const PADDING = chartsTheme.container.padding.default;\n\n  const { statusHistoryData, yAxisCategories, xAxisCategories, legendItems, timeScale, colors } =\n    useStatusHistoryDataModel(queryResults, chartsTheme.echartsTheme.color as string[], spec);\n\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - PADDING * 2,\n        height: contentDimensions.height - PADDING * 2,\n      }\n    : undefined;\n\n  if (!statusHistoryData || statusHistoryData.length === 0) {\n    return null;\n  }\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions?.width ?? 400}\n        height={adjustedContentDimensions?.height ?? 1000}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems || [],\n            selectedItems: 'ALL',\n            onSelectedItemsChange: () => null,\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box sx={{ height, width }}>\n              <StatusHistoryChartBase\n                xAxisCategories={xAxisCategories}\n                yAxisCategories={yAxisCategories}\n                data={statusHistoryData}\n                timeScale={timeScale}\n                height={height}\n                colors={colors}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["Box","ContentWithLegend","useChartsTheme","validateLegendSpec","merge","useMemo","useStatusHistoryDataModel","StatusHistoryChartBase","StatusHistoryPanel","props","spec","contentDimensions","queryResults","legend","undefined","chartsTheme","PADDING","container","padding","default","statusHistoryData","yAxisCategories","xAxisCategories","legendItems","timeScale","colors","echartsTheme","color","adjustedContentDimensions","width","height","length","sx","legendSize","size","legendProps","options","data","selectedItems","onSelectedItemsChange"],"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,GAAG,QAAQ,gBAAgB;AACpC,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,yBAAyB;AAC3E,SAAqBC,kBAAkB,QAAQ,4BAA4B;AAC3E,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAAuBC,OAAO,QAAQ,QAAQ;AAE9C,SAASC,yBAAyB,QAAQ,yBAAyB;AAEnE,SAASC,sBAAsB,QAAQ,2BAA2B;AAIlE,OAAO,SAASC,mBAAmBC,KAAmC;IACpE,MAAM,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGH;IAElD,MAAMI,SAASR,QAAQ;QACrB,OAAOK,KAAKG,MAAM,IAAIV,mBAAmBO,KAAKG,MAAM,IAAIT,MAAM,CAAC,GAAGM,KAAKG,MAAM,IAAIC;IACnF,GAAG;QAACJ,KAAKG,MAAM;KAAC;IAEhB,MAAME,cAAcb;IACpB,MAAMc,UAAUD,YAAYE,SAAS,CAACC,OAAO,CAACC,OAAO;IAErD,MAAM,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,eAAe,EAAEC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAC3FnB,0BAA0BM,cAAcG,YAAYW,YAAY,CAACC,KAAK,EAAcjB;IAEtF,MAAMkB,4BAAsDjB,oBACxD;QACEkB,OAAOlB,kBAAkBkB,KAAK,GAAGb,UAAU;QAC3Cc,QAAQnB,kBAAkBmB,MAAM,GAAGd,UAAU;IAC/C,IACAF;IAEJ,IAAI,CAACM,qBAAqBA,kBAAkBW,MAAM,KAAK,GAAG;QACxD,OAAO;IACT;IAEA,qBACE,KAAC/B;QAAIgC,IAAI;YAAEd,SAAS,GAAGF,QAAQ,EAAE,CAAC;QAAC;kBACjC,cAAA,KAACf;YACC4B,OAAOD,2BAA2BC,SAAS;YAC3CC,QAAQF,2BAA2BE,UAAU;YAC7CG,YAAYpB,QAAQqB;YACpBC,aACEtB,UAAU;gBACRuB,SAASvB;gBACTwB,MAAMd,eAAe,EAAE;gBACvBe,eAAe;gBACfC,uBAAuB,IAAM;YAC/B;sBAGD,CAAC,EAAET,MAAM,EAAED,KAAK,EAAE;gBACjB,qBACE,KAAC7B;oBAAIgC,IAAI;wBAAEF;wBAAQD;oBAAM;8BACvB,cAAA,KAACtB;wBACCe,iBAAiBA;wBACjBD,iBAAiBA;wBACjBgB,MAAMjB;wBACNI,WAAWA;wBACXM,QAAQA;wBACRL,QAAQA;;;YAIhB;;;AAIR"}
+{"version":3,"sources":["../../src/StatusHistoryPanel.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 { Box } from '@mui/material';\nimport { ContentWithLegend, useChartsTheme } from '@perses-dev/components';\nimport { PanelProps, validateLegendSpec } from '@perses-dev/plugin-system';\nimport { merge } from 'lodash';\nimport { ReactElement, useMemo } from 'react';\nimport { TimeSeriesData } from '@perses-dev/core';\nimport { useStatusHistoryDataModel } from './utils/data-transform';\nimport { StatusHistoryChartOptions } from './status-history-model.js';\nimport { StatusHistoryChartBase } from './StatusHistoryChartBase';\n\nexport type StatusHistoryChartPanelProps = PanelProps<StatusHistoryChartOptions, TimeSeriesData>;\n\nexport function StatusHistoryPanel(props: StatusHistoryChartPanelProps): ReactElement | null {\n  const { spec, contentDimensions, queryResults } = props;\n\n  const legend = useMemo(() => {\n    return spec.legend && validateLegendSpec(spec.legend) ? merge({}, spec.legend) : undefined;\n  }, [spec.legend]);\n\n  const chartsTheme = useChartsTheme();\n  const PADDING = chartsTheme.container.padding.default;\n\n  const { statusHistoryData, yAxisCategories, xAxisCategories, legendItems, timeScale, colors } =\n    useStatusHistoryDataModel(queryResults, chartsTheme.echartsTheme.color as string[], spec);\n\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - PADDING * 2,\n        height: contentDimensions.height - PADDING * 2,\n      }\n    : undefined;\n\n  return (\n    <Box sx={{ padding: `${PADDING}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions?.width ?? 400}\n        height={adjustedContentDimensions?.height ?? 1000}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems || [],\n            selectedItems: 'ALL',\n            onSelectedItemsChange: () => null,\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box sx={{ height, width }}>\n              <StatusHistoryChartBase\n                xAxisCategories={xAxisCategories}\n                yAxisCategories={yAxisCategories}\n                data={statusHistoryData ?? []}\n                timeScale={timeScale}\n                height={height}\n                colors={colors}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["Box","ContentWithLegend","useChartsTheme","validateLegendSpec","merge","useMemo","useStatusHistoryDataModel","StatusHistoryChartBase","StatusHistoryPanel","props","spec","contentDimensions","queryResults","legend","undefined","chartsTheme","PADDING","container","padding","default","statusHistoryData","yAxisCategories","xAxisCategories","legendItems","timeScale","colors","echartsTheme","color","adjustedContentDimensions","width","height","sx","legendSize","size","legendProps","options","data","selectedItems","onSelectedItemsChange"],"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,GAAG,QAAQ,gBAAgB;AACpC,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,yBAAyB;AAC3E,SAAqBC,kBAAkB,QAAQ,4BAA4B;AAC3E,SAASC,KAAK,QAAQ,SAAS;AAC/B,SAAuBC,OAAO,QAAQ,QAAQ;AAE9C,SAASC,yBAAyB,QAAQ,yBAAyB;AAEnE,SAASC,sBAAsB,QAAQ,2BAA2B;AAIlE,OAAO,SAASC,mBAAmBC,KAAmC;IACpE,MAAM,EAAEC,IAAI,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGH;IAElD,MAAMI,SAASR,QAAQ;QACrB,OAAOK,KAAKG,MAAM,IAAIV,mBAAmBO,KAAKG,MAAM,IAAIT,MAAM,CAAC,GAAGM,KAAKG,MAAM,IAAIC;IACnF,GAAG;QAACJ,KAAKG,MAAM;KAAC;IAEhB,MAAME,cAAcb;IACpB,MAAMc,UAAUD,YAAYE,SAAS,CAACC,OAAO,CAACC,OAAO;IAErD,MAAM,EAAEC,iBAAiB,EAAEC,eAAe,EAAEC,eAAe,EAAEC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAE,GAC3FnB,0BAA0BM,cAAcG,YAAYW,YAAY,CAACC,KAAK,EAAcjB;IAEtF,MAAMkB,4BAAsDjB,oBACxD;QACEkB,OAAOlB,kBAAkBkB,KAAK,GAAGb,UAAU;QAC3Cc,QAAQnB,kBAAkBmB,MAAM,GAAGd,UAAU;IAC/C,IACAF;IAEJ,qBACE,KAACd;QAAI+B,IAAI;YAAEb,SAAS,GAAGF,QAAQ,EAAE,CAAC;QAAC;kBACjC,cAAA,KAACf;YACC4B,OAAOD,2BAA2BC,SAAS;YAC3CC,QAAQF,2BAA2BE,UAAU;YAC7CE,YAAYnB,QAAQoB;YACpBC,aACErB,UAAU;gBACRsB,SAAStB;gBACTuB,MAAMb,eAAe,EAAE;gBACvBc,eAAe;gBACfC,uBAAuB,IAAM;YAC/B;sBAGD,CAAC,EAAER,MAAM,EAAED,KAAK,EAAE;gBACjB,qBACE,KAAC7B;oBAAI+B,IAAI;wBAAED;wBAAQD;oBAAM;8BACvB,cAAA,KAACtB;wBACCe,iBAAiBA;wBACjBD,iBAAiBA;wBACjBe,MAAMhB,qBAAqB,EAAE;wBAC7BI,WAAWA;wBACXM,QAAQA;wBACRL,QAAQA;;;YAIhB;;;AAIR"}

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

@@ -43,6 +43,7 @@ const StatusHistoryChartBase = (props)=>{
     const { timeZone } = (0, _components1.useTimeZone)();
     const chartsTheme = (0, _components1.useChartsTheme)();
     const theme = (0, _material.useTheme)();
+    const noDataTextStyle = chartsTheme.noDataOption.title.textStyle;
     const option = {
         tooltip: {
             appendToBody: true,
@@ -124,15 +125,23 @@ const StatusHistoryChartBase = (props)=>{
             height: height
         },
         sx: {
-            overflow: 'auto'
+            overflow: 'auto',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center'
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EChart, {
-            sx: {
+        children: data.length ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.EChart, {
+            style: {
                 width: '100%',
                 height: height
             },
             option: option,
             theme: chartsTheme.echartsTheme
+        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            sx: {
+                ...noDataTextStyle
+            },
+            children: "No data"
         })
     });
 };

package/lib/cjs/StatusHistoryPanel.js

@@ -42,9 +42,6 @@ function StatusHistoryPanel(props) {
         width: contentDimensions.width - PADDING * 2,
         height: contentDimensions.height - PADDING * 2
     } : undefined;
-    if (!statusHistoryData || statusHistoryData.length === 0) {
-        return null;
-    }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             padding: `${PADDING}px`
@@ -68,7 +65,7 @@ function StatusHistoryPanel(props) {
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_StatusHistoryChartBase.StatusHistoryChartBase, {
                         xAxisCategories: xAxisCategories,
                         yAxisCategories: yAxisCategories,
-                        data: statusHistoryData,
+                        data: statusHistoryData ?? [],
                         timeScale: timeScale,
                         height: height,
                         colors: colors

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/utils/get-color.js

@@ -17,23 +17,23 @@ 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, {
-    FALLBACK_COLOR: function() {
+    get FALLBACK_COLOR () {
         return FALLBACK_COLOR;
     },
-    getColorForValue: function() {
+    get getColorForValue () {
         return getColorForValue;
     },
-    getColorsForValues: function() {
+    get getColorsForValues () {
         return getColorsForValues;
     },
-    hexToHSL: function() {
+    get hexToHSL () {
         return hexToHSL;
     },
-    hslToHex: function() {
+    get hslToHex () {
         return hslToHex;
     }
 });

package/mf-manifest.json

@@ -5,11 +5,11 @@
     "name": "StatusHistoryChart",
     "type": "app",
     "buildInfo": {
-      "buildVersion": "0.10.0",
+      "buildVersion": "0.11.1",
       "buildName": "@perses-dev/status-history-chart-plugin"
     },
     "remoteEntry": {
-      "name": "__mf/js/StatusHistoryChart.52fb22ae.js",
+      "name": "__mf/js/StatusHistoryChart.5b8469b5.js",
       "path": "",
       "type": "global"
     },
@@ -20,7 +20,7 @@
       "api": ""
     },
     "globalName": "StatusHistoryChart",
-    "pluginVersion": "0.19.1",
+    "pluginVersion": "0.21.6",
     "prefetchInterface": false,
     "getPublicPath": "function() { const prefix = window.PERSES_PLUGIN_ASSETS_PATH || window.PERSES_APP_CONFIG?.api_prefix || \"\"; return prefix + \"/plugins/StatusHistoryChart/\"; }"
   },
@@ -35,7 +35,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/960.fb944311.js"
+            "__mf/js/async/274.6a9f4c88.js"
           ]
         },
         "css": {
@@ -54,8 +54,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/694.901f7598.js",
-            "__mf/js/async/770.2717fe6a.js"
+            "__mf/js/async/235.59e4cd91.js",
+            "__mf/js/async/616.1c080169.js"
           ]
         },
         "css": {
@@ -74,8 +74,8 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/214.b0f929ef.js",
-            "__mf/js/async/738.4ab65b65.js"
+            "__mf/js/async/587.4f01f05a.js",
+            "__mf/js/async/968.c21f2475.js"
           ]
         },
         "css": {
@@ -87,14 +87,14 @@
     {
       "id": "StatusHistoryChart:@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.bb4c227c.js"
+            "__mf/js/async/790.6a647c6c.js"
           ]
         },
         "css": {
@@ -106,14 +106,14 @@
     {
       "id": "StatusHistoryChart:@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/368.a46eac7c.js"
+            "__mf/js/async/501.1e94e650.js"
           ]
         },
         "css": {
@@ -132,7 +132,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/980.d85dbf86.js"
+            "__mf/js/async/283.94f964e7.js"
           ]
         },
         "css": {
@@ -151,7 +151,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/75.37b2ae0f.js"
+            "__mf/js/async/192.8fa94a82.js"
           ]
         },
         "css": {
@@ -170,7 +170,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/409.ada82acc.js"
+            "__mf/js/async/873.937a61ba.js"
           ]
         },
         "css": {
@@ -189,7 +189,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/981.f9bb8f5d.js"
+            "__mf/js/async/392.0b29b077.js"
           ]
         },
         "css": {
@@ -208,7 +208,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/173.2ad23420.js"
+            "__mf/js/async/470.a6095e83.js"
           ]
         },
         "css": {
@@ -227,7 +227,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/292.e14321fa.js"
+            "__mf/js/async/356.dfb4c773.js"
           ]
         },
         "css": {
@@ -246,7 +246,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/964.69ec877e.js"
+            "__mf/js/async/121.17e95c0f.js"
           ]
         },
         "css": {
@@ -265,7 +265,7 @@
         "js": {
           "async": [],
           "sync": [
-            "__mf/js/async/740.d6f90a72.js"
+            "__mf/js/async/978.563a3078.js"
           ]
         },
         "css": {
@@ -283,25 +283,25 @@
       "assets": {
         "js": {
           "sync": [
-            "__mf/js/async/750.03619521.js",
-            "__mf/js/async/491.a1482b95.js",
-            "__mf/js/async/168.acdd5953.js",
-            "__mf/js/async/__federation_expose_StatusHistoryChart.eaa43159.js"
+            "__mf/js/async/525.9b8b1f1d.js",
+            "__mf/js/async/644.cbae4105.js",
+            "__mf/js/async/153.a05b947a.js",
+            "__mf/js/async/__federation_expose_StatusHistoryChart.8d3d006b.js"
           ],
           "async": [
-            "__mf/js/async/lib-router.c60b631c.js",
-            "__mf/js/async/832.58223f7b.js",
-            "__mf/js/async/488.f8727193.js",
-            "__mf/js/async/238.ddc212bc.js",
-            "__mf/js/async/224.e11df4e6.js",
-            "__mf/js/async/679.04e9e73d.js"
+            "__mf/js/async/lib-router.9ccc993b.js",
+            "__mf/js/async/490.74645007.js",
+            "__mf/js/async/177.8e51631b.js",
+            "__mf/js/async/588.3d58e41b.js",
+            "__mf/js/async/71.a42c00bc.js",
+            "__mf/js/async/623.a8ebcf5c.js"
           ]
         },
         "css": {
           "sync": [],
           "async": [
-            "__mf/css/async/263.17332bd7.css",
-            "__mf/css/async/341.17332bd7.css"
+            "__mf/css/async/823.d3010b86.css",
+            "__mf/css/async/61.d3010b86.css"
           ]
         }
       },