@perses-dev/components 0.3.1 → 0.4.2

package/dist/{ECharts.d.ts → EChart.d.ts}

@@ -49,11 +49,10 @@ export declare type OnEventsType<T> = {
 export interface EChartsProps<T> {
     option: EChartsCoreOption;
     sx?: SxProps<Theme>;
-    onChartInitialized?: (instance: ECharts) => void;
     onEvents?: OnEventsType<T>;
     _instance?: React.MutableRefObject<ECharts | undefined>;
-    parentContainer?: HTMLDivElement | null;
+    onChartInitialized?: (instance: ECharts) => void;
 }
-export declare function ECharts<T>({ sx, _instance, onChartInitialized, option, onEvents }: EChartsProps<T>): JSX.Element;
+export declare const EChart: React.MemoExoticComponent<(<T>({ option, sx, onEvents, _instance, onChartInitialized, }: EChartsProps<T>) => JSX.Element)>;
 export {};
-//# sourceMappingURL=ECharts.d.ts.map
+//# sourceMappingURL=EChart.d.ts.map

package/dist/EChart.d.ts.map

@@ -0,0 +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;AAIpD,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,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,4HAgEjB,CAAC"}

package/dist/EChart.js

@@ -0,0 +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,sx:n,onEvents:t,_instance:r,onChartInitialized:o}){const u=useRef(e),s=useRef(e),c=useRef(null),i=useRef(null);return useLayoutEffect((()=>{if(null!==c.current&&null===i.current)return i.current=init(c.current),i.current.setOption(u.current,!0),null==o||o(i.current),void 0!==r&&(r.current=i.current),()=>{null!==i.current&&(i.current.dispose(),i.current=null)}}),[r,o]),useEffect((()=>{void 0===s.current||isEqual(s.current,e)||null!==i.current&&(i.current.setOption(e,!0),s.current=e)}),[e]),useLayoutEffect((()=>{const e=debounce((()=>{null!==i.current&&i.current.resize()}),200);return window.addEventListener("resize",e),e(),()=>{window.removeEventListener("resize",e)}}),[]),useEffect((()=>{const e=i.current;if(null!==e&&void 0!==t)return bindEvents(e,t),()=>{if(void 0!==e&&!0!==e.isDisposed())for(const n in t)e.off(n)}}),[t]),_jsx(Box,{ref:c,sx:n})}));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)}

