web-mojo 2.1.541 → 2.1.549

package/dist/charts.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./chunks/MetricsChart-BiuzBNK_.js"),e=require("./chunks/WebApp-CWbRPN8W.js");class MiniChart extends e.View{constructor(t={}){super({className:"mini-chart",...t}),this.chartType=t.chartType||"line",this.data=t.data||[],this.width=t.width||"100%",this.height=t.height||30,this.maintainAspectRatio=t.maintainAspectRatio||!1,this.color=t.color||"rgba(54, 162, 235, 1)",this.fillColor=t.fillColor||"rgba(54, 162, 235, 0.1)",this.strokeWidth=t.strokeWidth||2,this.barGap=t.barGap||2,this.fill=!1!==t.fill,this.smoothing=t.smoothing||.3,this.padding=t.padding||2,this.minValue=t.minValue,this.maxValue=t.maxValue,this.showDots=t.showDots||!1,this.dotRadius=t.dotRadius||2,this.animate=!1!==t.animate,this.animationDuration=t.animationDuration||300,this.showTooltip=!1!==t.showTooltip,this.tooltipFormatter=t.tooltipFormatter||null,this.tooltipTemplate=t.tooltipTemplate||null,this.valueFormat=t.valueFormat||null,this.labelFormat=t.labelFormat||null,this.showCrosshair=!1!==t.showCrosshair,this.crosshairColor=t.crosshairColor||"rgba(0, 0, 0, 0.2)",this.crosshairWidth=t.crosshairWidth||1,this.showXAxis=t.showXAxis||!1,this.xAxisColor=t.xAxisColor||this.color,this.xAxisWidth=t.xAxisWidth||1,this.xAxisDashed=!1!==t.xAxisDashed,this.tooltip=null,this.crosshair=null,this.hoveredIndex=-1,this.dataFormatter=e.dataFormatter,this.labels=t.labels||null}getTemplate(){const t="number"==typeof this.width?`${this.width}px`:this.width,e="number"==typeof this.height?`${this.height}px`:this.height,i=this.maintainAspectRatio?"xMidYMid meet":"none";return`\n      <div class="mini-chart-wrapper" style="position: relative; display: block; width: ${t}; height: ${e};">\n        <svg\n          class="mini-chart-svg"\n          width="100%"\n          height="100%"\n          viewBox="0 0 100 ${this.height}"\n          preserveAspectRatio="${i}"\n          style="display: block;">\n        </svg>\n        ${this.showTooltip?'<div class="mini-chart-tooltip" style="display: none;"></div>':""}\n      </div>\n    `}async onAfterRender(){this.svg=this.element.querySelector(".mini-chart-svg"),this.tooltip=this.element.querySelector(".mini-chart-tooltip"),this.updateDimensions(),this.data&&this.data.length>0&&this.renderChart(),this.showTooltip&&this.svg&&this.setupTooltip(),this.setupResizeObserver()}updateDimensions(){if(!this.svg)return;const t=this.svg.getBoundingClientRect();this.actualWidth=t.width||100,this.actualHeight=t.height||this.height,this.svg.setAttribute("viewBox",`0 0 ${this.actualWidth} ${this.actualHeight}`)}setupResizeObserver(){"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{this.updateDimensions(),this.data&&this.data.length>0&&this.renderChart()}),this.svg&&this.resizeObserver.observe(this.svg))}renderChart(){if(!this.svg||!this.data||0===this.data.length)return;this.svg.innerHTML="";const{min:t,max:e}=this.calculateBounds();if(this.showXAxis&&this.renderXAxis(t,e),"line"===this.chartType?this.renderLine(t,e):"bar"===this.chartType&&this.renderBar(t,e),this.showCrosshair){const t=this.getActualHeight();this.crosshair=this.createSVGElement("line",{x1:0,y1:0,x2:0,y2:t,stroke:this.crosshairColor,"stroke-width":this.crosshairWidth,"stroke-dasharray":"3,3",style:"display: none; pointer-events: none;"}),this.svg.appendChild(this.crosshair)}this.showTooltip&&this.tooltip&&this.setupTooltip(),this.animate&&this.applyAnimation()}renderXAxis(t,e){const i=this.getActualWidth(),s=this.getActualHeight();let a;if(t<=0&&e>=0){const i=e-t,h=(s-2*this.padding)/i;a=s-this.padding-(0-t)*h}else a=s-this.padding;const h=this.createSVGElement("line",{x1:this.padding,y1:a,x2:i-this.padding,y2:a,stroke:this.xAxisColor,"stroke-width":this.xAxisWidth,"stroke-dasharray":this.xAxisDashed?"2,2":"none","stroke-opacity":"0.5"});this.svg.appendChild(h)}calculateBounds(){const t=this.data.map(t=>"object"==typeof t?t.value:t);let e=void 0!==this.minValue?this.minValue:Math.min(...t),i=void 0!==this.maxValue?this.maxValue:Math.max(...t);return 0===i-e&&(e-=1,i+=1),{min:e,max:i}}getActualWidth(){return this.actualWidth||this.width||100}getActualHeight(){return this.actualHeight||this.height||30}renderLine(t,e){const i=this.data.map(t=>"object"==typeof t?t.value:t),s=this.calculatePoints(i,t,e);if(this.fill){const t=this.createAreaPath(s),e=this.createSVGElement("path",{d:t,fill:this.fillColor,stroke:"none"});this.svg.appendChild(e)}const a=this.smoothing>0?this.createSmoothPath(s):this.createLinePath(s),h=this.createSVGElement("path",{d:a,fill:"none",stroke:this.color,"stroke-width":this.strokeWidth,"stroke-linecap":"round","stroke-linejoin":"round"});this.svg.appendChild(h),this.showDots&&s.forEach(t=>{const e=this.createSVGElement("circle",{cx:t.x,cy:t.y,r:this.dotRadius,fill:this.color});this.svg.appendChild(e)})}renderBar(t,e){const i=this.data.map(t=>"object"==typeof t?t.value:t),s=this.calculatePoints(i,t,e),a=this.getActualWidth(),h=this.getActualHeight(),r=(a-2*this.padding-this.barGap*(i.length-1))/i.length;s.forEach((t,e)=>{const i=h-2*this.padding-t.y+this.padding,s=t.x-r/2,a=t.y,o=this.createSVGElement("rect",{x:s,y:a,width:r,height:i,fill:this.color,rx:1,"data-bar-index":e,class:"mini-chart-bar"});this.svg.appendChild(o)})}calculatePoints(t,e,i){const s=i-e,a=this.getActualWidth(),h=this.getActualHeight(),r=(a-2*this.padding)/(t.length-1||1),o=(h-2*this.padding)/s;return t.map((t,i)=>({x:this.padding+i*r,y:h-this.padding-(t-e)*o}))}createLinePath(t){if(0===t.length)return"";let e=`M ${t[0].x},${t[0].y}`;for(let i=1;i<t.length;i++)e+=` L ${t[i].x},${t[i].y}`;return e}createSmoothPath(t){if(t.length<2)return this.createLinePath(t);let e=`M ${t[0].x},${t[0].y}`;for(let i=0;i<t.length-1;i++){const s=t[i],a=t[i+1];e+=` C ${s.x+(a.x-s.x)*this.smoothing},${s.y} ${a.x-(a.x-s.x)*this.smoothing},${a.y} ${a.x},${a.y}`}return e}createAreaPath(t){if(0===t.length)return"";const e=this.smoothing>0?this.createSmoothPath(t):this.createLinePath(t),i=t[t.length-1],s=t[0],a=this.getActualHeight();return`${e} L ${i.x},${a-this.padding} L ${s.x},${a-this.padding} Z`}createSVGElement(t,e={}){const i=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>{i.setAttribute(t,e)}),i}applyAnimation(){this.svg.querySelectorAll("path").forEach(t=>{const e=t.getTotalLength();t.style.strokeDasharray=e,t.style.strokeDashoffset=e,t.style.animation=`mini-chart-draw ${this.animationDuration}ms ease-out forwards`}),this.svg.querySelectorAll("rect").forEach((t,e)=>{t.style.transformOrigin="bottom",t.style.animation=`mini-chart-bar-grow ${this.animationDuration}ms ease-out ${20*e}ms forwards`,t.style.transform="scaleY(0)"})}setupTooltip(){if(!this.svg||!this.tooltip)return;const t=this.data.map(t=>"object"==typeof t?t.value:t),e=this.calculatePoints(t,...Object.values(this.calculateBounds())),i=this.getActualWidth(),s=this.getActualHeight(),a=i/t.length;e.forEach((t,e)=>{const i=this.createSVGElement("rect",{x:e*a,y:0,width:a,height:s,fill:"transparent",style:"cursor: pointer;"});i.addEventListener("mouseenter",t=>{this.showTooltipAtIndex(e,t)}),i.addEventListener("mousemove",t=>{this.updateTooltipPosition(t)}),i.addEventListener("mouseleave",()=>{this.hideTooltip()}),this.svg.appendChild(i)})}showTooltipAtIndex(t,e){if(!this.tooltip)return;this.hoveredIndex=t;const i="object"==typeof this.data[t]?this.data[t].value:this.data[t],s="object"==typeof this.data[t]?this.data[t].label:null,a=this.labels?this.labels[t]:s;let h;if(this.tooltipTemplate&&"function"==typeof this.tooltipTemplate)h=this.tooltipTemplate({value:i,label:a,index:t,data:this.data[t]});else{let e=i;e=this.valueFormat&&this.dataFormatter?this.dataFormatter.pipe(i,this.valueFormat):this.tooltipFormatter&&"function"==typeof this.tooltipFormatter?this.tooltipFormatter(i,t):"number"==typeof i?i.toLocaleString():i;let s=a;a&&this.labelFormat&&this.dataFormatter&&(s=this.dataFormatter.pipe(a,this.labelFormat)),h=`<strong>${e}</strong>`,s&&(h=`<div class="mini-chart-tooltip-label">${s}</div>${h}`)}if(this.tooltip.innerHTML=h,this.tooltip.style.display="block",this.updateTooltipPosition(e),"bar"===this.chartType&&this.highlightBar(t),this.crosshair&&this.showCrosshair){const e=this.getActualWidth()/this.data.length,i=t*e+e/2;this.crosshair.setAttribute("x1",i),this.crosshair.setAttribute("x2",i),this.crosshair.style.display="block"}}updateTooltipPosition(t){if(!this.tooltip||"none"===this.tooltip.style.display)return;const e=this.svg.getBoundingClientRect(),i=t.clientX-e.left,s=t.clientY-e.top;this.tooltip.style.left=`${i}px`,this.tooltip.style.top=s-10+"px",this.tooltip.style.transform="translate(-50%, -100%)"}hideTooltip(){this.tooltip&&(this.tooltip.style.display="none",this.hoveredIndex=-1),"bar"===this.chartType&&this.unhighlightBars(),this.crosshair&&(this.crosshair.style.display="none")}highlightBar(t){if(!this.svg)return;this.unhighlightBars();const e=this.svg.querySelector(`rect.mini-chart-bar[data-bar-index="${t}"]`);e&&(e.style.opacity="0.7")}unhighlightBars(){this.svg&&this.svg.querySelectorAll("rect.mini-chart-bar").forEach(t=>{t.style.opacity="1"})}setData(t){this.data=t,this.svg&&this.renderChart()}setColor(t){this.color=t,this.svg&&this.renderChart()}setType(t){["line","bar"].includes(t)&&(this.chartType=t,this.svg&&this.renderChart())}resize(t,e){this.width=t,this.height=e,this.updateDimensions(),this.svg&&this.renderChart()}async onBeforeDestroy(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),await super.onBeforeDestroy()}}exports.BaseChart=t.BaseChart,exports.MetricsChart=t.MetricsChart,exports.PieChart=t.PieChart,exports.SeriesChart=t.SeriesChart,exports.BUILD_TIME=e.BUILD_TIME,exports.VERSION=e.VERSION,exports.VERSION_INFO=e.VERSION_INFO,exports.VERSION_MAJOR=e.VERSION_MAJOR,exports.VERSION_MINOR=e.VERSION_MINOR,exports.VERSION_REVISION=e.VERSION_REVISION,exports.WebApp=e.WebApp,exports.MetricsMiniChart=class extends MiniChart{constructor(t={}){super(t),this.endpoint=t.endpoint||"/api/metrics/fetch",this.account=t.account||"global",this.granularity=t.granularity||"hours",this.slugs=t.slugs||null,this.category=t.category||null,this.dateStart=t.dateStart||null,this.dateEnd=t.dateEnd||null,this.defaultDateRange=t.defaultDateRange||"24h",this.isLoading=!1,this.lastFetch=null,this.refreshInterval=t.refreshInterval,this.dateStart&&this.dateEnd||this.setQuickRange(this.defaultDateRange),this.slugs&&!Array.isArray(this.slugs)&&(this.slugs=[this.slugs])}async onAfterRender(){await super.onAfterRender(),!this.endpoint||this.data&&0!==this.data.length||await this.fetchData(),this.refreshInterval&&this.endpoint&&this.startAutoRefresh()}buildApiParams(){const t={granularity:this.granularity,account:this.account,with_labels:!0};return this.slugs&&this.slugs.length>0&&this.slugs.forEach(e=>{t["slugs[]"]||(t["slugs[]"]=[]),t["slugs[]"].push(e)}),this.category&&(t.category=this.category),this.dateStart&&(t.dr_start=Math.floor(this.dateStart.getTime()/1e3)),this.dateEnd&&(t.dr_end=Math.floor(this.dateEnd.getTime()/1e3)),t._=Date.now(),t}async fetchData(){if(this.endpoint){this.isLoading=!0;try{const t=this.getApp()?.rest;if(!t)throw new Error("No REST client available");const e=this.buildApiParams(),i=await t.GET(this.endpoint,e);if(!i.success)throw new Error(i.message||"Network error");if(!i.data?.status)throw new Error(i.data?.error||"Server error");const s=i.data.data;this.processMetricsData(s),this.lastFetch=/* @__PURE__ */new Date,await this.render(),this.emit("metrics:loaded",{chart:this,data:s,params:e})}catch(t){console.error("Failed to fetch metrics:",t),this.emit("metrics:error",{chart:this,error:t})}finally{this.isLoading=!1}}}processMetricsData(t){const{data:e,labels:i}=t;if(!e)return;const s=Object.keys(e);if(0===s.length)return;const a=e[s[0]].map(t=>null==t||""===t?0:"number"==typeof t?t:parseFloat(t)||0);this.labels=i||null,this.setData(a)}setQuickRange(t){const e=/* @__PURE__ */new Date;let i;switch(t){case"1h":i=new Date(e.getTime()-36e5);break;case"24h":default:i=new Date(e.getTime()-864e5);break;case"7d":i=new Date(e.getTime()-6048e5);break;case"30d":i=new Date(e.getTime()-2592e6)}this.dateStart=i,this.dateEnd=e}startAutoRefresh(){this.refreshTimer&&clearInterval(this.refreshTimer),this.refreshTimer=setInterval(()=>{this.fetchData()},this.refreshInterval)}stopAutoRefresh(){this.refreshTimer&&(clearInterval(this.refreshTimer),this.refreshTimer=null)}setGranularity(t){return this.granularity=t,this.fetchData()}setDateRange(t,e){return this.dateStart=new Date(t),this.dateEnd=new Date(e),this.fetchData()}setMetrics(t){return this.slugs=Array.isArray(t)?t:[t],this.fetchData()}refresh(){return this.fetchData()}async onBeforeDestroy(){this.stopAutoRefresh(),await super.onBeforeDestroy()}},exports.MiniChart=MiniChart;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./chunks/MetricsChart-BnAXZSYf.js"),e=require("./chunks/WebApp-Co0le5eH.js");class MiniChart extends e.View{constructor(t={}){super({className:"mini-chart",...t}),this.chartType=t.chartType||"line",this.data=t.data||[],this.width=t.width||"100%",this.height=t.height||30,this.maintainAspectRatio=t.maintainAspectRatio||!1,this.color=t.color||"rgba(54, 162, 235, 1)",this.fillColor=t.fillColor||"rgba(54, 162, 235, 0.1)",this.strokeWidth=t.strokeWidth||2,this.barGap=t.barGap||2,this.fill=!1!==t.fill,this.smoothing=t.smoothing||.3,this.padding=t.padding||2,this.minValue=t.minValue,this.maxValue=t.maxValue,this.showDots=t.showDots||!1,this.dotRadius=t.dotRadius||2,this.animate=!1!==t.animate,this.animationDuration=t.animationDuration||300,this.showTooltip=!1!==t.showTooltip,this.tooltipFormatter=t.tooltipFormatter||null,this.tooltipTemplate=t.tooltipTemplate||null,this.valueFormat=t.valueFormat||null,this.labelFormat=t.labelFormat||null,this.showCrosshair=!1!==t.showCrosshair,this.crosshairColor=t.crosshairColor||"rgba(0, 0, 0, 0.2)",this.crosshairWidth=t.crosshairWidth||1,this.showXAxis=t.showXAxis||!1,this.xAxisColor=t.xAxisColor||this.color,this.xAxisWidth=t.xAxisWidth||1,this.xAxisDashed=!1!==t.xAxisDashed,this.tooltip=null,this.crosshair=null,this.hoveredIndex=-1,this.dataFormatter=e.dataFormatter,this.labels=t.labels||null}getTemplate(){const t="number"==typeof this.width?`${this.width}px`:this.width,e="number"==typeof this.height?`${this.height}px`:this.height,i=this.maintainAspectRatio?"xMidYMid meet":"none";return`\n      <div class="mini-chart-wrapper" style="position: relative; display: block; width: ${t}; height: ${e};">\n        <svg\n          class="mini-chart-svg"\n          width="100%"\n          height="100%"\n          viewBox="0 0 100 ${this.height}"\n          preserveAspectRatio="${i}"\n          style="display: block;">\n        </svg>\n        ${this.showTooltip?'<div class="mini-chart-tooltip" style="display: none;"></div>':""}\n      </div>\n    `}async onAfterRender(){this.svg=this.element.querySelector(".mini-chart-svg"),this.tooltip=this.element.querySelector(".mini-chart-tooltip"),this.updateDimensions(),this.data&&this.data.length>0&&this.renderChart(),this.showTooltip&&this.svg&&this.setupTooltip(),this.setupResizeObserver()}updateDimensions(){if(!this.svg)return;const t=this.svg.getBoundingClientRect();this.actualWidth=t.width||100,this.actualHeight=t.height||this.height,this.svg.setAttribute("viewBox",`0 0 ${this.actualWidth} ${this.actualHeight}`)}setupResizeObserver(){"undefined"!=typeof ResizeObserver&&(this.resizeObserver=new ResizeObserver(()=>{this.updateDimensions(),this.data&&this.data.length>0&&this.renderChart()}),this.svg&&this.resizeObserver.observe(this.svg))}renderChart(){if(!this.svg||!this.data||0===this.data.length)return;this.svg.innerHTML="";const{min:t,max:e}=this.calculateBounds();if(this.showXAxis&&this.renderXAxis(t,e),"line"===this.chartType?this.renderLine(t,e):"bar"===this.chartType&&this.renderBar(t,e),this.showCrosshair){const t=this.getActualHeight();this.crosshair=this.createSVGElement("line",{x1:0,y1:0,x2:0,y2:t,stroke:this.crosshairColor,"stroke-width":this.crosshairWidth,"stroke-dasharray":"3,3",style:"display: none; pointer-events: none;"}),this.svg.appendChild(this.crosshair)}this.showTooltip&&this.tooltip&&this.setupTooltip(),this.animate&&this.applyAnimation()}renderXAxis(t,e){const i=this.getActualWidth(),s=this.getActualHeight();let a;if(t<=0&&e>=0){const i=e-t,h=(s-2*this.padding)/i;a=s-this.padding-(0-t)*h}else a=s-this.padding;const h=this.createSVGElement("line",{x1:this.padding,y1:a,x2:i-this.padding,y2:a,stroke:this.xAxisColor,"stroke-width":this.xAxisWidth,"stroke-dasharray":this.xAxisDashed?"2,2":"none","stroke-opacity":"0.5"});this.svg.appendChild(h)}calculateBounds(){const t=this.data.map(t=>"object"==typeof t?t.value:t);let e=void 0!==this.minValue?this.minValue:Math.min(...t),i=void 0!==this.maxValue?this.maxValue:Math.max(...t);return 0===i-e&&(e-=1,i+=1),{min:e,max:i}}getActualWidth(){return this.actualWidth||this.width||100}getActualHeight(){return this.actualHeight||this.height||30}renderLine(t,e){const i=this.data.map(t=>"object"==typeof t?t.value:t),s=this.calculatePoints(i,t,e);if(this.fill){const t=this.createAreaPath(s),e=this.createSVGElement("path",{d:t,fill:this.fillColor,stroke:"none"});this.svg.appendChild(e)}const a=this.smoothing>0?this.createSmoothPath(s):this.createLinePath(s),h=this.createSVGElement("path",{d:a,fill:"none",stroke:this.color,"stroke-width":this.strokeWidth,"stroke-linecap":"round","stroke-linejoin":"round"});this.svg.appendChild(h),this.showDots&&s.forEach(t=>{const e=this.createSVGElement("circle",{cx:t.x,cy:t.y,r:this.dotRadius,fill:this.color});this.svg.appendChild(e)})}renderBar(t,e){const i=this.data.map(t=>"object"==typeof t?t.value:t),s=this.calculatePoints(i,t,e),a=this.getActualWidth(),h=this.getActualHeight(),r=(a-2*this.padding-this.barGap*(i.length-1))/i.length;s.forEach((t,e)=>{const i=h-2*this.padding-t.y+this.padding,s=t.x-r/2,a=t.y,o=this.createSVGElement("rect",{x:s,y:a,width:r,height:i,fill:this.color,rx:1,"data-bar-index":e,class:"mini-chart-bar"});this.svg.appendChild(o)})}calculatePoints(t,e,i){const s=i-e,a=this.getActualWidth(),h=this.getActualHeight(),r=(a-2*this.padding)/(t.length-1||1),o=(h-2*this.padding)/s;return t.map((t,i)=>({x:this.padding+i*r,y:h-this.padding-(t-e)*o}))}createLinePath(t){if(0===t.length)return"";let e=`M ${t[0].x},${t[0].y}`;for(let i=1;i<t.length;i++)e+=` L ${t[i].x},${t[i].y}`;return e}createSmoothPath(t){if(t.length<2)return this.createLinePath(t);let e=`M ${t[0].x},${t[0].y}`;for(let i=0;i<t.length-1;i++){const s=t[i],a=t[i+1];e+=` C ${s.x+(a.x-s.x)*this.smoothing},${s.y} ${a.x-(a.x-s.x)*this.smoothing},${a.y} ${a.x},${a.y}`}return e}createAreaPath(t){if(0===t.length)return"";const e=this.smoothing>0?this.createSmoothPath(t):this.createLinePath(t),i=t[t.length-1],s=t[0],a=this.getActualHeight();return`${e} L ${i.x},${a-this.padding} L ${s.x},${a-this.padding} Z`}createSVGElement(t,e={}){const i=document.createElementNS("http://www.w3.org/2000/svg",t);return Object.entries(e).forEach(([t,e])=>{i.setAttribute(t,e)}),i}applyAnimation(){this.svg.querySelectorAll("path").forEach(t=>{const e=t.getTotalLength();t.style.strokeDasharray=e,t.style.strokeDashoffset=e,t.style.animation=`mini-chart-draw ${this.animationDuration}ms ease-out forwards`}),this.svg.querySelectorAll("rect").forEach((t,e)=>{t.style.transformOrigin="bottom",t.style.animation=`mini-chart-bar-grow ${this.animationDuration}ms ease-out ${20*e}ms forwards`,t.style.transform="scaleY(0)"})}setupTooltip(){if(!this.svg||!this.tooltip)return;const t=this.data.map(t=>"object"==typeof t?t.value:t),e=this.calculatePoints(t,...Object.values(this.calculateBounds())),i=this.getActualWidth(),s=this.getActualHeight(),a=i/t.length;e.forEach((t,e)=>{const i=this.createSVGElement("rect",{x:e*a,y:0,width:a,height:s,fill:"transparent",style:"cursor: pointer;"});i.addEventListener("mouseenter",t=>{this.showTooltipAtIndex(e,t)}),i.addEventListener("mousemove",t=>{this.updateTooltipPosition(t)}),i.addEventListener("mouseleave",()=>{this.hideTooltip()}),this.svg.appendChild(i)})}showTooltipAtIndex(t,e){if(!this.tooltip)return;this.hoveredIndex=t;const i="object"==typeof this.data[t]?this.data[t].value:this.data[t],s="object"==typeof this.data[t]?this.data[t].label:null,a=this.labels?this.labels[t]:s;let h;if(this.tooltipTemplate&&"function"==typeof this.tooltipTemplate)h=this.tooltipTemplate({value:i,label:a,index:t,data:this.data[t]});else{let e=i;e=this.valueFormat&&this.dataFormatter?this.dataFormatter.pipe(i,this.valueFormat):this.tooltipFormatter&&"function"==typeof this.tooltipFormatter?this.tooltipFormatter(i,t):"number"==typeof i?i.toLocaleString():i;let s=a;a&&this.labelFormat&&this.dataFormatter&&(s=this.dataFormatter.pipe(a,this.labelFormat)),h=`<strong>${e}</strong>`,s&&(h=`<div class="mini-chart-tooltip-label">${s}</div>${h}`)}if(this.tooltip.innerHTML=h,this.tooltip.style.display="block",this.updateTooltipPosition(e),"bar"===this.chartType&&this.highlightBar(t),this.crosshair&&this.showCrosshair){const e=this.getActualWidth()/this.data.length,i=t*e+e/2;this.crosshair.setAttribute("x1",i),this.crosshair.setAttribute("x2",i),this.crosshair.style.display="block"}}updateTooltipPosition(t){if(!this.tooltip||"none"===this.tooltip.style.display)return;const e=this.svg.getBoundingClientRect(),i=t.clientX-e.left,s=t.clientY-e.top;this.tooltip.style.left=`${i}px`,this.tooltip.style.top=s-10+"px",this.tooltip.style.transform="translate(-50%, -100%)"}hideTooltip(){this.tooltip&&(this.tooltip.style.display="none",this.hoveredIndex=-1),"bar"===this.chartType&&this.unhighlightBars(),this.crosshair&&(this.crosshair.style.display="none")}highlightBar(t){if(!this.svg)return;this.unhighlightBars();const e=this.svg.querySelector(`rect.mini-chart-bar[data-bar-index="${t}"]`);e&&(e.style.opacity="0.7")}unhighlightBars(){this.svg&&this.svg.querySelectorAll("rect.mini-chart-bar").forEach(t=>{t.style.opacity="1"})}setData(t){this.data=t,this.svg&&this.renderChart()}setColor(t){this.color=t,this.svg&&this.renderChart()}setType(t){["line","bar"].includes(t)&&(this.chartType=t,this.svg&&this.renderChart())}resize(t,e){this.width=t,this.height=e,this.updateDimensions(),this.svg&&this.renderChart()}async onBeforeDestroy(){this.resizeObserver&&(this.resizeObserver.disconnect(),this.resizeObserver=null),await super.onBeforeDestroy()}}exports.BaseChart=t.BaseChart,exports.MetricsChart=t.MetricsChart,exports.PieChart=t.PieChart,exports.SeriesChart=t.SeriesChart,exports.BUILD_TIME=e.BUILD_TIME,exports.VERSION=e.VERSION,exports.VERSION_INFO=e.VERSION_INFO,exports.VERSION_MAJOR=e.VERSION_MAJOR,exports.VERSION_MINOR=e.VERSION_MINOR,exports.VERSION_REVISION=e.VERSION_REVISION,exports.WebApp=e.WebApp,exports.MetricsMiniChart=class extends MiniChart{constructor(t={}){super(t),this.endpoint=t.endpoint||"/api/metrics/fetch",this.account=t.account||"global",this.granularity=t.granularity||"hours",this.slugs=t.slugs||null,this.category=t.category||null,this.dateStart=t.dateStart||null,this.dateEnd=t.dateEnd||null,this.defaultDateRange=t.defaultDateRange||"24h",this.isLoading=!1,this.lastFetch=null,this.refreshInterval=t.refreshInterval,this.dateStart&&this.dateEnd||this.setQuickRange(this.defaultDateRange),this.slugs&&!Array.isArray(this.slugs)&&(this.slugs=[this.slugs])}async onAfterRender(){await super.onAfterRender(),!this.endpoint||this.data&&0!==this.data.length||await this.fetchData(),this.refreshInterval&&this.endpoint&&this.startAutoRefresh()}buildApiParams(){const t={granularity:this.granularity,account:this.account,with_labels:!0};return this.slugs&&this.slugs.length>0&&this.slugs.forEach(e=>{t["slugs[]"]||(t["slugs[]"]=[]),t["slugs[]"].push(e)}),this.category&&(t.category=this.category),this.dateStart&&(t.dr_start=Math.floor(this.dateStart.getTime()/1e3)),this.dateEnd&&(t.dr_end=Math.floor(this.dateEnd.getTime()/1e3)),t._=Date.now(),t}async fetchData(){if(this.endpoint){this.isLoading=!0;try{const t=this.getApp()?.rest;if(!t)throw new Error("No REST client available");const e=this.buildApiParams(),i=await t.GET(this.endpoint,e);if(!i.success)throw new Error(i.message||"Network error");if(!i.data?.status)throw new Error(i.data?.error||"Server error");const s=i.data.data;this.processMetricsData(s),this.lastFetch=/* @__PURE__ */new Date,await this.render(),this.emit("metrics:loaded",{chart:this,data:s,params:e})}catch(t){console.error("Failed to fetch metrics:",t),this.emit("metrics:error",{chart:this,error:t})}finally{this.isLoading=!1}}}processMetricsData(t){const{data:e,labels:i}=t;if(!e)return;const s=Object.keys(e);if(0===s.length)return;const a=e[s[0]].map(t=>null==t||""===t?0:"number"==typeof t?t:parseFloat(t)||0);this.labels=i||null,this.setData(a)}setQuickRange(t){const e=/* @__PURE__ */new Date;let i;switch(t){case"1h":i=new Date(e.getTime()-36e5);break;case"24h":default:i=new Date(e.getTime()-864e5);break;case"7d":i=new Date(e.getTime()-6048e5);break;case"30d":i=new Date(e.getTime()-2592e6)}this.dateStart=i,this.dateEnd=e}startAutoRefresh(){this.refreshTimer&&clearInterval(this.refreshTimer),this.refreshTimer=setInterval(()=>{this.fetchData()},this.refreshInterval)}stopAutoRefresh(){this.refreshTimer&&(clearInterval(this.refreshTimer),this.refreshTimer=null)}setGranularity(t){return this.granularity=t,this.fetchData()}setDateRange(t,e){return this.dateStart=new Date(t),this.dateEnd=new Date(e),this.fetchData()}setMetrics(t){return this.slugs=Array.isArray(t)?t:[t],this.fetchData()}refresh(){return this.fetchData()}async onBeforeDestroy(){this.stopAutoRefresh(),await super.onBeforeDestroy()}},exports.MiniChart=MiniChart;
 //# sourceMappingURL=charts.cjs.js.map

