@perses-dev/components 0.5.1 → 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/LineChart/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAI1D,OAAO,EAAgE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBtG,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,cAAc,eA0IpG"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/LineChart/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAe,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG1D,OAAO,EAAgE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiBtG,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,cAAc,eAsJpG"}

package/dist/LineChart/LineChart.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{useDeepMemo}from"@perses-dev/core";import{Box}from"@mui/material";import{use}from"echarts/core";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{EChart}from"../EChart";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"../model/graph";import{formatValue}from"../model/units";import{useChartsTheme}from"../context/ChartsThemeProvider";import{emptyTooltipData}from"../Tooltip/tooltip-model";import{Tooltip}from"../Tooltip/Tooltip";import{enableDataZoom,restoreChart,getDateRange,getFormattedDate}from"./utils";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);export function LineChart({height:e,data:o,unit:t,grid:r,legend:a,visualMap:n,onDataZoom:i}){const s=useChartsTheme(),m=useRef(),[p,l]=useState(!0),u=useMemo((()=>({datazoom:e=>{var t,r;if(void 0===i||void 0===e.batch[0])return;const a=null!==(t=e.batch[0].startValue)&&void 0!==t?t:0,n=null!==(r=e.batch[0].endValue)&&void 0!==r?r:o.xAxis.length-1,s=o.xAxis[a],m=o.xAxis[n];void 0!==s&&void 0!==m&&i({start:s,end:m,startIndex:a,endIndex:n})}})),[o,i]);void 0!==m.current&&enableDataZoom(m.current);const h=useDeepMemo((()=>{var e;if(void 0===o.timeSeries)return{};if(null===o.timeSeries||0===o.timeSeries.length)return s.noDataOption;const i=o.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,m=null!==(e=o.rangeMs)&&void 0!==e?e:getDateRange(o.xAxis);return{series:o.timeSeries,xAxis:{type:"category",data:o.xAxis,max:o.xAxisMax,axisLabel:{formatter:e=>getFormattedDate(e,m)}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{formatter:e=>formatValue(e,t)}},animation:!1,tooltip:{show:i,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},toolbox:{feature:{dataZoom:{icon:null,yAxisIndex:"none"}}},grid:r,legend:a,visualMap:n}}),[o,r,a,n]);return _jsxs(Box,{sx:{height:e},onDoubleClick:()=>{void 0!==m.current&&restoreChart(m.current)},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&l(!1)},onMouseUp:()=>{l(!0)},onMouseLeave:()=>{l(!1)},onMouseEnter:()=>{l(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:m,tooltipData:emptyTooltipData,chartData:o,wrapLabels:!0}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:h,theme:s.themeName,onEvents:u,_instance:m})]})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{useDeepMemo}from"@perses-dev/core";import{Box}from"@mui/material";import{use}from"echarts/core";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{EChart}from"../EChart";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"../model/graph";import{formatValue}from"../model/units";import{useChartsTheme}from"../context/ChartsThemeProvider";import{Tooltip}from"../Tooltip/Tooltip";import{enableDataZoom,restoreChart,getDateRange,getFormattedDate}from"./utils";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);export function LineChart({height:e,data:o,unit:t,grid:r,legend:n,visualMap:a,onDataZoom:i}){const s=useChartsTheme(),m=useRef(),[p,l]=useState(!0),[u,h]=useState(!1),x=useMemo((()=>({datazoom:e=>{var t,r;if(void 0===i&&setTimeout((()=>{h(!1)}),10),void 0===i||void 0===e.batch[0])return;const n=null!==(t=e.batch[0].startValue)&&void 0!==t?t:0,a=null!==(r=e.batch[0].endValue)&&void 0!==r?r:o.xAxis.length-1,s=o.xAxis[n],m=o.xAxis[a];void 0!==s&&void 0!==m&&i({start:s,end:m,startIndex:n,endIndex:a})}})),[o,i,h]);void 0!==m.current&&enableDataZoom(m.current);const d=useDeepMemo((()=>{var e;if(void 0===o.timeSeries)return{};if(null===o.timeSeries||0===o.timeSeries.length)return s.noDataOption;const i=o.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,m=null!==(e=o.rangeMs)&&void 0!==e?e:getDateRange(o.xAxis);return{series:o.timeSeries,xAxis:{type:"category",data:o.xAxis,max:o.xAxisMax,axisLabel:{formatter:e=>getFormattedDate(e,m)}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{formatter:e=>formatValue(e,t)}},animation:!1,tooltip:{show:i,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},toolbox:{feature:{dataZoom:{icon:null,yAxisIndex:"none"}}},grid:r,legend:n,visualMap:a}}),[o,r,n,a]);return _jsxs(Box,{sx:{height:e},onClick:()=>h((e=>!e)),onDoubleClick:()=>{h(!1),void 0!==m.current&&restoreChart(m.current)},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&l(!1)},onMouseUp:()=>{l(!0)},onMouseLeave:()=>{l(!1),h(!1)},onMouseEnter:()=>{l(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:m,chartData:o,wrapLabels:!0,pinTooltip:u}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:d,theme:s.themeName,onEvents:x,_instance:m})]})}

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/Tooltip/Tooltip.d.ts

