@perses-dev/components 0.8.0 → 0.9.0

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GaugeChart = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -14,33 +10,50 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const react_1 = require("react");
-const core_1 = require("echarts/core");
-const charts_1 = require("echarts/charts");
-const components_1 = require("echarts/components");
-const renderers_1 = require("echarts/renderers");
-const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
-const units_1 = require("../model/units");
-const EChart_1 = require("../EChart");
-(0, core_1.use)([charts_1.GaugeChart, components_1.GridComponent, components_1.TitleComponent, components_1.TooltipComponent, renderers_1.CanvasRenderer]);
+"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_1.useChartsTheme)();
-    const option = (0, react_1.useMemo)(() => {
-        if (data === null || data === undefined)
-            return chartsTheme.noDataOption;
+    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,
+                show: false
             },
             tooltip: {
-                show: false,
+                show: false
             },
             series: [
                 {
                     type: 'gauge',
-                    center: ['50%', '65%'],
+                    center: [
+                        '50%',
+                        '65%'
+                    ],
                     radius: '100%',
                     startAngle: 200,
                     endAngle: -20,
@@ -51,49 +64,57 @@ function GaugeChart(props) {
                         show: true,
                         width: 22,
                         itemStyle: {
-                            color: 'auto',
-                        },
+                            color: 'auto'
+                        }
                     },
                     pointer: {
-                        show: false,
+                        show: false
                     },
                     axisLine: {
                         lineStyle: {
-                            color: [[1, '#e1e5e9']],
-                            width: 22,
-                        },
+                            color: [
+                                [
+                                    1,
+                                    '#e1e5e9'
+                                ]
+                            ],
+                            width: 22
+                        }
                     },
                     axisTick: {
                         show: false,
-                        distance: 0,
+                        distance: 0
                     },
                     splitLine: {
-                        show: true,
+                        show: true
                     },
                     axisLabel: {
                         show: false,
                         distance: -18,
                         color: '#999',
-                        fontSize: 12,
+                        fontSize: 12
                     },
                     anchor: {
-                        show: false,
+                        show: false
                     },
                     title: {
-                        show: false,
+                        show: false
                     },
                     detail: {
-                        show: false,
+                        show: false
                     },
                     data: [
                         {
-                            value: calculatedValue,
-                        },
-                    ],
+                            value: calculatedValue
+                        }
+                    ]
                 },
                 {
                     type: 'gauge',
-                    center: ['50%', '65%'],
+                    center: [
+                        '50%',
+                        '65%'
+                    ],
                     radius: '114%',
                     startAngle: 200,
                     endAngle: -20,
@@ -102,44 +123,56 @@ function GaugeChart(props) {
                     pointer: {
                         show: false,
                         itemStyle: {
-                            color: 'auto',
-                        },
+                            color: 'auto'
+                        }
                     },
                     axisLine,
                     axisTick: {
-                        show: false,
+                        show: false
                     },
                     splitLine: {
-                        show: false,
+                        show: false
                     },
                     axisLabel: {
-                        show: false,
+                        show: false
                     },
                     detail: {
                         show: true,
                         width: '60%',
                         borderRadius: 8,
-                        offsetCenter: [0, '-9%'],
+                        offsetCenter: [
+                            0,
+                            '-9%'
+                        ],
                         color: 'inherit',
-                        formatter: (value) => {
-                            return (0, units_1.formatValue)(value, {
+                        formatter: (value)=>{
+                            return (0, _units.formatValue)(value, {
                                 kind: unit.kind,
-                                decimal_places: 0,
+                                decimal_places: 0
                             });
-                        },
+                        }
                     },
                     data: [
                         {
-                            value: calculatedValue,
-                        },
-                    ],
-                },
-            ],
+                            value: calculatedValue
+                        }
+                    ]
+                }
+            ]
         };
