unleash-server/frontend/build/static/FeatureMetricsChart-Dg3LuBck.js

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

import{bs as f,k$ as p,db as y,lg as c,b as g,bp as m,r as d,j as u,l1 as C,dr as M,ds as v,dt as h,l2 as k,lk as $,l5 as E,l4 as S,l3 as j}from"./index-Cikp5fMR.js";import{d as D}from"./FeatureViewLazyExport-0rEqFrgo.js";import"./MarkCompletedDialogue-C86IfCH-.js";import"./aggregateFeatureMetrics-CAg4DbsF.js";import"./FeatureStaleDialog-DmUpnOZe.js";import"./PercentageDonut-CC9h07JZ.js";import"./GridLayoutWrapper-Dwn6EwoE.js";const T=(e,s,o)=>{const a={label:"Exposed",borderColor:e.palette.charts.flagMetrics.exposed,backgroundColor:e.palette.charts.flagMetrics.exposed,data:b(s,o,r=>r.yes)},t={label:"Not exposed",borderColor:e.palette.charts.flagMetrics.notExposed,backgroundColor:e.palette.charts.flagMetrics.notExposed,data:b(s,o,r=>r.no)};return{datasets:[a,t]}},b=(e,s,o)=>e.map(a=>({x:a.timestamp,y:o(a),variants:a.variants||{}})),_=(e,s)=>{if(s===0)return"";const[o,a]=e,t=Math.floor(Number(a)/s*100);return`${a} (${t}%) - ${o}`},q=(e,s,o,a)=>({locale:a.locale,responsive:!0,maintainAspectRatio:!1,interaction:{mode:"index",intersect:!1},color:e.palette.text.secondary,plugins:{tooltip:{backgroundColor:e.palette.background.paper,bodyColor:e.palette.text.primary,titleColor:e.palette.text.secondary,borderColor:e.palette.primary.main,borderWidth:1,padding:10,boxPadding:5,usePointStyle:!0,position:"nearest",itemSort:(t,r)=>{const l=["Exposed","Not exposed"],n=l.indexOf(t.dataset.label),i=l.indexOf(r.dataset.label);return n-i},callbacks:{beforeBody:t=>`${t.reduce((l,n)=>l+n.parsed.y,0).toLocaleString(a.locale)} - Total requests`,label:t=>`${t.formattedValue} - ${t.dataset.label}`,afterLabel:t=>{const r=t.dataset.data[t.dataIndex];if(t.dataset.label!=="Exposed"||r.variants===void 0)return"";const{disabled:l,...n}=r.variants;return Object.entries(n).map(i=>_(i,r.y)).join(`
`)},title:t=>`Time: ${o>48?y(t[0].parsed.x,a.locale,"UTC"):p(t[0].parsed.x,a.locale)}`}},legend:{position:"top",align:"end",labels:{boxWidth:10,boxHeight:10,usePointStyle:!0}},title:{text:L(o),position:"top",align:"start",display:!0,font:{size:16,weight:"400"},color:e.palette.text.primary}},scales:{y:{type:"linear",stacked:!0,title:{display:!0,text:"Number of requests",color:e.palette.text.secondary},suggestedMin:0,ticks:{precision:0,color:e.palette.text.secondary},grid:{color:e.palette.divider,borderColor:e.palette.divider}},x:{type:"time",stacked:!0,time:{unit:o>48?"day":"hour"},grid:{display:!1},ticks:{callback:(t,r,l)=>o>48?f(l[r].value,a.locale,"UTC"):p(l[r].value,a.locale),color:e.palette.text.secondary}}}}),L=e=>e===1?"Requests in the last hour":`Requests in the last ${D(e)}`;c.font={...c.font,family:"Sen",size:13,weight:"400"};const V=({metrics:e,hoursBack:s,statsSectionId:o})=>{const a=g(),{locationSettings:t}=m(),r=d.useMemo(()=>[...e].sort((i,x)=>i.timestamp.localeCompare(x.timestamp)),[e]),l=d.useMemo(()=>q(a,r,s,t),[a,r,s,t]),n=d.useMemo(()=>T(a,r,t),[a,r,t]);return u.jsx("div",{style:{height:400},children:u.jsx(C,{data:n,options:l,"aria-label":"A stacked bar chart showing feature flag exposure metrics: exposed and not exposed requests.","aria-describedby":o})})};M.register(v,h,k,$,E,S,j);export{V as FeatureMetricsChart,V as default};