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

package/dist/cjs/InfoTooltip/InfoTooltip.test.js

@@ -0,0 +1,43 @@
+// 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("@testing-library/react");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _dom = require("@testing-library/dom");
+const _infoTooltip = require("./InfoTooltip");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('InfoTooltip', ()=>{
+    const title = 'Tooltip Title';
+    const description = 'this is a tooltip';
+    it('should render title and description', async ()=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_infoTooltip.InfoTooltip, {
+            title: title,
+            description: description,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                children: "tooltipAnchor"
+            })
+        }));
+        const tooltipAnchor = _dom.screen.getByText('tooltipAnchor');
+        _userEvent.default.hover(tooltipAnchor);
+        await _dom.screen.findByText(title);
+        _dom.screen.findByText(description);
+    });
+});

package/dist/cjs/InfoTooltip/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("./InfoTooltip"), 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/JSONEditor.js

@@ -0,0 +1,57 @@
+// 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, "JSONEditor", {
+    enumerable: true,
+    get: ()=>JSONEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function JSONEditor(props) {
+    const [value, setValue] = (0, _react.useState)(()=>JSON.stringify(props.value, null, 2));
+    const [invalidJSON, setInvalidJSON] = (0, _react.useState)(false);
+    (0, _react.useEffect)(()=>{
+        setValue(JSON.stringify(props.value, null, 2));
+        setInvalidJSON(false);
+    }, [
+        props.value
+    ]);
+    // TODO: replace with CodeMirror editor
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+        label: "JSON",
+        error: invalidJSON,
+        helperText: invalidJSON ? 'Invalid JSON' : '',
+        multiline: true,
+        fullWidth: true,
+        value: value,
+        onChange: (event)=>{
+            setValue(event.target.value);
+        },
+        maxRows: 20,
+        onBlur: ()=>{
+            try {
+                const json = JSON.parse(value !== null && value !== void 0 ? value : '{}');
+                setInvalidJSON(false);
+                if (props.onChange !== undefined) {
+                    props.onChange(json);
+                }
+            } catch (e) {
+                setInvalidJSON(true);
+            }
+        }
+    });
+}

package/dist/cjs/Legend/CompactLegend.js

@@ -0,0 +1,48 @@
+// 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, "CompactLegend", {
+    enumerable: true,
+    get: ()=>CompactLegend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _listLegendItem = require("./ListLegendItem");
+function CompactLegend({ height , items  }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        component: "ul",
+        sx: {
+            width: '100%',
+            height,
+            padding: [
+                0,
+                1,
+                0,
+                0
+            ],
+            overflowY: 'scroll',
+            margin: 0
+        },
+        children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+                item: item,
+                sx: {
+                    width: 'auto',
+                    float: 'left',
+                    paddingRight: 1.5
+                }
+            }, item.id))
+    });
+}

package/dist/cjs/Legend/Legend.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
+});
+Object.defineProperty(exports, "Legend", {
+    enumerable: true,
+    get: ()=>Legend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _listLegend = require("./ListLegend");
+const _compactLegend = require("./CompactLegend");
+function Legend({ width , height , options , data  }) {
+    if (options.position === 'right') {
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            sx: {
+                width: width,
+                height: '100%',
+                position: 'absolute',
+                top: 0,
+                right: 0,
+                overflowY: 'scroll'
+            },
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
+                items: data
+            })
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+        items: data,
+        height: height
+    });
+}

package/dist/cjs/Legend/LegendColorBadge.js

@@ -0,0 +1,42 @@
+// 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, "LegendColorBadge", {
+    enumerable: true,
+    get: ()=>LegendColorBadge
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+const _utils = require("../utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const LegendColorBadge = /*#__PURE__*/ _react.default.memo(function LegendColorBadge({ color , sx , ...others }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        ...others,
+        sx: (0, _utils.combineSx)({
+            height: 4,
+            width: 16,
+            margin: (theme)=>theme.spacing(0.5)
+        }, sx),
+        style: {
+            backgroundColor: color
+        }
+    });
+});

package/dist/cjs/Legend/ListLegend.js

@@ -0,0 +1,44 @@
+// 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, "ListLegend", {
+    enumerable: true,
+    get: ()=>ListLegend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _listLegendItem = require("./ListLegendItem");
+function ListLegend({ items  }) {
+    // show full labels on hover when there are many total series
+    const truncateLabels = items.length > 5;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.List, {
+        children: items.map((item)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
+                item: item,
+                sx: {
+                    width: 190,
+                    textOverflow: 'ellipsis',
+                    wordBreak: 'break-word',
+                    overflow: truncateLabels ? 'hidden' : 'visible',
+                    whiteSpace: truncateLabels ? 'nowrap' : 'normal',
+                    // TODO: add optional hover effect to show unformatted label
+                    '&:hover': {
+                        overflow: 'visible',
+                        whiteSpace: 'normal'
+                    }
+                }
+            }, item.id))
+    });
+}

package/dist/cjs/Legend/ListLegendItem.js

@@ -0,0 +1,91 @@
+// 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, "ListLegendItem", {
+    enumerable: true,
+    get: ()=>ListLegendItem
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _material = require("@mui/material");
+const _utils = require("../utils");
+const _legendColorBadge = require("./LegendColorBadge");
+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 ListLegendItem = /*#__PURE__*/ _react.default.memo(function ListLegendItem({ item , sx , ...others }) {
+    return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
+        ...others,
+        sx: (0, _utils.combineSx)({
+            padding: 0,
+            cursor: 'pointer'
+        }, sx),
+        dense: true,
+        key: item.id,
+        onClick: item.onClick,
+        selected: item.isSelected,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center'
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_legendColorBadge.LegendColorBadge, {
+                    color: item.color
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ListItemText, {
+                primary: item.label
+            })
+        ]
+    });
+});