-    }, [data, chartsTheme, unit, axisLine, max]);
-    return ((0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
+    }, [
+        data,
+        chartsTheme,
+        unit,
+        axisLine,
+        max
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+        sx: {
             width: width,
-            height: height,
-        }, option: option, theme: chartsTheme.themeName }));
+            height: height
+        },
+        option: option,
+        theme: chartsTheme.themeName
+    });
 }
-exports.GaugeChart = GaugeChart;

package/dist/cjs/GaugeChart/index.js

@@ -1,4 +1,3 @@
-"use strict";
 // 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.
@@ -11,19 +10,19 @@
 // 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.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./GaugeChart"), exports);
+"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

@@ -1,39 +1,96 @@
+// 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 });
-exports.InfoTooltip = exports.TooltipPlacement = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const material_1 = require("@mui/material");
+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 = exports.TooltipPlacement || (exports.TooltipPlacement = {}));
-const InfoTooltip = ({ id, title, description, placement, children }) => {
-    return ((0, jsx_runtime_1.jsx)(StyledTooltip, { arrow: true, id: id, placement: placement, title: (0, jsx_runtime_1.jsx)(TooltipContent, { title: title, description: description }), children: (0, jsx_runtime_1.jsx)("div", { children: children }) }));
+(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
+        })
+    });
 };
-exports.InfoTooltip = InfoTooltip;
-const TooltipContent = ({ title, description }) => {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", sx: (theme) => ({
-                    color: theme.palette.text.primary,
-                    fontWeight: theme.typography.fontWeightMedium,
-                }), children: title })), (0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "caption", sx: (theme) => ({
-                    color: theme.palette.text.primary,
-                }), children: description })] }));
+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_1.styled)(({ className, ...props }) => ((0, jsx_runtime_1.jsx)(material_1.Tooltip, { ...props, classes: { popper: className } })))(({ theme }) => ({
-    [`& .${material_1.tooltipClasses.tooltip}`]: {
-        backgroundColor: theme.palette.secondary.main,
-        color: theme.palette.grey[900],
-        maxWidth: '300px',
-        padding: theme.spacing(1),
-        boxShadow: theme.shadows[1],
-    },
-    [`& .${material_1.tooltipClasses.arrow}`]: {
-        color: theme.palette.background.paper,
-        '&::before': {
+const StyledTooltip = (0, _material.styled)(({ className , ...props })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tooltip, {
+        ...props,
+        classes: {
+            popper: className
+        }
+    }))(({ theme  })=>({
+        [`& .${_material.tooltipClasses.tooltip}`]: {
             backgroundColor: theme.palette.secondary.main,
+            color: theme.palette.grey[900],
+            maxWidth: '300px',
+            padding: theme.spacing(1),
+            boxShadow: theme.shadows[1]
         },
-    },
-}));
+        [`& .${_material.tooltipClasses.arrow}`]: {
+            color: theme.palette.background.paper,
+            '&::before': {
+                backgroundColor: theme.palette.secondary.main
+            }
+        }
+    }));

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

@@ -1,9 +1,3 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -16,18 +10,34 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const react_1 = require("@testing-library/react");
-const user_event_1 = __importDefault(require("@testing-library/user-event"));
-const dom_1 = require("@testing-library/dom");
-const InfoTooltip_1 = require("./InfoTooltip");
-describe('InfoTooltip', () => {
+"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_1.render)((0, jsx_runtime_1.jsx)(InfoTooltip_1.InfoTooltip, { title: title, description: description, children: (0, jsx_runtime_1.jsx)("div", { children: "tooltipAnchor" }) }));
-        const tooltipAnchor = dom_1.screen.getByText('tooltipAnchor');
-        user_event_1.default.hover(tooltipAnchor);
-        await dom_1.screen.findByText(title);
-        dom_1.screen.findByText(description);
+    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

@@ -1,4 +1,3 @@
-"use strict";
 // 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.
@@ -11,19 +10,19 @@
 // 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.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./InfoTooltip"), exports);
+"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;
+}