@koendhoore/directus-extension-umami-analytics 1.0.3 → 2.0.0

package/dist/api.js

@@ -1 +1 @@
-import t from"node:crypto";const e=new Map;let r=null;function n(t,e){const r=t[e];if(!r)throw new Error(`Missing ${e}`);return r.replace(/\/+$/,"")}function a(t){return n(t,"UMAMI_URL").replace(/\/api\/?$/,"")}function s(t,e){const r=e.replace(/^\/api\/?/,"").replace(/^\/+/,"");return`${a(t)}/api/${r}`}function o(t,e){const r=Number(t);return Number.isFinite(r)?r:e}function i(t){return Buffer.from(t).toString("base64").replace(/=/g,"").replace(/\+/g,"-").replace(/\//g,"_")}function c(e,r){return function(e,r){const n=t.randomBytes(16),a=t.randomBytes(64),s=t.pbkdf2Sync(r,a,1e4,32,"sha512"),o=t.createCipheriv("aes-256-gcm",s,n),i=Buffer.concat([o.update(String(e),"utf8"),o.final()]),c=o.getAuthTag();return Buffer.concat([a,n,c,i]).toString("base64")}(function(e,r){const n=`${i(JSON.stringify({alg:"HS256",typ:"JWT"}))}.${i(JSON.stringify(e))}`;return`${n}.${i(t.createHmac("sha256",r).update(n).digest())}`}(e,r),r)}function u(e){const r=e.UMAMI_USER_ID||e.UMAMI_API_CLIENT_USER_ID,n=e.UMAMI_APP_SECRET||e.UMAMI_API_CLIENT_SECRET;if(!r||!n)return null;return{headers:{Authorization:`Bearer ${c({userId:r},function(...e){return t.createHash("sha512").update(e.join("")).digest("hex")}(n))}`}}}async function f(t){const e=t.UMAMI_API_KEY;if(e)return{headers:{"x-umami-api-key":e}};const a=t.UMAMI_TOKEN;if(a)return{headers:{Authorization:`Bearer ${a}`}};const o=u(t);return o||async function(t){if(r&&r.expires>Date.now())return r.auth;const e=n(t,"UMAMI_USERNAME"),a=n(t,"UMAMI_PASSWORD"),o=await fetch(s(t,"/auth/login"),{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({username:e,password:a})}),i=await o.text();if(!o.ok)throw new Error(`Umami login failed: ${o.status} ${i}`);let c=null;try{c=i?JSON.parse(i):null}catch{}const u=c?.token||c?.accessToken||c?.data?.token||c?.data?.accessToken,f=o.headers.get("set-cookie")||"",d=u?{headers:{Authorization:`Bearer ${u}`}}:{headers:f?{Cookie:f.split(";")[0]}:{}};return r={expires:Date.now()+33e5,auth:d},d}(t)}async function d(t,e){const r=await f(t),n=await fetch(s(t,e),{headers:{Accept:"application/json",...r.headers}}),a=await n.text();if(!n.ok)throw new Error(`Umami request failed: ${n.status} ${a}`);return a?JSON.parse(a):null}function h(t,e,r,n,a=10){return`/websites/${t}/metrics?${new URLSearchParams({startAt:String(Math.round(r)),endAt:String(Math.round(n)),type:e,limit:String(a)}).toString()}`}async function p(t,e,r=[]){try{return await d(t,e)}catch(t){return{error:t.message||"Unknown Umami error",path:e,fallback:r}}}const m=[],l=[{name:"umami-analytics",config:(t,r)=>{const n=r.env||process.env;t.get("/health",(t,e)=>{e.json({ok:!0,service:"umami-analytics"})}),t.get("/debug",async(t,e)=>{try{const t=n.UMAMI_API_KEY?"api-key":n.UMAMI_TOKEN?"bearer-token":n.UMAMI_USER_ID||n.UMAMI_API_CLIENT_USER_ID?"api-client":"username-password",r=await d(n,"/me").catch(t=>({error:t.message}));e.json({ok:!0,authMode:t,umamiUrl:a(n),websiteId:n.UMAMI_WEBSITE_ID,me:r})}catch(t){e.status(500).json({error:t.message||"Unknown error"})}}),t.get("/summary",async(t,r)=>{try{const a=String(t.query.websiteId||n.UMAMI_WEBSITE_ID||"");if(!a)return r.status(400).json({error:"Missing websiteId or UMAMI_WEBSITE_ID"});const{startAt:s,endAt:i,days:c}=function(t){const e=Date.now(),r=Math.max(1,Math.min(365,o(t.days,30))),n=o(t.endAt,e);return{startAt:o(t.startAt,n-24*r*60*60*1e3),endAt:n,days:r}}(t.query),u=`summary:${a}:${s}:${i}:v3`,f=function(t){const r=e.get(t);return!r||r.expires<Date.now()?null:r.value}(u);if(f)return r.json(f);const m=new URLSearchParams({startAt:String(Math.round(s)),endAt:String(Math.round(i))}),l=await d(n,`/websites/${a}/stats?${m.toString()}`),[M,A,g]=await Promise.all([p(n,h(a,"path",s,i,10),[]),p(n,h(a,"referrer",s,i,10),[]),p(n,h(a,"event",s,i,10),[])]),I={websiteId:a,range:{startAt:s,endAt:i,days:c},stats:l,pages:M,referrers:A,events:g};!function(t,r,n=3e5){e.set(t,{expires:Date.now()+n,value:r})}(u,I),r.json(I)}catch(t){r.status(500).json({error:t.message||"Unknown error"})}})}}],M=[];export{l as endpoints,m as hooks,M as operations};
+import t from"node:crypto";const e=new Map;let r=null;function n(t,e){const r=t[e];if(!r)throw new Error(`Missing ${e}`);return r.replace(/\/+$/,"")}function a(t,e){const r=e.replace(/^\/api\/?/,"").replace(/^\/+/,"");return`${function(t){return n(t,"UMAMI_URL").replace(/\/api\/?$/,"")}(t)}/api/${r}`}function s(t,e){const r=Number(t);return Number.isFinite(r)?r:e}function i(t){return Buffer.from(t).toString("base64").replace(/=/g,"").replace(/\+/g,"-").replace(/\//g,"_")}function o(e,r){return function(e,r){const n=t.randomBytes(16),a=t.randomBytes(64),s=t.pbkdf2Sync(r,a,1e4,32,"sha512"),i=t.createCipheriv("aes-256-gcm",s,n),o=Buffer.concat([i.update(String(e),"utf8"),i.final()]),u=i.getAuthTag();return Buffer.concat([a,n,u,o]).toString("base64")}(function(e,r){const n=`${i(JSON.stringify({alg:"HS256",typ:"JWT"}))}.${i(JSON.stringify(e))}`;return`${n}.${i(t.createHmac("sha256",r).update(n).digest())}`}(e,r),r)}function u(e){const r=e.UMAMI_USER_ID||e.UMAMI_API_CLIENT_USER_ID,n=e.UMAMI_APP_SECRET||e.UMAMI_API_CLIENT_SECRET;if(!r||!n)return null;return{headers:{Authorization:`Bearer ${o({userId:r},function(...e){return t.createHash("sha512").update(e.join("")).digest("hex")}(n))}`}}}async function c(t){const e=t.UMAMI_API_KEY;if(e)return{headers:{"x-umami-api-key":e}};const s=t.UMAMI_TOKEN;if(s)return{headers:{Authorization:`Bearer ${s}`}};const i=u(t);return i||async function(t){if(r&&r.expires>Date.now())return r.auth;const e=n(t,"UMAMI_USERNAME"),s=n(t,"UMAMI_PASSWORD"),i=await fetch(a(t,"/auth/login"),{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({username:e,password:s})}),o=await i.text();if(!i.ok)throw new Error(`Umami login failed: ${i.status} ${o}`);let u=null;try{u=o?JSON.parse(o):null}catch{}const c=u?.token||u?.accessToken||u?.data?.token||u?.data?.accessToken,d=i.headers.get("set-cookie")||"",f=c?{headers:{Authorization:`Bearer ${c}`}}:{headers:d?{Cookie:d.split(";")[0]}:{}};return r={expires:Date.now()+33e5,auth:f},f}(t)}async function d(t,e){const r=await c(t),n=await fetch(a(t,e),{headers:{Accept:"application/json",...r.headers}}),s=await n.text();if(!n.ok)throw new Error(`Umami request failed: ${n.status} ${s}`);return s?JSON.parse(s):null}async function f(t,e,r=[]){try{return await d(t,e)}catch(t){return r}}function p(t,e,r,n,a=10){return`/websites/${t}/metrics?${new URLSearchParams({startAt:String(Math.round(r)),endAt:String(Math.round(n)),type:e,limit:String(a)}).toString()}`}function h(t,e,r,n){return`/websites/${t}/pageviews?${new URLSearchParams({startAt:String(Math.round(e)),endAt:String(Math.round(r)),unit:n}).toString()}`}const g=[],l=[{name:"umami-analytics",config:(t,r)=>{const n=r.env||process.env;t.get("/health",(t,e)=>{e.json({ok:!0,service:"umami-analytics",version:"2.0.0"})}),t.get("/summary",async(t,r)=>{try{const a=String(t.query.websiteId||n.UMAMI_WEBSITE_ID||"");if(!a)return r.status(400).json({error:"Missing websiteId or UMAMI_WEBSITE_ID"});const{startAt:i,endAt:o,days:u,preset:c}=function(t){const e=Date.now(),r=String(t.preset||t.range||"").toLowerCase();if("today"===r){const t=new Date;return t.setHours(0,0,0,0),{startAt:t.getTime(),endAt:e,days:1,preset:r}}const n=Math.max(1,Math.min(365,s(t.days,{"7d":7,last7:7,last_7_days:7,"30d":30,last30:30,last_30_days:30,"90d":90,last90:90,last_90_days:90}[r]||30))),a=s(t.endAt,e);return{startAt:s(t.startAt,a-24*n*60*60*1e3),endAt:a,days:n,preset:r||`${n}d`}}(t.query),g=String(t.query.unit||function(t){return t<=2?"hour":t<=90?"day":"month"}(u)),l=`summary:v2:${a}:${i}:${o}:${g}`,A=function(t){const r=e.get(t);return!r||r.expires<Date.now()?null:r.value}(l);if(A)return r.json(A);const w=new URLSearchParams({startAt:String(Math.round(i)),endAt:String(Math.round(o))}),y=await d(n,`/websites/${a}/stats?${w.toString()}`),[m,S,M,_,$,I,U,E]=await Promise.all([f(n,h(a,i,o,g),{pageviews:[],sessions:[]}),f(n,p(a,"path",i,o,12),[]),f(n,p(a,"referrer",i,o,12),[]),f(n,p(a,"country",i,o,12),[]),f(n,p(a,"browser",i,o,12),[]),f(n,p(a,"os",i,o,12),[]),f(n,p(a,"device",i,o,12),[]),f(n,p(a,"event",i,o,12),[])]),v={websiteId:a,range:{startAt:i,endAt:o,days:u,preset:c,unit:g},stats:y,pageviews:m,pages:S,referrers:M,countries:_,browsers:$,os:I,devices:U,events:E};!function(t,r,n=3e5){e.set(t,{expires:Date.now()+n,value:r})}(l,v),r.json(v)}catch(t){r.status(500).json({error:t.message||"Unknown error"})}})}}],A=[];export{l as endpoints,g as hooks,A as operations};

package/dist/app.js

@@ -1 +1 @@
-import{definePanel as e}from"@directus/extensions-sdk";import{defineComponent as n,ref as t,computed as a,onMounted as s,watch as r,openBlock as l,createElementBlock as i,toDisplayString as o,Fragment as d,createElementVNode as u,renderList as c}from"vue";const p={class:"umami-panel"},m={key:0,class:"state"},v={key:1,class:"state error"},f={class:"cards"},g={class:"card"},y={class:"card"},b={class:"card"},h={class:"card"},x={class:"grid"};var w=n({__name:"panel",props:{websiteId:{},days:{}},setup(e){const n=e,w=t(!0),k=t(""),I=t(null),_=a(()=>n.days||30);function A(e){return null==e?0:"number"==typeof e?e:"number"==typeof e.value?e.value:Number(e.value||e.count||e.y||0)}function E(e){const n=A(I.value?.stats?.[e]);return(new Intl.NumberFormat).format(n)}function S(e){const n=A(I.value?.stats?.[e]);return n?Math.round(100*n)/100+"%":"0%"}const D=a(()=>I.value?.pages||[]),L=a(()=>I.value?.referrers||[]),T=a(()=>I.value?.events||[]);async function j(){w.value=!0,k.value="";const e=new URLSearchParams({days:String(_.value)});n.websiteId&&e.set("websiteId",n.websiteId);try{const n=await fetch(`/umami-analytics/summary?${e.toString()}`,{credentials:"include",headers:{Accept:"application/json"}}),t=await n.json();if(!n.ok)throw new Error(t?.error||`Request failed: ${n.status}`);I.value=t}catch(e){k.value=e?.message||"Could not load analytics."}finally{w.value=!1}}return s(j),r(()=>[n.websiteId,n.days],j),(e,n)=>(l(),i("div",p,[w.value?(l(),i("div",m,"Loading analytics...")):k.value?(l(),i("div",v,o(k.value),1)):(l(),i(d,{key:2},[u("div",f,[u("div",g,[n[0]||(n[0]=u("span",null,"Visitors",-1)),u("strong",null,o(E("visitors")),1)]),u("div",y,[n[1]||(n[1]=u("span",null,"Pageviews",-1)),u("strong",null,o(E("pageviews")),1)]),u("div",b,[n[2]||(n[2]=u("span",null,"Visits",-1)),u("strong",null,o(E("visits")),1)]),u("div",h,[n[3]||(n[3]=u("span",null,"Bounce rate",-1)),u("strong",null,o(S("bounces")),1)])]),u("div",x,[u("section",null,[n[4]||(n[4]=u("h3",null,"Top pages",-1)),u("ul",null,[(l(!0),i(d,null,c(D.value,e=>(l(),i("li",{key:e.x||e.name},[u("span",null,o(e.x||e.name||"(unknown)"),1),u("b",null,o(e.y||e.value||e.count),1)]))),128))])]),u("section",null,[n[5]||(n[5]=u("h3",null,"Referrers",-1)),u("ul",null,[(l(!0),i(d,null,c(L.value,e=>(l(),i("li",{key:e.x||e.name},[u("span",null,o(e.x||e.name||"Direct"),1),u("b",null,o(e.y||e.value||e.count),1)]))),128))])]),u("section",null,[n[6]||(n[6]=u("h3",null,"Events",-1)),u("ul",null,[(l(!0),i(d,null,c(T.value,e=>(l(),i("li",{key:e.x||e.name},[u("span",null,o(e.x||e.name||"(event)"),1),u("b",null,o(e.y||e.value||e.count),1)]))),128))])])])],64))]))}}),k=[],I=[];!function(e,n){if(e&&"undefined"!=typeof document){var t,a=!0===n.prepend?"prepend":"append",s=!0===n.singleTag,r="string"==typeof n.container?document.querySelector(n.container):document.getElementsByTagName("head")[0];if(s){var l=k.indexOf(r);-1===l&&(l=k.push(r)-1,I[l]={}),t=I[l]&&I[l][a]?I[l][a]:I[l][a]=i()}else t=i();65279===e.charCodeAt(0)&&(e=e.substring(1)),t.styleSheet?t.styleSheet.cssText+=e:t.appendChild(document.createTextNode(e))}function i(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),n.attributes)for(var t=Object.keys(n.attributes),s=0;s<t.length;s++)e.setAttribute(t[s],n.attributes[t[s]]);var l="prepend"===a?"afterbegin":"beforeend";return r.insertAdjacentElement(l,e),e}}("\n.umami-panel[data-v-062f2277] {\n  padding: 16px;\n  height: 100%;\n  overflow: auto;\n}\n.state[data-v-062f2277] {\n  padding: 16px;\n  color: var(--theme--foreground-subdued);\n}\n.error[data-v-062f2277] {\n  color: var(--theme--danger);\n}\n.cards[data-v-062f2277] {\n  display: grid;\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 12px;\n  margin-bottom: 18px;\n}\n.card[data-v-062f2277] {\n  border: var(--theme--border-width) solid var(--theme--border-color);\n  border-radius: var(--theme--border-radius);\n  padding: 14px;\n  background: var(--theme--background-normal);\n}\n.card span[data-v-062f2277] {\n  display: block;\n  color: var(--theme--foreground-subdued);\n  font-size: 12px;\n  margin-bottom: 6px;\n}\n.card strong[data-v-062f2277] {\n  font-size: 24px;\n  line-height: 1;\n}\n.grid[data-v-062f2277] {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: 18px;\n}\nh3[data-v-062f2277] {\n  margin: 0 0 8px;\n  font-size: 14px;\n}\nul[data-v-062f2277] {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\nli[data-v-062f2277] {\n  display: flex;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 7px 0;\n  border-bottom: 1px solid var(--theme--border-color-subdued);\n}\nli span[data-v-062f2277] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\nli b[data-v-062f2277] {\n  flex: 0 0 auto;\n}\n@media (max-width: 900px) {\n.cards[data-v-062f2277],\n  .grid[data-v-062f2277] {\n    grid-template-columns: 1fr;\n}\n}\n",{});const _=[],A=[],E=[],S=[],D=[e({id:"umami-analytics-panel",name:"Umami Analytics",icon:"monitoring",description:"Native Directus panel for Umami visitors, pageviews, top pages, referrers, and events.",component:((e,n)=>{const t=e.__vccOpts||e;for(const[e,a]of n)t[e]=a;return t})(w,[["__scopeId","data-v-062f2277"]]),options:[{field:"websiteId",name:"Umami Website ID",type:"string",meta:{width:"full",interface:"input",note:"Optional. Leave empty to use UMAMI_WEBSITE_ID from the Directus environment."}},{field:"days",name:"Date Range",type:"integer",schema:{default_value:30},meta:{width:"half",interface:"select-dropdown",options:{choices:[{text:"Last 7 days",value:7},{text:"Last 30 days",value:30},{text:"Last 90 days",value:90}]}}}],minWidth:18,minHeight:12})],L=[],T=[];export{A as displays,_ as interfaces,E as layouts,S as modules,T as operations,D as panels,L as themes};
+import{definePanel as a}from"@directus/extensions-sdk";import{defineComponent as e,ref as n,computed as t,h as r,onMounted as i,watch as s,openBlock as l,createElementBlock as o,createElementVNode as d,Fragment as c,renderList as u,normalizeClass as f,toDisplayString as p,createTextVNode as v,createVNode as b,unref as m}from"vue";const h={class:"umami-panel"},g={class:"panel-scroll"},y={class:"topbar"},x={class:"controls"},w=["onClick"],k=["disabled"],A={key:0,class:"state"},N={key:1,class:"state error"},L={class:"kpis"},$={class:"chart-card"},I={class:"section-head"},j={class:"chart-wrap"},z={key:0,viewBox:"0 0 700 260",preserveAspectRatio:"none",role:"img"},M=["y1","y2"],S=["d"],T=["d"],_=["d"],C=["cx","cy"],D={key:1,class:"empty-chart"},E={class:"lists"};var R=e({__name:"panel",props:{websiteId:{},days:{}},setup(a){const R=a,B=[{label:"Today",value:"today",days:1},{label:"7d",value:"7d",days:7},{label:"30d",value:"30d",days:30},{label:"90d",value:"90d",days:90},{label:"All",value:"365d",days:365}],U=n(R.days?`${R.days}d`:"30d"),V=n(!0),Y=n(""),q=n(null),O=t(()=>B.find(a=>a.value===U.value)||B[2]),W=t(()=>"All"===O.value.label?"Last 365 days":"Today"===O.value.label?"Today":`Last ${O.value.days} days`);function P(a){return null==a?0:"number"==typeof a?a:"number"==typeof a.value?a.value:Number(a.value||a.count||a.y||0)}function F(a){return(new Intl.NumberFormat).format(Math.round(Number(a||0)))}function H(a){return F(P(q.value?.stats?.[a]))}function Z(a){const e=P(q.value?.stats?.[a]);return e?Math.round(10*e)/10+"%":"0%"}const G=t(()=>[{label:"Visitors",value:H("visitors")},{label:"Visits",value:H("visits")},{label:"Pageviews",value:H("pageviews")},{label:"Bounce rate",value:Z("bounces")},{label:"Visit duration",value:`${F(P(q.value?.stats?.totaltime))}s`}]);function J(a){return Array.isArray(a)?a.filter(a=>!a?.error):[]}const K=t(()=>J(q.value?.pages)),Q=t(()=>J(q.value?.referrers)),X=t(()=>J(q.value?.countries)),aa=t(()=>J(q.value?.devices)),ea=t(()=>J(q.value?.browsers)),na=t(()=>J(q.value?.events));function ta(a){return a?.x||a?.date||a?.t||a?.createdAt||a?.day||""}function ra(a){return Number(a?.y||a?.pageviews||a?.views||a?.value||a?.count||0)}function ia(a){return Number(a?.visitors||a?.sessions||a?.uniques||a?.users||ra(a))}const sa=t(()=>{const a=q.value?.pageviews;var e;return(Array.isArray(a?.pageviews)?a.pageviews.map((e,n)=>({date:ta(e),pageviews:ra(e),visitors:ia(a.sessions?.[n]||e)})):(e=a,Array.isArray(e)?e:Array.isArray(e?.pageviews)?e.pageviews:Array.isArray(e?.views)?e.views:Array.isArray(e?.data)?e.data:[]).map(a=>({date:ta(a),pageviews:ra(a),visitors:ia(a)}))).filter(a=>a.pageviews||a.visitors)}),la=t(()=>{const a=sa.value,e=220,n=Math.max(...a.map(a=>Math.max(a.pageviews,a.visitors)),1);return a.map((t,r)=>{const i=1===a.length?350:r/(a.length-1)*700,s=238-t.pageviews/n*e,l=238-t.visitors/n*e;return{...t,index:r,x:i,pageviewsY:s,visitorsY:l}})}),oa=[40,95,150,205];function da(a){const e=la.value;if(!e.length)return"";const n="pageviews"===a?"pageviewsY":"visitorsY";return e.map((a,e)=>`${0===e?"M":"L"} ${a.x} ${a[n]}`).join(" ")}function ca(a){const e=la.value;if(!e.length)return"";const n=da(a),t=e[e.length-1],r=e[0];return`${n} L ${t.x} 240 L ${r.x} 240 Z`}async function ua(){V.value=!0,Y.value="";const a=new URLSearchParams,e=O.value;"today"===e.value?a.set("preset","today"):a.set("days",String(e.days)),R.websiteId&&a.set("websiteId",R.websiteId);try{const e=await fetch(`/umami-analytics/summary?${a.toString()}`,{credentials:"include",headers:{Accept:"application/json"}}),n=await e.json();if(!e.ok)throw new Error(n?.error||`Request failed: ${e.status}`);q.value=n}catch(a){Y.value=a?.message||"Could not load analytics."}finally{V.value=!1}}const fa=e({name:"MetricList",props:{title:{type:String,required:!0},rows:{type:Array,default:()=>[]},empty:{type:String,default:"No data yet."},fallbackLabel:{type:String,default:"(unknown)"}},setup(a){function e(e){return String(e?.x||e?.name||e?.title||e?.label||a.fallbackLabel)}function n(a){return Number(a?.y||a?.value||a?.count||0)}function t(a){return(new Intl.NumberFormat).format(n(a))}function i(e){const t=Math.max(...a.rows.map(n),1);return`${Math.max(5,Math.round(n(e)/t*100))}%`}return()=>r("article",{class:"metric-card"},[r("header",[r("h3",a.title)]),a.rows.length?r("ul",a.rows.map(a=>r("li",{key:e(a)},[r("span",{class:"metric-label",title:e(a)},e(a)),r("span",{class:"metric-bar","aria-hidden":"true"},[r("span",{style:{width:i(a)}})]),r("b",t(a))]))):r("p",{class:"empty"},a.empty)])}});return i(ua),s(()=>[R.websiteId,R.days],()=>{R.days&&(U.value=`${R.days}d`),ua()}),(a,e)=>(l(),o("div",h,[d("div",g,[d("header",y,[e[0]||(e[0]=d("div",{class:"heading"},[d("p",null,"Analytics"),d("h2",null,"Website performance")],-1)),d("div",x,[(l(),o(c,null,u(B,a=>d("button",{key:a.value,type:"button",class:f({active:U.value===a.value}),onClick:e=>{return n=a.value,U.value=n,void ua();var n}},p(a.label),11,w)),64)),d("button",{class:"refresh",type:"button",disabled:V.value,onClick:ua},p(V.value?"Loading":"Refresh"),9,k)])]),V.value&&!q.value?(l(),o("div",A," Loading analytics... ")):Y.value?(l(),o("div",N,[e[1]||(e[1]=d("strong",null,"Could not load analytics",-1)),d("span",null,p(Y.value),1)])):(l(),o(c,{key:2},[d("section",L,[(l(!0),o(c,null,u(G.value,a=>(l(),o("article",{key:a.label,class:"kpi"},[d("span",null,p(a.label),1),d("strong",null,p(a.value),1)]))),128))]),d("section",$,[d("div",I,[d("div",null,[e[2]||(e[2]=d("h3",null,"Visitors & pageviews",-1)),d("p",null,p(W.value),1)]),e[3]||(e[3]=d("div",{class:"legend"},[d("span",null,[d("i",{class:"dot visitors"}),v("Visitors")]),d("span",null,[d("i",{class:"dot views"}),v("Pageviews")])],-1))]),d("div",j,[la.value.length>1?(l(),o("svg",z,[(l(),o(c,null,u(oa,a=>d("line",{key:a,x1:"0",x2:"700",y1:a,y2:a,class:"grid-line"},null,8,M)),64)),d("path",{d:ca("pageviews"),class:"area views-area"},null,8,S),d("path",{d:da("pageviews"),class:"line views-line"},null,8,T),d("path",{d:da("visitors"),class:"line visitors-line"},null,8,_),(l(!0),o(c,null,u(la.value,a=>(l(),o("circle",{key:`v-${a.index}`,cx:a.x,cy:a.visitorsY,r:"2.6",class:"circle visitors-circle"},null,8,C))),128))])):(l(),o("div",D,"Not enough chart data yet."))])]),d("section",E,[b(m(fa),{title:"Top pages",rows:K.value,empty:"No page data yet."},null,8,["rows"]),b(m(fa),{title:"Referrers",rows:Q.value,empty:"No referrer data yet.","fallback-label":"Direct"},null,8,["rows"]),b(m(fa),{title:"Countries",rows:X.value,empty:"No country data yet."},null,8,["rows"]),b(m(fa),{title:"Devices",rows:aa.value,empty:"No device data yet."},null,8,["rows"]),b(m(fa),{title:"Browsers",rows:ea.value,empty:"No browser data yet."},null,8,["rows"]),b(m(fa),{title:"Events",rows:na.value,empty:"No events yet."},null,8,["rows"])])],64))])]))}}),B=[],U=[];!function(a,e){if(a&&"undefined"!=typeof document){var n,t=!0===e.prepend?"prepend":"append",r=!0===e.singleTag,i="string"==typeof e.container?document.querySelector(e.container):document.getElementsByTagName("head")[0];if(r){var s=B.indexOf(i);-1===s&&(s=B.push(i)-1,U[s]={}),n=U[s]&&U[s][t]?U[s][t]:U[s][t]=l()}else n=l();65279===a.charCodeAt(0)&&(a=a.substring(1)),n.styleSheet?n.styleSheet.cssText+=a:n.appendChild(document.createTextNode(a))}function l(){var a=document.createElement("style");if(a.setAttribute("type","text/css"),e.attributes)for(var n=Object.keys(e.attributes),r=0;r<n.length;r++)a.setAttribute(n[r],e.attributes[n[r]]);var s="prepend"===t?"afterbegin":"beforeend";return i.insertAdjacentElement(s,a),a}}("\n.umami-panel[data-v-bf4a1aaf] {\n  height: 100%;\n  min-width: 0;\n  overflow: hidden;\n  background: var(--theme--background);\n  color: var(--theme--foreground);\n}\n.panel-scroll[data-v-bf4a1aaf] {\n  height: 100%;\n  min-width: 0;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 18px;\n  scrollbar-width: thin;\n}\n.topbar[data-v-bf4a1aaf] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 18px;\n  margin-bottom: 18px;\n}\n.heading[data-v-bf4a1aaf] {\n  min-width: 0;\n}\n.heading p[data-v-bf4a1aaf] {\n  margin: 0 0 4px;\n  color: var(--theme--foreground-subdued);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n}\n.heading h2[data-v-bf4a1aaf] {\n  margin: 0;\n  font-size: 22px;\n  font-weight: 750;\n  line-height: 1.15;\n}\n.controls[data-v-bf4a1aaf] {\n  display: flex;\n  flex: 0 0 auto;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 6px;\n}\n.controls button[data-v-bf4a1aaf] {\n  border: var(--theme--border-width) solid var(--theme--border-color);\n  border-radius: 999px;\n  padding: 7px 11px;\n  background: var(--theme--background-normal);\n  color: var(--theme--foreground-subdued);\n  cursor: pointer;\n  font: inherit;\n  font-size: 13px;\n  line-height: 1;\n}\n.controls button.active[data-v-bf4a1aaf] {\n  border-color: var(--theme--primary);\n  background: var(--theme--primary-background);\n  color: var(--theme--primary);\n}\n.controls button.refresh[data-v-bf4a1aaf] {\n  color: var(--theme--foreground);\n}\n.controls button[data-v-bf4a1aaf]:disabled {\n  cursor: wait;\n  opacity: 0.55;\n}\n.kpis[data-v-bf4a1aaf] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n  margin-bottom: 14px;\n}\n.kpi[data-v-bf4a1aaf] {\n  flex: 1 1 150px;\n  min-width: 0;\n  border: var(--theme--border-width) solid var(--theme--border-color-subdued);\n  border-radius: 18px;\n  padding: 15px;\n  background: var(--theme--background-normal);\n  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);\n}\n.kpi span[data-v-bf4a1aaf] {\n  display: block;\n  margin-bottom: 9px;\n  color: var(--theme--foreground-subdued);\n  font-size: 12px;\n}\n.kpi strong[data-v-bf4a1aaf] {\n  display: block;\n  overflow: hidden;\n  font-size: clamp(22px, 5vw, 32px);\n  font-weight: 780;\n  line-height: 1;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.chart-card[data-v-bf4a1aaf],\n.metric-card[data-v-bf4a1aaf],\n.state[data-v-bf4a1aaf] {\n  border: var(--theme--border-width) solid var(--theme--border-color-subdued);\n  border-radius: 18px;\n  background: var(--theme--background-normal);\n  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);\n}\n.chart-card[data-v-bf4a1aaf] {\n  margin-bottom: 14px;\n  padding: 15px;\n}\n.section-head[data-v-bf4a1aaf] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 14px;\n  margin-bottom: 12px;\n}\n.section-head h3[data-v-bf4a1aaf],\n.metric-card h3[data-v-bf4a1aaf] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 750;\n}\n.section-head p[data-v-bf4a1aaf] {\n  margin: 4px 0 0;\n  color: var(--theme--foreground-subdued);\n  font-size: 12px;\n}\n.legend[data-v-bf4a1aaf] {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: flex-end;\n  gap: 10px;\n  color: var(--theme--foreground-subdued);\n  font-size: 12px;\n}\n.legend span[data-v-bf4a1aaf] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n}\n.dot[data-v-bf4a1aaf] {\n  display: inline-block;\n  width: 8px;\n  height: 8px;\n  border-radius: 999px;\n}\n.dot.visitors[data-v-bf4a1aaf] {\n  background: var(--theme--primary);\n}\n.dot.views[data-v-bf4a1aaf] {\n  background: var(--theme--foreground-subdued);\n}\n.chart-wrap[data-v-bf4a1aaf] {\n  width: 100%;\n  height: 260px;\n  min-width: 0;\n  overflow: hidden;\n}\nsvg[data-v-bf4a1aaf] {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.grid-line[data-v-bf4a1aaf] {\n  stroke: var(--theme--border-color-subdued);\n  stroke-width: 1;\n}\n.line[data-v-bf4a1aaf] {\n  fill: none;\n  stroke-width: 3;\n  vector-effect: non-scaling-stroke;\n}\n.visitors-line[data-v-bf4a1aaf] {\n  stroke: var(--theme--primary);\n}\n.views-line[data-v-bf4a1aaf] {\n  stroke: var(--theme--foreground-subdued);\n  opacity: 0.75;\n}\n.area[data-v-bf4a1aaf] {\n  opacity: 0.08;\n}\n.views-area[data-v-bf4a1aaf] {\n  fill: var(--theme--primary);\n}\n.circle[data-v-bf4a1aaf] {\n  vector-effect: non-scaling-stroke;\n}\n.visitors-circle[data-v-bf4a1aaf] {\n  fill: var(--theme--primary);\n}\n.lists[data-v-bf4a1aaf] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 14px;\n  align-items: stretch;\n}\n.metric-card[data-v-bf4a1aaf] {\n  flex: 1 1 310px;\n  min-width: 260px;\n  overflow: hidden;\n}\n.metric-card header[data-v-bf4a1aaf] {\n  border-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);\n  padding: 13px 15px;\n}\n.metric-card ul[data-v-bf4a1aaf] {\n  list-style: none;\n  margin: 0;\n  padding: 4px 0;\n}\n.metric-card li[data-v-bf4a1aaf] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  padding: 9px 15px;\n}\n.metric-card li + li[data-v-bf4a1aaf] {\n  border-top: 1px solid var(--theme--border-color-subdued);\n}\n.metric-label[data-v-bf4a1aaf] {\n  flex: 1 1 140px;\n  min-width: 0;\n  overflow: hidden;\n  font-size: 13px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.metric-bar[data-v-bf4a1aaf] {\n  flex: 1 1 90px;\n  min-width: 42px;\n  max-width: 180px;\n  height: 6px;\n  overflow: hidden;\n  border-radius: 999px;\n  background: var(--theme--background-accent);\n}\n.metric-bar span[data-v-bf4a1aaf] {\n  display: block;\n  height: 100%;\n  border-radius: inherit;\n  background: var(--theme--primary);\n}\n.metric-card b[data-v-bf4a1aaf] {\n  flex: 0 0 auto;\n  min-width: 40px;\n  font-size: 13px;\n  text-align: right;\n}\n.empty[data-v-bf4a1aaf],\n.empty-chart[data-v-bf4a1aaf] {\n  margin: 0;\n  padding: 20px 15px;\n  color: var(--theme--foreground-subdued);\n  font-size: 13px;\n}\n.empty-chart[data-v-bf4a1aaf] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n}\n.state[data-v-bf4a1aaf] {\n  padding: 18px;\n  color: var(--theme--foreground-subdued);\n}\n.state.error[data-v-bf4a1aaf] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  color: var(--theme--danger);\n}\n@media (max-width: 760px) {\n.topbar[data-v-bf4a1aaf],\n  .section-head[data-v-bf4a1aaf] {\n    flex-direction: column;\n    align-items: stretch;\n}\n.controls[data-v-bf4a1aaf] {\n    justify-content: flex-start;\n}\n.controls button[data-v-bf4a1aaf] {\n    flex: 1 1 auto;\n}\n}\n@media (max-width: 520px) {\n.panel-scroll[data-v-bf4a1aaf] {\n    padding: 12px;\n}\n.kpi[data-v-bf4a1aaf],\n  .metric-card[data-v-bf4a1aaf] {\n    flex-basis: 100%;\n    min-width: 0;\n}\n.chart-wrap[data-v-bf4a1aaf] {\n    height: 220px;\n}\n.metric-card li[data-v-bf4a1aaf] {\n    flex-wrap: wrap;\n}\n.metric-label[data-v-bf4a1aaf] {\n    flex-basis: calc(100% - 52px);\n}\n.metric-bar[data-v-bf4a1aaf] {\n    order: 3;\n    flex-basis: 100%;\n    max-width: none;\n}\n}\n",{});const V=[],Y=[],q=[],O=[],W=[a({id:"umami-analytics-panel",name:"Umami Analytics",icon:"monitoring",description:"Native Directus panel for Umami visitors, pageviews, top pages, referrers, and events.",component:((a,e)=>{const n=a.__vccOpts||a;for(const[a,t]of e)n[a]=t;return n})(R,[["__scopeId","data-v-bf4a1aaf"]]),options:[{field:"websiteId",name:"Umami Website ID",type:"string",meta:{width:"full",interface:"input",note:"Optional. Leave empty to use UMAMI_WEBSITE_ID from the Directus environment."}},{field:"days",name:"Date Range",type:"integer",schema:{default_value:30},meta:{width:"half",interface:"select-dropdown",options:{choices:[{text:"Last 7 days",value:7},{text:"Last 30 days",value:30},{text:"Last 90 days",value:90}]}}}],minWidth:18,minHeight:12})],P=[],F=[];export{Y as displays,V as interfaces,q as layouts,O as modules,F as operations,W as panels,P as themes};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@koendhoore/directus-extension-umami-analytics",
-  "version": "1.0.3",
-  "description": "Directus bundle: secure Umami proxy endpoint + native Insights analytics panel.",
+  "version": "2.0.0",
+  "description": "Directus Insights panel and endpoint for Umami analytics.",
   "type": "module",
   "license": "MIT",
   "scripts": {

package/src/umami-analytics-endpoint/index.ts

@@ -17,7 +17,6 @@ function required(env: Env, key: string): string {
 }
 
 function cleanBaseUrl(env: Env): string {
-  // Accept both https://analytics.example.com and https://analytics.example.com/api
   return required(env, 'UMAMI_URL').replace(/\/api\/?$/, '');
 }
 
@@ -33,10 +32,31 @@ function numberParam(value: unknown, fallback: number) {
 
 function getRange(query: Record<string, unknown>) {
   const now = Date.now();
-  const days = Math.max(1, Math.min(365, numberParam(query.days, 30)));
+  const preset = String(query.preset || query.range || '').toLowerCase();
+
+  if (preset === 'today') {
+    const start = new Date();
+    start.setHours(0, 0, 0, 0);
+    return { startAt: start.getTime(), endAt: now, days: 1, preset };
+  }
+
+  const presetDays: Record<string, number> = {
+    '7d': 7,
+    'last7': 7,
+    'last_7_days': 7,
+    '30d': 30,
+    'last30': 30,
+    'last_30_days': 30,
+    '90d': 90,
+    'last90': 90,
+    'last_90_days': 90,
+  };
+
+  const days = Math.max(1, Math.min(365, numberParam(query.days, presetDays[preset] || 30)));
   const endAt = numberParam(query.endAt, now);
   const startAt = numberParam(query.startAt, endAt - days * 24 * 60 * 60 * 1000);
-  return { startAt, endAt, days };
+
+  return { startAt, endAt, days, preset: preset || `${days}d` };
 }
 
 function cached<T>(key: string): T | null {
@@ -86,7 +106,6 @@ function getApiClientAuth(env: Env): UmamiAuth | null {
 
   if (!userId || !appSecret) return null;
 
-  // This matches @umami/api-client: secret is sha512(APP_SECRET), then createSecureToken({ userId }, secret)
   const secret = hash(appSecret);
   const token = createSecureToken({ userId }, secret);
 
@@ -160,6 +179,14 @@ async function umamiGet(env: Env, path: string) {
   return text ? JSON.parse(text) : null;
 }
 
+async function safeUmamiGet(env: Env, path: string, fallback: unknown = []) {
+  try {
+    return await umamiGet(env, path);
+  } catch (error: any) {
+    return fallback;
+  }
+}
+
 function metricPath(websiteId: string, type: string, startAt: number, endAt: number, limit = 10) {
   const params = new URLSearchParams({
     startAt: String(Math.round(startAt)),
@@ -170,62 +197,41 @@ function metricPath(websiteId: string, type: string, startAt: number, endAt: num
   return `/websites/${websiteId}/metrics?${params.toString()}`;
 }
 
-async function safeUmamiGet(env: Env, path: string, fallback: unknown = []) {
-  try {
-    return await umamiGet(env, path);
-  } catch (error: any) {
-    return {
-      error: error.message || 'Unknown Umami error',
-      path,
-      fallback,
-    };
-  }
+function pageviewsPath(websiteId: string, startAt: number, endAt: number, unit: string) {
+  const params = new URLSearchParams({
+    startAt: String(Math.round(startAt)),
+    endAt: String(Math.round(endAt)),
+    unit,
+  });
+  return `/websites/${websiteId}/pageviews?${params.toString()}`;
+}
+
+function unitForDays(days: number) {
+  if (days <= 2) return 'hour';
+  if (days <= 90) return 'day';
+  return 'month';
 }
 
 export default (router: any, context: any) => {
   const env: Env = context.env || process.env;
 
   router.get('/health', (_req: any, res: any) => {
-    res.json({ ok: true, service: 'umami-analytics' });
+    res.json({ ok: true, service: 'umami-analytics', version: '2.0.0' });
   });
 
-  router.get('/debug', async (_req: any, res: any) => {
-    try {
-      const authMode = env.UMAMI_API_KEY
-        ? 'api-key'
-        : env.UMAMI_TOKEN
-          ? 'bearer-token'
-          : env.UMAMI_USER_ID || env.UMAMI_API_CLIENT_USER_ID
-            ? 'api-client'
-            : 'username-password';
-
-      const me = await umamiGet(env, '/me').catch((error: any) => ({ error: error.message }));
-
-      res.json({
-        ok: true,
-        authMode,
-        umamiUrl: cleanBaseUrl(env),
-        websiteId: env.UMAMI_WEBSITE_ID,
-        me,
-      });
-    } catch (error: any) {
-      res.status(500).json({ error: error.message || 'Unknown error' });
-    }
-  });
+  
 
   router.get('/summary', async (req: any, res: any) => {
     try {
       const websiteId = String(req.query.websiteId || env.UMAMI_WEBSITE_ID || '');
       if (!websiteId) return res.status(400).json({ error: 'Missing websiteId or UMAMI_WEBSITE_ID' });
 
-      const { startAt, endAt, days } = getRange(req.query);
-      const key = `summary:${websiteId}:${startAt}:${endAt}:v3`;
+      const { startAt, endAt, days, preset } = getRange(req.query);
+      const unit = String(req.query.unit || unitForDays(days));
+      const key = `summary:v2:${websiteId}:${startAt}:${endAt}:${unit}`;
       const hit = cached(key);
       if (hit) return res.json(hit);
 
-      // Umami v3:
-      // - /stats accepts startAt/endAt only.
-      // - /metrics uses type=path, not type=url.
       const statsParams = new URLSearchParams({
         startAt: String(Math.round(startAt)),
         endAt: String(Math.round(endAt)),
@@ -233,13 +239,31 @@ export default (router: any, context: any) => {
 
       const stats = await umamiGet(env, `/websites/${websiteId}/stats?${statsParams.toString()}`);
 
-      const [pages, referrers, events] = await Promise.all([
-        safeUmamiGet(env, metricPath(websiteId, 'path', startAt, endAt, 10), []),
-        safeUmamiGet(env, metricPath(websiteId, 'referrer', startAt, endAt, 10), []),
-        safeUmamiGet(env, metricPath(websiteId, 'event', startAt, endAt, 10), []),
+      const [pageviews, pages, referrers, countries, browsers, os, devices, events] = await Promise.all([
+        safeUmamiGet(env, pageviewsPath(websiteId, startAt, endAt, unit), { pageviews: [], sessions: [] }),
+        safeUmamiGet(env, metricPath(websiteId, 'path', startAt, endAt, 12), []),
+        safeUmamiGet(env, metricPath(websiteId, 'referrer', startAt, endAt, 12), []),
+        safeUmamiGet(env, metricPath(websiteId, 'country', startAt, endAt, 12), []),
+        safeUmamiGet(env, metricPath(websiteId, 'browser', startAt, endAt, 12), []),
+        safeUmamiGet(env, metricPath(websiteId, 'os', startAt, endAt, 12), []),
+        safeUmamiGet(env, metricPath(websiteId, 'device', startAt, endAt, 12), []),
+        safeUmamiGet(env, metricPath(websiteId, 'event', startAt, endAt, 12), []),
       ]);
 
-      const payload = { websiteId, range: { startAt, endAt, days }, stats, pages, referrers, events };
+      const payload = {
+        websiteId,
+        range: { startAt, endAt, days, preset, unit },
+        stats,
+        pageviews,
+        pages,
+        referrers,
+        countries,
+        browsers,
+        os,
+        devices,
+        events,
+      };
+
       setCached(key, payload);
       res.json(payload);
     } catch (error: any) {

package/src/umami-analytics-panel/panel.vue

@@ -1,75 +1,130 @@
 <template>
   <div class="umami-panel">
-    <div v-if="loading" class="state">Loading analytics...</div>
-    <div v-else-if="error" class="state error">{{ error }}</div>
-    <template v-else>
-      <div class="cards">
-        <div class="card">
-          <span>Visitors</span>
-          <strong>{{ stat('visitors') }}</strong>
+    <div class="panel-scroll">
+      <header class="topbar">
+        <div class="heading">
+          <p>Analytics</p>
+          <h2>Website performance</h2>
         </div>
-        <div class="card">
-          <span>Pageviews</span>
-          <strong>{{ stat('pageviews') }}</strong>
-        </div>
-        <div class="card">
-          <span>Visits</span>
-          <strong>{{ stat('visits') }}</strong>
-        </div>
-        <div class="card">
-          <span>Bounce rate</span>
-          <strong>{{ percentStat('bounces') }}</strong>
+
+        <div class="controls">
+          <button
+            v-for="option in ranges"
+            :key="option.value"
+            type="button"
+            :class="{ active: selectedRange === option.value }"
+            @click="setRange(option.value)"
+          >
+            {{ option.label }}
+          </button>
+
+          <button class="refresh" type="button" :disabled="loading" @click="load">
+            {{ loading ? 'Loading' : 'Refresh' }}
+          </button>
         </div>
+      </header>
+
+      <div v-if="loading && !data" class="state">
+        Loading analytics...
+      </div>
+
+      <div v-else-if="error" class="state error">
+        <strong>Could not load analytics</strong>
+        <span>{{ error }}</span>
       </div>
 
-      <div class="grid">
-        <section>
-          <h3>Top pages</h3>
-          <ul>
-            <li v-for="row in pages" :key="row.x || row.name">
-              <span>{{ row.x || row.name || '(unknown)' }}</span>
-              <b>{{ row.y || row.value || row.count }}</b>
-            </li>
-          </ul>
+      <template v-else>
+        <section class="kpis">
+          <article v-for="card in kpiCards" :key="card.label" class="kpi">
+            <span>{{ card.label }}</span>
+            <strong>{{ card.value }}</strong>
+          </article>
         </section>
 
-        <section>
-          <h3>Referrers</h3>
-          <ul>
-            <li v-for="row in referrers" :key="row.x || row.name">
-              <span>{{ row.x || row.name || 'Direct' }}</span>
-              <b>{{ row.y || row.value || row.count }}</b>
-            </li>
-          </ul>
+        <section class="chart-card">
+          <div class="section-head">
+            <div>
+              <h3>Visitors & pageviews</h3>
+              <p>{{ activeRangeLabel }}</p>
+            </div>
+
+            <div class="legend">
+              <span><i class="dot visitors"></i>Visitors</span>
+              <span><i class="dot views"></i>Pageviews</span>
+            </div>
+          </div>
+
+          <div class="chart-wrap">
+            <svg v-if="chartPoints.length > 1" viewBox="0 0 700 260" preserveAspectRatio="none" role="img">
+              <line
+                v-for="tick in yTicks"
+                :key="tick"
+                x1="0"
+                x2="700"
+                :y1="tick"
+                :y2="tick"
+                class="grid-line"
+              />
+
+              <path :d="areaPath('pageviews')" class="area views-area"></path>
+              <path :d="linePath('pageviews')" class="line views-line"></path>
+              <path :d="linePath('visitors')" class="line visitors-line"></path>
+
+              <circle
+                v-for="point in chartPoints"
+                :key="`v-${point.index}`"
+                :cx="point.x"
+                :cy="point.visitorsY"
+                r="2.6"
+                class="circle visitors-circle"
+              />
+            </svg>
+
+            <div v-else class="empty-chart">Not enough chart data yet.</div>
+          </div>
         </section>
 
-        <section>
-          <h3>Events</h3>
-          <ul>
-            <li v-for="row in events" :key="row.x || row.name">
-              <span>{{ row.x || row.name || '(event)' }}</span>
-              <b>{{ row.y || row.value || row.count }}</b>
-            </li>
-          </ul>
+        <section class="lists">
+          <metric-list title="Top pages" :rows="pages" empty="No page data yet." />
+          <metric-list title="Referrers" :rows="referrers" empty="No referrer data yet." fallback-label="Direct" />
+          <metric-list title="Countries" :rows="countries" empty="No country data yet." />
+          <metric-list title="Devices" :rows="devices" empty="No device data yet." />
+          <metric-list title="Browsers" :rows="browsers" empty="No browser data yet." />
+          <metric-list title="Events" :rows="events" empty="No events yet." />
         </section>
-      </div>
-    </template>
+      </template>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, h, onMounted, ref, watch } from 'vue';
 
 const props = defineProps<{
   websiteId?: string;
   days?: number;
 }>();
 
+const ranges = [
+  { label: 'Today', value: 'today', days: 1 },
+  { label: '7d', value: '7d', days: 7 },
+  { label: '30d', value: '30d', days: 30 },
+  { label: '90d', value: '90d', days: 90 },
+  { label: 'All', value: '365d', days: 365 },
+];
+
+const selectedRange = ref(props.days ? `${props.days}d` : '30d');
 const loading = ref(true);
 const error = ref('');
 const data = ref<any>(null);
 
-const days = computed(() => props.days || 30);
+const activeRange = computed(() => ranges.find((range) => range.value === selectedRange.value) || ranges[2]);
+const activeRangeLabel = computed(() => activeRange.value.label === 'All' ? 'Last 365 days' : activeRange.value.label === 'Today' ? 'Today' : `Last ${activeRange.value.days} days`);
+
+function setRange(value: string) {
+  selectedRange.value = value;
+  load();
+}
 
 function valueOfMetric(metric: any) {
   if (metric == null) return 0;
@@ -78,26 +133,129 @@ function valueOfMetric(metric: any) {
   return Number(metric.value || metric.count || metric.y || 0);
 }
 
+function formatNumber(value: number) {
+  return new Intl.NumberFormat().format(Math.round(Number(value || 0)));
+}
+
 function stat(key: string) {
-  const value = valueOfMetric(data.value?.stats?.[key]);
-  return new Intl.NumberFormat().format(value);
+  return formatNumber(valueOfMetric(data.value?.stats?.[key]));
 }
 
 function percentStat(key: string) {
   const value = valueOfMetric(data.value?.stats?.[key]);
   if (!value) return '0%';
-  return `${Math.round(value * 100) / 100}%`;
+  return `${Math.round(value * 10) / 10}%`;
 }
 
-const pages = computed(() => data.value?.pages || []);
-const referrers = computed(() => data.value?.referrers || []);
-const events = computed(() => data.value?.events || []);
+const kpiCards = computed(() => [
+  { label: 'Visitors', value: stat('visitors') },
+  { label: 'Visits', value: stat('visits') },
+  { label: 'Pageviews', value: stat('pageviews') },
+  { label: 'Bounce rate', value: percentStat('bounces') },
+  { label: 'Visit duration', value: `${formatNumber(valueOfMetric(data.value?.stats?.totaltime))}s` },
+]);
+
+function asRows(value: any) {
+  return Array.isArray(value) ? value.filter((row) => !row?.error) : [];
+}
+
+const pages = computed(() => asRows(data.value?.pages));
+const referrers = computed(() => asRows(data.value?.referrers));
+const countries = computed(() => asRows(data.value?.countries));
+const devices = computed(() => asRows(data.value?.devices));
+const browsers = computed(() => asRows(data.value?.browsers));
+const events = computed(() => asRows(data.value?.events));
+
+function normalizeSeries(value: any) {
+  if (Array.isArray(value)) return value;
+  if (Array.isArray(value?.pageviews)) return value.pageviews;
+  if (Array.isArray(value?.views)) return value.views;
+  if (Array.isArray(value?.data)) return value.data;
+  return [];
+}
+
+function rowDate(row: any) {
+  return row?.x || row?.date || row?.t || row?.createdAt || row?.day || '';
+}
+
+function rowViews(row: any) {
+  return Number(row?.y || row?.pageviews || row?.views || row?.value || row?.count || 0);
+}
+
+function rowVisitors(row: any) {
+  return Number(row?.visitors || row?.sessions || row?.uniques || row?.users || rowViews(row));
+}
+
+const chartRaw = computed(() => {
+  const root = data.value?.pageviews;
+  const merged = Array.isArray(root?.pageviews)
+    ? root.pageviews.map((row: any, index: number) => ({
+        date: rowDate(row),
+        pageviews: rowViews(row),
+        visitors: rowVisitors(root.sessions?.[index] || row),
+      }))
+    : normalizeSeries(root).map((row: any) => ({
+        date: rowDate(row),
+        pageviews: rowViews(row),
+        visitors: rowVisitors(row),
+      }));
+
+  return merged.filter((row: any) => row.pageviews || row.visitors);
+});
+
+const chartPoints = computed(() => {
+  const rows = chartRaw.value;
+  const width = 700;
+  const height = 220;
+  const top = 18;
+  const max = Math.max(...rows.map((row: any) => Math.max(row.pageviews, row.visitors)), 1);
+
+  return rows.map((row: any, index: number) => {
+    const x = rows.length === 1 ? width / 2 : (index / (rows.length - 1)) * width;
+    const pageviewsY = top + height - (row.pageviews / max) * height;
+    const visitorsY = top + height - (row.visitors / max) * height;
+
+    return {
+      ...row,
+      index,
+      x,
+      pageviewsY,
+      visitorsY,
+    };
+  });
+});
+
+const yTicks = [40, 95, 150, 205];
+
+function linePath(type: 'pageviews' | 'visitors') {
+  const points = chartPoints.value;
+  if (!points.length) return '';
+  const yKey = type === 'pageviews' ? 'pageviewsY' : 'visitorsY';
+  return points.map((point: any, index: number) => `${index === 0 ? 'M' : 'L'} ${point.x} ${point[yKey]}`).join(' ');
+}
+
+function areaPath(type: 'pageviews' | 'visitors') {
+  const points = chartPoints.value;
+  if (!points.length) return '';
+  const line = linePath(type);
+  const last = points[points.length - 1];
+  const first = points[0];
+  return `${line} L ${last.x} 240 L ${first.x} 240 Z`;
+}
 
 async function load() {
   loading.value = true;
   error.value = '';
 
-  const params = new URLSearchParams({ days: String(days.value) });
+  const params = new URLSearchParams();
+  const range = activeRange.value;
+
+  if (range.value === 'today') {
+    params.set('preset', 'today');
+  } else {
+    params.set('days', String(range.days));
+  }
+
   if (props.websiteId) params.set('websiteId', props.websiteId);
 
   try {
@@ -116,78 +274,429 @@ async function load() {
   }
 }
 
+const MetricList = defineComponent({
+  name: 'MetricList',
+  props: {
+    title: { type: String, required: true },
+    rows: { type: Array, default: () => [] },
+    empty: { type: String, default: 'No data yet.' },
+    fallbackLabel: { type: String, default: '(unknown)' },
+  },
+  setup(listProps) {
+    function label(row: any) {
+      return String(row?.x || row?.name || row?.title || row?.label || listProps.fallbackLabel);
+    }
+
+    function rawCount(row: any) {
+      return Number(row?.y || row?.value || row?.count || 0);
+    }
+
+    function count(row: any) {
+      return new Intl.NumberFormat().format(rawCount(row));
+    }
+
+    function barWidth(row: any) {
+      const max = Math.max(...(listProps.rows as any[]).map(rawCount), 1);
+      const percentage = Math.max(5, Math.round((rawCount(row) / max) * 100));
+      return `${percentage}%`;
+    }
+
+    return () =>
+      h('article', { class: 'metric-card' }, [
+        h('header', [h('h3', listProps.title)]),
+        (listProps.rows as any[]).length
+          ? h(
+              'ul',
+              (listProps.rows as any[]).map((row: any) =>
+                h('li', { key: label(row) }, [
+                  h('span', { class: 'metric-label', title: label(row) }, label(row)),
+                  h('span', { class: 'metric-bar', 'aria-hidden': 'true' }, [
+                    h('span', { style: { width: barWidth(row) } }),
+                  ]),
+                  h('b', count(row)),
+                ])
+              )
+            )
+          : h('p', { class: 'empty' }, listProps.empty),
+      ]);
+  },
+});
+
 onMounted(load);
-watch(() => [props.websiteId, props.days], load);
+watch(() => [props.websiteId, props.days], () => {
+  if (props.days) selectedRange.value = `${props.days}d`;
+  load();
+});
 </script>
 
 <style scoped>
 .umami-panel {
-  padding: 16px;
   height: 100%;
-  overflow: auto;
+  min-width: 0;
+  overflow: hidden;
+  background: var(--theme--background);
+  color: var(--theme--foreground);
 }
-.state {
-  padding: 16px;
+
+.panel-scroll {
+  height: 100%;
+  min-width: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 18px;
+  scrollbar-width: thin;
+}
+
+.topbar {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 18px;
+}
+
+.heading {
+  min-width: 0;
+}
+
+.heading p {
+  margin: 0 0 4px;
   color: var(--theme--foreground-subdued);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
-.error {
-  color: var(--theme--danger);
+
+.heading h2 {
+  margin: 0;
+  font-size: 22px;
+  font-weight: 750;
+  line-height: 1.15;
 }
-.cards {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 12px;
-  margin-bottom: 18px;
+
+.controls {
+  display: flex;
+  flex: 0 0 auto;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 6px;
 }
-.card {
+
+.controls button {
   border: var(--theme--border-width) solid var(--theme--border-color);
-  border-radius: var(--theme--border-radius);
-  padding: 14px;
+  border-radius: 999px;
+  padding: 7px 11px;
+  background: var(--theme--background-normal);
+  color: var(--theme--foreground-subdued);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1;
+}
+
+.controls button.active {
+  border-color: var(--theme--primary);
+  background: var(--theme--primary-background);
+  color: var(--theme--primary);
+}
+
+.controls button.refresh {
+  color: var(--theme--foreground);
+}
+
+.controls button:disabled {
+  cursor: wait;
+  opacity: 0.55;
+}
+
+.kpis {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.kpi {
+  flex: 1 1 150px;
+  min-width: 0;
+  border: var(--theme--border-width) solid var(--theme--border-color-subdued);
+  border-radius: 18px;
+  padding: 15px;
   background: var(--theme--background-normal);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
 }
-.card span {
+
+.kpi span {
   display: block;
+  margin-bottom: 9px;
   color: var(--theme--foreground-subdued);
   font-size: 12px;
-  margin-bottom: 6px;
 }
-.card strong {
-  font-size: 24px;
+
+.kpi strong {
+  display: block;
+  overflow: hidden;
+  font-size: clamp(22px, 5vw, 32px);
+  font-weight: 780;
   line-height: 1;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 18px;
+
+.chart-card,
+.metric-card,
+.state {
+  border: var(--theme--border-width) solid var(--theme--border-color-subdued);
+  border-radius: 18px;
+  background: var(--theme--background-normal);
+  box-shadow: 0 1px 2px rgb(0 0 0 / 4%);
+}
+
+.chart-card {
+  margin-bottom: 14px;
+  padding: 15px;
+}
+
+.section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 12px;
 }
-h3 {
-  margin: 0 0 8px;
+
+.section-head h3,
+.metric-card h3 {
+  margin: 0;
   font-size: 14px;
+  font-weight: 750;
+}
+
+.section-head p {
+  margin: 4px 0 0;
+  color: var(--theme--foreground-subdued);
+  font-size: 12px;
+}
+
+.legend {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 10px;
+  color: var(--theme--foreground-subdued);
+  font-size: 12px;
 }
-ul {
+
+.legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+}
+
+.dot.visitors {
+  background: var(--theme--primary);
+}
+
+.dot.views {
+  background: var(--theme--foreground-subdued);
+}
+
+.chart-wrap {
+  width: 100%;
+  height: 260px;
+  min-width: 0;
+  overflow: hidden;
+}
+
+svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.grid-line {
+  stroke: var(--theme--border-color-subdued);
+  stroke-width: 1;
+}
+
+.line {
+  fill: none;
+  stroke-width: 3;
+  vector-effect: non-scaling-stroke;
+}
+
+.visitors-line {
+  stroke: var(--theme--primary);
+}
+
+.views-line {
+  stroke: var(--theme--foreground-subdued);
+  opacity: 0.75;
+}
+
+.area {
+  opacity: 0.08;
+}
+
+.views-area {
+  fill: var(--theme--primary);
+}
+
+.circle {
+  vector-effect: non-scaling-stroke;
+}
+
+.visitors-circle {
+  fill: var(--theme--primary);
+}
+
+.lists {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+  align-items: stretch;
+}
+
+.metric-card {
+  flex: 1 1 310px;
+  min-width: 260px;
+  overflow: hidden;
+}
+
+.metric-card header {
+  border-bottom: var(--theme--border-width) solid var(--theme--border-color-subdued);
+  padding: 13px 15px;
+}
+
+.metric-card ul {
   list-style: none;
   margin: 0;
-  padding: 0;
+  padding: 4px 0;
 }
-li {
+
+.metric-card li {
   display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 7px 0;
-  border-bottom: 1px solid var(--theme--border-color-subdued);
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 9px 15px;
+}
+
+.metric-card li + li {
+  border-top: 1px solid var(--theme--border-color-subdued);
 }
-li span {
+
+.metric-label {
+  flex: 1 1 140px;
+  min-width: 0;
   overflow: hidden;
+  font-size: 13px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-li b {
+
+.metric-bar {
+  flex: 1 1 90px;
+  min-width: 42px;
+  max-width: 180px;
+  height: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--theme--background-accent);
+}
+
+.metric-bar span {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: var(--theme--primary);
+}
+
+.metric-card b {
   flex: 0 0 auto;
+  min-width: 40px;
+  font-size: 13px;
+  text-align: right;
+}
+
+.empty,
+.empty-chart {
+  margin: 0;
+  padding: 20px 15px;
+  color: var(--theme--foreground-subdued);
+  font-size: 13px;
+}
+
+.empty-chart {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.state {
+  padding: 18px;
+  color: var(--theme--foreground-subdued);
+}
+
+.state.error {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  color: var(--theme--danger);
 }
-@media (max-width: 900px) {
-  .cards,
-  .grid {
-    grid-template-columns: 1fr;
+
+@media (max-width: 760px) {
+  .topbar,
+  .section-head {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .controls {
+    justify-content: flex-start;
+  }
+
+  .controls button {
+    flex: 1 1 auto;
+  }
+}
+
+@media (max-width: 520px) {
+  .panel-scroll {
+    padding: 12px;
+  }
+
+  .kpi,
+  .metric-card {
+    flex-basis: 100%;
+    min-width: 0;
+  }
+
+  .chart-wrap {
+    height: 220px;
+  }
+
+  .metric-card li {
+    flex-wrap: wrap;
+  }
+
+  .metric-label {
+    flex-basis: calc(100% - 52px);
+  }
+
+  .metric-bar {
+    order: 3;
+    flex-basis: 100%;
+    max-width: none;
   }
 }
 </style>