Files
op-packages/luci-app-honk/root/etc/honk/dashboard/assets/AreaChart-DtE4xcoZ.js
T

2 lines
4.8 KiB
JavaScript

import{r as u,j as a}from"./vendor-react-Bf71BWbF.js";import{u as ct,aB as it,eH as rt,eI as ut}from"./index-CXHBmSa5.js";import{u as ht,e as dt,v as q,C as xt,f as pt,n as ft,g as J}from"./layout-BRLew_nj.js";import{G as mt,C as yt}from"./AreaCurve-BriPYJva.js";import"./array-C0P64tl-.js";const Mt=l=>{const o=Math.pow(10,Math.floor(Math.log10(l))),e=l/o;return([1,1.2,1.5,2,2.5,3,4,5,6,8,10].find(h=>e<=h)??10)*o},gt=l=>{const o=Math.pow(10,Math.floor(Math.log10(Math.max(l,1e-9)))),e=l/o;return(e<=1?.2:e<=2?.5:e<=5?1:2)*o},B=[30,60,120,300,600,900,1800,3600,7200,21600,43200,86400].map(l=>l*1e3);function kt(l,o){const e=o-l,s=B.find(c=>e/c<=6)??B[B.length-1],h=s>=864e5?new Date(o).getTimezoneOffset()*6e4:0,y=Math.ceil((l-h)/s)*s+h,x=[];for(let c=y;c<=o;c+=s)c-l>=e*.04&&o-c>=e*.04&&x.push(c);return{ticks:x,step:s}}function Q(l){const[o,e]=u.useState([]);return u.useLayoutEffect(()=>{const s=document.createElement("span");Object.assign(s.style,{position:"absolute",top:"-20000px",whiteSpace:"pre",fontSize:"11px"}),document.body.appendChild(s),e(l.map(y=>{s.textContent=y;const{width:x,height:c}=s.getBoundingClientRect();return{width:x,height:c}})),s.remove()},[l]),o}function wt({label:l,series:o,timestamps:e,fmt:s,locale:h,height:y=150,baseline:x="zero",window:c,fill:U}){const X=ct(),C=it(),F=u.useId(),[Y,L]=rt(Math.round,120),{tip:Z,showAt:_,hide:E}=ht(),[z,I]=u.useState(null),i=z&&z.index<e.length?z.index:null,N=c?c.until-c.since:e.length?e[e.length-1]-e[0]:0,M=c?.since,g=c?.until,p=u.useMemo(()=>M!==void 0&&g!==void 0?kt(M,g):void 0,[M,g]),D=p?p.step<6e4:N<180*1e3,A=p?p.step>=864e5:N>2160*60*1e3,G=u.useMemo(()=>new Intl.DateTimeFormat(h,A?{month:"numeric",day:"numeric"}:D?{hour:"2-digit",minute:"2-digit",second:"2-digit",hourCycle:"h23"}:{hour:"2-digit",minute:"2-digit",hourCycle:"h23"}),[h,D,A]),{yDomain:K,yTicks:j}=u.useMemo(()=>{const t=o.flatMap(d=>d.values.filter(w=>w!==null));let n=0,r=Mt(Math.max(1,...t)*1.08);if(x==="auto"&&t.length){const d=Math.min(...t),w=Math.max(...t),b=gt(Math.max(w-d,w*.02,1));n=Math.max(0,Math.floor(d/b)*b-b),r=Math.ceil(w/b)*b+b}return{yDomain:[n,r],yTicks:x==="auto"?[n,(n+r)/2,r]:[r/2,r]}},[o,x]),P=u.useMemo(()=>{const t=e.length-1;return p?p.ticks:[...new Set((D?[0,Math.round(t/2),t]:[0,Math.round(t/3),Math.round(2*t/3),t]).map(n=>e[n]))]},[p,D,e]),O=u.useMemo(()=>M!==void 0&&g!==void 0?[M,g]:[Math.min(...e),Math.max(...e)],[M,g,e]),k=L?.width??0,S=L?.height??y,m=S-30,v=k-64,tt=[Math.min(O[0],...e),Math.max(O[1],...e)],f=t=>J(t,tt,[20,v]),T=t=>J(t,K,[m,8]),et={x:20,y:8,width:v-20,height:m-8},R=(t,n)=>I({index:t,y:n}),W=()=>{I(null),E()};u.useLayoutEffect(()=>{if(i===null){E();return}if(!o.some(t=>t.values[i]!=null)){E();return}_({x:f(e[i]),y:z?.y??(8+m)/2,width:k,bounds:et,label:ut(h).format(e[i]),lines:o.filter(t=>t.values[i]!=null).sort((t,n)=>t.label<n.label?-1:t.label>n.label?1:0).map(t=>`${t.label}${X("ui.labelSeparator")}${s(t.values[i])}`)})});const $=dt(e.length,R,W),H=u.useMemo(()=>P.map(t=>G.format(t)),[P,G]),nt=u.useMemo(()=>j.map(s),[j,s]),ot=Q(H),st=Q(nt),at=p?q(P.map(f),ot.map(t=>t.width),0,k,16,!0):P.map((t,n)=>({index:n,position:f(t)})),V=q(j.map(T),st.map(t=>t.height),0,S,5,!1),lt=[...new Set([...V.map(t=>T(j[t.index])),8,m])];return a.jsx("div",{ref:Y,style:{height:y,width:"100%",flex:U?"1 1 auto":void 0,position:"relative"},onPointerLeave:$.onPointerLeave,children:e.length>0&&L&&a.jsxs(a.Fragment,{children:[a.jsx(xt,{tip:Z}),a.jsxs("svg",{className:"rp-activity-surface",width:k,height:S,viewBox:`0 0 ${k} ${S}`,style:{display:"block"},role:"application","aria-label":l,tabIndex:0,onFocus:$.onFocus,onBlur:$.onBlur,onKeyDown:$.onKeyDown,onPointerMove:t=>{const{x:n,y:r}=pt(t,t.currentTarget,{width:k,height:S});if(n<20||n>v||r<8||r>m){W();return}const d=ft(e.map(f),n);R(d,r)},children:[a.jsx("g",{className:"rp-area-grid",children:lt.map(t=>a.jsx("line",{x1:20,x2:v,y1:t,y2:t,stroke:C["hl-med"],strokeDasharray:"2 4",fill:"none"},t))}),a.jsx("defs",{children:o.map((t,n)=>a.jsx(mt,{id:F+n,color:t.color},t.label))}),o.map((t,n)=>a.jsx(yt,{points:e.map((r,d)=>t.values[d]==null?null:{x:f(r),y:T(t.values[d])}),baseline:T(Math.max(0,K[0])),color:t.color,id:F+n,strokeWidth:2},t.label)),i!==null&&a.jsx("path",{d:`M${f(e[i])},8L${f(e[i])},${m}`,stroke:C.subtle,strokeDasharray:"3 3",fill:"none",pointerEvents:"none"}),a.jsx("g",{children:at.map(({index:t,position:n})=>a.jsx("text",{x:n,y:m+8,className:"rp-area-tick",fill:C.subtle,textAnchor:"middle",children:a.jsx("tspan",{x:n,dy:"0.71em",children:H[t]})},t))}),a.jsx("g",{className:"rp-area-y-ticks",children:V.map(({index:t,position:n})=>a.jsx("text",{x:v+8,y:n,className:"rp-area-tick",fill:C.subtle,textAnchor:"start",children:a.jsx("tspan",{x:v+8,dy:"0.355em",children:s(j[t])})},t))}),i!==null&&o.map(t=>t.values[i]==null?null:a.jsx("circle",{cx:f(e[i]),cy:T(t.values[i]),r:4,fill:t.color,stroke:"#fff",strokeWidth:2},t.label))]})]})})}export{wt as AreaPlot};