package/dist/GaugeChart.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useMemo}from"react";import{use}from"echarts/core";import{GaugeChart as EChartsGaugeChart}from"echarts/charts";import{GridComponent,TitleComponent,TooltipComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{formatValue}from"./model/units";import{ECharts}from"./ECharts";use([EChartsGaugeChart,GridComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function GaugeChart(t){const{width:e,height:o,data:i,unit:r,axisLine:s}=t,a=useMemo((()=>null==i?noDataOption:{title:{show:!1},tooltip:{show:!1},series:[{type:"gauge",center:["50%","65%"],radius:"100%",startAngle:200,endAngle:-20,min:0,max:100,splitNumber:12,silent:!0,progress:{show:!0,width:22,itemStyle:{color:"auto"}},pointer:{show:!1},axisLine:{lineStyle:{color:[[1,"#e1e5e9"]],width:22}},axisTick:{show:!1,distance:-28,splitNumber:5,lineStyle:{width:2,color:"#999"}},splitLine:{show:!1,distance:-32,length:6,lineStyle:{width:2,color:"#999"}},axisLabel:{show:!1,distance:-18,color:"#999",fontSize:12},anchor:{show:!1},title:{show:!1},detail:{show:!1},data:[{value:i}]},{type:"gauge",center:["50%","65%"],radius:"114%",startAngle:200,endAngle:-20,min:0,max:100,pointer:{show:!1,itemStyle:{color:"auto"}},axisLine:s,axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1},detail:{show:!0,valueAnimation:!1,width:"60%",borderRadius:8,offsetCenter:[0,"-9%"],fontSize:20,fontWeight:"bolder",color:"inherit",formatter:t=>formatValue(t,{kind:r.kind,decimal_places:0})},data:[{value:i}]}]}),[i,r,s]);return _jsx(ECharts,{sx:{width:e,height:o},option:a})}
+import{jsx as _jsx}from"react/jsx-runtime";import{useMemo}from"react";import{use}from"echarts/core";import{GaugeChart as EChartsGaugeChart}from"echarts/charts";import{GridComponent,TitleComponent,TooltipComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{formatValue}from"./model/units";import{EChart}from"./EChart";use([EChartsGaugeChart,GridComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function GaugeChart(t){const{width:e,height:o,data:i,unit:r,axisLine:a}=t,s=useMemo((()=>null==i?noDataOption:{title:{show:!1},tooltip:{show:!1},series:[{type:"gauge",center:["50%","65%"],radius:"100%",startAngle:200,endAngle:-20,min:0,max:100,splitNumber:12,silent:!0,progress:{show:!0,width:22,itemStyle:{color:"auto"}},pointer:{show:!1},axisLine:{lineStyle:{color:[[1,"#e1e5e9"]],width:22}},axisTick:{show:!1,distance:-28,splitNumber:5,lineStyle:{width:2,color:"#999"}},splitLine:{show:!1,distance:-32,length:6,lineStyle:{width:2,color:"#999"}},axisLabel:{show:!1,distance:-18,color:"#999",fontSize:12},anchor:{show:!1},title:{show:!1},detail:{show:!1},data:[{value:i}]},{type:"gauge",center:["50%","65%"],radius:"114%",startAngle:200,endAngle:-20,min:0,max:100,pointer:{show:!1,itemStyle:{color:"auto"}},axisLine:a,axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1},detail:{show:!0,valueAnimation:!1,width:"60%",borderRadius:8,offsetCenter:[0,"-9%"],fontSize:20,fontWeight:"bolder",color:"inherit",formatter:t=>formatValue(t,{kind:r.kind,decimal_places:0})},data:[{value:i}]}]}),[i,r,a]);return _jsx(EChart,{sx:{width:e,height:o},option:s})}

package/dist/LineChart.d.ts

@@ -17,6 +17,6 @@ interface LineChartProps {
     dataZoomEnabled?: boolean;
     onDataZoom?: (e: ZoomEventData) => void;
 }
-export declare function LineChart(props: LineChartProps): JSX.Element;
+export declare function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEnabled, onDataZoom, }: LineChartProps): JSX.Element;
 export {};
 //# sourceMappingURL=LineChart.d.ts.map

package/dist/LineChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../src/LineChart.tsx"],"names":[],"mappings":";AAgBA,OAAO,KAAK,EAEV,mBAAmB,EACnB,qBAAqB,EAErB,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAyCvF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAsL9C"}
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../src/LineChart.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAEV,mBAAmB,EAEnB,qBAAqB,EACrB,sBAAsB,EACtB,wBAAwB,EACzB,MAAM,SAAS,CAAC;AAiBjB,OAAO,EAAiC,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAyCvF,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,iBAAiB,CAAC;IACxB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC,SAAS,CAAC,EAAE,wBAAwB,EAAE,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CACzC;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,OAAO,EACP,SAAS,EACT,eAAe,EACf,UAAU,GACX,EAAE,cAAc,eAwLhB"}

package/dist/LineChart.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useMemo,useRef,useState}from"react";import{Box,useTheme}from"@mui/material";import merge from"lodash/merge";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{ECharts}from"./ECharts";import{PROGRESSIVE_MODE_SERIES_LIMIT}from"./model/graph-model";import{abbreviateLargeNumber}from"./model/units";import{emptyTooltipData}from"./tooltip/tooltip-model";import{Tooltip}from"./tooltip/Tooltip";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function LineChart(e){const{height:t,data:o,grid:r,legend:a,toolbox:n,dataZoomEnabled:i,onDataZoom:s}=e,m=useTheme(),l=useRef(),[p,d]=useState(!0),h=useMemo((()=>({datazoom:e=>{var t,r;if(void 0===s||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,i=o.xAxis[a],m=o.xAxis[n];void 0!==i&&void 0!==m&&s({start:i,end:m,startIndex:a,endIndex:n})}})),[o,s]);void 0!==l.current&&!0===i&&l.current.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0});const u=useMemo((()=>{if(void 0===o.timeSeries)return{};if(null===o.timeSeries||0===o.timeSeries.length)return noDataOption;const e=o.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,t={show:!0,backgroundColor:"dark"===m.palette.mode?m.palette.grey[100]:m.palette.background.paper,borderColor:m.palette.grey[300],top:10,right:20,bottom:0,left:20,containLabel:!0},s={show:!0,top:10,right:10,iconStyle:{borderColor:m.palette.text.primary},feature:{dataZoom:{icon:i?null:void 0,yAxisIndex:"none"},restore:{}},emphasis:{iconStyle:{textFill:m.palette.text.primary}}};return!1===i&&delete s.feature.dataZoom.icon,{title:{show:!1},grid:merge(t,r),toolbox:merge(s,n),series:o.timeSeries,xAxis:{type:"category",data:o.xAxis,axisLabel:{color:m.palette.text.primary,margin:12,formatter:e=>getFormattedDate(e)},axisTick:{show:!0,length:6},axisLine:{lineStyle:{color:m.palette.grey[600]}}},yAxis:{type:"value",boundaryGap:["10%","10%"],axisLabel:{showMinLabel:!1,showMaxLabel:!0,color:m.palette.text.primary,formatter:e=>abbreviateLargeNumber(e)},splitLine:{lineStyle:{color:m.palette.grey[300]}}},animation:!1,tooltip:{show:e,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},legend:a}}),[o,m,r,a,n,i]);return _jsxs(Box,{sx:{height:t},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&d(!1)},onMouseUp:()=>{d(!0)},onMouseLeave:()=>{d(!1)},onMouseEnter:()=>{d(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:l,tooltipData:emptyTooltipData,chartData:o,wrapLabels:!0}),_jsx(ECharts,{sx:{width:"100%",height:"100%"},option:u,onEvents:h,_instance:l})]})}function getFormattedDate(e){return new Intl.DateTimeFormat(void 0,{hour:"numeric",minute:"numeric",hour12:!1}).format(1e3*e)}
+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,useTheme}from"@mui/material";import merge from"lodash/merge";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-model";import{abbreviateLargeNumber}from"./model/units";import{emptyTooltipData}from"./tooltip/tooltip-model";import{Tooltip}from"./tooltip/Tooltip";use([EChartsLineChart,GridComponent,DataZoomComponent,MarkAreaComponent,MarkLineComponent,MarkPointComponent,TitleComponent,ToolboxComponent,TooltipComponent,LegendComponent,VisualMapComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function LineChart({height:e,data:t,grid:o,legend:r,toolbox:n,visualMap:a,dataZoomEnabled:i,onDataZoom:s}){const m=useTheme(),l=useRef(),[p,c]=useState(!0),u=useMemo((()=>({datazoom:e=>{var o,r;if(void 0===s||void 0===e.batch[0])return;const n=null!==(o=e.batch[0].startValue)&&void 0!==o?o:0,a=null!==(r=e.batch[0].endValue)&&void 0!==r?r:t.xAxis.length-1,i=t.xAxis[n],m=t.xAxis[a];void 0!==i&&void 0!==m&&s({start:i,end:m,startIndex:n,endIndex:a})}})),[t,s]);void 0!==l.current&&!0===i&&l.current.dispatchAction({type:"takeGlobalCursor",key:"dataZoomSelect",dataZoomSelectActive:!0});const d=useDeepMemo((()=>{var e;if(void 0===t.timeSeries)return{};if(null===t.timeSeries||0===t.timeSeries.length)return noDataOption;const s=t.timeSeries.length<PROGRESSIVE_MODE_SERIES_LIMIT,l={show:!0,top:10,right:10,iconStyle:{borderColor:m.palette.text.primary},feature:{dataZoom:{icon:i?null:void 0,yAxisIndex:"none"},restore:{}},emphasis:{iconStyle:{textFill:m.palette.text.primary}}};!1===i&&delete l.feature.dataZoom.icon;const p=null!==(e=t.rangeMs)&&void 0!==e?e:getDateRange(t.xAxis);return{title:{show:!1},grid:merge({top:10,right:20,bottom:5,left:20,containLabel:!0},o),toolbox:merge(l,n),series:t.timeSeries,xAxis:{type:"category",data:t.xAxis,max:t.xAxisMax,axisLabel:{margin:15,color:m.palette.text.primary,formatter:e=>getFormattedDate(e,p)},axisTick:{show:!1},axisLine:{lineStyle:{color:m.palette.grey[600]}}},yAxis:{type:"value",boundaryGap:[0,"10%"],axisLabel:{margin:12,color:m.palette.text.primary,formatter:e=>abbreviateLargeNumber(e)},splitLine:{show:!0,lineStyle:{width:.5,color:m.palette.grey[300],opacity:.95}}},animation:!1,tooltip:{show:s,trigger:"axis",showContent:!1,axisPointer:{type:"none"}},legend:r,visualMap:a}}),[t,m,o,r,n,i,a]);return _jsxs(Box,{sx:{height:e},onMouseDown:e=>{e.target instanceof HTMLCanvasElement&&c(!1)},onMouseUp:()=>{c(!0)},onMouseLeave:()=>{c(!1)},onMouseEnter:()=>{c(!0)},children:[!0===p&&_jsx(Tooltip,{chartRef:l,tooltipData:emptyTooltipData,chartData:t,wrapLabels:!0}),_jsx(EChart,{sx:{width:"100%",height:"100%"},option:d,onEvents:u,_instance:l})]})}function getDateRange(e){const t=36e5;if(0===e.length)return t;const o=e[e.length-1];return void 0===e[0]||void 0===o?t:o-e[0]}function getFormattedDate(e,t){const o={hour:"numeric",minute:"numeric",hourCycle:"h23"};return t<=18e5?o.second="numeric":t>=864e5&&(o.month="numeric",o.day="numeric"),new Intl.DateTimeFormat(void 0,o).format(e).replace(/, /g," ")}