package/dist/charts.es.js

@@ -1,6 +1,6 @@
-import { B, M, P, S } from "./chunks/MetricsChart-BtPdRK4u.js";
-import { V as View, d as dataFormatter } from "./chunks/WebApp-DVm8Swji.js";
-import { B as B2, b, a, c, e, f, W } from "./chunks/WebApp-DVm8Swji.js";
+import { B, M, P, S } from "./chunks/MetricsChart-DMAFQpiZ.js";
+import { V as View, d as dataFormatter } from "./chunks/WebApp-gPOds7Ie.js";
+import { B as B2, b, a, c, e, f, W } from "./chunks/WebApp-gPOds7Ie.js";
 class MiniChart extends View {
   constructor(options = {}) {
     super({

package/dist/chunks/{ChatView-D8QF3I2d.js → ChatView-DUmQtrvk.js}

@@ -1,8 +1,8 @@
-import { M as Model, C as Collection, T as ToastService, G as GroupList, d as UserList } from "./ContextMenu-BzvHUrN8.js";
-import { r as rest, V as View, d as dataFormatter, M as Mustache } from "./WebApp-DVm8Swji.js";
-import { P as Page } from "./Page-C5yf_RnZ.js";
-import Dialog from "./Dialog-CdjTdWFy.js";
-import { F as FormView, a as applyFileDropMixin } from "./FormView-CO2fMfms.js";
+import { M as Model, C as Collection, T as ToastService, G as GroupList, d as UserList } from "./ContextMenu-BXCBFtAP.js";
+import { r as rest, V as View, d as dataFormatter, M as Mustache } from "./WebApp-gPOds7Ie.js";
+import { P as Page } from "./Page-3EI2SKd6.js";
+import Dialog from "./Dialog-B4CbgRxK.js";
+import { F as FormView, a as applyFileDropMixin } from "./FormView-Nh9T4RYF.js";
 class S3Bucket extends Model {
   constructor(data = {}) {
     super(data, {
@@ -4237,29 +4237,30 @@ class TableView extends ListView {
       `;
     }
     this.columns.forEach((column) => {
+      const { fieldKey } = this.parseColumnKey(column.key);
       const sortable = this.sortable && column.sortable !== false;
-      const currentSort = this.getSortBy() === column.key ? this.getSortDirection() : null;
+      const currentSort = this.getSortBy() === fieldKey ? this.getSortDirection() : null;
       const sortIcon = this.getSortIcon(currentSort);
-      const label = column.label || column.title || column.key;
+      const label = column.label || column.title || fieldKey;
       const responsiveClasses = this.getResponsiveClasses(column.visibility);
       const sortDropdown = sortable ? `
         <div class="dropdown d-inline-block ms-2">
           <button class="btn btn-sm btn-link p-0 text-decoration-none" type="button"
                   data-bs-toggle="dropdown" aria-expanded="false"
-                  data-column="${column.key}">
+                  data-column="${fieldKey}">
             ${sortIcon}
           </button>
           <ul class="dropdown-menu dropdown-menu-end">
             <li><a class="dropdown-item ${currentSort === "asc" ? "active" : ""}"
-                   data-action="sort" data-field="${column.key}" data-direction="asc">
+                   data-action="sort" data-field="${fieldKey}" data-direction="asc">
                 <i class="bi bi-sort-alpha-down me-2"></i>Sort A-Z
                 </a></li>
             <li><a class="dropdown-item ${currentSort === "desc" ? "active" : ""}"
-                   data-action="sort" data-field="${column.key}" data-direction="desc">
+                   data-action="sort" data-field="${fieldKey}" data-direction="desc">
                 <i class="bi bi-sort-alpha-down-alt me-2"></i>Sort Z-A
                 </a></li>
             <li><a class="dropdown-item ${currentSort === null ? "active" : ""}"
-                   data-action="sort" data-field="${column.key}" data-direction="none">
+                   data-action="sort" data-field="${fieldKey}" data-direction="none">
                 <i class="bi bi-x-circle me-2"></i>No Sort
                 </a></li>
           </ul>
@@ -4980,16 +4981,17 @@ class TableView extends ListView {
     const currentSortDir = this.getSortDirection();
     this.columns.forEach((column) => {
       if (this.sortable && column.sortable !== false) {
-        const dropdown = this.element.querySelector(`[data-bs-toggle="dropdown"][data-column="${column.key}"]`);
+        const { fieldKey } = this.parseColumnKey(column.key);
+        const dropdown = this.element.querySelector(`[data-bs-toggle="dropdown"][data-column="${fieldKey}"]`);
         if (dropdown) {
-          const isSorted = currentSortField === column.key;
+          const isSorted = currentSortField === fieldKey;
           const sortIcon = this.getSortIcon(isSorted ? currentSortDir : null);
           dropdown.innerHTML = sortIcon;
           const dropdownMenu = dropdown.nextElementSibling;
           if (dropdownMenu) {
-            const ascItem = dropdownMenu.querySelector(`[data-field="${column.key}"][data-direction="asc"]`);
-            const descItem = dropdownMenu.querySelector(`[data-field="${column.key}"][data-direction="desc"]`);
-            const noneItem = dropdownMenu.querySelector(`[data-field="${column.key}"][data-direction="none"]`);
+            const ascItem = dropdownMenu.querySelector(`[data-field="${fieldKey}"][data-direction="asc"]`);
+            const descItem = dropdownMenu.querySelector(`[data-field="${fieldKey}"][data-direction="desc"]`);
+            const noneItem = dropdownMenu.querySelector(`[data-field="${fieldKey}"][data-direction="none"]`);
             if (ascItem) {
               ascItem.classList.toggle("active", isSorted && currentSortDir === "asc");
             }
@@ -4997,7 +4999,7 @@ class TableView extends ListView {
               descItem.classList.toggle("active", isSorted && currentSortDir === "desc");
             }
             if (noneItem) {
-              noneItem.classList.toggle("active", !isSorted || currentSortField !== column.key);
+              noneItem.classList.toggle("active", !isSorted || currentSortField !== fieldKey);
             }
           }
         }
@@ -7176,4 +7178,4 @@ export {
   FileList as y,
   FileForms as z
 };
-//# sourceMappingURL=ChatView-D8QF3I2d.js.map
+//# sourceMappingURL=ChatView-DUmQtrvk.js.map