@perses-dev/components 0.14.0 → 0.16.0

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

@@ -0,0 +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"}

package/dist/{TimeRangeSelector → DateTimeRangePicker}/AbsoluteTimePicker.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Box, Stack, TextField, Divider } from '@mui/material';
+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';
@@ -53,10 +53,10 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
     return /*#__PURE__*/ _jsx(LocalizationProvider, {
         dateAdapter: AdapterDateFns,
         children: /*#__PURE__*/ _jsxs(Stack, {
-            spacing: 3,
-            sx: {
-                padding: (theme)=>theme.spacing(1, 2, 3)
-            },
+            spacing: 2,
+            sx: (theme)=>({
+                    padding: theme.spacing(1, 0, 2)
+                }),
             children: [
                 showStartCalendar && /*#__PURE__*/ _jsxs(Box, {
                     sx: (theme)=>({
@@ -72,7 +72,9 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                             }
                         }),
                     children: [
-                        /*#__PURE__*/ _jsx("h3", {
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h3",
+                            padding: 1,
                             children: "Select Start Time"
                         }),
                         /*#__PURE__*/ _jsx(StaticDateTimePicker, {
@@ -111,7 +113,9 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                             }
                         }),
                     children: [
-                        /*#__PURE__*/ _jsx("h3", {
+                        /*#__PURE__*/ _jsx(Typography, {
+                            variant: "h3",
+                            padding: 1,
                             children: "Select End Time"
                         }),
                         /*#__PURE__*/ _jsx(StaticDateTimePicker, {
@@ -139,33 +143,34 @@ export const AbsoluteTimePicker = ({ initialTimeRange , onChange  })=>{
                         })
                     ]
                 }),
-                /*#__PURE__*/ _jsx(TextField, {
-                    fullWidth: true,
-                    onChange: (event)=>{
-                        // TODO: add helperText, fix validation after we decide on form state solution
-                        updateDateRange(event.target.value, true);
-                    },
-                    value: format(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
-                    type: "tel"
-                }),
-                /*#__PURE__*/ _jsx(Divider, {
-                    sx: (theme)=>({
-                            margin: theme.spacing(2, 0),
-                            borderColor: theme.palette.grey['500']
+                /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    alignItems: "center",
+                    gap: 1,
+                    pl: 1,
+                    pr: 1,
+                    children: [
+                        /*#__PURE__*/ _jsx(TextField, {
+                            onChange: (event)=>{
+                                // TODO: add helperText, fix validation after we decide on form state solution
+                                updateDateRange(event.target.value, true);
+                            },
+                            value: format(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
+                            type: "tel"
+                        }),
+                        /*#__PURE__*/ _jsx(TextField, {
+                            onChange: (event)=>{
+                                updateDateRange(event.target.value, false);
+                            },
+                            value: format(timeRange.end, DATE_TIME_FORMAT),
+                            label: "End Time",
+                            placeholder: "mm/dd/yyyy hh:mm",
+                            type: "tel"
                         })
-                }),
-                /*#__PURE__*/ _jsx(TextField, {
-                    fullWidth: true,
-                    onChange: (event)=>{
-                        updateDateRange(event.target.value, false);
-                    },
-                    value: format(timeRange.end, DATE_TIME_FORMAT),
-                    label: "End Time",
-                    placeholder: "mm/dd/yyyy hh:mm",
-                    type: "tel"
+                    ]
                 })
             ]
         })

package/dist/DateTimeRangePicker/AbsoluteTimePicker.js.map

@@ -0,0 +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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"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TimeRangeValue } from '@perses-dev/core';
+import { TimeOption } from './TimeRangeSelector';
+interface DateTimeRangePickerProps {
+    value: TimeRangeValue;
+    onChange: (value: TimeRangeValue) => void;
+    timeOptions: TimeOption[];
+}
+export declare function DateTimeRangePicker(props: DateTimeRangePickerProps): JSX.Element;
+export {};
+//# sourceMappingURL=DateTimeRangePicker.d.ts.map

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

@@ -0,0 +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"}

package/dist/DateTimeRangePicker/DateTimeRangePicker.js

@@ -0,0 +1,77 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useMemo } from 'react';
+import { Box, FormControl, Popover, Stack } from '@mui/material';
+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 [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
+    const anchorEl = useRef();
+    const convertedTimeRange = useMemo(()=>{
+        return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        children: [
+            /*#__PURE__*/ _jsx(Popover, {
+                anchorEl: anchorEl.current,
+                anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'center'
+                },
+                open: showCustomDateSelector,
+                onClose: ()=>setShowCustomDateSelector(false),
+                sx: (theme)=>({
+                        padding: theme.spacing(2)
+                    }),
+                children: /*#__PURE__*/ _jsx(AbsoluteTimePicker, {
+                    initialTimeRange: convertedTimeRange,
+                    onChange: (value)=>{
+                        onChange(value);
+                        setShowCustomDateSelector(false);
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx(FormControl, {
+                fullWidth: true,
+                children: /*#__PURE__*/ _jsx(Box, {
+                    ref: anchorEl,
+                    children: /*#__PURE__*/ _jsx(TimeRangeSelector, {
+                        timeOptions: timeOptions,
+                        value: value,
+                        onSelectChange: (event)=>{
+                            const duration = event.target.value;
+                            const relativeTimeInput = {
+                                pastDuration: duration,
+                                end: new Date()
+                            };
+                            onChange(relativeTimeInput);
+                            setShowCustomDateSelector(false);
+                        },
+                        onCustomClick: ()=>{
+                            setShowCustomDateSelector(true);
+                        }
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=DateTimeRangePicker.js.map

package/dist/DateTimeRangePicker/DateTimeRangePicker.js.map

@@ -0,0 +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"}

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

@@ -0,0 +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"}

package/dist/DateTimeRangePicker/TimeRangeSelector.js.map

@@ -0,0 +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"}

package/dist/{TimeRangeSelector → DateTimeRangePicker}/index.d.ts

@@ -1,3 +1,4 @@
+export * from './DateTimeRangePicker';
 export * from './TimeRangeSelector';
 export * from './AbsoluteTimePicker';
 //# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateTimeRangePicker/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

package/dist/{TimeRangeSelector → DateTimeRangePicker}/index.js

@@ -10,6 +10,7 @@
 // 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 './DateTimeRangePicker';
 export * from './TimeRangeSelector';
 export * from './AbsoluteTimePicker';
 

package/dist/DateTimeRangePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/DateTimeRangePicker/index.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\nexport * from './DateTimeRangePicker';\nexport * from './TimeRangeSelector';\nexport * from './AbsoluteTimePicker';\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,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC"}

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

@@ -0,0 +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"}

package/dist/DateTimeRangePicker/utils.js.map

@@ -0,0 +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"}

package/dist/Legend/CompactLegend.d.ts

@@ -1,8 +1,13 @@
 /// <reference types="react" />
 import { LegendItem } from '../model';
 interface CompactLegendProps {
+    height: number;
     items: LegendItem[];
 }
-export declare function CompactLegend({ items }: CompactLegendProps): JSX.Element;
+/**
+ * CompactLegend is default and used when legend items need to show side by side
+ * which corresponds to when legend.position is `bottom`
+ */
+export declare function CompactLegend({ height, items }: CompactLegendProps): JSX.Element;
 export {};
 //# sourceMappingURL=CompactLegend.d.ts.map

package/dist/Legend/CompactLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,kBAAkB;IAC1B,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,EAAE,kBAAkB,eAQ1D"}
+{"version":3,"file":"CompactLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/CompactLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,kBAAkB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,kBAAkB,eAgBlE"}

package/dist/Legend/CompactLegend.js

@@ -11,17 +11,26 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Stack } from '@mui/material';
+import { Box } from '@mui/material';
 import { ListLegendItem } from './ListLegendItem';
-export function CompactLegend({ items  }) {
-    return /*#__PURE__*/ _jsx(Stack, {
-        direction: "row",
-        spacing: 2,
+/**
+ * CompactLegend is default and used when legend items need to show side by side
+ * which corresponds to when legend.position is `bottom`
+ */ export function CompactLegend({ height , items  }) {
+    return /*#__PURE__*/ _jsx(Box, {
         sx: {
-            flexWrap: 'wrap'
+            width: '100%',
+            height,
+            paddingTop: 1,
+            overflowY: 'scroll'
         },
         children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
-                item: item
+                item: item,
+                sx: {
+                    width: 'auto',
+                    float: 'left',
+                    paddingRight: 1.5
+                }
             }, item.id))
     });
 }

package/dist/Legend/CompactLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/CompactLegend.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 { Stack } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  items: LegendItem[];\n}\n\nexport function CompactLegend({ items }: CompactLegendProps) {\n  return (\n    <Stack direction=\"row\" spacing={2} sx={{ flexWrap: 'wrap' }}>\n      {items.map((item) => (\n        <ListLegendItem key={item.id} item={item} />\n      ))}\n    </Stack>\n  );\n}\n"],"names":["Stack","ListLegendItem","CompactLegend","items","direction","spacing","sx","flexWrap","map","item","id"],"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,KAAK,QAAQ,eAAe,CAAC;AAEtC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAMlD,OAAO,SAASC,aAAa,CAAC,EAAEC,KAAK,CAAA,EAAsB,EAAE;IAC3D,qBACE,KAACH,KAAK;QAACI,SAAS,EAAC,KAAK;QAACC,OAAO,EAAE,CAAC;QAAEC,EAAE,EAAE;YAAEC,QAAQ,EAAE,MAAM;SAAE;kBACxDJ,KAAK,CAACK,GAAG,CAAC,CAACC,IAAI,iBACd,KAACR,cAAc;gBAAeQ,IAAI,EAAEA,IAAI;eAAnBA,IAAI,CAACC,EAAE,CAAgB,AAC7C,CAAC;MACI,CACR;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/CompactLegend.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface CompactLegendProps {\n  height: number;\n  items: LegendItem[];\n}\n\n/**\n * CompactLegend is default and used when legend items need to show side by side\n * which corresponds to when legend.position is `bottom`\n */\nexport function CompactLegend({ height, items }: CompactLegendProps) {\n  return (\n    <Box sx={{ width: '100%', height, paddingTop: 1, overflowY: 'scroll' }}>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 'auto',\n            float: 'left',\n            paddingRight: 1.5,\n          }}\n        />\n      ))}\n    </Box>\n  );\n}\n"],"names":["Box","ListLegendItem","CompactLegend","height","items","sx","width","paddingTop","overflowY","map","item","float","paddingRight","id"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAOlD;;;CAGC,GACD,OAAO,SAASC,aAAa,CAAC,EAAEC,MAAM,CAAA,EAAEC,KAAK,CAAA,EAAsB,EAAE;IACnE,qBACE,KAACJ,GAAG;QAACK,EAAE,EAAE;YAAEC,KAAK,EAAE,MAAM;YAAEH,MAAM;YAAEI,UAAU,EAAE,CAAC;YAAEC,SAAS,EAAE,QAAQ;SAAE;kBACnEJ,KAAK,CAACK,GAAG,CAAC,CAACC,IAAI,iBACd,KAACT,cAAc;gBAEbS,IAAI,EAAEA,IAAI;gBACVL,EAAE,EAAE;oBACFC,KAAK,EAAE,MAAM;oBACbK,KAAK,EAAE,MAAM;oBACbC,YAAY,EAAE,GAAG;iBAClB;eANIF,IAAI,CAACG,EAAE,CAOZ,AACH,CAAC;MACE,CACN;AACJ,CAAC"}

package/dist/Legend/Legend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAIrD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAW,eAsBnE"}
+{"version":3,"file":"Legend.d.ts","sourceRoot":"","sources":["../../src/Legend/Legend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAIrD,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,OAAO,EAAE,aAAa,CAAC;CACxB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,WAAW,eAmBnE"}

package/dist/Legend/Legend.js

@@ -19,7 +19,7 @@ export function Legend({ width , height , options , data  }) {
         return /*#__PURE__*/ _jsx(Box, {
             sx: {
                 width: width,
-                height: height,
+                height: '100%',
                 position: 'absolute',
                 top: 0,
                 right: 0,
@@ -30,14 +30,9 @@ export function Legend({ width , height , options , data  }) {
             })
         });
     }
-    return /*#__PURE__*/ _jsx(Box, {
-        sx: {
-            height: 50,
-            overflowY: 'scroll'
-        },
-        children: /*#__PURE__*/ _jsx(CompactLegend, {
-            items: data
-        })
+    return /*#__PURE__*/ _jsx(CompactLegend, {
+        items: data,
+        height: height
     });
 }
 

package/dist/Legend/Legend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { LegendOptions, LegendItem } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\ninterface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n}\n\nexport function Legend({ width, height, options, data }: LegendProps) {\n  if (options.position === 'right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: height,\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          overflowY: 'scroll',\n        }}\n      >\n        <ListLegend items={data} />\n      </Box>\n    );\n  }\n  return (\n    <Box sx={{ height: 50, overflowY: 'scroll' }}>\n      <CompactLegend items={data} />\n    </Box>\n  );\n}\n"],"names":["Box","ListLegend","CompactLegend","Legend","width","height","options","data","position","sx","top","right","overflowY","items"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAC1C,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAShD,OAAO,SAASC,MAAM,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAe,EAAE;IACpE,IAAID,OAAO,CAACE,QAAQ,KAAK,OAAO,EAAE;QAChC,qBACE,KAACR,GAAG;YACFS,EAAE,EAAE;gBACFL,KAAK,EAAEA,KAAK;gBACZC,MAAM,EAAEA,MAAM;gBACdG,QAAQ,EAAE,UAAU;gBACpBE,GAAG,EAAE,CAAC;gBACNC,KAAK,EAAE,CAAC;gBACRC,SAAS,EAAE,QAAQ;aACpB;sBAED,cAAA,KAACX,UAAU;gBAACY,KAAK,EAAEN,IAAI;cAAI;UACvB,CACN;IACJ,CAAC;IACD,qBACE,KAACP,GAAG;QAACS,EAAE,EAAE;YAAEJ,MAAM,EAAE,EAAE;YAAEO,SAAS,EAAE,QAAQ;SAAE;kBAC1C,cAAA,KAACV,aAAa;YAACW,KAAK,EAAEN,IAAI;UAAI;MAC1B,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/Legend.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { LegendOptions, LegendItem } from '../model';\nimport { ListLegend } from './ListLegend';\nimport { CompactLegend } from './CompactLegend';\n\ninterface LegendProps {\n  width: number;\n  height: number;\n  data: LegendItem[];\n  options: LegendOptions;\n}\n\nexport function Legend({ width, height, options, data }: LegendProps) {\n  if (options.position === 'right') {\n    return (\n      <Box\n        sx={{\n          width: width,\n          height: '100%',\n          position: 'absolute',\n          top: 0,\n          right: 0,\n          overflowY: 'scroll',\n        }}\n      >\n        <ListLegend items={data} />\n      </Box>\n    );\n  }\n\n  return <CompactLegend items={data} height={height} />;\n}\n"],"names":["Box","ListLegend","CompactLegend","Legend","width","height","options","data","position","sx","top","right","overflowY","items"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAQ,eAAe,CAAC;AAEpC,SAASC,UAAU,QAAQ,cAAc,CAAC;AAC1C,SAASC,aAAa,QAAQ,iBAAiB,CAAC;AAShD,OAAO,SAASC,MAAM,CAAC,EAAEC,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAEC,OAAO,CAAA,EAAEC,IAAI,CAAA,EAAe,EAAE;IACpE,IAAID,OAAO,CAACE,QAAQ,KAAK,OAAO,EAAE;QAChC,qBACE,KAACR,GAAG;YACFS,EAAE,EAAE;gBACFL,KAAK,EAAEA,KAAK;gBACZC,MAAM,EAAE,MAAM;gBACdG,QAAQ,EAAE,UAAU;gBACpBE,GAAG,EAAE,CAAC;gBACNC,KAAK,EAAE,CAAC;gBACRC,SAAS,EAAE,QAAQ;aACpB;sBAED,cAAA,KAACX,UAAU;gBAACY,KAAK,EAAEN,IAAI;cAAI;UACvB,CACN;IACJ,CAAC;IAED,qBAAO,KAACL,aAAa;QAACW,KAAK,EAAEN,IAAI;QAAEF,MAAM,EAAEA,MAAM;MAAI,CAAC;AACxD,CAAC"}

package/dist/Legend/ListLegend.d.ts

@@ -3,6 +3,9 @@ import { LegendItem } from '../model';
 interface ListLegendProps {
     items: LegendItem[];
 }
+/**
+ * ListLegend is used when legend.position is 'right' since legend items are stacked
+ */
 export declare function ListLegend({ items }: ListLegendProps): JSX.Element;
 export {};
 //# sourceMappingURL=ListLegend.d.ts.map

package/dist/Legend/ListLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,eAAe;IACvB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,eAQpD"}
+{"version":3,"file":"ListLegend.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegend.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,eAAe;IACvB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE,eAAe,eAyBpD"}

package/dist/Legend/ListLegend.js

@@ -13,10 +13,26 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { List } from '@mui/material';
 import { ListLegendItem } from './ListLegendItem';
-export function ListLegend({ items  }) {
+/**
+ * ListLegend is used when legend.position is 'right' since legend items are stacked
+ */ export function ListLegend({ items  }) {
+    // show full labels on hover when there are many total series
+    const truncateLabels = items.length > 5;
     return /*#__PURE__*/ _jsx(List, {
         children: items.map((item)=>/*#__PURE__*/ _jsx(ListLegendItem, {
-                item: item
+                item: item,
+                sx: {
+                    width: 190,
+                    textOverflow: 'ellipsis',
+                    wordBreak: 'break-word',
+                    overflow: truncateLabels ? 'hidden' : 'visible',
+                    whiteSpace: truncateLabels ? 'nowrap' : 'normal',
+                    // TODO: add optional hover effect to show unformatted label
+                    '&:hover': {
+                        overflow: 'visible',
+                        whiteSpace: 'normal'
+                    }
+                }
             }, item.id))
     });
 }

package/dist/Legend/ListLegend.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegend.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 { List } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface ListLegendProps {\n  items: LegendItem[];\n}\n\nexport function ListLegend({ items }: ListLegendProps) {\n  return (\n    <List>\n      {items.map((item) => (\n        <ListLegendItem key={item.id} item={item} />\n      ))}\n    </List>\n  );\n}\n"],"names":["List","ListLegendItem","ListLegend","items","map","item","id"],"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,IAAI,QAAQ,eAAe,CAAC;AAErC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAMlD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAmB,EAAE;IACrD,qBACE,KAACH,IAAI;kBACFG,KAAK,CAACC,GAAG,CAAC,CAACC,IAAI,iBACd,KAACJ,cAAc;gBAAeI,IAAI,EAAEA,IAAI;eAAnBA,IAAI,CAACC,EAAE,CAAgB,AAC7C,CAAC;MACG,CACP;AACJ,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegend.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 { List } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { ListLegendItem } from './ListLegendItem';\n\ninterface ListLegendProps {\n  items: LegendItem[];\n}\n\n/**\n * ListLegend is used when legend.position is 'right' since legend items are stacked\n */\nexport function ListLegend({ items }: ListLegendProps) {\n  // show full labels on hover when there are many total series\n  const truncateLabels = items.length > 5;\n  return (\n    <List>\n      {items.map((item) => (\n        <ListLegendItem\n          key={item.id}\n          item={item}\n          sx={{\n            width: 190,\n            textOverflow: 'ellipsis',\n            wordBreak: 'break-word',\n            overflow: truncateLabels ? 'hidden' : 'visible',\n            whiteSpace: truncateLabels ? 'nowrap' : 'normal',\n            // TODO: add optional hover effect to show unformatted label\n            '&:hover': {\n              overflow: 'visible',\n              whiteSpace: 'normal', // this allow you to see the full label on hover\n            },\n          }}\n        />\n      ))}\n    </List>\n  );\n}\n"],"names":["List","ListLegendItem","ListLegend","items","truncateLabels","length","map","item","sx","width","textOverflow","wordBreak","overflow","whiteSpace","id"],"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,IAAI,QAAQ,eAAe,CAAC;AAErC,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAMlD;;CAEC,GACD,OAAO,SAASC,UAAU,CAAC,EAAEC,KAAK,CAAA,EAAmB,EAAE;IACrD,6DAA6D;IAC7D,MAAMC,cAAc,GAAGD,KAAK,CAACE,MAAM,GAAG,CAAC,AAAC;IACxC,qBACE,KAACL,IAAI;kBACFG,KAAK,CAACG,GAAG,CAAC,CAACC,IAAI,iBACd,KAACN,cAAc;gBAEbM,IAAI,EAAEA,IAAI;gBACVC,EAAE,EAAE;oBACFC,KAAK,EAAE,GAAG;oBACVC,YAAY,EAAE,UAAU;oBACxBC,SAAS,EAAE,YAAY;oBACvBC,QAAQ,EAAER,cAAc,GAAG,QAAQ,GAAG,SAAS;oBAC/CS,UAAU,EAAET,cAAc,GAAG,QAAQ,GAAG,QAAQ;oBAChD,4DAA4D;oBAC5D,SAAS,EAAE;wBACTQ,QAAQ,EAAE,SAAS;wBACnBC,UAAU,EAAE,QAAQ;qBACrB;iBACF;eAbIN,IAAI,CAACO,EAAE,CAcZ,AACH,CAAC;MACG,CACP;AACJ,CAAC"}

package/dist/Legend/ListLegendItem.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
+import { ListItemProps } from '@mui/material';
 import { LegendItem } from '../model';
-interface ListLegendItemProps {
+interface ListLegendItemProps extends ListItemProps {
     item: LegendItem;
 }
 export declare const ListLegendItem: React.NamedExoticComponent<ListLegendItemProps>;

package/dist/Legend/ListLegendItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,UAAU,mBAAmB;IAC3B,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,iDAqBzB,CAAC"}
+{"version":3,"file":"ListLegendItem.d.ts","sourceRoot":"","sources":["../../src/Legend/ListLegendItem.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA+B,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAItC,UAAU,mBAAoB,SAAQ,aAAa;IACjD,IAAI,EAAE,UAAU,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,iDAuBzB,CAAC"}

package/dist/Legend/ListLegendItem.js

@@ -10,20 +10,22 @@
 // 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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
 import React from 'react';
 import { Box, ListItemText, ListItem } from '@mui/material';
+import { combineSx } from '../utils';
 import { LegendColorBadge } from './LegendColorBadge';
-export const ListLegendItem = /*#__PURE__*/ React.memo(function ListLegendItem({ item  }) {
-    return /*#__PURE__*/ _jsxs(ListItem, {
-        dense: true,
-        sx: {
-            display: 'flex',
-            maxWidth: 270,
+export const ListLegendItem = /*#__PURE__*/ React.memo(function ListLegendItem({ item , sx , ...others }) {
+    return /*#__PURE__*/ _createElement(ListItem, {
+        ...others,
+        sx: combineSx({
             padding: 0,
             cursor: 'pointer'
-        },
+        }, sx),
+        dense: true,
         "data-testid": `legend-item-${item.color}`,
+        key: item.id,
         onClick: item.onClick,
         selected: item.isSelected,
         children: [
@@ -40,7 +42,7 @@ export const ListLegendItem = /*#__PURE__*/ React.memo(function ListLegendItem({
                 primary: item.label
             })
         ]
-    }, item.id);
+    });
 });
 
 //# sourceMappingURL=ListLegendItem.js.map

package/dist/Legend/ListLegendItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Legend/ListLegendItem.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 { Box, ListItemText, ListItem } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item }: ListLegendItemProps) {\n  return (\n    <ListItem\n      dense={true}\n      sx={{\n        display: 'flex',\n        maxWidth: 270, // TODO: adjust spacing depending on number of series\n        padding: 0,\n        cursor: 'pointer',\n      }}\n      data-testid={`legend-item-${item.color}`}\n      key={item.id}\n      onClick={item.onClick}\n      selected={item.isSelected}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText primary={item.label}></ListItemText>\n    </ListItem>\n  );\n});\n"],"names":["React","Box","ListItemText","ListItem","LegendColorBadge","ListLegendItem","memo","item","dense","sx","display","maxWidth","padding","cursor","data-testid","color","onClick","selected","isSelected","alignItems","primary","label","id"],"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,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAQ,eAAe,CAAC;AAE5D,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGL,KAAK,CAACM,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAuB,EAAE;IAC9F,qBACE,MAACJ,QAAQ;QACPK,KAAK,EAAE,IAAI;QACXC,EAAE,EAAE;YACFC,OAAO,EAAE,MAAM;YACfC,QAAQ,EAAE,GAAG;YACbC,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB;QACDC,aAAW,EAAE,CAAC,YAAY,EAAEP,IAAI,CAACQ,KAAK,CAAC,CAAC;QAExCC,OAAO,EAAET,IAAI,CAACS,OAAO;QACrBC,QAAQ,EAAEV,IAAI,CAACW,UAAU;;0BAEzB,KAACjB,GAAG;gBAACQ,EAAE,EAAE;oBAAEC,OAAO,EAAE,MAAM;oBAAES,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACf,gBAAgB;oBAACW,KAAK,EAAER,IAAI,CAACQ,KAAK;kBAAI;cACnC;0BACN,KAACb,YAAY;gBAACkB,OAAO,EAAEb,IAAI,CAACc,KAAK;cAAiB;;OAP7Cd,IAAI,CAACe,EAAE,CAQH,CACX;AACJ,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/Legend/ListLegendItem.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 { Box, ListItemText, ListItem, ListItemProps } from '@mui/material';\nimport { LegendItem } from '../model';\nimport { combineSx } from '../utils';\nimport { LegendColorBadge } from './LegendColorBadge';\n\ninterface ListLegendItemProps extends ListItemProps {\n  item: LegendItem;\n}\n\nexport const ListLegendItem = React.memo(function ListLegendItem({ item, sx, ...others }: ListLegendItemProps) {\n  return (\n    <ListItem\n      {...others}\n      sx={combineSx(\n        {\n          padding: 0,\n          cursor: 'pointer',\n        },\n        sx\n      )}\n      dense={true}\n      data-testid={`legend-item-${item.color}`}\n      key={item.id}\n      onClick={item.onClick}\n      selected={item.isSelected}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center' }}>\n        <LegendColorBadge color={item.color} />\n      </Box>\n      <ListItemText primary={item.label}></ListItemText>\n    </ListItem>\n  );\n});\n"],"names":["React","Box","ListItemText","ListItem","combineSx","LegendColorBadge","ListLegendItem","memo","item","sx","others","padding","cursor","dense","data-testid","color","key","id","onClick","selected","isSelected","display","alignItems","primary","label"],"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,SAASC,GAAG,EAAEC,YAAY,EAAEC,QAAQ,QAAuB,eAAe,CAAC;AAE3E,SAASC,SAAS,QAAQ,UAAU,CAAC;AACrC,SAASC,gBAAgB,QAAQ,oBAAoB,CAAC;AAMtD,OAAO,MAAMC,cAAc,iBAAGN,KAAK,CAACO,IAAI,CAAC,SAASD,cAAc,CAAC,EAAEE,IAAI,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAuB,EAAE;IAC7G,qBACE,eAACP,QAAQ;QACN,GAAGO,MAAM;QACVD,EAAE,EAAEL,SAAS,CACX;YACEO,OAAO,EAAE,CAAC;YACVC,MAAM,EAAE,SAAS;SAClB,EACDH,EAAE,CACH;QACDI,KAAK,EAAE,IAAI;QACXC,aAAW,EAAE,CAAC,YAAY,EAAEN,IAAI,CAACO,KAAK,CAAC,CAAC;QACxCC,GAAG,EAAER,IAAI,CAACS,EAAE;QACZC,OAAO,EAAEV,IAAI,CAACU,OAAO;QACrBC,QAAQ,EAAEX,IAAI,CAACY,UAAU;;0BAEzB,KAACnB,GAAG;gBAACQ,EAAE,EAAE;oBAAEY,OAAO,EAAE,MAAM;oBAAEC,UAAU,EAAE,QAAQ;iBAAE;0BAChD,cAAA,KAACjB,gBAAgB;oBAACU,KAAK,EAAEP,IAAI,CAACO,KAAK;kBAAI;cACnC;0BACN,KAACb,YAAY;gBAACqB,OAAO,EAAEf,IAAI,CAACgB,KAAK;cAAiB;;MACzC,CACX;AACJ,CAAC,CAAC,CAAC"}

package/dist/LineChart/LineChart.js

@@ -179,7 +179,8 @@ export function LineChart({ height , data , unit , grid , legend , visualMap , o
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: true,
-                pinTooltip: pinTooltip
+                pinTooltip: pinTooltip,
+                unit: unit
             }),
             /*#__PURE__*/ _jsx(EChart, {
                 sx: {