package/dist/StatChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../src/StatChart.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjF,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAiC5D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,aAAa;IAC5B,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA8J9C"}
+{"version":3,"file":"StatChart.d.ts","sourceRoot":"","sources":["../src/StatChart.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAiC,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjF,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAiC5D,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,QAAQ,CAAC,qBAAqB,CAAC,CAAC;CACzC;AAED,MAAM,WAAW,aAAa;IAC5B,eAAe,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,UAAU,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IAC3C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,aAAa,CAAC;IACpB,IAAI,EAAE,WAAW,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,gBAAgB,CAAC;CAC9B;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eA+J9C"}

package/dist/StatChart.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{useMemo}from"react";import{merge}from"lodash-es";import{use}from"echarts/core";import{GaugeChart as EChartsGaugeChart}from"echarts/charts";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DatasetComponent,TitleComponent,TooltipComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{formatValue}from"./model/units";import{ECharts}from"./ECharts";use([EChartsGaugeChart,EChartsLineChart,GridComponent,DatasetComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function StatChart(t){const{width:e,height:o,data:a,unit:r,backgroundColor:i,sparkline:n}=t,s=useMemo((()=>{var t;if(void 0===a.seriesData)return{};if(null===a.seriesData||void 0===a.calculatedValue)return noDataOption;const s=a.seriesData,h=null!==(t=a.calculatedValue)&&void 0!==t?t:0,l=e>250,m=!0===l?a.name:"",p=Math.min(e,1.2*o),c=Math.min(p/4*.65,72),d=.5*c,u=[{type:"gauge",data:[{value:h,name:m}],detail:{show:!0,offsetCenter:["0%","-65%"],formatter:[`{name|${m}}`,`{value|${formatValue(h,r)}}`].join("\n"),rich:{name:{padding:!0===l?[0,0,5,0]:0,fontSize:d,lineHeight:2.5*d,fontWeight:500},value:{}}},center:["50%","60%"],animation:!1,silent:!0,title:{show:!1},progress:{show:!1},pointer:{show:!1},axisLine:{show:!1},axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1},anchor:{show:!1},zlevel:2}];if(void 0!==n){const t={type:"line",data:[...s.values],zlevel:1,symbol:"none",animation:!1,lineStyle:{color:"#FFFFFF",opacity:.6},areaStyle:{color:"#FFFFFF",opacity:.3},silent:!0},e=merge(t,n);u.push(e)}return{title:{show:!1},grid:[{show:!0,backgroundColor:i,top:0,right:0,bottom:0,left:0,containLabel:!1,borderWidth:0},{show:!1,top:"45%",right:0,bottom:0,left:0,containLabel:!1}],xAxis:{type:"time",show:!1,boundaryGap:!1,gridIndex:1},yAxis:{type:"value",show:!1,gridIndex:1},tooltip:{show:!1},series:u,textStyle:{color:"transparent"===i?"#000000":"#FFFFFF",fontSize:25,lineHeight:18,fontFamily:'"Lato", sans-serif',fontWeight:"bold"},media:[{query:{maxWidth:150},option:{textStyle:{fontSize:12}}},{query:{minWidth:150},option:{textStyle:{fontSize:`max(14px, ${c}px)`,lineHeight:Math.min(16,1.2*c)}}}]}}),[a,o,r,e,n,i]);return _jsx(ECharts,{sx:{width:e,height:o},option:s})}
+import{jsx as _jsx}from"react/jsx-runtime";import{useMemo}from"react";import{useTheme}from"@mui/material";import{merge}from"lodash-es";import{use}from"echarts/core";import{GaugeChart as EChartsGaugeChart}from"echarts/charts";import{LineChart as EChartsLineChart}from"echarts/charts";import{GridComponent,DatasetComponent,TitleComponent,TooltipComponent}from"echarts/components";import{CanvasRenderer}from"echarts/renderers";import{formatValue}from"./model/units";import{EChart}from"./EChart";use([EChartsGaugeChart,EChartsLineChart,GridComponent,DatasetComponent,TitleComponent,TooltipComponent,CanvasRenderer]);const noDataOption={title:{show:!0,textStyle:{color:"grey",fontSize:16,fontWeight:400},text:"No data",left:"center",top:"center"},xAxis:{show:!1},yAxis:{show:!1},series:[]};export function StatChart(t){const{width:e,height:o,data:a,unit:r,backgroundColor:i,sparkline:n}=t,s=useTheme(),h=useMemo((()=>{var t;if(void 0===a.seriesData)return{};if(null===a.seriesData||void 0===a.calculatedValue)return noDataOption;const h=a.seriesData,l=null!==(t=a.calculatedValue)&&void 0!==t?t:0,m=e>250,p=!0===m?a.name:"",u=Math.min(e,1.2*o),c=Math.min(u/4*.65,72),d=.5*c,f=[{type:"gauge",data:[{value:l,name:p}],detail:{show:!0,offsetCenter:["0%","-65%"],formatter:[`{name|${p}}`,`{value|${formatValue(l,r)}}`].join("\n"),rich:{name:{padding:!0===m?[0,0,5,0]:0,fontSize:d,lineHeight:2.5*d,fontWeight:500},value:{}}},center:["50%","60%"],animation:!1,silent:!0,title:{show:!1},progress:{show:!1},pointer:{show:!1},axisLine:{show:!1},axisTick:{show:!1},splitLine:{show:!1},axisLabel:{show:!1},anchor:{show:!1},zlevel:2}];if(void 0!==n){const t={type:"line",data:[...h.values],zlevel:1,symbol:"none",animation:!1,lineStyle:{color:"#FFFFFF",opacity:.6},areaStyle:{color:"#FFFFFF",opacity:.3},silent:!0},e=merge(t,n);f.push(e)}return{title:{show:!1},grid:[{show:!0,backgroundColor:i,top:0,right:0,bottom:0,left:0,containLabel:!1,borderWidth:0},{show:!1,top:"45%",right:0,bottom:0,left:0,containLabel:!1}],xAxis:{type:"time",show:!1,boundaryGap:!1,gridIndex:1},yAxis:{type:"value",show:!1,gridIndex:1},tooltip:{show:!1},series:f,textStyle:{color:"transparent"===i?s.palette.text.primary:"#FFFFFF",fontSize:25,lineHeight:18,fontFamily:'"Lato", sans-serif',fontWeight:"bold"},media:[{query:{maxWidth:150},option:{textStyle:{fontSize:12}}},{query:{minWidth:150},option:{textStyle:{fontSize:`max(14px, ${c}px)`,lineHeight:Math.min(16,1.2*c)}}}]}}),[a,o,s,r,e,n,i]);return _jsx(EChart,{sx:{width:e,height:o},option:h})}

package/dist/cjs/EChart.js

@@ -0,0 +1,154 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EChart = 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 = __importStar(require("react"));
+const debounce_1 = __importDefault(require("lodash/debounce"));
+const core_1 = require("echarts/core");
+const material_1 = require("@mui/material");
+const lodash_es_1 = require("lodash-es");
+const mouseEvents = [
+    'click',
+    'dblclick',
+    'mousedown',
+    'mousemove',
+    'mouseup',
+    'mouseover',
+    'mouseout',
+    'globalout',
+    'contextmenu',
+];
+const batchEvents = ['datazoom', 'downplay', 'highlight'];
+exports.EChart = react_1.default.memo(function EChart({ option, sx, onEvents, _instance, onChartInitialized, }) {
+    const initialOption = (0, react_1.useRef)(option);
+    const prevOption = (0, react_1.useRef)(option);
+    const containerRef = (0, react_1.useRef)(null);
+    const chartElement = (0, react_1.useRef)(null);
+    // Initialize chart, dispose on unmount
+    (0, react_1.useLayoutEffect)(() => {
+        if (containerRef.current === null || chartElement.current !== null)
+            return;
+        chartElement.current = (0, core_1.init)(containerRef.current);
+        chartElement.current.setOption(initialOption.current, true);
+        onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chartElement.current);
+        if (_instance !== undefined) {
+            _instance.current = chartElement.current;
+        }
+        return () => {
+            if (chartElement.current === null)
+                return;
+            chartElement.current.dispose();
+            chartElement.current = null;
+        };
+    }, [_instance, onChartInitialized]);
+    // Update chart data when option changes
+    (0, react_1.useEffect)(() => {
+        if (prevOption.current === undefined || (0, lodash_es_1.isEqual)(prevOption.current, option))
+            return;
+        if (chartElement.current === null)
+            return;
+        chartElement.current.setOption(option, true);
+        prevOption.current = option;
+    }, [option]);
+    // Resize chart, cleanup listener on unmount
+    (0, react_1.useLayoutEffect)(() => {
+        const updateSize = (0, debounce_1.default)(() => {
+            if (chartElement.current === null)
+                return;
+            chartElement.current.resize();
+        }, 200);
+        window.addEventListener('resize', updateSize);
+        updateSize();
+        return () => {
+            window.removeEventListener('resize', updateSize);
+        };
+    }, []);
+    // Bind and unbind chart events passed as prop
+    (0, react_1.useEffect)(() => {
+        const chart = chartElement.current;
+        if (chart === null || onEvents === undefined)
+            return;
+        bindEvents(chart, onEvents);
+        return () => {
+            if (chart === undefined)
+                return;
+            if (chart.isDisposed() === true)
+                return;
+            for (const event in onEvents) {
+                chart.off(event);
+            }
+        };
+    }, [onEvents]);
+    return (0, jsx_runtime_1.jsx)(material_1.Box, { ref: containerRef, sx: sx });
+});
+// Validate event config and bind custom events
+function bindEvents(instance, events) {
+    var _a;
+    if (events === undefined)
+        return;
+    function bindEvent(eventName, OnEventFunction) {
+        if (typeof OnEventFunction === 'function') {
+            if (isMouseEvent(eventName)) {
+                instance.on(eventName, (params) => OnEventFunction(params, instance));
+            }
+            else if (isBatchEvent(eventName)) {
+                instance.on(eventName, (params) => OnEventFunction(params));
+            }
+            else {
+                instance.on(eventName, () => OnEventFunction(null, instance));
+            }
+        }
+    }
+    for (const eventName in events) {
+        if (Object.prototype.hasOwnProperty.call(events, eventName)) {
+            const customEvent = (_a = events[eventName]) !== null && _a !== void 0 ? _a : null;
+            if (customEvent) {
+                bindEvent(eventName, customEvent);
+            }
+        }
+    }
+}
+function isMouseEvent(eventName) {
+    return mouseEvents.includes(eventName);
+}
+function isBatchEvent(eventName) {
+    return batchEvents.includes(eventName);
+}

package/dist/cjs/GaugeChart.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GaugeChart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -20,7 +20,7 @@ const charts_1 = require("echarts/charts");
 const components_1 = require("echarts/components");
 const renderers_1 = require("echarts/renderers");
 const units_1 = require("./model/units");
-const ECharts_1 = require("./ECharts");
+const EChart_1 = require("./EChart");
 (0, core_1.use)([charts_1.GaugeChart, components_1.GridComponent, components_1.TitleComponent, components_1.TooltipComponent, renderers_1.CanvasRenderer]);
 const noDataOption = {
     title: {
@@ -170,7 +170,7 @@ function GaugeChart(props) {
             ],
         };
     }, [data, unit, axisLine]);
