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

package/dist/cjs/Tooltip/tooltip-model.js

@@ -0,0 +1,98 @@
+// 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, {
+    TOOLTIP_MAX_WIDTH: ()=>TOOLTIP_MAX_WIDTH,
+    TOOLTIP_MAX_HEIGHT: ()=>TOOLTIP_MAX_HEIGHT,
+    TOOLTIP_LABELS_MAX_WIDTH: ()=>TOOLTIP_LABELS_MAX_WIDTH,
+    TOOLTIP_MAX_ITEMS: ()=>TOOLTIP_MAX_ITEMS,
+    TOOLTIP_DATE_FORMAT: ()=>TOOLTIP_DATE_FORMAT,
+    defaultCursorData: ()=>defaultCursorData,
+    emptyTooltipData: ()=>emptyTooltipData,
+    useMousePosition: ()=>useMousePosition
+});
+const _react = require("react");
+const TOOLTIP_MAX_WIDTH = 650;
+const TOOLTIP_MAX_HEIGHT = 230;
+const TOOLTIP_LABELS_MAX_WIDTH = TOOLTIP_MAX_WIDTH - 150;
+const TOOLTIP_MAX_ITEMS = 50;
+const TOOLTIP_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+    hour12: true
+});
+const defaultCursorData = {
+    coords: {
+        viewport: {
+            x: 0,
+            y: 0
+        },
+        plotCanvas: {
+            x: 0,
+            y: 0
+        },
+        zrender: {
+            x: 0,
+            y: 0
+        },
+        target: null
+    },
+    chartWidth: 0
+};
+const emptyTooltipData = {
+    cursor: defaultCursorData,
+    focusedSeries: null
+};
+const useMousePosition = ()=>{
+    const [coords, setCoords] = (0, _react.useState)(null);
+    (0, _react.useEffect)(()=>{
+        const setFromEvent = (e)=>{
+            return setCoords({
+                viewport: {
+                    x: e.clientX,
+                    y: e.clientY
+                },
+                plotCanvas: {
+                    x: e.offsetX,
+                    y: e.offsetY
+                },
+                zrender: {
+                    // echarts canvas coordinates added automatically by zrender
+                    // zrX and zrY are similar to offsetX and offsetY but they return undefined when not hovering over a chart canvas
+                    x: e.zrX,
+                    y: e.zrY
+                },
+                // necessary to check whether cursor target matches correct chart canvas (since each chart has its own mousemove listener)
+                target: e.target
+            });
+        };
+        window.addEventListener('mousemove', setFromEvent);
+        return ()=>{
+            window.removeEventListener('mousemove', setFromEvent);
+        };
+    }, []);
+    return coords;
+};

package/dist/cjs/Tooltip/utils.js

