@perses-dev/timeseries-chart-plugin 0.6.0 → 0.8.0

package/__mf/js/async/__federation_expose_TimeSeriesChart.3cb3d239.js

@@ -0,0 +1 @@
+"use strict";(self.webpackChunkTimeSeriesChart=self.webpackChunkTimeSeriesChart||[]).push([["966"],{81481:function(e,t,l){l.r(t),l.d(t,{TimeSeriesChart:()=>eb});let n={unit:"decimal",shortValues:!0},i={show:!0,label:"",format:n,min:void 0,max:void 0},a="Label",o="Min",r="Max",s={lineWidth:1.25,areaOpacity:0,pointRadius:2.75,connectNulls:!1},d="Line Width",u="slider-line-width",c=.25,h=3,p=.25,v="Area Opacity",m="slider-area-opacity",g=0,y=1,x=.05,f="Stack Series",b="Connect Nulls",C={none:{label:"None"},all:{label:"All"}},j=Object.entries(C).map(e=>{let[t,l]=e;return{id:t,...l}});var S=l(24246),M=l(48565),w=l(75586),E=l(28264),O=l(17839),T=l(5404),I=l(98346),Z=l(71377),A=l(87895);function D(e){let{value:t,onChange:l}=e,n=t.stack??"none",i=C[n];return(0,S.jsxs)(E.OptionsEditorGroup,{title:"Visual",children:[(0,S.jsx)(E.OptionsEditorControl,{label:"Display",control:(0,S.jsxs)(T.Z,{color:"primary",exclusive:!0,value:t.display,onChange:(e,n)=>{l({...t,display:n})},children:[(0,S.jsx)(I.Z,{value:"line",selected:void 0===t.display||"line"===t.display,"aria-label":"display line series",children:"Line"}),(0,S.jsx)(I.Z,{value:"bar","aria-label":"display bar series",children:"Bar"})]})}),(0,S.jsx)(E.OptionsEditorControl,{label:d,control:(0,S.jsx)(Z.ZP,{"data-testid":u,value:t.lineWidth??1.25,valueLabelDisplay:"auto",step:p,marks:!0,min:c,max:h,disabled:"bar"===t.display,onChange:(e,n)=>{let i=Array.isArray(n)?n[0]:n,a=void 0!==i?i+1.5:2.75;l((0,w.Uy)(t,e=>{e.lineWidth=i,e.pointRadius=a}))}})}),(0,S.jsx)(E.OptionsEditorControl,{label:v,control:(0,S.jsx)(Z.ZP,{"data-testid":m,value:t.areaOpacity??0,valueLabelDisplay:"auto",step:x,marks:!0,min:g,max:y,disabled:"bar"===t.display,onChange:(e,n)=>{let i=Array.isArray(n)?n[0]:n;l((0,w.Uy)(t,e=>{e.areaOpacity=i}))}})}),(0,S.jsx)(E.OptionsEditorControl,{label:f,control:(0,S.jsx)(E.SettingsAutocomplete,{value:{...i,id:n},options:j,onChange:(e,n)=>{let i={...t,stack:"none"===n.id?void 0:n.id};"all"!==n.id||t.areaOpacity||(i.areaOpacity=.3),l(i)},disabled:void 0===t,disableClearable:!0})}),(0,S.jsx)(E.OptionsEditorControl,{label:b,control:(0,S.jsx)(A.Z,{checked:t.connectNulls??!1,disabled:"bar"===t.display,onChange:e=>{l({...t,connectNulls:e.target.checked})}})})]})}var L=l(8695);function N(e){let{value:t,onChange:l}=e;return(0,S.jsxs)(E.OptionsEditorGroup,{title:"Y Axis",children:[(0,S.jsx)(E.OptionsEditorControl,{label:"Show",control:(0,S.jsx)(A.Z,{checked:t.show??i.show,onChange:e=>{l({...t,show:e.target.checked})}})}),(0,S.jsx)(E.FormatControls,{value:t.format??n,onChange:e=>l({...t,format:e})}),(0,S.jsx)(E.OptionsEditorControl,{label:a,control:(0,S.jsx)(L.Z,{value:t.label??"",inputProps:{"aria-label":"enter y axis label"},onChange:e=>l({...t,label:e.target.value}),placeholder:"Default"})}),(0,S.jsx)(E.OptionsEditorControl,{label:o,control:(0,S.jsx)(L.Z,{type:"number",value:t.min??"",onChange:e=>{let n=e.target.value?Number(e.target.value):void 0;l({...t,min:n})},placeholder:"Default"})}),(0,S.jsx)(E.OptionsEditorControl,{label:r,control:(0,S.jsx)(L.Z,{type:"number",value:t.max??"",onChange:e=>{let n=e.target.value?Number(e.target.value):void 0;l({...t,max:n})},placeholder:"Default"})})]})}var k=l(75094),P=l(52054),U=l(25283),q=l(10517),R=l(54538),_=l(22446),F=l(33755);function G(e){let{querySettingsList:t,onChange:l}=e,n=(0,R.useRef)(null),i=(0,R.useRef)(!1);(0,R.useEffect)(()=>{var e;n.current&&i.current&&(null===(e=n.current)||void 0===e||e.focus(),i.current=!1)},[null==t?void 0:t.length]);let a=(e,n)=>{void 0!==t&&l((0,w.Uy)(t,t=>{let l=null==t?void 0:t[n];l&&(l.queryIndex=parseInt(e.target.value))}))},o=(e,n)=>{void 0!==t&&l((0,w.Uy)(t,t=>{if(void 0!==t){let l=t[n];l&&(l.colorMode=e.target.value)}}))},r=(e,n)=>{void 0!==t&&l((0,w.Uy)(t,t=>{if(void 0!==t){let l=t[n];l&&(l.colorValue=e)}}))},s=e=>{void 0!==t&&l((0,w.Uy)(t,t=>{t.splice(e,1)}))},d=(0,O.useQueryCountContext)(),u=(0,R.useMemo)(()=>{let e=(null==t?void 0:t.map(e=>e.queryIndex))??[];return Array.from({length:d},(e,t)=>t).filter((t,l)=>!e.includes(l))},[t,d]),c=(0,R.useMemo)(()=>u[0]??-1,[u]),h={queryIndex:c,colorMode:"fixed",colorValue:"#555"};return(0,S.jsx)(E.OptionsEditorGroup,{title:"Query settings",icon:-1!==c?(0,S.jsx)(E.InfoTooltip,{description:"Add query settings",children:(0,S.jsx)(k.Z,{size:"small","aria-label":"add query settings",onClick:()=>{i.current=!0,void 0===t?l([h]):l((0,w.Uy)(t,e=>{e.push(h)}))},children:(0,S.jsx)(F.default,{})})}):null,children:t&&t.length>0?t.map((e,l)=>(0,S.jsx)($,{inputRef:l===t.length-1?n:void 0,querySettings:e,availableQueryIndexes:u,onQueryIndexChange:e=>{a(e,l)},onColorModeChange:e=>o(e,l),onColorValueChange:e=>r(e,l),onDelete:()=>{s(l)}},l)):(0,S.jsx)(P.Z,{mb:2,fontStyle:"italic",children:"No query settings defined"})})}function $(e){let{querySettings:{queryIndex:t,colorMode:l,colorValue:n},availableQueryIndexes:i,onQueryIndexChange:a,onColorModeChange:o,onColorValueChange:r,onDelete:s,inputRef:d}=e,u=i.concat(t).sort((e,t)=>e-t);return(0,S.jsxs)(U.Z,{flex:1,direction:"row",alignItems:"center",justifyContent:"space-between",spacing:1,children:[(0,S.jsx)(L.Z,{select:!0,inputRef:d,value:t,label:"Query",onChange:a,sx:{minWidth:"75px"},children:u.map(e=>(0,S.jsxs)(q.Z,{value:e,children:["#",e+1]},`query-${e}`))}),(0,S.jsxs)(L.Z,{select:!0,value:l,fullWidth:!0,label:"Color mode",onChange:o,children:[(0,S.jsx)(q.Z,{value:"fixed-single",children:"Fixed (single)"}),(0,S.jsx)(q.Z,{value:"fixed",children:"Fixed"})]}),(0,S.jsx)(E.OptionsColorPicker,{label:"Query n\xb0"+t,color:n,onColorChange:r}),(0,S.jsx)(k.Z,{"aria-label":`delete settings for query n\xb0${t+1}`,size:"small",onClick:s,children:(0,S.jsx)(_.default,{})})]})}var V=l(94776),H=l(36372),W=l(15409),z=l.n(W),Q=l(8193),Y=l(14046),B=l(69481),X=l(74664);function K(e){let t=Math.floor(Math.log10(Math.abs(e)));return Math.floor(e/Math.pow(10,t))*Math.pow(10,t)}var J=l(83915);let ee=new J.Z({hue:{min:20,max:360}}),et=new J.Z({hue:{min:0,max:20}}),el={};var en=l(56141),ei=l.n(en),ea=l(4665),eo=l(36232),er=l(44811),es=l(508),ed=l(65201),eu=l(99635),ec=l(48906),eh=l(98857),ep=l(219),ev=l(17846),em=l(23709),eg=l(55328),ey=l(67745),ex=l(50378);(0,eo.D)([er.N,es.N,ed.N,eu.N,ec.N,eh.N,ep.N,ev.N,em.N,eg.N,ey.N,ex.N]);let ef=(0,R.forwardRef)(function(e,t){var l;let n,{height:i,data:a,seriesMapping:o,timeScale:r,yAxis:s,format:d,grid:u,isStackedBar:c=!1,tooltipConfig:h=E.DEFAULT_TOOLTIP_CONFIG,noDataVariant:p="message",syncGroup:v,onDataZoom:m,onDoubleClick:g,__experimentalEChartsOptionsOverride:y}=e,{chartsTheme:x,enablePinning:f,lastTooltipPinnedCoords:b,setLastTooltipPinnedCoords:C}=(0,E.useChartsContext)(),j=h.enablePinning&&f,M=(0,R.useRef)(),[w,O]=(0,R.useState)(!0),[T,I]=(0,R.useState)(null),[Z,A]=(0,R.useState)(null),[D,L]=(0,R.useState)(!1),[N,k]=(0,R.useState)(0),{timeZone:P}=(0,E.useTimeZone)();if(void 0===r){let e=(0,B.C5)(a);if(void 0===e){let e=new Date,t=new Date(e);t.setFullYear(e.getFullYear()-5);let l=e.getTime(),i=t.getTime();n={startMs:i,endMs:l,stepMs:1,rangeMs:l-i}}else n=e}else n=r;(0,R.useImperativeHandle)(t,()=>({highlightSeries(e){let{name:t}=e;M.current&&M.current.dispatchAction({type:"highlight",seriesId:t})},clearHighlightedSeries:()=>{M.current&&(0,E.clearHighlightedSeries)(M.current)}}),[]);let U=(0,R.useMemo)(()=>({datazoom:e=>{if(void 0===m&&setTimeout(()=>{I(null)},10),void 0===m||void 0===e.batch[0])return;let t=e.batch[0].startValue,l=e.batch[0].endValue;void 0!==t&&void 0!==l&&m({start:t,end:l})},finished:()=>{void 0!==M.current&&(0,E.enableDataZoom)(M.current)}}),[m,I]),{noDataOption:q}=x,_=(0,R.useMemo)(()=>{if(null===a||0===a.length&&"message"===p)return q;let e=[],t="local"===P;a.map((l,n)=>{let i=l.values.map(e=>{let[l,n]=e;return[t?l:(0,ea.toZonedTime)(l,P),null===n?"-":n]});e.push({id:n,source:[...i],dimensions:["time","value"]})});let l={dataset:e,series:f&&null!==Z?[...o,Z]:o,xAxis:{type:"time",min:t?n.startMs:(0,ea.toZonedTime)(n.startMs,P),max:t?n.endMs:(0,ea.toZonedTime)(n.endMs,P),axisLabel:{hideOverlap:!0,formatter:(0,E.getFormattedAxisLabel)(n.rangeMs??0)},axisPointer:{snap:!1}},yAxis:(0,E.getFormattedAxis)(s,d),animation:!1,tooltip:{show:!0,showContent:c,trigger:c?"item":"axis",appendToBody:c},axisPointer:{type:"line",z:0,triggerEmphasis:!1,triggerTooltip:!1,snap:!1},toolbox:{feature:{dataZoom:{icon:null,yAxisIndex:"none"}}},grid:u};return y?y(l):l},[a,o,n,s,d,u,q,y,p,P,c,f,Z]);return(0,R.useEffect)(()=>{null===T||null===b||ei()(b,T)||(I(null),null!==T&&null!==Z&&A(null))},[b,o]),(0,S.jsxs)(H.Z,{style:{height:i},onClick:e=>{let t=e.ctrlKey||e.metaKey;t&&e.preventDefault();let l=(0,E.getPointInGrid)(e.nativeEvent.offsetX,e.nativeEvent.offsetY,M.current);if(null!==l&&j&&e.target instanceof HTMLCanvasElement){let n={page:{x:e.pageX,y:e.pageY},client:{x:e.clientX,y:e.clientY},plotCanvas:{x:e.nativeEvent.offsetX,y:e.nativeEvent.offsetY},target:e.target};I(e=>null===e?n:(A(null),null)),A(e=>{if(null!==e)return null;{var t;let e=l[0],n=null===(t=a[0])||void 0===t?void 0:t.values,i=(0,E.getClosestTimestamp)(n,e);return z()({},E.DEFAULT_PINNED_CROSSHAIR,{markLine:{data:[{xAxis:i}]}})}}),t||C(n)}},onMouseDown:e=>{let{clientX:t}=e;L(!0),k(t)},onMouseMove:e=>{if(!(e.target instanceof HTMLCanvasElement))return;let{clientX:t}=e;D&&t-N>0&&O(!1)},onMouseUp:()=>{L(!1),k(0),O(!0)},onMouseLeave:()=>{null===T&&O(!1),void 0!==M.current&&(0,E.clearHighlightedSeries)(M.current)},onMouseEnter:()=>{O(!0),void 0!==M.current&&(0,E.enableDataZoom)(M.current)},onDoubleClick:e=>{I(null),void 0===g?void 0!==M.current&&(0,E.restoreChart)(M.current):g(e)},children:[!0===w&&(null===(l=_.tooltip)||void 0===l?void 0:l.showContent)===!1&&!0!==h.hidden&&(0,S.jsx)(E.TimeChartTooltip,{containerId:x.tooltipPortalContainerId,chartRef:M,data:a,seriesMapping:o,wrapLabels:h.wrapLabels,enablePinning:j,pinnedPos:T,format:d,onUnpinClick:()=>{I(null),A(null)}}),(0,S.jsx)(E.EChart,{sx:{width:"100%",height:"100%"},option:_,theme:x.echartsTheme,onEvents:U,_instance:M,syncGroup:v})]})}),eb={PanelComponent:function(e){var t;let{spec:{thresholds:l,yAxis:a,tooltip:o,querySettings:r},contentDimensions:d,queryResults:u}=e,c=(0,E.useChartsTheme)(),h=(0,V.Z)(),p=(0,E.useId)("time-series-panel"),v=(0,R.useRef)(null),m=c.echartsTheme.color,g=c.container.padding.default,y=d?{width:d.width-2*g,height:d.height-2*g}:void 0,x=(0,R.useMemo)(()=>e.spec.legend&&(0,O.validateLegendSpec)(e.spec.legend)?z()({},Q.zx,e.spec.legend):void 0,[e.spec.legend]),f=(null===(t=e.spec.yAxis)||void 0===t?void 0:t.format)??n,b=(0,R.useMemo)(()=>z()({},s,e.spec.visual),[e.spec.visual]),C=(0,R.useMemo)(()=>(function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t={show:!0,axisLabel:{show:(null==e?void 0:e.show)??i.show},min:null==e?void 0:e.min,max:null==e?void 0:e.max};return(null==e?void 0:e.min)===void 0&&(t.min=e=>e.min>=0&&e.min<=1?0:e.min>0?K(.8*e.min):K(1.2*e.min)),t})(a),[a]),[j,M]=(0,R.useState)("ALL"),[w,T]=(0,R.useState)(),{setTimeRange:I}=(0,O.useTimeRange)(),{timeScale:Z,timeChartData:A,timeSeriesMapping:D,legendItems:L}=(0,R.useMemo)(()=>{let e=function(e){let t=e.map(e=>e.data);return(0,B.C5)(t)}(u);if(void 0===e)return{timeChartData:[],timeSeriesMapping:[]};let t=[],n=[],i=[],o=0;for(let l=0;l<u.length;l++){let a;let c=u[l];for(let e of r??[])e.queryIndex===l&&(a=e);if(c)for(let r=0;r<c.data.series.length;r++){var s,d,v;let g=c.data.series[r];if(void 0===g)return{timeChartData:[],timeSeriesMapping:[],legendItems:[]};let y=g.formattedName??g.name,f=function(e){var t;let{categoricalPalette:l,visual:n,muiPrimaryColor:i,seriesName:a,seriesIndex:o,querySettings:r,queryHasMultipleResults:s}=e;if(r&&("fixed"===r.colorMode||"fixed-single"===r.colorMode&&!s))return r.colorValue;let d=Array.isArray(l)&&l[0]?l[0]:i;return(null===(t=n.palette)||void 0===t?void 0:t.mode)==="categorical"?function(e,t,l){if(void 0===e)return l;let n=e.length??1;return e[t%n]??l}(l,o,d):function(e,t){var l;return function(e,t){let l=`${e}_____${t}`,n=el[l];return n||(n=function(e,t){let[l,n,i]=t?et.hsl(e):ee.hsl(e),a=`${(100*n).toFixed(0)}%`,o=`${(100*i).toFixed(0)}%`;return`hsla(${l.toFixed(2)},${a},${o},0.9)`}(e,t),el[l]=n),n}(l=e,l.toLowerCase().includes("error"))??t}(a,d)}({categoricalPalette:m,visual:b,muiPrimaryColor:h.palette.primary.main,seriesName:y,seriesIndex:o,querySettings:a,queryHasMultipleResults:((null===(v=u[l])||void 0===v?void 0:null===(d=v.data)||void 0===d?void 0:null===(s=d.series)||void 0===s?void 0:s.length)??0)>1}),C=p+g.name+o,S=(null==x?void 0:x.values)?(0,Y.Dc)(g.values,x.values):void 0,M="ALL"===j;if(!M&&j[C]||M){let t=n.length;i.push(function(e,t,l,n,i,a){let o=n.lineWidth??1.25,r=n.pointRadius??2.75,s=i.rangeMs<=9e5;return("always"===n.showPoints&&(s=!0),"bar"===n.display)?{type:"bar",id:e,datasetIndex:t,name:l,color:a,stack:"all"===n.stack?n.stack:void 0,label:{show:!1}}:{type:"line",id:e,datasetIndex:t,name:l,connectNulls:n.connectNulls??!1,color:a,stack:"all"===n.stack?n.stack:void 0,sampling:"lttb",progressiveThreshold:E.OPTIMIZED_MODE_SERIES_LIMIT,showSymbol:s,showAllSymbol:!0,symbolSize:r,lineStyle:{width:o,opacity:.95},areaStyle:{opacity:n.areaOpacity??0},emphasis:{focus:"series",disabled:void 0!==n.areaOpacity&&n.areaOpacity>0,lineStyle:{width:o+1,opacity:1}},selectedMode:"single",select:{itemStyle:{borderColor:a,borderWidth:r+.5}},blur:{lineStyle:{width:o,opacity:.5}}}}(C,t,y,b,e,f)),n.push({name:y,values:(0,B.m6)(g,e)})}x&&t&&t.push({id:C,label:y,color:f,data:S}),o++}}if(l&&l.steps){let t=c.thresholds,r=l.defaultColor??t.defaultColor;l.steps.forEach((s,d)=>{let u=t.palette[d]??r,c={color:s.color??u,value:"percent"===l.mode?function(e,t,l,n){var i,a;let o;let r=l??(o=0,(i=t).length&&void 0!==i[0]&&(null===(a=i[0])||void 0===a?void 0:a.values)?i.forEach(e=>{e.values.forEach(e=>{let[t,l]=e;"number"==typeof l&&l>o&&(o=l)})}):i.forEach(e=>{void 0!==e.data&&e.data.forEach(e=>{"number"==typeof e&&e>o&&(o=e)})}),o),s=n??0;return e/100*(r-s)+s}(s.value,n,null==a?void 0:a.max,null==a?void 0:a.min):s.value},h=s.name??`Threshold ${d+1}`,p=[],v=e.startMs;for(;v<=e.endMs;)p.push([v,c.value]),v+=15e3;n.push({name:h,values:p}),i.push({type:"line",name:h,id:h,datasetId:h,datasetIndex:o,color:c.color,label:{show:!1},lineStyle:{type:"dashed",width:2},emphasis:{focus:"series",lineStyle:{width:2.5}},blur:{lineStyle:{opacity:.5}}}),o++})}return{timeScale:e,timeChartData:n,timeSeriesMapping:i,legendItems:t}},[u,l,j,x,b,r,null==a?void 0:a.max,null==a?void 0:a.min,m,p,c.thresholds,h.palette.primary.main]),N=(0,R.useMemo)(()=>(null==x?void 0:x.values)?O.legendValues.reduce((e,t)=>{var l;let n=O.LEGEND_VALUE_CONFIG[t];return n&&(null==x?void 0:null===(l=x.values)||void 0===l?void 0:l.includes(t))&&e.push({accessorKey:`data.${t}`,header:n.label,headerDescription:n.description,width:72,align:"right",cell:e=>{let{getValue:t}=e,l=t();return"number"==typeof l&&f?(0,X.Bw)(l,f):l},cellDescription:!0,enableSorting:!0}),e},[]):[],[null==x?void 0:x.values,f]);if(void 0===y)return null;let k=a&&a.label?30:20,P={left:C.show?k:0,right:20,bottom:0},U=e=>{I({start:new Date(e.start),end:new Date(e.end)})},q="bar"===b.display&&"all"===b.stack,_=!0;q?_=!1:(null==o?void 0:o.enablePinning)!==void 0&&(_=o.enablePinning);let F={...E.DEFAULT_TOOLTIP_CONFIG,enablePinning:_};return(0,S.jsx)(H.Z,{sx:{padding:`${g}px`},children:(0,S.jsx)(E.ContentWithLegend,{width:y.width,height:y.height,minChildrenHeight:50,legendSize:null==x?void 0:x.size,legendProps:x&&{options:x,data:L||[],selectedItems:j,onSelectedItemsChange:M,tableProps:{columns:N,sorting:w,onSortingChange:T},onItemMouseOver:(e,t)=>{var l;let{id:n}=t;null===(l=v.current)||void 0===l||l.highlightSeries({name:n})},onItemMouseOut:()=>{var e;null===(e=v.current)||void 0===e||e.clearHighlightedSeries()}},children:e=>{let{height:t,width:l}=e;return(0,S.jsxs)(H.Z,{style:{height:t,width:l},children:[a&&a.show&&a.label&&(0,S.jsx)(E.YAxisLabel,{name:a.label,height:t}),(0,S.jsx)(ef,{ref:v,height:t,data:A,seriesMapping:D,timeScale:Z,yAxis:C,format:f,grid:P,isStackedBar:q,tooltipConfig:F,syncGroup:"default-panel-group",onDataZoom:U,noDataVariant:!A.length&&L&&L.length>0?"chart":"message"})]})}})})},supportedQueryTypes:["TimeSeriesQuery"],panelOptionsEditorComponents:[{label:"Settings",content:function(e){let{onChange:t,value:l}=e;return(0,S.jsxs)(E.OptionsEditorGrid,{children:[(0,S.jsxs)(E.OptionsEditorColumn,{children:[(0,S.jsx)(O.LegendOptionsEditor,{value:l.legend,onChange:e=>{t((0,w.Uy)(l,t=>{t.legend=e}))}}),(0,S.jsx)(D,{value:l.visual??s,onChange:e=>{t((0,w.Uy)(l,t=>{t.visual=e}))}})]}),(0,S.jsx)(E.OptionsEditorColumn,{children:(0,S.jsx)(N,{value:l.yAxis??i,onChange:e=>{t((0,w.Uy)(l,t=>{t.yAxis=e}))}})}),(0,S.jsxs)(E.OptionsEditorColumn,{children:[(0,S.jsx)(E.ThresholdsEditor,{hideDefault:!0,thresholds:l.thresholds,onChange:e=>{t((0,w.Uy)(l,t=>{t.thresholds=e}))}}),(0,S.jsx)(G,{querySettingsList:l.querySettings,onChange:e=>{t((0,w.Uy)(l,t=>{t.querySettings=e}))}}),(0,S.jsx)(E.OptionsEditorGroup,{title:"Reset Settings",children:(0,S.jsx)(M.Z,{variant:"outlined",color:"secondary",onClick:()=>{t((0,w.Uy)(l,e=>{e.yAxis=void 0,e.legend=void 0,e.visual=void 0,e.thresholds=void 0,e.querySettings=void 0}))},children:"Reset To Defaults"})})]})]})}}],createInitialOptions:function(){return{}}}}}]);