@@ -1,13 +1,12 @@
 import React from 'react';
 import { ECharts as EChartsInstance } from 'echarts/core';
 import { EChartsDataFormat } from '../model/graph';
-import { TooltipData } from './tooltip-model';
 interface TooltipProps {
     chartRef: React.MutableRefObject<EChartsInstance | undefined>;
-    tooltipData: TooltipData;
     chartData: EChartsDataFormat;
+    pinTooltip: boolean;
     wrapLabels?: boolean;
 }
-export declare function Tooltip(props: TooltipProps): JSX.Element | null;
-export {};
+declare const Tooltip: React.NamedExoticComponent<TooltipProps>;
+export { Tooltip };
 //# sourceMappingURL=Tooltip.d.ts.map

package/dist/Tooltip/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,OAAO,EAGL,WAAW,EAIZ,MAAM,iBAAiB,CAAC;AAGzB,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,WAAW,EAAE,WAAW,CAAC;IACzB,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,sBA4D1C"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/Tooltip/Tooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAMnD,UAAU,YAAY;IACpB,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IAC9D,SAAS,EAAE,iBAAiB,CAAC;IAC7B,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,OAAO,0CAqDX,CAAC;AAEH,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/Tooltip/Tooltip.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useState}from"react";import{Box,Portal}from"@mui/material";import{getFocusedSeriesData}from"./focused-series";import{TOOLTIP_MAX_HEIGHT,TOOLTIP_MAX_WIDTH,useMousePosition}from"./tooltip-model";import{TooltipContent}from"./TooltipContent";export function Tooltip(t){var o,e;const{chartRef:r,chartData:n}=t,[l,i]=useState(null),s=useMousePosition();if(null===s)return null;const a=r.current,u=getFocusedSeriesData(s,n,l,a),p=null!==(o=null==a?void 0:a.getWidth())&&void 0!==o?o:750,T=null!==(e=null==a?void 0:a.getHeight())&&void 0!==e?e:230,d=assembleTransform(s,u.length,p,T,l);return 0===u.length?null:_jsx(Portal,{children:_jsx(Box,{sx:t=>({maxWidth:TOOLTIP_MAX_WIDTH,maxHeight:TOOLTIP_MAX_HEIGHT,position:"absolute",top:0,left:0,backgroundColor:"#2E313E",borderRadius:"6px",color:"#fff",fontSize:"11px",visibility:"visible",opacity:1,transition:"all 0.1s ease-out",zIndex:t.zIndex.tooltip,overflow:"hidden","&:hover":{overflowY:"auto"}}),style:{transform:d},onMouseEnter:()=>{null!==s&&i(s)},onMouseLeave:()=>{null!==l&&i(null)},children:_jsx(TooltipContent,{focusedSeries:u,wrapLabels:t.wrapLabels})})})}function assembleTransform(t,o,e,r,n){if(null===t)return"translate3d(0, 0)";null!==n&&(t=n);const l=t.viewport.x;let i=t.viewport.y+16;const s=.75*r;!0==t.viewport.y>.8*window.innerHeight?i=o>6?.65*t.viewport.y:.75*t.viewport.y:t.plotCanvas.y>s&&(i=.85*t.viewport.y);const a=e-.9*(o>1?TOOLTIP_MAX_WIDTH:TOOLTIP_MAX_WIDTH/2);return t.plotCanvas.x>a&&l>TOOLTIP_MAX_WIDTH?`translate3d(${l-32}px, ${i}px, 0) translateX(-100%)`:`translate3d(${l+32}px, ${i}px, 0)`}
+import{jsx as _jsx}from"react/jsx-runtime";import React,{useState}from"react";import{Box,Portal}from"@mui/material";import{getFocusedSeriesData}from"./focused-series";import{TOOLTIP_MAX_HEIGHT,TOOLTIP_MAX_WIDTH,useMousePosition}from"./tooltip-model";import{TooltipContent}from"./TooltipContent";import{assembleTransform}from"./utils";const Tooltip=React.memo((function({chartRef:o,chartData:t,wrapLabels:e,pinTooltip:r}){var l,i;const[s,n]=useState(null),a=useMousePosition();if(null===a||null===a.target)return null;if(null===s&&"CANVAS"!==a.target.tagName)return null;const u=o.current,m=getFocusedSeriesData(a,t,s,u),p=null!==(l=null==u?void 0:u.getWidth())&&void 0!==l?l:750,f=null!==(i=null==u?void 0:u.getHeight())&&void 0!==i?i:230,c=assembleTransform(a,m.length,p,f,s);return 0===m.length?null:(!0===r&&null===s&&n(a),_jsx(Portal,{children:_jsx(Box,{sx:o=>({maxWidth:TOOLTIP_MAX_WIDTH,maxHeight:TOOLTIP_MAX_HEIGHT,position:"absolute",top:0,left:0,backgroundColor:"#2E313E",borderRadius:"6px",color:"#fff",fontSize:"11px",visibility:"visible",opacity:1,transition:"all 0.1s ease-out",zIndex:o.zIndex.tooltip,overflow:"hidden","&:hover":{overflowY:"auto"}}),style:{transform:c},children:_jsx(TooltipContent,{focusedSeries:m,wrapLabels:e})})}))}));export{Tooltip};

