@perses-dev/components 0.6.0 → 0.7.0

package/dist/Drawer/Drawer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    anchor?: 'left' | 'right';
+    children?: React.ReactNode;
+}
+export declare const Drawer: ({ anchor, isOpen, onClose, children }: DrawerProps) => JSX.Element;
+export {};
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":";AAeA,UAAU,WAAW;IACnB,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,eAAO,MAAM,MAAM,0CAAqD,WAAW,gBAiBlF,CAAC"}

package/dist/Drawer/Drawer.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{Drawer as MuiDrawer}from"@mui/material";const DRAWER_DEFAULT_WIDTH=900;export const Drawer=({anchor:r="right",isOpen:e,onClose:o,children:i})=>_jsx(MuiDrawer,{open:e,onClose:o,anchor:r,PaperProps:{sx:{width:"900px",padding:r=>r.spacing(2),overflow:"hidden"}},children:i});

package/dist/Drawer/index.d.ts

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

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

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

package/dist/Drawer/index.js

@@ -0,0 +1 @@
+export*from"./Drawer";

package/dist/EChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../src/EChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAQ,MAAM,cAAc,CAAC;AAChE,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,aAAK,eAAe,CAAC,CAAC,IAAI,CACxB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAEhC,QAAQ,CAAC,EAAE,OAAO,KACf,IAAI,CAAC;AAEV,QAAA,MAAM,WAAW,0HAUP,CAAC;AAEX,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAGxD,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,MAAM,CAAC;IAGnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,wBAAwB,EAAE,GAAG,yBAAyB,EAAE,CAAC;CACjE;AAED,aAAK,oBAAoB,GAAG,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;AAEpE,QAAA,MAAM,WAAW,gDAAiD,CAAC;AAEnE,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAExD,aAAK,cAAc,GAAG,UAAU,CAAC;AAIjC,oBAAY,YAAY,CAAC,CAAC,IAAI;KAC3B,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;CACxD,GAAG;KACD,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,oBAAoB;CAC1D,GAAG;KACD,SAAS,IAAI,cAAc,CAAC,CAAC,EAAE,MAAM,IAAI;CAC3C,CAAC;AAEF,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,6IAkEjB,CAAC"}
+{"version":3,"file":"EChart.d.ts","sourceRoot":"","sources":["../src/EChart.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAQ,MAAM,cAAc,CAAC;AAChE,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACtC,aAAa,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,aAAK,eAAe,CAAC,CAAC,IAAI,CACxB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAEhC,QAAQ,CAAC,EAAE,OAAO,KACf,IAAI,CAAC;AAEV,QAAA,MAAM,WAAW,0HAUP,CAAC;AAEX,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAGxD,MAAM,WAAW,wBAAwB;IACvC,UAAU,EAAE,MAAM,CAAC;IAGnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IAGb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,yBAAyB;IACxC,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IAEpB,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,cAAc,CAAC;IACrB,KAAK,EAAE,wBAAwB,EAAE,GAAG,yBAAyB,EAAE,CAAC;CACjE;AAED,aAAK,oBAAoB,GAAG,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAC;AAEpE,QAAA,MAAM,WAAW,gDAAiD,CAAC;AAEnE,oBAAY,cAAc,GAAG,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;AAExD,aAAK,cAAc,GAAG,UAAU,CAAC;AAIjC,oBAAY,YAAY,CAAC,CAAC,IAAI;KAC3B,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;CACxD,GAAG;KACD,cAAc,IAAI,cAAc,CAAC,CAAC,EAAE,oBAAoB;CAC1D,GAAG;KACD,SAAS,IAAI,cAAc,CAAC,CAAC,EAAE,MAAM,IAAI;CAC3C,CAAC;AAEF,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,MAAM,EAAE,iBAAiB,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IAC9B,QAAQ,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IAC5B,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CAClD;AAED,eAAO,MAAM,MAAM,6IA0EjB,CAAC"}

package/dist/EChart.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import React,{useEffect,useLayoutEffect,useRef}from"react";import debounce from"lodash/debounce";import{init}from"echarts/core";import{Box}from"@mui/material";import{isEqual}from"lodash-es";const mouseEvents=["click","dblclick","mousedown","mousemove","mouseup","mouseover","mouseout","globalout","contextmenu"],batchEvents=["datazoom","downplay","highlight"];export const EChart=React.memo((function({option:e,theme:n,renderer:t,sx:r,onEvents:o,_instance:u,onChartInitialized:s}){const c=useRef(e),i=useRef(e),l=useRef(null),f=useRef(null);return useLayoutEffect((()=>{if(null!==l.current&&null===f.current)return f.current=init(l.current,n,{renderer:null!=t?t:"canvas"}),f.current.setOption(c.current,!0),null==s||s(f.current),void 0!==u&&(u.current=f.current),()=>{null!==f.current&&(f.current.dispose(),f.current=null)}}),[u,s,n,t]),useEffect((()=>{void 0===i.current||isEqual(i.current,e)||null!==f.current&&(f.current.setOption(e,!0),i.current=e)}),[e]),useLayoutEffect((()=>{const e=debounce((()=>{null!==f.current&&f.current.resize()}),200);return window.addEventListener("resize",e),e(),()=>{window.removeEventListener("resize",e)}}),[]),useEffect((()=>{const e=f.current;if(null!==e&&void 0!==o)return bindEvents(e,o),()=>{if(void 0!==e&&!0!==e.isDisposed())for(const n in o)e.off(n)}}),[o]),_jsx(Box,{ref:l,sx:r})}));function bindEvents(e,n){var t;if(void 0!==n)for(const e in n)if(Object.prototype.hasOwnProperty.call(n,e)){const o=null!==(t=n[e])&&void 0!==t?t:null;o&&r(e,o)}function r(n,t){"function"==typeof t&&(isMouseEvent(n)?e.on(n,(n=>t(n,e))):isBatchEvent(n)?e.on(n,(e=>t(e))):e.on(n,(()=>t(null,e))))}}function isMouseEvent(e){return mouseEvents.includes(e)}function isBatchEvent(e){return batchEvents.includes(e)}
+import{jsx as _jsx}from"react/jsx-runtime";import React,{useEffect,useLayoutEffect,useRef}from"react";import debounce from"lodash/debounce";import{init}from"echarts/core";import{Box}from"@mui/material";import{isEqual}from"lodash-es";const mouseEvents=["click","dblclick","mousedown","mousemove","mouseup","mouseover","mouseout","globalout","contextmenu"],batchEvents=["datazoom","downplay","highlight"];export const EChart=React.memo((function({option:e,theme:n,renderer:t,sx:r,onEvents:u,_instance:o,onChartInitialized:s}){const c=useRef(e),i=useRef(e),l=useRef(null),f=useRef(null);return useLayoutEffect((()=>{if(null!==l.current&&null===f.current)return f.current=init(l.current,n,{renderer:null!=t?t:"canvas"}),f.current.setOption(c.current,!0),null==s||s(f.current),void 0!==o&&(o.current=f.current),()=>{null!==f.current&&(f.current.dispose(),f.current=null)}}),[o,s,n,t]),useEffect((()=>{void 0===i.current||isEqual(i.current,e)||null!==f.current&&(f.current.setOption(e,!0),i.current=e)}),[e]),useLayoutEffect((()=>{const e=debounce((()=>{null!==f.current&&f.current.resize()}),200);return window.addEventListener("resize",e),e(),()=>{window.removeEventListener("resize",e)}}),[]),useEffect((()=>{const e=f.current;if(null!==e&&void 0!==u)return bindEvents(e,u),()=>{if(void 0!==e&&!0!==e.isDisposed())for(const n in u)e.off(n)}}),[u]),useEffect((()=>{debounce((()=>{null!==f.current&&f.current.resize()}),200)()}),[r]),_jsx(Box,{ref:l,sx:r})}));function bindEvents(e,n){var t;if(void 0!==n)for(const e in n)if(Object.prototype.hasOwnProperty.call(n,e)){const u=null!==(t=n[e])&&void 0!==t?t:null;u&&r(e,u)}function r(n,t){"function"==typeof t&&(isMouseEvent(n)?e.on(n,(n=>t(n,e))):isBatchEvent(n)?e.on(n,(e=>t(e))):e.on(n,(()=>t(null,e))))}}function isMouseEvent(e){return mouseEvents.includes(e)}function isBatchEvent(e){return batchEvents.includes(e)}

package/dist/TimeRangeSelector/AbsoluteTimePicker.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AbsoluteTimeRange } from '@perses-dev/core';
+interface AbsoluteTimeFormProps {
+    initialTimeRange: AbsoluteTimeRange;
+    onChange: (timeRange: AbsoluteTimeRange) => void;
+}
+export declare const AbsoluteTimePicker: ({ initialTimeRange, onChange }: AbsoluteTimeFormProps) => JSX.Element;
+export {};
+//# sourceMappingURL=AbsoluteTimePicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AbsoluteTimePicker.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/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,gBAmIvF,CAAC"}