package/__mf/js/main.b97521b5.js

@@ -0,0 +1 @@
+(()=>{var e={5311:function(e,r,t){Promise.all([t.e("677"),t.e("179"),t.e("620")]).then(t.bind(t,29161))}},r={};function t(n){var o=r[n];if(void 0!==o)return o.exports;var a=r[n]={id:n,loaded:!1,exports:{}};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}t.m=e,t.c=r,t.federation||(t.federation={chunkMatcher:function(e){return!/^((15|67|98)7|179|263|494|705|759|846)$/.test(e)}}),t.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return t.d(r,{a:r}),r},t.d=(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},t.f={},t.e=e=>Promise.all(Object.keys(t.f).reduce((r,n)=>(t.f[n](e,r),r),[])),t.u=e=>"__mf/js/async/"+("118"===e?"lib-router":e)+"."+({110:"e82fda83",118:"098fc614",173:"f6f7e45b",214:"2d4431c6",224:"ce414ffb",225:"8c13dfe9",238:"625b8a48",292:"311e6eb0",409:"0647f389",476:"45fca8d3",570:"87723a1e",620:"d6f96402",65:"86f223c0",651:"80087530",656:"d43503a5",694:"27c70ab1",738:"0a12bb44",740:"67107c3c",75:"5952779d",755:"f76e3538",770:"78a741ab",780:"3fa36115",797:"f4545195",960:"3047096d",981:"77f901c0"})[e]+".js",t.miniCssF=e=>"__mf/css/async/"+e+"."+({263:"9a1fa3dd",759:"9a1fa3dd"})[e]+".css",t.h=()=>"55f9a625e6509efa",(()=>{t.g=(()=>{if("object"==typeof globalThis)return globalThis;try{return this||Function("return this")()}catch(e){if("object"==typeof window)return window}})()})(),t.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),(()=>{var e={},r="TimeSeriesChart:";t.l=function(n,o,a,i){if(e[n]){e[n].push(o);return}if(void 0!==a)for(var s,l,c=document.getElementsByTagName("script"),d=0;d<c.length;d++){var f=c[d];if(f.getAttribute("src")==n||f.getAttribute("data-webpack")==r+a){s=f;break}}s||(l=!0,(s=document.createElement("script")).charset="utf-8",s.timeout=120,t.nc&&s.setAttribute("nonce",t.nc),s.setAttribute("data-webpack",r+a),s.src=n),e[n]=[o];var u=function(r,t){s.onerror=s.onload=null,clearTimeout(h);var o=e[n];if(delete e[n],s.parentNode&&s.parentNode.removeChild(s),o&&o.forEach(function(e){return e(t)}),r)return r(t)},h=setTimeout(u.bind(null,void 0,{type:"timeout",target:s}),12e4);s.onerror=u.bind(null,s.onerror),s.onload=u.bind(null,s.onload),l&&document.head.appendChild(s)}})(),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nmd=e=>(e.paths=[],e.children||(e.children=[]),e),t.nc=void 0,(()=>{var e=[];t.O=(r,n,o,a)=>{if(n){a=a||0;for(var i=e.length;i>0&&e[i-1][2]>a;i--)e[i]=e[i-1];e[i]=[n,o,a];return}for(var s=1/0,i=0;i<e.length;i++){for(var[n,o,a]=e[i],l=!0,c=0;c<n.length;c++)(!1&a||s>=a)&&Object.keys(t.O).every(e=>t.O[e](n[c]))?n.splice(c--,1):(l=!1,a<s&&(s=a));if(l){e.splice(i--,1);var d=o();void 0!==d&&(r=d)}}return r}})(),t.p="/plugins/TimeSeriesChart/",t.rv=()=>"1.2.8",t.S={},t.initializeSharingData={scopeToSharingDataMapping:{default:[{name:"@emotion/react",version:"11.14.0",factory:()=>Promise.all([t.e("960"),t.e("677"),t.e("651")]).then(()=>()=>t(96434)),eager:0,singleton:1,requiredVersion:"^11.11.3"},{name:"@emotion/styled",version:"11.14.0",factory:()=>Promise.all([t.e("677"),t.e("157"),t.e("694")]).then(()=>()=>t(51958)),eager:0,singleton:1},{name:"@hookform/resolvers",version:"3.10.0",factory:()=>Promise.all([t.e("292"),t.e("677"),t.e("214")]).then(()=>()=>t(81228)),eager:0,singleton:1},{name:"@perses-dev/components",version:"0.51.0-rc.0",factory:()=>Promise.all([t.e("238"),t.e("224"),t.e("292"),t.e("797"),t.e("755"),t.e("476"),t.e("570"),t.e("225"),t.e("780"),t.e("677"),t.e("179"),t.e("987"),t.e("157"),t.e("846"),t.e("759")]).then(()=>()=>t(14386)),eager:0,singleton:1},{name:"@perses-dev/plugin-system",version:"0.51.0-rc.0",factory:()=>Promise.all([t.e("118"),t.e("292"),t.e("755"),t.e("780"),t.e("65"),t.e("677"),t.e("179"),t.e("987"),t.e("157"),t.e("846"),t.e("705"),t.e("656")]).then(()=>()=>t(17402)),eager:0,singleton:1},{name:"date-fns",version:"4.1.0",factory:()=>Promise.all([t.e("238"),t.e("224"),t.e("75")]).then(()=>()=>t(99657)),eager:0,singleton:1},{name:"echarts",version:"5.5.0",factory:()=>Promise.all([t.e("797"),t.e("476"),t.e("409")]).then(()=>()=>t(71932)),eager:0,singleton:1},{name:"lodash",version:"4.17.21",factory:()=>t.e("981").then(()=>()=>t(98784)),eager:0,singleton:1},{name:"react-dom",version:"18.3.1",factory:()=>Promise.all([t.e("173"),t.e("677")]).then(()=>()=>t(31542)),eager:0,singleton:1,requiredVersion:"18.2.0"},{name:"react",version:"18.3.1",factory:()=>t.e("110").then(()=>()=>t(27378)),eager:0,singleton:1,requiredVersion:"18.2.0"}]},uniqueName:"TimeSeriesChart"},t.I=t.I||function(){throw Error("should have __webpack_require__.I")},t.consumesLoadingData={chunkMapping:{846:["45913","4665"],494:["57871"],987:["20461"],179:["6085"],157:["72116"],705:["90775","74614","30156","57751","55922","84275","74128"],677:["54538"]},moduleIdToConsumeDataMapping:{45913:{shareScope:"default",shareKey:"@emotion/styled",import:"@emotion/styled",requiredVersion:"^11.3.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("770").then(()=>()=>t(51958))},90775:{shareScope:"default",shareKey:"@perses-dev/components",import:"@perses-dev/components",requiredVersion:"0.51.0-rc.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("238"),t.e("224"),t.e("797"),t.e("476"),t.e("570"),t.e("225"),t.e("263")]).then(()=>()=>t(14386))},57751:{shareScope:"default",shareKey:"@perses-dev/plugin-system",import:"@perses-dev/plugin-system",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>()=>t(17402)},30156:{shareScope:"default",shareKey:"echarts",import:"echarts",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("797"),t.e("476"),t.e("409")]).then(()=>()=>t(71932))},74128:{shareScope:"default",shareKey:"@perses-dev/plugin-system",import:"@perses-dev/plugin-system",requiredVersion:"0.51.0-rc.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>()=>t(17402)},6085:{shareScope:"default",shareKey:"react-dom",import:"react-dom",requiredVersion:"18.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("173").then(()=>()=>t(31542))},72116:{shareScope:"default",shareKey:"@emotion/react",import:"@emotion/react",requiredVersion:"^11.11.3",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("960").then(()=>()=>t(96434))},57871:{shareScope:"default",shareKey:"date-fns",import:"date-fns",requiredVersion:"^3.0.0 || ^4.0.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("238"),t.e("75")]).then(()=>()=>t(99657))},74614:{shareScope:"default",shareKey:"lodash",import:"lodash",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("981").then(()=>()=>t(98784))},55922:{shareScope:"default",shareKey:"@emotion/styled",import:"@emotion/styled",requiredVersion:"*",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("770").then(()=>()=>t(51958))},4665:{shareScope:"default",shareKey:"date-fns-tz",import:"date-fns-tz",requiredVersion:"^3.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("224"),t.e("740"),t.e("494")]).then(()=>()=>t(48872))},54538:{shareScope:"default",shareKey:"react",import:"react",requiredVersion:"18.2.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("110").then(()=>()=>t(27378))},84275:{shareScope:"default",shareKey:"@hookform/resolvers",import:"@hookform/resolvers",requiredVersion:"^2.0.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>t.e("738").then(()=>()=>t(81228))},20461:{shareScope:"default",shareKey:"date-fns",import:"date-fns",requiredVersion:"^4.1.0",strictVersion:!1,singleton:!0,eager:!1,fallback:()=>Promise.all([t.e("238"),t.e("224"),t.e("75")]).then(()=>()=>t(99657))}},initialConsumes:[]},t.f.consumes=t.f.consumes||function(){throw Error("should have __webpack_require__.f.consumes")},(()=>{if("undefined"!=typeof document){var e=function(e,r,n,o,a){var i=document.createElement("link");return i.rel="stylesheet",i.type="text/css",t.nc&&(i.nonce=t.nc),i.onerror=i.onload=function(t){if(i.onerror=i.onload=null,"load"===t.type)o();else{var n=t&&("load"===t.type?"missing":t.type),s=t&&t.target&&t.target.href||r,l=Error("Loading CSS chunk "+e+" failed.\\n("+s+")");l.code="CSS_CHUNK_LOAD_FAILED",l.type=n,l.request=s,i.parentNode&&i.parentNode.removeChild(i),a(l)}},i.href=r,n?n.parentNode.insertBefore(i,n.nextSibling):document.head.appendChild(i),i},r=function(e,r){for(var t=document.getElementsByTagName("link"),n=0;n<t.length;n++){var o=t[n],a=o.getAttribute("data-href")||o.getAttribute("href");if("stylesheet"===o.rel&&(a===e||a===r))return o}for(var i=document.getElementsByTagName("style"),n=0;n<i.length;n++){var o=i[n],a=o.getAttribute("data-href");if(a===e||a===r)return o}},n={909:0};t.f.miniCss=function(o,a){if(n[o])a.push(n[o]);else if(0!==n[o]&&({263:1,759:1})[o])a.push(n[o]=new Promise(function(n,a){var i=t.miniCssF(o),s=t.p+i;if(r(i,s))return n();e(o,s,null,n,a)}).then(function(){n[o]=0},function(e){throw delete n[o],e}))}}})(),(()=>{var e={909:0};t.f.j=function(r,n){var o=t.o(e,r)?e[r]:void 0;if(0!==o){if(o)n.push(o[2]);else if(/^((15|67|98)7|179|263|494|705|759|846)$/.test(r))e[r]=0;else{var a=new Promise((t,n)=>o=e[r]=[t,n]);n.push(o[2]=a);var i=t.p+t.u(r),s=Error();t.l(i,function(n){if(t.o(e,r)&&(0!==(o=e[r])&&(e[r]=void 0),o)){var a=n&&("load"===n.type?"missing":n.type),i=n&&n.target&&n.target.src;s.message="Loading chunk "+r+" failed.\n("+a+": "+i+")",s.name="ChunkLoadError",s.type=a,s.request=i,o[1](s)}},"chunk-"+r,r)}}},t.O.j=r=>0===e[r];var r=(r,n)=>{var o,a,[i,s,l]=n,c=0;if(i.some(r=>0!==e[r])){for(o in s)t.o(s,o)&&(t.m[o]=s[o]);if(l)var d=l(t)}for(r&&r(n);c<i.length;c++)a=i[c],t.o(e,a)&&e[a]&&e[a][0](),e[a]=0;return t.O(d)},n=self.webpackChunkTimeSeriesChart=self.webpackChunkTimeSeriesChart||[];n.forEach(r.bind(null,0)),n.push=r.bind(null,n.push.bind(n))})(),t.ruid="bundler=rspack@1.2.8",t.O(void 0,["983"],function(){return t(89067)});var n=t.O(void 0,["983"],function(){return t(5311)});n=t.O(n)})();