package/dist/Tooltip/focused-series.js

@@ -1 +1 @@
-import{TOOLTIP_DATE_FORMAT,TOOLTIP_MAX_ITEMS}from"./tooltip-model";export function getNearbySeries(e,t,r){var i,n,l,o,a;const s=[],u=null!==(i=t[0])&&void 0!==i?i:null,d=null!==(n=t[1])&&void 0!==n?n:null;if(null===u||null===d)return s;if(Array.isArray(e.xAxis)&&Array.isArray(e.timeSeries))for(let t=0;t<e.timeSeries.length;t++){const i=e.timeSeries[t];if(s.length>TOOLTIP_MAX_ITEMS)break;if(void 0!==i){const n=i.name?i.name.toString():"",m=null!==(l=i.color)&&void 0!==l?l:"#000";if(Array.isArray(i.data))for(let l=0;l<i.data.length;l++){const f=null!==(o=e.xAxis[l])&&void 0!==o?o:0,v=null!==(a=i.data[l])&&void 0!==a?a:0;if(u===l&&"-"!==v&&d<=v+r&&d>=v-r){const e=f>99999999999?f:1e3*f,r=TOOLTIP_DATE_FORMAT.format(e);s.push({seriesIdx:t,datumIdx:l,seriesName:n,date:r,x:f,y:v,markerColor:m.toString()})}}}}return s}export function getFocusedSeriesData(e,t,r,i){var n,l;if(void 0===i||null===e)return[];let o=!1;if(null!==e.target){const t=e.target.parentElement;if(null!==t){const e=t.parentElement;null!==e&&i.getDom()===e&&(o=!0)}}if(null!==r&&(e=r,o=!0),!1===o)return[];if(void 0===i._model)return[];const a=i._model.getComponent("yAxis").axis.scale._interval,s=t.timeSeries.length>TOOLTIP_MAX_ITEMS?.5*a:2*a,u=[null!==(n=e.plotCanvas.x)&&void 0!==n?n:0,null!==(l=e.plotCanvas.y)&&void 0!==l?l:0];if(i.containPixel("grid",u)){const e=i.convertFromPixel("grid",u);if(void 0!==e[0]&&void 0!==e[1])return getNearbySeries(t,e,s)}return[]}
+import{TOOLTIP_DATE_FORMAT,TOOLTIP_MAX_ITEMS}from"./tooltip-model";export function getNearbySeries(e,t,r){var i,n,l,o,a;const s=[],u=null!==(i=t[0])&&void 0!==i?i:null,d=null!==(n=t[1])&&void 0!==n?n:null;if(null===u||null===d)return s;if(Array.isArray(e.xAxis)&&Array.isArray(e.timeSeries))for(let t=0;t<e.timeSeries.length;t++){const i=e.timeSeries[t];if(s.length>=TOOLTIP_MAX_ITEMS)break;if(void 0!==i){const n=i.name?i.name.toString():"",m=null!==(l=i.color)&&void 0!==l?l:"#000";if(Array.isArray(i.data))for(let l=0;l<i.data.length;l++){const f=null!==(o=e.xAxis[l])&&void 0!==o?o:0,v=null!==(a=i.data[l])&&void 0!==a?a:0;if(u===l&&"-"!==v&&d<=v+r&&d>=v-r){const e=f>99999999999?f:1e3*f,r=TOOLTIP_DATE_FORMAT.format(e);s.push({seriesIdx:t,datumIdx:l,seriesName:n,date:r,x:f,y:v,markerColor:m.toString()})}}}}return s}export function getFocusedSeriesData(e,t,r,i){var n,l;if(void 0===i||null===e)return[];let o=!1;if(null!==e.target){const t=e.target.parentElement;if(null!==t){const e=t.parentElement;null!==e&&i.getDom()===e&&(o=!0)}}if(null!==r&&(e=r,o=!0),!1===o)return[];if(void 0===i._model)return[];const a=i._model.getComponent("yAxis").axis.scale._interval,s=t.timeSeries.length>TOOLTIP_MAX_ITEMS?.5*a:2*a,u=[null!==(n=e.plotCanvas.x)&&void 0!==n?n:0,null!==(l=e.plotCanvas.y)&&void 0!==l?l:0];if(i.containPixel("grid",u)){const e=i.convertFromPixel("grid",u);if(void 0!==e[0]&&void 0!==e[1])return getNearbySeries(t,e,s)}return[]}