-    return ((0, jsx_runtime_1.jsx)(ECharts_1.ECharts, { sx: {
+    return ((0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
             width: width,
             height: height,
         }, option: option }));

package/dist/cjs/LineChart.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LineChart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -18,18 +18,19 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // See the License for the specific language governing permissions and
 // limitations under the License.
 const react_1 = require("react");
+const core_1 = require("@perses-dev/core");
 const material_1 = require("@mui/material");
 const merge_1 = __importDefault(require("lodash/merge"));
-const core_1 = require("echarts/core");
+const core_2 = require("echarts/core");
 const charts_1 = require("echarts/charts");
 const components_1 = require("echarts/components");
 const renderers_1 = require("echarts/renderers");
-const ECharts_1 = require("./ECharts");
+const EChart_1 = require("./EChart");
 const graph_model_1 = require("./model/graph-model");
 const units_1 = require("./model/units");
 const tooltip_model_1 = require("./tooltip/tooltip-model");
 const Tooltip_1 = require("./tooltip/Tooltip");
-(0, core_1.use)([
+(0, core_2.use)([
     charts_1.LineChart,
     components_1.GridComponent,
     components_1.DataZoomComponent,
@@ -63,8 +64,7 @@ const noDataOption = {
     },
     series: [],
 };
-function LineChart(props) {
-    const { height, data, grid, legend, toolbox, dataZoomEnabled, onDataZoom } = props;
+function LineChart({ height, data, grid, legend, toolbox, visualMap, dataZoomEnabled, onDataZoom, }) {
     const theme = (0, material_1.useTheme)();
     const chartRef = (0, react_1.useRef)();
     const [showTooltip, setShowTooltip] = (0, react_1.useState)(true);
@@ -113,19 +113,17 @@ function LineChart(props) {
     const handleOnMouseLeave = () => {
         setShowTooltip(false);
     };
-    const option = (0, react_1.useMemo)(() => {
+    const option = (0, core_1.useDeepMemo)(() => {
+        var _a;
         if (data.timeSeries === undefined)
             return {};
         if (data.timeSeries === null || data.timeSeries.length === 0)
             return noDataOption;
         const showPointsOnHover = data.timeSeries.length < graph_model_1.PROGRESSIVE_MODE_SERIES_LIMIT;
         const defaultGrid = {
-            show: true,
-            backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[100] : theme.palette.background.paper,
-            borderColor: theme.palette.grey['300'],
             top: 10,
             right: 20,
-            bottom: 0,
+            bottom: 5,
             left: 20,
             containLabel: true,
         };
@@ -152,6 +150,7 @@ function LineChart(props) {
         if (dataZoomEnabled === false) {
             delete defaultToolbox.feature.dataZoom.icon;
         }
+        const rangeMs = (_a = data.rangeMs) !== null && _a !== void 0 ? _a : getDateRange(data.xAxis);
         const option = {
             title: {
                 show: false,
@@ -162,16 +161,16 @@ function LineChart(props) {
             xAxis: {
                 type: 'category',
                 data: data.xAxis,
+                max: data.xAxisMax,
                 axisLabel: {
+                    margin: 15,
                     color: theme.palette.text.primary,
-                    margin: 12,
                     formatter: (value) => {
-                        return getFormattedDate(value);
+                        return getFormattedDate(value, rangeMs);
                     },
                 },
                 axisTick: {
-                    show: true,
-                    length: 6,
+                    show: false,
                 },
                 axisLine: {
                     lineStyle: {
@@ -181,18 +180,20 @@ function LineChart(props) {
             },
             yAxis: {
                 type: 'value',
-                boundaryGap: ['10%', '10%'],
+                boundaryGap: [0, '10%'],
                 axisLabel: {
-                    showMinLabel: false,
-                    showMaxLabel: true,
+                    margin: 12,
                     color: theme.palette.text.primary,
                     formatter: (value) => {
                         return (0, units_1.abbreviateLargeNumber)(value);
                     },
                 },
                 splitLine: {
+                    show: true,
                     lineStyle: {
+                        width: 0.5,
                         color: theme.palette.grey['300'],
+                        opacity: 0.95,
                     },
                 },
             },
@@ -206,22 +207,46 @@ function LineChart(props) {
                 },
             },
             legend,
+            visualMap,
         };
         return option;
-    }, [data, theme, grid, legend, toolbox, dataZoomEnabled]);
+        // TODO (sjcobb): consolidate option props using echarts theme to reduce num of items in dep array
+    }, [data, theme, grid, legend, toolbox, dataZoomEnabled, visualMap]);
     return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
             height,
-        }, 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)(ECharts_1.ECharts, { sx: {
+        }, 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: {
                     width: '100%',
                     height: '100%',
                 }, option: option, onEvents: handleEvents, _instance: chartRef })] }));
 }
 exports.LineChart = LineChart;
-function getFormattedDate(value) {
-    const XAXIS_DATE_FORMAT = new Intl.DateTimeFormat(undefined, {
+// fallback when xAxis time range not passed as prop
+function getDateRange(data) {
+    const defaultRange = 3600000; // hour in ms
+    if (data.length === 0)
+        return defaultRange;
+    const lastDatum = data[data.length - 1];
+    if (data[0] === undefined || lastDatum === undefined)
+        return defaultRange;
+    return lastDatum - data[0];
+}
+// determines time granularity for axis labels, defaults to hh:mm
+function getFormattedDate(value, rangeMs) {
+    const dateFormatOptions = {
         hour: 'numeric',
         minute: 'numeric',
-        hour12: false,
-    });
-    return XAXIS_DATE_FORMAT.format(value * 1000);
+        hourCycle: 'h23',
+    };
+    const thirtyMinMs = 1800000;
+    const dayMs = 86400000;
+    if (rangeMs <= thirtyMinMs) {
+        dateFormatOptions.second = 'numeric';
+    }
+    else if (rangeMs >= dayMs) {
+        dateFormatOptions.month = 'numeric';
+        dateFormatOptions.day = 'numeric';
+    }
+    const DATE_FORMAT = new Intl.DateTimeFormat(undefined, dateFormatOptions);
+    // remove comma when month / day present
+    return DATE_FORMAT.format(value).replace(/, /g, ' ');
 }

package/dist/cjs/StatChart.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatChart = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -15,6 +15,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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 lodash_es_1 = require("lodash-es");
 const core_1 = require("echarts/core");
 const charts_1 = require("echarts/charts");
@@ -22,7 +23,7 @@ const charts_2 = require("echarts/charts");
 const components_1 = require("echarts/components");
 const renderers_1 = require("echarts/renderers");
 const units_1 = require("./model/units");
-const ECharts_1 = require("./ECharts");
+const EChart_1 = require("./EChart");
 (0, core_1.use)([
     charts_1.GaugeChart,
     charts_2.LineChart,
@@ -54,6 +55,7 @@ const noDataOption = {
 };
 function StatChart(props) {
     const { width, height, data, unit, backgroundColor, sparkline } = props;
+    const theme = (0, material_1.useTheme)();
     const option = (0, react_1.useMemo)(() => {
         var _a;
         if (data.seriesData === undefined)
@@ -165,7 +167,7 @@ function StatChart(props) {
             },
             series: statSeries,
             textStyle: {
-                color: backgroundColor === 'transparent' ? '#000000' : '#FFFFFF',
+                color: backgroundColor === 'transparent' ? theme.palette.text.primary : '#FFFFFF',
                 fontSize: 25,
                 lineHeight: 18,
                 fontFamily: '"Lato", sans-serif',
@@ -196,8 +198,8 @@ function StatChart(props) {
             ],
         };
         return option;
-    }, [data, height, unit, width, sparkline, backgroundColor]);
-    return ((0, jsx_runtime_1.jsx)(ECharts_1.ECharts, { sx: {
+    }, [data, height, theme, unit, width, sparkline, backgroundColor]);
+    return ((0, jsx_runtime_1.jsx)(EChart_1.EChart, { sx: {
             width: width,
             height: height,
         }, option: option }));

package/dist/cjs/index.js

@@ -1,5 +1,5 @@
 "use strict";
-// Copyright 2021 The Perses Authors
+// 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
@@ -26,7 +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("./ECharts"), exports);
+__exportStar(require("./EChart"), exports);
 __exportStar(require("./ErrorAlert"), exports);
 __exportStar(require("./ErrorBoundary"), exports);
 __exportStar(require("./GaugeChart"), exports);

package/dist/cjs/tooltip/SeriesInfo.js

@@ -42,7 +42,8 @@ function SeriesInfo(props) {
                     }), children: formattedSeriesLabels.split(',').map((name) => {
                         if (name) {
                             const [key, value] = jsonFormattedSeries ? name.split(':') : name.split('=');
-                            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: '4px' }, children: [(0, jsx_runtime_1.jsxs)(material_1.Typography, { sx: { fontSize: '11px' }, children: [key, ":"] }), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: (theme) => ({
+                            const formattedKey = value !== undefined ? `${key}: ` : key;
+                            return ((0, jsx_runtime_1.jsxs)(material_1.Box, { sx: { display: 'flex', gap: '4px' }, children: [(0, jsx_runtime_1.jsx)(material_1.Typography, { sx: { fontSize: '11px' }, children: formattedKey }), (0, jsx_runtime_1.jsx)(material_1.Typography, { sx: (theme) => ({
                                             color: theme.palette.common.white,
                                             fontWeight: 700,
                                             fontSize: '11px',

package/dist/cjs/tooltip/Tooltip.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tooltip = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 The Perses Authors
+// 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
@@ -50,8 +50,7 @@ function Tooltip(props) {
                 position: 'absolute',
                 top: 0,
                 left: 0,
-                overflowY: 'scroll',
-                backgroundColor: '#000',
+                backgroundColor: '#2E313E',
                 borderRadius: '6px',
                 color: '#fff',
                 fontSize: '11px',
@@ -59,6 +58,10 @@ function Tooltip(props) {
                 opacity: 1,
                 transition: 'all 0.1s ease-out',
                 zIndex: theme.zIndex.tooltip,
+                overflow: 'hidden',
+                '&:hover': {
+                    overflowY: 'auto',
+                },
             }), style: {
                 transform: cursorTransform,
             }, onMouseEnter: () => handleMouseEnter(), onMouseLeave: () => handleMouseLeave(), children: (0, jsx_runtime_1.jsx)(TooltipContent_1.TooltipContent, { focusedSeries: focusedSeries, wrapLabels: props.wrapLabels }) }) }));

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

@@ -40,7 +40,9 @@ function getNearbySeries(data, pointInGrid, yBuffer) {
                         const yValue = (_e = currentSeries.data[datumIdx]) !== null && _e !== void 0 ? _e : 0;
                         if (focusedX === datumIdx) {
                             if (yValue !== '-' && focusedY <= yValue + yBuffer && focusedY >= yValue - yBuffer) {
-                                const formattedDate = tooltip_model_1.TOOLTIP_DATE_FORMAT.format(xValue * 1000);
+                                // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
+                                const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
+                                const formattedDate = tooltip_model_1.TOOLTIP_DATE_FORMAT.format(xValueMilliSeconds);
                                 currentFocusedData.push({
                                     seriesIdx: seriesIdx,
                                     datumIdx: datumIdx,

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export * from './ECharts';
+export * from './EChart';
 export * from './ErrorAlert';
 export * from './ErrorBoundary';
 export * from './GaugeChart';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}
+{"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,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,eAAe,CAAC"}

package/dist/index.js

@@ -1 +1 @@
-export*from"./ECharts";export*from"./ErrorAlert";export*from"./ErrorBoundary";export*from"./GaugeChart";export*from"./LineChart";export*from"./StatChart";export*from"./utils/combine-sx";export*from"./model/graph-model";export*from"./model/units";
+export*from"./EChart";export*from"./ErrorAlert";export*from"./ErrorBoundary";export*from"./GaugeChart";export*from"./LineChart";export*from"./StatChart";export*from"./utils/combine-sx";export*from"./model/graph-model";export*from"./model/units";

package/dist/model/graph-model.d.ts

@@ -9,5 +9,7 @@ export interface EChartsTimeSeries extends Omit<LineSeriesOption, 'data'> {
 export declare type EChartsDataFormat = {
     timeSeries: EChartsTimeSeries[];
     xAxis: number[];
+    xAxisMax?: number | 'dataMax';
+    rangeMs?: number;
 };
 //# sourceMappingURL=graph-model.d.ts.map

package/dist/model/graph-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"graph-model.d.ts","sourceRoot":"","sources":["../../src/model/graph-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;CACjB,CAAC"}
+{"version":3,"file":"graph-model.d.ts","sourceRoot":"","sources":["../../src/model/graph-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,6BAA6B,MAAM,CAAC;AAEjD,oBAAY,UAAU,GAAG,MAAM,CAAC;AAEhC,oBAAY,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC;AAE3E,oBAAY,aAAa,GAAG,MAAM,GAAG,IAAI,GAAG,GAAG,CAAC;AAEhD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAEvE,IAAI,EAAE,QAAQ,CAAC,qBAAqB,CAAC,GAAG,aAAa,EAAE,CAAC;CACzD;AAED,oBAAY,iBAAiB,GAAG;IAC9B,UAAU,EAAE,iBAAiB,EAAE,CAAC;IAChC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC"}

package/dist/tooltip/SeriesInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/tooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAiBA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAiHhD"}
+{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/tooltip/SeriesInfo.tsx"],"names":[],"mappings":";AAiBA,UAAU,eAAe;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkHhD"}

package/dist/tooltip/SeriesInfo.js

@@ -1 +1 @@
-import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesMarker}from"./SeriesMarker";import{TOOLTIP_LABELS_MAX_WIDTH}from"./tooltip-model";export function SeriesInfo(e){const{seriesName:o,y:r,markerColor:t,totalSeries:i,wrapLabels:s}=e,l=o.replace(/[{}"]/g,"");if(1===i){const e="{"===o[0];return _jsxs(Stack,{spacing:.5,children:[_jsxs(Box,{sx:e=>({height:"16px",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"left",color:e.palette.common.white,fontSize:"11px"}),children:[_jsx(SeriesMarker,{markerColor:t}),_jsxs(Box,{component:"span",children:["value:",_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,fontWeight:700,paddingLeft:"2px"}),children:r})]})]}),_jsx(Divider,{sx:e=>({borderColor:e.palette.grey[500]})}),_jsx(Box,{sx:e=>({color:e.palette.common.white}),children:l.split(",").map((o=>{if(o){const[r,t]=e?o.split(":"):o.split("=");return _jsxs(Box,{sx:{display:"flex",gap:"4px"},children:[_jsxs(Typography,{sx:{fontSize:"11px"},children:[r,":"]}),_jsx(Typography,{sx:e=>({color:e.palette.common.white,fontWeight:700,fontSize:"11px"}),children:t})]},o)}}))})]})}const n=l.replace(/[,]/g,", ").replace(/[:=]/g,": ");return _jsxs(Box,{sx:{display:"table-row",paddingTop:.5},children:[_jsxs(Box,{sx:{display:"table-cell",maxWidth:"520px"},children:[_jsx(SeriesMarker,{markerColor:t}),_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,display:"inline-block",maxWidth:TOOLTIP_LABELS_MAX_WIDTH,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:s?"normal":"nowrap",width:"calc(100% - 20px)"}),children:n})]}),_jsx(Box,{sx:{display:"table-cell",fontWeight:"700",paddingLeft:1.5,textAlign:"right",verticalAlign:"top"},children:r})]})}
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box,Divider,Stack,Typography}from"@mui/material";import{SeriesMarker}from"./SeriesMarker";import{TOOLTIP_LABELS_MAX_WIDTH}from"./tooltip-model";export function SeriesInfo(e){const{seriesName:o,y:r,markerColor:t,totalSeries:i,wrapLabels:s}=e,l=o.replace(/[{}"]/g,"");if(1===i){const e="{"===o[0];return _jsxs(Stack,{spacing:.5,children:[_jsxs(Box,{sx:e=>({height:"16px",display:"flex",flexDirection:"row",alignItems:"center",justifyContent:"left",color:e.palette.common.white,fontSize:"11px"}),children:[_jsx(SeriesMarker,{markerColor:t}),_jsxs(Box,{component:"span",children:["value:",_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,fontWeight:700,paddingLeft:"2px"}),children:r})]})]}),_jsx(Divider,{sx:e=>({borderColor:e.palette.grey[500]})}),_jsx(Box,{sx:e=>({color:e.palette.common.white}),children:l.split(",").map((o=>{if(o){const[r,t]=e?o.split(":"):o.split("=");return _jsxs(Box,{sx:{display:"flex",gap:"4px"},children:[_jsx(Typography,{sx:{fontSize:"11px"},children:void 0!==t?`${r}: `:r}),_jsx(Typography,{sx:e=>({color:e.palette.common.white,fontWeight:700,fontSize:"11px"}),children:t})]},o)}}))})]})}const n=l.replace(/[,]/g,", ").replace(/[:=]/g,": ");return _jsxs(Box,{sx:{display:"table-row",paddingTop:.5},children:[_jsxs(Box,{sx:{display:"table-cell",maxWidth:"520px"},children:[_jsx(SeriesMarker,{markerColor:t}),_jsx(Box,{component:"span",sx:e=>({color:e.palette.common.white,display:"inline-block",maxWidth:TOOLTIP_LABELS_MAX_WIDTH,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:s?"normal":"nowrap",width:"calc(100% - 20px)"}),children:n})]}),_jsx(Box,{sx:{display:"table-cell",fontWeight:"700",paddingLeft:1.5,textAlign:"right",verticalAlign:"top"},children:r})]})}

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,sBAAsB,CAAC;AAEzD,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,sBAyD1C"}
+{"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,sBAAsB,CAAC;AAEzD,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"}

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:l}=t,[n,i]=useState(null),s=useMousePosition();if(null===s)return null;const a=r.current,u=getFocusedSeriesData(s,l,n,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,m=assembleTransform(s,u.length,p,T,n);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,overflowY:"scroll",backgroundColor:"#000",borderRadius:"6px",color:"#fff",fontSize:"11px",visibility:"visible",opacity:1,transition:"all 0.1s ease-out",zIndex:t.zIndex.tooltip}),style:{transform:m},onMouseEnter:()=>{null!==s&&i(s)},onMouseLeave:()=>{null!==n&&i(null)},children:_jsx(TooltipContent,{focusedSeries:u,wrapLabels:t.wrapLabels})})})}function assembleTransform(t,o,e,r,l){if(null===t)return"translate3d(0, 0)";null!==l&&(t=l);const n=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&&n>TOOLTIP_MAX_WIDTH?`translate3d(${n-32}px, ${i}px, 0) translateX(-100%)`:`translate3d(${n+32}px, ${i}px, 0)`}
+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)`}

package/dist/tooltip/focused-series.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focused-series.d.ts","sourceRoot":"","sources":["../../src/tooltip/focused-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,UAAU,EAA0C,MAAM,iBAAiB,CAAC;AAErF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,kBAAkB,CAwCnH;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC/B,KAAK,CAAC,EAAE,eAAe,sBA2CxB"}
+{"version":3,"file":"focused-series.d.ts","sourceRoot":"","sources":["../../src/tooltip/focused-series.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,UAAU,EAA0C,MAAM,iBAAiB,CAAC;AAErF,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,oBAAY,kBAAkB,GAAG,iBAAiB,EAAE,CAAC;AAErD;;;GAGG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,MAAM,GAAG,kBAAkB,CA0CnH;AAED;;;GAGG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC9B,SAAS,EAAE,iBAAiB,EAC5B,SAAS,EAAE,UAAU,CAAC,QAAQ,CAAC,EAC/B,KAAK,CAAC,EAAE,eAAe,sBA2CxB"}

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=TOOLTIP_DATE_FORMAT.format(1e3*f);s.push({seriesIdx:t,datumIdx:l,seriesName:n,date:e,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/components",
-  "version": "0.3.1",
+  "version": "0.4.2",
   "description": "Common UI components used across Perses features",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -23,6 +23,7 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
+    "@perses-dev/core": "^0.4.2",
     "echarts": "^5.3.2",
     "lodash-es": "^4.17.21",
     "react-error-boundary": "^3.1.4"

package/dist/ECharts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ECharts.d.ts","sourceRoot":"","sources":["../src/ECharts.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAEzD,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAQ,MAAM,cAAc,CAAC;AAChE,OAAO,EAAO,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEpD,MAAM,WAAW,qBAAqB,CAAC,CAAC;IAGtC,aAAa,EAAE,MAAM,CAAC;IAGtB,UAAU,EAAE,MAAM,CAAC;IAEnB,WAAW,EAAE,MAAM,CAAC;IAEpB,UAAU,EAAE,MAAM,CAAC;IAEnB,IAAI,EAAE,MAAM,CAAC;IAEb,SAAS,EAAE,MAAM,CAAC;IAElB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IAOlC,QAAQ,EAAE,MAAM,CAAC;IAEjB,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAEzB,KAAK,EAAE,MAAM,CAAC;IAId,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC/B;AAED,aAAK,eAAe,CAAC,CAAC,IAAI,CACxB,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,EAGhC,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;AAGxD,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,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,kBAAkB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,QAAQ,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC;IACxD,eAAe,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;CACzC;AAED,wBAAgB,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,CAAC,CAAC,CAAC,eAqClG"}

package/dist/ECharts.js

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

package/dist/cjs/ECharts.js

@@ -1,103 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ECharts = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-// Copyright 2021 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 debounce_1 = __importDefault(require("lodash/debounce"));
-const core_1 = require("echarts/core");
-const material_1 = require("@mui/material");
-const mouseEvents = [
-    'click',
-    'dblclick',
-    'mousedown',
-    'mousemove',
-    'mouseup',
-    'mouseover',
-    'mouseout',
-    'globalout',
-    'contextmenu',
-];
-const batchEvents = ['datazoom', 'downplay', 'highlight'];
-function ECharts({ sx, _instance, onChartInitialized, option, onEvents }) {
-    const [containerRef, setContainerRef] = (0, react_1.useState)(null);
-    const [echart, setChart] = (0, react_1.useState)(undefined);
-    // Create a chart instance in the container
-    (0, react_1.useLayoutEffect)(() => {
-        if (containerRef === null)
-            return;
-        const chart = (0, core_1.init)(containerRef);
-        setChart(chart);
-        if (_instance !== undefined) {
-            _instance.current = chart;
-        }
-        bindEvents(chart, onEvents);
-        onChartInitialized === null || onChartInitialized === void 0 ? void 0 : onChartInitialized(chart);
-        return () => {
-            chart.dispose();
-        };
-    }, [containerRef, _instance, onChartInitialized, onEvents]);
-    // Sync options with chart instance
-    (0, react_1.useLayoutEffect)(() => {
-        if (echart === undefined)
-            return;
-        echart.setOption(option);
-    }, [echart, option]);
-    (0, react_1.useLayoutEffect)(() => {
-        const updateSize = (0, debounce_1.default)(() => {
-            echart === null || echart === void 0 ? void 0 : echart.resize();
-        }, 200);
-        window.addEventListener('resize', updateSize);
-        updateSize();
-        return () => window.removeEventListener('resize', updateSize);
-    }, [echart]);
-    return (0, jsx_runtime_1.jsx)(material_1.Box, { ref: setContainerRef, sx: sx });
-}
-exports.ECharts = ECharts;
-// Validate event config and bind custom events
-function bindEvents(instance, events) {
-    var _a;
-    if (events === undefined)
-        return;
-    function bindEvent(eventName, onEventFunction) {
-        if (typeof onEventFunction === 'function') {
-            if (isMouseEvent(eventName)) {
-                instance.on(eventName, (param) => onEventFunction(param, instance));
-            }
-            else if (isBatchEvent(eventName)) {
-                instance.on(eventName, (param) => onEventFunction(param));
-            }
-            else {
-                instance.on(eventName, () => onEventFunction(null, instance));
-            }
-        }
-    }
-    for (const eventName in events) {
-        if (Object.prototype.hasOwnProperty.call(events, eventName)) {
-            const customEvent = (_a = events[eventName]) !== null && _a !== void 0 ? _a : null;
-            if (customEvent) {
-                bindEvent(eventName, customEvent);
-            }
-        }
-    }
-}
-function isMouseEvent(eventName) {
-    return mouseEvents.includes(eventName);
-}
-function isBatchEvent(eventName) {
-    return batchEvents.includes(eventName);
-}