@perses-dev/components 0.0.0-snapshot-time-range-height-80d08fc

package/dist/cjs/DateTimeRangePicker/index.js

@@ -0,0 +1,30 @@
+// Copyright 2022 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
+});
+_exportStar(require("./DateTimeRangePicker"), exports);
+_exportStar(require("./TimeRangeSelector"), exports);
+_exportStar(require("./AbsoluteTimePicker"), exports);
+function _exportStar(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/DateTimeRangePicker/utils.js

@@ -0,0 +1,45 @@
+// Copyright 2022 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, {
+    validateDateRange: ()=>validateDateRange,
+    formatAbsoluteRange: ()=>formatAbsoluteRange
+});
+const _dateFns = require("date-fns");
+const _utils = require("../utils");
+function validateDateRange(startDate, endDate) {
+    // TODO: display error as helperText
+    if (!(0, _dateFns.isValid)(startDate) || !(0, _dateFns.isValid)(endDate)) {
+        console.error('Invalid Date');
+        return false;
+    }
+    if (!(0, _dateFns.isBefore)(startDate, endDate)) {
+        console.error('End Time is before Start Time');
+        return false;
+    }
+    return true;
+}
+function formatAbsoluteRange(timeRange, dateFormat, timeZone) {
+    const formattedStart = (0, _utils.formatWithTimeZone)(timeRange.start, dateFormat, timeZone);
+    const formattedEnd = (0, _utils.formatWithTimeZone)(timeRange.end, dateFormat, timeZone);
+    return `${formattedStart} - ${formattedEnd}`;
+}

package/dist/cjs/Drawer/Drawer.js

@@ -0,0 +1,40 @@
+// Copyright 2022 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, "Drawer", {
+    enumerable: true,
+    get: ()=>Drawer
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _utils = require("../utils");
+const DRAWER_DEFAULT_WIDTH = 900;
+const Drawer = ({ anchor ='right' , isOpen , onClose , PaperProps , children , ...rest })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
+        ...rest,
+        open: isOpen,
+        onClose: onClose,
+        anchor: anchor,
+        PaperProps: {
+            ...PaperProps,
+            sx: (0, _utils.combineSx)({
+                width: `${DRAWER_DEFAULT_WIDTH}px`,
+                overflow: 'hidden'
+            }, PaperProps === null || PaperProps === void 0 ? void 0 : PaperProps.sx)
+        },
+        children: children
+    });
+};