package/dist/cjs/Legend/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("./Legend"), 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/LineChart/LineChart.js

@@ -0,0 +1,195 @@
+// 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, "LineChart", {
+    enumerable: true,
+    get: ()=>LineChart
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _core = require("echarts/core");
+const _charts = require("echarts/charts");
+const _components = require("echarts/components");
+const _renderers = require("echarts/renderers");
+const _echart = require("../EChart");
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+const _tooltip = require("../Tooltip/Tooltip");
+const _utils = require("./utils");
+const _timeZoneProvider = require("../context/TimeZoneProvider");
+(0, _core.use)([
+    _charts.LineChart,
+    _components.GridComponent,
+    _components.DataZoomComponent,
+    _components.MarkAreaComponent,
+    _components.MarkLineComponent,
+    _components.MarkPointComponent,
+    _components.TitleComponent,
+    _components.ToolboxComponent,
+    _components.TooltipComponent,
+    _components.LegendComponent,
+    _components.VisualMapComponent,
+    _renderers.CanvasRenderer
+]);
+function LineChart({ height , data , yAxis , unit , grid , legend , visualMap , onDataZoom , onDoubleClick  }) {
+    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const chartRef = (0, _react.useRef)();
+    const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
+    const [pinTooltip, setPinTooltip] = (0, _react.useState)(false);
+    const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const handleEvents = (0, _react.useMemo)(()=>{
+        return {
+            datazoom: (params)=>{
+                if (onDataZoom === undefined) {
+                    setTimeout(()=>{
+                        // workaround so unpin happens after click event
+                        setPinTooltip(false);
+                    }, 10);
+                }
+                if (onDataZoom === undefined || params.batch[0] === undefined) return;
+                var _startValue;
+                const startIndex = (_startValue = params.batch[0].startValue) !== null && _startValue !== void 0 ? _startValue : 0;
+                var _endValue;
+                const endIndex = (_endValue = params.batch[0].endValue) !== null && _endValue !== void 0 ? _endValue : data.xAxis.length - 1;
+                const xAxisStartValue = data.xAxis[startIndex];
+                const xAxisEndValue = data.xAxis[endIndex];
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue,
+                        startIndex,
+                        endIndex
+                    };
+                    onDataZoom(zoomEvent);
+                }
+            }
+        };
+    }, [
+        data,
+        onDataZoom,
+        setPinTooltip
+    ]);
+    if (chartRef.current !== undefined) {
+        (0, _utils.enableDataZoom)(chartRef.current);
+    }
+    const handleOnClick = ()=>setPinTooltip((current)=>!current);
+    const handleOnDoubleClick = (e)=>{
+        setPinTooltip(false);
+        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+        if (onDoubleClick === undefined) {
+            if (chartRef.current !== undefined) {
+                (0, _utils.restoreChart)(chartRef.current);
+            }
+        } else {
+            onDoubleClick(e);
+        }
+    };
+    const handleOnMouseDown = (e)=>{
+        // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
+        if (e.target instanceof HTMLCanvasElement) {
+            setShowTooltip(false);
+        }
+    };
+    const handleOnMouseUp = ()=>{
+        setShowTooltip(true);
+    };
+    const handleOnMouseEnter = ()=>{
+        setShowTooltip(true);
+    };
+    const handleOnMouseLeave = ()=>{
+        setShowTooltip(false);
+        setPinTooltip(false);
+    };
+    const option = (0, _react.useMemo)(()=>{
+        if (data.timeSeries === undefined) return {};
+        if (data.timeSeries === null || data.timeSeries.length === 0) return chartsTheme.noDataOption;
+        var _rangeMs;
+        const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
+        const option = {
+            series: data.timeSeries,
+            xAxis: {
+                type: 'category',
+                data: data.xAxis,
+                max: data.xAxisMax,
+                axisLabel: {
+                    formatter: (value)=>{
+                        return (0, _utils.getFormattedDate)(value, rangeMs, timeZone);
+                    }
+                }
+            },
+            yAxis: (0, _utils.getYAxes)(yAxis, unit),
+            animation: false,
+            tooltip: {
+                show: true,
+                trigger: 'axis',
+                showContent: false,
+                axisPointer: {
+                    type: 'line',
+                    z: 0
+                }
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none'
+                    }
+                }
+            },
+            grid,
+            legend,
+            visualMap
+        };
+        return option;
+    }, [
+        data,
+        yAxis,
+        grid,
+        legend,
+        visualMap,
+        timeZone
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            height
+        },
+        onClick: handleOnClick,
+        onDoubleClick: handleOnDoubleClick,
+        onMouseDown: handleOnMouseDown,
+        onMouseUp: handleOnMouseUp,
+        onMouseLeave: handleOnMouseLeave,
+        onMouseEnter: handleOnMouseEnter,
+        children: [
+            showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+                chartRef: chartRef,
+                chartData: data,
+                wrapLabels: true,
+                pinTooltip: pinTooltip,
+                unit: unit
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                onEvents: handleEvents,
+                _instance: chartRef
+            })
+        ]
+    });
+}

package/dist/cjs/LineChart/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("./LineChart"), 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;
+}