UNPKG

unleash-server

Version:

Unleash is an enterprise ready feature flag service. It provides different strategies for handling feature flags.

github.com/Unleash/unleash

Unleash/unleash

2 lines (1 loc) • 5.5 kB
1
2
import{dF as W,dG as G,b9 as T,i$ as $,r as u,ek as L,j as t,B as x,ft as U,V as _,j0 as J,s as o,aE as O,T as y,e as V,cJ as Z,dH as q,h as F,aD as z,b5 as K,bh as H,em as Q,i as X}from"./index-BAMIkcom.js";import{b as Y,C as tt,G as at,a as et}from"./GridLayoutWrapper-2osRRgh4.js";const rt=()=>{const a="api/admin/impact-metrics/plausible",{data:n,refetch:d,loading:h,error:l}=W(T(a),()=>G(T(a),"Plausible metrics"),{refreshInterval:3e4,revalidateOnFocus:!0});return{data:n||{data:[]},refetch:d,loading:h,error:l}},st=({aspectRatio:a,overrideOptions:n={},errorTitle:d="Failed to load Plausible metrics.",emptyDataDescription:h="No Plausible analytics data available.",noSeriesPlaceholder:l,isPreview:C})=>{const{data:e,loading:m,error:v}=rt(),E=$({fill:!0,type:"constant"}),g=u.useMemo(()=>{if(!(e!=null&&e.data)||e.data.length===0)return{labels:[],datasets:[]};const s=[...e.data].sort((p,w)=>new Date(p.date).getTime()-new Date(w.date).getTime());return{labels:s.map(p=>p.date),datasets:[{label:"Events",data:s.map(p=>p.count),borderColor:"rgb(129, 122, 254)",backgroundColor:"rgba(129, 122, 254, 0.1)",fill:!0,tension:.1}]}},[e]),P=!!v,c=m,j=u.useMemo(()=>!c&&(!(e!=null&&e.data)||e.data.length===0||!g.datasets.some(s=>s.data.length>1)),[g,c,e]),D=j?l||t.jsx(J,{title:"No Plausible data available",description:h}):c,M={...n,scales:{x:{type:"time",time:{unit:"hour",displayFormats:{hour:"MMM dd, HH:mm"},tooltipFormat:"PPpp"},ticks:{maxRotation:45,minRotation:45,maxTicksLimit:8}},y:{beginAtZero:!0,title:{display:!0,text:"Events"},ticks:{precision:0,callback:s=>typeof s=="number"?L(s):s}}},plugins:{legend:{display:!0,position:"bottom",labels:{usePointStyle:!0,boxWidth:8,padding:12}}},animations:{x:{duration:0},y:{duration:0}}};return t.jsx(t.Fragment,{children:t.jsx(x,{sx:C?{}:{height:"100%",width:"100%","& > div":{height:"100% !important",width:"100% !important"}},children:t.jsx(U,{data:j||c?E:g,aspectRatio:a,overrideOptions:M,cover:P?t.jsx(_,{severity:"error",children:d}):D})})})},it=o(O)(({theme:a})=>({borderRadius:`${a.shape.borderRadiusMedium}px`,boxShadow:"none",display:"flex",flexDirection:"column",height:"100%"})),ot=o(x)({flex:1,display:"flex",flexDirection:"column",minHeight:0}),nt=o(x)(({theme:a})=>({position:"relative",minWidth:0,flexGrow:1,height:"100%",display:"flex",flexDirection:"column",margin:"auto 0",padding:a.spacing(3)})),dt=o(x)(({theme:a})=>({display:"flex",gap:a.spacing(2),alignItems:"center",padding:a.spacing(1.5,2),borderBottom:`1px solid ${a.palette.divider}`})),lt=o(x)(({theme:a})=>({display:"flex",flexDirection:"column",justifyContent:"flex-end",flexGrow:1,overflow:"hidden",textOverflow:"ellipsis"})),ct=()=>t.jsxs(it,{children:[t.jsx(dt,{children:t.jsxs(lt,{children:[t.jsx(y,{variant:"h6",children:"Plausible Analytics"}),t.jsx(y,{variant:"body2",color:"text.secondary",children:"Favorite events from Plausible analytics"})]})}),t.jsx(ot,{children:t.jsx(nt,{children:t.jsx(st,{aspectRatio:1.5,overrideOptions:{maintainAspectRatio:!1},emptyDataDescription:"No Plausible analytics data available for favorite events."})})})]}),pt=o(O)(({theme:a})=>({textAlign:"center",padding:a.spacing(8),backgroundColor:a.palette.background.default,borderRadius:`${a.shape.borderRadiusMedium}px`,boxShadow:"none"}));o(x)(({theme:a})=>({display:"flex",alignItems:"center",cursor:"move",padding:a.spacing(.5),borderRadius:a.shape.borderRadius,color:a.palette.text.secondary,"&:hover":{backgroundColor:a.palette.action.hover,color:a.palette.text.primary}}));const ht=()=>{const[a,n]=u.useState(!1),[d,h]=u.useState(),{setToastApiError:l}=V(),C=Z("plausibleMetrics"),{charts:e,layout:m,loading:v,error:E,addChart:g,updateChart:P,deleteChart:c}=Y(),{metricOptions:j,loading:I,error:D}=q(),M=()=>{h(void 0),n(!0)},s=i=>{h(i),n(!0)},p=async i=>{try{d?await P(d.id,i):await g(i),n(!1)}catch(b){l(F(b))}},w=u.useCallback(async i=>{try{await c(i)}catch(b){l(F(b))}},[c]),A=u.useMemo(()=>{const i=[];if(C){const f={id:"plausible-analytics",component:t.jsx(ct,{}),w:6,h:2};i.push(f)}const b=e.map((f,xt)=>{const r=m==null?void 0:m.find(N=>N.i===f.id);return{id:f.id,component:t.jsx(tt,{config:f,onEdit:s,onDelete:w}),w:(r==null?void 0:r.w)??6,h:(r==null?void 0:r.h)??4,x:r==null?void 0:r.x,y:r==null?void 0:r.y,minW:4,minH:2,maxW:12,maxH:8}});return[...i,...b]},[e,m,s,w,C]),S=D||E,k=I||v,R=e.length>=20,B=k||!!S||R;return t.jsxs(t.Fragment,{children:[t.jsx(z,{title:"Impact Metrics",titleElement:t.jsx(y,{variant:"h1",component:"span",children:"Impact Metrics"}),actions:t.jsx(K,{variant:"contained",startIcon:t.jsx(H,{}),onClick:M,disabled:B,permission:Q,tooltipProps:R?{title:"Maximum of 20 impact metrics charts allowed",arrow:!0}:void 0,children:"Add Chart"})}),e.length===0&&!k&&!S?t.jsxs(pt,{children:[t.jsx(y,{variant:"h6",gutterBottom:!0,children:"No impact metrics charts configured"}),t.jsx(y,{variant:"body2",color:"text.secondary",sx:{mb:3},children:"Add your first impact metrics chart to start tracking performance with a beautiful drag-and-drop grid layout"}),t.jsx(X,{variant:"contained",startIcon:t.jsx(H,{}),onClick:M,disabled:k||!!S,children:"Add Chart"})]}):A.length>0?t.jsx(at,{items:A}):null,t.jsx(et,{open:a,onClose:()=>n(!1),onSave:p,initialConfig:d,metricSeries:j,loading:I||v})]})},mt=o("div")(({theme:a})=>({paddingTop:a.spacing(2)})),ut=o("div")(({theme:a})=>({display:"flex",flexDirection:"column",gap:a.spacing(4),paddingBottom:a.spacing(4)})),ft=()=>t.jsx(mt,{children:t.jsx(ut,{children:t.jsx(ht,{})})});export{ft as ImpactMetricsPage};