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

package/dist/api.js

@@ -1 +1 @@
-import t from"node:crypto";function e(t,e){const r=e.replace(/^\/api\/?/,"").replace(/^\/+/,"");return`${n(t)}/api/${r}`}function r(t){return Buffer.from(t).toString("base64").replace(/=/g,"").replace(/\+/g,"-").replace(/\//g,"_")}function n(t){return c(t,"UMAMI_URL").replace(/\/api\/?$/,"")}function a(e,n){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,n){const a=`${r(JSON.stringify({alg:"HS256",typ:"JWT"}))}.${r(JSON.stringify(e))}`;return`${a}.${r(t.createHmac("sha256",n).update(a).digest())}`}(e,n),n)}function s(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 ${a({userId:r},function(...e){return t.createHash("sha512").update(e.join("")).digest("hex")}(n))}`}}}async function o(t){const r=t.UMAMI_API_KEY;if(r)return{headers:{"x-umami-api-key":r}};const n=t.UMAMI_TOKEN;if(n)return{headers:{Authorization:`Bearer ${n}`}};const a=s(t);return a||async function(t){if(M&&M.expires>Date.now())return M.auth;const r=c(t,"UMAMI_USERNAME"),n=c(t,"UMAMI_PASSWORD"),a=await fetch(e(t,"/auth/login"),{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({username:r,password:n})}),s=await a.text();if(!a.ok)throw new Error(`Umami login failed: ${a.status} ${s}`);let o=null;try{o=s?JSON.parse(s):null}catch{}const i=o?.token||o?.accessToken||o?.data?.token||o?.data?.accessToken,u=a.headers.get("set-cookie")||"",d=i?{headers:{Authorization:`Bearer ${i}`}}:{headers:u?{Cookie:u.split(";")[0]}:{}};return M={expires:Date.now()+33e5,auth:d},d}(t)}function i(t,e){const r=Number(t);return Number.isFinite(r)?r:e}function c(t,e){const r=t[e];if(!r)throw new Error(`Missing ${e}`);return r.replace(/\/+$/,"")}async function u(t,r){const n=await o(t),a=await fetch(e(t,r),{headers:{Accept:"application/json",...n.headers}}),s=await a.text();if(!a.ok)throw new Error(`Umami request failed: ${a.status} ${s}`);return s?JSON.parse(s):null}const d=3e5,f=new Map;let M=null;const m=[],p=[{name:"umami-analytics",config:(t,e)=>{const r=e.env||process.env;t.get("/health",(t,e)=>{e.json({ok:!0,service:"umami-analytics"})}),t.get("/debug",async(t,e)=>{try{const t=r.UMAMI_API_KEY?"api-key":r.UMAMI_TOKEN?"bearer-token":r.UMAMI_USER_ID||r.UMAMI_API_CLIENT_USER_ID?"api-client":"username-password",a=await u(r,"/me").catch(t=>({error:t.message}));e.json({ok:!0,authMode:t,umamiUrl:n(r),websiteId:r.UMAMI_WEBSITE_ID,me:a})}catch(t){e.status(500).json({error:t.message||"Unknown error"})}}),t.get("/summary",async(t,e)=>{try{const n=String(t.query.websiteId||r.UMAMI_WEBSITE_ID||"");if(!n)return e.status(400).json({error:"Missing websiteId or UMAMI_WEBSITE_ID"});const{startAt:a,endAt:s,days:o}=function(t){const e=Date.now(),r=Math.max(1,Math.min(365,i(t.days,30))),n=i(t.endAt,e);return{startAt:i(t.startAt,n-24*r*60*60*1e3),endAt:n,days:r}}(t.query),c=`summary:${n}:${a}:${s}`,M=function(t){const e=f.get(t);return!e||e.expires<Date.now()?null:e.value}(c);if(M)return e.json(M);const m=r.UMAMI_TIMEZONE||"Europe/Brussels",p=new URLSearchParams({startAt:String(Math.round(a)),endAt:String(Math.round(s)),unit:"day",timezone:m}),h=(t,e=10)=>new URLSearchParams({startAt:String(Math.round(a)),endAt:String(Math.round(s)),type:t,limit:String(e),timezone:m}),[l,A,g,I]=await Promise.all([u(r,`/websites/${n}/stats?${p.toString()}`),u(r,`/websites/${n}/metrics?${h("url").toString()}`),u(r,`/websites/${n}/metrics?${h("referrer").toString()}`),u(r,`/websites/${n}/metrics?${h("event").toString()}`).catch(()=>[])]),S={websiteId:n,range:{startAt:a,endAt:s,days:o},stats:l,pages:A,referrers:g,events:I};!function(t,e,r=d){f.set(t,{expires:Date.now()+r,value:e})}(c,S),e.json(S)}catch(t){e.status(500).json({error:t.message||"Unknown error"})}})}}],h=[];export{p as endpoints,m as hooks,h 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.2",
-  "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

@@ -1,4 +1,4 @@
-import crypto from "node:crypto";
+import crypto from 'node:crypto';
 
 type Env = Record<string, string | undefined>;
 
@@ -6,13 +6,57 @@ type UmamiAuth = {
   headers: Record<string, string>;
 };
 
+const FIVE_MINUTES = 5 * 60 * 1000;
+const cache = new Map<string, { expires: number; value: unknown }>();
+let authCache: { expires: number; auth: UmamiAuth } | null = null;
+
+function required(env: Env, key: string): string {
+  const value = env[key];
+  if (!value) throw new Error(`Missing ${key}`);
+  return value.replace(/\/+$/, '');
+}
+
+function cleanBaseUrl(env: Env): string {
+  return required(env, 'UMAMI_URL').replace(/\/api\/?$/, '');
+}
+
 function apiUrl(env: Env, path: string): string {
   const cleanPath = path.replace(/^\/api\/?/, '').replace(/^\/+/, '');
   return `${cleanBaseUrl(env)}/api/${cleanPath}`;
 }
 
-function base64url(input: Buffer | string) {
-  return Buffer.from(input).toString('base64').replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
+function numberParam(value: unknown, fallback: number) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+
+function getRange(query: Record<string, unknown>) {
+  const now = Date.now();
+  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, preset: preset || `${days}d` };
 }
 
 function cached<T>(key: string): T | null {
@@ -21,9 +65,16 @@ function cached<T>(key: string): T | null {
   return hit.value as T;
 }
 
-function cleanBaseUrl(env: Env): string {
-  // Accept both https://analytics.example.com and https://analytics.example.com/api
-  return required(env, 'UMAMI_URL').replace(/\/api\/?$/, '');
+function setCached(key: string, value: unknown, ttlMs = FIVE_MINUTES) {
+  cache.set(key, { expires: Date.now() + ttlMs, value });
+}
+
+function base64url(input: Buffer | string) {
+  return Buffer.from(input).toString('base64').replace(/=/g, '').replace(/\+/g, '-').replace(/\//g, '_');
+}
+
+function hash(...args: string[]) {
+  return crypto.createHash('sha512').update(args.join('')).digest('hex');
 }
 
 function createJwt(payload: Record<string, unknown>, secret: string) {
@@ -35,10 +86,6 @@ function createJwt(payload: Record<string, unknown>, secret: string) {
   return `${data}.${base64url(signature)}`;
 }
 
-function createSecureToken(payload: Record<string, unknown>, secret: string) {
-  return encryptAesGcm(createJwt(payload, secret), secret);
-}
-
 function encryptAesGcm(value: string, secret: string) {
   const iv = crypto.randomBytes(16);
   const salt = crypto.randomBytes(64);
@@ -49,40 +96,22 @@ function encryptAesGcm(value: string, secret: string) {
   return Buffer.concat([salt, iv, tag, encrypted]).toString('base64');
 }
 
+function createSecureToken(payload: Record<string, unknown>, secret: string) {
+  return encryptAesGcm(createJwt(payload, secret), secret);
+}
+
 function getApiClientAuth(env: Env): UmamiAuth | null {
   const userId = env.UMAMI_USER_ID || env.UMAMI_API_CLIENT_USER_ID;
   const appSecret = env.UMAMI_APP_SECRET || env.UMAMI_API_CLIENT_SECRET;
 
   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);
 
   return { headers: { Authorization: `Bearer ${token}` } };
 }
 
-async function getAuth(env: Env): Promise<UmamiAuth> {
-  const apiKey = env.UMAMI_API_KEY;
-  if (apiKey) return { headers: { 'x-umami-api-key': apiKey } };
-
-  const token = env.UMAMI_TOKEN;
-  if (token) return { headers: { Authorization: `Bearer ${token}` } };
-
-  const apiClientAuth = getApiClientAuth(env);
-  if (apiClientAuth) return apiClientAuth;
-
-  return getUsernamePasswordAuth(env);
-}
-
-function getRange(query: Record<string, unknown>) {
-  const now = Date.now();
-  const days = Math.max(1, Math.min(365, numberParam(query.days, 30)));
-  const endAt = numberParam(query.endAt, now);
-  const startAt = numberParam(query.startAt, endAt - days * 24 * 60 * 60 * 1000);
-  return { startAt, endAt, days };
-}
-
 async function getUsernamePasswordAuth(env: Env): Promise<UmamiAuth> {
   if (authCache && authCache.expires > Date.now()) return authCache.auth;
 
@@ -119,33 +148,17 @@ async function getUsernamePasswordAuth(env: Env): Promise<UmamiAuth> {
   return auth;
 }
 
-function hash(...args: string[]) {
-  return crypto.createHash('sha512').update(args.join('')).digest('hex');
-}
-
-function metricPath(websiteId: string, type: string, startAt: number, endAt: number, limit = 10) {
-  const params = new URLSearchParams({
-    startAt: String(Math.round(startAt)),
-    endAt: String(Math.round(endAt)),
-    type,
-    limit: String(limit),
-  });
-  return `/websites/${websiteId}/metrics?${params.toString()}`;
-}
+async function getAuth(env: Env): Promise<UmamiAuth> {
+  const apiKey = env.UMAMI_API_KEY;
+  if (apiKey) return { headers: { 'x-umami-api-key': apiKey } };
 
-function numberParam(value: unknown, fallback: number) {
-  const parsed = Number(value);
-  return Number.isFinite(parsed) ? parsed : fallback;
-}
+  const token = env.UMAMI_TOKEN;
+  if (token) return { headers: { Authorization: `Bearer ${token}` } };
 
-function required(env: Env, key: string): string {
-  const value = env[key];
-  if (!value) throw new Error(`Missing ${key}`);
-  return value.replace(/\/+$/, '');
-}
+  const apiClientAuth = getApiClientAuth(env);
+  if (apiClientAuth) return apiClientAuth;
 
-function setCached(key: string, value: unknown, ttlMs = FIVE_MINUTES) {
-  cache.set(key, { expires: Date.now() + ttlMs, value });
+  return getUsernamePasswordAuth(env);
 }
 
 async function umamiGet(env: Env, path: string) {
@@ -166,121 +179,95 @@ async function umamiGet(env: Env, path: string) {
   return text ? JSON.parse(text) : null;
 }
 
-const FIVE_MINUTES = 5 * 60 * 1000;
-const cache = new Map<string, { expires: number; value: unknown }>();
-let authCache: { expires: number; auth: UmamiAuth } | null = null;
-
-export default (router: any, context: any) => {
-  const env: Env = context.env || process.env;
+async function safeUmamiGet(env: Env, path: string, fallback: unknown = []) {
+  try {
+    return await umamiGet(env, path);
+  } catch (error: any) {
+    return fallback;
+  }
+}
 
-  router.get('/health', (_req: any, res: any) => {
-    res.json({ ok: true, service: 'umami-analytics' });
+function metricPath(websiteId: string, type: string, startAt: number, endAt: number, limit = 10) {
+  const params = new URLSearchParams({
+    startAt: String(Math.round(startAt)),
+    endAt: String(Math.round(endAt)),
+    type,
+    limit: String(limit),
   });
+  return `/websites/${websiteId}/metrics?${params.toString()}`;
+}
 
-  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' });
-    }
+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()}`;
+}
 
-  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);
+function unitForDays(days: number) {
+  if (days <= 2) return 'hour';
+  if (days <= 90) return 'day';
+  return 'month';
+}
 
-    const key = `summary:${websiteId}:${startAt}:${endAt}`;
+export default (router: any, context: any) => {
+  const env: Env = context.env || process.env;
 
-    const hit = cached(key);
+  router.get('/health', (_req: any, res: any) => {
+    res.json({ ok: true, service: 'umami-analytics', version: '2.0.0' });
+  });
 
-    if (hit) {
-      return res.json(hit);
-    }
+  
 
-    const timezone = env.UMAMI_TIMEZONE || 'Europe/Brussels';
+  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 statsParams = new URLSearchParams({
-      startAt: String(Math.round(startAt)),
-      endAt: String(Math.round(endAt)),
-      unit: 'day',
-      timezone,
-    });
+      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);
 
-    const metricsParams = (type: string, limit = 10) =>
-      new URLSearchParams({
+      const statsParams = new URLSearchParams({
         startAt: String(Math.round(startAt)),
         endAt: String(Math.round(endAt)),
-        type,
-        limit: String(limit),
-        timezone,
       });
 
-    const [stats, pages, referrers, events] = await Promise.all([
-      umamiGet(
-        env,
-        `/websites/${websiteId}/stats?${statsParams.toString()}`
-      ),
-
-      umamiGet(
-        env,
-        `/websites/${websiteId}/metrics?${metricsParams('url').toString()}`
-      ),
-
-      umamiGet(
-        env,
-        `/websites/${websiteId}/metrics?${metricsParams('referrer').toString()}`
-      ),
-
-      umamiGet(
-        env,
-        `/websites/${websiteId}/metrics?${metricsParams('event').toString()}`
-      ).catch(() => []),
-    ]);
-
-    const payload = {
-      websiteId,
-      range: {
-        startAt,
-        endAt,
-        days,
-      },
-      stats,
-      pages,
-      referrers,
-      events,
-    };
-
-    setCached(key, payload);
-
-    res.json(payload);
-  } catch (error: any) {
-    res.status(500).json({
-      error: error.message || 'Unknown error',
-    });
-  }
-});
+      const stats = await umamiGet(env, `/websites/${websiteId}/stats?${statsParams.toString()}`);
+
+      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, preset, unit },
+        stats,
+        pageviews,
+        pages,
+        referrers,
+        countries,
+        browsers,
+        os,
+        devices,
+        events,
+      };
+
+      setCached(key, payload);
+      res.json(payload);
+    } catch (error: any) {
+      res.status(500).json({ error: error.message || 'Unknown error' });
+    }
+  });
 };

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>