package/lib/TimeSeriesChartBase.d.ts

@@ -0,0 +1,22 @@
+import { MouseEvent } from 'react';
+import { TimeScale, FormatOptions, TimeSeries } from '@perses-dev/core';
+import type { EChartsCoreOption, GridComponentOption, YAXisComponentOption } from 'echarts';
+import { ChartInstance, TimeChartSeriesMapping, TooltipConfig, ZoomEventData } from '@perses-dev/components';
+export interface TimeChartProps {
+    height: number;
+    data: TimeSeries[];
+    seriesMapping: TimeChartSeriesMapping;
+    timeScale?: TimeScale;
+    yAxis?: YAXisComponentOption;
+    format?: FormatOptions;
+    grid?: GridComponentOption;
+    tooltipConfig?: TooltipConfig;
+    noDataVariant?: 'chart' | 'message';
+    syncGroup?: string;
+    isStackedBar?: boolean;
+    onDataZoom?: (e: ZoomEventData) => void;
+    onDoubleClick?: (e: MouseEvent) => void;
+    __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;
+}
+export declare const TimeSeriesChartBase: import("react").ForwardRefExoticComponent<TimeChartProps & import("react").RefAttributes<ChartInstance>>;
+//# sourceMappingURL=TimeSeriesChartBase.d.ts.map

