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

package/dist/cjs/LineChart/utils.js

@@ -0,0 +1,95 @@
+// 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, {
+    enableDataZoom: ()=>enableDataZoom,
+    restoreChart: ()=>restoreChart,
+    getDateRange: ()=>getDateRange,
+    getFormattedDate: ()=>getFormattedDate,
+    getYAxes: ()=>getYAxes
+});
+const _lodashEs = require("lodash-es");
+const _model = require("../model");
+const _utils = require("../utils");
+function enableDataZoom(chart) {
+    const chartModel = chart['_model'];
+    if (chartModel === undefined) return;
+    if (chartModel.option.toolbox !== undefined && chartModel.option.toolbox.length > 0) {
+        // check if hidden data zoom icon is unselected (if selected it would be 'emphasis' instead of 'normal')
+        if (chartModel.option.toolbox[0].feature.dataZoom.iconStatus.zoom === 'normal') {
+            chart.dispatchAction({
+                type: 'takeGlobalCursor',
+                key: 'dataZoomSelect',
+                dataZoomSelectActive: true
+            });
+        }
+    }
+}
+function restoreChart(chart) {
+    // TODO: support incremental unzoom instead of restore to original state
+    chart.dispatchAction({
+        type: 'restore'
+    });
+}
+function getDateRange(data) {
+    const defaultRange = 3600000; // hour in ms
+    if (data.length === 0) return defaultRange;
+    const lastDatum = data[data.length - 1];
+    if (data[0] === undefined || lastDatum === undefined) return defaultRange;
+    return lastDatum - data[0];
+}
+function getFormattedDate(value, rangeMs, timeZone) {
+    const dateFormatOptions = (0, _utils.dateFormatOptionsWithTimeZone)({
+        hour: 'numeric',
+        minute: 'numeric',
+        hourCycle: 'h23'
+    }, timeZone);
+    const thirtyMinMs = 1800000;
+    const dayMs = 86400000;
+    if (rangeMs <= thirtyMinMs) {
+        dateFormatOptions.second = 'numeric';
+    } else if (rangeMs >= dayMs) {
+        dateFormatOptions.month = 'numeric';
+        dateFormatOptions.day = 'numeric';
+    }
+    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    // remove comma when month / day present
+    return DATE_FORMAT.format(value).replace(/, /g, ' ');
+}
+function getYAxes(yAxis, unit) {
+    // TODO: support alternate yAxis that shows on right side
+    const Y_AXIS_DEFAULT = {
+        type: 'value',
+        boundaryGap: [
+            0,
+            '10%'
+        ],
+        axisLabel: {
+            formatter: (value)=>{
+                return (0, _model.formatValue)(value, unit);
+            }
+        }
+    };
+    return [
+        (0, _lodashEs.merge)(Y_AXIS_DEFAULT, yAxis)
+    ];
+}

package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js

@@ -0,0 +1,32 @@
+// 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, "OptionsEditorColumn", {
+    enumerable: true,
+    get: ()=>OptionsEditorColumn
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const OptionsEditorColumn = ({ children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+        item: true,
+        xs: 4,
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+            spacing: 3,
+            children: children
+        })
+    });
+};

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -0,0 +1,61 @@
+// 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, "OptionsEditorControl", {
+    enumerable: true,
+    get: ()=>OptionsEditorControl
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _utils = require("../utils");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const OptionsEditorControl = ({ label , control  })=>{
+    // Make sure we have a unique ID we can use for associating labels and
+    // controls for a11y.
+    const generatedControlId = (0, _utils.useId)('EditorSectionControl');
+    const controlId = `${generatedControlId}-control`;
+    const controlProps = {
+        id: controlId
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+            direction: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormLabel, {
+                    htmlFor: controlId,
+                    children: label
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                        width: '160px',
+                        textAlign: 'right'
+                    },
+                    children: [
+                        " ",
+                        /*#__PURE__*/ _react.default.cloneElement(control, controlProps)
+                    ]
+                })
+            ]
+        })
+    });
+};

