https://usability-dashboard-mes.vercel.app/_next/static/chunks/pages/buttons-cceb857ddddbcb26.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[627],{6775:function(e,t,r){(window.__NEXT_P=window.__NEXT_P||[]).push(["/buttons",function(){return r(2230)}])},5677:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),function(e,t){for(var r in t)Object.defineProperty(e,r,{enumerable:!0,get:t[r]})}(t,{noSSR:function(){return s},default:function(){return o}});let n=r(8754),l=(r(7294),n._(r(8976)));function a(e){return{default:(null==e?void 0:e.default)||e}}function s(e,t){return delete t.webpack,delete t.modules,e(t)}function o(e,t){let r=l.default,n={loading:e=>{let{error:t,isLoading:r,pastDelay:n}=e;return null}};e instanceof Promise?n.loader=()=>e:"function"==typeof e?n.loader=e:"object"==typeof e&&(n={...n,...e}),n={...n,...t};let o=n.loader;return(n.loadableGenerated&&(n={...n,...n.loadableGenerated},delete n.loadableGenerated),"boolean"!=typeof n.ssr||n.ssr)?r({...n,loader:()=>null!=o?o().then(a):Promise.resolve(a(()=>null))}):(delete n.webpack,delete n.modules,s(r,n))}("function"==typeof t.default||"object"==typeof t.default&&null!==t.default)&&void 0===t.default.__esModule&&(Object.defineProperty(t.default,"__esModule",{value:!0}),Object.assign(t.default,t),e.exports=t.default)},2254:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"LoadableContext",{enumerable:!0,get:function(){return a}});let n=r(8754),l=n._(r(7294)),a=l.default.createContext(null)},8976:function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"default",{enumerable:!0,get:function(){return f}});let n=r(8754),l=n._(r(7294)),a=r(2254),s=[],o=[],i=!1;function u(e){let t=e(),r={loading:!0,loaded:null,error:null};return r.promise=t.then(e=>(r.loading=!1,r.loaded=e,e)).catch(e=>{throw r.loading=!1,r.error=e,e}),r}class c{promise(){return this._res.promise}retry(){this._clearTimeouts(),this._res=this._loadFn(this._opts.loader),this._state={pastDelay:!1,timedOut:!1};let{_res:e,_opts:t}=this;e.loading&&("number"==typeof t.delay&&(0===t.delay?this._state.pastDelay=!0:this._delay=setTimeout(()=>{this._update({pastDelay:!0})},t.delay)),"number"==typeof t.timeout&&(this._timeout=setTimeout(()=>{this._update({timedOut:!0})},t.timeout))),this._res.promise.then(()=>{this._update({}),this._clearTimeouts()}).catch(e=>{this._update({}),this._clearTimeouts()}),this._update({})}_update(e){this._state={...this._state,error:this._res.error,loaded:this._res.loaded,loading:this._res.loading,...e},this._callbacks.forEach(e=>e())}_clearTimeouts(){clearTimeout(this._delay),clearTimeout(this._timeout)}getCurrentValue(){return this._state}subscribe(e){return this._callbacks.add(e),()=>{this._callbacks.delete(e)}}constructor(e,t){this._loadFn=e,this._opts=t,this._callbacks=new Set,this._delay=null,this._timeout=null,this.retry()}}function d(e){return function(e,t){let r=Object.assign({loader:null,loading:null,delay:200,timeout:null,webpack:null,modules:null},t),n=null;function s(){if(!n){let t=new c(e,r);n={getCurrentValue:t.getCurrentValue.bind(t),subscribe:t.subscribe.bind(t),retry:t.retry.bind(t),promise:t.promise.bind(t)}}return n.promise()}if(!i){let e=r.webpack?r.webpack():r.modules;e&&o.push(t=>{for(let r of e)if(t.includes(r))return s()})}function u(e,t){!function(){s();let e=l.default.useContext(a.LoadableContext);e&&Array.isArray(r.modules)&&r.modules.forEach(t=>{e(t)})}();let o=l.default.useSyncExternalStore(n.subscribe,n.getCurrentValue,n.getCurrentValue);return l.default.useImperativeHandle(t,()=>({retry:n.retry}),[]),l.default.useMemo(()=>{var t;return o.loading||o.error?l.default.createElement(r.loading,{isLoading:o.loading,pastDelay:o.pastDelay,timedOut:o.timedOut,error:o.error,retry:n.retry}):o.loaded?l.default.createElement((t=o.loaded)&&t.default?t.default:t,e):null},[e,o])}return u.preload=()=>s(),u.displayName="LoadableComponent",l.default.forwardRef(u)}(u,e)}function h(e,t){let r=[];for(;e.length;){let n=e.pop();r.push(n(t))}return Promise.all(r).then(()=>{if(e.length)return h(e,t)})}d.preloadAll=()=>new Promise((e,t)=>{h(s).then(e,t)}),d.preloadReady=e=>(void 0===e&&(e=[]),new Promise(t=>{let r=()=>(i=!0,t());h(o,e).then(r,r)})),window.__NEXT_PRELOADREADY=d.preloadReady;let f=d},2230:function(e,t,r){"use strict";r.r(t),r.d(t,{default:function(){return b}});var n=r(5893),l=r(7294),a=r(1664),s=r.n(a),o=r(4184),i=r.n(o),u=r(8368),c=r(8436),d=r(4900),h=r(7251),f=r(9560),m=r(7015),p=r(5973);function b(){let[e,t]=l.useState([]),[r,a]=l.useState(!1),[o,i]=l.useState(!0),[u,b]=l.useState(!0);return l.useEffect(()=>{u&&(a(!1),i(!0),fetch("/api/matomo/events/button").then(e=>e.ok?e.json():(a(!0),i(!1),t(c.R_),b(!1),c.R_)).then(e=>{i(!1),b(!1),t(null===e?[]:e)}))},[u]),(0,n.jsx)(d.Ar,{location:"Buttons",children:(0,n.jsxs)("article",{className:"flex flex-col justify-center gap-1",children:[(0,n.jsx)("h1",{className:"text-4xl font-bold tracking-tight sm:text-5xl",children:"Button Insights"}),(0,n.jsxs)("div",{className:"mb-2 flex w-full items-center justify-between gap-2",children:[(0,n.jsxs)("p",{className:"max-w-4xl grow text-lg font-normal",children:["Inspect how your users are using the ",(0,n.jsx)("span",{className:"font-bold underline",children:"buttons"})," across the platform."]}),(0,n.jsxs)("div",{className:"flex items-center gap-2",children:[!1===r||null!==e?null:(0,n.jsx)("button",{title:"Use mock data",className:"hover:opacity-80",onClick:()=>{a(!1),t(c.R_)},children:(0,n.jsx)(f.Z,{className:"h-6 w-6"})}),(0,n.jsx)(s(),{target:"_blank",title:"Inspect JSON data",href:"/api/matomo/events/button",className:"hover:opacity-80",children:(0,n.jsx)(m.Z,{className:"h-6 w-6"})}),(0,n.jsx)("button",{title:"View JSON data",className:"hover:opacity-80",onClick:()=>{let t=JSON.stringify(e),r="data:application/json;charset=utf-8,".concat(encodeURIComponent(t));window.open(r,"_blank")},children:(0,n.jsx)("svg",{viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",fill:"

