https://datahub-pro-production.up.railway.app/assets/HeatmapPage-CrK9F27T.js

1import{r as c,J as O,j as t,x as N,H as $,B as U,a1 as J}from"./index-BACUqBz4.js";import{E as X,D as Y}from"./EmptyState-Bfv-WZ-b.js";import{E as _}from"./ExportMenu-D8Z6Rm_7.js";import{O as q}from"./OpenInAskYourData-wBi-dzNc.js";import{P as G}from"./PinToDashboard-DnNSHhVa.js";import{n as Q,d as Z,b as k,p as ee}from"./series-6vDvXsE1.js";import"./EmptyState-CRi2jFBw.js";function le(){const[B,A]=c.useState([]),[w,V]=c.useState(""),[y,z]=c.useState([]),[v,E]=c.useState([]),[p,M]=c.useState(""),[l,W]=c.useState(""),[m,H]=c.useState(""),[x,F]=c.useState("sum"),[a,S]=c.useState(null),C=c.useRef(null);c.useEffect(()=>{O.list().then(e=>A(e.data||[])).catch(()=>{})},[]);function I(e){V(e),S(null),e&&J.preview(e).then(o=>{z(o.data.headers||[]),E(o.data.rows||[])}).catch(()=>{})}function K(){if(!p||!l||!m||!v.length)return;const e={};v.forEach(s=>{const r=String(s[p]??""),i=String(s[l]??""),b=ee(s[m])||0;e[r]||(e[r]={}),e[r][i]||(e[r][i]=[]),e[r][i].push(b)});const o=Object.keys(e).sort().slice(0,20),n=[...new Set(v.map(s=>String(s[l]??"")))].sort().slice(0,15),h={};o.forEach(s=>{h[s]={},n.forEach(r=>{var j;const i=((j=e[s])==null?void 0:j[r])||[];if(!i.length){h[s][r]=null;return}const b=i.reduce((g,T)=>g+T,0);h[s][r]=x==="sum"?b:x==="count"?i.length:x==="mean"?b/i.length:x==="min"?Math.min(...i):Math.max(...i),h[s][r]=parseFloat(h[s][r].toFixed(2))})});const u=o.flatMap(s=>n.map(r=>h[s][r]||0)),d=Math.min(...u),f=Math.max(...u);S({matrix:h,rowKeys:o,colKeys:n,minV:d,maxV:f})}function L(e,o,n){if(e==null)return"#f9fafb";const h=n>o?(e-o)/(n-o):0,u=[[0,[255,255,255]],[.55,[168,85,247]],[1,[249,115,22]]];let d=u[0],f=u[u.length-1];for(let g=1;g<u.length;g++)if(h<=u[g][0]){d=u[g-1],f=u[g];break}const s=f[0]-d[0],r=s===0?0:(h-d[0])/s,i=Math.round(d[1][0]+(f[1][0]-d[1][0])*r),b=Math.round(d[1][1]+(f[1][1]-d[1][1])*r),j=Math.round(d[1][2]+(f[1][2]-d[1][2])*r);return`rgb(${i},${b},${j})`}const D=Q(v,y),P=Z(v,y),R=k(v,P);return t.jsxs(N,{children:[t.jsx($,{title:t.jsx(t.Fragment,{children:t.jsx($.Accent,{children:"Heatmap"})}),description:"Visualize the intensity of values across two categorical dimensions"}),t.jsxs("div",{style:{background:"var(--bg-raised)",borderRadius:12,padding:20,boxShadow:"var(--elev-1)",marginBottom:24},children:[t.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(160px, 1fr))",gap:12,marginBottom:12},children:[["File",t.jsxs("select",{value:w,onChange:e=>I(e.target.value),style:{width:"100%",padding:"9px 12px",border:"1px solid var(--border-default)",borderRadius:8,fontSize:"0.9rem"},children:[t.jsx("option",{value:"",children:"-- Choose --"}),B.map(e=>t.jsx("option",{value:e.id,children:e.filename},e.id))]})],["Row Axis",t.jsxs("select",{value:p,onChange:e=>M(e.target.value),style:{width:"100%",padding:"9px 12px",border:"1px solid var(--border-default)",borderRadius:8,fontSize:"0.9rem"},children:[t.jsx("option",{value:"",children:"-- Column --"}),y.map(e=>t.jsx("option",{value:e,children:e},e))]})],["Column Axis",t.jsxs("select",{value:l,onChange:e=>W(e.target.value),style:{width:"100%",padding:"9px 12px",border:"1px solid var(--border-default)",borderRadius:8,fontSize:"0.9rem"},children:[t.jsx("option",{value:"",children:"-- Column --"}),y.map(e=>t.jsx("option",{value:e,children:e},e))]})],["Value",t.jsxs("select",{value:m,onChange:e=>H(e.target.value),style:{width:"100%",padding:"9px 12px",border:"1px solid var(--border-default)",borderRadius:8,fontSize:"0.9rem"},children:[t.jsx("option",{value:"",children:"-- Numeric --"}),D.map(e=>t.jsx("option",{value:e,children:e},e))]})],["Aggregation",t.jsx("select",{value:x,onChange:e=>F(e.target.value),style:{width:"100%",padding:"9px 12px",border:"1px solid var(--border-default)",borderRadius:8,fontSize:"0.9rem"},children:["sum","mean","count","min","max"].map(e=>t.jsx("option",{value:e,children:e.charAt(0).toUpperCase()+e.slice(1)},e))})]].map(([e,o])=>t.jsxs("div",{children:[t.jsx("div",{style:{fontSize:"0.8rem",fontWeight:600,color:"var(--fg-secondary)",marginBottom:5},children:e}),o]},e))}),t.jsx(U,{onClick:K,disabled:!p||!l||!m,children:"Build Heatmap"})]}),a&&t.jsxs("div",{ref:C,style:{background:"var(--bg-raised)",borderRadius:12,padding:20,boxSh

1adow:"var(--elev-1)",overflowX:"auto"},children:[t.jsxs("div",{style:{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16},children:[t.jsxs("div",{style:{fontWeight:700,color:"var(--fg-primary)"},children:[x.charAt(0).toUpperCase()+x.slice(1)," of ",m," — ",p," × ",l]}),t.jsxs("div",{style:{display:"flex",gap:8},children:[t.jsx(q,{fileId:w,prompt:`In the heatmap of ${x} of ${m} across ${p} × ${l}, where are the hot spots and cold spots? What's likely driving the pattern?`}),t.jsx(G,{widget:{type:"table",col:m,label:`Heatmap: ${p} × ${l}`,file_id:w,extra:{agg:x,rowCol:p,colCol:l}}}),t.jsx(_,{data:a.rowKeys.flatMap(e=>a.colKeys.map(o=>({row:e,col:o,value:a.matrix[e][o]}))),filename:`heatmap-${p}-${l}-${m}`,containerRef:C,title:`Heatmap: ${m} by ${p} × ${l}`})]})]}),R&&t.jsx("div",{style:{fontSize:"0.68rem",color:"var(--fg-tertiary)",fontWeight:600,marginBottom:8},children:R}),t.jsxs("table",{style:{borderCollapse:"collapse",fontSize:"0.8rem"},children:[t.jsx("thead",{children:t.jsxs("tr",{children:[t.jsx("th",{style:{padding:"8px 12px",textAlign:"left",fontWeight:600,color:"var(--fg-secondary)",borderBottom:"2px solid #e5e7eb"}}),a.colKeys.map(e=>t.jsx("th",{style:{padding:"8px 8px",textAlign:"center",fontWeight:600,color:"var(--fg-secondary)",borderBottom:"2px solid #e5e7eb",minWidth:70},children:e.length>10?e.slice(0,10)+"…":e},e))]})}),t.jsx("tbody",{children:a.rowKeys.map(e=>t.jsxs("tr",{children:[t.jsx("td",{style:{padding:"6px 12px",fontWeight:600,color:"var(--fg-secondary)",borderBottom:"1px solid var(--border-subtle)",whiteSpace:"nowrap"},children:e.length>15?e.slice(0,15)+"…":e}),a.colKeys.map(o=>{const n=a.matrix[e][o];return t.jsx("td",{style:{padding:3,borderBottom:"1px solid var(--border-subtle)"},children:t.jsx("div",{style:{width:66,height:38,background:L(n,a.minV,a.maxV),borderRadius:4,display:"flex",alignItems:"center",justifyContent:"center",fontSize:"0.75rem",fontWeight:600,color:n!=null&&(a.maxV>a.minV?(n-a.minV)/(a.maxV-a.minV):0)>.5?"#fff":"#374151"},children:n!=null?n.toLocaleString():"—"})},o)})]},e))})]}),t.jsxs("div",{style:{marginTop:12,display:"flex",alignItems:"center",gap:12,fontSize:"0.8rem",color:"var(--fg-tertiary)"},children:[t.jsxs("span",{children:["Low: ",a.minV.toLocaleString()]}),t.jsx("div",{style:{flex:1,maxWidth:240,height:10,borderRadius:4,background:"linear-gradient(to right, #ffffff 0%, #a855f7 55%, #f97316 100%)",border:"1px solid var(--border-subtle)"}}),t.jsxs("span",{children:["High: ",a.maxV.toLocaleString()]})]})]}),!a&&t.jsx(X,{icon:"🌡️",title:"Pick row, column, and value axes",body:"The heatmap shades each cell by intensity from low to high — useful for spotting concentrations across two categorical dimensions.",teaser:t.jsx(Y,{variant:"bar",accent:"#a85

15f7"})})]})}export{le as default};