package/dist/Tooltip/utils.d.ts

@@ -0,0 +1,6 @@
+import { CursorCoordinates, CursorData } from './tooltip-model';
+/**
+ * Determine position of tooltip depending on chart dimensions and the number of focused series
+ */
+export declare function assembleTransform(mousePos: CursorData['coords'], seriesNum: number, chartWidth: number, chartHeight: number, pinnedPos: CursorCoordinates | null): string;
+//# sourceMappingURL=utils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/Tooltip/utils.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAqB,MAAM,iBAAiB,CAAC;AAEnF;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,MAAM,EACjB,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,MAAM,EACnB,SAAS,EAAE,iBAAiB,GAAG,IAAI,UAoCpC"}

package/dist/Tooltip/utils.js

@@ -0,0 +1 @@
+import{TOOLTIP_MAX_WIDTH}from"./tooltip-model";export function assembleTransform(t,o,r,e,n){if(null===t)return"translate3d(0, 0)";null!==n&&(t=n);const p=t.viewport.x;let a=t.viewport.y+16;const l=.75*e;!0==t.viewport.y>.8*window.innerHeight?a=o>6?.65*t.viewport.y:.75*t.viewport.y:t.plotCanvas.y>l&&(a=.85*t.viewport.y);const i=r-.9*(o>1?TOOLTIP_MAX_WIDTH:TOOLTIP_MAX_WIDTH/2);return t.plotCanvas.x>i&&p>TOOLTIP_MAX_WIDTH?`translate3d(${p-32}px, ${a}px, 0) translateX(-100%)`:`translate3d(${p+32}px, ${a}px, 0)`}

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/LineChart/LineChart.js

