@perses-dev/components 0.23.0 → 0.24.0

package/dist/cjs/StatChart/StatChart.test.js

@@ -1,96 +0,0 @@
-// Copyright 2023 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 _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _testUtils = require("../test-utils");
-const _statChart = require("./StatChart");
-describe('StatChart', ()=>{
-    const renderChart = (unit)=>{
-        const contentDimensions = {
-            width: 200,
-            height: 200
-        };
-        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_chartsThemeProvider.ChartsThemeProvider, {
-            chartsTheme: _testUtils.testChartsTheme,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_statChart.StatChart, {
-                width: contentDimensions.width,
-                height: contentDimensions.height,
-                data: mockStatData,
-                unit: unit
-            })
-        }));
-    };
-    const mockStatData = {
-        calculatedValue: 7.72931659687181,
-        name: 'Example Stat Chart',
-        seriesData: {
-            name: '(((count(count(node_cpu_seconds_total{job="example"}) by (cpu))',
-            values: [
-                [
-                    1654006170000,
-                    7.736401673473903
-                ],
-                [
-                    1654006185000,
-                    7.733891213538757
-                ],
-                [
-                    1654006200000,
-                    7.731101813010433
-                ],
-                [
-                    1654006215000,
-                    7.722454672079215
-                ],
-                [
-                    1654006230000,
-                    7.722733612256738
-                ]
-            ]
-        }
-    };
-    it('render default options (no sparkline)', ()=>{
-        const unit = {
-            kind: 'Decimal',
-            decimal_places: 2
-        };
-        renderChart(unit);
-        expect(_react.screen.getByText('7.73')).toBeInTheDocument();
-    });
-    it('show value with bytes unit formatting', ()=>{
-        const unit = {
-            kind: 'Bytes'
-        };
-        renderChart(unit);
-        expect(_react.screen.getByText('7.73 bytes')).toBeInTheDocument();
-    });
-    it('show value with seconds time unit formatting', ()=>{
-        const unit = {
-            kind: 'Seconds'
-        };
-        renderChart(unit);
-        expect(_react.screen.getByText('7.73 seconds')).toBeInTheDocument();
-    });
-    it('show value with months time unit formatting', ()=>{
-        const unit = {
-            kind: 'Months'
-        };
-        renderChart(unit);
-        expect(_react.screen.getByText('7.73 months')).toBeInTheDocument();
-    });
-});

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.test.js

@@ -1,54 +0,0 @@
-// Copyright 2023 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 _dom = require("@testing-library/dom");
-const _seriesInfo = require("./SeriesInfo");
-describe('SeriesInfo', ()=>{
-    const renderComponent = (props)=>{
-        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesInfo.SeriesInfo, {
-            ...props
-        }));
-    };
-    it('render metric __name__ beside formattedY value', ()=>{
-        const seriesInfo = {
-            seriesName: 'node_load1{env="demo",instance="demo.do.prometheus.io:9100",job="node"}',
-            y: 0.28,
-            formattedY: '28.0%',
-            markerColor: 'hsla(1016196180,50%,50%,0.8)',
-            totalSeries: 1,
-            wrapLabels: true
-        };
-        renderComponent(seriesInfo);
-        expect(_dom.screen.getByText('node_load1:')).toBeInTheDocument();
-        expect(_dom.screen.getByText('28.0%')).toBeInTheDocument();
-        expect(_dom.screen.getByText('demo.do.prometheus.io:9100')).toBeInTheDocument(); // TODO: remove quotes
-    });
-    it('render preformatted series name beside formattedY value', ()=>{
-        const seriesInfo = {
-            seriesName: 'Node memory total',
-            y: 552341504,
-            formattedY: '526.75 MB',
-            markerColor: 'hsla(-1756459732,50%,50%,0.8)',
-            totalSeries: 2,
-            wrapLabels: true
-        };
-        renderComponent(seriesInfo);
-        expect(_dom.screen.getByText('Node memory total')).toBeInTheDocument();
-        expect(_dom.screen.getByText('526.75 MB')).toBeInTheDocument();
-    });
-});

package/dist/cjs/TimeSeriesTooltip/TooltipContent.test.js

