@perses-dev/components 0.0.0-snapshot-profile-89b306f → 0.0.0-snapshot-time-zone-selector-946f408

package/dist/TimeZoneSelector/TimeZoneSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeZoneSelector/TimeZoneSelector.tsx"],"sourcesContent":["// Copyright 2025 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 {\n  MenuItem,\n  Box,\n  Paper,\n  ListItemText,\n  Typography,\n  MenuList,\n  Input,\n  InputAdornment,\n  Divider,\n  useTheme,\n  useMediaQuery,\n} from '@mui/material';\nimport ClickAwayListener from '@mui/material/ClickAwayListener';\nimport EarthIcon from 'mdi-material-ui/Earth';\nimport MagnifyIcon from 'mdi-material-ui/Magnify';\nimport { ChangeEvent, ReactElement, useState } from 'react';\nimport { DEFAULT_DASHBOARD_TIMEZONE } from '@perses-dev/core';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\nimport { InfoTooltip } from '../InfoTooltip';\nimport { getTimeZoneOffset, TimeZoneOption } from '../model/timeZoneOption';\n\nexport interface TimeZoneSelectorProps {\n  heightPx?: string;\n  timeZoneOptions: TimeZoneOption[];\n  value: string;\n  onChange?: (timeZone: TimeZoneOption) => void;\n}\n\nexport function TimeZoneSelector({\n  heightPx = '34px',\n  timeZoneOptions: defaultTimeZoneOptions,\n  onChange,\n  value = DEFAULT_DASHBOARD_TIMEZONE,\n}: TimeZoneSelectorProps): ReactElement {\n  const isMobile = useMediaQuery(useTheme().breakpoints.down('md'));\n  const [open, setOpen] = useState(false);\n  const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;\n  const [searchValue, setSearchValue] = useState('');\n\n  const [timeZoneOptions, setTimeZoneOptions] = useState(defaultTimeZoneOptions);\n\n  function handleSearchChange(event: ChangeEvent<HTMLInputElement>): void {\n    setSearchValue(event.target.value);\n    if (event.target.value === '') {\n      setTimeZoneOptions(defaultTimeZoneOptions);\n    } else {\n      setTimeZoneOptions(\n        defaultTimeZoneOptions.filter((option) => option.label.toLowerCase().includes(event.target.value.toLowerCase()))\n      );\n    }\n  }\n\n  function handleTimeZoneSelection(timeZone: TimeZoneOption): void {\n    setOpen(false);\n    setTimeZoneOptions(defaultTimeZoneOptions);\n    setSearchValue('');\n    onChange?.(timeZone);\n  }\n\n  function handleOnClickAway(): void {\n    setOpen(false);\n    setSearchValue('');\n    setTimeZoneOptions(defaultTimeZoneOptions);\n  }\n\n  return (\n    <ClickAwayListener onClickAway={handleOnClickAway}>\n      <Box>\n        <Box sx={{ position: 'relative' }}>\n          <InfoTooltip description={value === DEFAULT_DASHBOARD_TIMEZONE ? localTimeZone : value}>\n            <ToolbarIconButton\n              data-testid=\"current-timezone\"\n              aria-label=\"Timezone\"\n              onClick={() => setOpen(!open)}\n              sx={(theme) => ({\n                height: heightPx,\n                paddingLeft: isMobile ? 0 : theme.spacing(1),\n                // Hide the timezone text on mobile\n                '& .timezone-text': {\n                  display: isMobile ? 'none' : 'inline',\n                },\n              })}\n            >\n              <span className=\"timezone-text\">\n                {value === DEFAULT_DASHBOARD_TIMEZONE\n                  ? getTimeZoneOffset(localTimeZone)?.value\n                  : getTimeZoneOffset(value)?.value}\n              </span>\n              <EarthIcon sx={(theme) => ({ marginLeft: theme.spacing(0.5) })} />\n            </ToolbarIconButton>\n          </InfoTooltip>\n        </Box>\n        <Paper\n          sx={(theme) => ({\n            width: 350,\n            height: 355,\n            position: 'absolute',\n            top: isMobile ? 160 : 110,\n            right: 10,\n            zIndex: 1,\n            boxShadow: 3,\n            backgroundColor: theme.palette.background.paper,\n            display: open ? 'block' : 'none',\n          })}\n        >\n          <Input\n            data-testid=\"search-timezone\"\n            sx={(theme) => ({\n              height: 45,\n              padding: theme.spacing(1),\n            })}\n            value={searchValue}\n            fullWidth\n            placeholder=\"Search timezone\"\n            startAdornment={\n              <InputAdornment position=\"start\">\n                <MagnifyIcon />\n              </InputAdornment>\n            }\n            onChange={handleSearchChange}\n          />\n          <MenuList sx={{ height: 305, overflowX: 'auto' }}>\n            {timeZoneOptions.map((timeZoneOption) => (\n              <Box key={timeZoneOption.value}>\n                <MenuItem\n                  key={timeZoneOption.value}\n                  onClick={() => handleTimeZoneSelection(timeZoneOption)}\n                  selected={timeZoneOption.value === value}\n                >\n                  <ListItemText>{timeZoneOption.label}</ListItemText>\n                  <Typography variant=\"body2\">{timeZoneOption.longOffset}</Typography>\n                </MenuItem>\n                {timeZoneOption.value === DEFAULT_DASHBOARD_TIMEZONE && <Divider />}\n              </Box>\n            ))}\n          </MenuList>\n        </Paper>\n      </Box>\n    </ClickAwayListener>\n  );\n}\n"],"names":["MenuItem","Box","Paper","ListItemText","Typography","MenuList","Input","InputAdornment","Divider","useTheme","useMediaQuery","ClickAwayListener","EarthIcon","MagnifyIcon","useState","DEFAULT_DASHBOARD_TIMEZONE","ToolbarIconButton","InfoTooltip","getTimeZoneOffset","TimeZoneSelector","heightPx","timeZoneOptions","defaultTimeZoneOptions","onChange","value","isMobile","breakpoints","down","open","setOpen","localTimeZone","Intl","DateTimeFormat","resolvedOptions","timeZone","searchValue","setSearchValue","setTimeZoneOptions","handleSearchChange","event","target","filter","option","label","toLowerCase","includes","handleTimeZoneSelection","handleOnClickAway","onClickAway","sx","position","description","data-testid","aria-label","onClick","theme","height","paddingLeft","spacing","display","span","className","marginLeft","width","top","right","zIndex","boxShadow","backgroundColor","palette","background","paper","padding","fullWidth","placeholder","startAdornment","overflowX","map","timeZoneOption","selected","variant","longOffset"],"mappings":"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"}