@@ -25,7 +25,6 @@ const EChart_1 = require("../EChart");
 const graph_1 = require("../model/graph");
 const units_1 = require("../model/units");
 const ChartsThemeProvider_1 = require("../context/ChartsThemeProvider");
-const tooltip_model_1 = require("../Tooltip/tooltip-model");
 const Tooltip_1 = require("../Tooltip/Tooltip");
 const utils_1 = require("./utils");
 (0, core_2.use)([
@@ -46,11 +45,17 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom })
     const chartsTheme = (0, ChartsThemeProvider_1.useChartsTheme)();
     const chartRef = (0, react_1.useRef)();
     const [showTooltip, setShowTooltip] = (0, react_1.useState)(true);
+    const [pinTooltip, setPinTooltip] = (0, react_1.useState)(false);
     const handleEvents = (0, react_1.useMemo)(() => {
         return {
-            // TODO: use legendselectchanged event to fix tooltip when legend selected
             datazoom: (params) => {
                 var _a, _b;
+                if (onDataZoom === undefined) {
+                    setTimeout(() => {
+                        // workaround so unpin happens after click event
+                        setPinTooltip(false);
+                    }, 10);
+                }
                 if (onDataZoom === undefined || params.batch[0] === undefined)
                     return;
                 const startIndex = (_a = params.batch[0].startValue) !== null && _a !== void 0 ? _a : 0;
@@ -67,12 +72,15 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom })
                     onDataZoom(zoomEvent);
                 }
             },
+            // TODO: use legendselectchanged event to fix tooltip when legend selected
         };
-    }, [data, onDataZoom]);
+    }, [data, onDataZoom, setPinTooltip]);
     if (chartRef.current !== undefined) {
         (0, utils_1.enableDataZoom)(chartRef.current);
     }
+    const handleOnClick = () => setPinTooltip((current) => !current);
     const handleOnDoubleClick = () => {
+        setPinTooltip(false);
         if (chartRef.current !== undefined) {
             (0, utils_1.restoreChart)(chartRef.current);
         }
@@ -91,6 +99,7 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom })
     };
     const handleOnMouseLeave = () => {
         setShowTooltip(false);
+        setPinTooltip(false);
     };
     const option = (0, core_1.useDeepMemo)(() => {
         var _a;
@@ -146,7 +155,7 @@ function LineChart({ height, data, unit, grid, legend, visualMap, onDataZoom })
     }, [data, grid, legend, visualMap]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             height,
-        }, onDoubleClick: handleOnDoubleClick, onMouseDown: handleOnMouseDown, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseLeave, onMouseEnter: handleOnMouseEnter, children: [showTooltip === true && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { chartRef: chartRef, tooltipData: tooltip_model_1.emptyTooltipData, chartData: data, wrapLabels: true })), (0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
+        }, onClick: handleOnClick, onDoubleClick: handleOnDoubleClick, onMouseDown: handleOnMouseDown, onMouseUp: handleOnMouseUp, onMouseLeave: handleOnMouseLeave, onMouseEnter: handleOnMouseEnter, children: [showTooltip === true && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { chartRef: chartRef, chartData: data, wrapLabels: true, pinTooltip: pinTooltip })), (0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
                     width: '100%',
                     height: '100%',
                 }, option: option, theme: chartsTheme.themeName, onEvents: handleEvents, _instance: chartRef })] }));

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/Tooltip/Tooltip.js