package/dist/TimeRangeSelector/AbsoluteTimePicker.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{Box,Stack,TextField,Divider}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{validateDateRange}from"./utils";const DATE_TIME_FORMAT="yyyy-MM-dd HH:mm:ss";export const AbsoluteTimePicker=({initialTimeRange:e,onChange:t})=>{const[a,i]=useState(e),[r,n]=useState(!0),o=(e,r)=>{const n=new Date(e);!0===r?!0===validateDateRange(n,a.end)&&i((e=>{const a={start:n,end:e.end};return t(a),a})):!0===validateDateRange(a.start,n)&&i((e=>{const a={start:e.start,end:n};return t(a),a}))};return _jsx(LocalizationProvider,{dateAdapter:AdapterDateFns,children:_jsxs(Stack,{spacing:3,sx:{padding:e=>e.spacing(1,2,3)},children:[r&&_jsxs(Box,{sx:e=>({".MuiPickerStaticWrapper-content":{backgroundColor:e.palette.background.default},".MuiIconButton-sizeMedium":{top:80,bottom:"auto",margin:e.spacing(0,3)}}),children:[_jsx("h3",{children:"Select Start Time"}),_jsx(StaticDateTimePicker,{displayStaticWrapperAs:"desktop",openTo:"day",disableHighlightToday:!0,value:e.start,onChange:e=>{null!==e&&i((t=>({start:e,end:t.end})))},onAccept:()=>{n(!1)},renderInput:e=>_jsx(TextField,{...e})})]}),!r&&_jsxs(Box,{sx:e=>({".MuiPickerStaticWrapper-content":{backgroundColor:e.palette.background.default},".MuiIconButton-sizeMedium":{top:80,bottom:"auto",margin:e.spacing(0,3)}}),children:[_jsx("h3",{children:"Select End Time"}),_jsx(StaticDateTimePicker,{displayStaticWrapperAs:"desktop",openTo:"day",disableHighlightToday:!0,value:e.end,minDateTime:a.start,onChange:e=>{null!==e&&i((t=>({start:t.start,end:e})))},onAccept:()=>{n(!0),t(a)},renderInput:e=>_jsx(TextField,{...e})})]}),_jsx(TextField,{fullWidth:!0,onChange:e=>{o(e.target.value,!0)},value:format(a.start,DATE_TIME_FORMAT),label:"Start Time",placeholder:"mm/dd/yyyy hh:mm",type:"tel"}),_jsx(Divider,{sx:e=>({margin:e.spacing(2,0),borderColor:e.palette.grey[500]})}),_jsx(TextField,{fullWidth:!0,onChange:e=>{o(e.target.value,!1)},value:format(a.end,DATE_TIME_FORMAT),label:"End Time",placeholder:"mm/dd/yyyy hh:mm",type:"tel"})]})})};

