https://singularity2000-metapi.hf.space/assets/SiteTrendChart-DhHn6YwF.js

1import{j as t}from"./index-CZrt0PfL.js";import{b as y,V as b}from"./vchart-vendor-BG0XOKAT.js";const g=[{key:"spend",label:"消耗趋势"},{key:"calls",label:"调用趋势"}],h=["#4f46e5","#06b6d4","#10b981","#f59e0b","#ef4444","#8b5cf6","#ec4899","#14b8a6"];function S({data:r,loading:l}){const[i,a]=y.useState("spend"),c=y.useMemo(()=>!r||r.length===0?[]:r.flatMap(e=>Object.entries(e.sites).map(([s,d])=>({date:e.date,site:s,value:i==="spend"?d.spend:d.calls}))),[r,i]);if(l)return t.jsxs("div",{style:n,children:[t.jsx("div",{style:o,children:t.jsx("div",{className:"skeleton",style:{width:200,height:32,borderRadius:"var(--radius-sm)"}})}),t.jsx("div",{className:"skeleton",style:{width:"100%",height:300,borderRadius:"var(--radius-sm)"}})]});if(!r||r.length===0||c.length===0)return t.jsxs("div",{style:n,children:[t.jsx("div",{style:o,children:t.jsx(p,{metric:i,onChange:a})}),t.jsxs("div",{className:"empty-state",style:{padding:48},children:[t.jsx("div",{className:"empty-state-title",children:"暂无趋势数据"}),t.jsx("div",{className:"empty-state-desc",children:"数据加载后将自动展示趋势图表"})]})]});const v={type:"line",data:[{id:"data",values:c}],xField:"date",yField:"value",seriesField:"site",point:{visible:!0,style:{size:6}},line:{style:{lineWidth:2,curveType:"monotone"}},legends:{visible:!0,orient:"bottom",padding:{top:12},item:{shape:{style:{symbolType:"circle"}},label:{style:{fontSize:12}}}},tooltip:{mark:{title:{value:e=>(e==null?void 0:e.date)??""},content:[{key:e=>(e==null?void 0:e.site)??"",value:e=>{const s=Number((e==null?void 0:e.value)??0);return i==="spend"?`$${s.toFixed(4)}`:String(s)}}]},dimension:{title:{value:e=>(e==null?void 0:e.date)??""},content:[{key:e=>(e==null?void 0:e.site)??"",value:e=>{const s=Number((e==null?void 0:e.value)??0);return i==="spend"?`$${s.toFixed(4)}`:String(s)}}]}},animation:!0,animationAppear:{line:{type:"clipIn",duration:800,easing:"cubicOut"},point:{type:"fadeIn",duration:600,delay:400,easing:"cubicOut"}},axes:[{orient:"bottom",label:{style:{fontSize:11,fill:"var(--color-text-muted)"}},domainLine:{style:{stroke:"var(--color-border-light)"}},tick:{style:{stroke:"var(--color-border-light)"}}},{orient:"left",label:{style:{fontSize:11,fill:"var(--color-text-muted)"}},grid:{style:{stroke:"var(--color-border-light)",lineDash:[4,4]}},domainLine:{visible:!1}}],color:h,background:"transparent",padding:{left:8,right:16,top:8,bottom:8}};return t.jsxs("div",{style:n,children:[t.jsx("div",{style:o,children:t.jsx(p,{metric:i,onChange:a})}),t.jsx("div",{style:{width:"100%",height:320},children:t.jsx(b,{spec:v,style:{width:"100%",height:"100%"}})})]})}function p({metric:r,onChange:l}){return t.jsx("div",{style:f,children:g.map(i=>t.jsx("button",{onClick:()=>l(i.key),style:{...x,...r===i.key?u:j},children:i.label},i.key))})}const n={background:"var(--color-bg-card)",borderRadius:"var(--radius-md)",border:"1px solid var(--color-border-light)",boxShadow:"var(--shadow-card)",padding:20},o={display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:16},f={display:"inline-flex",gap:0,borderRadius:"var(--radius-sm)",border:"1px solid var(--color-border)",overflow:"hidden"},x={padding:"6px 16px",fontSize:13,fontWeight:500,cursor:"pointer",border:"none",transition:"all 0.2s ease",fontFamily:"inherit"},u={background:"var(--color-primary)",color:"#ffffff"},j={background:"var(--color-bg-card)",color:"var(--color-text-secondary)"};export{S as default};