@unblind/react 0.1.0-alpha.19 → 0.1.0-alpha.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.mjs CHANGED
@@ -1,2 +1,2 @@
1
- import{QueryClient as ue,QueryClientProvider as Oe,useQueryClient as ze}from"@tanstack/react-query";import{createContext as Be,useCallback as Ke,useContext as qe,useMemo as ce}from"react";import{jsx as pe}from"react/jsx-runtime";var me=Be(void 0);function de({children:e,queryClient:t,queryClientConfig:r,apiBaseUrl:n="/api/unblind",fetchImpl:o}){let i=ce(()=>{if(t)return t;let a={refetchOnWindowFocus:!1,refetchOnReconnect:!1,refetchOnMount:!1},u={defaultOptions:{queries:a}};return r?new ue({...r,defaultOptions:{...r.defaultOptions,queries:{...a,...r.defaultOptions?.queries}}}):new ue(u)},[t,r]),s=ce(()=>({apiBaseUrl:n,fetchImpl:o}),[n,o]);return pe(Oe,{client:i,children:pe(me.Provider,{value:s,children:e})})}function F(){let e=qe(me);if(!e)throw new Error("useUnblindConfig must be used within an UnblindClientProvider. Please wrap your app or component tree with <UnblindClientProvider>.");return e}function he(){let e=ze();return Ke(async()=>{await e.refetchQueries({queryKey:["unblind","timeseries"]})},[e])}import{createContext as Ge,useContext as fe,useMemo as W}from"react";import{jsx as z,jsxs as He}from"react/jsx-runtime";function te(){return z("div",{className:"ub-default",children:He("div",{className:"ub-empty-content",children:[z("div",{className:"ub-empty-icon-wrapper",children:z("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"ub-icon",children:z("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"})})}),z("p",{className:"ub-empty-text","data-text":"No data available for this time range"})]})})}function re(){return z("div",{className:"ub-error"})}function oe(){return z("div",{className:"ub-default","data-text":"Loading"})}import{jsx as $e}from"react/jsx-runtime";var ne=Ge(void 0);function ie({children:e,timeRange:t,startTime:r,endTime:n,interval:o,attributes:i,groupBy:s,operator:a,appearance:u,tooltip:c,colors:h,fill:m,sortByValues:d}){let l=fe(ne),f=u?.components?.Loading||l?.appearance?.components?.Loading,g=u?.components?.Error||l?.appearance?.components?.Error,p=u?.components?.Tooltip||l?.appearance?.components?.Tooltip,b=u?.components?.Empty||l?.appearance?.components?.Empty,C=c?.layout||l?.tooltip?.layout,y=c?.labelFormat||l?.tooltip?.labelFormat,x=typeof c?.hideAttributes=="boolean"?c?.hideAttributes:l?.tooltip?.hideAttributes,k=typeof c?.hideAttributeKey=="boolean"?c?.hideAttributeKey:l?.tooltip?.hideAttributeKey,T=typeof c?.hideMetric=="boolean"?c?.hideMetric:l?.tooltip?.hideMetric,A=W(()=>({components:{...f&&{Loading:f},...g&&{Error:g},...p&&{Tooltip:p},...b&&{Empty:b}}}),[f,g,p,b]),L=W(()=>({layout:C,labelFormat:y,hideAttributes:x,hideAttributeKey:k,hideMetric:T}),[C,y,x,k,T]),R=W(()=>({timeRange:t??l?.timeRange,startTime:r??l?.startTime,endTime:n??l?.endTime,interval:o??l?.interval,attributes:i??l?.attributes,groupBy:s??l?.groupBy,operator:a??l?.operator,colors:h??l?.colors,sortByValues:typeof d=="boolean"?d:l?.sortByValues,fill:typeof m=="boolean"?m:l?.fill,appearance:A,tooltip:L}),[t,r,n,o,i,s,a,h,d,m,A,L,l]);return $e(ne.Provider,{value:R,children:e})}var _e="6h";function q(){let e=fe(ne);return W(()=>({...e,timeRange:e?.timeRange||_e,appearance:{components:{Loading:e?.appearance?.components?.Loading??oe,Error:e?.appearance?.components?.Error??re,Empty:e?.appearance?.components?.Empty??te,Tooltip:e?.appearance?.components?.Tooltip}}}),[e])}import{jsx as be}from"react/jsx-runtime";function Qe({children:e,queryClient:t,apiBaseUrl:r,fetchImpl:n,timeRange:o,startTime:i,endTime:s,interval:a,attributes:u,groupBy:c,operator:h,appearance:m,tooltip:d,colors:l,sortByValues:f}){return be(de,{queryClient:t,apiBaseUrl:r,fetchImpl:n,children:be(ie,{timeRange:o,startTime:i,endTime:s,interval:a,attributes:u,groupBy:c,operator:h,appearance:m,tooltip:d,colors:l,sortByValues:f,children:e})})}import{useQuery as je}from"@tanstack/react-query";function We(){let{apiBaseUrl:e,fetchImpl:t=fetch}=F(),r=je({queryKey:["unblind","metrics"],queryFn:async()=>{let n=await t(`${e}/metrics`,{headers:{"Content-Type":"application/json"}});if(!n.ok)throw new Error("Error loading metrics metadata");if(n.status===200){let{data:o}=await n.json();return o}else throw new Error("Unexpected status code")}});return{metrics:r.data,isLoading:r.isLoading,hasError:r.isError,refetch:r.refetch}}import{useQuery as Je}from"@tanstack/react-query";import{useMemo as $}from"react";import Xe from"ms";function Ye(e){let t=Math.floor(Date.now()/1e3);return[t-Math.floor(Xe(e)/1e3),t]}function H(e,t,r){let n,o;if(typeof t=="number"&&typeof r=="number")n=t,o=r;else if(e){let[i,s]=Ye(e);n=i,o=s}else throw new Error("Either timeRange or both startTime and endTime must be provided");return[n,o]}function ae({queries:e,timeRange:t,startTime:r,endTime:n,interval:o}){let{apiBaseUrl:i,fetchImpl:s=fetch}=F(),a=$(()=>e.map(y=>y.metrics.join(",")).join(","),[e]),u=$(()=>e.map(y=>{let x=y.attributes;if(!x)return"";let k=Object.keys(x);return k.length===0?"":k.map(T=>T+":"+x[T]?.join(",")).join(",")}).join(","),[e]),c=$(()=>e.map(y=>y.operator),[e]),h=$(()=>e.map(y=>y.groupBy).join(", "),[e]),d=Je({queryKey:["unblind","timeseries",a,u,r,n,t,o,c,h],queryFn:async()=>{if(!a)throw new Error("Missing required parameters");if(a.length===0)throw new Error("No series provided");let[y,x]=H(t,r,n),k={queries:e,startTime:y,endTime:x,interval:o},T=await s(`${i}/tenants/timeseries`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(k)});if(!T.ok)throw new Error("Error fetching metric");let{series:A,times:L,metadata:R}=await T.json();if(!A)throw console.error("Series not found"),new Error("Series not found");return{series:A,times:L,metadata:R}},enabled:!!a&&(typeof r=="number"&&typeof n=="number"||!!t)}),{metadata:l,series:f,times:g}=$(()=>d.data?{series:d.data.series,times:d.data.times,metadata:d.data.metadata}:{series:[],times:[],metadata:{}},[d]),p=d.isLoading,b=d.isFetching,C=d.isError;return{data:{series:f,times:g,metadata:l},isLoading:p,isFetching:b,hasError:C,refetch:d.refetch}}import{useQuery as Ze}from"@tanstack/react-query";import{useMemo as et}from"react";function tt({timeRange:e,startTime:t,endTime:r}){let{apiBaseUrl:n,fetchImpl:o=fetch}=F(),s=Ze({queryKey:["unblind","usage",e,t,r],queryFn:async()=>{let[h,m]=H(e,t,r),d=`${n}/tenants/usage`,l=await o(d,{headers:{"Content-Type":"application/json"},body:JSON.stringify({startTime:h,endTime:m})});if(!l.ok)throw new Error("Error fetching usage");let{data:f}=await l.json();if(!f)throw new Error("usage not found");return f},enabled:typeof t=="number"&&typeof r=="number"||!!e}),a=et(()=>s.data?s.data||[]:[],[s]),u=s.isLoading||s.isRefetching,c=s.isError;return{usage:a,isLoading:u,hasError:c,refetch:s.refetch}}import{useInfiniteQuery as rt}from"@tanstack/react-query";import{useMemo as ot}from"react";function nt({timeRange:e,filters:t,startTime:r,endTime:n}){let{apiBaseUrl:o,fetchImpl:i=fetch}=F(),s=typeof r=="number"&&typeof n=="number"||!!e,a=rt({queryKey:["unblind","logs",e,t.map(c=>c.name+":"+c.value).sort().join(",")],queryFn:async({pageParam:c})=>{let h=t.reduce((T,A)=>(T[A.name]||(T[A.name]=[]),T[A.name].push(A.value),T),{}),{body:m=[],severity:d=[],"service.name":l=[],"trace.id":f=[],"span.id":g=[],...p}=h,[b,C]=H(e,r,n),y=await i(`${o}/tenants/logs`,{method:"POST",body:JSON.stringify({filter:{attributes:p,body:m,severity:d,traceId:f,spanId:g,service:l},startTime:b,endTime:C,pagination:{page:c}}),headers:{"Content-Type":"application/json"}});if(!y.ok)throw new Error("Error fetching logs");let{data:x,next_page:k}=await y.json();if(!x)throw new Error("data not found");return{data:x,next_page:k}},enabled:s,initialPageParam:void 0,getNextPageParam:c=>c.next_page});return{logs:ot(()=>a.data?a.data.pages.flatMap(c=>c.data||[]):[],[a.data]),isLoading:a.isLoading,hasError:a.isError,hasNextPage:a.hasNextPage??!1,fetchNextPage:a.fetchNextPage,isFetchingNextPage:a.isFetchingNextPage,refetch:a.refetch}}import{useMemo as Yt}from"react";import{useEffect as Qt,useRef as jt}from"react";import Wt from"uplot";var Q=e=>"value"in e,X=e=>"from"in e&&"to"in e;import J from"uplot";import{getValueFormat as Ut}from"@unblind/units";import{dateTimeFormat as it,dateTimeFormatTimeAgo as at,systemDateFormats as Y}from"@unblind/units";var S={millisecond:1,second:1e3,minute:6e4,hour:36e5,day:864e5,month:24192e5,year:31536e6},G={second:[1,2,5,10,15,30],minute:[1,2,5,10,15,30],hour:[1,2,3,4,6,8,12],day:[1,2,3,7,14],month:[1,2,3,6],year:[1,2,5,10,20,50,100]};function st(e,t,r,n){if(t>7*S.day){let o=Y.interval.year,i=Math.round(S.year/S.day)*S.day;return Math.round(t/S.day)*S.day===i?o=Y.interval.year:t<=S.year?o=Y.interval.month:o=Y.interval.day,e.map(a=>it(a,{format:o,timeZone:n}))}return e.map(o=>{let i=new Date(o),s=t<S.minute,a=t<S.second,u=i.toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit",hour12:!1,timeZone:n});return(u==="00:00"||u==="24:00")&&!s&&!a?i.toLocaleDateString(void 0,{day:"2-digit",month:"short",timeZone:n}):i.toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit",second:s?"2-digit":void 0,fractionalSecondDigits:a?3:void 0,hour12:!1,timeZone:n})})}function ge(e){let t=[{size:S.second/1e3,increments:G.second},{size:S.minute/1e3,increments:G.minute},{size:S.hour/1e3,increments:G.hour},{size:S.day/1e3,increments:G.day},{size:S.month/1e3,increments:G.month},{size:S.year/1e3,increments:G.year}];for(let o of t)for(let i of o.increments){let s=o.size*i;if(s>=e)return{increment:s*1e3,multiplier:i}}let r=t[t.length-1],n=r.increments[r.increments.length-1];return{increment:r.size*n*1e3,multiplier:n}}function lt(e,t,r){return[t,r]}function ut(e,t,r,n){let o=r-t,i=e.width,s=Math.floor(i/100),a=o/s,{increment:u,multiplier:c}=ge(a),h=u/1e3,m=[];if(o<12*3600){let l=Math.ceil(t/h)*h;for(;l<=r;l+=h)m.push(l);return m}if(o<3*86400){if(u>=6*3600*1e3){let f=u/1e3/3600,g=new Date(t*1e3);if(n==="UTC"){let b=g.getUTCHours(),C=Math.floor(b/f)*f;g.setUTCHours(C,0,0,0)}else{let b=g.getHours(),C=Math.floor(b/f)*f;g.setHours(C,0,0,0)}let p=g.getTime()/1e3;for(p<t&&(p+=h);p<=r;)m.push(p),p+=h;return m}let l=Math.ceil(t/h)*h;for(;l<=r;l+=h)m.push(l);return m}if(u>=S.day){let l=new Date(t*1e3);n==="UTC"?(l.setUTCHours(0,0,0,0),l.getTime()/1e3<t&&l.setUTCDate(l.getUTCDate()+c)):(l.setHours(0,0,0,0),l.getTime()/1e3<t&&l.setDate(l.getDate()+c));let f=l.getTime()/1e3;for(;f<=r;)m.push(f),n==="UTC"?l.setUTCDate(l.getUTCDate()+c):l.setDate(l.getDate()+c),f=l.getTime()/1e3;return m}let d=Math.ceil(t/h)*h;for(;d<=r;d+=h)m.push(d);return m}function ct(e,t,r){return t.length===0?[]:t.map((n,o)=>o===0||o===t.length-1?at(n*1e3,{timeZone:r}):"")}function pt(e,t,r){let n=e.scales.x,o=((n?.max??0)-(n?.min??0))*1e3,i=Math.floor(e.width/100),s=o/1e3/i,{increment:a}=ge(s),u=t.map(c=>c*1e3);return st(u,a,o,r)}function ye(e,t,r=!1){let n=r?(i,s,a,u)=>lt(i,a,u):(i,s,a,u)=>ut(i,a,u,t),o=r?(i,s)=>ct(i,s,t):(i,s)=>pt(i,s,t);return{font:_(e),labelFont:_(e),grid:{show:!1,width:.5},ticks:{width:.5},splits:n,values:o,size:20}}import{computePosition as mt,flip as dt,offset as ht}from"@floating-ui/dom";import{createRoot as ft}from"react-dom/client";var bt=4,gt=8,se=class{overlay=null;reactRoot=null;renderedUplot=null;initialize(){this.overlay||(this.overlay=document.createElement("div"),this.overlay.id="unblind-tooltip-overlay",this.overlay.style.display="none",this.overlay.style.position="fixed",this.overlay.style.pointerEvents="none",this.overlay.style.zIndex="9999",document.body.appendChild(this.overlay),this.reactRoot=ft(this.overlay))}getOverlay(){return this.overlay}render(t,r){this.reactRoot?(this.reactRoot.render(r),this.renderedUplot=t):this.renderedUplot=null}show(){this.overlay&&(this.overlay.style.display="block")}hide(t){if(t!==this.renderedUplot){console.warn("Hide call plot");return}this.overlay&&(this.overlay.style.display="none"),this.render(null,null)}getRenderedUplot(){return this.renderedUplot}async positionTooltip(t){let r=this.getOverlay();if(r){let{x:n,y:o}=await mt({getBoundingClientRect:()=>({x:t.left,y:t.top,width:0,height:0,top:t.top,left:t.left,right:t.left,bottom:t.top})},r,{placement:"top-start",strategy:"fixed",middleware:[ht({mainAxis:bt,crossAxis:gt}),dt()]});r.style.left=`${n}px`,r.style.top=`${o}px`}}},U=new se;import{dateTimeFormat as ke}from"@unblind/units";import{useMemo as Se}from"react";function xe(e){return e.metric.displayName||e.metric.name||(typeof e.serie.label=="string"?e.serie.label:e.serie.label?.textContent||"Unknown")}function Te(e){let t=e.attributes||{};if(t["service.name"])return String(t["service.name"]);let n=Object.keys(t)[0];return n?String(t[n]):"z-fallback"}function ve(e){return[...e].sort((t,r)=>(Number(r.value)||0)-(Number(t.value)||0))}function Ce(e){return[...e].sort((t,r)=>Te(t).localeCompare(Te(r)))}function yt(e){let t={};return e.forEach(r=>{let n=xe(r);t[n]||(t[n]=[]),t[n].push(r)}),t}function Ae(e,t,r,n="original"){if(r==="flat")return[{label:"",items:t?ve(e):Ce(e)}];let o=yt(e);return Object.keys(o).sort((s,a)=>s.localeCompare(a)).map(s=>{let a=o[s];if(!a)return{label:j(s,n),items:[]};let u=t?ve(a):Ce(a);return{label:j(s,n),items:u}})}function j(e,t,r){switch(t){case"suffix":{let n=e.split(/[._-]/),o=n[n.length-1]||"";return r?o:o.charAt(0).toUpperCase()+o.slice(1).toLowerCase()}case"title":return e.split(/[._-]/).map(n=>r?n:n.charAt(0).toUpperCase()+n.slice(1).toLowerCase()).join(" ");default:return e}}function Pe(e,t){if(t&&t!=="auto")return t;let r=e.some(o=>o.attributes&&Object.keys(o.attributes).length>0),n=new Set(e.map(xe));return r&&n.size>=1?"group-by-metric":"flat"}import{jsx as v,jsxs as V}from"react/jsx-runtime";function Tt(){return v("span",{"data-text":", ",className:"ub-tooltip-item-attribute-divider"})}function vt({value:e}){return v("span",{className:"ub-tooltip-item-attribute-value ub-truncate",children:e})}function Ct({keyValue:e,labelFormat:t}){return V("span",{className:"ub-tooltip-item-attribute-key",children:[j(e,t),":"]})}function xt({children:e}){return v("div",{className:"ub-tooltip-item-attribute-container",children:e})}function At({hideAttributeKey:e,children:t}){return v("div",{className:"ub-truncate"+(e?" ub-tooltip-item-hidden-attribute-key":" ub-tooltip-item-attribute-with-key"),children:t})}function we({hideAttributeKey:e,attribute:t,labelFormat:r,isLastAttribute:n}){let[o,i]=t;return V(xt,{children:[V(At,{hideAttributeKey:e,children:[!e&&v(Ct,{keyValue:o,labelFormat:r}),v(vt,{value:i})]}),!n&&e&&v(Tt,{})]})}function Pt({item:e,hideMetric:t,hideAttributeKey:r,hideAttributes:n,labelFormat:o}){let s=Object.entries(e.attributes||{}),a=s.length>0&&!n;return n&&t&&console.warn("Invalid configuration. Attributes and metrics are hidden."),V("div",{className:"ub-tooltip-item-row",children:[V("div",{className:"ub-tooltip-item-left"+(t?" ub-tooltip-item-hidden-metric":""),children:[V("div",{className:"ub-tooltip-item-heading",children:[v("span",{className:"ub-tooltip-item-dot",style:{backgroundColor:e.color}}),t?v("div",{className:"ub-tooltip-item-attributes",children:s.map((u,c)=>v(we,{hideAttributeKey:r,attribute:u,labelFormat:o,isLastAttribute:c>=s.length-1},"attr_"+u[0]))}):v("span",{className:"ub-truncate"+(a?" ub-tooltip-item-metric-name-with-attributes":" ub-tooltip-item-metric-name-without-attributes"),children:j(e.metric.name,o)})]}),a&&!t&&v("div",{className:"ub-tooltip-item-attributes",children:s.map((u,c)=>v(we,{hideAttributeKey:r,attribute:u,labelFormat:o,isLastAttribute:c>=s.length-1},"attr_"+u[0]))})]}),v("div",{className:"ub-tooltip-item-value",children:e.formattedValue??v("span",{className:"ub-tooltip-item-value--empty",children:"\u2014"})})]})}function kt({className:e="ub-tooltip-divider",...t}){return v("hr",{role:"presentation",...t,className:e})}function St({group:e,groupIdx:t,hideAttributeKey:r,hideMetric:n,hideAttributes:o,labelFormat:i,hideGroupLabel:s}){return V("div",{className:"ub-tooltip-group",children:[!s&&v("div",{className:`ub-tooltip-group-header ub-truncate${t>0?" ub-tooltip-group-header--separator":""}`,children:e.label}),v("div",{className:"ub-tooltip-items",children:e.items.map((a,u)=>v(Pt,{item:a,labelFormat:i,hideAttributeKey:r,hideMetric:n,hideAttributes:o},`item-${t}-${u}`))})]},e.label)}function Le({timestamp:e,items:t,timeZone:r,spansMultipleDays:n,sortByValues:o,labelFormat:i="original",layout:s="flat",hideAttributeKey:a,hideMetric:u,hideAttributes:c}){let h=n?ke(e*1e3,{format:"MMM DD, HH:mm",timeZone:r}):ke(e*1e3,{format:"HH:mm",timeZone:r}),m=Se(()=>Pe(t,s),[t,s]),d=m==="flat",f=typeof u=="boolean"?u:m==="group-by-metric",g=typeof a=="boolean"?a:!1,p=typeof c=="boolean"?c:!1,b=Se(()=>Ae(t,o,m,i),[t,o,m,i]);return V("div",{className:"ub-tooltip",children:[v("div",{className:"ub-tooltip-datetime",children:h}),v(kt,{}),b.length>0?v("div",{className:"ub-tooltip-content",children:b.map((C,y)=>v(St,{group:C,groupIdx:y,hideAttributeKey:g,hideMetric:f,hideAttributes:p,hideGroupLabel:d,labelFormat:i},C.label))}):v("div",{className:"ub-tooltip-no-data",children:"No data available"})]})}import{jsx as Re}from"react/jsx-runtime";function wt(e,t){if(!e||e.length===0)return!1;let r=e[0],n=e[e.length-1];if(r==null||n==null)return!1;let o=new Date(r*1e3),i=new Date(n*1e3),s=a=>t==="UTC"?`${a.getUTCFullYear()}-${a.getUTCMonth()}-${a.getUTCDate()}`:a.toLocaleDateString(void 0,{timeZone:t});return s(o)!==s(i)}function Lt(e,t){let r=!1;for(let o=1;o<e.series.length;o++)if(e.data[o]?.[t]!=null){r=!0;break}if(r)return t;let n=e.data[0].length;for(let o=1;t+o<n||t-o>=0;o++){let i=t-o,s=t+o;if(i>=0){for(let a=1;a<e.series.length;a++)if(e.data[a]?.[i]!=null)return i}if(s<n){for(let a=1;a<e.series.length;a++)if(e.data[a]?.[s]!=null)return s}}return t}function Rt(e,t,r,n,o,i){let s=!1,a=[];for(let u=1;u<e.series.length;u++){let c=e.data[u]?.[t]??null;if(n&&c!=null&&u>1){let p=e.data[u-1]?.[t]??0;c=c-p}let h=e.series[u],m=i?.[u-1];if(!m){console.warn("Original serie not found");continue}let d=o[m.metric];if(!d){console.warn("Metric metadata not found");continue}let l=h?.stroke,f=typeof l=="function"?l(e,u):l??"#ffffff00",g=c==null?void 0:r?r(c):String(c);m?.attributes&&Object.keys(m?.attributes).length>0&&(s=!0),a.push({metric:d,color:f,value:c===null?void 0:c,formattedValue:g,attributes:m?.attributes,serie:h})}return{items:a,hasAttributes:s}}function Ue(e,t,r,n,o,i,s,a,u,c,h,m){let d,l,f,g=!1;function p(){let b=d.getBoundingClientRect();l=b.left,f=b.top}return{hooks:{init:b=>{U.initialize(),d=b.over,window.addEventListener("scroll",p,!0),window.addEventListener("resize",p),d.onmouseenter=()=>{g=!0,U.show()},d.onmouseleave=()=>{g=!1,U.getRenderedUplot()===b&&U.hide(b)},p()},setSize:()=>{p()},setCursor:b=>{let{left:C,top:y,idx:x}=b.cursor;if(!g||x==null){U.getRenderedUplot()===b&&U.hide(b);return}let T=b.data[0],A=wt(T,o),L=Lt(b,x),R=b.data[0][L];if(R===void 0)return;let{items:E}=Rt(b,L,e,t,r,s);U.show();let I=i,M=I?Re(I,{timestamp:R,items:E,timeZone:o}):Re(Le,{timestamp:R,items:E,timeZone:o,spansMultipleDays:A,stacked:t,sortByValues:n,layout:a,labelFormat:u,hideAttributeKey:c,hideAttributes:h,hideMetric:m});U.render(b,M),U.positionTooltip({left:(C||0)+l,top:(y||0)+f})},destroy(b){window.removeEventListener("scroll",p,!0),window.removeEventListener("resize",p),d&&(d.onmouseenter=null,d.onmouseleave=null),U.getRenderedUplot()===b&&U.hide(b)}}}}var Z=["oklch(0.70 0.24 293)","oklch(0.85 0.18 95)","oklch(0.65 0.25 255)","oklch(0.72 0.26 27)","oklch(0.70 0.22 150)","oklch(0.78 0.18 50)","oklch(0.72 0.18 215)","oklch(0.70 0.27 301)","oklch(0.75 0.20 90)","oklch(0.68 0.23 277)","oklch(0.70 0.18 193)","oklch(0.68 0.25 4)"],_=e=>`${getComputedStyle(document.documentElement).getPropertyValue("--ub-chart-font-size").trim()} ${e}`,Ee=(e,t)=>{let r=e;return t&&t.unit&&t.unit.code&&t.unit.code!=="1"&&(!r&&t.unit?r=t.unit.code:r&&t.unit.code!==r&&(r=void 0)),r};function Et(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)&&Array.isArray(e.fill)&&Array.isArray(e.border)}function Mt(e){return Array.isArray(e)}var Me=(e,t,r,n,o,i)=>{if(r)return Mt(r)?r[t]:Et(r)?i?r.fill[t]:r.border[t]:r(e,t,n,i);let s=i?`--ub-chart-serie-color-fill-${t+1}`:`--ub-chart-serie-color-${t+1}`,a=o.getPropertyValue(s).trim();return a||(i&&(n==="step"||n==="line"||n==="spline")?`oklch(from ${Z[t%Z.length]} l c h / 0.4)`:Z[t%Z.length])},Nt=e=>{let t=J.paths.bars({size:[.6,100],radius:0,gap:0}),r=J.paths.linear({alignGaps:0}),n=J.paths.spline({alignGaps:1}),o=J.paths.stepped({alignGaps:1});switch(e){case"line":return r;case"bar":return t;case"area":return r;case"step":return o;case"spline":return n;default:return r}},It=(e,t,r,n,o)=>Me(e,t,r,n,o,!0),Dt=(e,t)=>{switch(e){case"bar":return 1;case"line":return t?1.5:2;case"spline":return t?1.5:2;case"area":return 1;case"step":return 1.5;default:return 1}},Ft=(e,t,r)=>{if(t<0||r<0)return[t,r];let n=e.posToVal(t,"x"),o=e.data[0];if(!o||o.length===0)return[t,r];let i=0,s=0,a=o.length-1;for(;a-s>1;){let l=Math.floor((s+a)/2),f=o[l];f!=null&&f<n?s=l:a=l}let u=o[s],c=o[a];u!=null&&c!=null?i=Math.abs(u-n)<Math.abs(c-n)?s:a:u!=null?i=s:c!=null&&(i=a);let h=i;for(let l=i;l>=0;l--){let f=!1;for(let g=1;g<e.data.length;g++){let p=e.data[g];if(p&&p[l]!=null){f=!0;break}}if(f){h=l;break}}let m=o[h];return m==null?[t,r]:[e.valToPos(m,"x"),r]},Vt=(e,t)=>{let r=t.getPropertyValue("--ub-chart-font-color").trim(),n=t.getPropertyValue("--ub-chart-grid-color").trim(),o=e.axes?.[0],i=e.axes?.[1];return o&&(o.stroke=r,o.grid?o.grid.stroke=n:o.grid={stroke:n}),i&&(i.stroke=r,i.grid?i.grid.stroke=n:i.grid={stroke:n}),e},Ot=(e,t)=>e.getPropertyValue(`--ub-chart-threshold-${t}`).trim()||e.getPropertyValue("--ub-chart-threshold-default").trim(),zt=(e,t)=>e.getPropertyValue(`--ub-chart-threshold-${t}-fill`).trim()||e.getPropertyValue("--ub-chart-threshold-default-fill").trim(),Bt=e=>{switch(e){case"bold":return 2;case"line":return 1;case"dashed":return 1;default:return 1}},Kt=e=>e==="line"?void 0:[5,5],qt=(e,t)=>{if(t){let r=[];return t.forEach(n=>{let o={label:n.label,stroke:Ot(e,n.level),width:Bt(),dash:Kt(n.type),points:{show:!1,size:0},spanGaps:!0,show:!0,auto:!1};Q(n)||r.push(o),r.push(o)}),r}else return[]},Ht=(e,t,r,n)=>{if(!n||!n.some(i=>X(i)))return t.bands;let o=n.map((i,s)=>Q(i)?null:{series:[e.length+s*2+1,e.length+s*2+2],fill:zt(r,i.level),dir:1}).filter(i=>i!==null);return[...t.bands,...o]},Gt=(e,t,r,n,o,i,s)=>{let a=Dt(t,n);return[{},...e.map((u,c)=>({label:u.metric,stroke:Me(u,c,r,t,i),width:a,points:{show:!1},spanGaps:!0,paths:Nt(t),fill:n||o?It(u,c,r,t,i):void 0})),...qt(i,s)]},_t=e=>typeof e=="string"&&String(e).toLowerCase().trim()==="by"?"bytes":e,Ne=(e,t,r,n,o,i,s,a,u,c,h,m,d,l,f,g,p,b,C,y,x,k)=>{let T=window.getComputedStyle(e),A=T.fontFamily,L=e?.clientWidth??1050,R=e?.clientHeight??250,E=_t(n),I=Ut(E==="1"?null:E),M=O=>{let w=I(O,k);return w.text+(w.suffix?.trim()||"")},N={width:L,height:R,scales:{y:{range:Ie(n,y,x)}},plugins:[Ue(M,s,t,c,h,m,o,f,l,g,p,b)],padding:d?[10,15,10,15]:[8,15,8,15],cursor:{y:!1,sync:{key:"_"},drag:{setScale:!0,x:!0,y:!1},move:Ft},series:Gt(o,i,a,u,s,T,C),bands:Ht(o,r,T,C),axes:[ye(A,h,d),De(I,A)],legend:{show:!1}};return Vt(N,T)};var Fe=(e,t=4)=>{let r=e/t,n=Math.pow(10,Math.floor(Math.log10(r))),o=r/n,i;return o>5?i=10*n:o>2?i=5*n:o>1?i=2*n:i=n,Math.ceil(e/i)*i},P=(e,t)=>typeof e=="number"?e:t,Ie=(e,t,r)=>(n,o,i)=>{if(o===0&&i===0)return[P(t,0),P(r,100)];let s=1,a=i*(1+s),u=o<0?o*(1+s):o*(1-s);if(e==="percent"||e==="percentunit"){let m=e==="percent"?100:1;return i>m?o<0?[P(t,u),P(r,a)]:[P(t,0),P(r,a)]:o<0?[P(t,u),P(r,m)]:[P(t,0),P(r,m)]}if(i<=.9999)return o<=0?[P(t,u),P(r,1)]:[P(t,0),P(r,1)];let c=Fe(a),h=Fe(Math.abs(u));return o<0?[P(r,-h),P(r,c)]:[P(t,0),P(r,c)]},$t=(e,t,r,n)=>{let o=e.axes[r];if(n>1)return o?._size||0;let i=(o?.ticks?.size||0)+(o?.gap||0),s=(t??[]).reduce((a,u)=>u.length>a.length?u:a,"");return s!=""&&(e.ctx.font=o?.font?.[0]??e.ctx.font,i+=e.ctx.measureText(s).width/devicePixelRatio),Math.ceil(i)};function De(e,t){return{gap:0,font:_(t),labelFont:_(t),grid:{show:!0,width:.5},ticks:{width:.5},values:(r,n)=>n.map(o=>{let i=e(o);return i.text+(i.suffix?.trim()||"")}),size:$t,space:60}}function Ve(e,t){let r=[],n=e[0],o=n.length,i=Array(o).fill(0),s=[n];if(e.forEach((a,u)=>{u!==0&&(t?s.push(a):s.push(a.map((c,h)=>i[h]=i[h]+(c||0))))}),!t)for(let a=1;a<e.length-1;a++)r.push({series:[a+1,a]});return{data:s,bands:r.filter(a=>a.series[1]>-1)}}import{jsx as Xt}from"react/jsx-runtime";function le(e){let{times:t,series:r,metadata:n,type:o,className:i,timeZone:s,options:a,tooltip:u,colors:c,tooltipComponent:h,sortByValues:m=!1,unit:d,fill:l=!1,thresholds:f,min:g,max:p}=e,{layout:b,labelFormat:C,hideAttributeKey:y,hideAttributes:x,hideMetric:k}=u||{},T=jt(null),A=q(),L=c||A.colors;return Qt(()=>{if(!r||r.length===0){console.warn("No series provided");return}let R=[t],E=d;r.forEach(w=>{let K=n[w.metric];d||(E=Ee(E,K)),R.push(w.values)});let I=o==="bar"||o==="area",M=Ve(R,!I);f&&f.forEach(w=>{Q(w)?M.data.push(new Array(t.length).fill(w.value)):X(w)&&(M.data.push(new Array(t.length).fill(w.from)),M.data.push(new Array(t.length).fill(w.to)))});let N=T.current,O=null;if(N){let w=Ne(N,n,M,E,r,o,I,L,l,m,s,h,!1,C,b,y,x,k,f,g,p);O=new Wt({...w,...a},M.data,N);let K=new ResizeObserver(()=>{O?.setSize({width:N.clientWidth,height:N.clientHeight})});return K.observe(N),()=>{O?.destroy(),K.disconnect()}}},[r,t,o,n,s,h,L,l,m,d,C,b,y,x,k,f,g,p,a]),Xt("div",{ref:T,className:"ub-chart-container"+(i?` ${i}`:"")})}import{jsx as B}from"react/jsx-runtime";function Jt({metrics:e,operator:t,attributes:r,groupBy:n,interval:o,type:i="line",className:s,appearance:a,unit:u,thresholds:c,min:h,max:m,colors:d,tooltip:l,sortByValues:f,fill:g}){let p=q(),b=o??p.interval,C=r??p.attributes,y=n??p.groupBy,x=t??p.operator,k=d??p.colors,T=typeof f=="boolean"?f:p.sortByValues,A=typeof g=="boolean"?g:p.fill,L=a?.components?.Tooltip??p.appearance.components.Tooltip,R=Yt(()=>({layout:l?.layout??p.tooltip?.layout,format:l?.labelFormat??p.tooltip?.labelFormat,hideAttributes:l?.hideAttributes??p.tooltip?.hideAttributes,hideAttributeKey:l?.hideAttributeKey??p.tooltip?.hideAttributeKey,hideMetric:l?.hideMetric??p.tooltip?.hideMetric}),[l?.layout,l?.labelFormat,l?.hideAttributes,l?.hideAttributeKey,l?.hideMetric,p.tooltip?.layout,p.tooltip?.labelFormat,p.tooltip?.hideAttributes,p.tooltip?.hideAttributeKey,p.tooltip?.hideMetric]),{isLoading:E,data:I,hasError:M}=ae({queries:(Array.isArray(e)?e:[e]).map(D=>({metrics:[D],operator:x,attributes:C,groupBy:y})),timeRange:p.timeRange,startTime:p.startTime,endTime:p.endTime,interval:b}),{series:N,times:O,metadata:w}=I,K=N.every(D=>D.isEmpty),ee=`ub-chart-container${s?` ${s}`:""}`;if(E){let D=a?.components?.Loading??p.appearance.components.Loading;return B("div",{className:ee,children:B(D,{})})}if(M){let D=a?.components?.Error??p.appearance.components.Error;return B("div",{className:ee,children:B(D,{})})}if(K){let D=a?.components?.Empty??p.appearance.components.Empty;return B("div",{className:ee,children:B(D,{})})}return B(le,{times:O,series:N,metadata:w,type:i,className:s,tooltip:R,colors:k,sortByValues:T,unit:u,fill:A,tooltipComponent:L,thresholds:c,min:h,max:m})}export{le as Chart,te as Empty,re as Error,oe as Loading,ie as Scope,Jt as Timeseries,Qe as UnblindProvider,nt as useLogs,We as useMetrics,he as useRefresh,q as useScope,ae as useTimeseries,tt as useUsage};
1
+ import{QueryClient as xe,QueryClientProvider as Je,useQueryClient as Ze}from"@tanstack/react-query";import{createContext as et,useCallback as tt,useContext as rt,useMemo as Se}from"react";import{jsx as Pe}from"react/jsx-runtime";var Re=et(void 0);function oe({children:e,queryClient:t,queryClientConfig:r,apiBaseUrl:o="/api/unblind",fetchImpl:i}){let n=Se(()=>{if(t)return t;let s={refetchOnWindowFocus:!1,refetchOnReconnect:!1,refetchOnMount:!1},l={defaultOptions:{queries:s}};return r?new xe({...r,defaultOptions:{...r.defaultOptions,queries:{...s,...r.defaultOptions?.queries}}}):new xe(l)},[t,r]),a=Se(()=>({apiBaseUrl:o,fetchImpl:i}),[o,i]);return Pe(Je,{client:n,children:Pe(Re.Provider,{value:a,children:e})})}function D(){let e=rt(Re);if(!e)throw new Error("useUnblindConfig must be used within an UnblindClientProvider. Please wrap your app or component tree with <UnblindClientProvider>.");return e}function ke(){let e=Ze();return tt(async()=>{await e.refetchQueries({queryKey:["unblind","timeseries"]})},[e])}import{createContext as it,useContext as Ae,useMemo as K}from"react";import{jsx as z,jsxs as ot}from"react/jsx-runtime";function ie(){return z("div",{className:"ub-default",children:ot("div",{className:"ub-empty-content",children:[z("div",{className:"ub-empty-icon-wrapper",children:z("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"ub-icon",children:z("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"})})}),z("p",{className:"ub-empty-text","data-text":"No data available for this time range"})]})})}function ne(){return z("div",{className:"ub-default-error"})}function se(){return z("div",{className:"ub-default-loading","data-text":"Loading"})}import{jsx as st}from"react/jsx-runtime";var ae=it(void 0);function X({children:e,timeRange:t,startTime:r,endTime:o,interval:i,attributes:n,groupBy:a,operator:s,appearance:l,tooltip:m,colors:f,fill:g,hideAxis:h,hideCursor:c,relativeTimeAxis:b,invertSort:y}){let d=Ae(ae),v=l?.components?.Loading||d?.appearance?.components?.Loading,T=l?.components?.Error||d?.appearance?.components?.Error,x=l?.components?.Tooltip||d?.appearance?.components?.Tooltip,p=l?.components?.Empty||d?.appearance?.components?.Empty,C=typeof m?.hide=="boolean"?m?.hide:d?.tooltip?.hide,R=typeof m?.visibilityLimit=="number"?m?.visibilityLimit:d?.tooltip?.visibilityLimit,k=K(()=>({components:{...v&&{Loading:v},...T&&{Error:T},...x&&{Tooltip:x},...p&&{Empty:p}}}),[v,T,x,p]),A=K(()=>({hide:C,visibilityLimit:R}),[C,R]),w=K(()=>({timeRange:t??d?.timeRange,startTime:r??d?.startTime,endTime:o??d?.endTime,interval:i??d?.interval,attributes:n??d?.attributes,groupBy:a??d?.groupBy,operator:s??d?.operator,colors:f??d?.colors,relativeTimeAxis:typeof b=="boolean"?b:d?.relativeTimeAxis,fill:typeof g=="boolean"?g:d?.fill,hideAxis:typeof h=="boolean"?h:d?.hideAxis,hideCursor:typeof c=="boolean"?c:d?.hideCursor,invertSort:typeof y=="boolean"?y:d?.invertSort,appearance:k,tooltip:A}),[t,r,o,i,n,a,s,f,g,b,h,c,k,A,d,y]);return st(ae.Provider,{value:w,children:e})}var nt="6h";function I(){let e=Ae(ae);return K(()=>({...e,timeRange:e?.timeRange||nt,appearance:{components:{Loading:e?.appearance?.components?.Loading??se,Error:e?.appearance?.components?.Error??ne,Empty:e?.appearance?.components?.Empty??ie,Tooltip:e?.appearance?.components?.Tooltip}}}),[e])}import{jsx as Le}from"react/jsx-runtime";function at({children:e,queryClient:t,apiBaseUrl:r,fetchImpl:o,timeRange:i,startTime:n,endTime:a,interval:s,attributes:l,groupBy:m,operator:f,appearance:g,tooltip:h,colors:c,fill:b,hideAxis:y,hideCursor:d,relativeTimeAxis:v,invertSort:T}){return Le(oe,{queryClient:t,apiBaseUrl:r,fetchImpl:o,children:Le(X,{timeRange:i,startTime:n,endTime:a,interval:s,attributes:l,groupBy:m,operator:f,appearance:g,tooltip:h,colors:c,fill:b,hideAxis:y,hideCursor:d,relativeTimeAxis:v,invertSort:T,children:e})})}import{useQuery as lt}from"@tanstack/react-query";function ct(){let{apiBaseUrl:e,fetchImpl:t=fetch}=D(),r=lt({queryKey:["unblind","metrics"],queryFn:async()=>{let o=await t(`${e}/metrics`,{headers:{"Content-Type":"application/json"}});if(!o.ok)throw new Error("Error loading metrics metadata");if(o.status===200){let{data:i}=await o.json();return i}else throw new Error("Unexpected status code")}});return{metrics:r.data,isLoading:r.isLoading,hasError:r.isError,refetch:r.refetch}}import{useQuery as dt}from"@tanstack/react-query";import{useMemo as j}from"react";import ut from"ms";function we({scope:e,props:t}){return t.timeRange||t.startTime&&t.endTime?t:e}function pt(e){let t=Math.floor(Date.now()/1e3);return[t-Math.floor(ut(e)/1e3),t]}function _(e,t,r){let o,i;if(typeof t=="number"&&typeof r=="number")o=t,i=r;else if(e){let[n,a]=pt(e);o=n,i=a}else throw new Error("Either timeRange or both startTime and endTime must be provided");return[o,i]}import{useMemo as mt}from"react";function Q(e){let t=I(),{timeRange:r,startTime:o,endTime:i}=we({props:e,scope:t});return mt(()=>({timeRange:r,startTime:o,endTime:i}),[r,o,i])}function le(e){let{apiBaseUrl:t,fetchImpl:r=fetch}=D(),{startTime:o,endTime:i,timeRange:n}=Q(e),{queries:a,interval:s}=e,l=j(()=>a.map(p=>p.metrics.join(",")).join(","),[a]),m=j(()=>a.map(p=>{let C=p.attributes;if(!C)return"";let R=Object.keys(C);return R.length===0?"":R.map(k=>k+":"+C[k]?.join(",")).join(",")}).join(","),[a]),f=j(()=>a.map(p=>p.operator),[a]),g=j(()=>a.map(p=>p.groupBy).join(", "),[a]),c=dt({queryKey:["unblind","timeseries",l,m,o,i,n,s,f,g],queryFn:async()=>{if(!l)throw new Error("Missing required parameters");if(l.length===0)throw new Error("No series provided");let[p,C]=_(n,o,i),R={queries:a,startTime:p,endTime:C,interval:s},k=await r(`${t}/tenants/timeseries`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(R)});if(!k.ok)throw new Error("Error fetching metric");let{series:A,times:w,metadata:M}=await k.json();if(!A)throw console.error("Series not found"),new Error("Series not found");return{series:A,times:w,metadata:M}},enabled:!!l&&(typeof o=="number"&&typeof i=="number"||!!n)}),{metadata:b,series:y,times:d}=j(()=>c.data?{series:c.data.series,times:c.data.times,metadata:c.data.metadata}:{series:[],times:[],metadata:{}},[c]),v=c.isLoading,T=c.isFetching,x=c.isError;return{data:{series:y,times:d,metadata:b},isLoading:v,isFetching:T,hasError:x,refetch:c.refetch}}import{useQuery as ht}from"@tanstack/react-query";import{useMemo as ft}from"react";function gt(e){let{apiBaseUrl:t,fetchImpl:r=fetch}=D(),{startTime:o,endTime:i,timeRange:n}=Q(e),s=ht({queryKey:["unblind","usage",n,o,i],queryFn:async()=>{let[g,h]=_(n,o,i),c=`${t}/tenants/usage`,b=await r(c,{headers:{"Content-Type":"application/json"},body:JSON.stringify({startTime:g,endTime:h})});if(!b.ok)throw new Error("Error fetching usage");let{data:y}=await b.json();if(!y)throw new Error("usage not found");return y},enabled:typeof o=="number"&&typeof i=="number"||!!n}),l=ft(()=>s.data?s.data||[]:[],[s]),m=s.isLoading||s.isRefetching,f=s.isError;return{usage:l,isLoading:m,hasError:f,refetch:s.refetch}}import{useInfiniteQuery as bt}from"@tanstack/react-query";import{useMemo as yt}from"react";function Tt(e){let{apiBaseUrl:t,fetchImpl:r=fetch}=D(),{timeRange:o,startTime:i,endTime:n}=Q(e),{attributes:a,body:s,severity:l,traceId:m,spanId:f,logId:g}=e,h=bt({queryKey:["unblind","logs",o,i,n,s,l,g,JSON.stringify(a)],queryFn:async({pageParam:b})=>{let[y,d]=_(o,i,n),v=await r(`${t}/tenants/logs`,{method:"POST",body:JSON.stringify({attributes:a,body:s,severity:l,traceId:m,spanId:f,logId:g,startTime:y,endTime:d,pagination:{page:b}}),headers:{"Content-Type":"application/json"}});if(!v.ok)throw new Error("Error fetching logs");let{data:T,nextPage:x}=await v.json();if(!T)throw new Error("data not found");return{data:T,nextPage:x}},initialPageParam:void 0,getNextPageParam:b=>b.nextPage});return{logs:yt(()=>h.data?h.data.pages.flatMap(b=>b.data||[]):[],[h.data]),isLoading:h.isLoading,hasError:h.isError,hasNextPage:h.hasNextPage??!1,fetchNextPage:h.fetchNextPage,isFetchingNextPage:h.isFetchingNextPage,refetch:h.refetch}}import{useEffect as gr,useMemo as br}from"react";import{useEffect as mr,useRef as dr}from"react";import hr from"uplot";var G=e=>"value"in e,Y=e=>"from"in e&&"to"in e;import Z from"uplot";import{getValueFormat as jt}from"@unblind/units";import{dateTimeFormat as vt,dateTimeFormatTimeAgo as Ct,systemDateFormats as ce}from"@unblind/units";var L={millisecond:1,second:1e3,minute:6e4,hour:36e5,day:864e5,month:24192e5,year:31536e6},$={second:[1,2,5,10,15,30],minute:[1,2,5,10,15,30],hour:[1,2,3,4,6,8,12],day:[1,2,3,7,14],month:[1,2,3,6],year:[1,2,5,10,20,50,100]};function xt(e,t,r,o){if(t>7*L.day){let i=ce.interval.year,n=Math.round(L.year/L.day)*L.day;if(Math.round(t/L.day)*L.day===n)i=ce.interval.year;else{if(t<=L.year)return e.map(s=>{let l=new Date(s);return(o==="UTC"?l.getUTCDate():l.getDate())===1?l.toLocaleDateString(void 0,{month:"short",year:"numeric",timeZone:o}):l.toLocaleDateString(void 0,{day:"numeric",month:"short",timeZone:o})});i=ce.interval.day}return e.map(s=>vt(s,{format:i,timeZone:o}))}return e.map(i=>{let n=new Date(i),a=t<L.minute,s=t<L.second,l=n.toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit",hour12:!1,timeZone:o});return(l==="00:00"||l==="24:00")&&!a&&!s?n.toLocaleDateString(void 0,{day:"2-digit",month:"short",timeZone:o}):n.toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit",second:a?"2-digit":void 0,fractionalSecondDigits:s?3:void 0,hour12:!1,timeZone:o})})}function St(e){let t=[{size:L.second/1e3,increments:$.second},{size:L.minute/1e3,increments:$.minute},{size:L.hour/1e3,increments:$.hour},{size:L.day/1e3,increments:$.day},{size:L.month/1e3,increments:$.month},{size:L.year/1e3,increments:$.year}];for(let i of t)for(let n of i.increments){let a=i.size*n;if(a>=e)return{increment:a*1e3,multiplier:n}}let r=t[t.length-1],o=r.increments[r.increments.length-1];return{increment:r.size*o*1e3,multiplier:o}}function Pt(e,t,r){return[t,r]}function Rt(e,t,r){return t.length===0?[]:t.map((o,i)=>i===0||i===t.length-1?Ct(o*1e3,{timeZone:r}):"")}function kt(e,t,r){let o=e.scales.x,i=((o?.max??0)-(o?.min??0))*1e3,n=Math.floor(e.width/100),a=i/1e3/n,{increment:s}=St(a),l=t.map(m=>m*1e3);return xt(l,s,i,r)}function Ue(e,t,r=!1,o=!1){let i=r?(a,s,l,m)=>Pt(a,l,m):void 0,n=r?(a,s)=>Rt(a,s,t):(a,s)=>kt(a,s,t);return{font:H(e),labelFont:H(e),grid:{show:!1,width:.5},ticks:{width:.5},splits:i,values:n,size:20,show:!o,align:r?2:void 0,space:(a,s,l,m,f)=>f<400?100:f<800?150:250}}import{computePosition as At,flip as Lt,offset as wt}from"@floating-ui/dom";import{createRoot as Ut}from"react-dom/client";var Et=4,Mt=8,ue=class{overlay=null;reactRoot=null;renderedUplot=null;initialize(){this.overlay||(this.overlay=document.createElement("div"),this.overlay.id="unblind-tooltip-overlay",this.overlay.style.display="none",this.overlay.style.position="fixed",this.overlay.style.pointerEvents="none",this.overlay.style.zIndex="9999",document.body.appendChild(this.overlay),this.reactRoot=Ut(this.overlay))}getOverlay(){return this.overlay}render(t,r){this.reactRoot?(this.reactRoot.render(r),this.renderedUplot=t):this.renderedUplot=null}show(){this.overlay&&(this.overlay.style.display="block")}hide(t){if(t!==this.renderedUplot){console.warn("Hide call plot");return}this.overlay&&(this.overlay.style.display="none"),this.render(null,null)}getRenderedUplot(){return this.renderedUplot}async positionTooltip(t){let r=this.getOverlay();if(r){let{x:o,y:i}=await At({getBoundingClientRect:()=>({x:t.left,y:t.top,width:0,height:0,top:t.top,left:t.left,right:t.left,bottom:t.top})},r,{placement:"top-start",strategy:"fixed",middleware:[wt({mainAxis:Et,crossAxis:Mt}),Lt()]});r.style.left=`${o}px`,r.style.top=`${i}px`}}},E=new ue;import{dateTimeFormat as Ee}from"@unblind/units";import{createContext as Nt,Fragment as Dt,useContext as Vt}from"react";import{Fragment as Qt,jsx as u,jsxs as S}from"react/jsx-runtime";var Ot=6,Me=Nt(null);function J(){let e=Vt(Me);if(!e)throw new Error("useTooltipSerie must be used within a SerieProvider");return e}function It({serie:e,children:t}){return u(Me.Provider,{value:e,children:t})}function pe({className:e="ub-tooltip-divider",...t}){return u("hr",{role:"presentation",...t,className:e})}function zt({formattedTime:e,unitCategory:t,tooltipSerieList:r,visibilityLimit:o,invertSort:i}){let n=r.slice(0,o),a=r.slice(o);return S("div",{className:"ub-tooltip ub-tooltip-multiple-metrics",children:[S(fe,{children:[u(ge,{children:e}),u("div",{className:"ub-tooltip-header-right",children:u(Bt,{children:t})})]}),u(pe,{}),S(he,{children:[n.map(s=>S(de,{serie:s,children:[u(ye,{}),u(Te,{children:u(Ne,{})}),u(be,{})]},s.metric.name)),u(me,{series:a,invertSort:i})]})]})}function qt({formattedTime:e,tooltipSerieList:t,visibilityLimit:r,invertSort:o}){let i=t[0],n=t.slice(0,r),a=t.slice(r);return S("div",{className:"ub-tooltip ub-tooltip-multiple-attributes",children:[S(fe,{children:[u(ge,{children:e}),u("div",{className:"ub-tooltip-header-right",children:u("span",{className:"ub-tooltip-serie-metric",children:Ve(i?.metric.name||"")})})]}),u(pe,{}),S(he,{children:[n.map((s,l)=>S(de,{serie:s,children:[u(ye,{}),u(Te,{children:u(De,{})}),u(be,{})]},"serie_"+l)),u(me,{series:a,invertSort:o})]})]})}function Ft({formattedTime:e,tooltipSerieList:t,unitCategory:r,visibilityLimit:o,invertSort:i}){let n=t.slice(0,o),a=t.slice(o);return S("div",{className:"ub-tooltip ub-tooltip-multiple-attributes",children:[S(fe,{children:[u(ge,{children:e}),u("div",{className:"ub-tooltip-header-right",children:u("span",{className:"ub-tooltip-unit-category",children:r})})]}),u(pe,{}),S(he,{children:[n.map((s,l)=>S(de,{serie:s,children:[u(ye,{}),S(Te,{children:[u(Ne,{}),u(De,{})]}),u(be,{})]},"serie"+l)),u(me,{series:a,invertSort:i})]})]})}function Bt(e){return u("span",{className:"ub-tooltip-unit-category",children:e.children})}function me({series:e,invertSort:t}){let r=e[0]?.formattedValue,o=!e.some(n=>(n.value||0)>0),i=!e.some(n=>n.value!==void 0);return e.length>0?i?u("span",{className:"ub-tooltip-summary",children:S("span",{children:["+",e.length," more with no data"]})}):o?u("span",{className:"ub-tooltip-summary",children:S("span",{children:["+",e.length," more with zero values"]})}):S("span",{className:"ub-tooltip-summary",children:[S("span",{children:["+",e.length," more with "]}),u("span",{children:`${t?"\u2265":"\u2264"} ${r}`})]}):u(Qt,{})}function de(e){return u(It,{serie:e.serie,children:u("div",{className:"ub-tooltip-serie",children:e.children})})}function he(e){return u("div",{className:"ub-tooltip-content",children:e.children})}function fe(e){return u("div",{className:"ub-tooltip-header",children:e.children})}function ge(e){return u("div",{className:"ub-tooltip-datetime",children:e.children})}function Ne(){let e=J();return u("span",{className:"ub-tooltip-serie-metric",children:Ve(e.metric.name)})}function be(){let e=J();return e.formattedValue?u("span",{className:"ub-tooltip-serie-value",children:e.formattedValue}):u("span",{className:"ub-tooltip-serie-value-empty",children:"\u2013"})}function ye(){let e=J();return u("span",{style:{backgroundColor:e.color},className:"ub-tooltip-serie-color"})}function Te(e){return u("span",{className:"ub-tooltip-serie-label ub-truncate",children:e.children})}function De(){let{attributes:e}=J();if(!e)return null;let t=Object.values(e);return u("div",{className:"ub-tooltip-serie-attributes ub-truncate",children:t.map((r,o)=>S(Dt,{children:[u("span",{className:"ub-tooltip-serie-attribute-value",children:r}),o<t.length-1&&u("span",{"data-text":", ",className:"ub-tooltip-serie-attribute-divider"})]},"tooltip-"+r))})}function _t({tooltipSerieList:e,invertSort:t}){return t?e.sort((r,o)=>(Number(r.value)||0)-(Number(o.value)||0)):e.sort((r,o)=>(Number(o.value)||0)-(Number(r.value)||0))}function Ve(e,t){let r=e.split(/[._-]/),o=r[r.length-1]||"";return t?o:o.charAt(0).toUpperCase()+o.slice(1).toLowerCase()}function Oe({timestamp:e,tooltipSerieList:t,timeZone:r,spansMultipleDays:o,hasMultipleMetrics:i,hasAttributes:n,invertSort:a,visibilityLimit:s}){let l=_t({tooltipSerieList:t,invertSort:a}),m=o?Ee(e*1e3,{format:"MMM DD, HH:mm",timeZone:r}):Ee(e*1e3,{format:"HH:mm",timeZone:r}),f=s||Ot;return n?n&&!i?u(qt,{formattedTime:m,tooltipSerieList:l,visibilityLimit:f,invertSort:a}):u(Ft,{formattedTime:m,unitCategory:"",tooltipSerieList:l,visibilityLimit:f,invertSort:a}):u(zt,{formattedTime:m,unitCategory:"",tooltipSerieList:l,visibilityLimit:f,invertSort:a})}import{jsx as Ie}from"react/jsx-runtime";function $t(e,t){if(!e||e.length===0)return!1;let r=e[0],o=e[e.length-1];if(r==null||o==null)return!1;let i=new Date(r*1e3),n=new Date(o*1e3),a=s=>t==="UTC"?`${s.getUTCFullYear()}-${s.getUTCMonth()}-${s.getUTCDate()}`:s.toLocaleDateString(void 0,{timeZone:t});return a(i)!==a(n)}function Ht(e,t){let r=!1;for(let i=1;i<e.series.length;i++)if(e.data[i]?.[t]!=null){r=!0;break}if(r)return t;let o=e.data[0].length;for(let i=1;t+i<o||t-i>=0;i++){let n=t-i,a=t+i;if(n>=0){for(let s=1;s<e.series.length;s++)if(e.data[s]?.[n]!=null)return n}if(a<o){for(let s=1;s<e.series.length;s++)if(e.data[s]?.[a]!=null)return a}}return t}function Wt(e,t,r,o,i,n,a){let s=[],l=e.data[0],m=new Set,f=new Set,g=!1;for(let h=1;h<e.series.length;h++){let c=e.data[h]?.[t]??null;if(o&&c!=null&&h>1){let C=e.data[h-1]?.[t]??0;c=c-C}let b=e.series[h],y=n?.[h-1];if(!y){console.warn("Original serie not found");continue}let d=i[y.metric];if(!d){console.warn("Metric metadata not found");continue}m.add(y.metric);let v=y?.attributes;if(v&&Object.keys(v).length>0){g=!0;for(let C in v)f.add(C)}let T=b?.stroke,x=typeof T=="function"?T(e,h):T??"#ffffff00",p=c==null?void 0:r?r(c):String(c);s.push({metric:d,color:x,value:c===null?void 0:c,formattedValue:p,attributes:v,serie:b})}return{tooltipSerieList:s,hasAttributes:g,hasMultipleMetrics:m.size>1,hasMultipleAttributes:f.size>1,spansMultipleDays:$t(l,a)}}function ze(e,t,r,o,i,n,a,s){let l,m,f,g=!1;function h(){let c=l.getBoundingClientRect();m=c.left,f=c.top}return{hooks:{init:c=>{E.initialize(),l=c.over,window.addEventListener("scroll",h,!0),window.addEventListener("resize",h),l.onmouseenter=()=>{g=!0,E.show()},l.onmouseleave=()=>{g=!1,E.getRenderedUplot()===c&&E.hide(c)},h()},setSize:()=>{h()},setCursor:c=>{let{left:b,top:y,idx:d}=c.cursor;if(!g||d==null){E.getRenderedUplot()===c&&E.hide(c);return}let T=Ht(c,d),x=c.data[0][T];if(x===void 0)return;let{tooltipSerieList:p,hasAttributes:C,hasMultipleAttributes:R,hasMultipleMetrics:k,spansMultipleDays:A}=Wt(c,T,e,t,r,n,o);E.show();let w=i,M=w?Ie(w,{timestamp:x,tooltipSerieList:p,timeZone:o}):Ie(Oe,{timestamp:x,tooltipSerieList:p,timeZone:o,spansMultipleDays:A,stacked:t,hasAttributes:C,hasMultipleAttributes:R,hasMultipleMetrics:k,visibilityLimit:a,invertSort:s});E.render(c,M),E.positionTooltip({left:(b||0)+m,top:(y||0)+f})},destroy(c){window.removeEventListener("scroll",h,!0),window.removeEventListener("resize",h),l&&(l.onmouseenter=null,l.onmouseleave=null),E.getRenderedUplot()===c&&E.hide(c)}}}}var ee=["oklch(0.70 0.24 293)","oklch(0.85 0.18 95)","oklch(0.65 0.25 255)","oklch(0.72 0.26 27)","oklch(0.70 0.22 150)","oklch(0.78 0.18 50)","oklch(0.72 0.18 215)","oklch(0.70 0.27 301)","oklch(0.75 0.20 90)","oklch(0.68 0.23 277)","oklch(0.70 0.18 193)","oklch(0.68 0.25 4)"],H=e=>`${getComputedStyle(document.documentElement).getPropertyValue("--ub-chart-font-size").trim()} ${e}`,qe=(e,t)=>{let r=e;return t&&t.unit&&t.unit.code&&t.unit.code!=="1"&&(!r&&t.unit?r=t.unit.code:r&&t.unit.code!==r&&(r=void 0)),r};function Gt(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)&&Array.isArray(e.fill)&&Array.isArray(e.border)}function Kt(e){return Array.isArray(e)}var Xt=12,Yt=({isFilling:e,useSolid:t,index:r})=>{let o=r%Xt+1;return e?t?`--ub-chart-serie-color-${o}`:`--ub-chart-serie-fill-color-${o}`:`--ub-chart-serie-color-${o}`},Fe=(e,t,r,o,i,n)=>{let a=o==="bar"||o==="area";if(r)return Kt(r)?r[t]:Gt(r)?n?r.fill[t]:r.border[t]:r(e,t,o,n);let s=Yt({isFilling:n,useSolid:a,index:t}),l=i.getPropertyValue(s).trim();return l||(n&&a?ee[t%ee.length]?.replace(")"," / 0.4)"):ee[t%ee.length])},Jt=e=>{let t=Z.paths.bars({size:[.6,100],radius:0,gap:0}),r=Z.paths.linear({alignGaps:0}),o=Z.paths.spline({alignGaps:1}),i=Z.paths.stepped({alignGaps:1});switch(e){case"line":return r;case"bar":return t;case"area":return r;case"step":return i;case"spline":return o;default:return r}},Zt=(e,t,r,o,i)=>Fe(e,t,r,o,i,!0),er=(e,t)=>{switch(e){case"bar":return 1;case"line":return t?1.5:2;case"spline":return t?1.5:2;case"area":return 1;case"step":return 1.5;default:return 1}},tr=(e,t,r)=>{if(t<0||r<0)return[t,r];let o=e.posToVal(t,"x"),i=e.data[0];if(!i||i.length===0)return[t,r];let n=0,a=0,s=i.length-1;for(;s-a>1;){let c=Math.floor((a+s)/2),b=i[c];b!=null&&b<o?a=c:s=c}let l=i[a],m=i[s];l!=null&&m!=null?n=Math.abs(l-o)<Math.abs(m-o)?a:s:l!=null?n=a:m!=null&&(n=s);let f=n;for(let c=n;c>=0;c--){let b=!1;for(let y=1;y<e.data.length;y++){let d=e.data[y];if(d&&d[c]!=null){b=!0;break}}if(b){f=c;break}}let g=i[f];return g==null?[t,r]:[e.valToPos(g,"x"),r]},rr=(e,t)=>{let r=t.getPropertyValue("--ub-chart-font-color").trim(),o=t.getPropertyValue("--ub-chart-grid-color").trim(),i=e.axes?.[0],n=e.axes?.[1];return i&&(i.stroke=r,i.grid?i.grid.stroke=o:i.grid={stroke:o}),n&&(n.stroke=r,n.grid?n.grid.stroke=o:n.grid={stroke:o}),e},or=(e,t)=>e.getPropertyValue(`--ub-chart-threshold-${t}`).trim()||e.getPropertyValue("--ub-chart-threshold-default").trim(),ir=(e,t)=>e.getPropertyValue(`--ub-chart-threshold-${t}-fill`).trim()||e.getPropertyValue("--ub-chart-threshold-default-fill").trim(),nr=e=>{switch(e){case"bold":return 2;case"line":return 1;case"dashed":return 1;default:return 1}},sr=e=>e==="line"?void 0:[5,5],ar=(e,t)=>{if(t){let r=[];return t.forEach(o=>{let i={label:o.label,stroke:or(e,o.level),width:nr(),dash:sr(o.type),points:{show:!1,size:0},spanGaps:!0,show:!0,auto:!1};G(o)||r.push(i),r.push(i)}),r}else return[]},lr=(e,t,r,o)=>{if(!o||!o.some(n=>Y(n)))return t.bands;let i=o.map((n,a)=>G(n)?null:{series:[e.length+a*2+1,e.length+a*2+2],fill:ir(r,n.level),dir:1}).filter(n=>n!==null);return[...t.bands,...i]},cr=(e,t,r,o,i,n,a)=>{let s=er(t,o);return[{},...e.map((l,m)=>({label:l.metric,stroke:Fe(l,m,r,t,n),width:s,points:{show:!1},spanGaps:!0,paths:Jt(t),fill:o||i?Zt(l,m,r,t,n):void 0})),...ar(n,a)]},ur=e=>typeof e=="string"&&String(e).toLowerCase().trim()==="by"?"bytes":e,Be=(e,t,r,o,i,n,a,s,l,m,f,g,h,c,b,y,d,v,T,x)=>{let p=window.getComputedStyle(e),C=p.fontFamily,R=e?.clientWidth??1050,k=e?.clientHeight??250,A=ur(o),w=jt(A==="1"?null:A),M=V=>{let N=w(V);return N.text+(N.suffix?.trim()||"")},F={width:R,height:k,scales:{y:{range:_e(o,b,y)}},plugins:h?[]:[ze(M,a,t,m,f,i,T,x)],padding:g?[8,10,8,48]:[8,10,8,18],cursor:{y:!1,sync:{key:"_"},drag:{setScale:!0,x:!0,y:!1},move:tr,show:!v},series:cr(i,n,s,l,a,p,c),bands:lr(i,r,p,c),axes:[Ue(C,m,g,d),Qe(w,C,d)],legend:{show:!1}};return rr(F,p)};var $e=(e,t=4)=>{let r=e/t,o=Math.pow(10,Math.floor(Math.log10(r))),i=r/o,n;return i>5?n=10*o:i>2?n=5*o:i>1?n=2*o:n=o,Math.ceil(e/n)*n},P=(e,t)=>typeof e=="number"?e:t,_e=(e,t,r)=>(o,i,n)=>{if(i===0&&n===0)return[P(t,0),P(r,100)];let a=1,s=n*(1+a),l=i<0?i*(1+a):i*(1-a);if(e==="percent"||e==="percentunit"){let g=e==="percent"?100:1;return n>g?i<0?[P(t,l),P(r,s)]:[P(t,0),P(r,s)]:i<0?[P(t,l),P(r,g)]:[P(t,0),P(r,g)]}if(n<=.9999)return i<=0?[P(t,l),P(r,1)]:[P(t,0),P(r,1)];let m=$e(s),f=$e(Math.abs(l));return i<0?[P(r,-f),P(r,m)]:[P(t,0),P(r,m)]},pr=(e,t,r,o)=>{let i=e.axes[r];if(o>1)return i?._size||0;let n=(i?.ticks?.size||0)+(i?.gap||0),a=(t??[]).reduce((s,l)=>l.length>s.length?l:s,"");return a!=""&&(e.ctx.font=i?.font?.[0]??e.ctx.font,n+=e.ctx.measureText(a).width/devicePixelRatio),Math.ceil(n)};function Qe(e,t,r){return{gap:0,font:H(t),labelFont:H(t),grid:{show:!0,width:.5},ticks:{width:.5},values:(o,i)=>i.map(n=>{let a=e(n);return a.text+(a.suffix?.trim()||"")}),size:pr,space:(o,i,n,a,s)=>{let l=o.height;return l<=100?30:l<=150?35:l<=200?45:l<=250?55:l<=300?60:70},show:!r}}function He(e,t){let r=[],o=e[0],i=o.length,n=Array(i).fill(0),a=[o];if(e.forEach((s,l)=>{l!==0&&(t?a.push(s):a.push(s.map((m,f)=>n[f]=n[f]+(m||0))))}),!t)for(let s=1;s<e.length-1;s++)r.push({series:[s+1,s]});return{data:a,bands:r.filter(s=>s.series[1]>-1)}}import{jsx as fr}from"react/jsx-runtime";function ve(e){let{times:t,series:r,metadata:o,type:i,className:n,timeZone:a,options:s,tooltip:l,colors:m,tooltipComponent:f,unit:g,fill:h=!1,thresholds:c,min:b,max:y,hideAxis:d,hideCursor:v,relativeTimeAxis:T,invertSort:x}=e,{hide:p,visibilityLimit:C}=l||{},R=dr(null),k=I(),A=m||k.colors;return mr(()=>{if(!r||r.length===0){console.warn("No series provided");return}let w=[t],M=g;r.forEach(U=>{let B=o[U.metric];g||(M=qe(M,B)),w.push(U.values)});let F=i==="bar"||i==="area",V=He(w,!F);c&&c.forEach(U=>{G(U)?V.data.push(new Array(t.length).fill(U.value)):Y(U)&&(V.data.push(new Array(t.length).fill(U.from)),V.data.push(new Array(t.length).fill(U.to)))});let N=R.current,W=null;if(N){let U=Be(N,o,V,M,r,i,F,A,h,a,f,T,p,c,b,y,d,v,C,x);W=new hr({...U,...s},V.data,N);let B=new ResizeObserver(()=>{W?.setSize({width:N.clientWidth,height:N.clientHeight})});return B.observe(N),()=>{W?.destroy(),B.disconnect()}}},[r,t,i,o,a,f,T,A,h,g,p,c,b,y,s,d,v]),fr("div",{ref:R,className:"ub-chart-container"+(n?` ${n}`:"")})}import{jsx as q}from"react/jsx-runtime";function yr({metrics:e,operator:t,attributes:r,groupBy:o,interval:i,type:n="line",className:a,appearance:s,unit:l,thresholds:m,min:f,max:g,colors:h,tooltip:c,fill:b,hideAxis:y,hideCursor:d,relativeTimeAxis:v,onResponse:T,invertSort:x}){let p=I(),C=i??p.interval,R=r??p.attributes,k=o??p.groupBy,A=t??p.operator,w=typeof v=="boolean"?v:p.relativeTimeAxis,M=h??p.colors,F=typeof b=="boolean"?b:p.fill,V=typeof x=="boolean"?x:p.invertSort,N=typeof y=="boolean"?y:p.hideAxis,W=typeof d=="boolean"?d:p.hideCursor,U=s?.components?.Tooltip??p.appearance.components.Tooltip,B=br(()=>({hide:c?.hide??p.tooltip?.hide,visibilityLimit:c?.visibilityLimit??p.tooltip?.visibilityLimit}),[c?.hide,p.tooltip?.hide,c?.visibilityLimit,p.tooltip?.visibilityLimit]),te=le({queries:(Array.isArray(e)?e:[e]).map(O=>({metrics:[O],operator:A,attributes:R,groupBy:k})),timeRange:p.timeRange,startTime:p.startTime,endTime:p.endTime,interval:C}),{isLoading:We,data:je,hasError:Ge}=te,{series:Ce,times:Ke,metadata:Xe}=je,Ye=Ce.every(O=>O.isEmpty),re=`ub-chart-container${a?` ${a}`:""}`;if(gr(()=>{T&&T(te)},[te,T]),We){let O=s?.components?.Loading??p.appearance.components.Loading;return q("div",{className:re,children:q(O,{})})}if(Ge){let O=s?.components?.Error??p.appearance.components.Error;return q("div",{className:re,children:q(O,{})})}if(Ye){let O=s?.components?.Empty??p.appearance.components.Empty;return q("div",{className:re,children:q(O,{})})}return q(ve,{times:Ke,series:Ce,metadata:Xe,type:n,className:a,tooltip:B,colors:M,relativeTimeAxis:w,unit:l,fill:F,tooltipComponent:U,thresholds:m,min:f,max:g,hideAxis:N,hideCursor:W,invertSort:V})}export{ve as Chart,ie as Empty,ne as Error,se as Loading,X as Scope,yr as Timeseries,at as UnblindProvider,Tt as useLogs,ct as useMetrics,ke as useRefresh,I as useScope,le as useTimeseries,gt as useUsage};
2
2
  //# sourceMappingURL=index.mjs.map