6 lines
13 KiB
JavaScript
6 lines
13 KiB
JavaScript
import{f as _,a as b,c as fe}from"../chunks/Bh-96fzJ.js";import{p as xt,j as x,m as T,u as xe,g as e,i as d,d as r,s as o,t as C,e as bt,f as yt,$ as _t,r as s,n as Ie,k as I}from"../chunks/mO2F3zLa.js";import{d as gt,s as g}from"../chunks/eH5yZvH4.js";import{i as w}from"../chunks/tuD4s8Oc.js";import{h as ht,N as wt,F as $t,r as Re,s as R,e as Pt,i as At}from"../chunks/DhvLCtu-.js";import{b as Ne}from"../chunks/Da-hDQCT.js";import{b as ze}from"../chunks/CJrErHKE.js";import{b as be}from"../chunks/DBQEMQMg.js";var Et=_('<meta name="description" content="Explore global development data: GDP, life expectancy, and population trends from 1952-2007."/>'),Ft=_('<div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-4"> </div>'),Ct=_('<span class="text-gray-400">(N/A for trends)</span>'),kt=_("<button> </button>"),jt=_('<div class="mb-4 px-4 py-2 rounded-lg text-sm text-gray-500 bg-gray-100 text-center">Line Trends shows all years</div>'),Tt=_("<option> </option>"),Dt=_('<label for="topn-slider" class="block text-xs font-medium text-gray-600 mb-2">Top N Countries: <span class="text-primary-600 font-bold"> </span></label> <input id="topn-slider" type="range" min="5" max="25" step="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-primary-600"/>',1),Lt=_('<label class="block text-xs font-medium text-gray-600 mb-2">Countries: <span class="text-primary-600 font-bold"> </span></label> <div class="text-xs text-gray-400">All countries displayed</div>',1),Mt=_('<div class="border-t border-gray-200 pt-4 mt-4"><h4 class="text-xs font-semibold text-gray-700 mb-3"> </h4> <div class="space-y-2 text-xs"><div class="flex justify-between"><span class="text-gray-500">Mean:</span> <span class="font-medium"> </span></div> <div class="flex justify-between"><span class="text-gray-500">Median:</span> <span class="font-medium"> </span></div> <div class="flex justify-between"><span class="text-gray-500">Std Dev:</span> <span class="font-medium"> </span></div> <div class="flex justify-between"><span class="text-gray-500">Min:</span> <span class="font-medium"> </span></div> <div class="flex justify-between"><span class="text-gray-500">Max:</span> <span class="font-medium"> </span></div></div></div>'),St=_('<div class="flex items-center justify-center h-96"><div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div></div>'),Bt=_('<div class="w-full h-full"></div>'),Gt=_('<div class="w-full h-full"></div>'),It=_('<div class="w-full h-full"></div>'),Rt=_('<div class="h-[500px]"><!></div>'),Nt=_('<div class="mt-4 pt-4 border-t border-gray-200"><p class="text-xs text-gray-500"> </p></div>'),zt=_('<div class="min-h-screen bg-gradient-to-b from-slate-50 to-white"><!> <main class="pt-20 pb-10 px-5"><div class="max-w-7xl mx-auto"><div class="mb-5 flex items-center justify-between"><div class="flex items-center gap-4"><a href="/tools/" class="text-sm text-primary-600 hover:text-primary-700">← Tools</a> <h1 class="text-2xl font-bold text-gray-900">EDA Gapminder</h1> <span class="text-gray-400 text-sm hidden sm:inline">|</span> <p class="text-gray-500 text-sm hidden sm:inline">Explore global development data (1952-2007)</p></div></div> <!> <div class="grid grid-cols-1 lg:grid-cols-4 gap-4"><div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4"><h3 class="text-sm font-semibold text-gray-700 mb-4">Filters</h3> <div><label class="block text-xs font-medium text-gray-600 mb-2">Year: <span class="text-primary-600 font-bold"> </span> <!></label> <input type="range" min="1952" max="2007" step="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer disabled:cursor-not-allowed accent-primary-600"/> <div class="flex justify-between text-xs text-gray-500 mt-1"><span>1952</span> <span>2007</span></div></div> <!> <div class="mb-4"><label class="block text-xs font-medium text-gray-600 mb-2">Continent</label> <select class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-sm"><option>All Continents</option><!></select></div> <div class="mb-4"><label class="block text-xs font-medium text-gray-600 mb-2">Metric</label> <select class="w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 text-sm"><option>GDP per Capita</option><option>Life Expectancy</option><option>Population</option></select></div> <div class="mb-4"><!></div> <!></div> <div class="lg:col-span-3 bg-white rounded-xl border border-gray-100 shadow-sm p-4"><div class="flex border-b border-gray-200 mb-4"><button>Scatter Plot</button> <button>Bar Chart Race</button> <button>Line Trends</button></div> <!> <!></div></div></div></main> <!></div>');function Qt(Ye,Oe){xt(Oe,!0);const S="https://cockpit.valuecurve.co/api/v1";let J=x(!1),B=x(""),N=x(null),$=x(T([])),k=x(null),y=x(1952),h=x(""),f=x("gdpPercap"),A=x(15),D=x(!1),z=x(null),Y=x(T([])),v=x("scatter"),O,q,U,E=x(null),V=x(!1);xe(()=>{if(typeof window<"u"&&!e(V)){const t=document.createElement("script");t.src="https://cdn.plot.ly/plotly-2.27.0.min.js",t.onload=()=>{d(E,window.Plotly,!0),d(V,!0),qe()},document.head.appendChild(t)}});async function qe(){d(J,!0),d(B,"");try{const t=await fetch(`${S}/eda/metadata`);d(N,await t.json(),!0),d(Y,e(N).years,!0),await K()}catch(t){d(B,t instanceof Error?t.message:"Failed to load data",!0)}finally{d(J,!1)}}async function K(){if(e(E))try{const t=new URLSearchParams;e(y)&&t.append("year",e(y).toString()),e(h)&&t.append("continent",e(h));const i=await(await fetch(`${S}/eda/data?${t}`)).json();d($,i.data,!0);const m=await fetch(`${S}/eda/statistics?column=${e(f)}&group_by=continent&year=${e(y)}`);d(k,await m.json(),!0),setTimeout(()=>{e(v)==="scatter"?ye():e(v)==="barrace"?_e():e(v)==="trends"&&ge()},50)}catch(t){d(B,t instanceof Error?t.message:"Failed to update charts",!0)}}function ye(){if(!O||!e(E)||e($).length===0)return;const t=[...new Set(e($).map(n=>n.continent))],a={Africa:"#636EFA",Americas:"#EF553B",Asia:"#00CC96",Europe:"#AB63FA",Oceania:"#FFA15A"},i=Math.max(...e($).map(n=>n.pop)),m=60,u=t.map(n=>{const l=e($).filter(c=>c.continent===n);return{x:l.map(c=>c.gdpPercap),y:l.map(c=>c.lifeExp),mode:"markers",name:n,text:l.map(c=>`${c.country}<br>Pop: ${(c.pop/1e6).toFixed(1)}M`),marker:{size:l.map(c=>c.pop),sizemode:"area",sizeref:2*i/(m*m),sizemin:4,color:a[n],opacity:.7,line:{width:1,color:"white"}},hovertemplate:"<b>%{text}</b><br>GDP: $%{x:,.0f}<br>Life Exp: %{y:.1f} years<extra></extra>"}}),p={title:`GDP per Capita vs Life Expectancy (${e(y)})`,xaxis:{title:"GDP per Capita (log scale)",type:"log",range:[2.5,5.2]},yaxis:{title:"Life Expectancy (years)",range:[20,90]},showlegend:!0,legend:{x:.02,y:.98},hovermode:"closest",paper_bgcolor:"rgba(0,0,0,0)",plot_bgcolor:"rgba(0,0,0,0)",font:{family:"Inter, system-ui, sans-serif"}};e(E).newPlot(O,u,p,{responsive:!0})}async function _e(){if(!(!q||!e(E)))try{const a=await(await fetch(`${S}/eda/ranking?year=${e(y)}&metric=${e(f)}&top_n=${e(A)}`)).json(),i={Africa:"#636EFA",Americas:"#EF553B",Asia:"#00CC96",Europe:"#AB63FA",Oceania:"#FFA15A"},m={gdpPercap:"GDP per Capita ($)",lifeExp:"Life Expectancy (years)",pop:"Population"},u=a.data.sort((l,c)=>l[e(f)]-c[e(f)]),p={type:"bar",x:u.map(l=>l[e(f)]),y:u.map(l=>l.country),orientation:"h",marker:{color:u.map(l=>i[l.continent])},text:u.map(l=>e(f)==="pop"?`${(l[e(f)]/1e6).toFixed(1)}M`:e(f)==="gdpPercap"?`$${l[e(f)].toFixed(0)}`:l[e(f)].toFixed(1)),textposition:"outside",hovertemplate:"<b>%{y}</b><br>%{x:,.0f}<extra></extra>"},n={title:`Top ${e(A)} Countries by ${m[e(f)]} (${e(y)})`,xaxis:{title:m[e(f)]},yaxis:{automargin:!0},paper_bgcolor:"rgba(0,0,0,0)",plot_bgcolor:"rgba(0,0,0,0)",font:{family:"Inter, system-ui, sans-serif"},margin:{l:150}};e(E).newPlot(q,[p],n,{responsive:!0})}catch(t){console.error("Bar race error:",t)}}async function ge(){if(!(!U||!e(E)))try{const a=await(await fetch(`${S}/eda/timeseries?metric=${e(f)}&top_n=10${e(h)?`&continent=${e(h)}`:""}`)).json(),m=[...new Set(a.data.map(n=>n.country))].map(n=>{const l=a.data.filter(c=>c.country===n).sort((c,L)=>c.year-L.year);return{x:l.map(c=>c.year),y:l.map(c=>c[e(f)]),mode:"lines+markers",name:n,hovertemplate:`<b>${n}</b><br>Year: %{x}<br>Value: %{y:,.0f}<extra></extra>`}}),u={gdpPercap:"GDP per Capita ($)",lifeExp:"Life Expectancy (years)",pop:"Population"},p={title:`${u[e(f)]} Over Time (Top 10)`,xaxis:{title:"Year",dtick:5},yaxis:{title:u[e(f)]},showlegend:!0,legend:{x:1.02,y:1},paper_bgcolor:"rgba(0,0,0,0)",plot_bgcolor:"rgba(0,0,0,0)",font:{family:"Inter, system-ui, sans-serif"}};e(E).newPlot(U,m,p,{responsive:!0})}catch(t){console.error("Trends error:",t)}}function Ue(){if(e(D)){he();return}d(D,!0);let t=e(Y).indexOf(e(y));d(z,setInterval(()=>{t=(t+1)%e(Y).length,d(y,e(Y)[t],!0),K()},1e3),!0)}function he(){d(D,!1),e(z)&&(clearInterval(e(z)),d(z,null))}let we=x(T(e(y))),$e=x(T(e(h))),Pe=x(T(e(f))),Ae=x(T(e(A)));xe(()=>{e(V)&&e($).length>0&&(e(we)!==e(y)||e($e)!==e(h)||e(Pe)!==e(f)||e(Ae)!==e(A))&&(d(we,e(y),!0),d($e,e(h),!0),d(Pe,e(f),!0),d(Ae,e(A),!0),K())});let Ee=x(T(e(v)));xe(()=>{e(V)&&e(v)!==e(Ee)&&(d(Ee,e(v),!0),e(v)==="trends"&&e(D)&&he(),setTimeout(()=>{e(v)==="scatter"?ye():e(v)==="barrace"?_e():e(v)==="trends"&&ge()},100))});var Q=zt();ht("1vulqo1",t=>{var a=Et();yt(()=>{_t.title="EDA Gapminder | Build with AI"}),b(t,a)});var Fe=r(Q);wt(Fe,{});var W=o(Fe,2),Ce=r(W),ke=o(r(Ce),2);{var Ve=t=>{var a=Ft(),i=r(a,!0);s(a),C(()=>g(i,e(B))),b(t,a)};w(ke,t=>{e(B)&&t(Ve)})}var je=o(ke,2),X=r(je),H=o(r(X),2),Z=r(H),ee=o(r(Z)),He=r(ee,!0);s(ee);var Je=o(ee,2);{var Ke=t=>{var a=Ct();b(t,a)};w(Je,t=>{e(v)==="trends"&&t(Ke)})}s(Z);var te=o(Z,2);Re(te),Ie(2),s(H);var Te=o(H,2);{var Qe=t=>{var a=kt();a.__click=Ue;var i=r(a,!0);s(a),C(()=>{R(a,1,`w-full mb-4 px-4 py-2 rounded-lg text-sm font-medium transition-colors
|
|
${e(D)?"bg-red-100 text-red-700 hover:bg-red-200":"bg-primary-100 text-primary-700 hover:bg-primary-200"}`),g(i,e(D)?"Stop Animation":"Play Timeline")}),b(t,a)},We=t=>{var a=jt();b(t,a)};w(Te,t=>{e(v)!=="trends"?t(Qe):t(We,!1)})}var ae=o(Te,2),re=o(r(ae),2),se=r(re);se.value=se.__value="";var Xe=o(se);{var Ze=t=>{var a=fe(),i=I(a);Pt(i,17,()=>e(N).continents,At,(m,u)=>{var p=Tt(),n=r(p,!0);s(p);var l={};C(()=>{g(n,e(u)),l!==(l=e(u))&&(p.value=(p.__value=e(u))??"")}),b(m,p)}),b(t,a)};w(Xe,t=>{e(N)&&t(Ze)})}s(re),s(ae);var oe=o(ae,2),ie=o(r(oe),2),ne=r(ie);ne.value=ne.__value="gdpPercap";var le=o(ne);le.value=le.__value="lifeExp";var De=o(le);De.value=De.__value="pop",s(ie),s(oe);var de=o(oe,2),et=r(de);{var tt=t=>{var a=Dt(),i=I(a),m=o(r(i)),u=r(m,!0);s(m),s(i);var p=o(i,2);Re(p),C(()=>g(u,e(A))),Ne(p,()=>e(A),n=>d(A,n)),b(t,a)},at=t=>{var a=Lt(),i=I(a),m=o(r(i)),u=r(m,!0);s(m),s(i),Ie(2),C(()=>g(u,e($).length||142)),b(t,a)};w(et,t=>{e(v)==="barrace"?t(tt):t(at,!1)})}s(de);var rt=o(de,2);{var st=t=>{var a=Mt(),i=r(a),m=r(i);s(i);var u=o(i,2),p=r(u),n=o(r(p),2),l=r(n,!0);s(n),s(p);var c=o(p,2),L=o(r(c),2),F=r(L,!0);s(L),s(c);var P=o(c,2),M=o(r(P),2),me=r(M,!0);s(M),s(P);var j=o(P,2),G=o(r(j),2),ue=r(G,!0);s(G),s(j);var Be=o(j,2),Ge=o(r(Be),2),ct=r(Ge,!0);s(Ge),s(Be),s(u),s(a),C((pt,vt,mt,ut,ft)=>{g(m,`Statistics (${e(y)??""})`),g(l,pt),g(F,vt),g(me,mt),g(ue,ut),g(ct,ft)},[()=>e(k).mean.toFixed(2),()=>e(k).median.toFixed(2),()=>e(k).std.toFixed(2),()=>e(k).min.toFixed(2),()=>e(k).max.toFixed(2)]),b(t,a)};w(rt,t=>{e(k)&&t(st)})}s(X);var Le=o(X,2),ce=r(Le),pe=r(ce);pe.__click=()=>d(v,"scatter");var ve=o(pe,2);ve.__click=()=>d(v,"barrace");var Me=o(ve,2);Me.__click=()=>d(v,"trends"),s(ce);var Se=o(ce,2);{var ot=t=>{var a=St();b(t,a)},it=t=>{var a=Rt(),i=r(a);{var m=p=>{var n=Bt();be(n,l=>O=l,()=>O),b(p,n)},u=p=>{var n=fe(),l=I(n);{var c=F=>{var P=Gt();be(P,M=>q=M,()=>q),b(F,P)},L=F=>{var P=fe(),M=I(P);{var me=j=>{var G=It();be(G,ue=>U=ue,()=>U),b(j,G)};w(M,j=>{e(v)==="trends"&&j(me)},!0)}b(F,P)};w(l,F=>{e(v)==="barrace"?F(c):F(L,!1)},!0)}b(p,n)};w(i,p=>{e(v)==="scatter"?p(m):p(u,!1)})}s(a),b(t,a)};w(Se,t=>{e(J)?t(ot):t(it,!1)})}var nt=o(Se,2);{var lt=t=>{var a=Nt(),i=r(a),m=r(i);s(i),s(a),C(()=>g(m,`Showing ${e($).length??""} records for ${e(y)??""}
|
|
${e(h)?` in ${e(h)}`:""}`)),b(t,a)};w(nt,t=>{e($).length>0&&t(lt)})}s(Le),s(je),s(Ce),s(W);var dt=o(W,2);$t(dt),s(Q),C(()=>{R(H,1,`mb-4 ${e(v)==="trends"?"opacity-50":""}`),g(He,e(y)),te.disabled=e(v)==="trends",R(pe,1,`px-4 py-2 text-sm font-medium transition-colors
|
|
${e(v)==="scatter"?"text-primary-600 border-b-2 border-primary-600":"text-gray-500 hover:text-gray-700"}`),R(ve,1,`px-4 py-2 text-sm font-medium transition-colors
|
|
${e(v)==="barrace"?"text-primary-600 border-b-2 border-primary-600":"text-gray-500 hover:text-gray-700"}`),R(Me,1,`px-4 py-2 text-sm font-medium transition-colors
|
|
${e(v)==="trends"?"text-primary-600 border-b-2 border-primary-600":"text-gray-500 hover:text-gray-700"}`)}),Ne(te,()=>e(y),t=>d(y,t)),ze(re,()=>e(h),t=>d(h,t)),ze(ie,()=>e(f),t=>d(f,t)),b(Ye,Q),bt()}gt(["click"]);export{Qt as component};
|