@@ -1,80 +0,0 @@
-// Copyright 2023 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 _dom = require("@testing-library/dom");
-const _tooltipContent = require("./TooltipContent");
-describe('TooltipContent', ()=>{
-    const renderComponent = (props)=>{
-        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
-            ...props
-        }));
-    };
-    it('render tooltip content with a single series name', ()=>{
-        const tooltipContent = {
-            focusedSeries: [
-                {
-                    seriesIdx: 0,
-                    datumIdx: 84,
-                    seriesName: 'Test node demo.do.prometheus.io:9100',
-                    date: 'Dec 23, 2022, 1:53:00 PM',
-                    x: 1671821580000,
-                    y: 0.1,
-                    formattedY: '0.1',
-                    markerColor: 'hsla(19838016,50%,50%,0.8)'
-                }
-            ],
-            wrapLabels: true
-        };
-        renderComponent(tooltipContent);
-        expect(_dom.screen.getByText('Test node demo.do.prometheus.io:9100')).toBeInTheDocument();
-        expect(_dom.screen.getByText('Dec 23, 2022 -')).toBeInTheDocument();
-        expect(_dom.screen.getByText('13:53:00')).toBeInTheDocument();
-        expect(_dom.screen.getByText('0.1')).toBeInTheDocument();
-    });
-    it('render tooltip content with multiple series data', ()=>{
-        const tooltipContent = {
-            focusedSeries: [
-                {
-                    seriesIdx: 2,
-                    datumIdx: 48,
-                    seriesName: 'node_memory_MemFree_bytes{env="demo",instance="demo.do.prometheus.io:9100",job="node"}',
-                    date: 'Dec 23, 2022, 1:44:00 PM',
-                    x: 1671821040000,
-                    y: 84635648,
-                    formattedY: '84.64M',
-                    markerColor: 'hsla(1887856572,50%,50%,0.8)'
-                },
-                {
-                    seriesIdx: 1,
-                    datumIdx: 48,
-                    seriesName: 'node_memory_Buffers_bytes{env="demo",instance="demo.do.prometheus.io:9100",job="node"}',
-                    date: 'Dec 23, 2022, 1:44:00 PM',
-                    x: 1671821040000,
-                    y: 33771520,
-                    formattedY: '33.77M',
-                    markerColor: 'hsla(158479636,50%,50%,0.8)'
-                }
-            ],
-            wrapLabels: true
-        };
-        renderComponent(tooltipContent);
-        expect(_dom.screen.getByText('84.64M')).toBeInTheDocument();
-        expect(_dom.screen.getByText('33.77M')).toBeInTheDocument();
-        expect(_dom.screen.getAllByText('env="demo", instance="demo.do.prometheus.io:9100", job="node"')).toHaveLength(2);
-    });
-});

package/dist/cjs/TimeSeriesTooltip/focused-series.test.js

@@ -1,95 +0,0 @@
-// Copyright 2023 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 _focusedSeries = require("./focused-series");
-describe('getNearbySeries', ()=>{
-    const chartData = {
-        timeSeries: [
-            {
-                type: 'line',
-                name: 'env="demo", instance="demo.do.prometheus", job="node", mode="test"',
-                color: 'hsla(-1365438424,50%,50%,0.8)',
-                data: [
-                    0.0002315202231525094,
-                    0.00022873082287300112,
-                    0.00023152022315149463,
-                    0.00023152022315149463,
-                    0.00022873082287300112
-                ],
-                symbol: 'circle'
-            },
-            {
-                type: 'line',
-                name: 'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',
-                color: 'hsla(286664040,50%,50%,0.8)',
-                data: [
-                    0.05245188284519867,
-                    0.0524463040446356,
-                    0.0524463040446356,
-                    0.05247140864723438,
-                    0.052482566248230646
-                ],
-                symbol: 'circle'
-            }
-        ],
-        xAxis: [
-            1654007865000,
-            1654007880000,
-            1654007895000,
-            1654007910000,
-            1654007925000
-        ],
-        rangeMs: 60000
-    };
-    // https://echarts.apache.org/en/api.html#echartsInstance.convertFromPixel
-    const pointInGrid = [
-        2,
-        0.0560655737704918
-    ]; // converted from chart.getZr() mousemove coordinates
-    const yBuffer = 0.02; // calculated from y axis interval
-    const focusedSeriesOutput = [
-        {
-            date: 'May 31, 2022, 2:38:15 PM',
-            datumIdx: 2,
-            markerColor: 'hsla(286664040,50%,50%,0.8)',
-            seriesName: 'env="demo", instance="demo.do.prometheus", job="node", mode="test alt"',
-            seriesIdx: 1,
-            x: 1654007895000,
-            y: 0.0524463040446356,
-            formattedY: '0.05'
-        }
-    ];
-    it('should return focused series data for points nearby the cursor', ()=>{
-        const decimalUnit = {
-            kind: 'Decimal',
-            decimal_places: 2
-        };
-        expect((0, _focusedSeries.getNearbySeries)(chartData, pointInGrid, yBuffer, decimalUnit)).toEqual(focusedSeriesOutput);
-    });
-    it('should return series values formatted as a percent', ()=>{
-        const percentFormattedOutput = [
-            ...focusedSeriesOutput
-        ];
-        if (percentFormattedOutput[0]) {
-            percentFormattedOutput[0].formattedY = '5%';
-        }
-        const percentFormattedUnit = {
-            kind: 'PercentDecimal',
-            decimal_places: 0
-        };
-        expect((0, _focusedSeries.getNearbySeries)(chartData, pointInGrid, yBuffer, percentFormattedUnit)).toEqual(percentFormattedOutput);
-    });
-});

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

@@ -1,211 +0,0 @@
-// Copyright 2023 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();
-        _userEvent.default.tab();
-        _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('allows the user to set abbreviate', ()=>{
-            renderUnitSelector({
-                kind: 'Bytes'
-            });
-            expect(getAbbreviateSwitch()).toBeEnabled();
-        });
-    });
-    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();
-    });
-});