1currentColor",className:"h-6 w-6",children:(0,n.jsx)("path",{d:"M5.759 3.975h1.783V5.76H5.759v4.458A1.783 1.783 0 0 1 3.975 12a1.783 1.783 0 0 1 1.784 1.783v4.459h1.783v1.783H5.759c-.954-.24-1.784-.803-1.784-1.783v-3.567a1.783 1.783 0 0 0-1.783-1.783H1.3v-1.783h.892a1.783 1.783 0 0 0 1.783-1.784V5.76A1.783 1.783 0 0 1 5.76 3.975m12.483 0a1.783 1.783 0 0 1 1.783 1.784v3.566a1.783 1.783 0 0 0 1.783 1.784h.892v1.783h-.892a1.783 1.783 0 0 0-1.783 1.783v3.567a1.783 1.783 0 0 1-1.783 1.783h-1.784v-1.783h1.784v-4.459A1.783 1.783 0 0 1 20.025 12a1.783 1.783 0 0 1-1.783-1.783V5.759h-1.784V3.975h1.784M12 14.675a.892.892 0 0 1 .892.892.892.892 0 0 1-.892.892.892.892 0 0 1-.891-.892.892.892 0 0 1 .891-.892m-3.566 0a.892.892 0 0 1 .891.892.892.892 0 0 1-.891.892.892.892 0 0 1-.892-.892.892.892 0 0 1 .892-.892m7.133 0a.892.892 0 0 1 .891.892.892.892 0 0 1-.891.892.892.892 0 0 1-.892-.892.892.892 0 0 1 .892-.892z"})})}),(0,n.jsx)("button",{title:"Retry fetching data",className:"hover:opacity-80",onClick:()=>{b(!0)},children:(0,n.jsx)(p.Z,{className:"h-6 w-6"})})]})]}),(0,n.jsx)(x,{data:e}),o&&(0,n.jsx)(h.gb,{}),r&&null===e&&(0,n.jsx)(h.TX,{})]})})}function x(e){let{data:t}=e,r=t.reduce((e,t)=>e+t.buttonClicks.length,0);return 0===t.length?null:(0,n.jsx)("div",{className:"w-full space-y-3 rounded-xl bg-white p-3 dark:bg-darker",children:t.sort((e,t)=>e.buttonClicks>t.buttonClicks?-1:1).map((e,t)=>{let l=e.buttonClicks.reduce((e,t)=>{let{path:r}=t;return e[r]||(e[r]=0),e[r]++,e},{}),a=Object.keys(l).sort((e,t)=>l[e]>l[t]?-1:1);return(0,n.jsx)(u.p,{children:s=>{let{open:o}=s;return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsxs)(u.p.Button,{className:i()(o?"bg-teal-700/80 text-white hover:opacity-90 dark:bg-secondary/80":"bg-slate-100 text-slate-900 hover:bg-slate-200 dark:text-white","group flex w-full items-center justify-between rounded-lg px-4 py-2 text-left text-sm font-medium tracking-tighter shadow transition dark:bg-secondary/20 dark:hover:bg-secondary/60"),children:[(0,n.jsx)("span",{children:e.name}),(0,n.jsxs)("span",{className:"flex items-center gap-2",children:[(0,n.jsxs)("span",{className:i()(o?"border-slate-600 bg-slate-600":"border-slate-600 bg-slate-600/60","inline-flex min-h-[2rem] min-w-[2rem] items-center justify-center rounded border  px-2 py-1 text-xs font-medium text-white shadow"),children:[(100*e.clickCount/r).toFixed(0),"%"]}),(0,n.jsx)("span",{className:i()(o?"border-slate-600 bg-slate-600":"border-slate-600 bg-slate-600/60","inline-flex min-h-[2rem] min-w-[2rem] items-center justify-center rounded border  px-2 py-1 text-xs font-medium text-white shadow"),children:e.clickCount})]})]}),(0,n.jsx)(u.p.Panel,{className:"z-20 rounded-lg bg-slate-100 px-3 py-3 dark:bg-white/10",children:(0,n.jsx)("div",{className:"flex flex-col",children:a.map((r,s)=>(0,n.jsxs)("div",{className:"flex w-full flex-col space-y-1",children:[(0,n.jsxs)("div",{className:i()("w-full self-stretch transition","flex items-center justify-between gap-x-8 px-1 py-1 font-mono text-xs tracking-tighter text-slate-700 dark:text-white",s!==a.length-1?"border-b border-primary/40 dark:border-secondary/40":""),children:[(0,n.jsx)("span",{className:"flex items-center gap-x-1",children:(0,n.jsx)("span",{className:"truncate whitespace-nowrap tracking-tighter",children:r})}),(0,n.jsx)("span",{children:l[r]})]}),(0,n.jsx)("ul",{className:"hidden",children:e.buttonClicks.filter(e=>e.path===r).map((e,r)=>(0,n.jsxs)("li",{className:"flex items-center justify-between gap-1 font-mono text-xxs tracking-tighter",children:[(0,n.jsx)("span",{children:e.time}),(0,n.jsx)("span",{children:e.component})]},"button-".concat(t,"-path-").concat(s,"-click-").concat(r)))})]},"path-".concat(s)))})})]})}},"button-".concat(t))})})}},5152:function(e,t,r){e.exports=r(5677)},6454:function(e,t,r){"use strict";var n=r(7294);let l=n.forwardRef(function({title:e,titleId:t,...r},l){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:l,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 12.75l3 3m0 0l3-3m-3 3v-7.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))});t.Z=l},5973:function(e,t,r){"use strict";var n=r(7294);let l=n.forwardRef(function({title:e,titleId:t,...r},l){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:l,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99"}))});t.Z=l},9560:function(e,t,r){"use strict";var n=r(7294);let l=n.forwardRef(function({title:e,titleId:t,...r},l){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:l,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375m16.5 0c0-2.278-3.694-4.125-8.25-4.125S3.75 4.097 3.75 6.375m16.5 0v11.25c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125V6.375m16.5 0v3.75m-16.5-3.75v3.75m16.5 0v3.75C20.25 16.153 16.556 18 12 18s-8.25-1.847-8.25-4.125v-3.75m16.5 0c0 2.278-3.694 4.125-8.25 4.125s-8.25-1.847-8.25-4.125"}))});t.Z=l},9517:function(e,t,r){"use strict";var n=r(7294);let l=n.forwardRef(function({title:e,titleId:t,...r},l){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:l,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M15 12H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"}))});t.Z=l},1452:function(e,t,r){"use strict";var n=r(7294);let l=n.forwardRef(function({title:e,titleId:t,...r},l){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:l,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"}))});t.Z=l},5362:function(e,t,r){"use strict";var n=r(7294);let l=n.forwardRef(function({title:e,titleId:t,...r},l){return n.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:1.5,stroke:"currentColor","aria-hidden":"true",ref:l,"aria-labelledby":t},r),e?n.createElement("title",{id:t},e):null,n.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z"}))});t.Z=l}},function(e){e.O(0,[32,465,679,774,888,179],function(){return e(e.s=6775)}),_N_E=e.O()}]);