@@ -1,4 +1,27 @@
 "use strict";
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -14,36 +37,32 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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 react_1 = __importStar(require("react"));
 const material_1 = require("@mui/material");
 const focused_series_1 = require("./focused-series");
 const tooltip_model_1 = require("./tooltip-model");
 const TooltipContent_1 = require("./TooltipContent");
-function Tooltip(props) {
+const utils_1 = require("./utils");
+const Tooltip = react_1.default.memo(function Tooltip({ chartRef, chartData, wrapLabels, pinTooltip }) {
     var _a, _b;
-    const { chartRef, chartData } = props;
     const [pinnedPos, setPinnedPos] = (0, react_1.useState)(null);
     const mousePos = (0, tooltip_model_1.useMousePosition)();
-    if (mousePos === null)
+    if (mousePos === null || mousePos.target === null)
+        return null;
+    // ensure user is hovering over a chart before checking for nearby series
+    if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS')
         return null;
     const chart = chartRef.current;
     const focusedSeries = (0, focused_series_1.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart);
     const chartWidth = (_a = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && _a !== void 0 ? _a : 750;
     const chartHeight = (_b = chart === null || chart === void 0 ? void 0 : chart.getHeight()) !== null && _b !== void 0 ? _b : 230;
-    const cursorTransform = assembleTransform(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
-    function handleMouseEnter() {
-        if (mousePos !== null) {
-            setPinnedPos(mousePos);
-        }
-    }
-    function handleMouseLeave() {
-        if (pinnedPos !== null) {
-            setPinnedPos(null);
-        }
-    }
+    const cursorTransform = (0, utils_1.assembleTransform)(mousePos, focusedSeries.length, chartWidth, chartHeight, pinnedPos);
     if (focusedSeries.length === 0) {
         return null;
     }
+    if (pinTooltip === true && pinnedPos === null) {
+        setPinnedPos(mousePos);
+    }
     return ((0, jsx_runtime_1.jsx)(material_1.Portal, { children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: (theme) => ({
                 maxWidth: tooltip_model_1.TOOLTIP_MAX_WIDTH,
                 maxHeight: tooltip_model_1.TOOLTIP_MAX_HEIGHT,
@@ -64,39 +83,6 @@ function Tooltip(props) {
                 },
             }), style: {
                 transform: cursorTransform,
-            }, onMouseEnter: () => handleMouseEnter(), onMouseLeave: () => handleMouseLeave(), children: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, { focusedSeries: focusedSeries, wrapLabels: props.wrapLabels }) }) }));
-}
+            }, children: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, { focusedSeries: focusedSeries, wrapLabels: wrapLabels }) }) }));
+});
 exports.Tooltip = Tooltip;
