@unblind/react 0.1.0-alpha.11 → 0.1.0-alpha.13

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 ee,QueryClientProvider as Me,useQueryClient as Ee}from"@tanstack/react-query";import{createContext as Le,useCallback as Ne,useContext as Ie,useMemo as te}from"react";import{jsx as oe}from"react/jsx-runtime";var re=Le(void 0);function ie({children:e,queryClient:t,queryClientConfig:o,apiBaseUrl:i="/api/unblind",fetchImpl:r}){let l=te(()=>{if(t)return t;let n={refetchOnWindowFocus:!1,refetchOnReconnect:!1,refetchOnMount:!1},u={defaultOptions:{queries:n}};return o?new ee({...o,defaultOptions:{...o.defaultOptions,queries:{...n,...o.defaultOptions?.queries}}}):new ee(u)},[t,o]),s=te(()=>({apiBaseUrl:i,fetchImpl:r}),[i,r]);return oe(Me,{client:l,children:oe(re.Provider,{value:s,children:e})})}function N(){let e=Ie(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 ne(){let e=Ee();return Ne(async()=>{await e.refetchQueries({queryKey:["unblind","timeseries"]})},[e])}import{createContext as ze,useContext as ae,useMemo as se}from"react";import{jsx as D,jsxs as De}from"react/jsx-runtime";function _(){return D("div",{className:"ub-default",children:De("div",{className:"ub-empty-content",children:[D("div",{className:"ub-empty-icon-wrapper",children:D("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor",className:"ub-icon",children:D("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"})})}),D("p",{className:"ub-empty-text","data-text":"No data available for this time range"})]})})}function Q(){return D("div",{className:"ub-error"})}function $(){return D("div",{className:"ub-default","data-text":"Loading"})}import{jsx as Fe}from"react/jsx-runtime";var W=ze(void 0);function X({children:e,timeRange:t,startTime:o,endTime:i,interval:r,attributes:l,groupBy:s,operator:n,appearance:u}){let a=ae(W),m=u?.components?.Loading,d=u?.components?.Error,p=u?.components?.Tooltip,c=u?.tooltip?.layout,b=u?.tooltip?.format,h=u?.tooltip?.hideAttributes,g=u?.tooltip?.hideAttributeKey,f=u?.tooltip?.hideMetric,v=se(()=>{if(!(!m&&!d&&!p))return{components:{...m&&{Loading:m},...d&&{Error:d},...p&&{Tooltip:p}},tooltip:{layout:c,format:b,hideAttributes:h,hideAttributeKey:g,hideMetric:f}}},[m,d,p,c,b,h,g,f]),y=se(()=>({timeRange:t??a?.timeRange,startTime:o??a?.startTime,endTime:i??a?.endTime,interval:r??a?.interval,attributes:l??a?.attributes,groupBy:s??a?.groupBy,operator:n??a?.operator,appearance:v??a?.appearance}),[t,o,i,r,l,s,n,v,a]);return Fe(W.Provider,{value:y,children:e})}var Ve=["#7c3aed","#eab308","#2563eb","#dc2626","#16a34a","#f97316","#0891b2","#9333ea","#ca8a04","#4f46e5","#0d9488","#be185d"],Oe="6h";function O(){let e=ae(W);return{timeRange:e?.timeRange||Oe,startTime:e?.startTime,endTime:e?.endTime,interval:e?.interval,attributes:e?.attributes,groupBy:e?.groupBy,operator:e?.operator,appearance:{components:{Loading:e?.appearance?.components?.Loading??$,Error:e?.appearance?.components?.Error??Q,Empty:e?.appearance?.components?.Empty??_,Tooltip:e?.appearance?.components?.Tooltip},colors:e?.appearance?.colors||Ve,tooltip:e?.appearance?.tooltip}}}import{jsx as le}from"react/jsx-runtime";function Be({children:e,queryClient:t,apiBaseUrl:o,fetchImpl:i,timeRange:r,startTime:l,endTime:s,interval:n,attributes:u,groupBy:a,operator:m,appearance:d}){return le(ie,{queryClient:t,apiBaseUrl:o,fetchImpl:i,children:le(X,{timeRange:r,startTime:l,endTime:s,interval:n,attributes:u,groupBy:a,operator:m,appearance:d,children:e})})}import{useQuery as Ke}from"@tanstack/react-query";function He(){let{apiBaseUrl:e,fetchImpl:t=fetch}=N(),o=Ke({queryKey:["unblind","metrics"],queryFn:async()=>{let i=await t(`${e}/metrics`,{headers:{"Content-Type":"application/json"}});if(!i.ok)throw new Error("Error loading metrics metadata");if(i.status===200){let{data:r}=await i.json();return r}else throw new Error("Unexpected status code")}});return{metrics:o.data,isLoading:o.isLoading,hasError:o.isError,refetch:o.refetch}}import{useQuery as Ge}from"@tanstack/react-query";import{useMemo as H}from"react";import qe from"ms";function je(e){let t=Math.floor(Date.now()/1e3);return[t-Math.floor(qe(e)/1e3),t]}function F(e,t,o){let i,r;if(typeof t=="number"&&typeof o=="number")i=t,r=o;else if(e){let[l,s]=je(e);i=l,r=s}else throw new Error("Either timeRange or both startTime and endTime must be provided");return[i,r]}function Y({queries:e,timeRange:t,startTime:o,endTime:i,interval:r}){let{apiBaseUrl:l,fetchImpl:s=fetch}=N(),n=H(()=>e.map(y=>y.metrics.join(",")).join(","),[e]),u=H(()=>e.map(y=>{let x=y.attributes;if(!x)return"";let A=Object.keys(x);return A.length===0?"":A.map(C=>C+":"+x[C]?.join(",")).join(",")}).join(","),[e]),a=H(()=>e.map(y=>y.operator),[e]),m=H(()=>e.map(y=>y.groupBy).join(", "),[e]),p=Ge({queryKey:["unblind","timeseries",n,u,o,i,t,r,a,m],queryFn:async()=>{if(!n)throw new Error("Missing required parameters");if(n.length===0)throw new Error("No series provided");let[y,x]=F(t,o,i),A={queries:e,startTime:y,endTime:x,interval:r},C=await s(`${l}/tenants/timeseries`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(A)});if(!C.ok)throw new Error("Error fetching metric");let{series:w,times:S,metadata:M}=await C.json();if(!w)throw console.error("Series not found"),new Error("Series not found");return{series:w,times:S,metadata:M}},enabled:!!n&&(typeof o=="number"&&typeof i=="number"||!!t)}),{metadata:c,series:b,times:h}=H(()=>p.data?{series:p.data.series,times:p.data.times,metadata:p.data.metadata}:{series:[],times:[],metadata:{}},[p]),g=p.isLoading,f=p.isFetching,v=p.isError;return{data:{series:b,times:h,metadata:c},isLoading:g,isFetching:f,hasError:v,refetch:p.refetch}}import{useQuery as _e}from"@tanstack/react-query";import{useMemo as Qe}from"react";function $e({timeRange:e,startTime:t,endTime:o}){let{apiBaseUrl:i,fetchImpl:r=fetch}=N(),s=_e({queryKey:["unblind","usage",e,t,o],queryFn:async()=>{let[m,d]=F(e,t,o),p=`${i}/tenants/usage`,c=await r(p,{headers:{"Content-Type":"application/json"},body:JSON.stringify({startTime:m,endTime:d})});if(!c.ok)throw new Error("Error fetching usage");let{data:b}=await c.json();if(!b)throw new Error("usage not found");return b},enabled:typeof t=="number"&&typeof o=="number"||!!e}),n=Qe(()=>s.data?s.data||[]:[],[s]),u=s.isLoading||s.isRefetching,a=s.isError;return{usage:n,isLoading:u,hasError:a,refetch:s.refetch}}import{useInfiniteQuery as We}from"@tanstack/react-query";import{useMemo as Xe}from"react";function Ye({timeRange:e,filters:t,startTime:o,endTime:i}){let{apiBaseUrl:r,fetchImpl:l=fetch}=N(),s=typeof o=="number"&&typeof i=="number"||!!e,n=We({queryKey:["unblind","logs",e,t.map(a=>a.name+":"+a.value).sort().join(",")],queryFn:async({pageParam:a})=>{let m=t.reduce((C,w)=>(C[w.name]||(C[w.name]=[]),C[w.name].push(w.value),C),{}),{body:d=[],severity:p=[],"service.name":c=[],"trace.id":b=[],"span.id":h=[],...g}=m,[f,v]=F(e,o,i),y=await l(`${r}/tenants/logs`,{method:"POST",body:JSON.stringify({filter:{attributes:g,body:d,severity:p,traceId:b,spanId:h,service:c},startTime:f,endTime:v,pagination:{page:a}}),headers:{"Content-Type":"application/json"}});if(!y.ok)throw new Error("Error fetching logs");let{data:x,next_page:A}=await y.json();if(!x)throw new Error("logs not found");return{data:x,next_page:A}},enabled:s,initialPageParam:void 0,getNextPageParam:a=>a.next_page});return{logs:Xe(()=>n.data?n.data.pages.flatMap(a=>a.data||[]):[],[n.data]),isLoading:n.isLoading,hasError:n.isError,hasNextPage:n.hasNextPage??!1,fetchNextPage:n.fetchNextPage,isFetchingNextPage:n.isFetchingNextPage,refetch:n.refetch}}import{useMemo as Et}from"react";import{useEffect as At,useRef as Rt}from"react";import St from"uplot";import G from"uplot";import{getValueFormat as vt}from"@unblind/units";import{dateTimeFormat as Je,dateTimeFormatTimeAgo as Ze,systemDateFormats as q}from"@unblind/units";var k={millisecond:1,second:1e3,minute:6e4,hour:36e5,day:864e5,month:24192e5,year:31536e6},B={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 et(e,t,o,i){if(t>7*k.day){let r=q.interval.year,l=Math.round(k.year/k.day)*k.day;return Math.round(t/k.day)*k.day===l?r=q.interval.year:t<=k.year?r=q.interval.month:r=q.interval.day,e.map(n=>Je(n,{format:r,timeZone:i}))}return e.map(r=>{let l=new Date(r),s=t<k.minute,n=t<k.second,u=l.toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit",hour12:!1,timeZone:i});return(u==="00:00"||u==="24:00")&&!s&&!n?l.toLocaleDateString(void 0,{day:"2-digit",month:"short",timeZone:i}):l.toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit",second:s?"2-digit":void 0,fractionalSecondDigits:n?3:void 0,hour12:!1,timeZone:i})})}function pe(e){let t=[{size:k.second/1e3,increments:B.second},{size:k.minute/1e3,increments:B.minute},{size:k.hour/1e3,increments:B.hour},{size:k.day/1e3,increments:B.day},{size:k.month/1e3,increments:B.month},{size:k.year/1e3,increments:B.year}];for(let r of t)for(let l of r.increments){let s=r.size*l;if(s>=e)return{increment:s*1e3,multiplier:l}}let o=t[t.length-1],i=o.increments[o.increments.length-1];return{increment:o.size*i*1e3,multiplier:i}}function ue(e,t,o){return[t,o]}function tt(e,t,o,i){let r=o-t,l=e.width,s=Math.floor(l/100),n=r/s,{increment:u,multiplier:a}=pe(n),m=u/1e3,d=[];if(r<12*3600){let c=Math.ceil(t/m)*m;for(;c<=o;c+=m)d.push(c);return d}if(r<3*86400){if(u>=6*3600*1e3){let b=u/1e3/3600,h=new Date(t*1e3);if(i==="UTC"){let f=h.getUTCHours(),v=Math.floor(f/b)*b;h.setUTCHours(v,0,0,0)}else{let f=h.getHours(),v=Math.floor(f/b)*b;h.setHours(v,0,0,0)}let g=h.getTime()/1e3;for(g<t&&(g+=m);g<=o;)d.push(g),g+=m;return d}let c=Math.ceil(t/m)*m;for(;c<=o;c+=m)d.push(c);return d}if(u>=k.day){let c=new Date(t*1e3);i==="UTC"?(c.setUTCHours(0,0,0,0),c.getTime()/1e3<t&&c.setUTCDate(c.getUTCDate()+a)):(c.setHours(0,0,0,0),c.getTime()/1e3<t&&c.setDate(c.getDate()+a));let b=c.getTime()/1e3;for(;b<=o;)d.push(b),i==="UTC"?c.setUTCDate(c.getUTCDate()+a):c.setDate(c.getDate()+a),b=c.getTime()/1e3;return d}let p=Math.ceil(t/m)*m;for(;p<=o;p+=m)d.push(p);return d}function ce(e,t,o){return t.length===0?[]:t.map((i,r)=>r===0||r===t.length-1?Ze(i*1e3,{timeZone:o}):"")}function ot(e,t,o){let i=e.scales.x,r=((i?.max??0)-(i?.min??0))*1e3,l=Math.floor(e.width/100),s=r/1e3/l,{increment:n}=pe(s),u=t.map(a=>a*1e3);return et(u,n,r,o)}function me(e,t,o=!1){let i=o?(s,n,u,a)=>ue(s,u,a):(s,n,u,a)=>tt(s,u,a,t),r=o?(s,n)=>ce(s,n,t):(s,n)=>ot(s,n,t),l=o?(s,n,u,a,m)=>{let p=document.createElement("canvas").getContext("2d");if(!p)return 0;p.font=z(e);let c=ce(s,ue(s,u,a),t),b=Math.max(p.measureText(c[0]||"").width,p.measureText(c[1]||"").width);return Math.ceil(b/2)+15}:void 0;return{font:z(e),labelFont:z(e),grid:{show:!1,width:.5},ticks:{width:.5},splits:i,values:r,size:20}}import bt from"uplot";import{computePosition as rt,flip as it,offset as nt}from"@floating-ui/dom";import{createRoot as st}from"react-dom/client";var at=4,lt=8,J=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=st(this.overlay))}getOverlay(){return this.overlay}render(t,o){this.reactRoot?(this.reactRoot.render(o),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 o=this.getOverlay();if(o){let{x:i,y:r}=await rt({getBoundingClientRect:()=>({x:t.left,y:t.top,width:0,height:0,top:t.top,left:t.left,right:t.left,bottom:t.top})},o,{placement:"top-start",strategy:"fixed",middleware:[nt({mainAxis:at,crossAxis:lt}),it()]});o.style.left=`${i}px`,o.style.top=`${r}px`}}},E=new J;import{dateTimeFormat as de}from"@unblind/units";import{useMemo as fe}from"react";import{jsx as P,jsxs as I}from"react/jsx-runtime";function ve(e){return e.metric.displayName||e.metric.name||(typeof e.serie.label=="string"?e.serie.label:e.serie.label?.textContent||"Unknown")}function be(e){let t=e.attributes||{};if(t["service.name"])return String(t["service.name"]);let i=Object.keys(t)[0];return i?String(t[i]):"z-fallback"}function ge(e){return[...e].sort((t,o)=>(Number(o.value)||0)-(Number(t.value)||0))}function he(e){return[...e].sort((t,o)=>be(t).localeCompare(be(o)))}function ut(e){let t={};return e.forEach(o=>{let i=ve(o);t[i]||(t[i]=[]),t[i].push(o)}),t}function ct(e,t,o,i="original"){if(o==="flat")return[{label:"",items:t?ge(e):he(e)}];let r=ut(e);return Object.keys(r).sort((s,n)=>s.localeCompare(n)).map(s=>{let n=r[s];if(!n)return{label:j(s,i),items:[]};let u=t?ge(n):he(n);return{label:j(s,i),items:u}})}function j(e,t,o){switch(t){case"suffix":{let i=e.split(/[._-]/),r=i[i.length-1]||"";return o?r:r.charAt(0).toUpperCase()+r.slice(1).toLowerCase()}case"title":return e.split(/[._-]/).map(i=>o?i:i.charAt(0).toUpperCase()+i.slice(1).toLowerCase()).join(" ");default:return e}}function pt(e,t){if(t&&t!=="auto")return t;let o=e.some(r=>r.attributes&&Object.keys(r.attributes).length>0),i=new Set(e.map(ve));return o&&i.size>=1?"group-by-metric":"flat"}function ye({hideAttributeKey:e,attribute:t,format:o,isLastAttribute:i}){let[r,l]=t;return I("div",{className:"ub-tooltip-item-attribute-container",children:[I("div",{className:e?"ub-tooltip-item-hidden-attribute-key":"ub-tooltip-item-attribute-with-key",children:[!e&&I("span",{className:"ub-tooltip-item-attribute-key",children:[j(r,o),":"]}),P("span",{className:"ub-tooltip-item-attribute-value",children:l})]}),!i&&e&&P("span",{"data-text":", ",className:"ub-tooltip-item-attribute-divider"})]})}function mt({item:e,hideMetric:t,hideAttributeKey:o,hideAttributes:i,format:r}){let s=Object.entries(e.attributes||{}),n=s.length>0&&!i;return i&&t&&console.warn("Invalid configuration. Attributes and metrics are hidden."),I("div",{className:"ub-tooltip-item-row",children:[I("div",{className:"ub-tooltip-item-left"+(t?" ub-tooltip-item-hidden-metric":""),children:[I("div",{className:"ub-tooltip-item-heading",children:[P("span",{className:"ub-tooltip-item-dot",style:{backgroundColor:e.color}}),t?P("div",{className:"ub-tooltip-item-attributes",children:s.map((u,a)=>P(ye,{hideAttributeKey:o,attribute:u,format:r,isLastAttribute:a>=s.length-1},"attr_"+u[0]))}):P("span",{className:n?"ub-tooltip-item-metric-name-label":"ub-tooltip-item-metric-name",children:j(e.metric.name,r)})]}),n&&!t&&P("div",{className:"ub-tooltip-item-attributes",children:s.map((u,a)=>P(ye,{hideAttributeKey:o,attribute:u,format:r,isLastAttribute:a>=s.length-1},"attr_"+u[0]))})]}),P("div",{className:"ub-tooltip-item-value",children:e.formattedValue??P("span",{className:"ub-tooltip-item-value--empty",children:"\u2014"})})]})}function dt({className:e="ub-tooltip-divider",...t}){return P("hr",{role:"presentation",...t,className:e})}function ft({group:e,groupIdx:t,hideAttributeKey:o,hideMetric:i,hideAttributes:r,format:l,hideGroupLabel:s}){return I("div",{className:"ub-tooltip-group",children:[!s&&P("div",{className:`ub-tooltip-group-header${t>0?" ub-tooltip-group-header--separator":""}`,children:e.label}),P("div",{className:"ub-tooltip-items",children:e.items.map((n,u)=>P(mt,{item:n,format:l,hideAttributeKey:o,hideMetric:i,hideAttributes:r},`item-${t}-${u}`))})]},e.label)}function Te({timestamp:e,items:t,timeZone:o,spansMultipleDays:i,sortByValues:r,format:l="original",layout:s="flat",hideAttributeKey:n,hideMetric:u,hideAttributes:a}){let m=i?de(e*1e3,{format:"MMM DD, HH:mm",timeZone:o}):de(e*1e3,{format:"HH:mm",timeZone:o}),d=fe(()=>pt(t,s),[t,s]),p=d==="flat",b=typeof u=="boolean"?u:d==="group-by-metric",h=typeof n=="boolean"?n:!1,g=typeof a=="boolean"?a:!1,f=fe(()=>ct(t,r,d,l),[t,r,d,l]);return I("div",{className:"ub-tooltip",children:[P("div",{className:"ub-tooltip-datetime",children:m}),P(dt,{}),f.length>0?P("div",{className:"ub-tooltip-content",children:f.map((v,y)=>P(ft,{group:v,groupIdx:y,hideAttributeKey:h,hideMetric:b,hideAttributes:g,hideGroupLabel:p,format:l},v.label))}):P("div",{className:"ub-tooltip-no-data",children:"No data available"})]})}import{jsx as xe}from"react/jsx-runtime";function gt(e,t){if(!e||e.length===0)return!1;let o=e[0],i=e[e.length-1];if(o==null||i==null)return!1;let r=new Date(o*1e3),l=new Date(i*1e3),s=n=>t==="UTC"?`${n.getUTCFullYear()}-${n.getUTCMonth()}-${n.getUTCDate()}`:n.toLocaleDateString(void 0,{timeZone:t});return s(r)!==s(l)}function ht(e,t){let o=!1;for(let r=1;r<e.series.length;r++)if(e.data[r]?.[t]!=null){o=!0;break}if(o)return t;let i=e.data[0].length;for(let r=1;t+r<i||t-r>=0;r++){let l=t-r,s=t+r;if(l>=0){for(let n=1;n<e.series.length;n++)if(e.data[n]?.[l]!=null)return l}if(s<i){for(let n=1;n<e.series.length;n++)if(e.data[n]?.[s]!=null)return s}}return t}function yt(e,t,o,i,r,l){let s=!1,n=[];for(let u=1;u<e.series.length;u++){let a=e.data[u]?.[t]??null;if(i&&a!=null&&u>1){let g=e.data[u-1]?.[t]??0;a=a-g}let m=e.series[u],d=l?.[u-1];if(!d){console.warn("Original serie not found");continue}let p=r[d.metric];if(!p){console.warn("Metric metadata not found");continue}let c=m?.stroke,b=typeof c=="function"?c(bt,u):c??"#ffffff00",h=a==null?void 0:o?o(a):String(a);d?.attributes&&Object.keys(d?.attributes).length>0&&(s=!0),n.push({metric:p,color:b,value:a===null?void 0:a,formattedValue:h,attributes:d?.attributes,serie:m})}return{items:n,hasAttributes:s}}function Ce(e,t,o,i,r,l,s,n,u,a,m,d){let p,c,b,h=!1;function g(){let f=p.getBoundingClientRect();c=f.left,b=f.top}return{hooks:{init:f=>{E.initialize(),p=f.over,window.addEventListener("scroll",g,!0),window.addEventListener("resize",g),p.onmouseenter=()=>{h=!0,E.show()},p.onmouseleave=()=>{h=!1,E.getRenderedUplot()===f&&E.hide(f)},g()},setSize:()=>{g()},setCursor:f=>{let{left:v,top:y,idx:x}=f.cursor;if(!h||x==null){E.getRenderedUplot()===f&&E.hide(f);return}let C=f.data[0],w=gt(C,r),S=ht(f,x),M=f.data[0][S];if(M===void 0)return;let{items:U}=yt(f,S,e,t,o,s);E.show();let T=l,R=T?xe(T,{timestamp:M,items:U,timeZone:r}):xe(Te,{timestamp:M,items:U,timeZone:r,spansMultipleDays:w,stacked:t,sortByValues:i,layout:n,format:u,hideAttributeKey:a,hideAttributes:m,hideMetric:d});E.render(f,R),E.positionTooltip({left:(v||0)+c,top:(y||0)+b})},destroy(f){window.removeEventListener("scroll",g,!0),window.removeEventListener("resize",g),p&&(p.onmouseenter=null,p.onmouseleave=null),E.getRenderedUplot()===f&&E.hide(f)}}}}var z=e=>`${getComputedStyle(document.documentElement).getPropertyValue("--ub-chart-font-size").trim()} ${e}`,Pe=(e,t)=>{let o=e;return t&&t.unit&&t.unit.code&&t.unit.code!=="1"&&(!o&&t.unit?o=t.unit.code:o&&t.unit.code!==o&&(o=void 0)),o};function Tt(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)&&Array.isArray(e.fill)&&Array.isArray(e.border)}function xt(e){return Array.isArray(e)}var we=(e,t,o,i,r)=>xt(o)?r&&(i==="step"||i==="line"||i==="spline")?o[t]+"66":o[t]:Tt(o)?r?o.fill[t]:o.border[t]:o(e,t,i,r),Ct=e=>{let t=G.paths.bars({size:[.6,100],radius:0,gap:0}),o=G.paths.linear({alignGaps:0}),i=G.paths.spline({alignGaps:1}),r=G.paths.stepped({alignGaps:1});switch(e){case"line":return o;case"bar":return t;case"area":return o;case"step":return r;case"spline":return i;default:return o}},Pt=(e,t,o,i)=>we(e,t,o,i,!0),wt=(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}},Ut=(e,t,o)=>{if(t<0||o<0)return[t,o];let i=e.posToVal(t,"x"),r=e.data[0];if(!r||r.length===0)return[t,o];let l=0,s=0,n=r.length-1;for(;n-s>1;){let c=Math.floor((s+n)/2),b=r[c];b!=null&&b<i?s=c:n=c}let u=r[s],a=r[n];u!=null&&a!=null?l=Math.abs(u-i)<Math.abs(a-i)?s:n:u!=null?l=s:a!=null&&(l=n);let m=l;for(let c=l;c>=0;c--){let b=!1;for(let h=1;h<e.data.length;h++){let g=e.data[h];if(g&&g[c]!=null){b=!0;break}}if(b){m=c;break}}let d=r[m];return d==null?[t,o]:[e.valToPos(d,"x"),o]},Ue=(e,t,o,i,r,l,s,n,u,a,m,d,p,c,b,h,g)=>{let f=window.getComputedStyle(e),v=f.fontFamily,y=f.getPropertyValue("--ub-chart-font-color").trim(),x=f.getPropertyValue("--ub-chart-grid-color").trim(),A=e?.clientWidth??1050,C=e?.clientHeight??250,w=typeof o=="string"?String(o).toLowerCase().replaceAll("by","bytes"):o,S=vt(w==="1"?null:w),M=wt(r,n),U={width:A,height:C,scales:{y:{range:ke(o)}},plugins:[Ce(L=>{let K=S(L,Number.isInteger(L)?0:2);return K.text+(K.suffix?.trim()||"")},l,t,u,a,m,i,c,p,b,h,g)],padding:d?[10,15,10,15]:[8,15,8,15],cursor:{y:!1,sync:{key:"_"},drag:{setScale:!0,x:!0,y:!1},move:Ut},series:[{},...i.map((L,K)=>({label:L.metric,stroke:we(L,K,s,r),width:M,points:{show:!1},spanGaps:!0,paths:Ct(r),fill:n||l?Pt(L,K,s,r):void 0}))],axes:[me(v,a,d),Ae(S,v)],legend:{show:!1}},T=U.axes?.[0],R=U.axes?.[1];return T&&(T.stroke=y,T.grid?T.grid.stroke=x:T.grid={stroke:x}),R&&(R.stroke=y,R.grid?R.grid.stroke=x:R.grid={stroke:x}),U};var Re=(e,t=4)=>{let o=e/t,i=Math.pow(10,Math.floor(Math.log10(o))),r=o/i,l;return r>5?l=10*i:r>2?l=5*i:r>1?l=2*i:l=i,Math.ceil(e/l)*l},ke=e=>(t,o,i)=>{if(o===0&&i===0)return[0,100];let r=1,l=i*(1+r),s=o<0?o*(1+r):o*(1-r);if(e==="percent"||e==="percentunit")return i>100?o<0?[s,l]:[0,l]:o<0?[s,100]:[0,100];if(i<=.9999)return o<=0?[s,1]:[0,1];let n=Re(l),u=Re(Math.abs(s));return o<0?[-u,n]:[0,n]},kt=(e,t,o,i)=>{let r=e.axes[o];if(i>1)return r?._size;let l=(r?.ticks?.size||0)+(r?.gap||0),s=(t??[]).reduce((n,u)=>u.length>n.length?u:n,"");return s!=""&&(e.ctx.font=r?.font?.[0]??e.ctx.font,l+=e.ctx.measureText(s).width/devicePixelRatio),Math.ceil(l)};function Ae(e,t){return{gap:0,font:z(t),labelFont:z(t),grid:{show:!0,width:.5},ticks:{width:.5},values:(o,i)=>i.map(r=>{let l=e(r);return l.text+(l.suffix?.trim()||"")}),size:kt}}function Se(e,t){let o=[],i=e[0],r=i.length,l=Array(r).fill(0),s=[i];return e.forEach((n,u)=>{u!==0&&(t?s.push(n):s.push(n.map((a,m)=>l[m]=l[m]+(a||0))))}),e.forEach((n,u)=>{u===0||t||o.push({series:[e.findIndex((a,m)=>m>u),u]})}),{data:s,bands:o.filter(n=>n.series[1]>-1)}}import{jsx as Mt}from"react/jsx-runtime";function Z(e){let{times:t,series:o,metadata:i,type:r,className:l,timeZone:s,options:n,tooltip:u,colors:a,tooltipAppearance:m,sortByValues:d=!1,unit:p,fill:c=!1}=e,{layout:b,format:h,hideAttributeKey:g,hideAttributes:f,hideMetric:v}=u||{},y=Rt(null),x=O(),A=a||x.appearance.colors;return At(()=>{if(!o||o.length===0){console.warn("No series provided");return}let C=[t],w=p;o.forEach(R=>{let L=i[R.metric];p||(w=Pe(w,L)),C.push(R.values)});let S=r==="bar"||r==="area",M=Se(C,!S),U=y.current,T=null;if(U){let R=Ue(U,i,w,o,r,S,A,c,d,s,m,!1,h,b,g,f,v);R.bands=M.bands,T=new St({...R,...n},M.data,U);let L=new ResizeObserver(()=>{T?.setSize({width:U.clientWidth,height:U.clientHeight})});return L.observe(U),()=>{T?.destroy(),L.disconnect()}}},[o,t,r,i,s,m,A,c,d,p,h,b,g,f,v]),Mt("div",{ref:y,className:"ub-chart-container"+(l?` ${l}`:"")})}import{jsx as V}from"react/jsx-runtime";function Lt({metrics:e,operator:t,attributes:o,groupBy:i,interval:r,type:l="line",className:s,appearance:n,unit:u}){let a=O(),m=r??a.interval,d=o??a.attributes,p=i??a.groupBy,c=t??a.operator,b=n?.colors??a.appearance.colors,h=typeof n?.sortByValues=="boolean"?n?.sortByValues:a.appearance.sortByValues,g=typeof n?.fill=="boolean"?n.fill:a.appearance.fill,f=n?.components?.Tooltip??a.appearance.components.Tooltip,v=Et(()=>({layout:n?.tooltip?.layout??a.appearance.tooltip?.layout,format:n?.tooltip?.format??a.appearance.tooltip?.format,hideAttributes:n?.tooltip?.hideAttributes??a.appearance.tooltip?.hideAttributes,hideAttributeKey:n?.tooltip?.hideAttributeKey??a.appearance.tooltip?.hideAttributeKey,hideMetric:n?.tooltip?.hideMetric??a.appearance.tooltip?.hideMetric}),[n?.tooltip?.layout,n?.tooltip?.format,n?.tooltip?.hideAttributes,n?.tooltip?.hideAttributeKey,n?.tooltip?.hideMetric,a.appearance.tooltip?.layout,a.appearance.tooltip?.format,a.appearance.tooltip?.hideAttributes,a.appearance.tooltip?.hideAttributeKey,a.appearance.tooltip?.hideMetric]),{isLoading:y,data:x,hasError:A}=Y({queries:(Array.isArray(e)?e:[e]).map(T=>({metrics:[T],operator:c,attributes:d,groupBy:p})),timeRange:a.timeRange,startTime:a.startTime,endTime:a.endTime,interval:m}),{series:C,times:w,metadata:S}=x,M=C.every(T=>T.isEmpty),U=`ub-chart-container${s?` ${s}`:""}`;if(y){let T=n?.components?.Loading??a.appearance.components.Loading;return V("div",{className:U,children:V(T,{})})}if(M){let T=n?.components?.Empty??a.appearance.components.Empty;return V("div",{className:U,children:V(T,{})})}if(A){let T=n?.components?.Error??a.appearance.components.Error;return V("div",{className:U,children:V(T,{})})}return V(Z,{times:w,series:C,metadata:S,type:l,className:U,tooltip:v,colors:b,sortByValues:h,unit:u,fill:g,tooltipAppearance:f})}export{Z as Chart,_ as Empty,Q as Error,$ as Loading,Lt as TimeseriesChart,Be as UnblindProvider,X as UnblindScope,Ye as useLogs,He as useMetrics,ne as useRefresh,O as useScope,Y as useTimeseries,$e as useUsage};
1
+ import{QueryClient as ae,QueryClientProvider as Ve,useQueryClient as Oe}from"@tanstack/react-query";import{createContext as ze,useCallback as Fe,useContext as Be,useMemo as se}from"react";import{jsx as le}from"react/jsx-runtime";var ue=ze(void 0);function ce({children:e,queryClient:t,queryClientConfig:r,apiBaseUrl:i="/api/unblind",fetchImpl:o}){let s=se(()=>{if(t)return t;let n={refetchOnWindowFocus:!1,refetchOnReconnect:!1,refetchOnMount:!1},l={defaultOptions:{queries:n}};return r?new ae({...r,defaultOptions:{...r.defaultOptions,queries:{...n,...r.defaultOptions?.queries}}}):new ae(l)},[t,r]),a=se(()=>({apiBaseUrl:i,fetchImpl:o}),[i,o]);return le(Ve,{client:s,children:le(ue.Provider,{value:a,children:e})})}function D(){let e=Be(ue);if(!e)throw new Error("useUnblindConfig must be used within an UnblindClientProvider. Please wrap your app or component tree with <UnblindClientProvider>.");return e}function pe(){let e=Oe();return Fe(async()=>{await e.refetchQueries({queryKey:["unblind","timeseries"]})},[e])}import{createContext as qe,useContext as de,useMemo as me}from"react";import{jsx as z,jsxs as Ke}from"react/jsx-runtime";function J(){return z("div",{className:"ub-default",children:Ke("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 Z(){return z("div",{className:"ub-error"})}function ee(){return z("div",{className:"ub-default","data-text":"Loading"})}import{jsx as He}from"react/jsx-runtime";var te=qe(void 0);function re({children:e,timeRange:t,startTime:r,endTime:i,interval:o,attributes:s,groupBy:a,operator:n,appearance:l}){let u=de(te),m=l?.components?.Loading,d=l?.components?.Error,c=l?.components?.Tooltip,p=l?.tooltip?.layout,h=l?.tooltip?.format,g=l?.tooltip?.hideAttributes,b=l?.tooltip?.hideAttributeKey,f=l?.tooltip?.hideMetric,T=me(()=>({components:{...m&&{Loading:m},...d&&{Error:d},...c&&{Tooltip:c}},tooltip:{layout:p,format:h,hideAttributes:g,hideAttributeKey:b,hideMetric:f}}),[m,d,c,p,h,g,b,f]),y=me(()=>({timeRange:t??u?.timeRange,startTime:r??u?.startTime,endTime:i??u?.endTime,interval:o??u?.interval,attributes:s??u?.attributes,groupBy:a??u?.groupBy,operator:n??u?.operator,appearance:T??u?.appearance}),[t,r,i,o,s,a,n,T,u]);return He(te.Provider,{value:y,children:e})}var Ge="6h";function K(){let e=de(te);return{timeRange:e?.timeRange||Ge,startTime:e?.startTime,endTime:e?.endTime,interval:e?.interval,attributes:e?.attributes,groupBy:e?.groupBy,operator:e?.operator,appearance:{components:{Loading:e?.appearance?.components?.Loading??ee,Error:e?.appearance?.components?.Error??Z,Empty:e?.appearance?.components?.Empty??J,Tooltip:e?.appearance?.components?.Tooltip},colors:e?.appearance?.colors,tooltip:e?.appearance?.tooltip}}}import{jsx as he}from"react/jsx-runtime";function _e({children:e,queryClient:t,apiBaseUrl:r,fetchImpl:i,timeRange:o,startTime:s,endTime:a,interval:n,attributes:l,groupBy:u,operator:m,appearance:d}){return he(ce,{queryClient:t,apiBaseUrl:r,fetchImpl:i,children:he(re,{timeRange:o,startTime:s,endTime:a,interval:n,attributes:l,groupBy:u,operator:m,appearance:d,children:e})})}import{useQuery as je}from"@tanstack/react-query";function $e(){let{apiBaseUrl:e,fetchImpl:t=fetch}=D(),r=je({queryKey:["unblind","metrics"],queryFn:async()=>{let i=await t(`${e}/metrics`,{headers:{"Content-Type":"application/json"}});if(!i.ok)throw new Error("Error loading metrics metadata");if(i.status===200){let{data:o}=await i.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 Xe}from"@tanstack/react-query";import{useMemo as H}from"react";import Qe from"ms";function We(e){let t=Math.floor(Date.now()/1e3);return[t-Math.floor(Qe(e)/1e3),t]}function q(e,t,r){let i,o;if(typeof t=="number"&&typeof r=="number")i=t,o=r;else if(e){let[s,a]=We(e);i=s,o=a}else throw new Error("Either timeRange or both startTime and endTime must be provided");return[i,o]}function oe({queries:e,timeRange:t,startTime:r,endTime:i,interval:o}){let{apiBaseUrl:s,fetchImpl:a=fetch}=D(),n=H(()=>e.map(y=>y.metrics.join(",")).join(","),[e]),l=H(()=>e.map(y=>{let C=y.attributes;if(!C)return"";let k=Object.keys(C);return k.length===0?"":k.map(v=>v+":"+C[v]?.join(",")).join(",")}).join(","),[e]),u=H(()=>e.map(y=>y.operator),[e]),m=H(()=>e.map(y=>y.groupBy).join(", "),[e]),c=Xe({queryKey:["unblind","timeseries",n,l,r,i,t,o,u,m],queryFn:async()=>{if(!n)throw new Error("Missing required parameters");if(n.length===0)throw new Error("No series provided");let[y,C]=q(t,r,i),k={queries:e,startTime:y,endTime:C,interval:o},v=await a(`${s}/tenants/timeseries`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(k)});if(!v.ok)throw new Error("Error fetching metric");let{series:R,times:M,metadata:w}=await v.json();if(!R)throw console.error("Series not found"),new Error("Series not found");return{series:R,times:M,metadata:w}},enabled:!!n&&(typeof r=="number"&&typeof i=="number"||!!t)}),{metadata:p,series:h,times:g}=H(()=>c.data?{series:c.data.series,times:c.data.times,metadata:c.data.metadata}:{series:[],times:[],metadata:{}},[c]),b=c.isLoading,f=c.isFetching,T=c.isError;return{data:{series:h,times:g,metadata:p},isLoading:b,isFetching:f,hasError:T,refetch:c.refetch}}import{useQuery as Ye}from"@tanstack/react-query";import{useMemo as Je}from"react";function Ze({timeRange:e,startTime:t,endTime:r}){let{apiBaseUrl:i,fetchImpl:o=fetch}=D(),a=Ye({queryKey:["unblind","usage",e,t,r],queryFn:async()=>{let[m,d]=q(e,t,r),c=`${i}/tenants/usage`,p=await o(c,{headers:{"Content-Type":"application/json"},body:JSON.stringify({startTime:m,endTime:d})});if(!p.ok)throw new Error("Error fetching usage");let{data:h}=await p.json();if(!h)throw new Error("usage not found");return h},enabled:typeof t=="number"&&typeof r=="number"||!!e}),n=Je(()=>a.data?a.data||[]:[],[a]),l=a.isLoading||a.isRefetching,u=a.isError;return{usage:n,isLoading:l,hasError:u,refetch:a.refetch}}import{useInfiniteQuery as et}from"@tanstack/react-query";import{useMemo as tt}from"react";function rt({timeRange:e,filters:t,startTime:r,endTime:i}){let{apiBaseUrl:o,fetchImpl:s=fetch}=D(),a=typeof r=="number"&&typeof i=="number"||!!e,n=et({queryKey:["unblind","logs",e,t.map(u=>u.name+":"+u.value).sort().join(",")],queryFn:async({pageParam:u})=>{let m=t.reduce((v,R)=>(v[R.name]||(v[R.name]=[]),v[R.name].push(R.value),v),{}),{body:d=[],severity:c=[],"service.name":p=[],"trace.id":h=[],"span.id":g=[],...b}=m,[f,T]=q(e,r,i),y=await s(`${o}/tenants/logs`,{method:"POST",body:JSON.stringify({filter:{attributes:b,body:d,severity:c,traceId:h,spanId:g,service:p},startTime:f,endTime:T,pagination:{page:u}}),headers:{"Content-Type":"application/json"}});if(!y.ok)throw new Error("Error fetching logs");let{data:C,next_page:k}=await y.json();if(!C)throw new Error("logs not found");return{data:C,next_page:k}},enabled:a,initialPageParam:void 0,getNextPageParam:u=>u.next_page});return{logs:tt(()=>n.data?n.data.pages.flatMap(u=>u.data||[]):[],[n.data]),isLoading:n.isLoading,hasError:n.isError,hasNextPage:n.hasNextPage??!1,fetchNextPage:n.fetchNextPage,isFetchingNextPage:n.isFetchingNextPage,refetch:n.refetch}}import{useMemo as _t}from"react";import{useEffect as Kt,useRef as qt}from"react";import Gt from"uplot";var $=e=>"value"in e,_=e=>"from"in e&&"to"in e;import X from"uplot";import{getValueFormat as kt}from"@unblind/units";import{dateTimeFormat as ot,dateTimeFormatTimeAgo as it,systemDateFormats as Q}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 nt(e,t,r,i){if(t>7*S.day){let o=Q.interval.year,s=Math.round(S.year/S.day)*S.day;return Math.round(t/S.day)*S.day===s?o=Q.interval.year:t<=S.year?o=Q.interval.month:o=Q.interval.day,e.map(n=>ot(n,{format:o,timeZone:i}))}return e.map(o=>{let s=new Date(o),a=t<S.minute,n=t<S.second,l=s.toLocaleTimeString("en-GB",{hour:"2-digit",minute:"2-digit",hour12:!1,timeZone:i});return(l==="00:00"||l==="24:00")&&!a&&!n?s.toLocaleDateString(void 0,{day:"2-digit",month:"short",timeZone:i}):s.toLocaleTimeString(void 0,{hour:"2-digit",minute:"2-digit",second:a?"2-digit":void 0,fractionalSecondDigits:n?3:void 0,hour12:!1,timeZone:i})})}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 s of o.increments){let a=o.size*s;if(a>=e)return{increment:a*1e3,multiplier:s}}let r=t[t.length-1],i=r.increments[r.increments.length-1];return{increment:r.size*i*1e3,multiplier:i}}function fe(e,t,r){return[t,r]}function at(e,t,r,i){let o=r-t,s=e.width,a=Math.floor(s/100),n=o/a,{increment:l,multiplier:u}=ge(n),m=l/1e3,d=[];if(o<12*3600){let p=Math.ceil(t/m)*m;for(;p<=r;p+=m)d.push(p);return d}if(o<3*86400){if(l>=6*3600*1e3){let h=l/1e3/3600,g=new Date(t*1e3);if(i==="UTC"){let f=g.getUTCHours(),T=Math.floor(f/h)*h;g.setUTCHours(T,0,0,0)}else{let f=g.getHours(),T=Math.floor(f/h)*h;g.setHours(T,0,0,0)}let b=g.getTime()/1e3;for(b<t&&(b+=m);b<=r;)d.push(b),b+=m;return d}let p=Math.ceil(t/m)*m;for(;p<=r;p+=m)d.push(p);return d}if(l>=S.day){let p=new Date(t*1e3);i==="UTC"?(p.setUTCHours(0,0,0,0),p.getTime()/1e3<t&&p.setUTCDate(p.getUTCDate()+u)):(p.setHours(0,0,0,0),p.getTime()/1e3<t&&p.setDate(p.getDate()+u));let h=p.getTime()/1e3;for(;h<=r;)d.push(h),i==="UTC"?p.setUTCDate(p.getUTCDate()+u):p.setDate(p.getDate()+u),h=p.getTime()/1e3;return d}let c=Math.ceil(t/m)*m;for(;c<=r;c+=m)d.push(c);return d}function be(e,t,r){return t.length===0?[]:t.map((i,o)=>o===0||o===t.length-1?it(i*1e3,{timeZone:r}):"")}function st(e,t,r){let i=e.scales.x,o=((i?.max??0)-(i?.min??0))*1e3,s=Math.floor(e.width/100),a=o/1e3/s,{increment:n}=ge(a),l=t.map(u=>u*1e3);return nt(l,n,o,r)}function ye(e,t,r=!1){let i=r?(a,n,l,u)=>fe(a,l,u):(a,n,l,u)=>at(a,l,u,t),o=r?(a,n)=>be(a,n,t):(a,n)=>st(a,n,t),s=r?(a,n,l,u,m)=>{let c=document.createElement("canvas").getContext("2d");if(!c)return 0;c.font=F(e);let p=be(a,fe(a,l,u),t),h=Math.max(c.measureText(p[0]||"").width,c.measureText(p[1]||"").width);return Math.ceil(h/2)+15}:void 0;return{font:F(e),labelFont:F(e),grid:{show:!1,width:.5},ticks:{width:.5},splits:i,values:o,size:20}}import vt from"uplot";import{computePosition as lt,flip as ut,offset as ct}from"@floating-ui/dom";import{createRoot as pt}from"react-dom/client";var mt=4,dt=8,ie=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=pt(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:i,y:o}=await lt({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:[ct({mainAxis:mt,crossAxis:dt}),ut()]});r.style.left=`${i}px`,r.style.top=`${o}px`}}},L=new ie;import{dateTimeFormat as Te}from"@unblind/units";import{useMemo as ve}from"react";import{jsx as x,jsxs as O}from"react/jsx-runtime";function we(e){return e.metric.displayName||e.metric.name||(typeof e.serie.label=="string"?e.serie.label:e.serie.label?.textContent||"Unknown")}function xe(e){let t=e.attributes||{};if(t["service.name"])return String(t["service.name"]);let i=Object.keys(t)[0];return i?String(t[i]):"z-fallback"}function Ce(e){return[...e].sort((t,r)=>(Number(r.value)||0)-(Number(t.value)||0))}function Pe(e){return[...e].sort((t,r)=>xe(t).localeCompare(xe(r)))}function ht(e){let t={};return e.forEach(r=>{let i=we(r);t[i]||(t[i]=[]),t[i].push(r)}),t}function ft(e,t,r,i="original"){if(r==="flat")return[{label:"",items:t?Ce(e):Pe(e)}];let o=ht(e);return Object.keys(o).sort((a,n)=>a.localeCompare(n)).map(a=>{let n=o[a];if(!n)return{label:W(a,i),items:[]};let l=t?Ce(n):Pe(n);return{label:W(a,i),items:l}})}function W(e,t,r){switch(t){case"suffix":{let i=e.split(/[._-]/),o=i[i.length-1]||"";return r?o:o.charAt(0).toUpperCase()+o.slice(1).toLowerCase()}case"title":return e.split(/[._-]/).map(i=>r?i:i.charAt(0).toUpperCase()+i.slice(1).toLowerCase()).join(" ");default:return e}}function bt(e,t){if(t&&t!=="auto")return t;let r=e.some(o=>o.attributes&&Object.keys(o.attributes).length>0),i=new Set(e.map(we));return r&&i.size>=1?"group-by-metric":"flat"}function ke({hideAttributeKey:e,attribute:t,format:r,isLastAttribute:i}){let[o,s]=t;return O("div",{className:"ub-tooltip-item-attribute-container",children:[O("div",{className:e?"ub-tooltip-item-hidden-attribute-key":"ub-tooltip-item-attribute-with-key",children:[!e&&O("span",{className:"ub-tooltip-item-attribute-key",children:[W(o,r),":"]}),x("span",{className:"ub-tooltip-item-attribute-value",children:s})]}),!i&&e&&x("span",{"data-text":", ",className:"ub-tooltip-item-attribute-divider"})]})}function gt({item:e,hideMetric:t,hideAttributeKey:r,hideAttributes:i,format:o}){let a=Object.entries(e.attributes||{}),n=a.length>0&&!i;return i&&t&&console.warn("Invalid configuration. Attributes and metrics are hidden."),O("div",{className:"ub-tooltip-item-row",children:[O("div",{className:"ub-tooltip-item-left"+(t?" ub-tooltip-item-hidden-metric":""),children:[O("div",{className:"ub-tooltip-item-heading",children:[x("span",{className:"ub-tooltip-item-dot",style:{backgroundColor:e.color}}),t?x("div",{className:"ub-tooltip-item-attributes",children:a.map((l,u)=>x(ke,{hideAttributeKey:r,attribute:l,format:o,isLastAttribute:u>=a.length-1},"attr_"+l[0]))}):x("span",{className:n?"ub-tooltip-item-metric-name-label":"ub-tooltip-item-metric-name",children:W(e.metric.name,o)})]}),n&&!t&&x("div",{className:"ub-tooltip-item-attributes",children:a.map((l,u)=>x(ke,{hideAttributeKey:r,attribute:l,format:o,isLastAttribute:u>=a.length-1},"attr_"+l[0]))})]}),x("div",{className:"ub-tooltip-item-value",children:e.formattedValue??x("span",{className:"ub-tooltip-item-value--empty",children:"\u2014"})})]})}function yt({className:e="ub-tooltip-divider",...t}){return x("hr",{role:"presentation",...t,className:e})}function Tt({group:e,groupIdx:t,hideAttributeKey:r,hideMetric:i,hideAttributes:o,format:s,hideGroupLabel:a}){return O("div",{className:"ub-tooltip-group",children:[!a&&x("div",{className:`ub-tooltip-group-header${t>0?" ub-tooltip-group-header--separator":""}`,children:e.label}),x("div",{className:"ub-tooltip-items",children:e.items.map((n,l)=>x(gt,{item:n,format:s,hideAttributeKey:r,hideMetric:i,hideAttributes:o},`item-${t}-${l}`))})]},e.label)}function Ae({timestamp:e,items:t,timeZone:r,spansMultipleDays:i,sortByValues:o,format:s="original",layout:a="flat",hideAttributeKey:n,hideMetric:l,hideAttributes:u}){let m=i?Te(e*1e3,{format:"MMM DD, HH:mm",timeZone:r}):Te(e*1e3,{format:"HH:mm",timeZone:r}),d=ve(()=>bt(t,a),[t,a]),c=d==="flat",h=typeof l=="boolean"?l:d==="group-by-metric",g=typeof n=="boolean"?n:!1,b=typeof u=="boolean"?u:!1,f=ve(()=>ft(t,o,d,s),[t,o,d,s]);return O("div",{className:"ub-tooltip",children:[x("div",{className:"ub-tooltip-datetime",children:m}),x(yt,{}),f.length>0?x("div",{className:"ub-tooltip-content",children:f.map((T,y)=>x(Tt,{group:T,groupIdx:y,hideAttributeKey:g,hideMetric:h,hideAttributes:b,hideGroupLabel:c,format:s},T.label))}):x("div",{className:"ub-tooltip-no-data",children:"No data available"})]})}import{jsx as Se}from"react/jsx-runtime";function xt(e,t){if(!e||e.length===0)return!1;let r=e[0],i=e[e.length-1];if(r==null||i==null)return!1;let o=new Date(r*1e3),s=new Date(i*1e3),a=n=>t==="UTC"?`${n.getUTCFullYear()}-${n.getUTCMonth()}-${n.getUTCDate()}`:n.toLocaleDateString(void 0,{timeZone:t});return a(o)!==a(s)}function Ct(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 i=e.data[0].length;for(let o=1;t+o<i||t-o>=0;o++){let s=t-o,a=t+o;if(s>=0){for(let n=1;n<e.series.length;n++)if(e.data[n]?.[s]!=null)return s}if(a<i){for(let n=1;n<e.series.length;n++)if(e.data[n]?.[a]!=null)return a}}return t}function Pt(e,t,r,i,o,s){let a=!1,n=[];for(let l=1;l<e.series.length;l++){let u=e.data[l]?.[t]??null;if(i&&u!=null&&l>1){let b=e.data[l-1]?.[t]??0;u=u-b}let m=e.series[l],d=s?.[l-1];if(!d){console.warn("Original serie not found");continue}let c=o[d.metric];if(!c){console.warn("Metric metadata not found");continue}let p=m?.stroke,h=typeof p=="function"?p(vt,l):p??"#ffffff00",g=u==null?void 0:r?r(u):String(u);d?.attributes&&Object.keys(d?.attributes).length>0&&(a=!0),n.push({metric:c,color:h,value:u===null?void 0:u,formattedValue:g,attributes:d?.attributes,serie:m})}return{items:n,hasAttributes:a}}function Re(e,t,r,i,o,s,a,n,l,u,m,d){let c,p,h,g=!1;function b(){let f=c.getBoundingClientRect();p=f.left,h=f.top}return{hooks:{init:f=>{L.initialize(),c=f.over,window.addEventListener("scroll",b,!0),window.addEventListener("resize",b),c.onmouseenter=()=>{g=!0,L.show()},c.onmouseleave=()=>{g=!1,L.getRenderedUplot()===f&&L.hide(f)},b()},setSize:()=>{b()},setCursor:f=>{let{left:T,top:y,idx:C}=f.cursor;if(!g||C==null){L.getRenderedUplot()===f&&L.hide(f);return}let v=f.data[0],R=xt(v,o),M=Ct(f,C),w=f.data[0][M];if(w===void 0)return;let{items:E}=Pt(f,M,e,t,r,a);L.show();let I=s,V=I?Se(I,{timestamp:w,items:E,timeZone:o}):Se(Ae,{timestamp:w,items:E,timeZone:o,spansMultipleDays:R,stacked:t,sortByValues:i,layout:n,format:l,hideAttributeKey:u,hideAttributes:m,hideMetric:d});L.render(f,V),L.positionTooltip({left:(T||0)+p,top:(y||0)+h})},destroy(f){window.removeEventListener("scroll",b,!0),window.removeEventListener("resize",b),c&&(c.onmouseenter=null,c.onmouseleave=null),L.getRenderedUplot()===f&&L.hide(f)}}}}var Y=["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)"],F=e=>`${getComputedStyle(document.documentElement).getPropertyValue("--ub-chart-font-size").trim()} ${e}`,Ue=(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 wt(e){return typeof e=="object"&&e!==null&&!Array.isArray(e)&&Array.isArray(e.fill)&&Array.isArray(e.border)}function At(e){return Array.isArray(e)}var Le=(e,t,r,i,o,s)=>{if(r)return At(r)?r[t]:wt(r)?s?r.fill[t]:r.border[t]:r(e,t,i,s);let a=s?`--ub-chart-serie-color-fill-${t+1}`:`--ub-chart-serie-color-${t+1}`,n=o.getPropertyValue(a).trim();return n||(s&&(i==="step"||i==="line"||i==="spline")?`oklch(from ${Y[t%Y.length]} l c h / 0.4)`:Y[t%Y.length])},St=e=>{let t=X.paths.bars({size:[.6,100],radius:0,gap:0}),r=X.paths.linear({alignGaps:0}),i=X.paths.spline({alignGaps:1}),o=X.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 i;default:return r}},Rt=(e,t,r,i,o)=>Le(e,t,r,i,o,!0),Ut=(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}},Lt=(e,t,r)=>{if(t<0||r<0)return[t,r];let i=e.posToVal(t,"x"),o=e.data[0];if(!o||o.length===0)return[t,r];let s=0,a=0,n=o.length-1;for(;n-a>1;){let p=Math.floor((a+n)/2),h=o[p];h!=null&&h<i?a=p:n=p}let l=o[a],u=o[n];l!=null&&u!=null?s=Math.abs(l-i)<Math.abs(u-i)?a:n:l!=null?s=a:u!=null&&(s=n);let m=s;for(let p=s;p>=0;p--){let h=!1;for(let g=1;g<e.data.length;g++){let b=e.data[g];if(b&&b[p]!=null){h=!0;break}}if(h){m=p;break}}let d=o[m];return d==null?[t,r]:[e.valToPos(d,"x"),r]},Mt=(e,t)=>{let r=t.getPropertyValue("--ub-chart-font-color").trim(),i=t.getPropertyValue("--ub-chart-grid-color").trim(),o=e.axes?.[0],s=e.axes?.[1];return o&&(o.stroke=r,o.grid?o.grid.stroke=i:o.grid={stroke:i}),s&&(s.stroke=r,s.grid?s.grid.stroke=i:s.grid={stroke:i}),e},Et=(e,t)=>e.getPropertyValue(`--ub-chart-threshold-${t}`).trim()||e.getPropertyValue("--ub-chart-threshold-default").trim(),Nt=(e,t)=>e.getPropertyValue(`--ub-chart-threshold-${t}-fill`).trim()||e.getPropertyValue("--ub-chart-threshold-default-fill").trim(),It=e=>{switch(e){case"bold":return 2;case"line":return 1;case"dashed":return 1;default:return 1}},Dt=e=>e==="line"?void 0:[5,5],Vt=(e,t)=>{if(t){let r=[];return t.forEach(i=>{let o={label:i.label,stroke:Et(e,i.level),width:It(),dash:Dt(i.type),points:{show:!1,size:0},spanGaps:!0,show:!0,auto:!1};$(i)||r.push(o),r.push(o)}),r}else return[]},Ot=(e,t,r,i)=>{if(!i||!i.some(s=>_(s)))return t.bands;let o=i.map((s,a)=>_(s)?{series:[e.length+a*2+1,e.length+a*2+2],fill:Nt(r,s.level),dir:1}:null).filter(s=>s!==null);return[...t.bands,...o]},zt=(e,t,r,i,o,s,a)=>{let n=Ut(t,i);return[{},...e.map((l,u)=>({label:l.metric,stroke:Le(l,u,r,t,s),width:n,points:{show:!1},spanGaps:!0,paths:St(t),fill:i||o?Rt(l,u,r,t,s):void 0})),...Vt(s,a)]},Ft=e=>{if(typeof e=="string"){let t=String(e).toLowerCase().trim();if(t==="by")return"bytes";if(t.startsWith("{")&&t.endsWith("}"))return"short"}return e},Me=(e,t,r,i,o,s,a,n,l,u,m,d,c,p,h,g,b,f,T,y,C)=>{let k=window.getComputedStyle(e),v=k.fontFamily,R=e?.clientWidth??1050,M=e?.clientHeight??250,w=Ft(i),E=kt(w==="1"?null:w),I=U=>{let A=E(U,Number.isInteger(U)?0:2);return A.text+(A.suffix?.trim()||"")},V={width:R,height:M,scales:{y:{range:Ee(i,y,C)}},plugins:[Re(I,a,t,u,m,d,o,h,p,g,b,f)],padding:c?[10,15,10,15]:[8,15,8,15],cursor:{y:!1,sync:{key:"_"},drag:{setScale:!0,x:!0,y:!1},move:Lt},series:zt(o,s,n,l,a,k,T),bands:Ot(o,r,k,T),axes:[ye(v,m,c),Ne(E,v)],legend:{show:!1}};return Mt(V,k)};var Ie=(e,t=4)=>{let r=e/t,i=Math.pow(10,Math.floor(Math.log10(r))),o=r/i,s;return o>5?s=10*i:o>2?s=5*i:o>1?s=2*i:s=i,Math.ceil(e/s)*s},P=(e,t)=>typeof e=="number"?e:t,Ee=(e,t,r)=>(i,o,s)=>{if(o===0&&s===0)return[P(t,0),P(r,100)];let a=1,n=s*(1+a),l=o<0?o*(1+a):o*(1-a);if(e==="percent"||e==="percentunit")return s>100?o<0?[P(t,l),P(r,n)]:[P(t,0),P(r,n)]:o<0?[P(t,l),P(r,100)]:[P(t,0),P(r,100)];if(s<=.9999)return o<=0?[P(t,l),P(r,1)]:[P(t,0),P(r,1)];let u=Ie(n),m=Ie(Math.abs(l));return o<0?[P(r,-m),P(r,u)]:[P(t,0),P(r,u)]},Bt=(e,t,r,i)=>{let o=e.axes[r];if(i>1)return o?._size;let s=(o?.ticks?.size||0)+(o?.gap||0),a=(t??[]).reduce((n,l)=>l.length>n.length?l:n,"");return a!=""&&(e.ctx.font=o?.font?.[0]??e.ctx.font,s+=e.ctx.measureText(a).width/devicePixelRatio),Math.ceil(s)};function Ne(e,t){return{gap:0,font:F(t),labelFont:F(t),grid:{show:!0,width:.5},ticks:{width:.5},values:(r,i)=>i.map(o=>{let s=e(o);return s.text+(s.suffix?.trim()||"")}),size:Bt,space:60}}function De(e,t){let r=[],i=e[0],o=i.length,s=Array(o).fill(0),a=[i];return e.forEach((n,l)=>{l!==0&&(t?a.push(n):a.push(n.map((u,m)=>s[m]=s[m]+(u||0))))}),e.forEach((n,l)=>{l===0||t||r.push({series:[e.findIndex((u,m)=>m>l),l]})}),{data:a,bands:r.filter(n=>n.series[1]>-1)}}import{jsx as Ht}from"react/jsx-runtime";function ne(e){let{times:t,series:r,metadata:i,type:o,className:s,timeZone:a,options:n,tooltip:l,colors:u,tooltipComponent:m,sortByValues:d=!1,unit:c,fill:p=!1,thresholds:h,min:g,max:b}=e,{layout:f,format:T,hideAttributeKey:y,hideAttributes:C,hideMetric:k}=l||{},v=qt(null),R=K(),M=u||R.appearance.colors;return Kt(()=>{if(!r||r.length===0){console.warn("No series provided");return}let w=[t],E=c;r.forEach(N=>{let j=i[N.metric];c||(E=Ue(E,j)),w.push(N.values)}),h&&h.forEach(N=>{$(N)?w.push(new Array(t.length).fill(N.value)):_(N)&&(w.push(new Array(t.length).fill(N.from)),w.push(new Array(t.length).fill(N.to)))});let I=o==="bar"||o==="area",V=De(w,!I),U=v.current,A=null;if(U){let N=Me(U,i,V,E,r,o,I,M,p,d,a,m,!1,T,f,y,C,k,h,g,b);A=new Gt({...N,...n},V.data,U);let j=new ResizeObserver(()=>{A?.setSize({width:U.clientWidth,height:U.clientHeight})});return j.observe(U),()=>{A?.destroy(),j.disconnect()}}},[r,t,o,i,a,m,M,p,d,c,T,f,y,C,k,h,g,b]),Ht("div",{ref:v,className:"ub-chart-container"+(s?` ${s}`:"")})}import{jsx as B}from"react/jsx-runtime";function jt({metrics:e,operator:t,attributes:r,groupBy:i,interval:o,type:s="line",className:a,appearance:n,unit:l,thresholds:u,min:m,max:d}){let c=K(),p=o??c.interval,h=r??c.attributes,g=i??c.groupBy,b=t??c.operator,f=n?.colors??c.appearance.colors,T=typeof n?.sortByValues=="boolean"?n?.sortByValues:c.appearance.sortByValues,y=typeof n?.fill=="boolean"?n.fill:c.appearance.fill,C=n?.components?.Tooltip??c.appearance.components.Tooltip,k=_t(()=>({layout:n?.tooltip?.layout??c.appearance.tooltip?.layout,format:n?.tooltip?.format??c.appearance.tooltip?.format,hideAttributes:n?.tooltip?.hideAttributes??c.appearance.tooltip?.hideAttributes,hideAttributeKey:n?.tooltip?.hideAttributeKey??c.appearance.tooltip?.hideAttributeKey,hideMetric:n?.tooltip?.hideMetric??c.appearance.tooltip?.hideMetric}),[n?.tooltip?.layout,n?.tooltip?.format,n?.tooltip?.hideAttributes,n?.tooltip?.hideAttributeKey,n?.tooltip?.hideMetric,c.appearance.tooltip?.layout,c.appearance.tooltip?.format,c.appearance.tooltip?.hideAttributes,c.appearance.tooltip?.hideAttributeKey,c.appearance.tooltip?.hideMetric]),{isLoading:v,data:R,hasError:M}=oe({queries:(Array.isArray(e)?e:[e]).map(A=>({metrics:[A],operator:b,attributes:h,groupBy:g})),timeRange:c.timeRange,startTime:c.startTime,endTime:c.endTime,interval:p}),{series:w,times:E,metadata:I}=R,V=w.every(A=>A.isEmpty),U=`ub-chart-container${a?` ${a}`:""}`;if(v){let A=n?.components?.Loading??c.appearance.components.Loading;return B("div",{className:U,children:B(A,{})})}if(V){let A=n?.components?.Empty??c.appearance.components.Empty;return B("div",{className:U,children:B(A,{})})}if(M){let A=n?.components?.Error??c.appearance.components.Error;return B("div",{className:U,children:B(A,{})})}return B(ne,{times:E,series:w,metadata:I,type:s,className:a,tooltip:k,colors:f,sortByValues:T,unit:l,fill:y,tooltipComponent:C,thresholds:u,min:m,max:d})}export{ne as Chart,J as Empty,Z as Error,ee as Loading,jt as Timeseries,_e as UnblindProvider,re as UnblindScope,rt as useLogs,$e as useMetrics,pe as useRefresh,K as useScope,oe as useTimeseries,Ze as useUsage};
2
2
  //# sourceMappingURL=index.mjs.map