tokviz 0.1.0 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/client/assets/index-B8TeJ617.css +1 -0
- package/dist/client/assets/{index-SNGqhtM5.js → index-DXBuZy55.js} +1 -1
- package/dist/client/favicon.svg +13 -0
- package/dist/client/index.html +3 -2
- package/dist/server/index.js +89 -1
- package/package.json +5 -4
- package/dist/client/assets/index-R0O4p4a7.css +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--bg: #ffffff;--bg-secondary: #f5f5f5;--text: #1a1a1a;--text-secondary: #666666;--border: #e0e0e0;--accent: #2563eb;--accent-hover: #1d4ed8;--card-bg: #ffffff;--card-shadow: 0 1px 3px rgba(0, 0, 0, .1);--chart-input: #3b82f6;--chart-output: #f59e0b;--chart-cost: #8b5cf6}@media(prefers-color-scheme:dark){:root{--bg: #0a0a0a;--bg-secondary: #1a1a1a;--text: #e5e5e5;--text-secondary: #999999;--border: #333333;--accent: #3b82f6;--accent-hover: #60a5fa;--card-bg: #1a1a1a;--card-shadow: 0 1px 3px rgba(0, 0, 0, .3);--chart-input: #60a5fa;--chart-output: #fbbf24;--chart-cost: #a78bfa}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.app{max-width:1200px;margin:0 auto;padding:24px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.header h1{font-size:24px;font-weight:600;display:flex;align-items:center;gap:8px}.logo{width:28px;height:28px}.connection-status{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:#ef4444}.status-dot.connected{background:#22c55e}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px}.tab{padding:8px 16px;border:none;background:none;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:16px;box-shadow:var(--card-shadow)}.card-label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:4px}.card-value{font-size:24px;font-weight:600}.chart-container{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:24px;box-shadow:var(--card-shadow)}.chart-title{font-size:14px;font-weight:500;margin-bottom:16px;color:var(--text-secondary)}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);font-weight:600;color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:.5px}td{padding:10px 12px;border-bottom:1px solid var(--border)}tr.clickable{cursor:pointer}tr.clickable:hover{background:var(--bg-secondary)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;color:var(--text-secondary)}.empty-state h2{font-size:20px;margin-bottom:12px;color:var(--text)}.empty-state p{max-width:500px;margin-bottom:8px}.empty-state code{background:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:13px}.detail-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.detail-panel{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:900px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.detail-panel h3{margin-bottom:16px;font-size:16px}.detail-panel .close-btn{float:right;border:none;background:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:4px 8px}.detail-panel .close-btn:hover{color:var(--text)}.attr-table{width:100%}.attr-table td{padding:6px 8px;vertical-align:top}.attr-table td:first-child{font-weight:500;white-space:nowrap;width:40%;color:var(--text-secondary)}.attr-table td:last-child{word-break:break-all}.mono{font-family:SF Mono,Fira Code,monospace;font-size:12px}
|
|
@@ -114,4 +114,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
114
114
|
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function NI(t,e){if(t){if(typeof t=="string")return sb(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);if(n==="Object"&&t.constructor&&(n=t.constructor.name),n==="Map"||n==="Set")return Array.from(t);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return sb(t,e)}}function RI(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}function qI(t){if(Array.isArray(t))return sb(t)}function sb(t,e){(e==null||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function zI(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function fM(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,vD(r.key),r)}}function $I(t,e,n){return e&&fM(t.prototype,e),n&&fM(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function BI(t,e,n){return e=rs(e),LI(t,dD()?Reflect.construct(e,n||[],rs(t).constructor):e.apply(t,n))}function LI(t,e){if(e&&(fu(e)==="object"||typeof e=="function"))return e;if(e!==void 0)throw new TypeError("Derived constructors may only return object or undefined");return UI(t)}function UI(t){if(t===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function dD(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(dD=function(){return!!t})()}function rs(t){return rs=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(n){return n.__proto__||Object.getPrototypeOf(n)},rs(t)}function kI(t,e){if(typeof e!="function"&&e!==null)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&hb(t,e)}function hb(t,e){return hb=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(r,u){return r.__proto__=u,r},hb(t,e)}function Ln(t,e,n){return e=vD(e),e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function vD(t){var e=HI(t,"string");return fu(e)=="symbol"?e:e+""}function HI(t,e){if(fu(t)!="object"||!t)return t;var n=t[Symbol.toPrimitive];if(n!==void 0){var r=n.call(t,e);if(fu(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}var Ia=(function(t){function e(){var n;zI(this,e);for(var r=arguments.length,u=new Array(r),l=0;l<r;l++)u[l]=arguments[l];return n=BI(this,e,[].concat(u)),Ln(n,"state",{isAnimationFinished:!0,totalLength:0}),Ln(n,"generateSimpleStrokeDasharray",function(f,s){return"".concat(s,"px ").concat(f-s,"px")}),Ln(n,"getStrokeDasharray",function(f,s,h){var d=h.reduce(function(T,E){return T+E});if(!d)return n.generateSimpleStrokeDasharray(s,f);for(var m=Math.floor(f/d),y=f%d,g=s-f,b=[],_=0,O=0;_<h.length;O+=h[_],++_)if(O+h[_]>y){b=[].concat(Ui(h.slice(0,_)),[y-O]);break}var S=b.length%2===0?[0,g]:[g];return[].concat(Ui(e.repeat(h,m)),Ui(b),S).map(function(T){return"".concat(T,"px")}).join(", ")}),Ln(n,"id",xl("recharts-line-")),Ln(n,"pathRef",function(f){n.mainCurve=f}),Ln(n,"handleAnimationEnd",function(){n.setState({isAnimationFinished:!0}),n.props.onAnimationEnd&&n.props.onAnimationEnd()}),Ln(n,"handleAnimationStart",function(){n.setState({isAnimationFinished:!1}),n.props.onAnimationStart&&n.props.onAnimationStart()}),n}return kI(e,t),$I(e,[{key:"componentDidMount",value:function(){if(this.props.isAnimationActive){var r=this.getTotalLength();this.setState({totalLength:r})}}},{key:"componentDidUpdate",value:function(){if(this.props.isAnimationActive){var r=this.getTotalLength();r!==this.state.totalLength&&this.setState({totalLength:r})}}},{key:"getTotalLength",value:function(){var r=this.mainCurve;try{return r&&r.getTotalLength&&r.getTotalLength()||0}catch{return 0}}},{key:"renderErrorBar",value:function(r,u){if(this.props.isAnimationActive&&!this.state.isAnimationFinished)return null;var l=this.props,f=l.points,s=l.xAxis,h=l.yAxis,d=l.layout,m=l.children,y=Mn(m,El);if(!y)return null;var g=function(O,S){return{x:O.x,y:O.y,value:O.value,errorVal:hn(O.payload,S)}},b={clipPath:r?"url(#clipPath-".concat(u,")"):null};return L.createElement(he,b,y.map(function(_){return L.cloneElement(_,{key:"bar-".concat(_.props.dataKey),data:f,xAxis:s,yAxis:h,layout:d,dataPointFormatter:g})}))}},{key:"renderDots",value:function(r,u,l){var f=this.props.isAnimationActive;if(f&&!this.state.isAnimationFinished)return null;var s=this.props,h=s.dot,d=s.points,m=s.dataKey,y=Rt(this.props,!1),g=Rt(h,!0),b=d.map(function(O,S){var T=ln(ln(ln({key:"dot-".concat(S),r:3},y),g),{},{index:S,cx:O.x,cy:O.y,value:O.value,dataKey:m,payload:O.payload,points:d});return e.renderDotItem(h,T)}),_={clipPath:r?"url(#clipPath-".concat(u?"":"dots-").concat(l,")"):null};return L.createElement(he,qo({className:"recharts-line-dots",key:"dots"},_),b)}},{key:"renderCurveStatically",value:function(r,u,l,f){var s=this.props,h=s.type,d=s.layout,m=s.connectNulls;s.ref;var y=lM(s,jI),g=ln(ln(ln({},Rt(y,!0)),{},{fill:"none",className:"recharts-line-curve",clipPath:u?"url(#clipPath-".concat(l,")"):null,points:r},f),{},{type:h,layout:d,connectNulls:m});return L.createElement(Hg,qo({},g,{pathRef:this.pathRef}))}},{key:"renderCurveWithAnimation",value:function(r,u){var l=this,f=this.props,s=f.points,h=f.strokeDasharray,d=f.isAnimationActive,m=f.animationBegin,y=f.animationDuration,g=f.animationEasing,b=f.animationId,_=f.animateNewValues,O=f.width,S=f.height,T=this.state,E=T.prevPoints,M=T.totalLength;return L.createElement(jr,{begin:m,duration:y,isActive:d,easing:g,from:{t:0},to:{t:1},key:"line-".concat(b),onAnimationEnd:this.handleAnimationEnd,onAnimationStart:this.handleAnimationStart},function(D){var A=D.t;if(E){var w=E.length/s.length,C=s.map(function(B,V){var Z=Math.floor(V*w);if(E[Z]){var K=E[Z],N=Un(K.x,B.x),I=Un(K.y,B.y);return ln(ln({},B),{},{x:N(A),y:I(A)})}if(_){var J=Un(O*2,B.x),it=Un(S/2,B.y);return ln(ln({},B),{},{x:J(A),y:it(A)})}return ln(ln({},B),{},{x:B.x,y:B.y})});return l.renderCurveStatically(C,r,u)}var q=Un(0,M),z=q(A),F;if(h){var H="".concat(h).split(/[,\s]+/gim).map(function(B){return parseFloat(B)});F=l.getStrokeDasharray(z,M,H)}else F=l.generateSimpleStrokeDasharray(M,z);return l.renderCurveStatically(s,r,u,{strokeDasharray:F})})}},{key:"renderCurve",value:function(r,u){var l=this.props,f=l.points,s=l.isAnimationActive,h=this.state,d=h.prevPoints,m=h.totalLength;return s&&f&&f.length&&(!d&&m>0||!Es(d,f))?this.renderCurveWithAnimation(r,u):this.renderCurveStatically(f,r,u)}},{key:"render",value:function(){var r,u=this.props,l=u.hide,f=u.dot,s=u.points,h=u.className,d=u.xAxis,m=u.yAxis,y=u.top,g=u.left,b=u.width,_=u.height,O=u.isAnimationActive,S=u.id;if(l||!s||!s.length)return null;var T=this.state.isAnimationFinished,E=s.length===1,M=qt("recharts-line",h),D=d&&d.allowDataOverflow,A=m&&m.allowDataOverflow,w=D||A,C=Ct(S)?this.id:S,q=(r=Rt(f,!1))!==null&&r!==void 0?r:{r:3,strokeWidth:2},z=q.r,F=z===void 0?3:z,H=q.strokeWidth,B=H===void 0?2:H,V=n3(f)?f:{},Z=V.clipDot,K=Z===void 0?!0:Z,N=F*2+B;return L.createElement(he,{className:M},D||A?L.createElement("defs",null,L.createElement("clipPath",{id:"clipPath-".concat(C)},L.createElement("rect",{x:D?g:g-b/2,y:A?y:y-_/2,width:D?b:b*2,height:A?_:_*2})),!K&&L.createElement("clipPath",{id:"clipPath-dots-".concat(C)},L.createElement("rect",{x:g-N/2,y:y-N/2,width:b+N,height:_+N}))):null,!E&&this.renderCurve(w,C),this.renderErrorBar(w,C),(E||f)&&this.renderDots(w,K,C),(!O||T)&&ca.renderCallByParent(this.props,s))}}],[{key:"getDerivedStateFromProps",value:function(r,u){return r.animationId!==u.prevAnimationId?{prevAnimationId:r.animationId,curPoints:r.points,prevPoints:u.curPoints}:r.points!==u.curPoints?{curPoints:r.points}:null}},{key:"repeat",value:function(r,u){for(var l=r.length%2!==0?[].concat(Ui(r),[0]):r,f=[],s=0;s<u;++s)f=[].concat(Ui(f),Ui(l));return f}},{key:"renderDotItem",value:function(r,u){var l;if(L.isValidElement(r))l=L.cloneElement(r,u);else if(Tt(r))l=r(u);else{var f=u.key,s=lM(u,CI),h=qt("recharts-line-dot",typeof r!="boolean"?r.className:"");l=L.createElement(m0,qo({key:f},s,{className:h}))}return l}}])})(ot.PureComponent);Ln(Ia,"displayName","Line");Ln(Ia,"defaultProps",{xAxisId:0,yAxisId:0,connectNulls:!1,activeDot:!0,dot:!0,legendType:"line",stroke:"#3182bd",strokeWidth:1,fill:"#fff",points:[],isAnimationActive:!gu.isSsr,animateNewValues:!0,animationBegin:0,animationDuration:1500,animationEasing:"ease",hide:!1,label:!1});Ln(Ia,"getComposedData",function(t){var e=t.props,n=t.xAxis,r=t.yAxis,u=t.xAxisTicks,l=t.yAxisTicks,f=t.dataKey,s=t.bandSize,h=t.displayedData,d=t.offset,m=e.layout,y=h.map(function(g,b){var _=hn(g,f);return m==="horizontal"?{x:EE({axis:n,ticks:u,bandSize:s,entry:g,index:b}),y:Ct(_)?null:r.scale(_),value:_,payload:g}:{x:Ct(_)?null:n.scale(_),y:EE({axis:r,ticks:l,bandSize:s,entry:g,index:b}),value:_,payload:g}});return ln({points:y,layout:m},d)});function su(t){"@babel/helpers - typeof";return su=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},su(t)}function II(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function GI(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,mD(r.key),r)}}function YI(t,e,n){return e&&GI(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function XI(t,e,n){return e=as(e),KI(t,pD()?Reflect.construct(e,n||[],as(t).constructor):e.apply(t,n))}function KI(t,e){if(e&&(su(e)==="object"||typeof e=="function"))return e;if(e!==void 0)throw new TypeError("Derived constructors may only return object or undefined");return VI(t)}function VI(t){if(t===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function pD(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(pD=function(){return!!t})()}function as(t){return as=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(n){return n.__proto__||Object.getPrototypeOf(n)},as(t)}function ZI(t,e){if(typeof e!="function"&&e!==null)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&db(t,e)}function db(t,e){return db=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(r,u){return r.__proto__=u,r},db(t,e)}function yD(t,e,n){return e=mD(e),e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function mD(t){var e=QI(t,"string");return su(e)=="symbol"?e:e+""}function QI(t,e){if(su(t)!="object"||!t)return t;var n=t[Symbol.toPrimitive];if(n!==void 0){var r=n.call(t,e);if(su(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}function vb(){return vb=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},vb.apply(this,arguments)}function FI(t){var e=t.xAxisId,n=x0(),r=O0(),u=eD(e);return u==null?null:ot.createElement(Ou,vb({},u,{className:qt("recharts-".concat(u.axisType," ").concat(u.axisType),u.className),viewBox:{x:0,y:0,width:n,height:r},ticksGenerator:function(f){return Or(f,!0)}}))}var pl=(function(t){function e(){return II(this,e),XI(this,e,arguments)}return ZI(e,t),YI(e,[{key:"render",value:function(){return ot.createElement(FI,this.props)}}])})(ot.Component);yD(pl,"displayName","XAxis");yD(pl,"defaultProps",{allowDecimals:!0,hide:!1,orientation:"bottom",width:0,height:30,mirror:!1,xAxisId:0,tickCount:5,type:"category",padding:{left:0,right:0},allowDataOverflow:!1,scale:"auto",reversed:!1,allowDuplicatedCategory:!0});function hu(t){"@babel/helpers - typeof";return hu=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},hu(t)}function WI(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function JI(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,SD(r.key),r)}}function t7(t,e,n){return e&&JI(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function e7(t,e,n){return e=is(e),n7(t,gD()?Reflect.construct(e,n||[],is(t).constructor):e.apply(t,n))}function n7(t,e){if(e&&(hu(e)==="object"||typeof e=="function"))return e;if(e!==void 0)throw new TypeError("Derived constructors may only return object or undefined");return r7(t)}function r7(t){if(t===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function gD(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(gD=function(){return!!t})()}function is(t){return is=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(n){return n.__proto__||Object.getPrototypeOf(n)},is(t)}function a7(t,e){if(typeof e!="function"&&e!==null)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&pb(t,e)}function pb(t,e){return pb=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(r,u){return r.__proto__=u,r},pb(t,e)}function bD(t,e,n){return e=SD(e),e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function SD(t){var e=i7(t,"string");return hu(e)=="symbol"?e:e+""}function i7(t,e){if(hu(t)!="object"||!t)return t;var n=t[Symbol.toPrimitive];if(n!==void 0){var r=n.call(t,e);if(hu(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}function yb(){return yb=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},yb.apply(this,arguments)}var u7=function(e){var n=e.yAxisId,r=x0(),u=O0(),l=nD(n);return l==null?null:ot.createElement(Ou,yb({},l,{className:qt("recharts-".concat(l.axisType," ").concat(l.axisType),l.className),viewBox:{x:0,y:0,width:r,height:u},ticksGenerator:function(s){return Or(s,!0)}}))},yl=(function(t){function e(){return WI(this,e),e7(this,e,arguments)}return a7(e,t),t7(e,[{key:"render",value:function(){return ot.createElement(u7,this.props)}}])})(ot.Component);bD(yl,"displayName","YAxis");bD(yl,"defaultProps",{allowDuplicatedCategory:!0,allowDecimals:!0,hide:!1,orientation:"left",width:60,height:0,mirror:!1,yAxisId:0,tickCount:5,type:"number",padding:{top:0,bottom:0},allowDataOverflow:!1,scale:"auto",reversed:!1});function sM(t){return f7(t)||c7(t)||l7(t)||o7()}function o7(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
|
|
115
115
|
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function l7(t,e){if(t){if(typeof t=="string")return mb(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);if(n==="Object"&&t.constructor&&(n=t.constructor.name),n==="Map"||n==="Set")return Array.from(t);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return mb(t,e)}}function c7(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}function f7(t){if(Array.isArray(t))return mb(t)}function mb(t,e){(e==null||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var gb=function(e,n,r,u,l){var f=Mn(e,A0),s=Mn(e,Rs),h=[].concat(sM(f),sM(s)),d=Mn(e,zs),m="".concat(u,"Id"),y=u[0],g=n;if(h.length&&(g=h.reduce(function(O,S){if(S.props[m]===r&&Fn(S.props,"extendDomain")&&st(S.props[y])){var T=S.props[y];return[Math.min(O[0],T),Math.max(O[1],T)]}return O},g)),d.length){var b="".concat(y,"1"),_="".concat(y,"2");g=d.reduce(function(O,S){if(S.props[m]===r&&Fn(S.props,"extendDomain")&&st(S.props[b])&&st(S.props[_])){var T=S.props[b],E=S.props[_];return[Math.min(O[0],T,E),Math.max(O[1],T,E)]}return O},g)}return l&&l.length&&(g=l.reduce(function(O,S){return st(S)?[Math.min(O[0],S),Math.max(O[1],S)]:O},g)),g},Wm={exports:{}},hM;function s7(){return hM||(hM=1,(function(t){var e=Object.prototype.hasOwnProperty,n="~";function r(){}Object.create&&(r.prototype=Object.create(null),new r().__proto__||(n=!1));function u(h,d,m){this.fn=h,this.context=d,this.once=m||!1}function l(h,d,m,y,g){if(typeof m!="function")throw new TypeError("The listener must be a function");var b=new u(m,y||h,g),_=n?n+d:d;return h._events[_]?h._events[_].fn?h._events[_]=[h._events[_],b]:h._events[_].push(b):(h._events[_]=b,h._eventsCount++),h}function f(h,d){--h._eventsCount===0?h._events=new r:delete h._events[d]}function s(){this._events=new r,this._eventsCount=0}s.prototype.eventNames=function(){var d=[],m,y;if(this._eventsCount===0)return d;for(y in m=this._events)e.call(m,y)&&d.push(n?y.slice(1):y);return Object.getOwnPropertySymbols?d.concat(Object.getOwnPropertySymbols(m)):d},s.prototype.listeners=function(d){var m=n?n+d:d,y=this._events[m];if(!y)return[];if(y.fn)return[y.fn];for(var g=0,b=y.length,_=new Array(b);g<b;g++)_[g]=y[g].fn;return _},s.prototype.listenerCount=function(d){var m=n?n+d:d,y=this._events[m];return y?y.fn?1:y.length:0},s.prototype.emit=function(d,m,y,g,b,_){var O=n?n+d:d;if(!this._events[O])return!1;var S=this._events[O],T=arguments.length,E,M;if(S.fn){switch(S.once&&this.removeListener(d,S.fn,void 0,!0),T){case 1:return S.fn.call(S.context),!0;case 2:return S.fn.call(S.context,m),!0;case 3:return S.fn.call(S.context,m,y),!0;case 4:return S.fn.call(S.context,m,y,g),!0;case 5:return S.fn.call(S.context,m,y,g,b),!0;case 6:return S.fn.call(S.context,m,y,g,b,_),!0}for(M=1,E=new Array(T-1);M<T;M++)E[M-1]=arguments[M];S.fn.apply(S.context,E)}else{var D=S.length,A;for(M=0;M<D;M++)switch(S[M].once&&this.removeListener(d,S[M].fn,void 0,!0),T){case 1:S[M].fn.call(S[M].context);break;case 2:S[M].fn.call(S[M].context,m);break;case 3:S[M].fn.call(S[M].context,m,y);break;case 4:S[M].fn.call(S[M].context,m,y,g);break;default:if(!E)for(A=1,E=new Array(T-1);A<T;A++)E[A-1]=arguments[A];S[M].fn.apply(S[M].context,E)}}return!0},s.prototype.on=function(d,m,y){return l(this,d,m,y,!1)},s.prototype.once=function(d,m,y){return l(this,d,m,y,!0)},s.prototype.removeListener=function(d,m,y,g){var b=n?n+d:d;if(!this._events[b])return this;if(!m)return f(this,b),this;var _=this._events[b];if(_.fn)_.fn===m&&(!g||_.once)&&(!y||_.context===y)&&f(this,b);else{for(var O=0,S=[],T=_.length;O<T;O++)(_[O].fn!==m||g&&!_[O].once||y&&_[O].context!==y)&&S.push(_[O]);S.length?this._events[b]=S.length===1?S[0]:S:f(this,b)}return this},s.prototype.removeAllListeners=function(d){var m;return d?(m=n?n+d:d,this._events[m]&&f(this,m)):(this._events=new r,this._eventsCount=0),this},s.prototype.off=s.prototype.removeListener,s.prototype.addListener=s.prototype.on,s.prefixed=n,s.EventEmitter=s,t.exports=s})(Wm)),Wm.exports}var h7=s7();const d7=Ft(h7);var Jm=new d7,tg="recharts.syncMouseEvents";function ml(t){"@babel/helpers - typeof";return ml=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},ml(t)}function v7(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function p7(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,xD(r.key),r)}}function y7(t,e,n){return e&&p7(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function eg(t,e,n){return e=xD(e),e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function xD(t){var e=m7(t,"string");return ml(e)=="symbol"?e:e+""}function m7(t,e){if(ml(t)!="object"||!t)return t;var n=t[Symbol.toPrimitive];if(n!==void 0){var r=n.call(t,e);if(ml(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}var g7=(function(){function t(){v7(this,t),eg(this,"activeIndex",0),eg(this,"coordinateList",[]),eg(this,"layout","horizontal")}return y7(t,[{key:"setDetails",value:function(n){var r,u=n.coordinateList,l=u===void 0?null:u,f=n.container,s=f===void 0?null:f,h=n.layout,d=h===void 0?null:h,m=n.offset,y=m===void 0?null:m,g=n.mouseHandlerCallback,b=g===void 0?null:g;this.coordinateList=(r=l??this.coordinateList)!==null&&r!==void 0?r:[],this.container=s??this.container,this.layout=d??this.layout,this.offset=y??this.offset,this.mouseHandlerCallback=b??this.mouseHandlerCallback,this.activeIndex=Math.min(Math.max(this.activeIndex,0),this.coordinateList.length-1)}},{key:"focus",value:function(){this.spoofMouse()}},{key:"keyboardEvent",value:function(n){if(this.coordinateList.length!==0)switch(n.key){case"ArrowRight":{if(this.layout!=="horizontal")return;this.activeIndex=Math.min(this.activeIndex+1,this.coordinateList.length-1),this.spoofMouse();break}case"ArrowLeft":{if(this.layout!=="horizontal")return;this.activeIndex=Math.max(this.activeIndex-1,0),this.spoofMouse();break}}}},{key:"setIndex",value:function(n){this.activeIndex=n}},{key:"spoofMouse",value:function(){var n,r;if(this.layout==="horizontal"&&this.coordinateList.length!==0){var u=this.container.getBoundingClientRect(),l=u.x,f=u.y,s=u.height,h=this.coordinateList[this.activeIndex].coordinate,d=((n=window)===null||n===void 0?void 0:n.scrollX)||0,m=((r=window)===null||r===void 0?void 0:r.scrollY)||0,y=l+h+d,g=f+this.offset.top+s/2+m;this.mouseHandlerCallback({pageX:y,pageY:g})}}}])})();function b7(t,e,n){if(n==="number"&&e===!0&&Array.isArray(t)){var r=t==null?void 0:t[0],u=t==null?void 0:t[1];if(r&&u&&st(r)&&st(u))return!0}return!1}function S7(t,e,n,r){var u=r/2;return{stroke:"none",fill:"#ccc",x:t==="horizontal"?e.x-u:n.left+.5,y:t==="horizontal"?n.top+.5:e.y-u,width:t==="horizontal"?r:n.width-1,height:t==="horizontal"?n.height-1:r}}function OD(t){var e=t.cx,n=t.cy,r=t.radius,u=t.startAngle,l=t.endAngle,f=Re(e,n,r,u),s=Re(e,n,r,l);return{points:[f,s],cx:e,cy:n,radius:r,startAngle:u,endAngle:l}}function x7(t,e,n){var r,u,l,f;if(t==="horizontal")r=e.x,l=r,u=n.top,f=n.top+n.height;else if(t==="vertical")u=e.y,f=u,r=n.left,l=n.left+n.width;else if(e.cx!=null&&e.cy!=null)if(t==="centric"){var s=e.cx,h=e.cy,d=e.innerRadius,m=e.outerRadius,y=e.angle,g=Re(s,h,d,y),b=Re(s,h,m,y);r=g.x,u=g.y,l=b.x,f=b.y}else return OD(e);return[{x:r,y:u},{x:l,y:f}]}function gl(t){"@babel/helpers - typeof";return gl=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},gl(t)}function dM(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(u){return Object.getOwnPropertyDescriptor(t,u).enumerable})),n.push.apply(n,r)}return n}function uf(t){for(var e=1;e<arguments.length;e++){var n=arguments[e]!=null?arguments[e]:{};e%2?dM(Object(n),!0).forEach(function(r){O7(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):dM(Object(n)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(n,r))})}return t}function O7(t,e,n){return e=_7(e),e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function _7(t){var e=A7(t,"string");return gl(e)=="symbol"?e:e+""}function A7(t,e){if(gl(t)!="object"||!t)return t;var n=t[Symbol.toPrimitive];if(n!==void 0){var r=n.call(t,e);if(gl(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(t)}function w7(t){var e,n,r=t.element,u=t.tooltipEventType,l=t.isActive,f=t.activeCoordinate,s=t.activePayload,h=t.offset,d=t.activeTooltipIndex,m=t.tooltipAxisBandSize,y=t.layout,g=t.chartName,b=(e=r.props.cursor)!==null&&e!==void 0?e:(n=r.type.defaultProps)===null||n===void 0?void 0:n.cursor;if(!r||!b||!l||!f||g!=="ScatterChart"&&u!=="axis")return null;var _,O=Hg;if(g==="ScatterChart")_=f,O=Ok;else if(g==="BarChart")_=S7(y,f,h,m),O=y0;else if(y==="radial"){var S=OD(f),T=S.cx,E=S.cy,M=S.radius,D=S.startAngle,A=S.endAngle;_={cx:T,cy:E,startAngle:D,endAngle:A,innerRadius:M,outerRadius:M},O=DC}else _={points:x7(y,f,h)},O=Hg;var w=uf(uf(uf(uf({stroke:"#ccc",pointerEvents:"none"},h),_),Rt(b,!1)),{},{payload:s,payloadIndex:d,className:qt("recharts-tooltip-cursor",b.className)});return ot.isValidElement(b)?ot.cloneElement(b,w):ot.createElement(O,w)}var T7=["item"],E7=["children","className","width","height","style","compact","title","desc"];function du(t){"@babel/helpers - typeof";return du=typeof Symbol=="function"&&typeof Symbol.iterator=="symbol"?function(e){return typeof e}:function(e){return e&&typeof Symbol=="function"&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},du(t)}function Ii(){return Ii=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},Ii.apply(this,arguments)}function vM(t,e){return C7(t)||j7(t,e)||AD(t,e)||M7()}function M7(){throw new TypeError(`Invalid attempt to destructure non-iterable instance.
|
|
116
116
|
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function j7(t,e){var n=t==null?null:typeof Symbol<"u"&&t[Symbol.iterator]||t["@@iterator"];if(n!=null){var r,u,l,f,s=[],h=!0,d=!1;try{if(l=(n=n.call(t)).next,e!==0)for(;!(h=(r=l.call(n)).done)&&(s.push(r.value),s.length!==e);h=!0);}catch(m){d=!0,u=m}finally{try{if(!h&&n.return!=null&&(f=n.return(),Object(f)!==f))return}finally{if(d)throw u}}return s}}function C7(t){if(Array.isArray(t))return t}function pM(t,e){if(t==null)return{};var n=D7(t,e),r,u;if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(t);for(u=0;u<l.length;u++)r=l[u],!(e.indexOf(r)>=0)&&Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}function D7(t,e){if(t==null)return{};var n={};for(var r in t)if(Object.prototype.hasOwnProperty.call(t,r)){if(e.indexOf(r)>=0)continue;n[r]=t[r]}return n}function P7(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function N7(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,wD(r.key),r)}}function R7(t,e,n){return e&&N7(t.prototype,e),Object.defineProperty(t,"prototype",{writable:!1}),t}function q7(t,e,n){return e=us(e),z7(t,_D()?Reflect.construct(e,n||[],us(t).constructor):e.apply(t,n))}function z7(t,e){if(e&&(du(e)==="object"||typeof e=="function"))return e;if(e!==void 0)throw new TypeError("Derived constructors may only return object or undefined");return $7(t)}function $7(t){if(t===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function _D(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch{}return(_D=function(){return!!t})()}function us(t){return us=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(n){return n.__proto__||Object.getPrototypeOf(n)},us(t)}function B7(t,e){if(typeof e!="function"&&e!==null)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&bb(t,e)}function bb(t,e){return bb=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(r,u){return r.__proto__=u,r},bb(t,e)}function vu(t){return k7(t)||U7(t)||AD(t)||L7()}function L7(){throw new TypeError(`Invalid attempt to spread non-iterable instance.
|
|
117
|
-
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function AD(t,e){if(t){if(typeof t=="string")return Sb(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);if(n==="Object"&&t.constructor&&(n=t.constructor.name),n==="Map"||n==="Set")return Array.from(t);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Sb(t,e)}}function U7(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}function k7(t){if(Array.isArray(t))return Sb(t)}function Sb(t,e){(e==null||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function yM(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(u){return Object.getOwnPropertyDescriptor(t,u).enumerable})),n.push.apply(n,r)}return n}function et(t){for(var e=1;e<arguments.length;e++){var n=arguments[e]!=null?arguments[e]:{};e%2?yM(Object(n),!0).forEach(function(r){bt(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):yM(Object(n)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(n,r))})}return t}function bt(t,e,n){return e=wD(e),e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function wD(t){var e=H7(t,"string");return du(e)=="symbol"?e:e+""}function H7(t,e){if(du(t)!="object"||!t)return t;var n=t[Symbol.toPrimitive];if(n!==void 0){var r=n.call(t,e);if(du(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(t)}var I7={xAxis:["bottom","top"],yAxis:["left","right"]},G7={width:"100%",height:"100%"},TD={x:0,y:0};function of(t){return t}var Y7=function(e,n){return n==="horizontal"?e.x:n==="vertical"?e.y:n==="centric"?e.angle:e.radius},X7=function(e,n,r,u){var l=n.find(function(m){return m&&m.index===r});if(l){if(e==="horizontal")return{x:l.coordinate,y:u.y};if(e==="vertical")return{x:u.x,y:l.coordinate};if(e==="centric"){var f=l.coordinate,s=u.radius;return et(et(et({},u),Re(u.cx,u.cy,s,f)),{},{angle:f,radius:s})}var h=l.coordinate,d=u.angle;return et(et(et({},u),Re(u.cx,u.cy,h,d)),{},{angle:d,radius:h})}return TD},$s=function(e,n){var r=n.graphicalItems,u=n.dataStartIndex,l=n.dataEndIndex,f=(r??[]).reduce(function(s,h){var d=h.props.data;return d&&d.length?[].concat(vu(s),vu(d)):s},[]);return f.length>0?f:e&&e.length&&st(u)&&st(l)?e.slice(u,l+1):[]};function ED(t){return t==="number"?[0,"auto"]:void 0}var xb=function(e,n,r,u){var l=e.graphicalItems,f=e.tooltipAxis,s=$s(n,e);return r<0||!l||!l.length||r>=s.length?null:l.reduce(function(h,d){var m,y=(m=d.props.data)!==null&&m!==void 0?m:n;y&&e.dataStartIndex+e.dataEndIndex!==0&&e.dataEndIndex-e.dataStartIndex>=r&&(y=y.slice(e.dataStartIndex,e.dataEndIndex+1));var g;if(f.dataKey&&!f.allowDuplicatedCategory){var b=y===void 0?s:y;g=cf(b,f.dataKey,u)}else g=y&&y[r]||s[r];return g?[].concat(vu(h),[MC(d,g)]):h},[])},mM=function(e,n,r,u){var l=u||{x:e.chartX,y:e.chartY},f=Y7(l,r),s=e.orderedTooltipTicks,h=e.tooltipAxis,d=e.tooltipTicks,m=e5(f,s,d,h);if(m>=0&&d){var y=d[m]&&d[m].value,g=xb(e,n,m,y),b=X7(r,s,m,l);return{activeTooltipIndex:m,activeLabel:y,activePayload:g,activeCoordinate:b}}return null},K7=function(e,n){var r=n.axes,u=n.graphicalItems,l=n.axisType,f=n.axisIdKey,s=n.stackGroups,h=n.dataStartIndex,d=n.dataEndIndex,m=e.layout,y=e.children,g=e.stackOffset,b=wC(m,l);return r.reduce(function(_,O){var S,T=O.type.defaultProps!==void 0?et(et({},O.type.defaultProps),O.props):O.props,E=T.type,M=T.dataKey,D=T.allowDataOverflow,A=T.allowDuplicatedCategory,w=T.scale,C=T.ticks,q=T.includeHidden,z=T[f];if(_[z])return _;var F=$s(e.data,{graphicalItems:u.filter(function(U){var nt,ft=f in U.props?U.props[f]:(nt=U.type.defaultProps)===null||nt===void 0?void 0:nt[f];return ft===z}),dataStartIndex:h,dataEndIndex:d}),H=F.length,B,V,Z;b7(T.domain,D,E)&&(B=$g(T.domain,null,D),b&&(E==="number"||w!=="auto")&&(Z=No(F,M,"category")));var K=ED(E);if(!B||B.length===0){var N,I=(N=T.domain)!==null&&N!==void 0?N:K;if(M){if(B=No(F,M,E),E==="category"&&b){var J=XR(B);A&&J?(V=B,B=Kf(0,H)):A||(B=DE(I,B,O).reduce(function(U,nt){return U.indexOf(nt)>=0?U:[].concat(vu(U),[nt])},[]))}else if(E==="category")A?B=B.filter(function(U){return U!==""&&!Ct(U)}):B=DE(I,B,O).reduce(function(U,nt){return U.indexOf(nt)>=0||nt===""||Ct(nt)?U:[].concat(vu(U),[nt])},[]);else if(E==="number"){var it=u5(F,u.filter(function(U){var nt,ft,vt=f in U.props?U.props[f]:(nt=U.type.defaultProps)===null||nt===void 0?void 0:nt[f],mt="hide"in U.props?U.props.hide:(ft=U.type.defaultProps)===null||ft===void 0?void 0:ft.hide;return vt===z&&(q||!mt)}),M,l,m);it&&(B=it)}b&&(E==="number"||w!=="auto")&&(Z=No(F,M,"category"))}else b?B=Kf(0,H):s&&s[z]&&s[z].hasStack&&E==="number"?B=g==="expand"?[0,1]:EC(s[z].stackGroups,h,d):B=AC(F,u.filter(function(U){var nt=f in U.props?U.props[f]:U.type.defaultProps[f],ft="hide"in U.props?U.props.hide:U.type.defaultProps.hide;return nt===z&&(q||!ft)}),E,m,!0);if(E==="number")B=gb(y,B,z,l,C),I&&(B=$g(I,B,D));else if(E==="category"&&I){var lt=I,P=B.every(function(U){return lt.indexOf(U)>=0});P&&(B=lt)}}return et(et({},_),{},bt({},z,et(et({},T),{},{axisType:l,domain:B,categoricalDomain:Z,duplicateDomain:V,originalDomain:(S=T.domain)!==null&&S!==void 0?S:K,isCategorical:b,layout:m})))},{})},V7=function(e,n){var r=n.graphicalItems,u=n.Axis,l=n.axisType,f=n.axisIdKey,s=n.stackGroups,h=n.dataStartIndex,d=n.dataEndIndex,m=e.layout,y=e.children,g=$s(e.data,{graphicalItems:r,dataStartIndex:h,dataEndIndex:d}),b=g.length,_=wC(m,l),O=-1;return r.reduce(function(S,T){var E=T.type.defaultProps!==void 0?et(et({},T.type.defaultProps),T.props):T.props,M=E[f],D=ED("number");if(!S[M]){O++;var A;return _?A=Kf(0,b):s&&s[M]&&s[M].hasStack?(A=EC(s[M].stackGroups,h,d),A=gb(y,A,M,l)):(A=$g(D,AC(g,r.filter(function(w){var C,q,z=f in w.props?w.props[f]:(C=w.type.defaultProps)===null||C===void 0?void 0:C[f],F="hide"in w.props?w.props.hide:(q=w.type.defaultProps)===null||q===void 0?void 0:q.hide;return z===M&&!F}),"number",m),u.defaultProps.allowDataOverflow),A=gb(y,A,M,l)),et(et({},S),{},bt({},M,et(et({axisType:l},u.defaultProps),{},{hide:!0,orientation:En(I7,"".concat(l,".").concat(O%2),null),domain:A,originalDomain:D,isCategorical:_,layout:m})))}return S},{})},Z7=function(e,n){var r=n.axisType,u=r===void 0?"xAxis":r,l=n.AxisComp,f=n.graphicalItems,s=n.stackGroups,h=n.dataStartIndex,d=n.dataEndIndex,m=e.children,y="".concat(u,"Id"),g=Mn(m,l),b={};return g&&g.length?b=K7(e,{axes:g,graphicalItems:f,axisType:u,axisIdKey:y,stackGroups:s,dataStartIndex:h,dataEndIndex:d}):f&&f.length&&(b=V7(e,{Axis:l,graphicalItems:f,axisType:u,axisIdKey:y,stackGroups:s,dataStartIndex:h,dataEndIndex:d})),b},Q7=function(e){var n=ua(e),r=Or(n,!1,!0);return{tooltipTicks:r,orderedTooltipTicks:Ib(r,function(u){return u.coordinate}),tooltipAxis:n,tooltipAxisBandSize:$f(n,r)}},gM=function(e){var n=e.children,r=e.defaultShowTooltip,u=fn(n,au),l=0,f=0;return e.data&&e.data.length!==0&&(f=e.data.length-1),u&&u.props&&(u.props.startIndex>=0&&(l=u.props.startIndex),u.props.endIndex>=0&&(f=u.props.endIndex)),{chartX:0,chartY:0,dataStartIndex:l,dataEndIndex:f,activeTooltipIndex:-1,isTooltipActive:!!r}},F7=function(e){return!e||!e.length?!1:e.some(function(n){var r=_r(n&&n.type);return r&&r.indexOf("Bar")>=0})},bM=function(e){return e==="horizontal"?{numericAxisName:"yAxis",cateAxisName:"xAxis"}:e==="vertical"?{numericAxisName:"xAxis",cateAxisName:"yAxis"}:e==="centric"?{numericAxisName:"radiusAxis",cateAxisName:"angleAxis"}:{numericAxisName:"angleAxis",cateAxisName:"radiusAxis"}},W7=function(e,n){var r=e.props,u=e.graphicalItems,l=e.xAxisMap,f=l===void 0?{}:l,s=e.yAxisMap,h=s===void 0?{}:s,d=r.width,m=r.height,y=r.children,g=r.margin||{},b=fn(y,au),_=fn(y,Ua),O=Object.keys(h).reduce(function(A,w){var C=h[w],q=C.orientation;return!C.mirror&&!C.hide?et(et({},A),{},bt({},q,A[q]+C.width)):A},{left:g.left||0,right:g.right||0}),S=Object.keys(f).reduce(function(A,w){var C=f[w],q=C.orientation;return!C.mirror&&!C.hide?et(et({},A),{},bt({},q,En(A,"".concat(q))+C.height)):A},{top:g.top||0,bottom:g.bottom||0}),T=et(et({},S),O),E=T.bottom;b&&(T.bottom+=b.props.height||au.defaultProps.height),_&&n&&(T=a5(T,u,r,n));var M=d-T.left-T.right,D=m-T.top-T.bottom;return et(et({brushBottom:E},T),{},{width:Math.max(M,0),height:Math.max(D,0)})},J7=function(e,n){if(n==="xAxis")return e[n].width;if(n==="yAxis")return e[n].height},tG=function(e){var n=e.chartName,r=e.GraphicalChild,u=e.defaultTooltipEventType,l=u===void 0?"axis":u,f=e.validateTooltipEventTypes,s=f===void 0?["axis"]:f,h=e.axisComponents,d=e.legendContent,m=e.formatAxisMap,y=e.defaultProps,g=function(T,E){var M=E.graphicalItems,D=E.stackGroups,A=E.offset,w=E.updateId,C=E.dataStartIndex,q=E.dataEndIndex,z=T.barSize,F=T.layout,H=T.barGap,B=T.barCategoryGap,V=T.maxBarSize,Z=bM(F),K=Z.numericAxisName,N=Z.cateAxisName,I=F7(M),J=[];return M.forEach(function(it,lt){var P=$s(T.data,{graphicalItems:[it],dataStartIndex:C,dataEndIndex:q}),U=it.type.defaultProps!==void 0?et(et({},it.type.defaultProps),it.props):it.props,nt=U.dataKey,ft=U.maxBarSize,vt=U["".concat(K,"Id")],mt=U["".concat(N,"Id")],Et={},Ut=h.reduce(function(Pn,tr){var _u=E["".concat(tr.axisType,"Map")],ze=U["".concat(tr.axisType,"Id")];_u&&_u[ze]||tr.axisType==="zAxis"||Ka();var jl=_u[ze];return et(et({},Pn),{},bt(bt({},tr.axisType,jl),"".concat(tr.axisType,"Ticks"),Or(jl)))},Et),ct=Ut[N],St=Ut["".concat(N,"Ticks")],xt=D&&D[vt]&&D[vt].hasStack&&g5(it,D[vt].stackGroups),ut=_r(it.type).indexOf("Bar")>=0,Jt=$f(ct,St),At=[],ie=I&&n5({barSize:z,stackGroups:D,totalSize:J7(Ut,N)});if(ut){var ue,qe,Dn=Ct(ft)?V:ft,Gn=(ue=(qe=$f(ct,St,!0))!==null&&qe!==void 0?qe:Dn)!==null&&ue!==void 0?ue:0;At=r5({barGap:H,barCategoryGap:B,bandSize:Gn!==Jt?Gn:Jt,sizeList:ie[mt],maxBarSize:Dn}),Gn!==Jt&&(At=At.map(function(Pn){return et(et({},Pn),{},{position:et(et({},Pn.position),{},{offset:Pn.position.offset-Gn/2})})}))}var Nr=it&&it.type&&it.type.getComposedData;Nr&&J.push({props:et(et({},Nr(et(et({},Ut),{},{displayedData:P,props:T,dataKey:nt,item:it,bandSize:Jt,barPosition:At,offset:A,stackedData:xt,layout:F,dataStartIndex:C,dataEndIndex:q}))),{},bt(bt(bt({key:it.key||"item-".concat(lt)},K,Ut[K]),N,Ut[N]),"animationId",w)),childIndex:i3(it,T.children),item:it})}),J},b=function(T,E){var M=T.props,D=T.dataStartIndex,A=T.dataEndIndex,w=T.updateId;if(!G_({props:M}))return null;var C=M.children,q=M.layout,z=M.stackOffset,F=M.data,H=M.reverseStackOrder,B=bM(q),V=B.numericAxisName,Z=B.cateAxisName,K=Mn(C,r),N=p5(F,K,"".concat(V,"Id"),"".concat(Z,"Id"),z,H),I=h.reduce(function(U,nt){var ft="".concat(nt.axisType,"Map");return et(et({},U),{},bt({},ft,Z7(M,et(et({},nt),{},{graphicalItems:K,stackGroups:nt.axisType===V&&N,dataStartIndex:D,dataEndIndex:A}))))},{}),J=W7(et(et({},I),{},{props:M,graphicalItems:K}),E==null?void 0:E.legendBBox);Object.keys(I).forEach(function(U){I[U]=m(M,I[U],J,U.replace("Map",""),n)});var it=I["".concat(Z,"Map")],lt=Q7(it),P=g(M,et(et({},I),{},{dataStartIndex:D,dataEndIndex:A,updateId:w,graphicalItems:K,stackGroups:N,offset:J}));return et(et({formattedGraphicalItems:P,graphicalItems:K,offset:J,stackGroups:N},lt),I)},_=(function(S){function T(E){var M,D,A;return P7(this,T),A=q7(this,T,[E]),bt(A,"eventEmitterSymbol",Symbol("rechartsEventEmitter")),bt(A,"accessibilityManager",new g7),bt(A,"handleLegendBBoxUpdate",function(w){if(w){var C=A.state,q=C.dataStartIndex,z=C.dataEndIndex,F=C.updateId;A.setState(et({legendBBox:w},b({props:A.props,dataStartIndex:q,dataEndIndex:z,updateId:F},et(et({},A.state),{},{legendBBox:w}))))}}),bt(A,"handleReceiveSyncEvent",function(w,C,q){if(A.props.syncId===w){if(q===A.eventEmitterSymbol&&typeof A.props.syncMethod!="function")return;A.applySyncEvent(C)}}),bt(A,"handleBrushChange",function(w){var C=w.startIndex,q=w.endIndex;if(C!==A.state.dataStartIndex||q!==A.state.dataEndIndex){var z=A.state.updateId;A.setState(function(){return et({dataStartIndex:C,dataEndIndex:q},b({props:A.props,dataStartIndex:C,dataEndIndex:q,updateId:z},A.state))}),A.triggerSyncEvent({dataStartIndex:C,dataEndIndex:q})}}),bt(A,"handleMouseEnter",function(w){var C=A.getMouseInfo(w);if(C){var q=et(et({},C),{},{isTooltipActive:!0});A.setState(q),A.triggerSyncEvent(q);var z=A.props.onMouseEnter;Tt(z)&&z(q,w)}}),bt(A,"triggeredAfterMouseMove",function(w){var C=A.getMouseInfo(w),q=C?et(et({},C),{},{isTooltipActive:!0}):{isTooltipActive:!1};A.setState(q),A.triggerSyncEvent(q);var z=A.props.onMouseMove;Tt(z)&&z(q,w)}),bt(A,"handleItemMouseEnter",function(w){A.setState(function(){return{isTooltipActive:!0,activeItem:w,activePayload:w.tooltipPayload,activeCoordinate:w.tooltipPosition||{x:w.cx,y:w.cy}}})}),bt(A,"handleItemMouseLeave",function(){A.setState(function(){return{isTooltipActive:!1}})}),bt(A,"handleMouseMove",function(w){w.persist(),A.throttleTriggeredAfterMouseMove(w)}),bt(A,"handleMouseLeave",function(w){A.throttleTriggeredAfterMouseMove.cancel();var C={isTooltipActive:!1};A.setState(C),A.triggerSyncEvent(C);var q=A.props.onMouseLeave;Tt(q)&&q(C,w)}),bt(A,"handleOuterEvent",function(w){var C=a3(w),q=En(A.props,"".concat(C));if(C&&Tt(q)){var z,F;/.*touch.*/i.test(C)?F=A.getMouseInfo(w.changedTouches[0]):F=A.getMouseInfo(w),q((z=F)!==null&&z!==void 0?z:{},w)}}),bt(A,"handleClick",function(w){var C=A.getMouseInfo(w);if(C){var q=et(et({},C),{},{isTooltipActive:!0});A.setState(q),A.triggerSyncEvent(q);var z=A.props.onClick;Tt(z)&&z(q,w)}}),bt(A,"handleMouseDown",function(w){var C=A.props.onMouseDown;if(Tt(C)){var q=A.getMouseInfo(w);C(q,w)}}),bt(A,"handleMouseUp",function(w){var C=A.props.onMouseUp;if(Tt(C)){var q=A.getMouseInfo(w);C(q,w)}}),bt(A,"handleTouchMove",function(w){w.changedTouches!=null&&w.changedTouches.length>0&&A.throttleTriggeredAfterMouseMove(w.changedTouches[0])}),bt(A,"handleTouchStart",function(w){w.changedTouches!=null&&w.changedTouches.length>0&&A.handleMouseDown(w.changedTouches[0])}),bt(A,"handleTouchEnd",function(w){w.changedTouches!=null&&w.changedTouches.length>0&&A.handleMouseUp(w.changedTouches[0])}),bt(A,"handleDoubleClick",function(w){var C=A.props.onDoubleClick;if(Tt(C)){var q=A.getMouseInfo(w);C(q,w)}}),bt(A,"handleContextMenu",function(w){var C=A.props.onContextMenu;if(Tt(C)){var q=A.getMouseInfo(w);C(q,w)}}),bt(A,"triggerSyncEvent",function(w){A.props.syncId!==void 0&&Jm.emit(tg,A.props.syncId,w,A.eventEmitterSymbol)}),bt(A,"applySyncEvent",function(w){var C=A.props,q=C.layout,z=C.syncMethod,F=A.state.updateId,H=w.dataStartIndex,B=w.dataEndIndex;if(w.dataStartIndex!==void 0||w.dataEndIndex!==void 0)A.setState(et({dataStartIndex:H,dataEndIndex:B},b({props:A.props,dataStartIndex:H,dataEndIndex:B,updateId:F},A.state)));else if(w.activeTooltipIndex!==void 0){var V=w.chartX,Z=w.chartY,K=w.activeTooltipIndex,N=A.state,I=N.offset,J=N.tooltipTicks;if(!I)return;if(typeof z=="function")K=z(J,w);else if(z==="value"){K=-1;for(var it=0;it<J.length;it++)if(J[it].value===w.activeLabel){K=it;break}}var lt=et(et({},I),{},{x:I.left,y:I.top}),P=Math.min(V,lt.x+lt.width),U=Math.min(Z,lt.y+lt.height),nt=J[K]&&J[K].value,ft=xb(A.state,A.props.data,K),vt=J[K]?{x:q==="horizontal"?J[K].coordinate:P,y:q==="horizontal"?U:J[K].coordinate}:TD;A.setState(et(et({},w),{},{activeLabel:nt,activeCoordinate:vt,activePayload:ft,activeTooltipIndex:K}))}else A.setState(w)}),bt(A,"renderCursor",function(w){var C,q=A.state,z=q.isTooltipActive,F=q.activeCoordinate,H=q.activePayload,B=q.offset,V=q.activeTooltipIndex,Z=q.tooltipAxisBandSize,K=A.getTooltipEventType(),N=(C=w.props.active)!==null&&C!==void 0?C:z,I=A.props.layout,J=w.key||"_recharts-cursor";return L.createElement(w7,{key:J,activeCoordinate:F,activePayload:H,activeTooltipIndex:V,chartName:n,element:w,isActive:N,layout:I,offset:B,tooltipAxisBandSize:Z,tooltipEventType:K})}),bt(A,"renderPolarAxis",function(w,C,q){var z=En(w,"type.axisType"),F=En(A.state,"".concat(z,"Map")),H=w.type.defaultProps,B=H!==void 0?et(et({},H),w.props):w.props,V=F&&F[B["".concat(z,"Id")]];return ot.cloneElement(w,et(et({},V),{},{className:qt(z,V.className),key:w.key||"".concat(C,"-").concat(q),ticks:Or(V,!0)}))}),bt(A,"renderPolarGrid",function(w){var C=w.props,q=C.radialLines,z=C.polarAngles,F=C.polarRadius,H=A.state,B=H.radiusAxisMap,V=H.angleAxisMap,Z=ua(B),K=ua(V),N=K.cx,I=K.cy,J=K.innerRadius,it=K.outerRadius;return ot.cloneElement(w,{polarAngles:Array.isArray(z)?z:Or(K,!0).map(function(lt){return lt.coordinate}),polarRadius:Array.isArray(F)?F:Or(Z,!0).map(function(lt){return lt.coordinate}),cx:N,cy:I,innerRadius:J,outerRadius:it,key:w.key||"polar-grid",radialLines:q})}),bt(A,"renderLegend",function(){var w=A.state.formattedGraphicalItems,C=A.props,q=C.children,z=C.width,F=C.height,H=A.props.margin||{},B=z-(H.left||0)-(H.right||0),V=OC({children:q,formattedGraphicalItems:w,legendWidth:B,legendContent:d});if(!V)return null;var Z=V.item,K=pM(V,T7);return ot.cloneElement(Z,et(et({},K),{},{chartWidth:z,chartHeight:F,margin:H,onBBoxUpdate:A.handleLegendBBoxUpdate}))}),bt(A,"renderTooltip",function(){var w,C=A.props,q=C.children,z=C.accessibilityLayer,F=fn(q,$n);if(!F)return null;var H=A.state,B=H.isTooltipActive,V=H.activeCoordinate,Z=H.activePayload,K=H.activeLabel,N=H.offset,I=(w=F.props.active)!==null&&w!==void 0?w:B;return ot.cloneElement(F,{viewBox:et(et({},N),{},{x:N.left,y:N.top}),active:I,label:K,payload:I?Z:[],coordinate:V,accessibilityLayer:z})}),bt(A,"renderBrush",function(w){var C=A.props,q=C.margin,z=C.data,F=A.state,H=F.offset,B=F.dataStartIndex,V=F.dataEndIndex,Z=F.updateId;return ot.cloneElement(w,{key:w.key||"_recharts-brush",onChange:ef(A.handleBrushChange,w.props.onChange),data:z,x:st(w.props.x)?w.props.x:H.left,y:st(w.props.y)?w.props.y:H.top+H.height+H.brushBottom-(q.bottom||0),width:st(w.props.width)?w.props.width:H.width,startIndex:B,endIndex:V,updateId:"brush-".concat(Z)})}),bt(A,"renderReferenceElement",function(w,C,q){if(!w)return null;var z=A,F=z.clipPathId,H=A.state,B=H.xAxisMap,V=H.yAxisMap,Z=H.offset,K=w.type.defaultProps||{},N=w.props,I=N.xAxisId,J=I===void 0?K.xAxisId:I,it=N.yAxisId,lt=it===void 0?K.yAxisId:it;return ot.cloneElement(w,{key:w.key||"".concat(C,"-").concat(q),xAxis:B[J],yAxis:V[lt],viewBox:{x:Z.left,y:Z.top,width:Z.width,height:Z.height},clipPathId:F})}),bt(A,"renderActivePoints",function(w){var C=w.item,q=w.activePoint,z=w.basePoint,F=w.childIndex,H=w.isRange,B=[],V=C.props.key,Z=C.item.type.defaultProps!==void 0?et(et({},C.item.type.defaultProps),C.item.props):C.item.props,K=Z.activeDot,N=Z.dataKey,I=et(et({index:F,dataKey:N,cx:q.x,cy:q.y,r:4,fill:p0(C.item),strokeWidth:2,stroke:"#fff",payload:q.payload,value:q.value},Rt(K,!1)),ff(K));return B.push(T.renderActiveDot(K,I,"".concat(V,"-activePoint-").concat(F))),z?B.push(T.renderActiveDot(K,et(et({},I),{},{cx:z.x,cy:z.y}),"".concat(V,"-basePoint-").concat(F))):H&&B.push(null),B}),bt(A,"renderGraphicChild",function(w,C,q){var z=A.filterFormatItem(w,C,q);if(!z)return null;var F=A.getTooltipEventType(),H=A.state,B=H.isTooltipActive,V=H.tooltipAxis,Z=H.activeTooltipIndex,K=H.activeLabel,N=A.props.children,I=fn(N,$n),J=z.props,it=J.points,lt=J.isRange,P=J.baseLine,U=z.item.type.defaultProps!==void 0?et(et({},z.item.type.defaultProps),z.item.props):z.item.props,nt=U.activeDot,ft=U.hide,vt=U.activeBar,mt=U.activeShape,Et=!!(!ft&&B&&I&&(nt||vt||mt)),Ut={};F!=="axis"&&I&&I.props.trigger==="click"?Ut={onClick:ef(A.handleItemMouseEnter,w.props.onClick)}:F!=="axis"&&(Ut={onMouseLeave:ef(A.handleItemMouseLeave,w.props.onMouseLeave),onMouseEnter:ef(A.handleItemMouseEnter,w.props.onMouseEnter)});var ct=ot.cloneElement(w,et(et({},z.props),Ut));function St(tr){return typeof V.dataKey=="function"?V.dataKey(tr.payload):null}if(Et)if(Z>=0){var xt,ut;if(V.dataKey&&!V.allowDuplicatedCategory){var Jt=typeof V.dataKey=="function"?St:"payload.".concat(V.dataKey.toString());xt=cf(it,Jt,K),ut=lt&&P&&cf(P,Jt,K)}else xt=it==null?void 0:it[Z],ut=lt&&P&&P[Z];if(mt||vt){var At=w.props.activeIndex!==void 0?w.props.activeIndex:Z;return[ot.cloneElement(w,et(et(et({},z.props),Ut),{},{activeIndex:At})),null,null]}if(!Ct(xt))return[ct].concat(vu(A.renderActivePoints({item:z,activePoint:xt,basePoint:ut,childIndex:Z,isRange:lt})))}else{var ie,ue=(ie=A.getItemByXY(A.state.activeCoordinate))!==null&&ie!==void 0?ie:{graphicalItem:ct},qe=ue.graphicalItem,Dn=qe.item,Gn=Dn===void 0?w:Dn,Nr=qe.childIndex,Pn=et(et(et({},z.props),Ut),{},{activeIndex:Nr});return[ot.cloneElement(Gn,Pn),null,null]}return lt?[ct,null,null]:[ct,null]}),bt(A,"renderCustomized",function(w,C,q){return ot.cloneElement(w,et(et({key:"recharts-customized-".concat(q)},A.props),A.state))}),bt(A,"renderMap",{CartesianGrid:{handler:of,once:!0},ReferenceArea:{handler:A.renderReferenceElement},ReferenceLine:{handler:of},ReferenceDot:{handler:A.renderReferenceElement},XAxis:{handler:of},YAxis:{handler:of},Brush:{handler:A.renderBrush,once:!0},Bar:{handler:A.renderGraphicChild},Line:{handler:A.renderGraphicChild},Area:{handler:A.renderGraphicChild},Radar:{handler:A.renderGraphicChild},RadialBar:{handler:A.renderGraphicChild},Scatter:{handler:A.renderGraphicChild},Pie:{handler:A.renderGraphicChild},Funnel:{handler:A.renderGraphicChild},Tooltip:{handler:A.renderCursor,once:!0},PolarGrid:{handler:A.renderPolarGrid,once:!0},PolarAngleAxis:{handler:A.renderPolarAxis},PolarRadiusAxis:{handler:A.renderPolarAxis},Customized:{handler:A.renderCustomized}}),A.clipPathId="".concat((M=E.id)!==null&&M!==void 0?M:xl("recharts"),"-clip"),A.throttleTriggeredAfterMouseMove=Oj(A.triggeredAfterMouseMove,(D=E.throttleDelay)!==null&&D!==void 0?D:1e3/60),A.state={},A}return B7(T,S),R7(T,[{key:"componentDidMount",value:function(){var M,D;this.addListener(),this.accessibilityManager.setDetails({container:this.container,offset:{left:(M=this.props.margin.left)!==null&&M!==void 0?M:0,top:(D=this.props.margin.top)!==null&&D!==void 0?D:0},coordinateList:this.state.tooltipTicks,mouseHandlerCallback:this.triggeredAfterMouseMove,layout:this.props.layout}),this.displayDefaultTooltip()}},{key:"displayDefaultTooltip",value:function(){var M=this.props,D=M.children,A=M.data,w=M.height,C=M.layout,q=fn(D,$n);if(q){var z=q.props.defaultIndex;if(!(typeof z!="number"||z<0||z>this.state.tooltipTicks.length-1)){var F=this.state.tooltipTicks[z]&&this.state.tooltipTicks[z].value,H=xb(this.state,A,z,F),B=this.state.tooltipTicks[z].coordinate,V=(this.state.offset.top+w)/2,Z=C==="horizontal",K=Z?{x:B,y:V}:{y:B,x:V},N=this.state.formattedGraphicalItems.find(function(J){var it=J.item;return it.type.name==="Scatter"});N&&(K=et(et({},K),N.props.points[z].tooltipPosition),H=N.props.points[z].tooltipPayload);var I={activeTooltipIndex:z,isTooltipActive:!0,activeLabel:F,activePayload:H,activeCoordinate:K};this.setState(I),this.renderCursor(q),this.accessibilityManager.setIndex(z)}}}},{key:"getSnapshotBeforeUpdate",value:function(M,D){if(!this.props.accessibilityLayer)return null;if(this.state.tooltipTicks!==D.tooltipTicks&&this.accessibilityManager.setDetails({coordinateList:this.state.tooltipTicks}),this.props.layout!==M.layout&&this.accessibilityManager.setDetails({layout:this.props.layout}),this.props.margin!==M.margin){var A,w;this.accessibilityManager.setDetails({offset:{left:(A=this.props.margin.left)!==null&&A!==void 0?A:0,top:(w=this.props.margin.top)!==null&&w!==void 0?w:0}})}return null}},{key:"componentDidUpdate",value:function(M){ig([fn(M.children,$n)],[fn(this.props.children,$n)])||this.displayDefaultTooltip()}},{key:"componentWillUnmount",value:function(){this.removeListener(),this.throttleTriggeredAfterMouseMove.cancel()}},{key:"getTooltipEventType",value:function(){var M=fn(this.props.children,$n);if(M&&typeof M.props.shared=="boolean"){var D=M.props.shared?"axis":"item";return s.indexOf(D)>=0?D:l}return l}},{key:"getMouseInfo",value:function(M){if(!this.container)return null;var D=this.container,A=D.getBoundingClientRect(),w=Y$(A),C={chartX:Math.round(M.pageX-w.left),chartY:Math.round(M.pageY-w.top)},q=A.width/D.offsetWidth||1,z=this.inRange(C.chartX,C.chartY,q);if(!z)return null;var F=this.state,H=F.xAxisMap,B=F.yAxisMap,V=this.getTooltipEventType(),Z=mM(this.state,this.props.data,this.props.layout,z);if(V!=="axis"&&H&&B){var K=ua(H).scale,N=ua(B).scale,I=K&&K.invert?K.invert(C.chartX):null,J=N&&N.invert?N.invert(C.chartY):null;return et(et({},C),{},{xValue:I,yValue:J},Z)}return Z?et(et({},C),Z):null}},{key:"inRange",value:function(M,D){var A=arguments.length>2&&arguments[2]!==void 0?arguments[2]:1,w=this.props.layout,C=M/A,q=D/A;if(w==="horizontal"||w==="vertical"){var z=this.state.offset,F=C>=z.left&&C<=z.left+z.width&&q>=z.top&&q<=z.top+z.height;return F?{x:C,y:q}:null}var H=this.state,B=H.angleAxisMap,V=H.radiusAxisMap;if(B&&V){var Z=ua(B);return RE({x:C,y:q},Z)}return null}},{key:"parseEventsOfWrapper",value:function(){var M=this.props.children,D=this.getTooltipEventType(),A=fn(M,$n),w={};A&&D==="axis"&&(A.props.trigger==="click"?w={onClick:this.handleClick}:w={onMouseEnter:this.handleMouseEnter,onDoubleClick:this.handleDoubleClick,onMouseMove:this.handleMouseMove,onMouseLeave:this.handleMouseLeave,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd,onContextMenu:this.handleContextMenu});var C=ff(this.props,this.handleOuterEvent);return et(et({},C),w)}},{key:"addListener",value:function(){Jm.on(tg,this.handleReceiveSyncEvent)}},{key:"removeListener",value:function(){Jm.removeListener(tg,this.handleReceiveSyncEvent)}},{key:"filterFormatItem",value:function(M,D,A){for(var w=this.state.formattedGraphicalItems,C=0,q=w.length;C<q;C++){var z=w[C];if(z.item===M||z.props.key===M.key||D===_r(z.item.type)&&A===z.childIndex)return z}return null}},{key:"renderClipPath",value:function(){var M=this.clipPathId,D=this.state.offset,A=D.left,w=D.top,C=D.height,q=D.width;return L.createElement("defs",null,L.createElement("clipPath",{id:M},L.createElement("rect",{x:A,y:w,height:C,width:q})))}},{key:"getXScales",value:function(){var M=this.state.xAxisMap;return M?Object.entries(M).reduce(function(D,A){var w=vM(A,2),C=w[0],q=w[1];return et(et({},D),{},bt({},C,q.scale))},{}):null}},{key:"getYScales",value:function(){var M=this.state.yAxisMap;return M?Object.entries(M).reduce(function(D,A){var w=vM(A,2),C=w[0],q=w[1];return et(et({},D),{},bt({},C,q.scale))},{}):null}},{key:"getXScaleByAxisId",value:function(M){var D;return(D=this.state.xAxisMap)===null||D===void 0||(D=D[M])===null||D===void 0?void 0:D.scale}},{key:"getYScaleByAxisId",value:function(M){var D;return(D=this.state.yAxisMap)===null||D===void 0||(D=D[M])===null||D===void 0?void 0:D.scale}},{key:"getItemByXY",value:function(M){var D=this.state,A=D.formattedGraphicalItems,w=D.activeItem;if(A&&A.length)for(var C=0,q=A.length;C<q;C++){var z=A[C],F=z.props,H=z.item,B=H.type.defaultProps!==void 0?et(et({},H.type.defaultProps),H.props):H.props,V=_r(H.type);if(V==="Bar"){var Z=(F.data||[]).find(function(J){return hk(M,J)});if(Z)return{graphicalItem:z,payload:Z}}else if(V==="RadialBar"){var K=(F.data||[]).find(function(J){return RE(M,J)});if(K)return{graphicalItem:z,payload:K}}else if(Cs(z,w)||Ds(z,w)||fl(z,w)){var N=nH({graphicalItem:z,activeTooltipItem:w,itemData:B.data}),I=B.activeIndex===void 0?N:B.activeIndex;return{graphicalItem:et(et({},z),{},{childIndex:I}),payload:fl(z,w)?B.data[N]:z.props.data[N]}}}return null}},{key:"render",value:function(){var M=this;if(!G_(this))return null;var D=this.props,A=D.children,w=D.className,C=D.width,q=D.height,z=D.style,F=D.compact,H=D.title,B=D.desc,V=pM(D,E7),Z=Rt(V,!1);if(F)return L.createElement(Z2,{state:this.state,width:this.props.width,height:this.props.height,clipPathId:this.clipPathId},L.createElement(og,Ii({},Z,{width:C,height:q,title:H,desc:B}),this.renderClipPath(),X_(A,this.renderMap)));if(this.props.accessibilityLayer){var K,N;Z.tabIndex=(K=this.props.tabIndex)!==null&&K!==void 0?K:0,Z.role=(N=this.props.role)!==null&&N!==void 0?N:"application",Z.onKeyDown=function(J){M.accessibilityManager.keyboardEvent(J)},Z.onFocus=function(){M.accessibilityManager.focus()}}var I=this.parseEventsOfWrapper();return L.createElement(Z2,{state:this.state,width:this.props.width,height:this.props.height,clipPathId:this.clipPathId},L.createElement("div",Ii({className:qt("recharts-wrapper",w),style:et({position:"relative",cursor:"default",width:C,height:q},z)},I,{ref:function(it){M.container=it}}),L.createElement(og,Ii({},Z,{width:C,height:q,title:H,desc:B,style:G7}),this.renderClipPath(),X_(A,this.renderMap)),this.renderLegend(),this.renderTooltip()))}}])})(ot.Component);bt(_,"displayName",n),bt(_,"defaultProps",et({layout:"horizontal",stackOffset:"none",barCategoryGap:"10%",barGap:4,margin:{top:5,right:5,bottom:5,left:5},reverseStackOrder:!1,syncMethod:"index"},y)),bt(_,"getDerivedStateFromProps",function(S,T){var E=S.dataKey,M=S.data,D=S.children,A=S.width,w=S.height,C=S.layout,q=S.stackOffset,z=S.margin,F=T.dataStartIndex,H=T.dataEndIndex;if(T.updateId===void 0){var B=gM(S);return et(et(et({},B),{},{updateId:0},b(et(et({props:S},B),{},{updateId:0}),T)),{},{prevDataKey:E,prevData:M,prevWidth:A,prevHeight:w,prevLayout:C,prevStackOffset:q,prevMargin:z,prevChildren:D})}if(E!==T.prevDataKey||M!==T.prevData||A!==T.prevWidth||w!==T.prevHeight||C!==T.prevLayout||q!==T.prevStackOffset||!Gi(z,T.prevMargin)){var V=gM(S),Z={chartX:T.chartX,chartY:T.chartY,isTooltipActive:T.isTooltipActive},K=et(et({},mM(T,M,C)),{},{updateId:T.updateId+1}),N=et(et(et({},V),Z),K);return et(et(et({},N),b(et({props:S},N),T)),{},{prevDataKey:E,prevData:M,prevWidth:A,prevHeight:w,prevLayout:C,prevStackOffset:q,prevMargin:z,prevChildren:D})}if(!ig(D,T.prevChildren)){var I,J,it,lt,P=fn(D,au),U=P&&(I=(J=P.props)===null||J===void 0?void 0:J.startIndex)!==null&&I!==void 0?I:F,nt=P&&(it=(lt=P.props)===null||lt===void 0?void 0:lt.endIndex)!==null&&it!==void 0?it:H,ft=U!==F||nt!==H,vt=!Ct(M),mt=vt&&!ft?T.updateId:T.updateId+1;return et(et({updateId:mt},b(et(et({props:S},T),{},{updateId:mt,dataStartIndex:U,dataEndIndex:nt}),T)),{},{prevChildren:D,dataStartIndex:U,dataEndIndex:nt})}return null}),bt(_,"renderActiveDot",function(S,T,E){var M;return ot.isValidElement(S)?M=ot.cloneElement(S,T):Tt(S)?M=S(T):M=L.createElement(m0,T),L.createElement(he,{className:"recharts-active-dot",key:E},M)});var O=ot.forwardRef(function(T,E){return L.createElement(_,Ii({},T,{ref:E}))});return O.displayName=_.displayName,O},SM=tG({chartName:"LineChart",GraphicalChild:Ia,axisComponents:[{axisType:"xAxis",AxisComp:pl},{axisType:"yAxis",AxisComp:yl}],formatAxisMap:WH});function lf(t){return new Date(t).toLocaleTimeString()}function xM(t){return t>=1e6?`${(t/1e6).toFixed(1)}M`:t>=1e3?`${(t/1e3).toFixed(1)}K`:t.toLocaleString()}function eG(t){return t===0?"$0.00":t<.01?`$${t.toFixed(4)}`:`$${t.toFixed(2)}`}function nG(t){if(t.length===0)return 1e3;const e=Math.min(...t.map(u=>u.startTime)),r=Math.max(...t.map(u=>u.startTime))-e;return r<2*6e4?1e3:r<10*6e4?1e4:r<60*6e4?6e4:5*6e4}function rG({spans:t}){const e=ot.useMemo(()=>{const u=nG(t),l=new Map;for(const f of t){const s=Math.floor(f.startTime/u)*u,h=l.get(s)||{time:s,inputTokens:0,outputTokens:0,cost:0,requests:0};h.inputTokens+=f.inputTokens,h.outputTokens+=f.outputTokens,h.cost+=f.cost,h.requests+=1,l.set(s,h)}return Array.from(l.values()).sort((f,s)=>f.time-s.time)},[t]),n=ot.useMemo(()=>{const u=new Set;let l=0,f=0;for(const s of t)l+=s.totalTokens,f+=s.cost,u.add(s.model);return{tokens:l,cost:f,requests:t.length,models:u.size}},[t]),r=n.cost>0;return W.jsxs("div",{children:[W.jsxs("div",{className:"cards",children:[W.jsxs("div",{className:"card",children:[W.jsx("div",{className:"card-label",children:"Total Tokens"}),W.jsx("div",{className:"card-value",children:xM(n.tokens)})]}),W.jsxs("div",{className:"card",children:[W.jsx("div",{className:"card-label",children:"Total Cost"}),W.jsx("div",{className:"card-value",children:eG(n.cost)})]}),W.jsxs("div",{className:"card",children:[W.jsx("div",{className:"card-label",children:"Requests"}),W.jsx("div",{className:"card-value",children:xM(n.requests)})]}),W.jsxs("div",{className:"card",children:[W.jsx("div",{className:"card-label",children:"Models"}),W.jsx("div",{className:"card-value",children:n.models})]})]}),W.jsxs("div",{className:"chart-container",children:[W.jsx("div",{className:"chart-title",children:"Tokens over time"}),W.jsx(vT,{width:"100%",height:280,children:W.jsxs(SM,{data:e,children:[W.jsx(fb,{strokeDasharray:"3 3",stroke:"var(--border)"}),W.jsx(pl,{dataKey:"time",tickFormatter:lf,stroke:"var(--text-secondary)",fontSize:12}),W.jsx(yl,{stroke:"var(--text-secondary)",fontSize:12}),W.jsx($n,{labelFormatter:lf,contentStyle:{background:"var(--card-bg)",border:"1px solid var(--border)"}}),W.jsx(Ua,{}),W.jsx(Ia,{type:"monotone",dataKey:"inputTokens",stroke:"var(--chart-input)",name:"Input",strokeWidth:2,dot:!1}),W.jsx(Ia,{type:"monotone",dataKey:"outputTokens",stroke:"var(--chart-output)",name:"Output",strokeWidth:2,dot:!1})]})})]}),r&&W.jsxs("div",{className:"chart-container",children:[W.jsx("div",{className:"chart-title",children:"Cost over time"}),W.jsx(vT,{width:"100%",height:280,children:W.jsxs(SM,{data:e,children:[W.jsx(fb,{strokeDasharray:"3 3",stroke:"var(--border)"}),W.jsx(pl,{dataKey:"time",tickFormatter:lf,stroke:"var(--text-secondary)",fontSize:12}),W.jsx(yl,{stroke:"var(--text-secondary)",fontSize:12,tickFormatter:u=>`$${u}`}),W.jsx($n,{labelFormatter:lf,formatter:u=>[`$${u.toFixed(4)}`,"Cost"],contentStyle:{background:"var(--card-bg)",border:"1px solid var(--border)"}}),W.jsx(Ia,{type:"monotone",dataKey:"cost",stroke:"var(--chart-cost)",name:"Cost",strokeWidth:2,dot:!1})]})})]})]})}function ng(t){return t>=1e6?`${(t/1e6).toFixed(1)}M`:t>=1e3?`${(t/1e3).toFixed(1)}K`:t.toLocaleString()}function aG(t){return t===0?"-":t<.01?`$${t.toFixed(4)}`:`$${t.toFixed(2)}`}function iG({spans:t}){const e=ot.useMemo(()=>{const n=new Map;for(const r of t){const u=n.get(r.model)||{model:r.model,requests:0,inputTokens:0,outputTokens:0,totalTokens:0,cost:0};u.requests+=1,u.inputTokens+=r.inputTokens,u.outputTokens+=r.outputTokens,u.totalTokens+=r.totalTokens,u.cost+=r.cost,n.set(r.model,u)}return Array.from(n.values()).sort((r,u)=>u.requests-r.requests)},[t]);return W.jsx("div",{className:"chart-container",children:W.jsxs("table",{children:[W.jsx("thead",{children:W.jsxs("tr",{children:[W.jsx("th",{children:"Model"}),W.jsx("th",{children:"Requests"}),W.jsx("th",{children:"Input Tokens"}),W.jsx("th",{children:"Output Tokens"}),W.jsx("th",{children:"Total Tokens"}),W.jsx("th",{children:"Cost"})]})}),W.jsx("tbody",{children:e.map(n=>W.jsxs("tr",{children:[W.jsx("td",{className:"mono",children:n.model}),W.jsx("td",{children:n.requests}),W.jsx("td",{children:ng(n.inputTokens)}),W.jsx("td",{children:ng(n.outputTokens)}),W.jsx("td",{children:ng(n.totalTokens)}),W.jsx("td",{children:aG(n.cost)})]},n.model))})]})})}function uG({span:t,onClose:e}){return W.jsx("div",{className:"detail-overlay",onClick:e,children:W.jsxs("div",{className:"detail-panel",onClick:n=>n.stopPropagation(),children:[W.jsx("button",{className:"close-btn",onClick:e,children:"×"}),W.jsx("h3",{children:t.name}),W.jsx("table",{className:"attr-table",children:W.jsxs("tbody",{children:[W.jsxs("tr",{children:[W.jsx("td",{children:"Span ID"}),W.jsx("td",{className:"mono",children:t.id})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Trace ID"}),W.jsx("td",{className:"mono",children:t.traceId})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Model"}),W.jsx("td",{className:"mono",children:t.model})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Operation"}),W.jsx("td",{children:t.operationName})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Duration"}),W.jsxs("td",{children:[t.duration.toFixed(0),"ms"]})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Input Tokens"}),W.jsx("td",{children:t.inputTokens.toLocaleString()})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Output Tokens"}),W.jsx("td",{children:t.outputTokens.toLocaleString()})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Total Tokens"}),W.jsx("td",{children:t.totalTokens.toLocaleString()})]}),t.cost>0&&W.jsxs("tr",{children:[W.jsx("td",{children:"Cost"}),W.jsxs("td",{children:["$",t.cost.toFixed(4)]})]}),Object.entries(t.attributes).sort(([n],[r])=>n.localeCompare(r)).map(([n,r])=>W.jsxs("tr",{children:[W.jsx("td",{className:"mono",children:n}),W.jsx("td",{className:"mono",children:String(r)})]},n))]})})]})})}function oG(t){return new Date(t).toLocaleTimeString()}function lG(t){return t<1e3?`${Math.round(t)}ms`:`${(t/1e3).toFixed(1)}s`}function cG(t){return t===0?"-":t<.01?`$${t.toFixed(4)}`:`$${t.toFixed(2)}`}function fG({spans:t}){const[e,n]=ot.useState(null),r=[...t].sort((u,l)=>l.startTime-u.startTime);return W.jsxs("div",{children:[W.jsx("div",{className:"chart-container",children:W.jsxs("table",{children:[W.jsx("thead",{children:W.jsxs("tr",{children:[W.jsx("th",{children:"Time"}),W.jsx("th",{children:"Model"}),W.jsx("th",{children:"Operation"}),W.jsx("th",{children:"Input"}),W.jsx("th",{children:"Output"}),W.jsx("th",{children:"Cost"}),W.jsx("th",{children:"Duration"})]})}),W.jsx("tbody",{children:r.map(u=>W.jsxs("tr",{className:"clickable",onClick:()=>n(u),children:[W.jsx("td",{className:"mono",children:oG(u.startTime)}),W.jsx("td",{className:"mono",children:u.model}),W.jsx("td",{children:u.operationName}),W.jsx("td",{children:u.inputTokens.toLocaleString()}),W.jsx("td",{children:u.outputTokens.toLocaleString()}),W.jsx("td",{children:cG(u.cost)}),W.jsx("td",{children:lG(u.duration)})]},u.id))})]})}),e&&W.jsx(uG,{span:e,onClose:()=>n(null)})]})}function sG(){return W.jsxs("div",{className:"empty-state",children:[W.jsx("h2",{children:"Waiting for data..."}),W.jsx("p",{children:"Configure your application to send OpenTelemetry traces to this endpoint:"}),W.jsx("p",{children:W.jsx("code",{children:"OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318"})}),W.jsxs("p",{style:{marginTop:16},children:["tokviz will display token usage and costs from any OTLP source that emits"," ",W.jsx("code",{children:"gen_ai.*"})," span attributes."]})]})}function hG(){const{spans:t,connected:e}=rR(),[n,r]=ot.useState("overview");return W.jsxs("div",{className:"app",children:[W.jsxs("div",{className:"header",children:[W.jsx("h1",{children:"tokviz"}),W.jsxs("div",{className:"connection-status",children:[W.jsx("div",{className:`status-dot ${e?"connected":""}`}),e?"Connected":"Disconnected"]})]}),t.length===0?W.jsx(sG,{}):W.jsxs(W.Fragment,{children:[W.jsxs("div",{className:"tabs",children:[W.jsx("button",{className:`tab ${n==="overview"?"active":""}`,onClick:()=>r("overview"),children:"Overview"}),W.jsx("button",{className:`tab ${n==="models"?"active":""}`,onClick:()=>r("models"),children:"Models"}),W.jsx("button",{className:`tab ${n==="requests"?"active":""}`,onClick:()=>r("requests"),children:"Requests"})]}),n==="overview"&&W.jsx(rG,{spans:t}),n==="models"&&W.jsx(iG,{spans:t}),n==="requests"&&W.jsx(fG,{spans:t})]})]})}nR.createRoot(document.getElementById("root")).render(W.jsx(ot.StrictMode,{children:W.jsx(hG,{})}));
|
|
117
|
+
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.`)}function AD(t,e){if(t){if(typeof t=="string")return Sb(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);if(n==="Object"&&t.constructor&&(n=t.constructor.name),n==="Map"||n==="Set")return Array.from(t);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return Sb(t,e)}}function U7(t){if(typeof Symbol<"u"&&t[Symbol.iterator]!=null||t["@@iterator"]!=null)return Array.from(t)}function k7(t){if(Array.isArray(t))return Sb(t)}function Sb(t,e){(e==null||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}function yM(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter(function(u){return Object.getOwnPropertyDescriptor(t,u).enumerable})),n.push.apply(n,r)}return n}function et(t){for(var e=1;e<arguments.length;e++){var n=arguments[e]!=null?arguments[e]:{};e%2?yM(Object(n),!0).forEach(function(r){bt(t,r,n[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):yM(Object(n)).forEach(function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(n,r))})}return t}function bt(t,e,n){return e=wD(e),e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function wD(t){var e=H7(t,"string");return du(e)=="symbol"?e:e+""}function H7(t,e){if(du(t)!="object"||!t)return t;var n=t[Symbol.toPrimitive];if(n!==void 0){var r=n.call(t,e);if(du(r)!="object")return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return(e==="string"?String:Number)(t)}var I7={xAxis:["bottom","top"],yAxis:["left","right"]},G7={width:"100%",height:"100%"},TD={x:0,y:0};function of(t){return t}var Y7=function(e,n){return n==="horizontal"?e.x:n==="vertical"?e.y:n==="centric"?e.angle:e.radius},X7=function(e,n,r,u){var l=n.find(function(m){return m&&m.index===r});if(l){if(e==="horizontal")return{x:l.coordinate,y:u.y};if(e==="vertical")return{x:u.x,y:l.coordinate};if(e==="centric"){var f=l.coordinate,s=u.radius;return et(et(et({},u),Re(u.cx,u.cy,s,f)),{},{angle:f,radius:s})}var h=l.coordinate,d=u.angle;return et(et(et({},u),Re(u.cx,u.cy,h,d)),{},{angle:d,radius:h})}return TD},$s=function(e,n){var r=n.graphicalItems,u=n.dataStartIndex,l=n.dataEndIndex,f=(r??[]).reduce(function(s,h){var d=h.props.data;return d&&d.length?[].concat(vu(s),vu(d)):s},[]);return f.length>0?f:e&&e.length&&st(u)&&st(l)?e.slice(u,l+1):[]};function ED(t){return t==="number"?[0,"auto"]:void 0}var xb=function(e,n,r,u){var l=e.graphicalItems,f=e.tooltipAxis,s=$s(n,e);return r<0||!l||!l.length||r>=s.length?null:l.reduce(function(h,d){var m,y=(m=d.props.data)!==null&&m!==void 0?m:n;y&&e.dataStartIndex+e.dataEndIndex!==0&&e.dataEndIndex-e.dataStartIndex>=r&&(y=y.slice(e.dataStartIndex,e.dataEndIndex+1));var g;if(f.dataKey&&!f.allowDuplicatedCategory){var b=y===void 0?s:y;g=cf(b,f.dataKey,u)}else g=y&&y[r]||s[r];return g?[].concat(vu(h),[MC(d,g)]):h},[])},mM=function(e,n,r,u){var l=u||{x:e.chartX,y:e.chartY},f=Y7(l,r),s=e.orderedTooltipTicks,h=e.tooltipAxis,d=e.tooltipTicks,m=e5(f,s,d,h);if(m>=0&&d){var y=d[m]&&d[m].value,g=xb(e,n,m,y),b=X7(r,s,m,l);return{activeTooltipIndex:m,activeLabel:y,activePayload:g,activeCoordinate:b}}return null},K7=function(e,n){var r=n.axes,u=n.graphicalItems,l=n.axisType,f=n.axisIdKey,s=n.stackGroups,h=n.dataStartIndex,d=n.dataEndIndex,m=e.layout,y=e.children,g=e.stackOffset,b=wC(m,l);return r.reduce(function(_,O){var S,T=O.type.defaultProps!==void 0?et(et({},O.type.defaultProps),O.props):O.props,E=T.type,M=T.dataKey,D=T.allowDataOverflow,A=T.allowDuplicatedCategory,w=T.scale,C=T.ticks,q=T.includeHidden,z=T[f];if(_[z])return _;var F=$s(e.data,{graphicalItems:u.filter(function(U){var nt,ft=f in U.props?U.props[f]:(nt=U.type.defaultProps)===null||nt===void 0?void 0:nt[f];return ft===z}),dataStartIndex:h,dataEndIndex:d}),H=F.length,B,V,Z;b7(T.domain,D,E)&&(B=$g(T.domain,null,D),b&&(E==="number"||w!=="auto")&&(Z=No(F,M,"category")));var K=ED(E);if(!B||B.length===0){var N,I=(N=T.domain)!==null&&N!==void 0?N:K;if(M){if(B=No(F,M,E),E==="category"&&b){var J=XR(B);A&&J?(V=B,B=Kf(0,H)):A||(B=DE(I,B,O).reduce(function(U,nt){return U.indexOf(nt)>=0?U:[].concat(vu(U),[nt])},[]))}else if(E==="category")A?B=B.filter(function(U){return U!==""&&!Ct(U)}):B=DE(I,B,O).reduce(function(U,nt){return U.indexOf(nt)>=0||nt===""||Ct(nt)?U:[].concat(vu(U),[nt])},[]);else if(E==="number"){var it=u5(F,u.filter(function(U){var nt,ft,vt=f in U.props?U.props[f]:(nt=U.type.defaultProps)===null||nt===void 0?void 0:nt[f],mt="hide"in U.props?U.props.hide:(ft=U.type.defaultProps)===null||ft===void 0?void 0:ft.hide;return vt===z&&(q||!mt)}),M,l,m);it&&(B=it)}b&&(E==="number"||w!=="auto")&&(Z=No(F,M,"category"))}else b?B=Kf(0,H):s&&s[z]&&s[z].hasStack&&E==="number"?B=g==="expand"?[0,1]:EC(s[z].stackGroups,h,d):B=AC(F,u.filter(function(U){var nt=f in U.props?U.props[f]:U.type.defaultProps[f],ft="hide"in U.props?U.props.hide:U.type.defaultProps.hide;return nt===z&&(q||!ft)}),E,m,!0);if(E==="number")B=gb(y,B,z,l,C),I&&(B=$g(I,B,D));else if(E==="category"&&I){var lt=I,P=B.every(function(U){return lt.indexOf(U)>=0});P&&(B=lt)}}return et(et({},_),{},bt({},z,et(et({},T),{},{axisType:l,domain:B,categoricalDomain:Z,duplicateDomain:V,originalDomain:(S=T.domain)!==null&&S!==void 0?S:K,isCategorical:b,layout:m})))},{})},V7=function(e,n){var r=n.graphicalItems,u=n.Axis,l=n.axisType,f=n.axisIdKey,s=n.stackGroups,h=n.dataStartIndex,d=n.dataEndIndex,m=e.layout,y=e.children,g=$s(e.data,{graphicalItems:r,dataStartIndex:h,dataEndIndex:d}),b=g.length,_=wC(m,l),O=-1;return r.reduce(function(S,T){var E=T.type.defaultProps!==void 0?et(et({},T.type.defaultProps),T.props):T.props,M=E[f],D=ED("number");if(!S[M]){O++;var A;return _?A=Kf(0,b):s&&s[M]&&s[M].hasStack?(A=EC(s[M].stackGroups,h,d),A=gb(y,A,M,l)):(A=$g(D,AC(g,r.filter(function(w){var C,q,z=f in w.props?w.props[f]:(C=w.type.defaultProps)===null||C===void 0?void 0:C[f],F="hide"in w.props?w.props.hide:(q=w.type.defaultProps)===null||q===void 0?void 0:q.hide;return z===M&&!F}),"number",m),u.defaultProps.allowDataOverflow),A=gb(y,A,M,l)),et(et({},S),{},bt({},M,et(et({axisType:l},u.defaultProps),{},{hide:!0,orientation:En(I7,"".concat(l,".").concat(O%2),null),domain:A,originalDomain:D,isCategorical:_,layout:m})))}return S},{})},Z7=function(e,n){var r=n.axisType,u=r===void 0?"xAxis":r,l=n.AxisComp,f=n.graphicalItems,s=n.stackGroups,h=n.dataStartIndex,d=n.dataEndIndex,m=e.children,y="".concat(u,"Id"),g=Mn(m,l),b={};return g&&g.length?b=K7(e,{axes:g,graphicalItems:f,axisType:u,axisIdKey:y,stackGroups:s,dataStartIndex:h,dataEndIndex:d}):f&&f.length&&(b=V7(e,{Axis:l,graphicalItems:f,axisType:u,axisIdKey:y,stackGroups:s,dataStartIndex:h,dataEndIndex:d})),b},Q7=function(e){var n=ua(e),r=Or(n,!1,!0);return{tooltipTicks:r,orderedTooltipTicks:Ib(r,function(u){return u.coordinate}),tooltipAxis:n,tooltipAxisBandSize:$f(n,r)}},gM=function(e){var n=e.children,r=e.defaultShowTooltip,u=fn(n,au),l=0,f=0;return e.data&&e.data.length!==0&&(f=e.data.length-1),u&&u.props&&(u.props.startIndex>=0&&(l=u.props.startIndex),u.props.endIndex>=0&&(f=u.props.endIndex)),{chartX:0,chartY:0,dataStartIndex:l,dataEndIndex:f,activeTooltipIndex:-1,isTooltipActive:!!r}},F7=function(e){return!e||!e.length?!1:e.some(function(n){var r=_r(n&&n.type);return r&&r.indexOf("Bar")>=0})},bM=function(e){return e==="horizontal"?{numericAxisName:"yAxis",cateAxisName:"xAxis"}:e==="vertical"?{numericAxisName:"xAxis",cateAxisName:"yAxis"}:e==="centric"?{numericAxisName:"radiusAxis",cateAxisName:"angleAxis"}:{numericAxisName:"angleAxis",cateAxisName:"radiusAxis"}},W7=function(e,n){var r=e.props,u=e.graphicalItems,l=e.xAxisMap,f=l===void 0?{}:l,s=e.yAxisMap,h=s===void 0?{}:s,d=r.width,m=r.height,y=r.children,g=r.margin||{},b=fn(y,au),_=fn(y,Ua),O=Object.keys(h).reduce(function(A,w){var C=h[w],q=C.orientation;return!C.mirror&&!C.hide?et(et({},A),{},bt({},q,A[q]+C.width)):A},{left:g.left||0,right:g.right||0}),S=Object.keys(f).reduce(function(A,w){var C=f[w],q=C.orientation;return!C.mirror&&!C.hide?et(et({},A),{},bt({},q,En(A,"".concat(q))+C.height)):A},{top:g.top||0,bottom:g.bottom||0}),T=et(et({},S),O),E=T.bottom;b&&(T.bottom+=b.props.height||au.defaultProps.height),_&&n&&(T=a5(T,u,r,n));var M=d-T.left-T.right,D=m-T.top-T.bottom;return et(et({brushBottom:E},T),{},{width:Math.max(M,0),height:Math.max(D,0)})},J7=function(e,n){if(n==="xAxis")return e[n].width;if(n==="yAxis")return e[n].height},tG=function(e){var n=e.chartName,r=e.GraphicalChild,u=e.defaultTooltipEventType,l=u===void 0?"axis":u,f=e.validateTooltipEventTypes,s=f===void 0?["axis"]:f,h=e.axisComponents,d=e.legendContent,m=e.formatAxisMap,y=e.defaultProps,g=function(T,E){var M=E.graphicalItems,D=E.stackGroups,A=E.offset,w=E.updateId,C=E.dataStartIndex,q=E.dataEndIndex,z=T.barSize,F=T.layout,H=T.barGap,B=T.barCategoryGap,V=T.maxBarSize,Z=bM(F),K=Z.numericAxisName,N=Z.cateAxisName,I=F7(M),J=[];return M.forEach(function(it,lt){var P=$s(T.data,{graphicalItems:[it],dataStartIndex:C,dataEndIndex:q}),U=it.type.defaultProps!==void 0?et(et({},it.type.defaultProps),it.props):it.props,nt=U.dataKey,ft=U.maxBarSize,vt=U["".concat(K,"Id")],mt=U["".concat(N,"Id")],Et={},Ut=h.reduce(function(Pn,tr){var _u=E["".concat(tr.axisType,"Map")],ze=U["".concat(tr.axisType,"Id")];_u&&_u[ze]||tr.axisType==="zAxis"||Ka();var jl=_u[ze];return et(et({},Pn),{},bt(bt({},tr.axisType,jl),"".concat(tr.axisType,"Ticks"),Or(jl)))},Et),ct=Ut[N],St=Ut["".concat(N,"Ticks")],xt=D&&D[vt]&&D[vt].hasStack&&g5(it,D[vt].stackGroups),ut=_r(it.type).indexOf("Bar")>=0,Jt=$f(ct,St),At=[],ie=I&&n5({barSize:z,stackGroups:D,totalSize:J7(Ut,N)});if(ut){var ue,qe,Dn=Ct(ft)?V:ft,Gn=(ue=(qe=$f(ct,St,!0))!==null&&qe!==void 0?qe:Dn)!==null&&ue!==void 0?ue:0;At=r5({barGap:H,barCategoryGap:B,bandSize:Gn!==Jt?Gn:Jt,sizeList:ie[mt],maxBarSize:Dn}),Gn!==Jt&&(At=At.map(function(Pn){return et(et({},Pn),{},{position:et(et({},Pn.position),{},{offset:Pn.position.offset-Gn/2})})}))}var Nr=it&&it.type&&it.type.getComposedData;Nr&&J.push({props:et(et({},Nr(et(et({},Ut),{},{displayedData:P,props:T,dataKey:nt,item:it,bandSize:Jt,barPosition:At,offset:A,stackedData:xt,layout:F,dataStartIndex:C,dataEndIndex:q}))),{},bt(bt(bt({key:it.key||"item-".concat(lt)},K,Ut[K]),N,Ut[N]),"animationId",w)),childIndex:i3(it,T.children),item:it})}),J},b=function(T,E){var M=T.props,D=T.dataStartIndex,A=T.dataEndIndex,w=T.updateId;if(!G_({props:M}))return null;var C=M.children,q=M.layout,z=M.stackOffset,F=M.data,H=M.reverseStackOrder,B=bM(q),V=B.numericAxisName,Z=B.cateAxisName,K=Mn(C,r),N=p5(F,K,"".concat(V,"Id"),"".concat(Z,"Id"),z,H),I=h.reduce(function(U,nt){var ft="".concat(nt.axisType,"Map");return et(et({},U),{},bt({},ft,Z7(M,et(et({},nt),{},{graphicalItems:K,stackGroups:nt.axisType===V&&N,dataStartIndex:D,dataEndIndex:A}))))},{}),J=W7(et(et({},I),{},{props:M,graphicalItems:K}),E==null?void 0:E.legendBBox);Object.keys(I).forEach(function(U){I[U]=m(M,I[U],J,U.replace("Map",""),n)});var it=I["".concat(Z,"Map")],lt=Q7(it),P=g(M,et(et({},I),{},{dataStartIndex:D,dataEndIndex:A,updateId:w,graphicalItems:K,stackGroups:N,offset:J}));return et(et({formattedGraphicalItems:P,graphicalItems:K,offset:J,stackGroups:N},lt),I)},_=(function(S){function T(E){var M,D,A;return P7(this,T),A=q7(this,T,[E]),bt(A,"eventEmitterSymbol",Symbol("rechartsEventEmitter")),bt(A,"accessibilityManager",new g7),bt(A,"handleLegendBBoxUpdate",function(w){if(w){var C=A.state,q=C.dataStartIndex,z=C.dataEndIndex,F=C.updateId;A.setState(et({legendBBox:w},b({props:A.props,dataStartIndex:q,dataEndIndex:z,updateId:F},et(et({},A.state),{},{legendBBox:w}))))}}),bt(A,"handleReceiveSyncEvent",function(w,C,q){if(A.props.syncId===w){if(q===A.eventEmitterSymbol&&typeof A.props.syncMethod!="function")return;A.applySyncEvent(C)}}),bt(A,"handleBrushChange",function(w){var C=w.startIndex,q=w.endIndex;if(C!==A.state.dataStartIndex||q!==A.state.dataEndIndex){var z=A.state.updateId;A.setState(function(){return et({dataStartIndex:C,dataEndIndex:q},b({props:A.props,dataStartIndex:C,dataEndIndex:q,updateId:z},A.state))}),A.triggerSyncEvent({dataStartIndex:C,dataEndIndex:q})}}),bt(A,"handleMouseEnter",function(w){var C=A.getMouseInfo(w);if(C){var q=et(et({},C),{},{isTooltipActive:!0});A.setState(q),A.triggerSyncEvent(q);var z=A.props.onMouseEnter;Tt(z)&&z(q,w)}}),bt(A,"triggeredAfterMouseMove",function(w){var C=A.getMouseInfo(w),q=C?et(et({},C),{},{isTooltipActive:!0}):{isTooltipActive:!1};A.setState(q),A.triggerSyncEvent(q);var z=A.props.onMouseMove;Tt(z)&&z(q,w)}),bt(A,"handleItemMouseEnter",function(w){A.setState(function(){return{isTooltipActive:!0,activeItem:w,activePayload:w.tooltipPayload,activeCoordinate:w.tooltipPosition||{x:w.cx,y:w.cy}}})}),bt(A,"handleItemMouseLeave",function(){A.setState(function(){return{isTooltipActive:!1}})}),bt(A,"handleMouseMove",function(w){w.persist(),A.throttleTriggeredAfterMouseMove(w)}),bt(A,"handleMouseLeave",function(w){A.throttleTriggeredAfterMouseMove.cancel();var C={isTooltipActive:!1};A.setState(C),A.triggerSyncEvent(C);var q=A.props.onMouseLeave;Tt(q)&&q(C,w)}),bt(A,"handleOuterEvent",function(w){var C=a3(w),q=En(A.props,"".concat(C));if(C&&Tt(q)){var z,F;/.*touch.*/i.test(C)?F=A.getMouseInfo(w.changedTouches[0]):F=A.getMouseInfo(w),q((z=F)!==null&&z!==void 0?z:{},w)}}),bt(A,"handleClick",function(w){var C=A.getMouseInfo(w);if(C){var q=et(et({},C),{},{isTooltipActive:!0});A.setState(q),A.triggerSyncEvent(q);var z=A.props.onClick;Tt(z)&&z(q,w)}}),bt(A,"handleMouseDown",function(w){var C=A.props.onMouseDown;if(Tt(C)){var q=A.getMouseInfo(w);C(q,w)}}),bt(A,"handleMouseUp",function(w){var C=A.props.onMouseUp;if(Tt(C)){var q=A.getMouseInfo(w);C(q,w)}}),bt(A,"handleTouchMove",function(w){w.changedTouches!=null&&w.changedTouches.length>0&&A.throttleTriggeredAfterMouseMove(w.changedTouches[0])}),bt(A,"handleTouchStart",function(w){w.changedTouches!=null&&w.changedTouches.length>0&&A.handleMouseDown(w.changedTouches[0])}),bt(A,"handleTouchEnd",function(w){w.changedTouches!=null&&w.changedTouches.length>0&&A.handleMouseUp(w.changedTouches[0])}),bt(A,"handleDoubleClick",function(w){var C=A.props.onDoubleClick;if(Tt(C)){var q=A.getMouseInfo(w);C(q,w)}}),bt(A,"handleContextMenu",function(w){var C=A.props.onContextMenu;if(Tt(C)){var q=A.getMouseInfo(w);C(q,w)}}),bt(A,"triggerSyncEvent",function(w){A.props.syncId!==void 0&&Jm.emit(tg,A.props.syncId,w,A.eventEmitterSymbol)}),bt(A,"applySyncEvent",function(w){var C=A.props,q=C.layout,z=C.syncMethod,F=A.state.updateId,H=w.dataStartIndex,B=w.dataEndIndex;if(w.dataStartIndex!==void 0||w.dataEndIndex!==void 0)A.setState(et({dataStartIndex:H,dataEndIndex:B},b({props:A.props,dataStartIndex:H,dataEndIndex:B,updateId:F},A.state)));else if(w.activeTooltipIndex!==void 0){var V=w.chartX,Z=w.chartY,K=w.activeTooltipIndex,N=A.state,I=N.offset,J=N.tooltipTicks;if(!I)return;if(typeof z=="function")K=z(J,w);else if(z==="value"){K=-1;for(var it=0;it<J.length;it++)if(J[it].value===w.activeLabel){K=it;break}}var lt=et(et({},I),{},{x:I.left,y:I.top}),P=Math.min(V,lt.x+lt.width),U=Math.min(Z,lt.y+lt.height),nt=J[K]&&J[K].value,ft=xb(A.state,A.props.data,K),vt=J[K]?{x:q==="horizontal"?J[K].coordinate:P,y:q==="horizontal"?U:J[K].coordinate}:TD;A.setState(et(et({},w),{},{activeLabel:nt,activeCoordinate:vt,activePayload:ft,activeTooltipIndex:K}))}else A.setState(w)}),bt(A,"renderCursor",function(w){var C,q=A.state,z=q.isTooltipActive,F=q.activeCoordinate,H=q.activePayload,B=q.offset,V=q.activeTooltipIndex,Z=q.tooltipAxisBandSize,K=A.getTooltipEventType(),N=(C=w.props.active)!==null&&C!==void 0?C:z,I=A.props.layout,J=w.key||"_recharts-cursor";return L.createElement(w7,{key:J,activeCoordinate:F,activePayload:H,activeTooltipIndex:V,chartName:n,element:w,isActive:N,layout:I,offset:B,tooltipAxisBandSize:Z,tooltipEventType:K})}),bt(A,"renderPolarAxis",function(w,C,q){var z=En(w,"type.axisType"),F=En(A.state,"".concat(z,"Map")),H=w.type.defaultProps,B=H!==void 0?et(et({},H),w.props):w.props,V=F&&F[B["".concat(z,"Id")]];return ot.cloneElement(w,et(et({},V),{},{className:qt(z,V.className),key:w.key||"".concat(C,"-").concat(q),ticks:Or(V,!0)}))}),bt(A,"renderPolarGrid",function(w){var C=w.props,q=C.radialLines,z=C.polarAngles,F=C.polarRadius,H=A.state,B=H.radiusAxisMap,V=H.angleAxisMap,Z=ua(B),K=ua(V),N=K.cx,I=K.cy,J=K.innerRadius,it=K.outerRadius;return ot.cloneElement(w,{polarAngles:Array.isArray(z)?z:Or(K,!0).map(function(lt){return lt.coordinate}),polarRadius:Array.isArray(F)?F:Or(Z,!0).map(function(lt){return lt.coordinate}),cx:N,cy:I,innerRadius:J,outerRadius:it,key:w.key||"polar-grid",radialLines:q})}),bt(A,"renderLegend",function(){var w=A.state.formattedGraphicalItems,C=A.props,q=C.children,z=C.width,F=C.height,H=A.props.margin||{},B=z-(H.left||0)-(H.right||0),V=OC({children:q,formattedGraphicalItems:w,legendWidth:B,legendContent:d});if(!V)return null;var Z=V.item,K=pM(V,T7);return ot.cloneElement(Z,et(et({},K),{},{chartWidth:z,chartHeight:F,margin:H,onBBoxUpdate:A.handleLegendBBoxUpdate}))}),bt(A,"renderTooltip",function(){var w,C=A.props,q=C.children,z=C.accessibilityLayer,F=fn(q,$n);if(!F)return null;var H=A.state,B=H.isTooltipActive,V=H.activeCoordinate,Z=H.activePayload,K=H.activeLabel,N=H.offset,I=(w=F.props.active)!==null&&w!==void 0?w:B;return ot.cloneElement(F,{viewBox:et(et({},N),{},{x:N.left,y:N.top}),active:I,label:K,payload:I?Z:[],coordinate:V,accessibilityLayer:z})}),bt(A,"renderBrush",function(w){var C=A.props,q=C.margin,z=C.data,F=A.state,H=F.offset,B=F.dataStartIndex,V=F.dataEndIndex,Z=F.updateId;return ot.cloneElement(w,{key:w.key||"_recharts-brush",onChange:ef(A.handleBrushChange,w.props.onChange),data:z,x:st(w.props.x)?w.props.x:H.left,y:st(w.props.y)?w.props.y:H.top+H.height+H.brushBottom-(q.bottom||0),width:st(w.props.width)?w.props.width:H.width,startIndex:B,endIndex:V,updateId:"brush-".concat(Z)})}),bt(A,"renderReferenceElement",function(w,C,q){if(!w)return null;var z=A,F=z.clipPathId,H=A.state,B=H.xAxisMap,V=H.yAxisMap,Z=H.offset,K=w.type.defaultProps||{},N=w.props,I=N.xAxisId,J=I===void 0?K.xAxisId:I,it=N.yAxisId,lt=it===void 0?K.yAxisId:it;return ot.cloneElement(w,{key:w.key||"".concat(C,"-").concat(q),xAxis:B[J],yAxis:V[lt],viewBox:{x:Z.left,y:Z.top,width:Z.width,height:Z.height},clipPathId:F})}),bt(A,"renderActivePoints",function(w){var C=w.item,q=w.activePoint,z=w.basePoint,F=w.childIndex,H=w.isRange,B=[],V=C.props.key,Z=C.item.type.defaultProps!==void 0?et(et({},C.item.type.defaultProps),C.item.props):C.item.props,K=Z.activeDot,N=Z.dataKey,I=et(et({index:F,dataKey:N,cx:q.x,cy:q.y,r:4,fill:p0(C.item),strokeWidth:2,stroke:"#fff",payload:q.payload,value:q.value},Rt(K,!1)),ff(K));return B.push(T.renderActiveDot(K,I,"".concat(V,"-activePoint-").concat(F))),z?B.push(T.renderActiveDot(K,et(et({},I),{},{cx:z.x,cy:z.y}),"".concat(V,"-basePoint-").concat(F))):H&&B.push(null),B}),bt(A,"renderGraphicChild",function(w,C,q){var z=A.filterFormatItem(w,C,q);if(!z)return null;var F=A.getTooltipEventType(),H=A.state,B=H.isTooltipActive,V=H.tooltipAxis,Z=H.activeTooltipIndex,K=H.activeLabel,N=A.props.children,I=fn(N,$n),J=z.props,it=J.points,lt=J.isRange,P=J.baseLine,U=z.item.type.defaultProps!==void 0?et(et({},z.item.type.defaultProps),z.item.props):z.item.props,nt=U.activeDot,ft=U.hide,vt=U.activeBar,mt=U.activeShape,Et=!!(!ft&&B&&I&&(nt||vt||mt)),Ut={};F!=="axis"&&I&&I.props.trigger==="click"?Ut={onClick:ef(A.handleItemMouseEnter,w.props.onClick)}:F!=="axis"&&(Ut={onMouseLeave:ef(A.handleItemMouseLeave,w.props.onMouseLeave),onMouseEnter:ef(A.handleItemMouseEnter,w.props.onMouseEnter)});var ct=ot.cloneElement(w,et(et({},z.props),Ut));function St(tr){return typeof V.dataKey=="function"?V.dataKey(tr.payload):null}if(Et)if(Z>=0){var xt,ut;if(V.dataKey&&!V.allowDuplicatedCategory){var Jt=typeof V.dataKey=="function"?St:"payload.".concat(V.dataKey.toString());xt=cf(it,Jt,K),ut=lt&&P&&cf(P,Jt,K)}else xt=it==null?void 0:it[Z],ut=lt&&P&&P[Z];if(mt||vt){var At=w.props.activeIndex!==void 0?w.props.activeIndex:Z;return[ot.cloneElement(w,et(et(et({},z.props),Ut),{},{activeIndex:At})),null,null]}if(!Ct(xt))return[ct].concat(vu(A.renderActivePoints({item:z,activePoint:xt,basePoint:ut,childIndex:Z,isRange:lt})))}else{var ie,ue=(ie=A.getItemByXY(A.state.activeCoordinate))!==null&&ie!==void 0?ie:{graphicalItem:ct},qe=ue.graphicalItem,Dn=qe.item,Gn=Dn===void 0?w:Dn,Nr=qe.childIndex,Pn=et(et(et({},z.props),Ut),{},{activeIndex:Nr});return[ot.cloneElement(Gn,Pn),null,null]}return lt?[ct,null,null]:[ct,null]}),bt(A,"renderCustomized",function(w,C,q){return ot.cloneElement(w,et(et({key:"recharts-customized-".concat(q)},A.props),A.state))}),bt(A,"renderMap",{CartesianGrid:{handler:of,once:!0},ReferenceArea:{handler:A.renderReferenceElement},ReferenceLine:{handler:of},ReferenceDot:{handler:A.renderReferenceElement},XAxis:{handler:of},YAxis:{handler:of},Brush:{handler:A.renderBrush,once:!0},Bar:{handler:A.renderGraphicChild},Line:{handler:A.renderGraphicChild},Area:{handler:A.renderGraphicChild},Radar:{handler:A.renderGraphicChild},RadialBar:{handler:A.renderGraphicChild},Scatter:{handler:A.renderGraphicChild},Pie:{handler:A.renderGraphicChild},Funnel:{handler:A.renderGraphicChild},Tooltip:{handler:A.renderCursor,once:!0},PolarGrid:{handler:A.renderPolarGrid,once:!0},PolarAngleAxis:{handler:A.renderPolarAxis},PolarRadiusAxis:{handler:A.renderPolarAxis},Customized:{handler:A.renderCustomized}}),A.clipPathId="".concat((M=E.id)!==null&&M!==void 0?M:xl("recharts"),"-clip"),A.throttleTriggeredAfterMouseMove=Oj(A.triggeredAfterMouseMove,(D=E.throttleDelay)!==null&&D!==void 0?D:1e3/60),A.state={},A}return B7(T,S),R7(T,[{key:"componentDidMount",value:function(){var M,D;this.addListener(),this.accessibilityManager.setDetails({container:this.container,offset:{left:(M=this.props.margin.left)!==null&&M!==void 0?M:0,top:(D=this.props.margin.top)!==null&&D!==void 0?D:0},coordinateList:this.state.tooltipTicks,mouseHandlerCallback:this.triggeredAfterMouseMove,layout:this.props.layout}),this.displayDefaultTooltip()}},{key:"displayDefaultTooltip",value:function(){var M=this.props,D=M.children,A=M.data,w=M.height,C=M.layout,q=fn(D,$n);if(q){var z=q.props.defaultIndex;if(!(typeof z!="number"||z<0||z>this.state.tooltipTicks.length-1)){var F=this.state.tooltipTicks[z]&&this.state.tooltipTicks[z].value,H=xb(this.state,A,z,F),B=this.state.tooltipTicks[z].coordinate,V=(this.state.offset.top+w)/2,Z=C==="horizontal",K=Z?{x:B,y:V}:{y:B,x:V},N=this.state.formattedGraphicalItems.find(function(J){var it=J.item;return it.type.name==="Scatter"});N&&(K=et(et({},K),N.props.points[z].tooltipPosition),H=N.props.points[z].tooltipPayload);var I={activeTooltipIndex:z,isTooltipActive:!0,activeLabel:F,activePayload:H,activeCoordinate:K};this.setState(I),this.renderCursor(q),this.accessibilityManager.setIndex(z)}}}},{key:"getSnapshotBeforeUpdate",value:function(M,D){if(!this.props.accessibilityLayer)return null;if(this.state.tooltipTicks!==D.tooltipTicks&&this.accessibilityManager.setDetails({coordinateList:this.state.tooltipTicks}),this.props.layout!==M.layout&&this.accessibilityManager.setDetails({layout:this.props.layout}),this.props.margin!==M.margin){var A,w;this.accessibilityManager.setDetails({offset:{left:(A=this.props.margin.left)!==null&&A!==void 0?A:0,top:(w=this.props.margin.top)!==null&&w!==void 0?w:0}})}return null}},{key:"componentDidUpdate",value:function(M){ig([fn(M.children,$n)],[fn(this.props.children,$n)])||this.displayDefaultTooltip()}},{key:"componentWillUnmount",value:function(){this.removeListener(),this.throttleTriggeredAfterMouseMove.cancel()}},{key:"getTooltipEventType",value:function(){var M=fn(this.props.children,$n);if(M&&typeof M.props.shared=="boolean"){var D=M.props.shared?"axis":"item";return s.indexOf(D)>=0?D:l}return l}},{key:"getMouseInfo",value:function(M){if(!this.container)return null;var D=this.container,A=D.getBoundingClientRect(),w=Y$(A),C={chartX:Math.round(M.pageX-w.left),chartY:Math.round(M.pageY-w.top)},q=A.width/D.offsetWidth||1,z=this.inRange(C.chartX,C.chartY,q);if(!z)return null;var F=this.state,H=F.xAxisMap,B=F.yAxisMap,V=this.getTooltipEventType(),Z=mM(this.state,this.props.data,this.props.layout,z);if(V!=="axis"&&H&&B){var K=ua(H).scale,N=ua(B).scale,I=K&&K.invert?K.invert(C.chartX):null,J=N&&N.invert?N.invert(C.chartY):null;return et(et({},C),{},{xValue:I,yValue:J},Z)}return Z?et(et({},C),Z):null}},{key:"inRange",value:function(M,D){var A=arguments.length>2&&arguments[2]!==void 0?arguments[2]:1,w=this.props.layout,C=M/A,q=D/A;if(w==="horizontal"||w==="vertical"){var z=this.state.offset,F=C>=z.left&&C<=z.left+z.width&&q>=z.top&&q<=z.top+z.height;return F?{x:C,y:q}:null}var H=this.state,B=H.angleAxisMap,V=H.radiusAxisMap;if(B&&V){var Z=ua(B);return RE({x:C,y:q},Z)}return null}},{key:"parseEventsOfWrapper",value:function(){var M=this.props.children,D=this.getTooltipEventType(),A=fn(M,$n),w={};A&&D==="axis"&&(A.props.trigger==="click"?w={onClick:this.handleClick}:w={onMouseEnter:this.handleMouseEnter,onDoubleClick:this.handleDoubleClick,onMouseMove:this.handleMouseMove,onMouseLeave:this.handleMouseLeave,onTouchMove:this.handleTouchMove,onTouchStart:this.handleTouchStart,onTouchEnd:this.handleTouchEnd,onContextMenu:this.handleContextMenu});var C=ff(this.props,this.handleOuterEvent);return et(et({},C),w)}},{key:"addListener",value:function(){Jm.on(tg,this.handleReceiveSyncEvent)}},{key:"removeListener",value:function(){Jm.removeListener(tg,this.handleReceiveSyncEvent)}},{key:"filterFormatItem",value:function(M,D,A){for(var w=this.state.formattedGraphicalItems,C=0,q=w.length;C<q;C++){var z=w[C];if(z.item===M||z.props.key===M.key||D===_r(z.item.type)&&A===z.childIndex)return z}return null}},{key:"renderClipPath",value:function(){var M=this.clipPathId,D=this.state.offset,A=D.left,w=D.top,C=D.height,q=D.width;return L.createElement("defs",null,L.createElement("clipPath",{id:M},L.createElement("rect",{x:A,y:w,height:C,width:q})))}},{key:"getXScales",value:function(){var M=this.state.xAxisMap;return M?Object.entries(M).reduce(function(D,A){var w=vM(A,2),C=w[0],q=w[1];return et(et({},D),{},bt({},C,q.scale))},{}):null}},{key:"getYScales",value:function(){var M=this.state.yAxisMap;return M?Object.entries(M).reduce(function(D,A){var w=vM(A,2),C=w[0],q=w[1];return et(et({},D),{},bt({},C,q.scale))},{}):null}},{key:"getXScaleByAxisId",value:function(M){var D;return(D=this.state.xAxisMap)===null||D===void 0||(D=D[M])===null||D===void 0?void 0:D.scale}},{key:"getYScaleByAxisId",value:function(M){var D;return(D=this.state.yAxisMap)===null||D===void 0||(D=D[M])===null||D===void 0?void 0:D.scale}},{key:"getItemByXY",value:function(M){var D=this.state,A=D.formattedGraphicalItems,w=D.activeItem;if(A&&A.length)for(var C=0,q=A.length;C<q;C++){var z=A[C],F=z.props,H=z.item,B=H.type.defaultProps!==void 0?et(et({},H.type.defaultProps),H.props):H.props,V=_r(H.type);if(V==="Bar"){var Z=(F.data||[]).find(function(J){return hk(M,J)});if(Z)return{graphicalItem:z,payload:Z}}else if(V==="RadialBar"){var K=(F.data||[]).find(function(J){return RE(M,J)});if(K)return{graphicalItem:z,payload:K}}else if(Cs(z,w)||Ds(z,w)||fl(z,w)){var N=nH({graphicalItem:z,activeTooltipItem:w,itemData:B.data}),I=B.activeIndex===void 0?N:B.activeIndex;return{graphicalItem:et(et({},z),{},{childIndex:I}),payload:fl(z,w)?B.data[N]:z.props.data[N]}}}return null}},{key:"render",value:function(){var M=this;if(!G_(this))return null;var D=this.props,A=D.children,w=D.className,C=D.width,q=D.height,z=D.style,F=D.compact,H=D.title,B=D.desc,V=pM(D,E7),Z=Rt(V,!1);if(F)return L.createElement(Z2,{state:this.state,width:this.props.width,height:this.props.height,clipPathId:this.clipPathId},L.createElement(og,Ii({},Z,{width:C,height:q,title:H,desc:B}),this.renderClipPath(),X_(A,this.renderMap)));if(this.props.accessibilityLayer){var K,N;Z.tabIndex=(K=this.props.tabIndex)!==null&&K!==void 0?K:0,Z.role=(N=this.props.role)!==null&&N!==void 0?N:"application",Z.onKeyDown=function(J){M.accessibilityManager.keyboardEvent(J)},Z.onFocus=function(){M.accessibilityManager.focus()}}var I=this.parseEventsOfWrapper();return L.createElement(Z2,{state:this.state,width:this.props.width,height:this.props.height,clipPathId:this.clipPathId},L.createElement("div",Ii({className:qt("recharts-wrapper",w),style:et({position:"relative",cursor:"default",width:C,height:q},z)},I,{ref:function(it){M.container=it}}),L.createElement(og,Ii({},Z,{width:C,height:q,title:H,desc:B,style:G7}),this.renderClipPath(),X_(A,this.renderMap)),this.renderLegend(),this.renderTooltip()))}}])})(ot.Component);bt(_,"displayName",n),bt(_,"defaultProps",et({layout:"horizontal",stackOffset:"none",barCategoryGap:"10%",barGap:4,margin:{top:5,right:5,bottom:5,left:5},reverseStackOrder:!1,syncMethod:"index"},y)),bt(_,"getDerivedStateFromProps",function(S,T){var E=S.dataKey,M=S.data,D=S.children,A=S.width,w=S.height,C=S.layout,q=S.stackOffset,z=S.margin,F=T.dataStartIndex,H=T.dataEndIndex;if(T.updateId===void 0){var B=gM(S);return et(et(et({},B),{},{updateId:0},b(et(et({props:S},B),{},{updateId:0}),T)),{},{prevDataKey:E,prevData:M,prevWidth:A,prevHeight:w,prevLayout:C,prevStackOffset:q,prevMargin:z,prevChildren:D})}if(E!==T.prevDataKey||M!==T.prevData||A!==T.prevWidth||w!==T.prevHeight||C!==T.prevLayout||q!==T.prevStackOffset||!Gi(z,T.prevMargin)){var V=gM(S),Z={chartX:T.chartX,chartY:T.chartY,isTooltipActive:T.isTooltipActive},K=et(et({},mM(T,M,C)),{},{updateId:T.updateId+1}),N=et(et(et({},V),Z),K);return et(et(et({},N),b(et({props:S},N),T)),{},{prevDataKey:E,prevData:M,prevWidth:A,prevHeight:w,prevLayout:C,prevStackOffset:q,prevMargin:z,prevChildren:D})}if(!ig(D,T.prevChildren)){var I,J,it,lt,P=fn(D,au),U=P&&(I=(J=P.props)===null||J===void 0?void 0:J.startIndex)!==null&&I!==void 0?I:F,nt=P&&(it=(lt=P.props)===null||lt===void 0?void 0:lt.endIndex)!==null&&it!==void 0?it:H,ft=U!==F||nt!==H,vt=!Ct(M),mt=vt&&!ft?T.updateId:T.updateId+1;return et(et({updateId:mt},b(et(et({props:S},T),{},{updateId:mt,dataStartIndex:U,dataEndIndex:nt}),T)),{},{prevChildren:D,dataStartIndex:U,dataEndIndex:nt})}return null}),bt(_,"renderActiveDot",function(S,T,E){var M;return ot.isValidElement(S)?M=ot.cloneElement(S,T):Tt(S)?M=S(T):M=L.createElement(m0,T),L.createElement(he,{className:"recharts-active-dot",key:E},M)});var O=ot.forwardRef(function(T,E){return L.createElement(_,Ii({},T,{ref:E}))});return O.displayName=_.displayName,O},SM=tG({chartName:"LineChart",GraphicalChild:Ia,axisComponents:[{axisType:"xAxis",AxisComp:pl},{axisType:"yAxis",AxisComp:yl}],formatAxisMap:WH});function lf(t){return new Date(t).toLocaleTimeString()}function xM(t){return t>=1e6?`${(t/1e6).toFixed(1)}M`:t>=1e3?`${(t/1e3).toFixed(1)}K`:t.toLocaleString()}function eG(t){return t===0?"$0.00":t<.01?`$${t.toFixed(4)}`:`$${t.toFixed(2)}`}function nG(t){if(t.length===0)return 1e3;const e=Math.min(...t.map(u=>u.startTime)),r=Math.max(...t.map(u=>u.startTime))-e;return r<2*6e4?1e3:r<10*6e4?1e4:r<60*6e4?6e4:5*6e4}function rG({spans:t}){const e=ot.useMemo(()=>{const u=nG(t),l=new Map;for(const f of t){const s=Math.floor(f.startTime/u)*u,h=l.get(s)||{time:s,inputTokens:0,outputTokens:0,cost:0,requests:0};h.inputTokens+=f.inputTokens,h.outputTokens+=f.outputTokens,h.cost+=f.cost,h.requests+=1,l.set(s,h)}return Array.from(l.values()).sort((f,s)=>f.time-s.time)},[t]),n=ot.useMemo(()=>{const u=new Set;let l=0,f=0;for(const s of t)l+=s.totalTokens,f+=s.cost,u.add(s.model);return{tokens:l,cost:f,requests:t.length,models:u.size}},[t]),r=n.cost>0;return W.jsxs("div",{children:[W.jsxs("div",{className:"cards",children:[W.jsxs("div",{className:"card",children:[W.jsx("div",{className:"card-label",children:"Total Tokens"}),W.jsx("div",{className:"card-value",children:xM(n.tokens)})]}),W.jsxs("div",{className:"card",children:[W.jsx("div",{className:"card-label",children:"Total Cost"}),W.jsx("div",{className:"card-value",children:eG(n.cost)})]}),W.jsxs("div",{className:"card",children:[W.jsx("div",{className:"card-label",children:"Requests"}),W.jsx("div",{className:"card-value",children:xM(n.requests)})]}),W.jsxs("div",{className:"card",children:[W.jsx("div",{className:"card-label",children:"Models"}),W.jsx("div",{className:"card-value",children:n.models})]})]}),W.jsxs("div",{className:"chart-container",children:[W.jsx("div",{className:"chart-title",children:"Tokens over time"}),W.jsx(vT,{width:"100%",height:280,children:W.jsxs(SM,{data:e,children:[W.jsx(fb,{strokeDasharray:"3 3",stroke:"var(--border)"}),W.jsx(pl,{dataKey:"time",tickFormatter:lf,stroke:"var(--text-secondary)",fontSize:12}),W.jsx(yl,{stroke:"var(--text-secondary)",fontSize:12}),W.jsx($n,{labelFormatter:lf,contentStyle:{background:"var(--card-bg)",border:"1px solid var(--border)"}}),W.jsx(Ua,{}),W.jsx(Ia,{type:"monotone",dataKey:"inputTokens",stroke:"var(--chart-input)",name:"Input",strokeWidth:2,dot:!1}),W.jsx(Ia,{type:"monotone",dataKey:"outputTokens",stroke:"var(--chart-output)",name:"Output",strokeWidth:2,dot:!1})]})})]}),r&&W.jsxs("div",{className:"chart-container",children:[W.jsx("div",{className:"chart-title",children:"Cost over time"}),W.jsx(vT,{width:"100%",height:280,children:W.jsxs(SM,{data:e,children:[W.jsx(fb,{strokeDasharray:"3 3",stroke:"var(--border)"}),W.jsx(pl,{dataKey:"time",tickFormatter:lf,stroke:"var(--text-secondary)",fontSize:12}),W.jsx(yl,{stroke:"var(--text-secondary)",fontSize:12,tickFormatter:u=>`$${u}`}),W.jsx($n,{labelFormatter:lf,formatter:u=>[`$${u.toFixed(4)}`,"Cost"],contentStyle:{background:"var(--card-bg)",border:"1px solid var(--border)"}}),W.jsx(Ia,{type:"monotone",dataKey:"cost",stroke:"var(--chart-cost)",name:"Cost",strokeWidth:2,dot:!1})]})})]})]})}function ng(t){return t>=1e6?`${(t/1e6).toFixed(1)}M`:t>=1e3?`${(t/1e3).toFixed(1)}K`:t.toLocaleString()}function aG(t){return t===0?"-":t<.01?`$${t.toFixed(4)}`:`$${t.toFixed(2)}`}function iG({spans:t}){const e=ot.useMemo(()=>{const n=new Map;for(const r of t){const u=n.get(r.model)||{model:r.model,requests:0,inputTokens:0,outputTokens:0,totalTokens:0,cost:0};u.requests+=1,u.inputTokens+=r.inputTokens,u.outputTokens+=r.outputTokens,u.totalTokens+=r.totalTokens,u.cost+=r.cost,n.set(r.model,u)}return Array.from(n.values()).sort((r,u)=>u.requests-r.requests)},[t]);return W.jsx("div",{className:"chart-container",children:W.jsxs("table",{children:[W.jsx("thead",{children:W.jsxs("tr",{children:[W.jsx("th",{children:"Model"}),W.jsx("th",{children:"Requests"}),W.jsx("th",{children:"Input Tokens"}),W.jsx("th",{children:"Output Tokens"}),W.jsx("th",{children:"Total Tokens"}),W.jsx("th",{children:"Cost"})]})}),W.jsx("tbody",{children:e.map(n=>W.jsxs("tr",{children:[W.jsx("td",{className:"mono",children:n.model}),W.jsx("td",{children:n.requests}),W.jsx("td",{children:ng(n.inputTokens)}),W.jsx("td",{children:ng(n.outputTokens)}),W.jsx("td",{children:ng(n.totalTokens)}),W.jsx("td",{children:aG(n.cost)})]},n.model))})]})})}function uG({span:t,onClose:e}){return W.jsx("div",{className:"detail-overlay",onClick:e,children:W.jsxs("div",{className:"detail-panel",onClick:n=>n.stopPropagation(),children:[W.jsx("button",{className:"close-btn",onClick:e,children:"×"}),W.jsx("h3",{children:t.name}),W.jsx("table",{className:"attr-table",children:W.jsxs("tbody",{children:[W.jsxs("tr",{children:[W.jsx("td",{children:"Span ID"}),W.jsx("td",{className:"mono",children:t.id})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Trace ID"}),W.jsx("td",{className:"mono",children:t.traceId})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Model"}),W.jsx("td",{className:"mono",children:t.model})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Operation"}),W.jsx("td",{children:t.operationName})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Duration"}),W.jsxs("td",{children:[t.duration.toFixed(0),"ms"]})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Input Tokens"}),W.jsx("td",{children:t.inputTokens.toLocaleString()})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Output Tokens"}),W.jsx("td",{children:t.outputTokens.toLocaleString()})]}),W.jsxs("tr",{children:[W.jsx("td",{children:"Total Tokens"}),W.jsx("td",{children:t.totalTokens.toLocaleString()})]}),t.cost>0&&W.jsxs("tr",{children:[W.jsx("td",{children:"Cost"}),W.jsxs("td",{children:["$",t.cost.toFixed(4)]})]}),Object.entries(t.attributes).sort(([n],[r])=>n.localeCompare(r)).map(([n,r])=>W.jsxs("tr",{children:[W.jsx("td",{className:"mono",children:n}),W.jsx("td",{className:"mono",children:String(r)})]},n))]})})]})})}function oG(t){return new Date(t).toLocaleTimeString()}function lG(t){return t<1e3?`${Math.round(t)}ms`:`${(t/1e3).toFixed(1)}s`}function cG(t){return t===0?"-":t<.01?`$${t.toFixed(4)}`:`$${t.toFixed(2)}`}function fG({spans:t}){const[e,n]=ot.useState(null),r=[...t].sort((u,l)=>l.startTime-u.startTime);return W.jsxs("div",{children:[W.jsx("div",{className:"chart-container",children:W.jsxs("table",{children:[W.jsx("thead",{children:W.jsxs("tr",{children:[W.jsx("th",{children:"Time"}),W.jsx("th",{children:"Model"}),W.jsx("th",{children:"Operation"}),W.jsx("th",{children:"Input"}),W.jsx("th",{children:"Output"}),W.jsx("th",{children:"Cost"}),W.jsx("th",{children:"Duration"})]})}),W.jsx("tbody",{children:r.map(u=>W.jsxs("tr",{className:"clickable",onClick:()=>n(u),children:[W.jsx("td",{className:"mono",children:oG(u.startTime)}),W.jsx("td",{className:"mono",children:u.model}),W.jsx("td",{children:u.operationName}),W.jsx("td",{children:u.inputTokens.toLocaleString()}),W.jsx("td",{children:u.outputTokens.toLocaleString()}),W.jsx("td",{children:cG(u.cost)}),W.jsx("td",{children:lG(u.duration)})]},u.id))})]})}),e&&W.jsx(uG,{span:e,onClose:()=>n(null)})]})}function sG(){return W.jsxs("div",{className:"empty-state",children:[W.jsx("h2",{children:"Waiting for data..."}),W.jsx("p",{children:"Configure your application to send OpenTelemetry traces to this endpoint:"}),W.jsx("p",{children:W.jsx("code",{children:"OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:4318"})}),W.jsxs("p",{style:{marginTop:16},children:["tokviz will display token usage and costs from any OTLP source that emits"," ",W.jsx("code",{children:"gen_ai.*"})," span attributes."]})]})}function hG(){const{spans:t,connected:e}=rR(),[n,r]=ot.useState("overview");return W.jsxs("div",{className:"app",children:[W.jsxs("div",{className:"header",children:[W.jsxs("h1",{children:[W.jsx("img",{className:"logo",src:"/favicon.svg",alt:""}),"tokviz"]}),W.jsxs("div",{className:"connection-status",children:[W.jsx("div",{className:`status-dot ${e?"connected":""}`}),e?"Connected":"Disconnected"]})]}),t.length===0?W.jsx(sG,{}):W.jsxs(W.Fragment,{children:[W.jsxs("div",{className:"tabs",children:[W.jsx("button",{className:`tab ${n==="overview"?"active":""}`,onClick:()=>r("overview"),children:"Overview"}),W.jsx("button",{className:`tab ${n==="models"?"active":""}`,onClick:()=>r("models"),children:"Models"}),W.jsx("button",{className:`tab ${n==="requests"?"active":""}`,onClick:()=>r("requests"),children:"Requests"})]}),n==="overview"&&W.jsx(rG,{spans:t}),n==="models"&&W.jsx(iG,{spans:t}),n==="requests"&&W.jsx(fG,{spans:t})]})]})}nR.createRoot(document.getElementById("root")).render(W.jsx(ot.StrictMode,{children:W.jsx(hG,{})}));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="none">
|
|
2
|
+
<rect x="2" y="18" width="6" height="12" rx="1.5" fill="#6366f1"/>
|
|
3
|
+
<rect x="10" y="10" width="6" height="20" rx="1.5" fill="#8b5cf6"/>
|
|
4
|
+
<rect x="18" y="4" width="6" height="26" rx="1.5" fill="#a78bfa"/>
|
|
5
|
+
<rect x="26" y="14" width="4" height="16" rx="1.5" fill="#c4b5fd"/>
|
|
6
|
+
<circle cx="5" cy="14" r="2" fill="#6366f1"/>
|
|
7
|
+
<circle cx="13" cy="6" r="2" fill="#8b5cf6"/>
|
|
8
|
+
<circle cx="21" cy="2" r="2" fill="#a78bfa"/>
|
|
9
|
+
<circle cx="28" cy="10" r="2" fill="#c4b5fd"/>
|
|
10
|
+
<line x1="5" y1="14" x2="13" y2="6" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round"/>
|
|
11
|
+
<line x1="13" y1="6" x2="21" y2="2" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round"/>
|
|
12
|
+
<line x1="21" y1="2" x2="28" y2="10" stroke="#7c3aed" stroke-width="1.5" stroke-linecap="round"/>
|
|
13
|
+
</svg>
|
package/dist/client/index.html
CHANGED
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
6
7
|
<title>tokviz</title>
|
|
7
|
-
<script type="module" crossorigin src="/assets/index-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
8
|
+
<script type="module" crossorigin src="/assets/index-DXBuZy55.js"></script>
|
|
9
|
+
<link rel="stylesheet" crossorigin href="/assets/index-B8TeJ617.css">
|
|
9
10
|
</head>
|
|
10
11
|
<body>
|
|
11
12
|
<div id="root"></div>
|
package/dist/server/index.js
CHANGED
|
@@ -343,17 +343,87 @@ function toFloat(value) {
|
|
|
343
343
|
return isNaN(n) ? 0 : n;
|
|
344
344
|
}
|
|
345
345
|
|
|
346
|
+
// src/server/demo.ts
|
|
347
|
+
import { randomBytes } from "crypto";
|
|
348
|
+
var models = [
|
|
349
|
+
{ name: "gpt-4o", inputCostPer1k: 25e-4, outputCostPer1k: 0.01 },
|
|
350
|
+
{ name: "gpt-4o-mini", inputCostPer1k: 15e-5, outputCostPer1k: 6e-4 },
|
|
351
|
+
{ name: "claude-sonnet-4-20250514", inputCostPer1k: 3e-3, outputCostPer1k: 0.015 },
|
|
352
|
+
{ name: "claude-3-5-haiku-20241022", inputCostPer1k: 8e-4, outputCostPer1k: 4e-3 },
|
|
353
|
+
{ name: "gemini-2.0-flash", inputCostPer1k: 1e-4, outputCostPer1k: 4e-4 }
|
|
354
|
+
];
|
|
355
|
+
var operations = ["chat", "chat", "chat", "embeddings", "completions"];
|
|
356
|
+
function hexId(bytes) {
|
|
357
|
+
return randomBytes(bytes).toString("hex");
|
|
358
|
+
}
|
|
359
|
+
function randomInt(min, max) {
|
|
360
|
+
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
361
|
+
}
|
|
362
|
+
function pick(arr) {
|
|
363
|
+
return arr[Math.floor(Math.random() * arr.length)];
|
|
364
|
+
}
|
|
365
|
+
function generateSpan(baseTime) {
|
|
366
|
+
const model = pick(models);
|
|
367
|
+
const operation = pick(operations);
|
|
368
|
+
const now = baseTime ?? Date.now();
|
|
369
|
+
const duration = randomInt(200, 8e3);
|
|
370
|
+
const startTime = now - duration;
|
|
371
|
+
const inputTokens = randomInt(50, 12e3);
|
|
372
|
+
const outputTokens = operation === "embeddings" ? 0 : randomInt(20, 4e3);
|
|
373
|
+
const totalTokens = inputTokens + outputTokens;
|
|
374
|
+
const cost = inputTokens / 1e3 * model.inputCostPer1k + outputTokens / 1e3 * model.outputCostPer1k;
|
|
375
|
+
const spanId = hexId(8);
|
|
376
|
+
const traceId = hexId(16);
|
|
377
|
+
return {
|
|
378
|
+
id: spanId,
|
|
379
|
+
traceId,
|
|
380
|
+
name: `${operation} ${model.name}`,
|
|
381
|
+
startTime,
|
|
382
|
+
endTime: now,
|
|
383
|
+
duration,
|
|
384
|
+
model: model.name,
|
|
385
|
+
requestModel: model.name,
|
|
386
|
+
responseModel: model.name,
|
|
387
|
+
inputTokens,
|
|
388
|
+
outputTokens,
|
|
389
|
+
totalTokens,
|
|
390
|
+
cost,
|
|
391
|
+
operationName: operation,
|
|
392
|
+
attributes: {
|
|
393
|
+
"gen_ai.operation.name": operation,
|
|
394
|
+
"gen_ai.request.model": model.name,
|
|
395
|
+
"gen_ai.response.model": model.name,
|
|
396
|
+
"gen_ai.usage.input_tokens": inputTokens,
|
|
397
|
+
"gen_ai.usage.output_tokens": outputTokens,
|
|
398
|
+
"gen_ai.usage.total_tokens": totalTokens,
|
|
399
|
+
"gen_ai.usage.cost": parseFloat(cost.toFixed(6)),
|
|
400
|
+
"gen_ai.system": model.name.startsWith("gpt") ? "openai" : model.name.startsWith("claude") ? "anthropic" : "google_genai"
|
|
401
|
+
}
|
|
402
|
+
};
|
|
403
|
+
}
|
|
404
|
+
function generateInitialSpans(count = 25) {
|
|
405
|
+
const spans = [];
|
|
406
|
+
const now = Date.now();
|
|
407
|
+
for (let i = 0; i < count; i++) {
|
|
408
|
+
const time = now - randomInt(0, 10 * 6e4);
|
|
409
|
+
spans.push(generateSpan(time));
|
|
410
|
+
}
|
|
411
|
+
return spans.sort((a, b) => a.startTime - b.startTime);
|
|
412
|
+
}
|
|
413
|
+
|
|
346
414
|
// src/server/index.ts
|
|
347
415
|
var __filename = fileURLToPath(import.meta.url);
|
|
348
416
|
var __dirname = dirname(__filename);
|
|
349
417
|
var { values } = parseArgs({
|
|
350
418
|
options: {
|
|
351
419
|
port: { type: "string", default: "4318" },
|
|
352
|
-
"no-open": { type: "boolean", default: false }
|
|
420
|
+
"no-open": { type: "boolean", default: false },
|
|
421
|
+
demo: { type: "boolean", default: false }
|
|
353
422
|
},
|
|
354
423
|
strict: false
|
|
355
424
|
});
|
|
356
425
|
var port = parseInt(values.port || "4318", 10);
|
|
426
|
+
var isDemo = values.demo ?? false;
|
|
357
427
|
var app = express();
|
|
358
428
|
var server = createServer(app);
|
|
359
429
|
var wss = new WebSocketServer({ server, path: "/ws" });
|
|
@@ -410,6 +480,24 @@ server.listen(port, () => {
|
|
|
410
480
|
console.log(` OTLP endpoint: http://localhost:${port}/v1/traces`);
|
|
411
481
|
console.log(` Set OTEL_EXPORTER_OTLP_ENDPOINT=http://localhost:${port}
|
|
412
482
|
`);
|
|
483
|
+
if (isDemo) {
|
|
484
|
+
let scheduleNext2 = function() {
|
|
485
|
+
const delay = 3e3 + Math.random() * 5e3;
|
|
486
|
+
setTimeout(() => {
|
|
487
|
+
const span = generateSpan();
|
|
488
|
+
store.add(span);
|
|
489
|
+
broadcast({ type: "spans", data: [span] });
|
|
490
|
+
scheduleNext2();
|
|
491
|
+
}, delay);
|
|
492
|
+
};
|
|
493
|
+
var scheduleNext = scheduleNext2;
|
|
494
|
+
console.log(" Demo mode: generating synthetic data\n");
|
|
495
|
+
const initialSpans = generateInitialSpans(25);
|
|
496
|
+
for (const span of initialSpans) {
|
|
497
|
+
store.add(span);
|
|
498
|
+
}
|
|
499
|
+
scheduleNext2();
|
|
500
|
+
}
|
|
413
501
|
if (!values["no-open"]) {
|
|
414
502
|
open(`http://localhost:${port}`);
|
|
415
503
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tokviz",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Real-time, local-only web dashboard that visualizes LLM token usage and costs from standard OpenTelemetry data",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"bin": {
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
],
|
|
12
12
|
"scripts": {
|
|
13
13
|
"dev": "concurrently -n server,client \"tsx watch src/server/index.ts --no-open\" \"vite\"",
|
|
14
|
+
"demo": "concurrently -n server,client \"tsx watch src/server/index.ts --no-open --demo\" \"vite\"",
|
|
14
15
|
"dev:server": "tsx watch src/server/index.ts --no-open",
|
|
15
16
|
"dev:client": "vite",
|
|
16
17
|
"build": "npm run build:client && npm run build:server",
|
|
@@ -33,14 +34,14 @@
|
|
|
33
34
|
"license": "MIT",
|
|
34
35
|
"repository": {
|
|
35
36
|
"type": "git",
|
|
36
|
-
"url": "https://github.com/waldekmastykarz/tokviz.git"
|
|
37
|
+
"url": "git+https://github.com/waldekmastykarz/tokviz.git"
|
|
37
38
|
},
|
|
38
39
|
"engines": {
|
|
39
40
|
"node": ">=18"
|
|
40
41
|
},
|
|
41
42
|
"dependencies": {
|
|
42
43
|
"express": "^4.21.2",
|
|
43
|
-
"open": "^
|
|
44
|
+
"open": "^11.0.0",
|
|
44
45
|
"protobufjs": "^7.4.0",
|
|
45
46
|
"ws": "^8.18.0"
|
|
46
47
|
},
|
|
@@ -56,7 +57,7 @@
|
|
|
56
57
|
"recharts": "^2.15.0",
|
|
57
58
|
"tsup": "^8.4.0",
|
|
58
59
|
"tsx": "^4.19.0",
|
|
59
|
-
"typescript": "^
|
|
60
|
+
"typescript": "^6.0.3",
|
|
60
61
|
"vite": "^6.0.0"
|
|
61
62
|
}
|
|
62
63
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
:root{--bg: #ffffff;--bg-secondary: #f5f5f5;--text: #1a1a1a;--text-secondary: #666666;--border: #e0e0e0;--accent: #2563eb;--accent-hover: #1d4ed8;--card-bg: #ffffff;--card-shadow: 0 1px 3px rgba(0, 0, 0, .1);--chart-input: #3b82f6;--chart-output: #f59e0b;--chart-cost: #8b5cf6}@media(prefers-color-scheme:dark){:root{--bg: #0a0a0a;--bg-secondary: #1a1a1a;--text: #e5e5e5;--text-secondary: #999999;--border: #333333;--accent: #3b82f6;--accent-hover: #60a5fa;--card-bg: #1a1a1a;--card-shadow: 0 1px 3px rgba(0, 0, 0, .3);--chart-input: #60a5fa;--chart-output: #fbbf24;--chart-cost: #a78bfa}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}.app{max-width:1200px;margin:0 auto;padding:24px}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.header h1{font-size:24px;font-weight:600}.connection-status{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text-secondary)}.status-dot{width:8px;height:8px;border-radius:50%;background:#ef4444}.status-dot.connected{background:#22c55e}.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:24px}.tab{padding:8px 16px;border:none;background:none;color:var(--text-secondary);font-size:14px;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}.tab:hover{color:var(--text)}.tab.active{color:var(--accent);border-bottom-color:var(--accent)}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:24px}.card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:16px;box-shadow:var(--card-shadow)}.card-label{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:4px}.card-value{font-size:24px;font-weight:600}.chart-container{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:20px;margin-bottom:24px;box-shadow:var(--card-shadow)}.chart-title{font-size:14px;font-weight:500;margin-bottom:16px;color:var(--text-secondary)}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;padding:10px 12px;border-bottom:2px solid var(--border);font-weight:600;color:var(--text-secondary);font-size:12px;text-transform:uppercase;letter-spacing:.5px}td{padding:10px 12px;border-bottom:1px solid var(--border)}tr.clickable{cursor:pointer}tr.clickable:hover{background:var(--bg-secondary)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;text-align:center;color:var(--text-secondary)}.empty-state h2{font-size:20px;margin-bottom:12px;color:var(--text)}.empty-state p{max-width:500px;margin-bottom:8px}.empty-state code{background:var(--bg-secondary);padding:2px 6px;border-radius:4px;font-size:13px}.detail-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100}.detail-panel{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:600px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.detail-panel h3{margin-bottom:16px;font-size:16px}.detail-panel .close-btn{float:right;border:none;background:none;font-size:20px;cursor:pointer;color:var(--text-secondary);padding:4px 8px}.detail-panel .close-btn:hover{color:var(--text)}.attr-table{width:100%}.attr-table td{padding:6px 8px;vertical-align:top}.attr-table td:first-child{font-weight:500;white-space:nowrap;width:40%;color:var(--text-secondary)}.attr-table td:last-child{word-break:break-all}.mono{font-family:SF Mono,Fira Code,monospace;font-size:12px}
|