@@ -0,0 +1,50 @@
+// 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, "assembleTransform", {
+    enumerable: true,
+    get: ()=>assembleTransform
+});
+const _tooltipModel = require("./tooltip-model");
+function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedPos) {
+    if (mousePos === null) {
+        return 'translate3d(0, 0)';
+    }
+    if (pinnedPos !== null) {
+        mousePos = pinnedPos;
+    }
+    const cursorPaddingX = 32;
+    const cursorPaddingY = 16;
+    const x = mousePos.viewport.x;
+    let y = mousePos.viewport.y + cursorPaddingY;
+    const isCloseToBottom = mousePos.viewport.y > window.innerHeight * 0.8;
+    const yPosAdjustThreshold = chartHeight * 0.75;
+    // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up
+    if (isCloseToBottom === true) {
+        if (seriesNum > 6) {
+            y = mousePos.viewport.y * 0.65;
+        } else {
+            y = mousePos.viewport.y * 0.75;
+        }
+    } else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
+        y = mousePos.viewport.y * 0.85;
+    }
+    // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)
+    const tooltipWidth = seriesNum > 1 ? _tooltipModel.TOOLTIP_MAX_WIDTH : _tooltipModel.TOOLTIP_MAX_WIDTH / 2;
+    const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
+    // reposition so tooltip is never too close to right side of chart or left side of browser window
+    return mousePos.plotCanvas.x > xPosAdjustThreshold && x > _tooltipModel.TOOLTIP_MAX_WIDTH ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)` : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
+}

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -0,0 +1,118 @@
+// 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, "UnitSelector", {
+    enumerable: true,
+    get: ()=>UnitSelector
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _model = require("../model");
+const _optionsEditorLayout = require("../OptionsEditorLayout");
+const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+}).filter((config)=>!config.disableSelectorOption);
+const DECIMAL_OPTIONS = [
+    0,
+    1,
+    2,
+    3,
+    4
+];
+function UnitSelector({ value , onChange  }) {
+    const hasDecimalPlaces = (0, _model.isUnitWithDecimalPlaces)(value);
+    const hasAbbreviate = (0, _model.isUnitWithAbbreviate)(value);
+    const handleKindChange = (_, newValue)=>{
+        onChange({
+            kind: newValue.id
+        });
+    };
+    const handleDecimalChange = (_, newValue)=>{
+        if (hasDecimalPlaces) {
+            onChange({
+                ...value,
+                decimal_places: newValue
+            });
+        }
+    };
+    const handleAbbreviateChange = (_, checked)=>{
+        if (hasAbbreviate) {
+            onChange({
+                ...value,
+                abbreviate: checked
+            });
+        }
+    };
+    const kindConfig = _model.UNIT_CONFIG[value.kind];
+    var _decimal_places;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Abbreviate",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                    checked: hasAbbreviate ? !!value.abbreviate : false,
+                    onChange: handleAbbreviateChange,
+                    disabled: !hasAbbreviate
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Units",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                    value: {
+                        id: value.kind,
+                        ...kindConfig
+                    },
+                    options: KIND_OPTIONS,
+                    isOptionEqualToValue: (option, value)=>option.id === value.id,
+                    groupBy: (option)=>option.group,
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            ...params
+                        }),
+                    renderOption: (renderOptsProps, option)=>{
+                        // Custom option needed to get some increased left padding to make
+                        // the items more distinct from the group label.
+                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("li", {
+                            ...renderOptsProps,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                                paddingLeft: (theme)=>theme.spacing(1),
+                                children: option.label
+                            })
+                        });
+                    },
+                    onChange: handleKindChange,
+                    disableClearable: true
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Decimal",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                    value: hasDecimalPlaces ? (_decimal_places = value.decimal_places) !== null && _decimal_places !== void 0 ? _decimal_places : _model.DEFAULT_DECIMAL_PLACES : 0,
+                    options: DECIMAL_OPTIONS,
+                    getOptionLabel: (option)=>`${option}`,
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            ...params
+                        }),
+                    onChange: handleDecimalChange,
+                    disabled: !hasDecimalPlaces,
+                    disableClearable: true
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/UnitSelector/UnitSelector.test.js

@@ -0,0 +1,212 @@
+// 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 _unitSelector = require("./UnitSelector");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+describe('UnitSelector', ()=>{
+    const renderUnitSelector = (value, onChange = jest.fn())=>{
+        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_unitSelector.UnitSelector, {
+                value: value,
+                onChange: onChange
+            })
+        }));
+    };
+    const getUnitSelector = ()=>{
+        return _react.screen.getByRole('combobox', {
+            name: 'Units'
+        });
+    };
+    const getDecimalSelector = ()=>{
+        return _react.screen.getByRole('combobox', {
+            name: 'Decimal'
+        });
+    };
+    const getAbbreviateSwitch = ()=>{
+        return _react.screen.getByRole('checkbox', {
+            name: 'Abbreviate'
+        });
+    };
+    it('can change the unit kind by clicking', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Minutes'
+        }, onChange);
+        const unitSelector = getUnitSelector();
+        _userEvent.default.click(unitSelector);
+        const decimalOption = _react.screen.getByRole('option', {
+            name: 'Decimal'
+        });
+        _userEvent.default.click(decimalOption);
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal'
+        });
+    });
+    it('can change the unit kind using a keyboard', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Bytes'
+        }, onChange);
+        const unitSelector = getUnitSelector();
+        // Note that this tab order can change depending on the type because the
+        // abbreviate comes first and is disabled in some cases.
+        _userEvent.default.tab();
+        expect(unitSelector).toHaveFocus();
+        _userEvent.default.clear(unitSelector);
+        _userEvent.default.keyboard('years');
+        _react.screen.getByRole('option', {
+            name: 'Years'
+        });
+        _userEvent.default.keyboard('{arrowup}{enter}');
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Years'
+        });
+    });
+    it('can change the decimal places by clicking', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal',
+            decimal_places: 0,
+            abbreviate: true
+        }, onChange);
+        _userEvent.default.click(getDecimalSelector());
+        const decimalOption = _react.screen.getByRole('option', {
+            name: '1'
+        });
+        _userEvent.default.click(decimalOption);
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal',
+            decimal_places: 1,
+            abbreviate: true
+        });
+    });
+    it('can change the decimal places using a keyboard', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Percent'
+        }, onChange);
+        const decimalSelector = getDecimalSelector();
+        _userEvent.default.tab();
+        _userEvent.default.tab();
+        expect(decimalSelector).toHaveFocus();
+        _userEvent.default.clear(decimalSelector);
+        _userEvent.default.keyboard('3');
+        _react.screen.getByRole('option', {
+            name: '3'
+        });
+        _userEvent.default.keyboard('{arrowup}{enter}');
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Percent',
+            decimal_places: 3
+        });
+    });
+    it('can change abbreviate by clicking', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal',
+            decimal_places: 3,
+            abbreviate: true
+        }, onChange);
+        _userEvent.default.click(getAbbreviateSwitch());
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal',
+            decimal_places: 3,
+            abbreviate: false
+        });
+    });
+    it('can change abbreviate using a keyboard', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal',
+            decimal_places: 0
+        }, onChange);
+        _userEvent.default.tab();
+        _userEvent.default.keyboard('{space}');
+        expect(onChange).toHaveBeenCalledWith({
+            kind: 'Decimal',
+            decimal_places: 0,
+            abbreviate: true
+        });
+    });
+    describe('with a time unit selected', ()=>{
+        it('does not allow the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'Minutes'
+            });
+            expect(getAbbreviateSwitch()).toBeDisabled();
+        });
+    });
+    describe('with a percent unit selected', ()=>{
+        it('allows the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Percent'
+            });
+            expect(getDecimalSelector()).toBeEnabled();
+        });
+        it('does not allow the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'PercentDecimal'
+            });
+            expect(getAbbreviateSwitch()).toBeDisabled();
+        });
+    });
+    describe('with a decimal unit selected', ()=>{
+        it('allows the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Decimal'
+            });
+            expect(getDecimalSelector()).toBeEnabled();
+        });
+        it('allows the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'Decimal'
+            });
+            expect(getAbbreviateSwitch()).toBeEnabled();
+        });
+    });
+    describe('with a bytes unit selected', ()=>{
+        it('allows the user to modify the decimal places', ()=>{
+            renderUnitSelector({
+                kind: 'Bytes'
+            });
+            expect(getDecimalSelector()).toBeEnabled();
+        });
+        it('does not allow the user to set abbreviate', ()=>{
+            renderUnitSelector({
+                kind: 'Bytes'
+            });
+            expect(getAbbreviateSwitch()).toBeDisabled();
+        });
+    });
+    it('should not show an option for disabled units', ()=>{
+        const onChange = jest.fn();
+        renderUnitSelector({
+            kind: 'Decimal'
+        }, onChange);
+        _userEvent.default.click(getUnitSelector());
+        const percentShorthandOption = _react.screen.queryByRole('option', {
+            name: '%'
+        });
+        expect(percentShorthandOption).not.toBeInTheDocument();
+    });
+});

package/dist/cjs/UnitSelector/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("./UnitSelector"), 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/YAxisLabel.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, "YAxisLabel", {
+    enumerable: true,
+    get: ()=>YAxisLabel
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function YAxisLabel({ name , height  }) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        sx: {
+            display: 'inline-block',
+            maxWidth: height,
+            position: 'absolute',
+            top: '45%',
+            transform: 'translateX(-50%) rotate(-90deg)',
+            transformOrigin: 'top',
+            textAlign: 'center',
+            zIndex: 1
+        },
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            variant: "body1",
+            sx: {
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
+            children: name
+        })
+    });
+}

package/dist/cjs/context/ChartsThemeProvider.js

@@ -0,0 +1,83 @@
+// 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, {
+    ChartsThemeProvider: ()=>ChartsThemeProvider,
+    ChartsThemeContext: ()=>ChartsThemeContext,
+    useChartsTheme: ()=>useChartsTheme
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+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;
+}
+function ChartsThemeProvider(props) {
+    const { children , chartsTheme  } = props;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ChartsThemeContext.Provider, {
+        value: chartsTheme,
+        children: children
+    });
+}
+const ChartsThemeContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function useChartsTheme() {
+    const ctx = (0, _react.useContext)(ChartsThemeContext);
+    if (ctx === undefined) {
+        throw new Error('No ChartsThemeContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}