package/dist/TimeRangeSelector/TimeRangeSelector.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { SelectChangeEvent } from '@mui/material';
+import { TimeRangeValue, RelativeTimeRange } from '@perses-dev/core';
+export interface TimeOption {
+    value: RelativeTimeRange;
+    display: string;
+}
+interface TimeRangeSelectorProps {
+    inputLabel: string;
+    value: TimeRangeValue;
+    timeOptions: TimeOption[];
+    onSelectChange: (event: SelectChangeEvent<string>) => void;
+    onCustomClick: () => void;
+}
+export declare function TimeRangeSelector(props: TimeRangeSelectorProps): JSX.Element;
+export {};
+//# sourceMappingURL=TimeRangeSelector.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeSelector.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAoB,iBAAiB,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAmB,MAAM,kBAAkB,CAAC;AAKtF,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,iBAAiB,CAAC;IACzB,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,sBAAsB;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,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,eA+B9D"}

package/dist/TimeRangeSelector/TimeRangeSelector.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{MenuItem,Select}from"@mui/material";import{isRelativeValue}from"@perses-dev/core";import{formatAbsoluteRange}from"./utils";const DATE_TIME_FORMAT="yyyy-MM-dd HH:mm:ss";export function TimeRangeSelector(e){const{inputLabel:t,value:a,timeOptions:s,onSelectChange:i,onCustomClick:l}=e,n=isRelativeValue(a)?a.pastDuration:formatAbsoluteRange(a,DATE_TIME_FORMAT);return _jsxs(Select,{value:n,label:t,onChange:i,children:[s.map(((e,t)=>_jsx(MenuItem,{value:e.value.pastDuration,children:e.display},t))),isRelativeValue(a)?_jsx(MenuItem,{onClick:()=>{l()},children:"Custom time range"}):_jsx(MenuItem,{value:n,onClick:()=>{l()},children:n})]})}