package/lib/TimeSeriesChartBase.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeSeriesChartBase.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartBase.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAA6D,MAAM,OAAO,CAAC;AAK1G,OAAO,EAAsB,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAejB,OAAO,EACL,aAAa,EAcb,sBAAsB,EAEtB,aAAa,EAGb,aAAa,EACd,MAAM,wBAAwB,CAAC;AAkBhC,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,CAAC;IAC7B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,mBAAmB,0GAyW9B,CAAC"}

package/lib/TimeSeriesChartBase.js

@@ -0,0 +1,389 @@
+// Copyright 2025 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Box } from '@mui/material';
+import merge from 'lodash/merge';
+import isEqual from 'lodash/isEqual';
+import { toZonedTime } from 'date-fns-tz';
+import { getCommonTimeScale } from '@perses-dev/core';
+import { use } from 'echarts/core';
+import { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';
+import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
+import { CanvasRenderer } from 'echarts/renderers';
+import { clearHighlightedSeries, DEFAULT_PINNED_CROSSHAIR, DEFAULT_TOOLTIP_CONFIG, EChart, enableDataZoom, getClosestTimestamp, getFormattedAxis, getFormattedAxisLabel, getPointInGrid, restoreChart, TimeChartTooltip, useChartsContext, useTimeZone } from '@perses-dev/components';
+use([
+    EChartsLineChart,
+    EChartsBarChart,
+    GridComponent,
+    DatasetComponent,
+    DataZoomComponent,
+    MarkAreaComponent,
+    MarkLineComponent,
+    MarkPointComponent,
+    TitleComponent,
+    ToolboxComponent,
+    TooltipComponent,
+    CanvasRenderer
+]);
+export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, grid, isStackedBar = false, tooltipConfig = DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
+    const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = useChartsContext();
+    const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
+    const chartRef = useRef();
+    const [showTooltip, setShowTooltip] = useState(true);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState(null);
+    const [pinnedCrosshair, setPinnedCrosshair] = useState(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const [startX, setStartX] = useState(0);
+    const { timeZone } = useTimeZone();
+    let timeScale;
+    if (timeScaleProp === undefined) {
+        const commonTimeScale = getCommonTimeScale(data);
+        if (commonTimeScale === undefined) {
+            // set default to past 5 years
+            const today = new Date();
+            const pastDate = new Date(today);
+            pastDate.setFullYear(today.getFullYear() - 5);
+            const todayMs = today.getTime();
+            const pastDateMs = pastDate.getTime();
+            timeScale = {
+                startMs: pastDateMs,
+                endMs: todayMs,
+                stepMs: 1,
+                rangeMs: todayMs - pastDateMs
+            };
+        } else {
+            timeScale = commonTimeScale;
+        }
+    } else {
+        timeScale = timeScaleProp;
+    }
+    useImperativeHandle(ref, ()=>{
+        return {
+            highlightSeries ({ name }) {
+                if (!chartRef.current) {
+                    // when chart undef, do not highlight series when hovering over legend
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: name
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // when chart undef, do not clear highlight series
+                    return;
+                }
+                clearHighlightedSeries(chartRef.current);
+            }
+        };
+    }, []);
+    const handleEvents = useMemo(()=>{
+        return {
+            datazoom: (params)=>{
+                if (onDataZoom === undefined) {
+                    setTimeout(()=>{
+                        // workaround so unpin happens after click event
+                        setTooltipPinnedCoords(null);
+                    }, 10);
+                }
+                if (onDataZoom === undefined || params.batch[0] === undefined) return;
+                const xAxisStartValue = params.batch[0].startValue;
+                const xAxisEndValue = params.batch[0].endValue;
+                if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {
+                    const zoomEvent = {
+                        start: xAxisStartValue,
+                        end: xAxisEndValue
+                    };
+                    onDataZoom(zoomEvent);
+                }
+            },
+            finished: ()=>{
+                if (chartRef.current !== undefined) {
+                    enableDataZoom(chartRef.current);
+                }
+            }
+        };
+    }, [
+        onDataZoom,
+        setTooltipPinnedCoords
+    ]);
+    const { noDataOption } = chartsTheme;
+    const option = useMemo(()=>{
+        // The "chart" `noDataVariant` is only used when the `timeSeries` is an
+        // empty array because a `null` value will throw an error.
+        if (data === null || data.length === 0 && noDataVariant === 'message') return noDataOption;
+        // Utilizes ECharts dataset so raw data is separate from series option style properties
+        // https://apache.github.io/echarts-handbook/en/concepts/dataset/
+        const dataset = [];
+        const isLocalTimeZone = timeZone === 'local';
+        data.map((d, index)=>{
+            const values = d.values.map(([timestamp, value])=>{
+                const val = value === null ? '-' : value; // echarts use '-' to represent null data
+                return [
+                    isLocalTimeZone ? timestamp : toZonedTime(timestamp, timeZone),
+                    val
+                ];
+            });
+            dataset.push({
+                id: index,
+                source: [
+                    ...values
+                ],
+                dimensions: [
+                    'time',
+                    'value'
+                ]
+            });
+        });
+        const updatedSeriesMapping = enablePinning && pinnedCrosshair !== null ? [
+            ...seriesMapping,
+            pinnedCrosshair
+        ] : seriesMapping;
+        const option = {
+            dataset: dataset,
+            series: updatedSeriesMapping,
+            xAxis: {
+                type: 'time',
+                min: isLocalTimeZone ? timeScale.startMs : toZonedTime(timeScale.startMs, timeZone),
+                max: isLocalTimeZone ? timeScale.endMs : toZonedTime(timeScale.endMs, timeZone),
+                axisLabel: {
+                    hideOverlap: true,
+                    formatter: getFormattedAxisLabel(timeScale.rangeMs ?? 0)
+                },
+                axisPointer: {
+                    snap: false
+                }
+            },
+            yAxis: getFormattedAxis(yAxis, format),
+            animation: false,
+            tooltip: {
+                show: true,
+                // ECharts tooltip content hidden by default since we use custom tooltip instead.
+                // Stacked bar uses ECharts tooltip so subgroup data shows correctly.
+                showContent: isStackedBar,
+                trigger: isStackedBar ? 'item' : 'axis',
+                appendToBody: isStackedBar
+            },
+            // https://echarts.apache.org/en/option.html#axisPointer
+            axisPointer: {
+                type: 'line',
+                z: 0,
+                triggerEmphasis: false,
+                triggerTooltip: false,
+                snap: false
+            },
+            toolbox: {
+                feature: {
+                    dataZoom: {
+                        icon: null,
+                        yAxisIndex: 'none'
+                    }
+                }
+            },
+            grid
+        };
+        if (__experimentalEChartsOptionsOverride) {
+            return __experimentalEChartsOptionsOverride(option);
+        }
+        return option;
+    }, [
+        data,
+        seriesMapping,
+        timeScale,
+        yAxis,
+        format,
+        grid,
+        noDataOption,
+        __experimentalEChartsOptionsOverride,
+        noDataVariant,
+        timeZone,
+        isStackedBar,
+        enablePinning,
+        pinnedCrosshair
+    ]);
+    // Update adjacent charts so tooltip is unpinned when current chart is clicked.
+    useEffect(()=>{
+        // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.
+        // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.
+        const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;
+        if (multipleTooltipsPinned) {
+            if (!isEqual(lastTooltipPinnedCoords, tooltipPinnedCoords)) {
+                setTooltipPinnedCoords(null);
+                if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {
+                    setPinnedCrosshair(null);
+                }
+            }
+        }
+    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        lastTooltipPinnedCoords,
+        seriesMapping
+    ]);
+    return /*#__PURE__*/ _jsxs(Box, {
+        style: {
+            height
+        },
+        // onContextMenu={(e) => {
+        //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here
+        //   e.preventDefault(); // Prevent the default behaviour when right clicked
+        // }}
+        onClick: (e)=>{
+            // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down
+            const isControlKeyPressed = e.ctrlKey || e.metaKey;
+            if (isControlKeyPressed) {
+                e.preventDefault();
+            }
+            // Determine where on chart canvas to plot pinned crosshair as markLine.
+            const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);
+            if (pointInGrid === null) {
+                return;
+            }
+            // Pin and unpin when clicking on chart canvas but not tooltip text.
+            if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {
+                // Pin tooltip and update shared charts context to remember these coordinates.
+                const pinnedPos = {
+                    page: {
+                        x: e.pageX,
+                        y: e.pageY
+                    },
+                    client: {
+                        x: e.clientX,
+                        y: e.clientY
+                    },
+                    plotCanvas: {
+                        x: e.nativeEvent.offsetX,
+                        y: e.nativeEvent.offsetY
+                    },
+                    target: e.target
+                };
+                setTooltipPinnedCoords((current)=>{
+                    if (current === null) {
+                        return pinnedPos;
+                    } else {
+                        setPinnedCrosshair(null);
+                        return null;
+                    }
+                });
+                setPinnedCrosshair((current)=>{
+                    // Only add pinned crosshair line series when there is not one already in seriesMapping.
+                    if (current === null) {
+                        const cursorX = pointInGrid[0];
+                        // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent
+                        const firstTimeSeriesValues = data[0]?.values;
+                        const closestTimestamp = getClosestTimestamp(firstTimeSeriesValues, cursorX);
+                        // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right
+                        const pinnedCrosshair = merge({}, DEFAULT_PINNED_CROSSHAIR, {
+                            markLine: {
+                                data: [
+                                    {
+                                        xAxis: closestTimestamp
+                                    }
+                                ]
+                            }
+                        });
+                        return pinnedCrosshair;
+                    } else {
+                        // Clear previously set pinned crosshair
+                        return null;
+                    }
+                });
+                if (!isControlKeyPressed) {
+                    setLastTooltipPinnedCoords(pinnedPos);
+                }
+            }
+        },
+        onMouseDown: (e)=>{
+            const { clientX } = e;
+            setIsDragging(true);
+            setStartX(clientX);
+        },
+        onMouseMove: (e)=>{
+            // Allow clicking inside tooltip to copy labels.
+            if (!(e.target instanceof HTMLCanvasElement)) {
+                return;
+            }
+            const { clientX } = e;
+            if (isDragging) {
+                const deltaX = clientX - startX;
+                if (deltaX > 0) {
+                    // Hide tooltip when user drags to zoom.
+                    setShowTooltip(false);
+                }
+            }
+        },
+        onMouseUp: ()=>{
+            setIsDragging(false);
+            setStartX(0);
+            setShowTooltip(true);
+        },
+        onMouseLeave: ()=>{
+            if (tooltipPinnedCoords === null) {
+                setShowTooltip(false);
+            }
+            if (chartRef.current !== undefined) {
+                clearHighlightedSeries(chartRef.current);
+            }
+        },
+        onMouseEnter: ()=>{
+            setShowTooltip(true);
+            if (chartRef.current !== undefined) {
+                enableDataZoom(chartRef.current);
+            }
+        },
+        onDoubleClick: (e)=>{
+            setTooltipPinnedCoords(null);
+            // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+            if (onDoubleClick === undefined) {
+                if (chartRef.current !== undefined) {
+                    restoreChart(chartRef.current);
+                }
+            } else {
+                onDoubleClick(e);
+            }
+        },
+        children: [
+            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeChartTooltip, {
+                containerId: chartsTheme.tooltipPortalContainerId,
+                chartRef: chartRef,
+                data: data,
+                seriesMapping: seriesMapping,
+                wrapLabels: tooltipConfig.wrapLabels,
+                enablePinning: isPinningEnabled,
+                pinnedPos: tooltipPinnedCoords,
+                format: format,
+                onUnpinClick: ()=>{
+                    // Unpins tooltip when clicking Pin icon in TooltipHeader.
+                    setTooltipPinnedCoords(null);
+                    // Clear previously set pinned crosshair.
+                    setPinnedCrosshair(null);
+                }
+            }),
+            /*#__PURE__*/ _jsx(EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
+                option: option,
+                theme: chartsTheme.echartsTheme,
+                onEvents: handleEvents,
+                _instance: chartRef,
+                syncGroup: syncGroup
+            })
+        ]
+    });
+});
+
+//# sourceMappingURL=TimeSeriesChartBase.js.map

