@perses-dev/components 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -28,7 +28,7 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const OptionsEditorGroup = ({ title , children , icon  })=>{
+const OptionsEditorGroup = ({ title, children, icon })=>{
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {

package/dist/cjs/Overlay/Overlay.js

@@ -0,0 +1,71 @@
+// 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    LoadingOverlay: function() {
+        return LoadingOverlay;
+    },
+    NoDataOverlay: function() {
+        return NoDataOverlay;
+    },
+    TextOverlay: function() {
+        return TextOverlay;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function TextOverlay(props) {
+    const { message } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        sx: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+            children: message
+        })
+    });
+}
+function NoDataOverlay(props) {
+    const { resource } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TextOverlay, {
+        message: `No ${resource}`
+    });
+}
+function LoadingOverlay(props) {
+    const { variant = 'rounded' } = props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+        sx: {
+            height: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '0 10px'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Skeleton, {
+            variant: variant,
+            width: "100%",
+            height: "30%",
+            "aria-label": "Loading..."
+        })
+    });
+}

package/dist/cjs/Overlay/index.js

@@ -0,0 +1,30 @@
+// 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./Overlay"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/PieChart/PieChart.js

@@ -0,0 +1,100 @@
+// 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "PieChart", {
+    enumerable: true,
+    get: function() {
+        return PieChart;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _core = require("echarts/core");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _renderers = require("echarts/renderers");
+const _material = require("@mui/material");
+const _ChartsProvider = require("../context/ChartsProvider");
+const _EChart = require("../EChart");
+(0, _core.use)([
+    _charts.PieChart,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.TitleComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+const PIE_WIN_WIDTH = 12;
+const PIE_GAP = 4;
+function PieChart(props) {
+    const { width, height, data } = props;
+    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
+    const option = {
+        title: {
+            text: 'Referer of a Website',
+            subtext: 'Fake Data',
+            left: 'center'
+        },
+        tooltip: {
+            trigger: 'item',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        axisLabel: {
+            overflow: 'truncate',
+            width: width / 3
+        },
+        series: [
+            {
+                name: 'Access From',
+                type: 'pie',
+                radius: '55%',
+                label: false,
+                center: [
+                    '40%',
+                    '50%'
+                ],
+                data: data,
+                emphasis: {
+                    itemStyle: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ],
+        itemStyle: {
+            borderRadius: 2,
+            color: chartsTheme.echartsTheme[0]
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        style: {
+            width: width,
+            height: height
+        },
+        sx: {
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
+            sx: {
+                minHeight: height,
+                height: data ? data.length * (PIE_WIN_WIDTH + PIE_GAP) : '100%'
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+}

package/dist/cjs/PieChart/index.js

@@ -0,0 +1,30 @@
+// 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./PieChart"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -24,7 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 function RefreshIntervalPicker(props) {
-    const { value , onChange , timeOptions , height  } = props;
+    const { value, onChange, timeOptions, height } = props;
     const formattedValue = value;
     // If the dashboard refresh interval is not provided in timeOptions, it will create a specific option for the select
     const customInterval = (0, _react.useMemo)(()=>{

package/dist/cjs/SettingsAutocomplete/SettingsAutocomplete.js

@@ -22,12 +22,11 @@ Object.defineProperty(exports, "SettingsAutocomplete", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-function SettingsAutocomplete({ options , renderInput =(params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+function SettingsAutocomplete({ options, renderInput = (params)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
         ...params
-    }) , ...otherProps }) {
+    }), ...otherProps }) {
     const getOptionLabel = (option)=>{
-        var _option_label;
-        return (_option_label = option.label) !== null && _option_label !== void 0 ? _option_label : option.id;
+        return option.label ?? option.id;
     };
     // Note: this component currently is not virtualized because it is specific
     // to being used for settings, which generally have a pretty small list of
@@ -39,7 +38,7 @@ function SettingsAutocomplete({ options , renderInput =(params)=>/*#__PURE__*/ (
         getOptionLabel: getOptionLabel,
         options: options,
         renderInput: renderInput,
-        renderOption: (props, option)=>{
+        renderOption: ({ key, ...props }, option)=>{
             return /*#__PURE__*/ (0, _jsxruntime.jsx)("li", {
                 ...props,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
@@ -52,12 +51,14 @@ function SettingsAutocomplete({ options , renderInput =(params)=>/*#__PURE__*/ (
                         option.description && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
                             variant: "body2",
                             component: "div",
-                            color: (theme)=>theme.palette.text.secondary,
+                            sx: {
+                                color: (theme)=>theme.palette.text.secondary
+                            },
                             children: option.description
                         })
                     ]
                 })
-            });
+            }, key);
         },
         filterOptions: (0, _material.createFilterOptions)({
             // Include the label and the description in search.

package/dist/cjs/SortSelector/SortSelector.js

@@ -33,8 +33,8 @@ const SORT_OPTIONS = [
         label: 'Descending'
     }
 ];
-function SortSelector({ onChange , value ='desc'  }) {
-    const handleSortChange = (_, { id  })=>{
+function SortSelector({ onChange, value = 'desc' }) {
+    const handleSortChange = (_, { id })=>{
         onChange(id);
     };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_OptionsEditorLayout.OptionsEditorControl, {

package/dist/cjs/SortSelector/SortSelectorButtons.js

@@ -0,0 +1,50 @@
+// 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SortSelectorButtons", {
+    enumerable: true,
+    get: function() {
+        return SortSelectorButtons;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function SortSelectorButtons({ onChange, value, ...props }) {
+    const handleSortChange = (sort)=>{
+        onChange(sort);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.ButtonGroup, {
+        "aria-label": "Sort",
+        ...props,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                onClick: ()=>handleSortChange(undefined),
+                variant: value === undefined ? 'contained' : 'outlined',
+                children: "None"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                onClick: ()=>handleSortChange('asc'),
+                variant: value === 'asc' ? 'contained' : 'outlined',
+                children: "Asc"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                onClick: ()=>handleSortChange('desc'),
+                variant: value === 'desc' ? 'contained' : 'outlined',
+                children: "Desc"
+            })
+        ]
+    });
+}

package/dist/cjs/SortSelector/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./SortSelector"), exports);
+_export_star(require("./SortSelectorButtons"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/StatChart/StatChart.js

@@ -22,22 +22,22 @@ Object.defineProperty(exports, "StatChart", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _material = require("@mui/material");
 const _merge = /*#__PURE__*/ _interop_require_default(require("lodash/merge"));
-const _core1 = require("echarts/core");
+const _core = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
-const _ChartsProvider = require("../context/ChartsProvider");
+const _context = require("../context");
 const _EChart = require("../EChart");
 const _calculateFontSize = require("./calculateFontSize");
+const _formatStatChartValue = require("./utils/formatStatChartValue");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-(0, _core1.use)([
+(0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,
     _components.DatasetComponent,
@@ -49,21 +49,15 @@ const LINE_HEIGHT = 1.2;
 const SERIES_NAME_MAX_FONT_SIZE = 30;
 const SERIES_NAME_FONT_WEIGHT = 400;
 const VALUE_FONT_WEIGHT = 700;
-function StatChart(props) {
-    var _data_seriesData, _data_seriesData1;
-    const { width , height , data , format , color , sparkline , showSeriesName , valueFontSize  } = props;
-    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
-    let formattedValue = '';
-    if (data.calculatedValue === null) {
-        formattedValue = 'null';
-    } else if (typeof data.calculatedValue === 'number') {
-        formattedValue = (0, _core.formatValue)(data.calculatedValue, format);
-    }
+const StatChart = (props)=>{
+    const { width, height, data, sparkline, showSeriesName, format, valueFontSize } = props;
+    const chartsTheme = (0, _context.useChartsTheme)();
+    const color = data.color;
+    const formattedValue = (0, _formatStatChartValue.formatStatChartValue)(data.calculatedValue, format);
     const containerPadding = chartsTheme.container.padding.default;
-    var _data_seriesData_name;
     // calculate series name font size and height
     let seriesNameFontSize = (0, _calculateFontSize.useOptimalFontSize)({
-        text: (_data_seriesData_name = data === null || data === void 0 ? void 0 : (_data_seriesData = data.seriesData) === null || _data_seriesData === void 0 ? void 0 : _data_seriesData.name) !== null && _data_seriesData_name !== void 0 ? _data_seriesData_name : '',
+        text: data?.seriesData?.name ?? '',
         fontWeight: SERIES_NAME_FONT_WEIGHT,
         width,
         height: height * 0.125,
@@ -162,7 +156,7 @@ function StatChart(props) {
             showSeriesName && /*#__PURE__*/ (0, _jsxruntime.jsx)(SeriesName, {
                 padding: containerPadding,
                 fontSize: seriesNameFontSize,
-                children: (_data_seriesData1 = data.seriesData) === null || _data_seriesData1 === void 0 ? void 0 : _data_seriesData1.name
+                children: data.seriesData?.name
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(Value, {
                 variant: "h3",
@@ -182,10 +176,10 @@ function StatChart(props) {
             })
         ]
     });
-}
+};
 const SeriesName = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
-})(({ theme , padding , fontSize  })=>({
+})(({ theme, padding, fontSize })=>({
         color: theme.palette.text.secondary,
         padding: `${padding}px`,
         fontSize: `${fontSize}px`,
@@ -195,8 +189,8 @@ const SeriesName = (0, _material.styled)(_material.Typography, {
     }));
 const Value = (0, _material.styled)(_material.Typography, {
     shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
-})(({ theme , color , padding , fontSize , sparkline  })=>({
-        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
+})(({ theme, color, padding, fontSize, sparkline })=>({
+        color: color ?? theme.palette.text.primary,
         fontSize: `${fontSize}px`,
         padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
         whiteSpace: 'nowrap',

package/dist/cjs/StatChart/calculateFontSize.js

@@ -31,18 +31,16 @@ function getGlobalCanvasContext() {
     }
     return canvasContext;
 }
-function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize , fontSizeOverride  }) {
+function useOptimalFontSize({ text, fontWeight, width, height, lineHeight, maxSize, fontSizeOverride }) {
     const ctx = getGlobalCanvasContext();
-    const { echartsTheme  } = (0, _ChartsProvider.useChartsTheme)();
+    const { echartsTheme } = (0, _ChartsProvider.useChartsTheme)();
     // if user has selected a font size in the settings, use it instead of calculating the optimal size
     if (fontSizeOverride !== undefined) {
         return Number(fontSizeOverride);
     }
     const textStyle = echartsTheme.textStyle;
-    var _Number;
-    const fontSize = (_Number = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && _Number !== void 0 ? _Number : 12;
-    var _textStyle_fontFamily;
-    const fontFamily = (_textStyle_fontFamily = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontFamily) !== null && _textStyle_fontFamily !== void 0 ? _textStyle_fontFamily : 'Lato';
+    const fontSize = Number(textStyle?.fontSize) ?? 12;
+    const fontFamily = textStyle?.fontFamily ?? 'Lato';
     // set the font on the canvas context
     const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
     ctx.font = fontStyle;

package/dist/cjs/StatChart/utils/formatStatChartValue.js

@@ -0,0 +1,34 @@
+// 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "formatStatChartValue", {
+    enumerable: true,
+    get: function() {
+        return formatStatChartValue;
+    }
+});
+const _core = require("@perses-dev/core");
+const formatStatChartValue = (value, format)=>{
+    if (value === null) {
+        return 'null';
+    } else if (typeof value === 'number') {
+        return (0, _core.formatValue)(value, format);
+    } else if (value === undefined) {
+        return '';
+    } else {
+        return value;
+    }
+};

package/dist/cjs/StatusHistoryChart/StatusHistoryChart.js

@@ -0,0 +1,140 @@
+// 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";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "StatusHistoryChart", {
+    enumerable: true,
+    get: function() {
+        return StatusHistoryChart;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _core = require("echarts/core");
+const _renderers = require("echarts/renderers");
+const _ChartsProvider = require("../context/ChartsProvider");
+const _TimeZoneProvider = require("../context/TimeZoneProvider");
+const _EChart = require("../EChart");
+const _getformattedaxislabel = require("./get-formatted-axis-label");
+const _StatusHistoryTooltip = require("./StatusHistoryTooltip");
+(0, _core.use)([
+    _charts.HeatmapChart,
+    _components.VisualMapComponent,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.TitleComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+const StatusHistoryChart = (props)=>{
+    const { height, data, xAxisCategories, yAxisCategories, timeScale, colors } = props;
+    const { timeZone } = (0, _TimeZoneProvider.useTimeZone)();
+    const chartsTheme = (0, _ChartsProvider.useChartsTheme)();
+    const theme = (0, _material.useTheme)();
+    const option = {
+        tooltip: {
+            appendToBody: true,
+            formatter: (params)=>{
+                return (0, _StatusHistoryTooltip.generateTooltipHTML)({
+                    data: params.data.value,
+                    label: params.data.label,
+                    marker: params.marker,
+                    xAxisCategories,
+                    yAxisCategories,
+                    theme
+                });
+            }
+        },
+        grid: {
+            top: '5%',
+            bottom: '5%'
+        },
+        xAxis: {
+            type: 'category',
+            data: xAxisCategories,
+            axisLine: {
+                show: false
+            },
+            splitArea: {
+                show: false
+            },
+            axisLabel: {
+                hideOverlap: true,
+                formatter: (0, _getformattedaxislabel.getFormattedStatusHistoryAxisLabel)(timeScale?.rangeMs ?? 0, timeZone)
+            }
+        },
+        yAxis: {
+            type: 'category',
+            data: yAxisCategories,
+            axisLine: {
+                show: false
+            },
+            splitArea: {
+                show: false,
+                interval: 0
+            },
+            splitLine: {
+                show: false
+            },
+            axisLabel: {
+                interval: 0
+            }
+        },
+        visualMap: {
+            show: false,
+            type: 'piecewise',
+            pieces: colors
+        },
+        series: [
+            {
+                name: 'Status history',
+                type: 'heatmap',
+                coordinateSystem: 'cartesian2d',
+                data: data,
+                label: {
+                    show: false
+                },
+                itemStyle: {
+                    borderWidth: 1,
+                    borderType: 'solid',
+                    borderColor: '#ffffff'
+                },
+                emphasis: {
+                    itemStyle: {
+                        opacity: 0.5
+                    }
+                }
+            }
+        ]
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+        style: {
+            height: height
+        },
+        sx: {
+            overflow: 'auto'
+        },
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_EChart.EChart, {
+            sx: {
+                width: '100%',
+                height: height
+            },
+            option: option,
+            theme: chartsTheme.echartsTheme
+        })
+    });
+};