package/dist/TimeRangeSelector/index.d.ts

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

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

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

package/dist/TimeRangeSelector/index.js

@@ -0,0 +1 @@
+export*from"./TimeRangeSelector";export*from"./AbsoluteTimePicker";

package/dist/TimeRangeSelector/utils.d.ts

@@ -0,0 +1,7 @@
+import { AbsoluteTimeRange } from '@perses-dev/core';
+export declare function validateDateRange(startDate: Date, endDate: Date): boolean;
+/**
+ * Format start and end time based on provided date format
+ */
+export declare function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string): string;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/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/TimeRangeSelector/utils.js

@@ -0,0 +1 @@
+import{isBefore,isValid,format}from"date-fns";export function validateDateRange(e,r){return isValid(e)&&isValid(r)?!!isBefore(e,r)||(console.error("End Time is before Start Time"),!1):(console.error("Invalid Date"),!1)}export function formatAbsoluteRange(e,r){return`${format(e.start,r)} - ${format(e.end,r)}`}

package/dist/cjs/Drawer/Drawer.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Drawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+const material_1 = require("@mui/material");
+const DRAWER_DEFAULT_WIDTH = 900;
+const Drawer = ({ anchor = 'right', isOpen, onClose, children }) => {
+    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, { open: isOpen, onClose: onClose, anchor: anchor, PaperProps: {
+            sx: {
+                width: `${DRAWER_DEFAULT_WIDTH}px`,
+                padding: (theme) => theme.spacing(2),
+                overflow: 'hidden',
+            },
+        }, children: children }));
+};
+exports.Drawer = Drawer;

package/dist/cjs/Drawer/index.js

@@ -0,0 +1,29 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Drawer"), exports);

package/dist/cjs/EChart.js

@@ -117,6 +117,14 @@ exports.EChart = react_1.default.memo(function EChart({ option, theme, renderer,
             }
         };
     }, [onEvents]);
+    (0, react_1.useEffect)(() => {
+        const updateSize = (0, debounce_1.default)(() => {
+            if (chartElement.current === null)
+                return;
+            chartElement.current.resize();
+        }, 200);
+        updateSize();
+    }, [sx]);
     return (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, sx: sx });
 });
 // Validate event config and bind custom events

package/dist/cjs/TimeRangeSelector/AbsoluteTimePicker.js

