https://www.etfinfo.tw/_nuxt/CPJFVBEV.js

1import{u as Z,i as ee,a as te,s as ae}from"./BYEwNOpp.js";import{d as re,s as P,e as f,f as i,t as r,k as e,G as _,F as oe,j as le,n as ie,x as ne,y as T,E,p as d,o as b,L as M,a8 as S,q as se}from"./DgKpLXVQ.js";import{u as ce}from"./Dsuf_pPy.js";import{i as de}from"./CWyYhjw1.js";import{i as pe}from"./DGTaesvg.js";import{i as ue}from"./CtHEUeW5.js";import{i as me}from"./Dgo_4f3N.js";import"./Bxq4J4Xe.js";import"./BZhen3e6.js";import"./CO6kFuwf.js";import"./tRG_pNR0.js";import"./D18g9UJ_.js";const ge={id:"price-trend",class:"card compare-price-card"},he={class:"compare-price-header"},ve={class:"card-sub"},ye=["aria-label"],be=["aria-label"],fe=["aria-selected","onClick"],xe={key:0,class:"trend-summary-grid"},Ae={class:"trend-summary-card is-a"},Be={class:"trend-summary-card is-b"},_e={class:"chart-body"},ke={key:0,class:"chart-placeholder muted"},$e={key:1,class:"chart-placeholder muted"},Ce={key:2,class:"chart-placeholder muted"},Se=re({__name:"ComparePriceTrendChart",props:{codeA:{},codeB:{},nameA:{},nameB:{},locale:{default:"zh-TW"}},async setup(w){let g,k;Z([ee,de,pe,te,ue,me]);const s=w,o=d(()=>s.locale==="en"),W=d(()=>[{key:"1m",label:o.value?"1M":"1 個月"},{key:"3m",label:o.value?"3M":"3 個月"},{key:"6m",label:o.value?"6M":"6 個月"},{key:"ytd",label:o.value?"YTD":"今年"},{key:"3y",label:o.value?"3Y":"3 年"}]),m=T("3m"),p=T("return"),A=ce(),{data:z,pending:q,error:I}=([g,k]=P(()=>E("/api/etf/price",{key:()=>`compare-price-a-${s.codeA}-${m.value}`,query:d(()=>({code:s.codeA,range:m.value})),watch:[()=>s.codeA,m]},"$Aqp2nf6SbF")),g=await g,k(),g),{data:L,pending:O,error:V}=([g,k]=P(()=>E("/api/etf/price",{key:()=>`compare-price-b-${s.codeB}-${m.value}`,query:d(()=>({code:s.codeB,range:m.value})),watch:[()=>s.codeB,m]},"$OmdejvQaI_")),g=await g,k(),g),F=d(()=>z.value?.items??[]),D=d(()=>L.value?.items??[]),j=d(()=>q.value||O.value),G=d(()=>!!(I.value||V.value)),$=d(()=>{const a=new Map(F.value.filter(l=>Number.isFinite(l.price)).map(l=>[l.date,l.price])),t=new Map(D.value.filter(l=>Number.isFinite(l.price)).map(l=>[l.date,l.price])),c=[...a.keys()].filter(l=>t.has(l)).sort(),h=c.length>0?a.get(c[0]):null,B=c.length>0?t.get(c[0]):null;return h==null||B==null||h<=0||B<=0?[]:c.map(l=>{const v=a.get(l),y=t.get(l);return{date:l,priceA:v,priceB:y,returnA:(v/h-1)*100,returnB:(y/B-1)*100}})}),H=d(()=>$.value.length>=2),R=d(()=>F.value.length===1||D.value.length===1?o.value?"Only one shared trading date is available.":"目前只有 1 筆共同交易資料，累積兩個交易日後會顯示走勢。":F.value.length>0||D.value.length>0?o.value?"Not enough shared trading dates. Select a longer period.":"此區間共同交易日不足，請改選較長區間。":o.value?"Not enough price data for this period.":"此區間無足夠股價資料。"),Y=d(()=>$.value.at(-1)??null),Q=d(()=>$.value[0]??null),u=d(()=>{const a=Q.value,t=Y.value;return!a||!t?null:{startDate:a.date,endDate:t.date,a:{price:t.priceA,priceChange:t.priceA-a.priceA,return:t.returnA},b:{price:t.priceB,priceChange:t.priceB-a.priceB,return:t.returnB}}});function J(a){const t=a.split("-");return t.length!==3?a:`${Number(t[1])}/${Number(t[2])}`}function C(a){return a==null||!Number.isFinite(a)?"—":`${a.toFixed(2)} ${o.value?"TWD":"元"}`}function N(a){return a.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#39;")}const K=d(()=>{const a=$.value,t=A.value?"#A3A3A3":"#717171",c=A.value?"#F5F5F5":"#222222",h=A.value?"#383838":"#E5E7EB",B=A.value?"rgba(35,35,35,0.96)":"rgba(255,255,255,0.96)",l=A.value?"#525252":"#DDDDDD",v="#FF385C",y="#428BFF";return{animation:!1,color:[v,y],legend:{top:0,right:0,itemWidth:10,itemHeight:10,textStyle:{color:t,fontSize:12},data:[s.codeA,s.codeB]},tooltip:{trigger:"axis",backgroundColor:B,borderColor:l,textStyle:{color:c},axisPointer:{type:"line",lineStyle:{color:t}},formatter:n=>{const x=a[n[0]?.dataIndex??0];if(!x)return"";const U=N(`${s.codeA} ${s.nameA??""}`.trim()),X=N(`${s.codeB} ${s.nameB??""}`.trim());return`
2          <div style="font-size:12px;color:${t};margin-bottom:6px">${x.date}</div>
3          <div style="display:grid;gap:4px">
4            <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${v};margin-right:6px"></span><strong>${U}</strong> ${S(x.returnA)} ・ ${C(x.priceA)}</div>
5            <div><span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:${y};margin-right:6px"></span><strong>${X}</strong> ${S(x.returnB)} ・ ${C(x.priceB)}</div>
6          </div>`}},grid:{left:48,right:p.value==="price"?48:18,top:34,bottom:28},xAxis:{type:"category",boundaryGap:!1,data:a.map(n=>n.date),axisLabel:{color:t,fontSize:11,formatter:n=>J(n),hideOverlap:!0}

6,axisLine:{lineStyle:{color:h}},axisTick:{show:!1}},yAxis:[{type:"value",scale:!0,axisLabel:{color:p.value==="price"?v:t,fontSize:11,formatter:n=>p.value==="price"?n.toFixed(0):`${n.toFixed(0)}%`},splitLine:{lineStyle:{color:h,type:"dashed"}}},{type:"value",scale:!0,show:p.value==="price",axisLabel:{color:y,fontSize:11,formatter:n=>n.toFixed(0)},splitLine:{show:!1}}],series:[{name:s.codeA,type:"line",yAxisIndex:0,showSymbol:!1,symbolSize:6,lineStyle:{width:2.5,color:v},itemStyle:{color:v},data:a.map(n=>p.value==="price"?n.priceA:n.returnA),markLine:p.value==="return"?{symbol:"none",silent:!0,label:{show:!1},lineStyle:{color:h,type:"dashed",width:1},data:[{yAxis:0}]}:void 0},{name:s.codeB,type:"line",yAxisIndex:p.value==="price"?1:0,showSymbol:!1,symbolSize:6,lineStyle:{width:2.5,color:y},itemStyle:{color:y},data:a.map(n=>p.value==="price"?n.priceB:n.returnB)}]}});return(a,t)=>(b(),f("section",ge,[i("div",he,[i("div",null,[i("h2",null,r(e(o)?"Price and return trend":"最近股價走勢對照"),1),i("p",ve,r(e(o)?"Normalized returns make funds with different unit prices comparable. Switch to price mode to view actual TWD prices.":"預設用期初歸零後的報酬率比較，避免兩檔 ETF 股價不同造成視覺誤判；也可切換查看實際股價。"),1)]),i("div",{class:"mode-tabs",role:"tablist","aria-label":e(o)?"Chart mode":"圖表模式"},[i("button",{type:"button",class:_(["mode-tab",{active:e(p)==="return"}]),onClick:t[0]||(t[0]=c=>p.value="return")},r(e(o)?"Return":"報酬率"),3),i("button",{type:"button",class:_(["mode-tab",{active:e(p)==="price"}]),onClick:t[1]||(t[1]=c=>p.value="price")},r(e(o)?"Price":"股價"),3)],8,ye)]),i("div",{class:"range-buttons",role:"tablist","aria-label":e(o)?"Price period":"股價區間"},[(b(!0),f(oe,null,le(e(W),c=>(b(),f("button",{key:c.key,type:"button",role:"tab","aria-selected":e(m)===c.key,class:_(["range-btn",{active:e(m)===c.key}]),onClick:h=>m.value=c.key},r(c.label),11,fe))),128))],8,be),e(u)?(b(),f("div",xe,[i("article",Ae,[i("span",null,r(w.codeA),1),i("strong",{class:_(e(M)(e(u).a.return))},r(e(S)(e(u).a.return)),3),i("small",null,r(C(e(u).a.price))+"・"+r(e(u).a.priceChange>=0?"+":"")+r(e(u).a.priceChange.toFixed(2))+" "+r(e(o)?"TWD":"元"),1)]),i("article",Be,[i("span",null,r(w.codeB),1),i("strong",{class:_(e(M)(e(u).b.return))},r(e(S)(e(u).b.return)),3),i("small",null,r(C(e(u).b.price))+"・"+r(e(u).b.priceChange>=0?"+":"")+r(e(u).b.priceChange.toFixed(2))+" "+r(e(o)?"TWD":"元"),1)])])):ie("",!0),i("div",_e,[e(j)&&!e(z)&&!e(L)?(b(),f("div",ke,r(e(o)?"Loading…":"載入中…"),1)):e(G)?(b(),f("p",$e,r(e(o)?"Price data is unavailable.":"無法取得股價資料"),1)):e(H)?(b(),ne(e(ae),{key:3,option:e(K),autoresize:"",class:"compare-price-chart"},null,8,["option"])):(b(),f("p",Ce,r(e(R)),1))])]))}}),Ie=se(Se,[["__scopeId","data-v-2eaadced"]]);export{Ie as default};