@perses-dev/components 0.21.0 → 0.22.0

package/dist/YAxisLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: '45%',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAOhD,OAAO,SAASC,UAAU,CAAC,EAAEC,IAAI,CAAA,EAAEC,MAAM,CAAA,EAAmB,EAAE;IAC5D,qBACE,KAACJ,GAAG;QACFK,EAAE,EAAE;YACFC,OAAO,EAAE,cAAc;YACvBC,QAAQ,EAAEH,MAAM;YAChBI,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,SAAS,EAAE,iCAAiC;YAC5CC,eAAe,EAAE,KAAK;YACtBC,SAAS,EAAE,QAAQ;YACnBC,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACZ,UAAU;YACTa,OAAO,EAAC,OAAO;YACfT,EAAE,EAAE;gBACFU,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEAd,IAAI;UACM;MACT,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../src/YAxisLabel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Typography } from '@mui/material';\n\ninterface YAxisLabelProps {\n  name: string;\n  height: number;\n}\n\nexport function YAxisLabel({ name, height }: YAxisLabelProps) {\n  return (\n    <Box\n      sx={{\n        display: 'inline-block',\n        maxWidth: height, // allows rotated text to truncate instead of causing overlap\n        position: 'absolute',\n        top: '45%',\n        transform: 'translateX(-50%) rotate(-90deg)',\n        transformOrigin: 'top',\n        textAlign: 'center',\n        zIndex: 1,\n      }}\n    >\n      <Typography\n        variant=\"body1\"\n        sx={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n        }}\n      >\n        {name}\n      </Typography>\n    </Box>\n  );\n}\n"],"names":["Box","Typography","YAxisLabel","name","height","sx","display","maxWidth","position","top","transform","transformOrigin","textAlign","zIndex","variant","whiteSpace","overflow","textOverflow"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAOhD,OAAO,SAASC,UAAU,CAAC,EAAEC,IAAI,CAAA,EAAEC,MAAM,CAAA,EAAmB,EAAE;IAC5D,qBACE,KAACJ,GAAG;QACFK,EAAE,EAAE;YACFC,OAAO,EAAE,cAAc;YACvBC,QAAQ,EAAEH,MAAM;YAChBI,QAAQ,EAAE,UAAU;YACpBC,GAAG,EAAE,KAAK;YACVC,SAAS,EAAE,iCAAiC;YAC5CC,eAAe,EAAE,KAAK;YACtBC,SAAS,EAAE,QAAQ;YACnBC,MAAM,EAAE,CAAC;SACV;kBAED,cAAA,KAACZ,UAAU;YACTa,OAAO,EAAC,OAAO;YACfT,EAAE,EAAE;gBACFU,UAAU,EAAE,QAAQ;gBACpBC,QAAQ,EAAE,QAAQ;gBAClBC,YAAY,EAAE,UAAU;aACzB;sBAEAd,IAAI;UACM;MACT,CACN;AACJ,CAAC"}

package/dist/cjs/DateTimeRangePicker/AbsoluteTimePicker.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/DateTimeRangePicker/DateTimeRangePicker.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/DateTimeRangePicker/TimeRangeSelector.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/DateTimeRangePicker/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/DateTimeRangePicker/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Drawer/Drawer.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Drawer/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/EChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/ErrorAlert.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/ErrorBoundary.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/GaugeChart/GaugeChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -168,10 +168,7 @@ function GaugeChart(props) {
                         color: 'inherit',
                         fontSize: valueSizeClamp,
                         formatter: (value)=>{
-                            return (0, _units.formatValue)(value, {
-                                kind: unit.kind,
-                                decimal_places: 0
-                            });
+                            return (0, _units.formatValue)(value, unit);
                         }
                     },
                     data: [
@@ -218,10 +215,7 @@ function getResponsiveValueSize(value, unit, width, height) {
     const MIN_SIZE = 3;
     const MAX_SIZE = 24;
     const SIZE_MULTIPLIER = 0.7;
-    const formattedValue = (0, _units.formatValue)(value, {
-        kind: unit.kind,
-        decimal_places: 0
-    });
+    const formattedValue = (0, _units.formatValue)(value, unit);
     var _length;
     const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
     const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;

package/dist/cjs/GaugeChart/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/InfoTooltip/InfoTooltip.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -14,15 +14,9 @@
 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
+Object.defineProperty(exports, "InfoTooltip", {
+    enumerable: true,
+    get: ()=>InfoTooltip
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
@@ -32,18 +26,11 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-var TooltipPlacement;
-(function(TooltipPlacement) {
-    TooltipPlacement["Top"] = 'top';
-    TooltipPlacement["Left"] = 'left';
-    TooltipPlacement["Right"] = 'right';
-    TooltipPlacement["Bottom"] = 'bottom';
-})(TooltipPlacement || (TooltipPlacement = {}));
 const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement !== null && placement !== void 0 ? placement : TooltipPlacement.Top,
+        placement: placement !== null && placement !== void 0 ? placement : 'top',
         title: /*#__PURE__*/ (0, _jsxRuntime.jsx)(TooltipContent, {
             title: title,
             description: description

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/InfoTooltip/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/JSONEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -20,37 +20,47 @@ Object.defineProperty(exports, "JSONEditor", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
+const _reactCodemirror = /*#__PURE__*/ _interopRequireDefault(require("@uiw/react-codemirror"));
+const _langJson = require("@codemirror/lang-json");
+const _lint = require("@codemirror/lint");
 const _material = require("@mui/material");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function JSONEditor(props) {
+    const theme = (0, _material.useTheme)();
+    const isDarkMode = theme.palette.mode === 'dark';
     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,
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactCodemirror.default, {
+        ...props,
+        style: {
+            border: `1px solid ${theme.palette.divider}`
+        },
+        theme: isDarkMode ? 'dark' : 'light',
+        extensions: [
+            (0, _langJson.json)(),
+            (0, _lint.linter)((0, _langJson.jsonParseLinter)()),
+            (0, _lint.lintGutter)()
+        ],
         value: value,
-        onChange: (event)=>{
-            setValue(event.target.value);
+        onChange: (newValue)=>{
+            setValue(newValue);
         },
-        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);
+            // ignore this error
             }
         }
     });

package/dist/cjs/Legend/CompactLegend.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Legend/Legend.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -23,7 +23,7 @@ const _material = require("@mui/material");
 const _listLegend = require("./ListLegend");
 const _compactLegend = require("./CompactLegend");
 function Legend({ width , height , options , data  }) {
-    if (options.position === 'right') {
+    if (options.position === 'Right') {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
             sx: {
                 width: width,
@@ -31,6 +31,7 @@ function Legend({ width , height , options , data  }) {
                 position: 'absolute',
                 top: 0,
                 right: 0,
+                overflowX: 'hidden',
                 overflowY: 'scroll'
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegend.ListLegend, {
@@ -38,8 +39,19 @@ function Legend({ width , height , options , data  }) {
             })
         });
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
-        items: data,
-        height: height
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            width: width,
+            height: height,
+            position: 'absolute',
+            bottom: 0
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_compactLegend.CompactLegend, {
+                items: data,
+                height: height
+            }),
+            ";"
+        ]
     });
 }

package/dist/cjs/Legend/LegendColorBadge.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Legend/ListLegend.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Legend/ListLegendItem.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/Legend/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -20,21 +20,10 @@ Object.defineProperty(exports, "LegendOptionsEditor", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
+const _errorAlert = require("../ErrorAlert");
 const _model = require("../model");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
-const LEGEND_POSITIONS = [
-    'bottom',
-    'right'
-];
-const LEGEND_POSITIONS_CONFIG = {
-    bottom: {
-        label: 'Bottom'
-    },
-    right: {
-        label: 'Right'
-    }
-};
-const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
+const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,
         ...config
@@ -54,11 +43,17 @@ function LegendOptionsEditor({ value , onChange  }) {
             position: newValue.id
         });
     };
-    var ref;
-    const legendConfig = LEGEND_POSITIONS_CONFIG[(ref = value === null || value === void 0 ? void 0 : value.position) !== null && ref !== void 0 ? ref : _model.DEFAULT_LEGEND.position];
-    var ref1;
+    const isValidLegend = (0, _model.validateLegendSpec)(value);
+    const currentPosition = (0, _model.getLegendPosition)(value === null || value === void 0 ? void 0 : value.position);
+    const legendConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
+            !isValidLegend && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_errorAlert.ErrorAlert, {
+                error: {
+                    name: 'invalid-legend',
+                    message: 'Invalid legend spec'
+                }
+            }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Show",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
@@ -71,7 +66,7 @@ function LegendOptionsEditor({ value , onChange  }) {
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
                     value: {
                         ...legendConfig,
-                        id: (ref1 = value === null || value === void 0 ? void 0 : value.position) !== null && ref1 !== void 0 ? ref1 : _model.DEFAULT_LEGEND.position
+                        id: currentPosition
                     },
                     options: POSITION_OPTIONS,
                     isOptionEqualToValue: (option, value)=>option.id === value.id,

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.test.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -37,12 +37,33 @@ describe('LegendOptionsEditor', ()=>{
             name: 'Show'
         });
     };
+    const getLegendPositionSelector = ()=>{
+        return _react.screen.getByRole('combobox', {
+            name: 'Position'
+        });
+    };
     it('can change legend visibility by clicking', ()=>{
         const onChange = jest.fn();
         renderLegendOptionsEditor(undefined, onChange);
+        expect(getLegendPositionSelector()).toBeDisabled();
         _userEvent.default.click(getLegendShowSwitch());
         expect(onChange).toHaveBeenCalledWith({
-            position: 'bottom'
+            position: 'Bottom'
+        });
+    });
+    it('should allow changing legend position', ()=>{
+        const onChange = jest.fn();
+        renderLegendOptionsEditor({
+            position: 'Bottom'
+        }, onChange);
+        expect(getLegendPositionSelector()).toBeEnabled();
+        _userEvent.default.click(getLegendPositionSelector());
+        const positionRightOption = _react.screen.getByRole('option', {
+            name: 'Right'
+        });
+        _userEvent.default.click(positionRightOption);
+        expect(onChange).toHaveBeenCalledWith({
+            position: 'Right'
         });
     });
 });

package/dist/cjs/LegendOptionsEditor/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/LineChart/LineChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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
@@ -28,7 +28,7 @@ const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
 const _graph = require("../model/graph");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _tooltip = require("../Tooltip/Tooltip");
+const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _utils = require("./utils");
 (0, _core.use)([
@@ -176,7 +176,7 @@ function LineChart({ height , data , yAxis , unit , grid , legend , onDataZoom ,
         },
         onDoubleClick: handleOnDoubleClick,
         children: [
-            showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltip.Tooltip, {
+            showTooltip === true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: true,

package/dist/cjs/LineChart/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/LineChart/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorColumn.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorGrid.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/OptionsEditorLayout/OptionsEditorGroup.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/OptionsEditorLayout/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/StatChart/StatChart.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

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

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/StatChart/index.js

@@ -1,4 +1,4 @@
-// Copyright 2022 The Perses Authors
+// 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

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -0,0 +1,95 @@
+// 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
+});
+Object.defineProperty(exports, "SeriesInfo", {
+    enumerable: true,
+    get: ()=>SeriesInfo
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _seriesMarker = require("./SeriesMarker");
+const _seriesLabelsStack = require("./SeriesLabelsStack");
+const _tooltipModel = require("./tooltip-model");
+function SeriesInfo(props) {
+    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels  } = props;
+    // metric __name__ comes before opening curly brace, ignore if not populated
+    // ex with metric name: node_load15{env="demo",job="node"}
+    // ex without metric name: {env="demo",job="node"}
+    const splitName = seriesName.split('{');
+    var ref;
+    const seriesLabels = (ref = splitName[1]) !== null && ref !== void 0 ? ref : seriesName;
+    // remove curly braces that wrap labels
+    const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');
+    // determine whether to show labels on separate lines
+    const splitLabels = formattedSeriesLabels.split(',');
+    if (totalSeries === 1 && splitLabels.length > 1) {
+        const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesLabelsStack.SeriesLabelsStack, {
+            formattedY: formattedY,
+            metricName: metricName,
+            metricLabels: splitLabels,
+            markerColor: markerColor
+        });
+    }
+    // add space after commas when more than one focused series
+    const inlineSeriesLabels = formattedSeriesLabels.replace(/[,]/g, ', ');
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        sx: {
+            display: 'table-row',
+            paddingTop: 0.5
+        },
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    display: 'table-cell',
+                    maxWidth: '520px'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesMarker.SeriesMarker, {
+                        markerColor: markerColor,
+                        sx: {
+                            marginTop: 0.5
+                        }
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        component: "span",
+                        sx: (theme)=>({
+                                display: 'inline-block',
+                                width: 'calc(100% - 20px)',
+                                minWidth: 150,
+                                maxWidth: _tooltipModel.TOOLTIP_LABELS_MAX_WIDTH,
+                                overflow: 'hidden',
+                                color: theme.palette.common.white,
+                                textOverflow: 'ellipsis',
+                                whiteSpace: wrapLabels ? 'normal' : 'nowrap'
+                            }),
+                        children: inlineSeriesLabels
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                    display: 'table-cell',
+                    paddingLeft: 1.5,
+                    textAlign: 'right',
+                    verticalAlign: 'top',
+                    fontWeight: '700'
+                },
+                children: formattedY
+            })
+        ]
+    });
+}