@@ -0,0 +1,101 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AbsoluteTimePicker = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const x_date_pickers_1 = require("@mui/x-date-pickers");
+const AdapterDateFns_1 = require("@mui/x-date-pickers/AdapterDateFns");
+const date_fns_1 = require("date-fns");
+const utils_1 = require("./utils");
+const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+const AbsoluteTimePicker = ({ initialTimeRange, onChange }) => {
+    const [timeRange, setTimeRange] = (0, react_1.useState)(initialTimeRange);
+    const [showStartCalendar, setShowStartCalendar] = (0, react_1.useState)(true);
+    // validate start and end time, propagate changes
+    const updateDateRange = (input, isStartDate) => {
+        const newDate = new Date(input);
+        if (isStartDate === true) {
+            const isValidDateRange = (0, utils_1.validateDateRange)(newDate, timeRange.end);
+            if (isValidDateRange === true) {
+                setTimeRange((current) => {
+                    const updatedRange = { start: newDate, end: current.end };
+                    onChange(updatedRange);
+                    return updatedRange;
+                });
+            }
+        }
+        else {
+            const isValidDateRange = (0, utils_1.validateDateRange)(timeRange.start, newDate);
+            if (isValidDateRange === true) {
+                setTimeRange((current) => {
+                    const updatedRange = { start: current.start, end: newDate };
+                    onChange(updatedRange);
+                    return updatedRange;
+                });
+            }
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(x_date_pickers_1.LocalizationProvider, { dateAdapter: AdapterDateFns_1.AdapterDateFns, children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 3, sx: { padding: (theme) => theme.spacing(1, 2, 3) }, children: [showStartCalendar && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: (theme) => ({
+                        // TODO: create separate reusable calendar component
+                        '.MuiPickerStaticWrapper-content': {
+                            backgroundColor: theme.palette.background.default,
+                        },
+                        // reposition AM and PM buttons
+                        '.MuiIconButton-sizeMedium': {
+                            top: 80,
+                            bottom: 'auto',
+                            margin: theme.spacing(0, 3),
+                        },
+                    }), children: [(0, jsx_runtime_1.jsx)("h3", { children: "Select Start Time" }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.StaticDateTimePicker, { displayStaticWrapperAs: "desktop", openTo: "day", disableHighlightToday: true, value: initialTimeRange.start, onChange: (newValue) => {
+                                if (newValue === null)
+                                    return;
+                                setTimeRange((current) => {
+                                    return { start: newValue, end: current.end };
+                                });
+                            }, onAccept: () => {
+                                setShowStartCalendar(false);
+                            }, renderInput: (params) => (0, jsx_runtime_1.jsx)(material_1.TextField, { ...params }) })] })), !showStartCalendar && ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: (theme) => ({
+                        '.MuiPickerStaticWrapper-content': {
+                            backgroundColor: theme.palette.background.default,
+                        },
+                        // reposition AM and PM buttons
+                        '.MuiIconButton-sizeMedium': {
+                            top: 80,
+                            bottom: 'auto',
+                            margin: theme.spacing(0, 3),
+                        },
+                    }), children: [(0, jsx_runtime_1.jsx)("h3", { children: "Select End Time" }), (0, jsx_runtime_1.jsx)(x_date_pickers_1.StaticDateTimePicker, { displayStaticWrapperAs: "desktop", openTo: "day", disableHighlightToday: true, value: initialTimeRange.end, minDateTime: timeRange.start, onChange: (newValue) => {
+                                if (newValue === null)
+                                    return;
+                                setTimeRange((current) => {
+                                    return { start: current.start, end: newValue };
+                                });
+                            }, onAccept: () => {
+                                setShowStartCalendar(true);
+                                onChange(timeRange);
+                            }, renderInput: (params) => (0, jsx_runtime_1.jsx)(material_1.TextField, { ...params }) })] })), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, onChange: (event) => {
+                        // TODO: add helperText, fix validation after we decide on form state solution
+                        updateDateRange(event.target.value, true);
+                    }, value: (0, date_fns_1.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" }), (0, jsx_runtime_1.jsx)(material_1.Divider, { sx: (theme) => ({
+                        margin: theme.spacing(2, 0),
+                        borderColor: theme.palette.grey['500'],
+                    }) }), (0, jsx_runtime_1.jsx)(material_1.TextField, { fullWidth: true, onChange: (event) => {
+                        updateDateRange(event.target.value, false);
+                    }, value: (0, date_fns_1.format)(timeRange.end, DATE_TIME_FORMAT), label: "End Time", placeholder: "mm/dd/yyyy hh:mm", type: "tel" })] }) }));
+};
+exports.AbsoluteTimePicker = AbsoluteTimePicker;

