@perses-dev/components 0.20.0 → 0.21.0

package/dist/DateTimeRangePicker/AbsoluteTimePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AbsoluteTimePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKrD,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,kBAAkB,mCAAoC,qBAAqB,gBAsIvF,CAAC"}
+{"version":3,"file":"AbsoluteTimePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,UAAU,qBAAqB;IAC7B,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,QAAQ,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,kBAAkB,mCAAoC,qBAAqB,gBAuIvF,CAAC"}

package/dist/DateTimeRangePicker/AbsoluteTimePicker.js

@@ -15,12 +15,13 @@ import { useState } from 'react';
 import { Box, Stack, TextField, Typography } from '@mui/material';
 import { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import { format } from 'date-fns';
+import { useTimeZone } from '../context/TimeZoneProvider';
 import { validateDateRange } from './utils';
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
     const [timeRange, setTimeRange] = useState(initialTimeRange);
     const [showStartCalendar, setShowStartCalendar] = useState(true);
+    const { formatWithUserTimeZone  } = useTimeZone();
     // validate start and end time, propagate changes
     const updateDateRange = (input, isStartDate)=>{
         const newDate = new Date(input);
@@ -155,7 +156,7 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                                 // TODO: add helperText, fix validation after we decide on form state solution
                                 updateDateRange(event.target.value, true);
                             },
-                            value: format(timeRange.start, DATE_TIME_FORMAT),
+                            value: formatWithUserTimeZone(timeRange.start, DATE_TIME_FORMAT),
                             label: "Start Time",
                             placeholder: "mm/dd/yyyy hh:mm",
                             // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590
@@ -165,7 +166,7 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                             onChange: (event)=>{
                                 updateDateRange(event.target.value, false);
                             },
-                            value: format(timeRange.end, DATE_TIME_FORMAT),
+                            value: formatWithUserTimeZone(timeRange.end, DATE_TIME_FORMAT),
                             label: "End Time",
                             placeholder: "mm/dd/yyyy hh:mm",
                             type: "tel"

package/dist/DateTimeRangePicker/AbsoluteTimePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.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 { useState } from 'react';\nimport { Box, Stack, TextField, Typography } from '@mui/material';\nimport { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { format } from 'date-fns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { validateDateRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\ninterface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n}\n\nexport const AbsoluteTimePicker = ({ initialTimeRange, onChange }: AbsoluteTimeFormProps) => {\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n\n  // validate start and end time, propagate changes\n  const updateDateRange = (input: string, isStartDate: boolean) => {\n    const newDate = new Date(input);\n    if (isStartDate === true) {\n      const isValidDateRange = validateDateRange(newDate, timeRange.end);\n      if (isValidDateRange === true) {\n        setTimeRange((current) => {\n          const updatedRange = { start: newDate, end: current.end };\n          onChange(updatedRange);\n          return updatedRange;\n        });\n      }\n    } else {\n      const isValidDateRange = validateDateRange(timeRange.start, newDate);\n      if (isValidDateRange === true) {\n        setTimeRange((current) => {\n          const updatedRange = { start: current.start, end: newDate };\n          onChange(updatedRange);\n          return updatedRange;\n        });\n      }\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                setTimeRange((current) => {\n                  return { start: newValue, end: current.end };\n                });\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.end}\n              minDateTime={timeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                setTimeRange((current) => {\n                  return { start: current.start, end: newValue };\n                });\n              }}\n              onAccept={() => {\n                setShowStartCalendar(true);\n                onChange(timeRange);\n              }}\n              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              // TODO: add helperText, fix validation after we decide on form state solution\n              updateDateRange(event.target.value, true);\n            }}\n            value={format(timeRange.start, DATE_TIME_FORMAT)}\n            label=\"Start Time\"\n            placeholder=\"mm/dd/yyyy hh:mm\"\n            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590\n            type=\"tel\"\n          />\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              updateDateRange(event.target.value, false);\n            }}\n            value={format(timeRange.end, DATE_TIME_FORMAT)}\n            label=\"End Time\"\n            placeholder=\"mm/dd/yyyy hh:mm\"\n            type=\"tel\"\n          />\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["useState","Box","Stack","TextField","Typography","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","format","validateDateRange","DATE_TIME_FORMAT","AbsoluteTimePicker","initialTimeRange","onChange","timeRange","setTimeRange","showStartCalendar","setShowStartCalendar","updateDateRange","input","isStartDate","newDate","Date","isValidDateRange","end","current","updatedRange","start","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","top","bottom","margin","variant","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","renderInput","params","minDateTime","direction","alignItems","gap","pl","pr","event","target","label","placeholder","type"],"mappings":"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"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/AbsoluteTimePicker.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 { useState } from 'react';\nimport { Box, Stack, TextField, Typography } from '@mui/material';\nimport { LocalizationProvider, StaticDateTimePicker } from '@mui/x-date-pickers';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { validateDateRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\ninterface AbsoluteTimeFormProps {\n  initialTimeRange: AbsoluteTimeRange;\n  onChange: (timeRange: AbsoluteTimeRange) => void;\n}\n\nexport const AbsoluteTimePicker = ({ initialTimeRange, onChange }: AbsoluteTimeFormProps) => {\n  const [timeRange, setTimeRange] = useState<AbsoluteTimeRange>(initialTimeRange);\n  const [showStartCalendar, setShowStartCalendar] = useState<boolean>(true);\n  const { formatWithUserTimeZone } = useTimeZone();\n\n  // validate start and end time, propagate changes\n  const updateDateRange = (input: string, isStartDate: boolean) => {\n    const newDate = new Date(input);\n    if (isStartDate === true) {\n      const isValidDateRange = validateDateRange(newDate, timeRange.end);\n      if (isValidDateRange === true) {\n        setTimeRange((current) => {\n          const updatedRange = { start: newDate, end: current.end };\n          onChange(updatedRange);\n          return updatedRange;\n        });\n      }\n    } else {\n      const isValidDateRange = validateDateRange(timeRange.start, newDate);\n      if (isValidDateRange === true) {\n        setTimeRange((current) => {\n          const updatedRange = { start: current.start, end: newDate };\n          onChange(updatedRange);\n          return updatedRange;\n        });\n      }\n    }\n  };\n\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack\n        spacing={2}\n        sx={(theme) => ({\n          padding: theme.spacing(1, 0, 2),\n        })}\n      >\n        {showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              // TODO: create separate reusable calendar component\n              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\n              Select Start Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                setTimeRange((current) => {\n                  return { start: newValue, end: current.end };\n                });\n              }}\n              onAccept={() => {\n                setShowStartCalendar(false);\n              }}\n              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        {!showStartCalendar && (\n          <Box\n            sx={(theme) => ({\n              '.MuiPickerStaticWrapper-content': {\n                backgroundColor: theme.palette.background.default,\n              },\n              // reposition AM and PM buttons\n              '.MuiIconButton-sizeMedium': {\n                top: 80,\n                bottom: 'auto',\n                margin: theme.spacing(0, 3),\n              },\n            })}\n          >\n            <Typography variant=\"h3\" padding={1}>\n              Select End Time\n            </Typography>\n            <StaticDateTimePicker\n              displayStaticWrapperAs=\"desktop\"\n              openTo=\"day\"\n              disableHighlightToday={true}\n              value={initialTimeRange.end}\n              minDateTime={timeRange.start}\n              onChange={(newValue) => {\n                if (newValue === null) return;\n                setTimeRange((current) => {\n                  return { start: current.start, end: newValue };\n                });\n              }}\n              onAccept={() => {\n                setShowStartCalendar(true);\n                onChange(timeRange);\n              }}\n              renderInput={(params) => <TextField {...params} />}\n            />\n          </Box>\n        )}\n        <Stack direction=\"row\" alignItems=\"center\" gap={1} pl={1} pr={1}>\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              // TODO: add helperText, fix validation after we decide on form state solution\n              updateDateRange(event.target.value, true);\n            }}\n            value={formatWithUserTimeZone(timeRange.start, DATE_TIME_FORMAT)}\n            label=\"Start Time\"\n            placeholder=\"mm/dd/yyyy hh:mm\"\n            // tel used to match MUI DateTimePicker, may change in future: https://github.com/mui/material-ui/issues/27590\n            type=\"tel\"\n          />\n          <TextField\n            onChange={(event: React.ChangeEvent<HTMLInputElement>) => {\n              updateDateRange(event.target.value, false);\n            }}\n            value={formatWithUserTimeZone(timeRange.end, DATE_TIME_FORMAT)}\n            label=\"End Time\"\n            placeholder=\"mm/dd/yyyy hh:mm\"\n            type=\"tel\"\n          />\n        </Stack>\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"],"names":["useState","Box","Stack","TextField","Typography","LocalizationProvider","StaticDateTimePicker","AdapterDateFns","useTimeZone","validateDateRange","DATE_TIME_FORMAT","AbsoluteTimePicker","initialTimeRange","onChange","timeRange","setTimeRange","showStartCalendar","setShowStartCalendar","formatWithUserTimeZone","updateDateRange","input","isStartDate","newDate","Date","isValidDateRange","end","current","updatedRange","start","dateAdapter","spacing","sx","theme","padding","backgroundColor","palette","background","default","top","bottom","margin","variant","displayStaticWrapperAs","openTo","disableHighlightToday","value","newValue","onAccept","renderInput","params","minDateTime","direction","alignItems","gap","pl","pr","event","target","label","placeholder","type"],"mappings":"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"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -5,6 +5,7 @@ interface DateTimeRangePickerProps {
     value: TimeRangeValue;
     onChange: (value: TimeRangeValue) => void;
     timeOptions: TimeOption[];
+    height?: string;
 }
 export declare function DateTimeRangePicker(props: DateTimeRangePickerProps): JSX.Element;
 export {};

package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":";AAeA,OAAO,EAML,cAAc,EACf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAqB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEpE,UAAU,wBAAwB;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,UAAU,EAAE,CAAC;CAC3B;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAsDlE"}
+{"version":3,"file":"DateTimeRangePicker.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.tsx"],"names":[],"mappings":";AAeA,OAAO,EAML,cAAc,EACf,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAqB,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEpE,UAAU,wBAAwB;IAChC,KAAK,EAAE,cAAc,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IAC1C,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAuDlE"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.js

@@ -17,7 +17,7 @@ import { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';
 import { AbsoluteTimePicker } from './AbsoluteTimePicker';
 import { TimeRangeSelector } from './TimeRangeSelector';
 export function DateTimeRangePicker(props) {
-    const { value , onChange , timeOptions  } = props;
+    const { value , onChange , timeOptions , height  } = props;
     const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
     const anchorEl = useRef();
     const convertedTimeRange = useMemo(()=>{
@@ -28,6 +28,7 @@ export function DateTimeRangePicker(props) {
     return /*#__PURE__*/ _jsxs(Stack, {
         direction: "row",
         spacing: 1,
+        height: height,
         children: [
             /*#__PURE__*/ _jsx(Popover, {
                 anchorEl: anchorEl.current,
@@ -55,6 +56,7 @@ export function DateTimeRangePicker(props) {
                     children: /*#__PURE__*/ _jsx(TimeRangeSelector, {
                         timeOptions: timeOptions,
                         value: value,
+                        height: height,
                         onSelectChange: (event)=>{
                             const duration = event.target.value;
                             const relativeTimeInput = {

package/dist/DateTimeRangePicker/DateTimeRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.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 { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  TimeRangeValue,\n} from '@perses-dev/core';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector, TimeOption } from './TimeRangeSelector';\n\ninterface DateTimeRangePickerProps {\n  value: TimeRangeValue;\n  onChange: (value: TimeRangeValue) => void;\n  timeOptions: TimeOption[];\n}\n\nexport function DateTimeRangePicker(props: DateTimeRangePickerProps) {\n  const { value, onChange, timeOptions } = props;\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n          }}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={timeOptions}\n            value={value}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              onChange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","isRelativeTimeRange","toAbsoluteTimeRange","AbsoluteTimePicker","TimeRangeSelector","DateTimeRangePicker","props","value","onChange","timeOptions","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","fullWidth","ref","onSelectChange","event","duration","target","relativeTimeInput","pastDuration","end","Date","onCustomClick"],"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,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,eAAe,CAAC;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,kBAAkB,CAAC;AAC1B,SAASC,kBAAkB,QAAQ,sBAAsB,CAAC;AAC1D,SAASC,iBAAiB,QAAoB,qBAAqB,CAAC;AAQpE,OAAO,SAASC,mBAAmB,CAACC,KAA+B,EAAE;IACnE,MAAM,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAE,GAAGH,KAAK,AAAC;IAE/C,MAAM,CAACI,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC5E,MAAMiB,QAAQ,GAAGlB,MAAM,EAAE,AAAC;IAE1B,MAAMmB,kBAAkB,GAAGjB,OAAO,CAAC,IAAM;QACvC,OAAOK,mBAAmB,CAACM,KAAK,CAAC,GAAGL,mBAAmB,CAACK,KAAK,CAAC,GAAGA,KAAK,CAAC;IACzE,CAAC,EAAE;QAACA,KAAK;KAAC,CAAC,AAAC;IAEZ,qBACE,MAACP,KAAK;QAACc,SAAS,EAAC,KAAK;QAACC,OAAO,EAAE,CAAC;;0BAC/B,KAAChB,OAAO;gBACNa,QAAQ,EAAEA,QAAQ,CAACI,OAAO;gBAC1BC,YAAY,EAAE;oBACZC,QAAQ,EAAE,QAAQ;oBAClBC,UAAU,EAAE,QAAQ;iBACrB;gBACDC,IAAI,EAAEV,sBAAsB;gBAC5BW,OAAO,EAAE,IAAMV,yBAAyB,CAAC,KAAK,CAAC;gBAC/CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,OAAO,EAAED,KAAK,CAACR,OAAO,CAAC,CAAC,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACZ,kBAAkB;oBACjBsB,gBAAgB,EAAEZ,kBAAkB;oBACpCL,QAAQ,EAAE,CAACD,KAAwB,GAAK;wBACtCC,QAAQ,CAACD,KAAK,CAAC,CAAC;wBAChBI,yBAAyB,CAAC,KAAK,CAAC,CAAC;oBACnC,CAAC;kBACD;cACM;0BACV,KAACb,WAAW;gBAAC4B,SAAS;0BACpB,cAAA,KAAC7B,GAAG;oBAAC8B,GAAG,EAAEf,QAAQ;8BAChB,cAAA,KAACR,iBAAiB;wBAChBK,WAAW,EAAEA,WAAW;wBACxBF,KAAK,EAAEA,KAAK;wBACZqB,cAAc,EAAE,CAACC,KAAK,GAAK;4BACzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAACxB,KAAK,AAAC;4BACpC,MAAMyB,iBAAiB,GAAsB;gCAC3CC,YAAY,EAAEH,QAAQ;gCACtBI,GAAG,EAAE,IAAIC,IAAI,EAAE;6BAChB,AAAC;4BACF3B,QAAQ,CAACwB,iBAAiB,CAAC,CAAC;4BAC5BrB,yBAAyB,CAAC,KAAK,CAAC,CAAC;wBACnC,CAAC;wBACDyB,aAAa,EAAE,IAAM;4BACnBzB,yBAAyB,CAAC,IAAI,CAAC,CAAC;wBAClC,CAAC;sBACD;kBACE;cACM;;MACR,CACR;AACJ,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/DateTimeRangePicker.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 { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n  TimeRangeValue,\n} from '@perses-dev/core';\nimport { AbsoluteTimePicker } from './AbsoluteTimePicker';\nimport { TimeRangeSelector, TimeOption } from './TimeRangeSelector';\n\ninterface DateTimeRangePickerProps {\n  value: TimeRangeValue;\n  onChange: (value: TimeRangeValue) => void;\n  timeOptions: TimeOption[];\n  height?: string;\n}\n\nexport function DateTimeRangePicker(props: DateTimeRangePickerProps) {\n  const { value, onChange, timeOptions, height } = props;\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  return (\n    <Stack direction=\"row\" spacing={1} height={height}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n          }}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={timeOptions}\n            value={value}\n            height={height}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              onChange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","isRelativeTimeRange","toAbsoluteTimeRange","AbsoluteTimePicker","TimeRangeSelector","DateTimeRangePicker","props","value","onChange","timeOptions","height","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","fullWidth","ref","onSelectChange","event","duration","target","relativeTimeInput","pastDuration","end","Date","onCustomClick"],"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,MAAM,EAAEC,QAAQ,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAClD,SAASC,GAAG,EAAEC,WAAW,EAAEC,OAAO,EAAEC,KAAK,QAAQ,eAAe,CAAC;AACjE,SAIEC,mBAAmB,EACnBC,mBAAmB,QAEd,kBAAkB,CAAC;AAC1B,SAASC,kBAAkB,QAAQ,sBAAsB,CAAC;AAC1D,SAASC,iBAAiB,QAAoB,qBAAqB,CAAC;AASpE,OAAO,SAASC,mBAAmB,CAACC,KAA+B,EAAE;IACnE,MAAM,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAEC,WAAW,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGJ,KAAK,AAAC;IAEvD,MAAM,CAACK,sBAAsB,EAAEC,yBAAyB,CAAC,GAAGjB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAC5E,MAAMkB,QAAQ,GAAGnB,MAAM,EAAE,AAAC;IAE1B,MAAMoB,kBAAkB,GAAGlB,OAAO,CAAC,IAAM;QACvC,OAAOK,mBAAmB,CAACM,KAAK,CAAC,GAAGL,mBAAmB,CAACK,KAAK,CAAC,GAAGA,KAAK,CAAC;IACzE,CAAC,EAAE;QAACA,KAAK;KAAC,CAAC,AAAC;IAEZ,qBACE,MAACP,KAAK;QAACe,SAAS,EAAC,KAAK;QAACC,OAAO,EAAE,CAAC;QAAEN,MAAM,EAAEA,MAAM;;0BAC/C,KAACX,OAAO;gBACNc,QAAQ,EAAEA,QAAQ,CAACI,OAAO;gBAC1BC,YAAY,EAAE;oBACZC,QAAQ,EAAE,QAAQ;oBAClBC,UAAU,EAAE,QAAQ;iBACrB;gBACDC,IAAI,EAAEV,sBAAsB;gBAC5BW,OAAO,EAAE,IAAMV,yBAAyB,CAAC,KAAK,CAAC;gBAC/CW,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,OAAO,EAAED,KAAK,CAACR,OAAO,CAAC,CAAC,CAAC;qBAC1B,CAAA,AAAC;0BAEF,cAAA,KAACb,kBAAkB;oBACjBuB,gBAAgB,EAAEZ,kBAAkB;oBACpCN,QAAQ,EAAE,CAACD,KAAwB,GAAK;wBACtCC,QAAQ,CAACD,KAAK,CAAC,CAAC;wBAChBK,yBAAyB,CAAC,KAAK,CAAC,CAAC;oBACnC,CAAC;kBACD;cACM;0BACV,KAACd,WAAW;gBAAC6B,SAAS;0BACpB,cAAA,KAAC9B,GAAG;oBAAC+B,GAAG,EAAEf,QAAQ;8BAChB,cAAA,KAACT,iBAAiB;wBAChBK,WAAW,EAAEA,WAAW;wBACxBF,KAAK,EAAEA,KAAK;wBACZG,MAAM,EAAEA,MAAM;wBACdmB,cAAc,EAAE,CAACC,KAAK,GAAK;4BACzB,MAAMC,QAAQ,GAAGD,KAAK,CAACE,MAAM,CAACzB,KAAK,AAAC;4BACpC,MAAM0B,iBAAiB,GAAsB;gCAC3CC,YAAY,EAAEH,QAAQ;gCACtBI,GAAG,EAAE,IAAIC,IAAI,EAAE;6BAChB,AAAC;4BACF5B,QAAQ,CAACyB,iBAAiB,CAAC,CAAC;4BAC5BrB,yBAAyB,CAAC,KAAK,CAAC,CAAC;wBACnC,CAAC;wBACDyB,aAAa,EAAE,IAAM;4BACnBzB,yBAAyB,CAAC,IAAI,CAAC,CAAC;wBAClC,CAAC;sBACD;kBACE;cACM;;MACR,CACR;AACJ,CAAC"}

package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts

@@ -10,6 +10,7 @@ interface TimeRangeSelectorProps {
     timeOptions: TimeOption[];
     onSelectChange: (event: SelectChangeEvent<string>) => void;
     onCustomClick: () => void;
+    height?: string;
 }
 export declare function TimeRangeSelector(props: TimeRangeSelectorProps): JSX.Element;
 export {};

package/dist/DateTimeRangePicker/TimeRangeSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAK1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA0C9D"}
+{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1F,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,KAAK,EAAE,cAAc,CAAC;IACtB,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,cAAc,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;IAC3D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA4C9D"}

package/dist/DateTimeRangePicker/TimeRangeSelector.js

@@ -14,11 +14,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem, Select } from '@mui/material';
 import Calendar from 'mdi-material-ui/Calendar';
 import { isRelativeTimeRange } from '@perses-dev/core';
+import { useTimeZone } from '../context/TimeZoneProvider';
 import { formatAbsoluteRange } from './utils';
 const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 export function TimeRangeSelector(props) {
-    const { value , timeOptions , onSelectChange , onCustomClick  } = props;
-    const formattedValue = !isRelativeTimeRange(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT) : value.pastDuration;
+    const { value , timeOptions , onSelectChange , onCustomClick , height  } = props;
+    const { timeZone  } = useTimeZone();
+    const formattedValue = !isRelativeTimeRange(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;
     return /*#__PURE__*/ _jsxs(Select, {
         value: formattedValue,
         onChange: onSelectChange,
@@ -26,7 +28,11 @@ export function TimeRangeSelector(props) {
         sx: {
             '.MuiSelect-icon': {
                 marginTop: '1px'
-            }
+            },
+            '.MuiSelect-select': height ? {
+                lineHeight: height,
+                paddingY: 0
+            } : {}
         },
         children: [
             timeOptions.map((item, idx)=>/*#__PURE__*/ _jsx(MenuItem, {

package/dist/DateTimeRangePicker/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick } = props;\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      sx={{\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n        },\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","formattedValue","pastDuration","onChange","IconComponent","sx","marginTop","map","item","idx","display","onClick"],"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,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAc/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAE,GAAGJ,KAAK,AAAC;IACpE,MAAMK,cAAc,GAAG,CAACT,mBAAmB,CAACK,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,CAAC,GAC5CG,KAAK,CAACK,YAAY,AAAC;IACvB,qBACE,MAACZ,MAAM;QACLO,KAAK,EAAEI,cAAc;QACrBE,QAAQ,EAAEJ,cAAc;QACxBK,aAAa,EAAEb,QAAQ;QACvBc,EAAE,EAAE;YACF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;aACjB;SACF;;YAEAR,WAAW,CAACS,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAACpB,QAAQ;oBAAWQ,KAAK,EAAEW,IAAI,CAACX,KAAK,CAACK,YAAY;8BAC/CM,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDjB,mBAAmB,CAACK,KAAK,CAAC,iBACzB,KAACR,QAAQ;gBACPsB,OAAO,EAAE,IAAM;oBACbX,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACX,QAAQ;gBACPQ,KAAK,EAAEI,cAAc;gBACrBU,OAAO,EAAE,IAAM;oBACbX,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAC,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/TimeRangeSelector.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 { MenuItem, Select, SelectChangeEvent } from '@mui/material';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport { TimeRangeValue, RelativeTimeRange, isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { formatAbsoluteRange } from './utils';\n\nconst DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface TimeOption {\n  value: RelativeTimeRange;\n  display: string;\n}\n\ninterface TimeRangeSelectorProps {\n  value: TimeRangeValue;\n  timeOptions: TimeOption[];\n  onSelectChange: (event: SelectChangeEvent<string>) => void;\n  onCustomClick: () => void;\n  height?: string;\n}\n\nexport function TimeRangeSelector(props: TimeRangeSelectorProps) {\n  const { value, timeOptions, onSelectChange, onCustomClick, height } = props;\n  const { timeZone } = useTimeZone();\n  const formattedValue = !isRelativeTimeRange(value)\n    ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone)\n    : value.pastDuration;\n  return (\n    <Select\n      value={formattedValue}\n      onChange={onSelectChange}\n      IconComponent={Calendar}\n      sx={{\n        '.MuiSelect-icon': {\n          marginTop: '1px',\n        },\n        '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n      }}\n    >\n      {timeOptions.map((item, idx) => (\n        <MenuItem key={idx} value={item.value.pastDuration}>\n          {item.display}\n        </MenuItem>\n      ))}\n\n      {isRelativeTimeRange(value) ? (\n        <MenuItem\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          Custom time range\n        </MenuItem>\n      ) : (\n        <MenuItem\n          value={formattedValue}\n          onClick={() => {\n            onCustomClick();\n          }}\n        >\n          {formattedValue}\n        </MenuItem>\n      )}\n    </Select>\n  );\n}\n"],"names":["MenuItem","Select","Calendar","isRelativeTimeRange","useTimeZone","formatAbsoluteRange","DATE_TIME_FORMAT","TimeRangeSelector","props","value","timeOptions","onSelectChange","onCustomClick","height","timeZone","formattedValue","pastDuration","onChange","IconComponent","sx","marginTop","lineHeight","paddingY","map","item","idx","display","onClick"],"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,QAAQ,EAAEC,MAAM,QAA2B,eAAe,CAAC;AACpE,OAAOC,QAAQ,MAAM,0BAA0B,CAAC;AAChD,SAA4CC,mBAAmB,QAAQ,kBAAkB,CAAC;AAC1F,SAASC,WAAW,QAAQ,6BAA6B,CAAC;AAC1D,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAE9C,MAAMC,gBAAgB,GAAG,qBAAqB,AAAC;AAe/C,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,cAAc,CAAA,EAAEC,aAAa,CAAA,EAAEC,MAAM,CAAA,EAAE,GAAGL,KAAK,AAAC;IAC5E,MAAM,EAAEM,QAAQ,CAAA,EAAE,GAAGV,WAAW,EAAE,AAAC;IACnC,MAAMW,cAAc,GAAG,CAACZ,mBAAmB,CAACM,KAAK,CAAC,GAC9CJ,mBAAmB,CAACI,KAAK,EAAEH,gBAAgB,EAAEQ,QAAQ,CAAC,GACtDL,KAAK,CAACO,YAAY,AAAC;IACvB,qBACE,MAACf,MAAM;QACLQ,KAAK,EAAEM,cAAc;QACrBE,QAAQ,EAAEN,cAAc;QACxBO,aAAa,EAAEhB,QAAQ;QACvBiB,EAAE,EAAE;YACF,iBAAiB,EAAE;gBACjBC,SAAS,EAAE,KAAK;aACjB;YACD,mBAAmB,EAAEP,MAAM,GAAG;gBAAEQ,UAAU,EAAER,MAAM;gBAAES,QAAQ,EAAE,CAAC;aAAE,GAAG,EAAE;SACvE;;YAEAZ,WAAW,CAACa,GAAG,CAAC,CAACC,IAAI,EAAEC,GAAG,iBACzB,KAACzB,QAAQ;oBAAWS,KAAK,EAAEe,IAAI,CAACf,KAAK,CAACO,YAAY;8BAC/CQ,IAAI,CAACE,OAAO;mBADAD,GAAG,CAEP,AACZ,CAAC;YAEDtB,mBAAmB,CAACM,KAAK,CAAC,iBACzB,KAACT,QAAQ;gBACP2B,OAAO,EAAE,IAAM;oBACbf,aAAa,EAAE,CAAC;gBAClB,CAAC;0BACF,mBAED;cAAW,iBAEX,KAACZ,QAAQ;gBACPS,KAAK,EAAEM,cAAc;gBACrBY,OAAO,EAAE,IAAM;oBACbf,aAAa,EAAE,CAAC;gBAClB,CAAC;0BAEAG,cAAc;cACN,AACZ;;MACM,CACT;AACJ,CAAC"}

package/dist/DateTimeRangePicker/utils.d.ts

@@ -3,5 +3,5 @@ export declare function validateDateRange(startDate: Date, endDate: Date): boole
 /**
  * Format start and end time based on provided date format
  */
-export declare function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string): string;
+export declare function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string, timeZone?: string): string;
 //# sourceMappingURL=utils.d.ts.map

package/dist/DateTimeRangePicker/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/utils.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAKrD,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,WAW/D;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,UAInF"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/utils.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,WAW/D;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,UAItG"}

package/dist/DateTimeRangePicker/utils.js

@@ -10,7 +10,8 @@
 // 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.
-import { isBefore, isValid, format } from 'date-fns';
+import { isBefore, isValid } from 'date-fns';
+import { formatWithTimeZone } from '../utils';
 /*
  * Date validation and check if end is after start
  */ export function validateDateRange(startDate, endDate) {
@@ -27,9 +28,9 @@ import { isBefore, isValid, format } from 'date-fns';
 }
 /**
  * Format start and end time based on provided date format
- */ export function formatAbsoluteRange(timeRange, dateFormat) {
-    const formattedStart = format(timeRange.start, dateFormat);
-    const formattedEnd = format(timeRange.end, dateFormat);
+ */ export function formatAbsoluteRange(timeRange, dateFormat, timeZone) {
+    const formattedStart = formatWithTimeZone(timeRange.start, dateFormat, timeZone);
+    const formattedEnd = formatWithTimeZone(timeRange.end, dateFormat, timeZone);
     return `${formattedStart} - ${formattedEnd}`;
 }
 

package/dist/DateTimeRangePicker/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DateTimeRangePicker/utils.ts"],"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 { isBefore, isValid, format } from 'date-fns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\n\n/*\n * Date validation and check if end is after start\n */\nexport function validateDateRange(startDate: Date, endDate: Date) {\n  // TODO: display error as helperText\n  if (!isValid(startDate) || !isValid(endDate)) {\n    console.error('Invalid Date');\n    return false;\n  }\n  if (!isBefore(startDate, endDate)) {\n    console.error('End Time is before Start Time');\n    return false;\n  }\n  return true;\n}\n\n/**\n * Format start and end time based on provided date format\n */\nexport function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string) {\n  const formattedStart = format(timeRange.start, dateFormat);\n  const formattedEnd = format(timeRange.end, dateFormat);\n  return `${formattedStart} - ${formattedEnd}`;\n}\n"],"names":["isBefore","isValid","format","validateDateRange","startDate","endDate","console","error","formatAbsoluteRange","timeRange","dateFormat","formattedStart","start","formattedEnd","end"],"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,SAASA,QAAQ,EAAEC,OAAO,EAAEC,MAAM,QAAQ,UAAU,CAAC;AAGrD;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAACC,SAAe,EAAEC,OAAa,EAAE;IAChE,oCAAoC;IACpC,IAAI,CAACJ,OAAO,CAACG,SAAS,CAAC,IAAI,CAACH,OAAO,CAACI,OAAO,CAAC,EAAE;QAC5CC,OAAO,CAACC,KAAK,CAAC,cAAc,CAAC,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,CAACP,QAAQ,CAACI,SAAS,EAAEC,OAAO,CAAC,EAAE;QACjCC,OAAO,CAACC,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC/C,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;CAEC,GACD,OAAO,SAASC,mBAAmB,CAACC,SAA4B,EAAEC,UAAkB,EAAE;IACpF,MAAMC,cAAc,GAAGT,MAAM,CAACO,SAAS,CAACG,KAAK,EAAEF,UAAU,CAAC,AAAC;IAC3D,MAAMG,YAAY,GAAGX,MAAM,CAACO,SAAS,CAACK,GAAG,EAAEJ,UAAU,CAAC,AAAC;IACvD,OAAO,CAAC,EAAEC,cAAc,CAAC,GAAG,EAAEE,YAAY,CAAC,CAAC,CAAC;AAC/C,CAAC"}
+{"version":3,"sources":["../../src/DateTimeRangePicker/utils.ts"],"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 { isBefore, isValid } from 'date-fns';\nimport { AbsoluteTimeRange } from '@perses-dev/core';\nimport { formatWithTimeZone } from '../utils';\n\n/*\n * Date validation and check if end is after start\n */\nexport function validateDateRange(startDate: Date, endDate: Date) {\n  // TODO: display error as helperText\n  if (!isValid(startDate) || !isValid(endDate)) {\n    console.error('Invalid Date');\n    return false;\n  }\n  if (!isBefore(startDate, endDate)) {\n    console.error('End Time is before Start Time');\n    return false;\n  }\n  return true;\n}\n\n/**\n * Format start and end time based on provided date format\n */\nexport function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string, timeZone?: string) {\n  const formattedStart = formatWithTimeZone(timeRange.start, dateFormat, timeZone);\n  const formattedEnd = formatWithTimeZone(timeRange.end, dateFormat, timeZone);\n  return `${formattedStart} - ${formattedEnd}`;\n}\n"],"names":["isBefore","isValid","formatWithTimeZone","validateDateRange","startDate","endDate","console","error","formatAbsoluteRange","timeRange","dateFormat","timeZone","formattedStart","start","formattedEnd","end"],"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,SAASA,QAAQ,EAAEC,OAAO,QAAQ,UAAU,CAAC;AAE7C,SAASC,kBAAkB,QAAQ,UAAU,CAAC;AAE9C;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAACC,SAAe,EAAEC,OAAa,EAAE;IAChE,oCAAoC;IACpC,IAAI,CAACJ,OAAO,CAACG,SAAS,CAAC,IAAI,CAACH,OAAO,CAACI,OAAO,CAAC,EAAE;QAC5CC,OAAO,CAACC,KAAK,CAAC,cAAc,CAAC,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,CAACP,QAAQ,CAACI,SAAS,EAAEC,OAAO,CAAC,EAAE;QACjCC,OAAO,CAACC,KAAK,CAAC,+BAA+B,CAAC,CAAC;QAC/C,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;CAEC,GACD,OAAO,SAASC,mBAAmB,CAACC,SAA4B,EAAEC,UAAkB,EAAEC,QAAiB,EAAE;IACvG,MAAMC,cAAc,GAAGV,kBAAkB,CAACO,SAAS,CAACI,KAAK,EAAEH,UAAU,EAAEC,QAAQ,CAAC,AAAC;IACjF,MAAMG,YAAY,GAAGZ,kBAAkB,CAACO,SAAS,CAACM,GAAG,EAAEL,UAAU,EAAEC,QAAQ,CAAC,AAAC;IAC7E,OAAO,CAAC,EAAEC,cAAc,CAAC,GAAG,EAAEE,YAAY,CAAC,CAAC,CAAC;AAC/C,CAAC"}

package/dist/GaugeChart/GaugeChart.d.ts

@@ -1,15 +1,24 @@
 /// <reference types="react" />
 import { GaugeSeriesOption } from 'echarts/charts';
 import { UnitOptions } from '../model/units';
-export declare type GaugeChartData = number | null | undefined;
+export declare type GaugeChartValue = number | null | undefined;
+export declare type GaugeSeries = {
+    value: GaugeChartValue;
+    label: string;
+};
 interface GaugeChartProps {
     width: number;
     height: number;
-    data: GaugeChartData;
+    data: GaugeSeries;
     unit: UnitOptions;
     axisLine: GaugeSeriesOption['axisLine'];
     max?: number;
 }
 export declare function GaugeChart(props: GaugeChartProps): JSX.Element;
+/**
+ * Responsive font size depending on number of characters, clamp used
+ * to ensure size stays within given range
+ */
+export declare function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number): string;
 export {};
 //# sourceMappingURL=GaugeChart.d.ts.map

package/dist/GaugeChart/GaugeChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAK1D,oBAAY,cAAc,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAEvD,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,cAAc,CAAC;IACrB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eA+HhD"}
+{"version":3,"file":"GaugeChart.d.ts","sourceRoot":"","sources":["../../src/GaugeChart/GaugeChart.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAmC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAIpF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAU1D,oBAAY,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;AAExD,oBAAY,WAAW,GAAG;IACxB,KAAK,EAAE,eAAe,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,UAAU,eAAe;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,WAAW,CAAC;IAClB,IAAI,EAAE,WAAW,CAAC;IAClB,QAAQ,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;IACxC,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkJhD;AAED;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,UAWrG"}

package/dist/GaugeChart/GaugeChart.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from 'react';
+import { useDeepMemo } from '@perses-dev/core';
 import { use } from 'echarts/core';
 import { GaugeChart as EChartsGaugeChart } from 'echarts/charts';
 import { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';
@@ -26,12 +26,19 @@ use([
     TooltipComponent,
     CanvasRenderer
 ]);
+const PROGRESS_WIDTH = 16;
+// adjusts when to show pointer icon
+const GAUGE_SMALL_BREAKPOINT = 170;
 export function GaugeChart(props) {
     const { width , height , data , unit , axisLine , max  } = props;
     const chartsTheme = useChartsTheme();
-    const option = useMemo(()=>{
-        if (data === null || data === undefined) return chartsTheme.noDataOption;
-        const calculatedValue = data;
+    // useDeepMemo ensures value size util does not rerun everytime you hover on the chart
+    const option = useDeepMemo(()=>{
+        var ref;
+        if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;
+        // adjusts fontSize depending on number of characters
+        const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);
+        var ref1;
         return {
             title: {
                 show: false
@@ -54,7 +61,7 @@ export function GaugeChart(props) {
                     silent: true,
                     progress: {
                         show: true,
-                        width: 22,
+                        width: PROGRESS_WIDTH,
                         itemStyle: {
                             color: 'auto'
                         }
@@ -70,7 +77,7 @@ export function GaugeChart(props) {
                                     '#e1e5e9'
                                 ]
                             ],
-                            width: 22
+                            width: PROGRESS_WIDTH
                         }
                     },
                     axisTick: {
@@ -78,7 +85,7 @@ export function GaugeChart(props) {
                         distance: 0
                     },
                     splitLine: {
-                        show: true
+                        show: false
                     },
                     axisLabel: {
                         show: false,
@@ -97,7 +104,7 @@ export function GaugeChart(props) {
                     },
                     data: [
                         {
-                            value: calculatedValue
+                            value: data.value
                         }
                     ]
                 },
@@ -113,7 +120,15 @@ export function GaugeChart(props) {
                     min: 0,
                     max,
                     pointer: {
-                        show: false,
+                        show: true,
+                        // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade
+                        icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',
+                        length: 10,
+                        width: 5,
+                        offsetCenter: [
+                            0,
+                            '-49%'
+                        ],
                         itemStyle: {
                             color: 'auto'
                         }
@@ -137,6 +152,7 @@ export function GaugeChart(props) {
                             '-9%'
                         ],
                         color: 'inherit',
+                        fontSize: valueSizeClamp,
                         formatter: (value)=>{
                             return formatValue(value, {
                                 kind: unit.kind,
@@ -146,7 +162,21 @@ export function GaugeChart(props) {
                     },
                     data: [
                         {
-                            value: calculatedValue
+                            value: data.value,
+                            name: data.label,
+                            // TODO: new UX for series names, create separate React component or reuse ListLegendItem
+                            // https://echarts.apache.org/en/option.html#series-gauge.data.title
+                            title: {
+                                show: true,
+                                color: (ref1 = (ref = chartsTheme.echartsTheme.textStyle) === null || ref === void 0 ? void 0 : ref.color) !== null && ref1 !== void 0 ? ref1 : 'inherit',
+                                offsetCenter: [
+                                    0,
+                                    '55%'
+                                ],
+                                overflow: 'truncate',
+                                fontSize: 12,
+                                width: width * 0.8
+                            }
                         }
                     ]
                 }
@@ -154,6 +184,8 @@ export function GaugeChart(props) {
         };
     }, [
         data,
+        width,
+        height,
         chartsTheme,
         unit,
         axisLine,
@@ -168,5 +200,21 @@ export function GaugeChart(props) {
         theme: chartsTheme.echartsTheme
     });
 }
+/**
+ * Responsive font size depending on number of characters, clamp used
+ * to ensure size stays within given range
+ */ export function getResponsiveValueSize(value, unit, width, height) {
+    const MIN_SIZE = 3;
+    const MAX_SIZE = 24;
+    const SIZE_MULTIPLIER = 0.7;
+    const formattedValue = formatValue(value, {
+        kind: unit.kind,
+        decimal_places: 0
+    });
+    var _length;
+    const valueCharacters = (_length = formattedValue.length) !== null && _length !== void 0 ? _length : 2;
+    const valueSize = Math.min(width, height) / valueCharacters * SIZE_MULTIPLIER;
+    return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;
+}
 
 //# sourceMappingURL=GaugeChart.js.map

package/dist/GaugeChart/GaugeChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GaugeChart/GaugeChart.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 { useMemo } from 'react';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nexport type GaugeChartData = number | null | undefined;\n\ninterface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeChartData;\n  unit: UnitOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, unit, axisLine, max } = props;\n\n  const chartsTheme = useChartsTheme();\n\n  const option: EChartsCoreOption = useMemo(() => {\n    if (data === null || data === undefined) return chartsTheme.noDataOption;\n\n    const calculatedValue = data;\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: 22,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: 22,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: true,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: calculatedValue,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: false,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit',\n            formatter: (value: number) => {\n              return formatValue(value, {\n                kind: unit.kind,\n                decimal_places: 0,\n              });\n            },\n          },\n          data: [\n            {\n              value: calculatedValue,\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, chartsTheme, unit, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n"],"names":["useMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","props","width","height","data","unit","axisLine","max","chartsTheme","option","undefined","noDataOption","calculatedValue","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","value","borderRadius","offsetCenter","formatter","kind","decimal_places","sx","theme","echartsTheme"],"mappings":"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"}
+{"version":3,"sources":["../../src/GaugeChart/GaugeChart.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 { useDeepMemo } from '@perses-dev/core';\nimport { use, EChartsCoreOption } from 'echarts/core';\nimport { GaugeChart as EChartsGaugeChart, GaugeSeriesOption } from 'echarts/charts';\nimport { GridComponent, TitleComponent, TooltipComponent } from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport { useChartsTheme } from '../context/ChartsThemeProvider';\nimport { formatValue, UnitOptions } from '../model/units';\nimport { EChart } from '../EChart';\n\nuse([EChartsGaugeChart, GridComponent, TitleComponent, TooltipComponent, CanvasRenderer]);\n\nconst PROGRESS_WIDTH = 16;\n\n// adjusts when to show pointer icon\nconst GAUGE_SMALL_BREAKPOINT = 170;\n\nexport type GaugeChartValue = number | null | undefined;\n\nexport type GaugeSeries = {\n  value: GaugeChartValue;\n  label: string;\n};\n\ninterface GaugeChartProps {\n  width: number;\n  height: number;\n  data: GaugeSeries;\n  unit: UnitOptions;\n  axisLine: GaugeSeriesOption['axisLine'];\n  max?: number;\n}\n\nexport function GaugeChart(props: GaugeChartProps) {\n  const { width, height, data, unit, axisLine, max } = props;\n  const chartsTheme = useChartsTheme();\n\n  // useDeepMemo ensures value size util does not rerun everytime you hover on the chart\n  const option: EChartsCoreOption = useDeepMemo(() => {\n    if (data.value === undefined || data.value === null) return chartsTheme.noDataOption;\n\n    // adjusts fontSize depending on number of characters\n    const valueSizeClamp = getResponsiveValueSize(data.value, unit, width, height);\n\n    return {\n      title: {\n        show: false,\n      },\n      tooltip: {\n        show: false,\n      },\n      series: [\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '86%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          silent: true,\n          progress: {\n            show: true,\n            width: PROGRESS_WIDTH,\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          pointer: {\n            show: false,\n          },\n          axisLine: {\n            lineStyle: {\n              color: [[1, '#e1e5e9']], // TODO (sjcobb): use future chart theme colors\n              width: PROGRESS_WIDTH,\n            },\n          },\n          axisTick: {\n            show: false,\n            distance: 0,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n            distance: -18,\n            color: '#999',\n            fontSize: 12,\n          },\n          anchor: {\n            show: false,\n          },\n          title: {\n            show: false,\n          },\n          detail: {\n            show: false,\n          },\n          data: [\n            {\n              value: data.value,\n            },\n          ],\n        },\n        {\n          type: 'gauge',\n          center: ['50%', '65%'],\n          radius: '100%',\n          startAngle: 200,\n          endAngle: -20,\n          min: 0,\n          max,\n          pointer: {\n            show: true,\n            // pointer hidden for small panels, path taken from ex: https://echarts.apache.org/examples/en/editor.html?c=gauge-grade\n            icon: width > GAUGE_SMALL_BREAKPOINT ? 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z' : 'none',\n            length: 10,\n            width: 5,\n            offsetCenter: [0, '-49%'],\n            itemStyle: {\n              color: 'auto',\n            },\n          },\n          axisLine,\n          axisTick: {\n            show: false,\n          },\n          splitLine: {\n            show: false,\n          },\n          axisLabel: {\n            show: false,\n          },\n          detail: {\n            show: true,\n            width: '60%',\n            borderRadius: 8,\n            offsetCenter: [0, '-9%'],\n            color: 'inherit', // allows value color to match active threshold color\n            fontSize: valueSizeClamp,\n            formatter: (value: number) => {\n              return formatValue(value, {\n                kind: unit.kind,\n                decimal_places: 0,\n              });\n            },\n          },\n          data: [\n            {\n              value: data.value,\n              name: data.label,\n              // TODO: new UX for series names, create separate React component or reuse ListLegendItem\n              // https://echarts.apache.org/en/option.html#series-gauge.data.title\n              title: {\n                show: true,\n                color: chartsTheme.echartsTheme.textStyle?.color ?? 'inherit', // series name font color\n                offsetCenter: [0, '55%'],\n                overflow: 'truncate',\n                fontSize: 12,\n                width: width * 0.8,\n              },\n            },\n          ],\n        },\n      ],\n    };\n  }, [data, width, height, chartsTheme, unit, axisLine, max]);\n\n  return (\n    <EChart\n      sx={{\n        width: width,\n        height: height,\n      }}\n      option={option}\n      theme={chartsTheme.echartsTheme}\n    />\n  );\n}\n\n/**\n * Responsive font size depending on number of characters, clamp used\n * to ensure size stays within given range\n */\nexport function getResponsiveValueSize(value: number, unit: UnitOptions, width: number, height: number) {\n  const MIN_SIZE = 3;\n  const MAX_SIZE = 24;\n  const SIZE_MULTIPLIER = 0.7;\n  const formattedValue = formatValue(value, {\n    kind: unit.kind,\n    decimal_places: 0,\n  });\n  const valueCharacters = formattedValue.length ?? 2;\n  const valueSize = (Math.min(width, height) / valueCharacters) * SIZE_MULTIPLIER;\n  return `clamp(${MIN_SIZE}px, ${valueSize}px, ${MAX_SIZE}px)`;\n}\n"],"names":["useDeepMemo","use","GaugeChart","EChartsGaugeChart","GridComponent","TitleComponent","TooltipComponent","CanvasRenderer","useChartsTheme","formatValue","EChart","PROGRESS_WIDTH","GAUGE_SMALL_BREAKPOINT","props","width","height","data","unit","axisLine","max","chartsTheme","option","value","undefined","noDataOption","valueSizeClamp","getResponsiveValueSize","title","show","tooltip","series","type","center","radius","startAngle","endAngle","min","silent","progress","itemStyle","color","pointer","lineStyle","axisTick","distance","splitLine","axisLabel","fontSize","anchor","detail","icon","length","offsetCenter","borderRadius","formatter","kind","decimal_places","name","label","echartsTheme","textStyle","overflow","sx","theme","MIN_SIZE","MAX_SIZE","SIZE_MULTIPLIER","formattedValue","valueCharacters","valueSize","Math"],"mappings":"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"}

package/dist/InfoTooltip/InfoTooltip.d.ts

@@ -11,7 +11,9 @@ interface InfoTooltipProps {
     id?: string;
     title?: string;
     placement?: TooltipPlacement;
+    enterDelay?: number;
+    enterNextDelay?: number;
 }
-export declare const InfoTooltip: ({ id, title, description, placement, children }: InfoTooltipProps) => JSX.Element;
+export declare const InfoTooltip: ({ id, title, description, placement, children, enterDelay, enterNextDelay, }: InfoTooltipProps) => JSX.Element;
 export {};
 //# sourceMappingURL=InfoTooltip.d.ts.map

package/dist/InfoTooltip/InfoTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,eAAO,MAAM,WAAW,oDAAqD,gBAAgB,gBAW5F,CAAC"}
+{"version":3,"file":"InfoTooltip.d.ts","sourceRoot":"","sources":["../../src/InfoTooltip/InfoTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;CAClB;AAED,UAAU,gBAAgB;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,iFAQrB,gBAAgB,gBAalB,CAAC"}

package/dist/InfoTooltip/InfoTooltip.js

@@ -20,15 +20,17 @@ export var TooltipPlacement;
     TooltipPlacement["Right"] = 'right';
     TooltipPlacement["Bottom"] = 'bottom';
 })(TooltipPlacement || (TooltipPlacement = {}));
-export const InfoTooltip = ({ id , title , description , placement , children  })=>{
+export const InfoTooltip = ({ id , title , description , placement , children , enterDelay , enterNextDelay  })=>{
     return /*#__PURE__*/ _jsx(StyledTooltip, {
         arrow: true,
         id: id,
-        placement: placement,
+        placement: placement !== null && placement !== void 0 ? placement : TooltipPlacement.Top,
         title: /*#__PURE__*/ _jsx(TooltipContent, {
             title: title,
             description: description
         }),
+        enterDelay: enterDelay !== null && enterDelay !== void 0 ? enterDelay : 500,
+        enterNextDelay: enterNextDelay !== null && enterNextDelay !== void 0 ? enterNextDelay : 500,
         children: /*#__PURE__*/ _jsx("div", {
             children: children
         })

package/dist/InfoTooltip/InfoTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 React from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport enum TooltipPlacement {\n  Top = 'top',\n  Left = 'left',\n  Right = 'right',\n  Bottom = 'bottom',\n}\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n}\n\nexport const InfoTooltip = ({ id, title, description, placement, children }: InfoTooltipProps) => {\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement}\n      title={<TooltipContent title={title} description={description} />}\n    >\n      <div>{children}</div>\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","TooltipPlacement","Top","Left","Right","Bottom","InfoTooltip","id","title","description","placement","children","StyledTooltip","arrow","TooltipContent","div","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"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,OAAOA,KAAK,MAAM,OAAO,CAAC;AAC1B,SACEC,MAAM,EAENC,OAAO,IAAIC,UAAU,EACrBC,cAAc,EACdC,UAAU,QACL,eAAe,CAAC;WAEhB,gBAKN;UALWC,gBAAgB;IAAhBA,gBAAgB,CAC1BC,KAAG,IAAG,KAAK;IADDD,gBAAgB,CAE1BE,MAAI,IAAG,MAAM;IAFHF,gBAAgB,CAG1BG,OAAK,IAAG,OAAO;IAHLH,gBAAgB,CAI1BI,QAAM,IAAG,QAAQ;GAJPJ,gBAAgB,KAAhBA,gBAAgB;AAe5B,OAAO,MAAMK,WAAW,GAAG,CAAC,EAAEC,EAAE,CAAA,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAEC,QAAQ,CAAA,EAAoB,GAAK;IAChG,qBACE,KAACC,aAAa;QACZC,KAAK;QACLN,EAAE,EAAEA,EAAE;QACNG,SAAS,EAAEA,SAAS;QACpBF,KAAK,gBAAE,KAACM,cAAc;YAACN,KAAK,EAAEA,KAAK;YAAEC,WAAW,EAAEA,WAAW;UAAI;kBAEjE,cAAA,KAACM,KAAG;sBAAEJ,QAAQ;UAAO;MACP,CAChB;AACJ,CAAC,CAAC;AAEF,MAAMG,cAAc,GAAG,CAAC,EAAEN,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAmD,GAAK;IAClG,qBACE;;YACGD,KAAK,kBACJ,KAACR,UAAU;gBACTgB,OAAO,EAAC,OAAO;gBACfC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;wBACjCC,UAAU,EAAEL,KAAK,CAACM,UAAU,CAACC,gBAAgB;qBAC9C,CAAA,AAAC;0BAEDjB,KAAK;cACK,AACd;0BACD,KAACR,UAAU;gBACTgB,OAAO,EAAC,SAAS;gBACjBC,EAAE,EAAE,CAACC,KAAK,GAAM,CAAA;wBACdC,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;qBAClC,CAAA,AAAC;0BAEDb,WAAW;cACD;;MACZ,CACH;AACJ,CAAC,AAAC;AAEF,MAAMG,aAAa,GAAGhB,MAAM,CAAC,CAAC,EAAE8B,SAAS,CAAA,EAAE,GAAGC,KAAK,EAAmB,iBACpE,KAAC7B,UAAU;QAAE,GAAG6B,KAAK;QAAEC,OAAO,EAAE;YAAEC,MAAM,EAAEH,SAAS;SAAE;MAAI,AAC1D,CAAC,CAAC,CAAC,EAAER,KAAK,CAAA,EAAE,GAAM,CAAA;QACjB,CAAC,CAAC,GAAG,EAAEnB,cAAc,CAAC+B,OAAO,CAAC,CAAC,CAAC,EAAE;YAChCC,eAAe,EAAEb,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;YACjDX,KAAK,EAAED,KAAK,CAACE,OAAO,CAACC,IAAI,CAACC,OAAO;YACjCW,QAAQ,EAAE,OAAO;YACjBC,OAAO,EAAEhB,KAAK,CAACiB,OAAO,CAAC,CAAC,CAAC;YACzBC,SAAS,EAAElB,KAAK,CAACmB,OAAO,CAAC,CAAC,CAAC;SAC5B;QACD,CAAC,CAAC,GAAG,EAAEtC,cAAc,CAACc,KAAK,CAAC,CAAC,CAAC,EAAE;YAC9BM,KAAK,EAAED,KAAK,CAACE,OAAO,CAACY,UAAU,CAACF,OAAO;SACxC;KACF,CAAA,AAAC,CAAC,AAAC"}
+{"version":3,"sources":["../../src/InfoTooltip/InfoTooltip.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 React from 'react';\nimport {\n  styled,\n  TooltipProps as MuiTooltipProps,\n  Tooltip as MuiTooltip,\n  tooltipClasses,\n  Typography,\n} from '@mui/material';\n\nexport enum TooltipPlacement {\n  Top = 'top',\n  Left = 'left',\n  Right = 'right',\n  Bottom = 'bottom',\n}\n\ninterface InfoTooltipProps {\n  description: string;\n  children: React.ReactNode;\n  id?: string;\n  title?: string;\n  placement?: TooltipPlacement;\n  enterDelay?: number; // default is 500ms\n  enterNextDelay?: number; // default is 500ms\n}\n\nexport const InfoTooltip = ({\n  id,\n  title,\n  description,\n  placement,\n  children,\n  enterDelay,\n  enterNextDelay,\n}: InfoTooltipProps) => {\n  return (\n    <StyledTooltip\n      arrow\n      id={id}\n      placement={placement ?? TooltipPlacement.Top}\n      title={<TooltipContent title={title} description={description} />}\n      enterDelay={enterDelay ?? 500}\n      enterNextDelay={enterNextDelay ?? 500}\n    >\n      <div>{children}</div>\n    </StyledTooltip>\n  );\n};\n\nconst TooltipContent = ({ title, description }: Pick<InfoTooltipProps, 'title' | 'description'>) => {\n  return (\n    <>\n      {title && (\n        <Typography\n          variant=\"body2\"\n          sx={(theme) => ({\n            color: theme.palette.text.primary,\n            fontWeight: theme.typography.fontWeightMedium,\n          })}\n        >\n          {title}\n        </Typography>\n      )}\n      <Typography\n        variant=\"caption\"\n        sx={(theme) => ({\n          color: theme.palette.text.primary,\n        })}\n      >\n        {description}\n      </Typography>\n    </>\n  );\n};\n\nconst StyledTooltip = styled(({ className, ...props }: MuiTooltipProps) => (\n  <MuiTooltip {...props} classes={{ popper: className }} />\n))(({ theme }) => ({\n  [`& .${tooltipClasses.tooltip}`]: {\n    backgroundColor: theme.palette.background.tooltip,\n    color: theme.palette.text.primary,\n    maxWidth: '300px',\n    padding: theme.spacing(1),\n    boxShadow: theme.shadows[1],\n  },\n  [`& .${tooltipClasses.arrow}`]: {\n    color: theme.palette.background.tooltip,\n  },\n}));\n"],"names":["React","styled","Tooltip","MuiTooltip","tooltipClasses","Typography","TooltipPlacement","Top","Left","Right","Bottom","InfoTooltip","id","title","description","placement","children","enterDelay","enterNextDelay","StyledTooltip","arrow","TooltipContent","div","variant","sx","theme","color","palette","text","primary","fontWeight","typography","fontWeightMedium","className","props","classes","popper","tooltip","backgroundColor","background","maxWidth","padding","spacing","boxShadow","shadows"],"mappings":"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"}