package/dist/cjs/Drawer/index.js

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./Drawer"), exports);
+function _exportStar(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/EChart.js

@@ -0,0 +1,188 @@
+// Copyright 2022 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, "EChart", {
+    enumerable: true,
+    get: ()=>EChart
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _core = require("echarts/core");
+const _material = require("@mui/material");
+const _lodashEs = require("lodash-es");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const mouseEvents = [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mousemove',
+    'mouseup',
+    'mouseover',
+    'mouseout',
+    'globalout',
+    'contextmenu'
+];
+const batchEvents = [
+    'datazoom',
+    'downplay',
+    'highlight'
+];
+const EChart = /*#__PURE__*/ _react.default.memo(function EChart({ option , theme , renderer , sx , onEvents , _instance , onChartInitialized  }) {
+    const initialOption = (0, _react.useRef)(option);
+    const prevOption = (0, _react.useRef)(option);
+    const containerRef = (0, _react.useRef)(null);
+    const chartElement = (0, _react.useRef)(null);
+    // Initialize chart, dispose on unmount
+    (0, _react.useLayoutEffect)(()=>{
+        if (containerRef.current === null || chartElement.current !== null) return;
+        chartElement.current = (0, _core.init)(containerRef.current, theme, {
+            renderer: renderer !== null && renderer !== void 0 ? renderer : 'canvas'
+        });
+        if (chartElement.current === undefined) return;
+        chartElement.current.setOption(initialOption.current, true);
+        onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chartElement.current);
+        if (_instance !== undefined) {
+            _instance.current = chartElement.current;
+        }
+        return ()=>{
+            if (chartElement.current === null) return;
+            chartElement.current.dispose();
+            chartElement.current = null;
+        };
+    }, [
+        _instance,
+        onChartInitialized,
+        theme,
+        renderer
+    ]);
+    // Update chart data when option changes
+    (0, _react.useEffect)(()=>{
+        if (prevOption.current === undefined || (0, _lodashEs.isEqual)(prevOption.current, option)) return;
+        if (!chartElement.current) return;
+        chartElement.current.setOption(option, true);
+        prevOption.current = option;
+    }, [
+        option
+    ]);
+    // Resize chart, cleanup listener on unmount
+    (0, _react.useLayoutEffect)(()=>{
+        const updateSize = (0, _lodashEs.debounce)(()=>{
+            if (!chartElement.current) return;
+            chartElement.current.resize();
+        }, 200);
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return ()=>{
+            window.removeEventListener('resize', updateSize);
+        };
+    }, []);
+    // Bind and unbind chart events passed as prop
+    (0, _react.useEffect)(()=>{
+        const chart = chartElement.current;
+        if (!chart || onEvents === undefined) return;
+        bindEvents(chart, onEvents);
+        return ()=>{
+            if (chart === undefined) return;
+            if (chart.isDisposed() === true) return;
+            for(const event in onEvents){
+                chart.off(event);
+            }
+        };
+    }, [
+        onEvents
+    ]);
+    (0, _react.useEffect)(()=>{
+        const updateSize = (0, _lodashEs.debounce)(()=>{
+            if (!chartElement.current) return;
+            chartElement.current.resize();
+        }, 200);
+        updateSize();
+    }, [
+        sx
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        ref: containerRef,
+        sx: sx
+    });
+});
+// Validate event config and bind custom events
+function bindEvents(instance, events) {
+    if (events === undefined) return;
+    function bindEvent(eventName, OnEventFunction) {
+        if (typeof OnEventFunction === 'function') {
+            if (isMouseEvent(eventName)) {
+                instance.on(eventName, (params)=>OnEventFunction(params, instance));
+            } else if (isBatchEvent(eventName)) {
+                instance.on(eventName, (params)=>OnEventFunction(params));
+            } else {
+                instance.on(eventName, ()=>OnEventFunction(null, instance));
+            }
+        }
+    }
+    for(const eventName in events){
+        if (Object.prototype.hasOwnProperty.call(events, eventName)) {
+            var _eventName;
+            const customEvent = (_eventName = events[eventName]) !== null && _eventName !== void 0 ? _eventName : null;
+            if (customEvent) {
+                bindEvent(eventName, customEvent);
+            }
+        }
+    }
+}
+function isMouseEvent(eventName) {
+    return mouseEvents.includes(eventName);
+}
+function isBatchEvent(eventName) {
+    return batchEvents.includes(eventName);
+}

package/dist/cjs/ErrorAlert.js

@@ -0,0 +1,29 @@
+// Copyright 2022 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, "ErrorAlert", {
+    enumerable: true,
+    get: ()=>ErrorAlert
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function ErrorAlert(props) {
+    const { error  } = props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+        severity: "error",
+        children: error.message
+    });
+}

package/dist/cjs/ErrorBoundary.js