package/dist/cjs/TimeRangeSelector/TimeRangeSelector.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeRangeSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+const material_1 = require("@mui/material");
+const core_1 = require("@perses-dev/core");
+const utils_1 = require("./utils");
+const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
+function TimeRangeSelector(props) {
+    const { inputLabel, value, timeOptions, onSelectChange, onCustomClick } = props;
+    const formattedValue = !(0, core_1.isRelativeValue)(value) ? (0, utils_1.formatAbsoluteRange)(value, DATE_TIME_FORMAT) : value.pastDuration;
+    return ((0, jsx_runtime_1.jsxs)(material_1.Select, { value: formattedValue, label: inputLabel, onChange: onSelectChange, children: [timeOptions.map((item, idx) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: item.value.pastDuration, children: item.display }, idx))), (0, core_1.isRelativeValue)(value) ? ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { onClick: () => {
+                    onCustomClick();
+                }, children: "Custom time range" })) : ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: formattedValue, onClick: () => {
+                    onCustomClick();
+                }, children: formattedValue }))] }));
+}
+exports.TimeRangeSelector = TimeRangeSelector;

package/dist/cjs/TimeRangeSelector/index.js

@@ -0,0 +1,30 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TimeRangeSelector"), exports);
+__exportStar(require("./AbsoluteTimePicker"), exports);

package/dist/cjs/TimeRangeSelector/utils.js

@@ -0,0 +1,41 @@
+"use strict";
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// 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.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatAbsoluteRange = exports.validateDateRange = void 0;
+const date_fns_1 = require("date-fns");
+/*
+ * Date validation and check if end is after start
+ */
+function validateDateRange(startDate, endDate) {
+    // TODO: display error as helperText
+    if (!(0, date_fns_1.isValid)(startDate) || !(0, date_fns_1.isValid)(endDate)) {
+        console.error('Invalid Date');
+        return false;
+    }
+    if (!(0, date_fns_1.isBefore)(startDate, endDate)) {
+        console.error('End Time is before Start Time');
+        return false;
+    }
+    return true;
+}
+exports.validateDateRange = validateDateRange;
+/**
+ * Format start and end time based on provided date format
+ */
+function formatAbsoluteRange(timeRange, dateFormat) {
+    const formattedStart = (0, date_fns_1.format)(timeRange.start, dateFormat);
+    const formattedEnd = (0, date_fns_1.format)(timeRange.end, dateFormat);
+    return `${formattedStart} - ${formattedEnd}`;
+}
+exports.formatAbsoluteRange = formatAbsoluteRange;

package/dist/cjs/index.js

@@ -26,6 +26,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Drawer"), exports);
 __exportStar(require("./EChart"), exports);
 __exportStar(require("./ErrorAlert"), exports);
 __exportStar(require("./ErrorBoundary"), exports);
@@ -33,6 +34,7 @@ __exportStar(require("./InfoTooltip"), exports);
 __exportStar(require("./LineChart"), exports);
 __exportStar(require("./GaugeChart"), exports);
 __exportStar(require("./StatChart"), exports);
+__exportStar(require("./TimeRangeSelector"), exports);
 __exportStar(require("./context/ChartsThemeProvider"), exports);
 __exportStar(require("./utils"), exports);
 __exportStar(require("./model"), exports);

package/dist/cjs/model/units.js