package/lib/TimeSeriesChartBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/TimeSeriesChartBase.tsx"],"sourcesContent":["// Copyright 2025 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { forwardRef, MouseEvent, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport merge from 'lodash/merge';\nimport isEqual from 'lodash/isEqual';\nimport { toZonedTime } from 'date-fns-tz';\nimport { getCommonTimeScale, TimeScale, FormatOptions, TimeSeries } from '@perses-dev/core';\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  ChartInstance,\n  ChartInstanceFocusOpts,\n  clearHighlightedSeries,\n  CursorCoordinates,\n  DEFAULT_PINNED_CROSSHAIR,\n  DEFAULT_TOOLTIP_CONFIG,\n  EChart,\n  enableDataZoom,\n  getClosestTimestamp,\n  getFormattedAxis,\n  getFormattedAxisLabel,\n  getPointInGrid,\n  OnEventsType,\n  restoreChart,\n  TimeChartSeriesMapping,\n  TimeChartTooltip,\n  TooltipConfig,\n  useChartsContext,\n  useTimeZone,\n  ZoomEventData,\n} from '@perses-dev/components';\nimport { DatasetOption } from 'echarts/types/dist/shared';\n\nuse([\n  EChartsLineChart,\n  EChartsBarChart,\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n  height: number;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  timeScale?: TimeScale;\n  yAxis?: YAXisComponentOption;\n  format?: FormatOptions;\n  grid?: GridComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  isStackedBar?: boolean;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n  {\n    height,\n    data,\n    seriesMapping,\n    timeScale: timeScaleProp,\n    yAxis,\n    format,\n    grid,\n    isStackedBar = false,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const { chartsTheme, enablePinning, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = useChartsContext();\n  const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const [pinnedCrosshair, setPinnedCrosshair] = useState<LineSeriesOption | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const { timeZone } = useTimeZone();\n  let timeScale: TimeScale;\n  if (timeScaleProp === undefined) {\n    const commonTimeScale = getCommonTimeScale(data);\n    if (commonTimeScale === undefined) {\n      // set default to past 5 years\n      const today = new Date();\n      const pastDate = new Date(today);\n      pastDate.setFullYear(today.getFullYear() - 5);\n      const todayMs = today.getTime();\n      const pastDateMs = pastDate.getTime();\n      timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n    } else {\n      timeScale = commonTimeScale;\n    }\n  } else {\n    timeScale = timeScaleProp;\n  }\n\n  useImperativeHandle(ref, () => {\n    return {\n      highlightSeries({ name }: ChartInstanceFocusOpts): void {\n        if (!chartRef.current) {\n          // when chart undef, do not highlight series when hovering over legend\n          return;\n        }\n\n        chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n      },\n      clearHighlightedSeries: (): void => {\n        if (!chartRef.current) {\n          // when chart undef, do not clear highlight series\n          return;\n        }\n        clearHighlightedSeries(chartRef.current);\n      },\n    };\n  }, []);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params): void => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const xAxisStartValue = params.batch[0].startValue;\n        const xAxisEndValue = params.batch[0].endValue;\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      finished: (): void => {\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      },\n    };\n  }, [onDataZoom, setTooltipPinnedCoords]);\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const dataset: DatasetOption[] = [];\n    const isLocalTimeZone = timeZone === 'local';\n    data.map((d, index) => {\n      const values = d.values.map(([timestamp, value]) => {\n        const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n        return [isLocalTimeZone ? timestamp : toZonedTime(timestamp, timeZone), val];\n      });\n      dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n    });\n\n    const updatedSeriesMapping =\n      enablePinning && pinnedCrosshair !== null ? [...seriesMapping, pinnedCrosshair] : seriesMapping;\n\n    const option: EChartsCoreOption = {\n      dataset: dataset,\n      series: updatedSeriesMapping,\n      xAxis: {\n        type: 'time',\n        min: isLocalTimeZone ? timeScale.startMs : toZonedTime(timeScale.startMs, timeZone),\n        max: isLocalTimeZone ? timeScale.endMs : toZonedTime(timeScale.endMs, timeZone),\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getFormattedAxisLabel(timeScale.rangeMs ?? 0),\n        },\n        axisPointer: {\n          snap: false, // important so shared crosshair does not lag\n        },\n      },\n      yAxis: getFormattedAxis(yAxis, format),\n      animation: false,\n      tooltip: {\n        show: true,\n        // ECharts tooltip content hidden by default since we use custom tooltip instead.\n        // Stacked bar uses ECharts tooltip so subgroup data shows correctly.\n        showContent: isStackedBar,\n        trigger: isStackedBar ? 'item' : 'axis',\n        appendToBody: isStackedBar,\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: false, // xAxis.axisPointer.snap takes priority\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n\n    return option;\n  }, [\n    data,\n    seriesMapping,\n    timeScale,\n    yAxis,\n    format,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    timeZone,\n    isStackedBar,\n    enablePinning,\n    pinnedCrosshair,\n  ]);\n\n  // Update adjacent charts so tooltip is unpinned when current chart is clicked.\n  useEffect(() => {\n    // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.\n    // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.\n    const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;\n    if (multipleTooltipsPinned) {\n      if (!isEqual(lastTooltipPinnedCoords, tooltipPinnedCoords)) {\n        setTooltipPinnedCoords(null);\n        if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {\n          setPinnedCrosshair(null);\n        }\n      }\n    }\n    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastTooltipPinnedCoords, seriesMapping]);\n\n  return (\n    <Box\n      style={{ height }}\n      // onContextMenu={(e) => {\n      //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here\n      //   e.preventDefault(); // Prevent the default behaviour when right clicked\n      // }}\n      onClick={(e) => {\n        // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down\n        const isControlKeyPressed = e.ctrlKey || e.metaKey;\n        if (isControlKeyPressed) {\n          e.preventDefault();\n        }\n\n        // Determine where on chart canvas to plot pinned crosshair as markLine.\n        const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);\n        if (pointInGrid === null) {\n          return;\n        }\n\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {\n          // Pin tooltip and update shared charts context to remember these coordinates.\n          const pinnedPos: CursorCoordinates = {\n            page: {\n              x: e.pageX,\n              y: e.pageY,\n            },\n            client: {\n              x: e.clientX,\n              y: e.clientY,\n            },\n            plotCanvas: {\n              x: e.nativeEvent.offsetX,\n              y: e.nativeEvent.offsetY,\n            },\n            target: e.target,\n          };\n\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return pinnedPos;\n            } else {\n              setPinnedCrosshair(null);\n              return null;\n            }\n          });\n\n          setPinnedCrosshair((current) => {\n            // Only add pinned crosshair line series when there is not one already in seriesMapping.\n            if (current === null) {\n              const cursorX = pointInGrid[0];\n\n              // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent\n              const firstTimeSeriesValues = data[0]?.values;\n              const closestTimestamp = getClosestTimestamp(firstTimeSeriesValues, cursorX);\n\n              // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right\n              const pinnedCrosshair = merge({}, DEFAULT_PINNED_CROSSHAIR, {\n                markLine: {\n                  data: [\n                    {\n                      xAxis: closestTimestamp,\n                    },\n                  ],\n                },\n              } as LineSeriesOption);\n              return pinnedCrosshair;\n            } else {\n              // Clear previously set pinned crosshair\n              return null;\n            }\n          });\n\n          if (!isControlKeyPressed) {\n            setLastTooltipPinnedCoords(pinnedPos);\n          }\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead */}\n      {showTooltip === true &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeChartTooltip\n            containerId={chartsTheme.tooltipPortalContainerId}\n            chartRef={chartRef}\n            data={data}\n            seriesMapping={seriesMapping}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={isPinningEnabled}\n            pinnedPos={tooltipPinnedCoords}\n            format={format}\n            onUnpinClick={() => {\n              // Unpins tooltip when clicking Pin icon in TooltipHeader.\n              setTooltipPinnedCoords(null);\n              // Clear previously set pinned crosshair.\n              setPinnedCrosshair(null);\n            }}\n          />\n        )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={syncGroup}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useEffect","useImperativeHandle","useMemo","useRef","useState","Box","merge","isEqual","toZonedTime","getCommonTimeScale","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","clearHighlightedSeries","DEFAULT_PINNED_CROSSHAIR","DEFAULT_TOOLTIP_CONFIG","EChart","enableDataZoom","getClosestTimestamp","getFormattedAxis","getFormattedAxisLabel","getPointInGrid","restoreChart","TimeChartTooltip","useChartsContext","useTimeZone","TimeSeriesChartBase","TimeChart","height","data","seriesMapping","timeScale","timeScaleProp","yAxis","format","grid","isStackedBar","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","chartsTheme","enablePinning","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","isPinningEnabled","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","pinnedCrosshair","setPinnedCrosshair","isDragging","setIsDragging","startX","setStartX","timeZone","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","rangeMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","finished","noDataOption","option","length","dataset","isLocalTimeZone","map","d","index","values","timestamp","value","val","push","id","source","dimensions","updatedSeriesMapping","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","animation","tooltip","show","showContent","trigger","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","multipleTooltipsPinned","style","onClick","e","isControlKeyPressed","ctrlKey","metaKey","preventDefault","pointInGrid","nativeEvent","offsetX","offsetY","target","HTMLCanvasElement","pinnedPos","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","cursorX","firstTimeSeriesValues","closestTimestamp","markLine","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","wrapLabels","onUnpinClick","sx","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/lib/TimeSeriesChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChartPanel.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAIhE,OAAO,EAQL,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAEL,UAAU,EAIX,MAAM,2BAA2B,CAAC;AAiBnC,OAAO,EACL,sBAAsB,EAKvB,MAAM,2BAA2B,CAAC;AAUnC,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,sBAAsB,EAAE,cAAc,CAAC,CAAC;AAWtF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAqVrF"}
+{"version":3,"file":"TimeSeriesChartPanel.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAIhE,OAAO,EAQL,cAAc,EACf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAEL,UAAU,EAIX,MAAM,2BAA2B,CAAC;AAgBnC,OAAO,EACL,sBAAsB,EAKvB,MAAM,2BAA2B,CAAC;AAWnC,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,sBAAsB,EAAE,cAAc,CAAC,CAAC;AAWtF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAqVrF"}

