"use strict";(self.webpackChunk_mlflow_mlflow=self.webpackChunk_mlflow_mlflow||[]).push([[767],{90767:function(e,t,o){o.d(t,{TraceTokenUsageChart:function(){return _}});var n=o(68248),a=o(46709),i=o(27757),s=o(82716),r=o(40724),u=o(66774),l=o(90970),d=o(56809),p=o(60719),m=o(49960),T=o(44941),c=(0,l.gu)({chartName:"AreaChart",GraphicalChild:d.G,axisComponents:[{axisType:"xAxis",AxisComp:p.W},{axisType:"yAxis",AxisComp:m.h}],formatAxisMap:T.pr}),g=o(858),k=o(6581),v=o(54313),h=o(23327),M=o(83110),y=o(69983);var f=o(3409),I=o(73408);const _=()=>{const{theme:e}=(0,i.u)(),t=(0,f.zZ)(),o=(0,f.IT)(),l=(0,f.gy)(),{getOpacity:T,handleLegendMouseEnter:_,handleLegendMouseLeave:S}=(0,M.pH)(.8,.2),{chartData:O,totalTokens:Y,totalInputTokens:x,totalOutputTokens:A,isLoading:C,error:D,hasData:L}=function(){var e,t,o;const{experimentId:n,startTimeMs:i,endTimeMs:s,timeIntervalSeconds:r,timeBuckets:u}=(0,y.W)(),{data:l,isLoading:d,error:p}=(0,h.o4)({experimentId:n,startTimeMs:i,endTimeMs:s,viewType:v.mW.TRACES,metricName:v.po.INPUT_TOKENS,aggregations:[{aggregation_type:v.DF.SUM}],timeIntervalSeconds:r}),{data:m,isLoading:T,error:c}=(0,h.o4)({experimentId:n,startTimeMs:i,endTimeMs:s,viewType:v.mW.TRACES,metricName:v.po.OUTPUT_TOKENS,aggregations:[{aggregation_type:v.DF.SUM}],timeIntervalSeconds:r}),{data:g,isLoading:k,error:f}=(0,h.o4)({experimentId:n,startTimeMs:i,endTimeMs:s,viewType:v.mW.TRACES,metricName:v.po.TOTAL_TOKENS,aggregations:[{aggregation_type:v.DF.SUM}]}),I=(0,a.useMemo)(()=>(null===l||void 0===l?void 0:l.data_points)||[],[null===l||void 0===l?void 0:l.data_points]),_=(0,a.useMemo)(()=>(null===m||void 0===m?void 0:m.data_points)||[],[null===m||void 0===m?void 0:m.data_points]),S=d||T||k,O=p||c||f,Y=(null===g||void 0===g||null===(e=g.data_points)||void 0===e||null===(t=e[0])||void 0===t||null===(o=t.values)||void 0===o?void 0:o[v.DF.SUM])||0,x=(0,a.useMemo)(()=>I.reduce((e,t)=>{var o;return e+((null===(o=t.values)||void 0===o?void 0:o[v.DF.SUM])||0)},0),[I]),A=(0,a.useMemo)(()=>_.reduce((e,t)=>{var o;return e+((null===(o=t.values)||void 0===o?void 0:o[v.DF.SUM])||0)},0),[_]),C=(0,a.useCallback)(e=>{var t;return(null===(t=e.values)||void 0===t?void 0:t[v.DF.SUM])||0},[]),D=(0,M.NM)(I,C),L=(0,M.NM)(_,C);return{chartData:(0,a.useMemo)(()=>u.map(e=>({name:(0,M.fq)(e,r),inputTokens:D.get(e)||0,outputTokens:L.get(e)||0})),[u,D,L,r]),totalTokens:Y,totalInputTokens:x,totalOutputTokens:A,isLoading:S,error:O,hasData:I.length>0||_.length>0}}(),U=(0,a.useCallback)((e,t)=>[(0,M.B4)(e),t],[]),w={inputTokens:e.colors.blue400,outputTokens:e.colors.green400};return C?(0,I.Y)(f.lh,{}):D?(0,I.Y)(f.nN,{}):(0,I.FD)(f.h,{componentId:"mlflow.charts.trace_token_usage",children:[(0,I.Y)(f.XQ,{icon:(0,I.Y)(s.LightningIcon,{}),title:(0,I.Y)(r.A,{id:"TLHzWu",defaultMessage:"Token Usage"}),value:(0,M.B4)(Y),subtitle:`(${(0,M.B4)(x)} input, ${(0,M.B4)(A)} output)`}),(0,I.Y)("div",{css:(0,n.AH)({height:f.tz,marginTop:e.spacing.sm},""),children:L?(0,I.Y)(u.u,{width:"100%",height:"100%",children:(0,I.FD)(c,{data:O,margin:{top:10,right:30,left:10,bottom:0},children:[(0,I.Y)(p.W,{dataKey:"name",...t}),(0,I.Y)(m.h,{...o}),(0,I.Y)(g.m,{content:(0,I.Y)(f.Vn,{formatter:U}),cursor:{fill:e.colors.actionTertiaryBackgroundHover}}),(0,I.Y)(d.G,{type:"monotone",dataKey:"inputTokens",stackId:"1",stroke:w.inputTokens,fill:w.inputTokens,strokeOpacity:T("Input Tokens"),fillOpacity:T("Input Tokens"),strokeWidth:2,name:"Input Tokens"}),(0,I.Y)(d.G,{type:"monotone",dataKey:"outputTokens",stackId:"1",stroke:w.outputTokens,fill:w.outputTokens,strokeOpacity:T("Output Tokens"),fillOpacity:T("Output Tokens"),strokeWidth:2,name:"Output Tokens"}),(0,I.Y)(k.s,{verticalAlign:"bottom",iconType:"plainline",onMouseEnter:_,onMouseLeave:S,...l})]})}):(0,I.Y)(f.iE,{})})]})}}}]);