-function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedPos) {
-    if (mousePos === null) {
-        return 'translate3d(0, 0)';
-    }
-    if (pinnedPos !== null) {
-        mousePos = pinnedPos;
-    }
-    const cursorPaddingX = 32;
-    const cursorPaddingY = 16;
-    const x = mousePos.viewport.x;
-    let y = mousePos.viewport.y + cursorPaddingY;
-    const isCloseToBottom = mousePos.viewport.y > window.innerHeight * 0.8;
-    const yPosAdjustThreshold = chartHeight * 0.75;
-    // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up
-    if (isCloseToBottom === true) {
-        if (seriesNum > 6) {
-            y = mousePos.viewport.y * 0.65;
-        }
-        else {
-            y = mousePos.viewport.y * 0.75;
-        }
-    }
-    else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
-        y = mousePos.viewport.y * 0.85;
-    }
-    // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)
-    const tooltipWidth = seriesNum > 1 ? tooltip_model_1.TOOLTIP_MAX_WIDTH : tooltip_model_1.TOOLTIP_MAX_WIDTH / 2;
-    const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
-    // reposition so tooltip is never too close to right side of chart or left side of browser window
-    return mousePos.plotCanvas.x > xPosAdjustThreshold && x > tooltip_model_1.TOOLTIP_MAX_WIDTH
-        ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)`
-        : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
-}

package/dist/cjs/Tooltip/focused-series.js

@@ -29,7 +29,7 @@ function getNearbySeries(data, pointInGrid, yBuffer) {
     if (Array.isArray(data.xAxis) && Array.isArray(data.timeSeries)) {
         for (let seriesIdx = 0; seriesIdx < data.timeSeries.length; seriesIdx++) {
             const currentSeries = data.timeSeries[seriesIdx];
-            if (currentFocusedData.length > tooltip_model_1.TOOLTIP_MAX_ITEMS)
+            if (currentFocusedData.length >= tooltip_model_1.TOOLTIP_MAX_ITEMS)
                 break;
             if (currentSeries !== undefined) {
                 const currentSeriesName = currentSeries.name ? currentSeries.name.toString() : '';

package/dist/cjs/Tooltip/utils.js

@@ -0,0 +1,53 @@
+"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.assembleTransform = void 0;
+const tooltip_model_1 = require("./tooltip-model");
+/**
+ * Determine position of tooltip depending on chart dimensions and the number of focused series
+ */
+function assembleTransform(mousePos, seriesNum, chartWidth, chartHeight, pinnedPos) {
+    if (mousePos === null) {
+        return 'translate3d(0, 0)';
+    }
+    if (pinnedPos !== null) {
+        mousePos = pinnedPos;
+    }
+    const cursorPaddingX = 32;
+    const cursorPaddingY = 16;
+    const x = mousePos.viewport.x;
+    let y = mousePos.viewport.y + cursorPaddingY;
+    const isCloseToBottom = mousePos.viewport.y > window.innerHeight * 0.8;
+    const yPosAdjustThreshold = chartHeight * 0.75;
+    // adjust so tooltip does not get cut off at bottom of chart, reduce multiplier to move up
+    if (isCloseToBottom === true) {
+        if (seriesNum > 6) {
+            y = mousePos.viewport.y * 0.65;
+        }
+        else {
+            y = mousePos.viewport.y * 0.75;
+        }
+    }
+    else if (mousePos.plotCanvas.y > yPosAdjustThreshold) {
+        y = mousePos.viewport.y * 0.85;
+    }
+    // use tooltip width to determine when to repos from right to left (width is narrower when only 1 focused series since labels wrap)
+    const tooltipWidth = seriesNum > 1 ? tooltip_model_1.TOOLTIP_MAX_WIDTH : tooltip_model_1.TOOLTIP_MAX_WIDTH / 2;
+    const xPosAdjustThreshold = chartWidth - tooltipWidth * 0.9;
+    // reposition so tooltip is never too close to right side of chart or left side of browser window
+    return mousePos.plotCanvas.x > xPosAdjustThreshold && x > tooltip_model_1.TOOLTIP_MAX_WIDTH
+        ? `translate3d(${x - cursorPaddingX}px, ${y}px, 0) translateX(-100%)`
+        : `translate3d(${x + cursorPaddingX}px, ${y}px, 0)`;
+}
+exports.assembleTransform = assembleTransform;

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.5.1",
+  "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,14 +24,17 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/core": "^0.5.1",
+    "@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"
   },
   "peerDependencies": {
     "@mui/material": "^5.5.1",
-    "react": "^17.0.2"
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "files": [
     "dist"