@@ -0,0 +1,22 @@
+// Copyright 2022 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.
+// Just use react-error-boundary as-is for now
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ErrorBoundary", {
+    enumerable: true,
+    get: ()=>_reactErrorBoundary.ErrorBoundary
+});
+const _reactErrorBoundary = require("react-error-boundary");

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -0,0 +1,178 @@
+// Copyright 2022 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, "GaugeChart", {
+    enumerable: true,
+    get: ()=>GaugeChart
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _core = require("echarts/core");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _renderers = require("echarts/renderers");
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _units = require("../model/units");
+const _echart = require("../EChart");
+(0, _core.use)([
+    _charts.GaugeChart,
+    _components.GridComponent,
+    _components.TitleComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+function GaugeChart(props) {
+    const { width , height , data , unit , axisLine , max  } = props;
+    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const option = (0, _react.useMemo)(()=>{
+        if (data === null || data === undefined) return chartsTheme.noDataOption;
+        const calculatedValue = data;
+        return {
+            title: {
+                show: false
+            },
+            tooltip: {
+                show: false
+            },
+            series: [
+                {
+                    type: 'gauge',
+                    center: [
+                        '50%',
+                        '65%'
+                    ],
+                    radius: '86%',
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max,
+                    silent: true,
+                    progress: {
+                        show: true,
+                        width: 22,
+                        itemStyle: {
+                            color: 'auto'
+                        }
+                    },
+                    pointer: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: [
+                                [
+                                    1,
+                                    '#e1e5e9'
+                                ]
+                            ],
+                            width: 22
+                        }
+                    },
+                    axisTick: {
+                        show: false,
+                        distance: 0
+                    },
+                    splitLine: {
+                        show: true
+                    },
+                    axisLabel: {
+                        show: false,
+                        distance: -18,
+                        color: '#999',
+                        fontSize: 12
+                    },
+                    anchor: {
+                        show: false
+                    },
+                    title: {
+                        show: false
+                    },
+                    detail: {
+                        show: false
+                    },
+                    data: [
+                        {
+                            value: calculatedValue
+                        }
+                    ]
+                },
+                {
+                    type: 'gauge',
+                    center: [
+                        '50%',
+                        '65%'
+                    ],
+                    radius: '100%',
+                    startAngle: 200,
+                    endAngle: -20,
+                    min: 0,
+                    max,
+                    pointer: {
+                        show: false,
+                        itemStyle: {
+                            color: 'auto'
+                        }
+                    },
+                    axisLine,
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    axisLabel: {
+                        show: false
+                    },
+                    detail: {
+                        show: true,
+                        width: '60%',
+                        borderRadius: 8,
+                        offsetCenter: [
+                            0,
+                            '-9%'
+                        ],
+                        color: 'inherit',
+                        formatter: (value)=>{
+                            return (0, _units.formatValue)(value, {
+                                kind: unit.kind,
+                                decimal_places: 0
+                            });
+                        }
+                    },
+                    data: [
+                        {
+                            value: calculatedValue
+                        }
+                    ]
+                }
+            ]
+        };
+    }, [
+        data,
+        chartsTheme,
+        unit,
+        axisLine,
+        max
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+        sx: {
+            width: width,
+            height: height
+        },
+        option: option,
+        theme: chartsTheme.echartsTheme
+    });
+}

package/dist/cjs/GaugeChart/index.js

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./GaugeChart"), exports);
+function _exportStar(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/InfoTooltip/InfoTooltip.js

@@ -0,0 +1,93 @@
+// Copyright 2022 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, {
+    TooltipPlacement: ()=>TooltipPlacement,
+    InfoTooltip: ()=>InfoTooltip
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+var TooltipPlacement;
+(function(TooltipPlacement) {
+    TooltipPlacement["Top"] = 'top';
+    TooltipPlacement["Left"] = 'left';
+    TooltipPlacement["Right"] = 'right';
+    TooltipPlacement["Bottom"] = 'bottom';
+})(TooltipPlacement || (TooltipPlacement = {}));
+const InfoTooltip = ({ id , title , description , placement , children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledTooltip, {
+        arrow: true,
+        id: id,
+        placement: placement,
+        title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(TooltipContent, {
+            title: title,
+            description: description
+        }),
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+            children: children
+        })
+    });
+};
+const TooltipContent = ({ title , description  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            title && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "body2",
+                sx: (theme)=>({
+                        color: theme.palette.text.primary,
+                        fontWeight: theme.typography.fontWeightMedium
+                    }),
+                children: title
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "caption",
+                sx: (theme)=>({
+                        color: theme.palette.text.primary
+                    }),
+                children: description
+            })
+        ]
+    });
+};
+const StyledTooltip = (0, _material.styled)(({ className , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
+        ...props,
+        classes: {
+            popper: className
+        }
+    }))(({ theme  })=>({
+        [`& .${_material.tooltipClasses.tooltip}`]: {
+            backgroundColor: theme.palette.background.tooltip,
+            color: theme.palette.text.primary,
+            maxWidth: '300px',
+            padding: theme.spacing(1),
+            boxShadow: theme.shadows[1]
+        },
+        [`& .${_material.tooltipClasses.arrow}`]: {
+            color: theme.palette.background.tooltip
+        }
+    }));