package/lib/TimeSeriesChartPanel.js

@@ -16,10 +16,11 @@ import { Box, useTheme } from '@mui/material';
 import merge from 'lodash/merge';
 import { getTimeSeriesValues, DEFAULT_LEGEND, getCalculations, formatValue } from '@perses-dev/core';
 import { LEGEND_VALUE_CONFIG, useTimeRange, validateLegendSpec, legendValues } from '@perses-dev/plugin-system';
-import { YAxisLabel, useChartsTheme, ContentWithLegend, useId, TimeChart, DEFAULT_TOOLTIP_CONFIG } from '@perses-dev/components';
+import { YAxisLabel, useChartsTheme, ContentWithLegend, useId, DEFAULT_TOOLTIP_CONFIG } from '@perses-dev/components';
 import { DEFAULT_FORMAT, DEFAULT_VISUAL, THRESHOLD_PLOT_INTERVAL } from './time-series-chart-model';
 import { getTimeSeries, getCommonTimeScaleForQueries, convertPanelYAxis, getThresholdSeries, convertPercentThreshold } from './utils/data-transform';
 import { getSeriesColor } from './utils/palette-gen';
+import { TimeSeriesChartBase } from './TimeSeriesChartBase';
 // Using an "ALL" value to handle the case on first loading the chart where we
 // want to select all, but do not want all of the legend items to be visually highlighted.
 // This helps us differentiate those cases more clearly instead of inferring it
@@ -317,7 +318,7 @@ export function TimeSeriesChartPanel(props) {
                             name: yAxis.label,
                             height: height
                         }),
-                        /*#__PURE__*/ _jsx(TimeChart, {
+                        /*#__PURE__*/ _jsx(TimeSeriesChartBase, {
                             ref: chartRef,
                             height: height,
                             data: timeChartData,