package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.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, "OptionsEditorGrid", {
+    enumerable: true,
+    get: ()=>OptionsEditorGrid
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const OptionsEditorGrid = ({ children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+        container: true,
+        spacing: 8,
+        children: children
+    });
+};

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.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, "OptionsEditorGroup", {
+    enumerable: true,
+    get: ()=>OptionsEditorGroup
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const OptionsEditorGroup = ({ title , children  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "overline",
+                component: "h4",
+                borderBottom: 1,
+                borderColor: "grey.300",
+                marginBottom: (theme)=>theme.spacing(1),
+                children: title
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                spacing: 1,
+                children: children
+            })
+        ]
+    });
+};

package/dist/cjs/OptionsEditorLayout/index.js

@@ -0,0 +1,31 @@
+// 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("./OptionsEditorColumn"), exports);
+_exportStar(require("./OptionsEditorControl"), exports);
+_exportStar(require("./OptionsEditorGrid"), exports);
+_exportStar(require("./OptionsEditorGroup"), 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/StatChart/StatChart.js

@@ -0,0 +1,165 @@
+// 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, "StatChart", {
+    enumerable: true,
+    get: ()=>StatChart
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _material = require("@mui/material");
+const _lodashEs = require("lodash-es");
+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");
+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;
+}
+(0, _core.use)([
+    _charts.GaugeChart,
+    _charts.LineChart,
+    _components.GridComponent,
+    _components.DatasetComponent,
+    _components.TitleComponent,
+    _components.TooltipComponent,
+    _renderers.CanvasRenderer
+]);
+const PANEL_PADDING = 32;
+const MIN_VALUE_SIZE = 12;
+const MAX_VALUE_SIZE = 36;
+function StatChart(props) {
+    const { width , height , data , unit , sparkline  } = props;
+    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const formattedValue = data.calculatedValue === undefined ? '' : (0, _units.formatValue)(data.calculatedValue, unit);
+    const option = (0, _react.useMemo)(()=>{
+        if (data.seriesData === undefined) return chartsTheme.noDataOption;
+        const series = data.seriesData;
+        const statSeries = [];
+        if (sparkline !== undefined) {
+            const lineSeries = {
+                type: 'line',
+                data: [
+                    ...series.values
+                ],
+                zlevel: 1,
+                symbol: 'none',
+                animation: false,
+                silent: true
+            };
+            const mergedSeries = (0, _lodashEs.merge)(lineSeries, sparkline);
+            statSeries.push(mergedSeries);
+        }
+        const option = {
+            title: {
+                show: false
+            },
+            grid: {
+                show: false,
+                top: '35%',
+                right: 0,
+                bottom: 0,
+                left: 0,
+                containLabel: false
+            },
+            xAxis: {
+                type: 'time',
+                show: false,
+                boundaryGap: false
+            },
+            yAxis: {
+                type: 'value',
+                show: false
+            },
+            tooltip: {
+                show: false
+            },
+            series: statSeries
+        };
+        return option;
+    }, [
+        data,
+        chartsTheme,
+        sparkline
+    ]);
+    const isLargePanel = width > 250 && height > 180;
+    // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
+    const charactersAdjust = formattedValue.length;
+    const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                variant: "h3",
+                sx: (theme)=>({
+                        color: theme.palette.text.primary,
+                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`
+                    }),
+                children: formattedValue
+            }),
+            sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: width + PANEL_PADDING,
+                    height: height,
+                    position: 'absolute',
+                    bottom: 0,
+                    left: 0
+                },
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                renderer: "svg"
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,89 @@
+// 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 _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 time unit formatting', ()=>{
+        const unit = {
+            kind: 'Seconds'
+        };
+        renderChart(unit);
+        expect(_react.screen.getByText('7.73 seconds')).toBeInTheDocument();
+    });
+    it('show value with time unit formatting', ()=>{
+        const unit = {
+            kind: 'Months'
+        };
+        renderChart(unit);
+        expect(_react.screen.getByText('7.73 months')).toBeInTheDocument();
+    });
+});

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