package/dist/TimeZoneSelector/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TimeZoneSelector';
+//# sourceMappingURL=index.d.ts.map

package/dist/TimeZoneSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeZoneSelector/index.ts"],"names":[],"mappings":"AAaA,cAAc,oBAAoB,CAAC"}

package/dist/{LineChart → TimeZoneSelector}/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 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
@@ -10,6 +10,6 @@
 // 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.
-export * from './LineChart';
+export * from './TimeZoneSelector';
 
 //# sourceMappingURL=index.js.map

package/dist/TimeZoneSelector/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeZoneSelector/index.ts"],"sourcesContent":["// Copyright 2025 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\nexport * from './TimeZoneSelector';\n"],"names":[],"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,cAAc,qBAAqB"}

package/dist/cjs/EChart/EChart.js

@@ -34,12 +34,13 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-// Loading the ECharts extensions should happen in the respective plugin (in this case, the scatterplot + custom plugin).
+// Loading the ECharts extensions should happen in the respective plugins.
 // This is a workaround for https://github.com/perses/plugins/issues/83.
 (0, _core.use)([
     _components.DatasetComponent,
     _components.DataZoomComponent,
     _components.LegendComponent,
+    _charts.LineChart,
     _charts.GaugeChart,
     _charts.PieChart,
     _charts.ScatterChart,
@@ -47,9 +48,13 @@ function _interop_require_default(obj) {
     _charts.HeatmapChart,
     _components.GridComponent,
     _components.TitleComponent,
+    _components.ToolboxComponent,
     _components.TooltipComponent,
     _renderers.CanvasRenderer,
-    _components.VisualMapComponent
+    _components.VisualMapComponent,
+    _components.MarkAreaComponent,
+    _components.MarkLineComponent,
+    _components.MarkPointComponent
 ]);
 const mouseEvents = [
     'click',

package/dist/cjs/TimeRangeSelector/DateTimeRangePicker.js

@@ -25,24 +25,23 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _xdatepickers = require("@mui/x-date-pickers");
 const _AdapterDateFnsV3 = require("@mui/x-date-pickers/AdapterDateFnsV3");
-const _context = require("../context");
 const _ErrorBoundary = require("../ErrorBoundary");
 const _ErrorAlert = require("../ErrorAlert");
+const _format = require("../utils/format");
 const _utils = require("./utils");
-const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel })=>{
-    const { formatWithUserTimeZone } = (0, _context.useTimeZone)();
+const DateTimeRangePicker = ({ initialTimeRange, onChange, onCancel, timeZone })=>{
     // Time range values as dates that can be used as a time range.
     const [timeRange, setTimeRange] = (0, _react.useState)(initialTimeRange);
     // Time range values as strings used to populate the text inputs. May not
     // be valid as dates when the user is typing.
     const [timeRangeInputs, setTimeRangeInputs] = (0, _react.useState)({
-        start: formatWithUserTimeZone(initialTimeRange.start, _utils.DATE_TIME_FORMAT),
-        end: formatWithUserTimeZone(initialTimeRange.end, _utils.DATE_TIME_FORMAT)
+        start: (0, _format.formatWithTimeZone)(initialTimeRange.start, _utils.DATE_TIME_FORMAT, timeZone),
+        end: (0, _format.formatWithTimeZone)(initialTimeRange.end, _utils.DATE_TIME_FORMAT, timeZone)
     });
     const [showStartCalendar, setShowStartCalendar] = (0, _react.useState)(true);
     const changeTimeRange = (newTime, segment)=>{
         const isInputChange = typeof newTime === 'string';
-        const newInputTime = isInputChange ? newTime : formatWithUserTimeZone(newTime, _utils.DATE_TIME_FORMAT);
+        const newInputTime = isInputChange ? newTime : (0, _format.formatWithTimeZone)(newTime, _utils.DATE_TIME_FORMAT, timeZone);
         setTimeRangeInputs((prevTimeRangeInputs)=>{
             return {
                 ...prevTimeRangeInputs,

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -22,10 +22,9 @@ Object.defineProperty(exports, "TimeRangeSelector", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _Calendar = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Calendar"));
+const _ClockTimeFiveOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ClockTimeFiveOutline"));
 const _core = require("@perses-dev/core");
 const _react = require("react");
-const _context = require("../context");
 const _DateTimeRangePicker = require("./DateTimeRangePicker");
 const _utils = require("./utils");
 function _interop_require_default(obj) {
@@ -33,8 +32,8 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true }) {
-    const { timeZone } = (0, _context.useTimeZone)();
+function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTimeRange = true, timeZone = _core.DEFAULT_DASHBOARD_TIMEZONE }) {
+    const isMobile = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.down('md'));
     const anchorEl = (0, _react.useRef)(); // Used to position the absolute time range picker
     // Control the open state of the absolute time range picker
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
@@ -78,7 +77,8 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
                         setShowCustomDateSelector(false);
                         setOpen(false);
                     },
-                    onCancel: ()=>setShowCustomDateSelector(false)
+                    onCancel: ()=>setShowCustomDateSelector(false),
+                    timeZone: timeZone
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
@@ -87,18 +87,22 @@ function TimeRangeSelector({ value, timeOptions, onChange, height, showCustomTim
                     open: open,
                     value: (0, _utils.formatTimeRange)(value, timeZone),
                     onClick: ()=>setOpen(!open),
-                    IconComponent: _Calendar.default,
+                    IconComponent: _ClockTimeFiveOutline.default,
                     inputProps: {
                         'aria-label': `Select time range. Currently set to ${value}`
                     },
                     sx: {
                         // `transform: none` prevents calendar icon from flipping over when menu is open
                         '.MuiSelect-icon': {
-                            marginTop: '1px',
                             transform: 'none'
                         },
                         // paddingRight creates more space for the calendar icon (it's a bigger icon)
-                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': {
+                        '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': isMobile ? {
+                            paddingRight: '25px',
+                            textIndent: '-9999px',
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden'
+                        } : {
                             paddingRight: '36px'
                         },
                         '.MuiSelect-select': height ? {

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -14,7 +14,6 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./LineChartTooltip"), exports);
 _export_star(require("./SeriesInfo"), exports);
 _export_star(require("./SeriesLabelsStack"), exports);
 _export_star(require("./SeriesMarker"), exports);

package/dist/cjs/TimeZoneSelector/TimeZoneSelector.js

@@ -0,0 +1,156 @@
+// Copyright 2025 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, "TimeZoneSelector", {
+    enumerable: true,
+    get: function() {
+        return TimeZoneSelector;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _ClickAwayListener = /*#__PURE__*/ _interop_require_default(require("@mui/material/ClickAwayListener"));
+const _Earth = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Earth"));
+const _Magnify = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Magnify"));
+const _react = require("react");
+const _core = require("@perses-dev/core");
+const _ToolbarIconButton = require("../ToolbarIconButton");
+const _InfoTooltip = require("../InfoTooltip");
+const _timeZoneOption = require("../model/timeZoneOption");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function TimeZoneSelector({ heightPx = '34px', timeZoneOptions: defaultTimeZoneOptions, onChange, value = _core.DEFAULT_DASHBOARD_TIMEZONE }) {
+    const isMobile = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.down('md'));
+    const [open, setOpen] = (0, _react.useState)(false);
+    const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const [searchValue, setSearchValue] = (0, _react.useState)('');
+    const [timeZoneOptions, setTimeZoneOptions] = (0, _react.useState)(defaultTimeZoneOptions);
+    function handleSearchChange(event) {
+        setSearchValue(event.target.value);
+        if (event.target.value === '') {
+            setTimeZoneOptions(defaultTimeZoneOptions);
+        } else {
+            setTimeZoneOptions(defaultTimeZoneOptions.filter((option)=>option.label.toLowerCase().includes(event.target.value.toLowerCase())));
+        }
+    }
+    function handleTimeZoneSelection(timeZone) {
+        setOpen(false);
+        setTimeZoneOptions(defaultTimeZoneOptions);
+        setSearchValue('');
+        onChange?.(timeZone);
+    }
+    function handleOnClickAway() {
+        setOpen(false);
+        setSearchValue('');
+        setTimeZoneOptions(defaultTimeZoneOptions);
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ClickAwayListener.default, {
+        onClickAway: handleOnClickAway,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+            children: [
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: {
+                        position: 'relative'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_InfoTooltip.InfoTooltip, {
+                        description: value === _core.DEFAULT_DASHBOARD_TIMEZONE ? localTimeZone : value,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_ToolbarIconButton.ToolbarIconButton, {
+                            "data-testid": "current-timezone",
+                            "aria-label": "Timezone",
+                            onClick: ()=>setOpen(!open),
+                            sx: (theme)=>({
+                                    height: heightPx,
+                                    paddingLeft: isMobile ? 0 : theme.spacing(1),
+                                    // Hide the timezone text on mobile
+                                    '& .timezone-text': {
+                                        display: isMobile ? 'none' : 'inline'
+                                    }
+                                }),
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                                    className: "timezone-text",
+                                    children: value === _core.DEFAULT_DASHBOARD_TIMEZONE ? (0, _timeZoneOption.getTimeZoneOffset)(localTimeZone)?.value : (0, _timeZoneOption.getTimeZoneOffset)(value)?.value
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_Earth.default, {
+                                    sx: (theme)=>({
+                                            marginLeft: theme.spacing(0.5)
+                                        })
+                                })
+                            ]
+                        })
+                    })
+                }),
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Paper, {
+                    sx: (theme)=>({
+                            width: 350,
+                            height: 355,
+                            position: 'absolute',
+                            top: isMobile ? 160 : 110,
+                            right: 10,
+                            zIndex: 1,
+                            boxShadow: 3,
+                            backgroundColor: theme.palette.background.paper,
+                            display: open ? 'block' : 'none'
+                        }),
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Input, {
+                            "data-testid": "search-timezone",
+                            sx: (theme)=>({
+                                    height: 45,
+                                    padding: theme.spacing(1)
+                                }),
+                            value: searchValue,
+                            fullWidth: true,
+                            placeholder: "Search timezone",
+                            startAdornment: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputAdornment, {
+                                position: "start",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Magnify.default, {})
+                            }),
+                            onChange: handleSearchChange
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuList, {
+                            sx: {
+                                height: 305,
+                                overflowX: 'auto'
+                            },
+                            children: timeZoneOptions.map((timeZoneOption)=>/*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuItem, {
+                                            onClick: ()=>handleTimeZoneSelection(timeZoneOption),
+                                            selected: timeZoneOption.value === value,
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ListItemText, {
+                                                    children: timeZoneOption.label
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                                                    variant: "body2",
+                                                    children: timeZoneOption.longOffset
+                                                })
+                                            ]
+                                        }, timeZoneOption.value),
+                                        timeZoneOption.value === _core.DEFAULT_DASHBOARD_TIMEZONE && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {})
+                                    ]
+                                }, timeZoneOption.value))
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}

package/dist/cjs/{LineChart → TimeZoneSelector}/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 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,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./LineChart"), exports);
+_export_star(require("./TimeZoneSelector"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/context/index.js

@@ -16,7 +16,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./ChartsProvider"), exports);
 _export_star(require("./SnackbarProvider"), exports);
-_export_star(require("./TimeZoneProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/index.js

@@ -30,7 +30,6 @@ _export_star(require("./FormEditor"), exports);
 _export_star(require("./InfoTooltip"), exports);
 _export_star(require("./JSONEditor"), exports);
 _export_star(require("./Legend"), exports);
-_export_star(require("./LineChart"), exports);
 _export_star(require("./LinksEditor"), exports);
 _export_star(require("./ModeSelector"), exports);
 _export_star(require("./OptionsEditorLayout"), exports);
@@ -39,8 +38,8 @@ _export_star(require("./SettingsAutocomplete"), exports);
 _export_star(require("./SortSelector"), exports);
 _export_star(require("./Table"), exports);
 _export_star(require("./ThresholdsEditor"), exports);
-_export_star(require("./TimeChart"), exports);
 _export_star(require("./TimeRangeSelector"), exports);
+_export_star(require("./TimeZoneSelector"), exports);
 _export_star(require("./TimeSeriesTooltip"), exports);
 _export_star(require("./ToolbarIconButton"), exports);
 _export_star(require("./FormatControls"), exports);

package/dist/cjs/model/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./graph"), exports);
 _export_star(require("./theme"), exports);
 _export_star(require("./timeOption"), exports);
+_export_star(require("./timeZoneOption"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/model/timeZoneOption.js

@@ -0,0 +1,100 @@
+// Copyright 2025 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, {
+    DEFAULT_TIMEZONE_OPTIONS: function() {
+        return DEFAULT_TIMEZONE_OPTIONS;
+    },
+    getTimeZoneOffset: function() {
+        return getTimeZoneOffset;
+    },
+    getTimeZoneOptions: function() {
+        return getTimeZoneOptions;
+    }
+});
+const _core = require("@perses-dev/core");
+const _memoize = /*#__PURE__*/ _interop_require_default(require("lodash/memoize"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DEFAULT_TIMEZONE_OPTIONS = (0, _memoize.default)(()=>Intl.supportedValuesOf('timeZone'));
+const getTimeZoneOffset = (timeZone)=>{
+    const defaultLocale = Intl.DateTimeFormat().resolvedOptions().locale;
+    // longOffset is returned as either GMT+-<offset>, UTC+-<offset> or just GMT/UTC
+    const longOffset = Intl.DateTimeFormat(defaultLocale, {
+        timeZone,
+        timeZoneName: 'longOffset'
+    }).formatToParts(new Date()).find((part)=>part.type === 'timeZoneName');
+    return longOffset ? {
+        ...longOffset,
+        // we want some consistency in the format of the offset, so if it's just GMT/UTC, we add +00:00
+        value: !(longOffset.value.includes('+') || longOffset.value.includes('-')) ? `${longOffset.value}+00:00` : longOffset.value
+    } : undefined;
+};
+const getTimeZoneOptions = (0, _memoize.default)(()=>{
+    const localTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    // define a browser time zone option
+    const BROWSER_TIME_ZONE = {
+        value: _core.DEFAULT_DASHBOARD_TIMEZONE,
+        label: `${localTimeZone} (default)`,
+        longOffset: getTimeZoneOffset(localTimeZone)?.value || ''
+    };
+    // define a UTC time zone option
+    const UTC = {
+        value: 'UTC',
+        label: 'UTC, GMT',
+        longOffset: 'UTC+00:00'
+    };
+    return(// putting UTC and local time zone options first for better user experience
+    [
+        'UTC',
+        _core.DEFAULT_DASHBOARD_TIMEZONE,
+        ...DEFAULT_TIMEZONE_OPTIONS()
+    ].map((timeZone)=>{
+        // return defined BROWSER_TIME_ZONE if timeZone is DEFAULT_DASHBOARD_TIMEZONE
+        if (timeZone === _core.DEFAULT_DASHBOARD_TIMEZONE) {
+            return BROWSER_TIME_ZONE;
+        }
+        // return defined UTC if timeZone is 'UTC'
+        if (timeZone === 'UTC') {
+            return UTC;
+        }
+        // return empty object if timeZone matches localTimeZone because we already returned it as BROWSER_TIME_ZONE
+        // avoid returning duplicate options
+        if (timeZone === localTimeZone) {
+            return {
+                value: '',
+                label: '',
+                longOffset: ''
+            };
+        }
+        const longOffset = getTimeZoneOffset(timeZone);
+        return {
+            value: timeZone,
+            label: timeZone.replaceAll('_', ' '),
+            longOffset: longOffset ? longOffset.value : ''
+        };
+    })// filter out objects with empty value
+    .filter((option)=>option.value !== ''));
+});

package/dist/cjs/utils/axis.js

@@ -14,17 +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, {
-    getDateRange: function() {
-        return getDateRange;
-    },
-    getFormattedAxis: function() {
+Object.defineProperty(exports, "getFormattedAxis", {
+    enumerable: true,
+    get: function() {
         return getFormattedAxis;
     }
 });
@@ -53,10 +45,3 @@ function getFormattedAxis(axis, unit) {
         (0, _merge.default)(AXIS_DEFAULT, axis)
     ];
 }
-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];
-}

package/dist/cjs/utils/format.js

@@ -32,9 +32,6 @@ _export(exports, {
     },
     getFormattedAxisLabel: function() {
         return getFormattedAxisLabel;
-    },
-    getFormattedDate: function() {
-        return getFormattedDate;
     }
 });
 const _datefnstz = require("date-fns-tz");
@@ -67,24 +64,6 @@ function formatWithTimeZone(date, formatString, timeZone) {
         return (0, _datefnstz.formatInTimeZone)(date, lowerTimeZone === 'utc' ? 'UTC' : timeZone, formatString);
     }
 }
-function getFormattedDate(value, rangeMs, timeZone) {
-    const dateFormatOptions = 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 getFormattedAxisLabel(rangeMs) {
     const dayMs = 86400000;
     const monthMs = 2629440000;

package/dist/context/index.d.ts

@@ -1,4 +1,3 @@
 export * from './ChartsProvider';
 export * from './SnackbarProvider';
-export * from './TimeZoneProvider';
 //# sourceMappingURL=index.d.ts.map

package/dist/context/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC"}

package/dist/context/index.js

@@ -12,6 +12,5 @@
 // limitations under the License.
 export * from './ChartsProvider';
 export * from './SnackbarProvider';
-export * from './TimeZoneProvider';
 
 //# sourceMappingURL=index.js.map

package/dist/context/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/context/index.ts"],"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\nexport * from './ChartsProvider';\nexport * from './SnackbarProvider';\nexport * from './TimeZoneProvider';\n"],"names":[],"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,cAAc,mBAAmB;AACjC,cAAc,qBAAqB;AACnC,cAAc,qBAAqB"}
+{"version":3,"sources":["../../src/context/index.ts"],"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\nexport * from './ChartsProvider';\nexport * from './SnackbarProvider';\n"],"names":[],"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,cAAc,mBAAmB;AACjC,cAAc,qBAAqB"}

package/dist/index.d.ts

@@ -14,7 +14,6 @@ export * from './FormEditor';
 export * from './InfoTooltip';
 export * from './JSONEditor';
 export * from './Legend';
-export * from './LineChart';
 export * from './LinksEditor';
 export * from './ModeSelector';
 export * from './OptionsEditorLayout';
@@ -23,8 +22,8 @@ export * from './SettingsAutocomplete';
 export * from './SortSelector';
 export * from './Table';
 export * from './ThresholdsEditor';
-export * from './TimeChart';
 export * from './TimeRangeSelector';
+export * from './TimeZoneSelector';
 export * from './TimeSeriesTooltip';
 export * from './ToolbarIconButton';
 export * from './FormatControls';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,WAAW,CAAC;AAC1B,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,sBAAsB,CAAC"}

package/dist/index.js

@@ -26,7 +26,6 @@ export * from './FormEditor';
 export * from './InfoTooltip';
 export * from './JSONEditor';
 export * from './Legend';
-export * from './LineChart';
 export * from './LinksEditor';
 export * from './ModeSelector';
 export * from './OptionsEditorLayout';
@@ -35,8 +34,8 @@ export * from './SettingsAutocomplete';
 export * from './SortSelector';
 export * from './Table';
 export * from './ThresholdsEditor';
-export * from './TimeChart';
 export * from './TimeRangeSelector';
+export * from './TimeZoneSelector';
 export * from './TimeSeriesTooltip';
 export * from './ToolbarIconButton';
 export * from './FormatControls';