@@ -179,6 +179,8 @@ function formatBytes(bytes, decimals = 2) {
     const k = 1024;
     const dm = decimals < 0 ? 0 : decimals;
     const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    // Math.max(0, ...) ensures that we don't return -1 as a value for the index.
+    // Why? When the number of bytes are between -1 and 1, Math.floor(Math.log(bytes)/Math.log(1024)) returns -1.
+    const i = Math.max(0, Math.floor(Math.log(bytes) / Math.log(k)));
     return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Drawer';
 export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
@@ -5,6 +6,7 @@ export * from './InfoTooltip';
 export * from './LineChart';
 export * from './GaugeChart';
 export * from './StatChart';
+export * from './TimeRangeSelector';
 export * from './context/ChartsThemeProvider';
 export * from './utils';
 export * from './model';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-export*from"./EChart";export*from"./ErrorAlert";export*from"./ErrorBoundary";export*from"./InfoTooltip";export*from"./LineChart";export*from"./GaugeChart";export*from"./StatChart";export*from"./context/ChartsThemeProvider";export*from"./utils";export*from"./model";
+export*from"./Drawer";export*from"./EChart";export*from"./ErrorAlert";export*from"./ErrorBoundary";export*from"./InfoTooltip";export*from"./LineChart";export*from"./GaugeChart";export*from"./StatChart";export*from"./TimeRangeSelector";export*from"./context/ChartsThemeProvider";export*from"./utils";export*from"./model";

package/dist/model/units.js

@@ -1 +1 @@
-import{milliseconds}from"date-fns";import{round}from"mathjs";export const DEFAULT_DECIMAL_PLACES=2;export function formatValue(e,t){var n;if(void 0===t)return e.toString();if(isDecimalUnit(t))return formatDecimal(e,t);if(isTimeUnit(t))return formatTime(e,t);if(isPercentUnit(t))return formatPercent(e,t);if(isBytesUnit(t))return formatBytes(e,null!==(n=t.decimal_places)&&void 0!==n?n:2);throw new Error(`Unknown unit options ${t}`)}const timeUnitKinds=["Milliseconds","Seconds","Minutes","Hours","Days","Weeks","Months","Years"],timeUnitKindsSet=new Set(timeUnitKinds);function isTimeUnit(e){return timeUnitKindsSet.has(e.kind)}function formatTime(e,t){const n={};switch(t.kind){case"Milliseconds":n.seconds=e/1e3;break;case"Seconds":n.seconds=e;break;case"Minutes":n.minutes=e;break;case"Hours":n.hours=e;break;case"Days":n.days=e;break;case"Weeks":n.weeks=e;break;case"Months":n.months=e;break;case"Years":n.years=e;break;default:const i=t.kind;throw new Error(`Unknown time unit type ${i}`)}const i=milliseconds(n),r=i/1e3;if(r<1)return`${i.toFixed()} milliseconds`;const s=r/60;if(s<1)return`${r.toFixed()} seconds`;const o=s/60;if(o<1)return`${s.toFixed()} minutes`;const a=o/24;if(a<1)return`${o.toFixed()} hours`;const c=a/7;if(c<1)return`${a.toFixed()} days`;const d=c/52;return d<1?`${c.toFixed()} weeks`:`${d.toFixed()} years`}const percentUnitKinds=["Percent","PercentDecimal","%"],percentUnitKindsSet=new Set(percentUnitKinds);function isPercentUnit(e){return percentUnitKindsSet.has(e.kind)}function formatPercent(e,t){var n;const i=null!==(n=t.decimal_places)&&void 0!==n?n:2;return"PercentDecimal"===t.kind&&(e*=100),e.toFixed(i)+"%"}const decimalUnitKinds=["Decimal"],decimalUnitKindsSet=new Set(decimalUnitKinds);function isDecimalUnit(e){return decimalUnitKindsSet.has(e.kind)}function formatDecimal(e,t){var n;const i=null!==(n=t.decimal_places)&&void 0!==n?n:2;if(!0===t.abbreviate)return abbreviateLargeNumber(e,i);const r={style:"decimal",minimumFractionDigits:0,maximumFractionDigits:i,useGrouping:!0};return new Intl.NumberFormat("en-US",r).format(e)}export function abbreviateLargeNumber(e,t=2){return formatNumber(e,(e=>round(e,t)))}export function formatNumber(e,t){const n=null!=t?t:Math.round;return e>=1e12?n(e/1e12)+"T":e>=1e9?n(e/1e9)+"B":e>=1e6?n(e/1e6)+"M":e>=1e3?n(e/1e3)+"K":e.toString()}const bytesUnitKinds=["Bytes"],bytesUnitKindsSet=new Set(bytesUnitKinds);function isBytesUnit(e){return bytesUnitKindsSet.has(e.kind)}function formatBytes(e,t=2){if(0===e)return"0 Bytes";const n=t<0?0:t,i=Math.floor(Math.log(e)/Math.log(1024));return parseFloat((e/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}
+import{milliseconds}from"date-fns";import{round}from"mathjs";export const DEFAULT_DECIMAL_PLACES=2;export function formatValue(e,t){var n;if(void 0===t)return e.toString();if(isDecimalUnit(t))return formatDecimal(e,t);if(isTimeUnit(t))return formatTime(e,t);if(isPercentUnit(t))return formatPercent(e,t);if(isBytesUnit(t))return formatBytes(e,null!==(n=t.decimal_places)&&void 0!==n?n:2);throw new Error(`Unknown unit options ${t}`)}const timeUnitKinds=["Milliseconds","Seconds","Minutes","Hours","Days","Weeks","Months","Years"],timeUnitKindsSet=new Set(timeUnitKinds);function isTimeUnit(e){return timeUnitKindsSet.has(e.kind)}function formatTime(e,t){const n={};switch(t.kind){case"Milliseconds":n.seconds=e/1e3;break;case"Seconds":n.seconds=e;break;case"Minutes":n.minutes=e;break;case"Hours":n.hours=e;break;case"Days":n.days=e;break;case"Weeks":n.weeks=e;break;case"Months":n.months=e;break;case"Years":n.years=e;break;default:const i=t.kind;throw new Error(`Unknown time unit type ${i}`)}const i=milliseconds(n),r=i/1e3;if(r<1)return`${i.toFixed()} milliseconds`;const s=r/60;if(s<1)return`${r.toFixed()} seconds`;const o=s/60;if(o<1)return`${s.toFixed()} minutes`;const a=o/24;if(a<1)return`${o.toFixed()} hours`;const c=a/7;if(c<1)return`${a.toFixed()} days`;const d=c/52;return d<1?`${c.toFixed()} weeks`:`${d.toFixed()} years`}const percentUnitKinds=["Percent","PercentDecimal","%"],percentUnitKindsSet=new Set(percentUnitKinds);function isPercentUnit(e){return percentUnitKindsSet.has(e.kind)}function formatPercent(e,t){var n;const i=null!==(n=t.decimal_places)&&void 0!==n?n:2;return"PercentDecimal"===t.kind&&(e*=100),e.toFixed(i)+"%"}const decimalUnitKinds=["Decimal"],decimalUnitKindsSet=new Set(decimalUnitKinds);function isDecimalUnit(e){return decimalUnitKindsSet.has(e.kind)}function formatDecimal(e,t){var n;const i=null!==(n=t.decimal_places)&&void 0!==n?n:2;if(!0===t.abbreviate)return abbreviateLargeNumber(e,i);const r={style:"decimal",minimumFractionDigits:0,maximumFractionDigits:i,useGrouping:!0};return new Intl.NumberFormat("en-US",r).format(e)}export function abbreviateLargeNumber(e,t=2){return formatNumber(e,(e=>round(e,t)))}export function formatNumber(e,t){const n=null!=t?t:Math.round;return e>=1e12?n(e/1e12)+"T":e>=1e9?n(e/1e9)+"B":e>=1e6?n(e/1e6)+"M":e>=1e3?n(e/1e3)+"K":e.toString()}const bytesUnitKinds=["Bytes"],bytesUnitKindsSet=new Set(bytesUnitKinds);function isBytesUnit(e){return bytesUnitKindsSet.has(e.kind)}function formatBytes(e,t=2){if(0===e)return"0 Bytes";const n=t<0?0:t,i=Math.max(0,Math.floor(Math.log(e)/Math.log(1024)));return parseFloat((e/Math.pow(1024,i)).toFixed(n))+" "+["Bytes","KB","MB","GB","TB","PB","EB","ZB","YB"][i]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,7 +24,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/core": "^0.6.0",
+    "@mui/x-date-pickers": "^5.0.0-beta.1",
+    "@perses-dev/core": "^0.7.0",
+    "date-fns": "^2.28.0",
     "echarts": "^5.3.3",
     "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"