| 12 |
- "use strict";(self.webpackChunkgrafana=self.webpackChunkgrafana||[]).push([[9101],{88643:(t,e,i)=>{i.d(e,{G:()=>o});var a=i(82897);function s(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class o{constructor(t,e){var i,o,r,n,h;s(this,"target",void 0),s(this,"datasource",void 0),s(this,"panelCtrl",void 0),s(this,"panel",void 0),s(this,"hasRawMode",void 0),s(this,"error",void 0),s(this,"isLastQuery",void 0),this.$scope=t,this.$injector=e,this.panelCtrl=null!==(i=this.panelCtrl)&&void 0!==i?i:t.ctrl.panelCtrl,this.target=null!==(o=this.target)&&void 0!==o?o:t.ctrl.target,this.datasource=null!==(r=this.datasource)&&void 0!==r?r:t.ctrl.datasource,this.panel=null!==(n=null===(h=this.panelCtrl)||void 0===h?void 0:h.panel)&&void 0!==n?n:t.ctrl.panelCtrl.panel,this.isLastQuery=(0,a.indexOf)(this.panel.targets,this.target)===this.panel.targets.length-1}refresh(){this.panelCtrl.refresh()}}},76509:(t,e,i)=>{i.r(e),i.d(e,{PanelCtrl:()=>et});var a=i(24314),s=i(98572),o=i.n(s),r=i(82897),n=i(43215),h=i(20469),l=i(78837),c=i(98163),d=i(63796),p=i(96586);function u(t,e,i){let s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;const o=p[t.value],r="always"===t.invert||t.invert===(e?"light":"dark"),n=r?i:s,h=r?s:i;return a.scaleSequential(o).domain([n,h])}function m(t,e){let i,s=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0;return"linear"===t.colorScale?i=a.scaleLinear().domain([s,e]).range([0,1]):"sqrt"===t.colorScale&&(i=a.scalePow().exponent(t.exponent).domain([s,e]).range([0,1])),i}function g(t,e,i,s,n,h,l){const c=o()(t).find("svg"),p=c.get(0);if(p){const t=a.select(p);if(h<=0||0===p.childNodes.length)return;const o=a.scaleLinear().domain([e,i]).range([0,h]),l=function(t,e,i,a){const s=e-t,o=(0,d.tickStep)(t,e,3),n=Math.ceil(s/o),h=function(t,e){if(t<0)return Math.floor(t/e)*e;return 0}(t,o);let l=[];for(let t=0;t<n;t++){const e=h+o*t;x(a,e,o)?l.push(a):(a<e&&l.push(a),x(i,e,o)?l.push(i):(i<e&&l.push(i),l.push(e)))}x(i,e,o)||l.push(i);return l.push(e),l=(0,r.sortBy)((0,r.uniq)(l)),l}(e,i,s,n),u=a.axisBottom(o).tickValues(l).tickSize(0),m=c.find(":first-child"),g=function(t){const e=t.get(0);return e&&e.height&&e.height.baseVal?e.height.baseVal.value:0}(c)+0,v=function(t){const e=t.get(0);return e&&e.x&&e.x.baseVal?e.x.baseVal.value:0}(m)+10;a.select(p).append("g").attr("class","axis").attr("transform","translate("+v+","+g+")").call(u),t.select(".axis").select(".domain").remove()}}function v(t){o()(t).find("svg").empty()}function x(t,e,i){return Math.abs(t-e)<.3*i}h.ZP.directive("colorLegend",(()=>({restrict:"E",template:'<div class="heatmap-color-legend"><svg width="16.5rem" height="24px"></svg></div>',link:(t,e,i)=>{const s=t.ctrl,h=t.ctrl.panel;function d(){var t;const i=o()(e).find("svg"),n=Math.floor(null!==(t=i.outerWidth())&&void 0!==t?t:10);if("spectrum"===h.color.mode){const t=u((0,r.find)(s.colorSchemes,{value:h.color.colorScheme}),c.Vt.user.lightTheme,n);!function(t,e){var i;const s=o()(t).find("svg");v(t);const r=Math.floor(null!==(i=s.outerWidth())&&void 0!==i?i:30),n=s.attr("height");if(r){const t=Math.floor(r/2),i=Math.floor(r/t),o=a.range(0,r,i),h=s.get(0);if(h){a.select(h).selectAll(".heatmap-color-legend-rect").data(o).enter().append("rect").attr("x",(t=>t)).attr("y",0).attr("width",i+1).attr("height",n).attr("stroke-width",0).attr("fill",(t=>e(t)))}}}(e,t)}else if("opacity"===h.color.mode){const t=h.color;!function(t,e){const i=o()(t).find("svg"),s=i.get(0);if(s){var r;v(t);const o=a.select(s),n=Math.floor(null!==(r=i.outerWidth())&&void 0!==r?r:30),h=i.attr("height");if(n){let t;"linear"===e.colorScale?t=a.scaleLinear().domain([0,n]).range([0,1]):"sqrt"===e.colorScale&&(t=a.scalePow().exponent(e.exponent).domain([0,n]).range([0,1]));const i=10,s=a.range(0,n,i);o.selectAll(".heatmap-opacity-legend-rect").data(s).enter().append("rect").attr("x",(t=>t)).attr("y",0).attr("width",i).attr("height",h).attr("stroke-width",0).attr("fill",l.vc.theme.visualization.getColorByName(e.cardColor)).style("opacity",(e=>t(e)))}}}(e,t)}}d(),s.events.on(n.PanelEvents.render,(()=>{d()}))}}))),h.ZP.directive("heatmapLegend",(()=>({restrict:"E",template:'<div class="heatmap-color-legend"><svg width="100px" height="6px"></svg></div>',link:(t,e,i)=>{const s=t.ctrl,h=t.ctrl.panel;function l(){if(v(e),!(0,r.isEmpty)(s.data)&&!(0,r.isEmpty)(s.data.cards)){const t=s.data.cardStats,i=(0,r.isNil)(h.color.min)?Math.max(t.min,0):h.color.min,n=(0,r.isNil)(h.color.max)?t.max:h.color.max,l=t.max,d=t.min;if("spectrum"===h.color.mode){const t=(0,r.find)(s.colorSchemes,{value:h.color.colorScheme});!function(t,e,i,s,r,n){const h=o()(t).find("svg"),l=h.get(0);if(l){var d;const o=a.select(l);v(t);const p=Math.floor(null!==(d=h.outerWidth())&&void 0!==d?d:10)-30,m=h.attr("height"),x=(s-i)/p*10,f=p/(s-i),y=a.range(i,s,x),b=u(e,c.Vt.user.lightTheme,s,i);o.append("g").attr("class","legend-color-bar").attr("transform","translate(10,0)").selectAll(".heatmap-color-legend-rect").data(y).enter().append("rect").attr("x",(t=>Math.round((t-i)*f))).attr("y",0).attr("width",Math.round(x*f+1)).attr("height",m).attr("stroke-width",0).attr("fill",(t=>b(t))),g(t,i,s,r,n,p,y)}}(e,t,i,n,l,d)}else if("opacity"===h.color.mode){const t=h.color;!function(t,e,i,s,r,n){const h=o()(t).find("svg"),l=h.get(0);if(l){var c;const o=a.select(l);v(t);const d=Math.floor(null!==(c=h.outerWidth())&&void 0!==c?c:30)-30,p=h.attr("height"),u=(s-i)/d*10,x=d/(s-i),f=a.range(i,s,u),y=m(e,s,i);o.append("g").attr("class","legend-color-bar").attr("transform","translate(10,0)").selectAll(".heatmap-opacity-legend-rect").data(f).enter().append("rect").attr("x",(t=>Math.round((t-i)*x))).attr("y",0).attr("width",Math.round(u*x)).attr("height",p).attr("stroke-width",0).attr("fill",e.cardColor).style("opacity",(t=>y(t))),g(t,i,s,r,n,d,f)}}(e,t,i,n,l,d)}}}l(),s.events.on(n.PanelEvents.render,(()=>{l()}))}})));var f=i(5831),y=i(39132),b=i(392),k=i(60974),S=i(21169),M=i(76261);function B(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class C{constructor(t,e){B(this,"panel",void 0),B(this,"panelCtrl",void 0),B(this,"logScales",void 0),B(this,"dataFormats",void 0),B(this,"yBucketBoundModes",void 0),B(this,"setUnitFormat",(t=>{this.panel.yAxis.format=t,this.panelCtrl.render()})),t.editor=this,this.panelCtrl=t.ctrl,this.panel=this.panelCtrl.panel,this.logScales={linear:1,"log (base 2)":2,"log (base 10)":10,"log (base 32)":32,"log (base 1024)":1024},this.dataFormats={"Time series":"timeseries","Time series buckets":"tsbuckets"},this.yBucketBoundModes={Auto:"auto",Upper:"upper",Lower:"lower",Middle:"middle"}}}function A(){return{restrict:"E",scope:!0,templateUrl:"public/app/plugins/panel/heatmap/partials/axes_editor.html",controller:C}}function w(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}C.$inject=["$scope","uiSegmentSrv"];class P{constructor(t){w(this,"panel",void 0),w(this,"panelCtrl",void 0),t.editor=this,this.panelCtrl=t.ctrl,this.panel=this.panelCtrl.panel}}function H(){return{restrict:"E",scope:!0,templateUrl:"public/app/plugins/panel/heatmap/partials/display_editor.html",controller:P}}P.$inject=["$scope"];function W(t,e){let i,a;try{i=F(t.label),a=F(e.label)}catch(t){return console.error(t.message||t),0}return i>a?1:i<a?-1:0}function F(t){if("+Inf"===t||"inf"===t)return 1/0;const e=Number(t);if(isNaN(e))throw new Error(`Error parsing histogram label: ${t} is not a number`);return e}function E(t){let e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=0,a=0;const s=[];(0,r.forEach)(t,(t=>{(0,r.forEach)(t.buckets,(o=>{const r={x:t.x,y:o.y,yBounds:o.bounds,values:o.values,count:o.count};e&&0===r.count||s.push(r),1===s.length&&(i=o.count,a=o.count),i=o.count<i?o.count:i,a=o.count>a?o.count:a}))}));const o={min:i,max:a};return{cards:s,cardStats:o}}function R(t,e,i,a){const s=e[0];if(null==s||isNaN(s))return;const o=(0,r.concat)(e,a);t[i]&&t[i].values?(t[i].values.push(s),t[i].points.push(o)):t[i]={x:i,values:[s],points:[o]}}function Y(t,e,i,a,s){let o=1;var r;(a.length>3&&(o=parseInt(a[2],10)),t[e])?(t[e].values.push(i),null===(r=t[e].points)||void 0===r||r.push(a),t[e].count+=o):t[e]={y:e,bounds:s,values:[i],points:[a],count:o}}function L(t,e,i){return 1===i?z(t,e):function(t,e,i){return N(t,e,i).bottom}(t,e,i)}function T(t,e){let i,a;return i=Math.floor(t/e)*e,a=(Math.floor(t/e)+1)*e,{bottom:i,top:a}}function z(t,e){return T(t,e).bottom}function O(t,e){const i=t.values,a=t.points,s={};return(0,r.forEach)(i,((t,i)=>{const o=T(t,e),r=o.bottom;Y(s,r,t,a[i],o)})),s}function N(t,e,i){let a,s;if(0===t)return{bottom:0,top:0};const o=V(t,i);let r,n;if(1!==e&&e){const t=1/e;let i=o-Math.floor(o);i=Math.floor(i/t)*t,r=Math.floor(o)+i,n=r+t}else r=Math.floor(o),n=r+1;return s=Math.pow(i,r),a=Math.pow(i,n),{bottom:s,top:a}}function $(t,e,i){const a=t.values,s=t.points,o={};return(0,r.forEach)(a,((t,a)=>{const r=N(t,e,i),n=r.bottom;Y(o,n,t,s[a],r)})),o}function V(t,e){return Math.log(t)/Math.log(e)}function D(t,e){let i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(1===i)return Math.abs(e-t);return V(Math.max(t,e)/Math.min(t,e),i)}var G=i(69783);function I(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}const j=160;class U{constructor(t,e){I(this,"tooltip",void 0),I(this,"scope",void 0),I(this,"dashboard",void 0),I(this,"panelCtrl",void 0),I(this,"panel",void 0),I(this,"heatmapPanel",void 0),I(this,"mouseOverBucket",void 0),I(this,"originalFillColor",void 0),this.scope=e,this.dashboard=e.ctrl.dashboard,this.panelCtrl=e.ctrl,this.panel=e.ctrl.panel,this.heatmapPanel=t,this.mouseOverBucket=!1,this.originalFillColor=null,t.on("mouseleave",this.onMouseLeave.bind(this))}onMouseLeave(){this.destroy()}onMouseMove(t){this.panel.tooltip.show&&this.move(t)}add(){this.tooltip=a.select("body").append("div").attr("class","heatmap-tooltip graph-tooltip grafana-tooltip")}destroy(){this.tooltip&&this.tooltip.remove(),this.tooltip=null}show(t,e){if(!this.panel.tooltip.show||!e)return;if(t.panelRelY)return;const{xBucketIndex:i,yBucketIndex:a}=this.getBucketIndexes(t,e);if(!e.buckets[i])return void this.destroy();let s,o,n;this.tooltip||this.add();const h=e.buckets[i],l=(0,r.find)(h.buckets,((t,e)=>t.bounds.bottom===a||e===a.toString())),c=this.dashboard.formatDate(h.x,"YYYY-MM-DD HH:mm:ss");let d,p;if((0,r.isNumber)(this.panel.tooltipDecimals))d=this.countValueFormatter(this.panel.tooltipDecimals,null),p=this.panelCtrl.tickValueFormatter(this.panelCtrl.decimals,null);else{const t=(this.panelCtrl.decimals||-1)+1;d=this.countValueFormatter(t,this.panelCtrl.scaledDecimals+2),p=this.panelCtrl.tickValueFormatter(t,this.panelCtrl.scaledDecimals+2)}let u=`<div class="graph-tooltip-time">${c}</div>\n <div class="heatmap-histogram"></div>`;if(l)if(l.bounds){if(e.tsBuckets){const t=t=>e.tsBucketsFormatted?e.tsBucketsFormatted[t]:e.tsBuckets[t];s=t(a),"middle"!==this.panel.yBucketBound&&(o=a<e.tsBuckets.length-1?t(a+1):"")}else{s=p(l.y?l.bounds.bottom:0),o=p(l.bounds.top)}n=d(l.count);u+=`<div>\n bucket: <b>${o&&s?`${s} - ${o}`:s||o}</b> <br>\n count: <b>${n}</b> <br>\n </div>`}else u+=`<div>count: <b>${l.count}</b><br></div>`;else{if(!this.panel.tooltip.showHistogram)return void this.destroy();s=a,o="",n=0}this.tooltip.html(u),this.panel.tooltip.showHistogram&&this.addHistogram(h),this.move(t)}getBucketIndexes(t,e){return{xBucketIndex:this.getXBucketIndex(t.x,e),yBucketIndex:this.getYBucketIndex(t.y,e)}}getXBucketIndex(t,e){const i=(0,r.find)(e.buckets,(i=>t>i.x&&t-i.x<=e.xBucketSize));return i?i.x:L(t,e.xBucketSize,1)}getYBucketIndex(t,e){if(e.tsBuckets)return Math.floor(t);return L(t,e.yBucketSize,this.panel.yAxis.logBase)}getSharedTooltipPos(t){return t.pageX=this.heatmapPanel.offset().left+this.scope.xScale(t.x),t.pageY=this.heatmapPanel.offset().top+this.scope.chartHeight*t.panelRelY,t}addHistogram(t){const e=this.scope.ctrl.data.buckets[t.x],i=this.scope.ctrl.data.yBucketSize;let s,o,n;this.scope.ctrl.data.tsBuckets?(s=0,o=this.scope.ctrl.data.tsBuckets.length-1,n=this.scope.ctrl.data.tsBuckets.length):(s=this.scope.ctrl.data.yAxis.min,o=this.scope.ctrl.data.yAxis.max,n=this.scope.ctrl.data.yAxis.ticks);let h=(0,r.map)(e.buckets,(t=>{const e=void 0!==t.count?t.count:t.values.length;return[t.bounds.bottom,e]}));h=(0,r.filter)(h,(t=>t[0]>=s&&t[0]<=o));const l=this.scope.yScale.copy().domain([s,o]).range([0,j]);let c;if(1===this.panel.yAxis.logBase)c=Math.floor(j/(o-s)*i*.9);else{const t=i||1;c=Math.floor(j/n/t*.9)}c=Math.max(c,1);const d=(0,r.reduce)((0,r.map)(h,(t=>t[1])),((t,e)=>t+e),0),p=a.scaleLinear().domain([0,d]).range([0,40]);this.tooltip.select(".heatmap-histogram").append("svg").attr("width",j).attr("height",40).selectAll(".bar").data(h).enter().append("rect").attr("x",(t=>l(t[0]))).attr("width",c).attr("y",(t=>40-p(t[1]))).attr("height",(t=>p(t[1])))}move(t){if(!this.tooltip)return;const e=o()(this.tooltip.node())[0],i=e.clientWidth,a=e.clientHeight;let s=t.pageX+30,r=t.pageY+5;return t.pageX+i+40>window.innerWidth&&(s=t.pageX-i-30),t.pageY-window.pageYOffset+a+20>window.innerHeight&&(r=t.pageY-a-5),this.tooltip.style("left",s+"px").style("top",r+"px")}countValueFormatter(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const i=(0,n.getValueFormat)("short");return a=>(0,n.formattedValueToString)(i(a,t,e))}}function X(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}class q{constructor(t,e,i,a){X(this,"width",200),X(this,"height",200),X(this,"yScale",void 0),X(this,"xScale",void 0),X(this,"chartWidth",0),X(this,"chartHeight",0),X(this,"chartTop",0),X(this,"chartBottom",0),X(this,"yAxisWidth",0),X(this,"xAxisHeight",0),X(this,"cardPadding",0),X(this,"cardRound",0),X(this,"cardWidth",0),X(this,"cardHeight",0),X(this,"colorScale",void 0),X(this,"opacityScale",void 0),X(this,"mouseUpHandler",void 0),X(this,"data",void 0),X(this,"panel",void 0),X(this,"$heatmap",void 0),X(this,"tooltip",void 0),X(this,"heatmap",void 0),X(this,"timeRange",void 0),X(this,"selection",void 0),X(this,"padding",void 0),X(this,"margin",void 0),X(this,"dataRangeWidingFactor",void 0),X(this,"hoverEvent",void 0),this.scope=t,this.elem=e,this.ctrl=a,this.$heatmap=this.elem.find(".heatmap-panel"),this.tooltip=new U(this.$heatmap,this.scope),this.selection={active:!1,x1:-1,x2:-1},this.padding={left:0,right:0,top:0,bottom:0},this.margin={left:25,right:15,top:10,bottom:20},this.dataRangeWidingFactor=1.2,this.ctrl.events.on(n.PanelEvents.render,this.onRender.bind(this)),this.ctrl.tickValueFormatter=this.tickValueFormatter.bind(this),this.ctrl.dashboard.events.on(n.LegacyGraphHoverEvent.type,this.onGraphHover.bind(this),this.scope),this.ctrl.dashboard.events.on(n.LegacyGraphHoverClearEvent.type,this.onGraphHoverClear.bind(this),this.scope),this.$heatmap.on("mousedown",this.onMouseDown.bind(this)),this.$heatmap.on("mousemove",this.onMouseMove.bind(this)),this.$heatmap.on("mouseleave",this.onMouseLeave.bind(this)),this.hoverEvent=new n.LegacyGraphHoverEvent({pos:{},point:{},panel:this.panel})}onGraphHoverClear(){this.clearCrosshair()}onGraphHover(t){this.drawSharedCrosshair(t.pos)}onRender(){this.render(),this.ctrl.renderingCompleted()}setElementHeight(){try{let t=this.ctrl.height||this.panel.height||this.ctrl.row.height;return(0,r.isString)(t)&&(t=parseInt(t.replace("px",""),10)),t-=this.panel.legend.show?28:11,this.$heatmap.css("height",t+"px"),!0}catch(t){return!1}}getYAxisWidth(t){const e=this.getPanelYAxisWidth();if(null!==e)return e+5;const i=t.selectAll(".axis-y text").nodes();return(0,r.max)((0,r.map)(i,(t=>t.getBBox().width)))}getXAxisHeight(t){if(t.select(".axis-x line").empty())return 30;{const e=parseFloat(t.select(".axis-x line").attr("y2"));return parseFloat(t.attr("height"))-e}}addXAxis(){this.scope.xScale=this.xScale=a.scaleTime().domain([this.timeRange.from,this.timeRange.to]).range([0,this.chartWidth]);const t=this.chartWidth/100,e=(0,G.graphTimeFormat)(t,this.timeRange.from.valueOf(),this.timeRange.to.valueOf()),i=this.ctrl.dashboard.getTimezone(),s=a.axisBottom(this.xScale).ticks(t).tickFormat((t=>(0,n.dateTimeFormat)(t.valueOf(),{format:e,timeZone:i}))).tickPadding(10).tickSize(this.chartHeight),o=this.margin.top,r=this.yAxisWidth;this.heatmap.append("g").attr("class","axis axis-x").attr("transform","translate("+r+","+o+")").call(s),this.heatmap.select(".axis-x").select(".domain").remove()}addYAxis(){let t=Math.ceil(this.chartHeight/22.5),e=d.tickStep(this.data.heatmapStats.min,this.data.heatmapStats.max,t),{yMin:i,yMax:s}=this.wideYAxisRange(this.data.heatmapStats.min,this.data.heatmapStats.max,e);i=null!==this.panel.yAxis.min?this.panel.yAxis.min:i,s=null!==this.panel.yAxis.max?this.panel.yAxis.max:s,e=d.tickStep(i,s,t),t=Math.ceil((s-i)/e);const o=d.getPrecision(e);let n=null===this.panel.yAxis.decimals?o:this.panel.yAxis.decimals;const h=d.getFlotTickSize(i,s,t,o),l=d.getScaledDecimals(n,h);this.ctrl.decimals=n,this.ctrl.scaledDecimals=l,(0,r.isEmpty)(this.data.buckets)&&(s=1,i=-1,t=3,n=1),this.data.yAxis={min:i,max:s,ticks:t},this.scope.yScale=this.yScale=a.scaleLinear().domain([i,s]).range([this.chartHeight,0]);const c=a.axisLeft(this.yScale).ticks(t).tickFormat(this.tickValueFormatter(n,l)).tickSizeInner(0-this.width).tickSizeOuter(0).tickPadding(5);this.heatmap.append("g").attr("class","axis axis-y").call(c);const p=this.margin.top,u=this.getYAxisWidth(this.heatmap)+5;this.heatmap.select(".axis-y").attr("transform","translate("+u+","+p+")"),this.heatmap.select(".axis-y").select(".domain").remove()}wideYAxisRange(t,e,i){const a=(e*(this.dataRangeWidingFactor-1)-t*(this.dataRangeWidingFactor-1))/2;let s,o;return 0===i?(o=e*this.dataRangeWidingFactor,s=t-t*(this.dataRangeWidingFactor-1)):(o=Math.ceil((e+a)/i)*i,s=Math.floor((t-a)/i)*i),t>=0&&s<0&&(s=0),{yMin:s,yMax:o}}addLogYAxis(){const t=this.panel.yAxis.logBase;let{yMin:e,yMax:i}=this.adjustLogRange(this.data.heatmapStats.minLog,this.data.heatmapStats.max,t);e=this.panel.yAxis.min&&"0"!==this.panel.yAxis.min?this.adjustLogMin(this.panel.yAxis.min,t):e,i=null!==this.panel.yAxis.max?this.adjustLogMax(this.panel.yAxis.max,t):i,(0,r.isEmpty)(this.data.buckets)&&(i=Math.pow(t,2),e=1),this.scope.yScale=this.yScale=a.scaleLog().base(this.panel.yAxis.logBase).domain([e,i]).range([this.chartHeight,0]);const s=this.yScale.domain(),o=this.logScaleTickValues(s,t),n=d.getPrecision(e),h=this.panel.yAxis.decimals||n,l=d.getFlotTickSize(e,i,o.length,n),c=d.getScaledDecimals(h,l);this.ctrl.decimals=h,this.ctrl.scaledDecimals=c,this.data.yAxis={min:e,max:i,ticks:o.length};const p=a.axisLeft(this.yScale).tickValues(o).tickFormat(this.tickValueFormatter(h,c)).tickSizeInner(0-this.width).tickSizeOuter(0).tickPadding(5);this.heatmap.append("g").attr("class","axis axis-y").call(p);const u=this.margin.top,m=this.getYAxisWidth(this.heatmap)+5;this.heatmap.select(".axis-y").attr("transform","translate("+m+","+u+")"),e<1&&this.heatmap.select(".axis-y").select(".tick text").text("0"),this.heatmap.select(".axis-y").select(".domain").remove()}addYAxisFromBuckets(){const t=this.data.tsBuckets;let e=Math.ceil(this.chartHeight/22.5);this.scope.yScale=this.yScale=a.scaleLinear().domain([0,t.length-1]).range([this.chartHeight,0]);const i=(0,r.map)(t,((t,e)=>e)),s=(0,r.max)((0,r.map)(t,d.getStringPrecision)),o=null===this.panel.yAxis.decimals?s:this.panel.yAxis.decimals;this.ctrl.decimals=o;const n=this.tickValueFormatter.bind(this);function h(e){return function(i){let a=t[i.valueOf()];if((0,r.isNaN)((0,r.toNumber)(a))||""===a){if(a&&"string"==typeof a&&""!==a&&e){const t=.15,i=a.substring(0,Math.floor(e*t));a=`${i}${i.length<a.length?"...":""}`}}else a=n(o)((0,r.toNumber)(a));return a}}const l=(0,r.map)(t,((t,e)=>h(null)(e)));this.data.tsBucketsFormatted=l;const c=a.axisLeft(this.yScale).tickFormat(h(this.getPanelYAxisWidth())).tickSizeInner(0-this.width).tickSizeOuter(0).tickPadding(5);i&&i.length<=e?c.tickValues(i):c.ticks(e),this.heatmap.append("g").attr("class","axis axis-y").call(c);const p=this.margin.top,u=this.getYAxisWidth(this.heatmap)+5;if(this.heatmap.select(".axis-y").attr("transform","translate("+u+","+p+")"),"middle"===this.panel.yBucketBound&&i&&i.length){const t=0-this.chartHeight/(i.length-1)/2;this.heatmap.selectAll(".axis-y text").attr("transform","translate(0,"+t+")")}this.heatmap.select(".axis-y").select(".domain").remove()}adjustLogRange(t,e,i){let a=this.data.heatmapStats.minLog;a=this.data.heatmapStats.minLog>1||!this.data.heatmapStats.minLog?1:this.adjustLogMin(this.data.heatmapStats.minLog,i);return{yMin:a,yMax:this.adjustLogMax(this.data.heatmapStats.max,i)}}adjustLogMax(t,e){return Math.pow(e,Math.ceil(d.logp(t,e)))}adjustLogMin(t,e){return Math.pow(e,Math.floor(d.logp(t,e)))}logScaleTickValues(t,e){const i=t[0],a=t[1],s=[];if(i<1){for(let t=Math.floor(d.logp(i,e));t<0;t++){const i=Math.pow(e,t);s.push(i)}}const o=Math.ceil(d.logp(a,e));for(let t=0;t<=o;t++){const i=Math.pow(e,t);s.push(i)}return s}tickValueFormatter(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null;const i=this.panel.yAxis.format;return a=>{try{if("none"!==i){const s=(0,n.getValueFormat)(i)(a,t,e);return(0,n.formattedValueToString)(s)}}catch(t){console.error(t.message||t)}return a}}fixYAxisTickSize(){this.heatmap.select(".axis-y").selectAll(".tick line").attr("x2",this.chartWidth)}addAxes(){this.chartHeight=this.height-this.margin.top-this.margin.bottom,this.chartTop=this.margin.top,this.chartBottom=this.chartTop+this.chartHeight,"tsbuckets"===this.panel.dataFormat?this.addYAxisFromBuckets():1===this.panel.yAxis.logBase?this.addYAxis():this.addLogYAxis(),this.yAxisWidth=this.getYAxisWidth(this.heatmap)+5,this.chartWidth=this.width-this.yAxisWidth-this.margin.right,this.fixYAxisTickSize(),this.addXAxis(),this.xAxisHeight=this.getXAxisHeight(this.heatmap),this.panel.yAxis.show||this.heatmap.select(".axis-y").selectAll("line").style("opacity",0),this.panel.xAxis.show||this.heatmap.select(".axis-x").selectAll("line").style("opacity",0)}addHeatmapCanvas(){const t=this.$heatmap[0];this.width=Math.floor(this.$heatmap.width())-this.padding.right,this.height=Math.floor(this.$heatmap.height())-this.padding.bottom,this.cardPadding=null!==this.panel.cards.cardPadding?this.panel.cards.cardPadding:1,this.cardRound=null!==this.panel.cards.cardRound?this.panel.cards.cardRound:0,this.heatmap&&this.heatmap.remove(),this.heatmap=a.select(t).append("svg").attr("width",this.width).attr("height",this.height)}addHeatmap(){if(this.addHeatmapCanvas(),this.addAxes(),1!==this.panel.yAxis.logBase&&"tsbuckets"!==this.panel.dataFormat){const t=this.panel.yAxis.logBase,e=this.yScale.domain(),i=this.logScaleTickValues(e,t);this.data.buckets=function(t,e){return(0,r.forEach)(t,(t=>{const i=t.buckets,a={bounds:{bottom:0,top:0},values:[],points:[],count:0},s=i[0]||a,o=i[e]||a,r={y:0,bounds:{bottom:e,top:o.bounds.top||e},values:[],points:[],count:0};r.points=s.points.concat(o.points),r.values=s.values.concat(o.values),r.count=r.values.length,0!==r.count&&(delete i[e],i[0]=r)})),t}(this.data.buckets,(0,r.min)(i))}const t=this.data.cards,e=this.data.cardStats,i=e.max,a=Math.max(e.min,0),s=(0,r.isNil)(this.panel.color.max)?i:this.panel.color.max,o=(0,r.isNil)(this.panel.color.min)?a:this.panel.color.min,n=(0,r.find)(this.ctrl.colorSchemes,{value:this.panel.color.colorScheme});this.colorScale=u(n,c.Vt.user.lightTheme,s,o),this.opacityScale=m(this.panel.color,s,o),this.setCardSize();let h=this.heatmap.selectAll(".heatmap-card").data(t);h.append("title"),h=h.enter().append("rect").attr("x",this.getCardX.bind(this)).attr("width",this.getCardWidth.bind(this)).attr("y",this.getCardY.bind(this)).attr("height",this.getCardHeight.bind(this)).attr("rx",this.cardRound).attr("ry",this.cardRound).attr("class","bordered heatmap-card").style("fill",this.getCardColor.bind(this)).style("stroke",this.getCardColor.bind(this)).style("stroke-width",0).style("opacity",this.getCardOpacity.bind(this));this.$heatmap.find(".heatmap-card").on("mouseenter",(t=>{this.tooltip.mouseOverBucket=!0,this.highlightCard(t)})).on("mouseleave",(t=>{this.tooltip.mouseOverBucket=!1,this.resetCardHighLight(t)}))}highlightCard(t){const e=a.select(t.target).style("fill"),i=a.color(e).darker(2),s=a.color(e).brighter(4),o=a.select(t.target);this.tooltip.originalFillColor=e,o.style("fill",i.toString()).style("stroke",s.toString()).style("stroke-width",1)}resetCardHighLight(t){a.select(t.target).style("fill",this.tooltip.originalFillColor).style("stroke",this.tooltip.originalFillColor).style("stroke-width",0)}setCardSize(){const t=Math.floor(this.xScale(this.data.xBucketSize)-this.xScale(0));let e=Math.floor(this.yScale(this.yScale.invert(0)-this.data.yBucketSize));if(1!==this.panel.yAxis.logBase){const t=this.panel.yAxis.logBase,i=this.data.yBucketSize||1;e=Math.floor((this.yScale(1)-this.yScale(t))/i)}const i=t-2*this.cardPadding;this.cardWidth=Math.max(i,1),this.cardHeight=e?e-2*this.cardPadding:0}getCardX(t){let e;return e=this.xScale(t.x)<0?this.yAxisWidth+this.cardPadding:this.xScale(t.x)+this.yAxisWidth+this.cardPadding,e}getCardWidth(t){let e=this.cardWidth;return this.xScale(t.x)<0?e=this.xScale(t.x)+this.cardWidth:this.xScale(t.x)+this.cardWidth>this.chartWidth&&(e=this.chartWidth-this.xScale(t.x)-this.cardPadding),e=e>0?Math.max(e,1):0,e}getCardY(t){let e=this.yScale(t.y)+this.chartTop-this.cardHeight-this.cardPadding;return 1!==this.panel.yAxis.logBase&&0===t.y?e=this.chartBottom-this.cardHeight-this.cardPadding:e<this.chartTop&&(e=this.chartTop),e}getCardHeight(t){const e=this.yScale(t.y)+this.chartTop-this.cardHeight-this.cardPadding;let i=this.cardHeight;return 1!==this.panel.yAxis.logBase&&0===t.y?this.cardHeight:(e<this.chartTop?i=this.yScale(t.y)-this.cardPadding:(this.yScale(t.y)>this.chartBottom||e+this.cardHeight>this.chartBottom)&&(i=this.chartBottom-e),i=Math.min(i,this.chartHeight),i=Math.max(i,1),i)}getCardColor(t){return"opacity"===this.panel.color.mode?l.vc.theme.visualization.getColorByName(this.panel.color.cardColor):this.colorScale(t.count)}getCardOpacity(t){return"opacity"===this.panel.color.mode?this.opacityScale(t.count):1}getEventOffset(t){const e=this.$heatmap.offset();return{x:Math.floor(t.clientX-e.left),y:Math.floor(t.clientY-e.top)}}onMouseDown(t){const e=this.getEventOffset(t);this.selection.active=!0,this.selection.x1=e.x,this.mouseUpHandler=()=>{this.onMouseUp()},o()(document).one("mouseup",this.mouseUpHandler.bind(this))}onMouseUp(){o()(document).unbind("mouseup",this.mouseUpHandler.bind(this)),this.mouseUpHandler=null,this.selection.active=!1;const t=Math.abs(this.selection.x2-this.selection.x1);if(this.selection.x2>=0&&t>2){const t=this.xScale.invert(Math.min(this.selection.x1,this.selection.x2)-this.yAxisWidth),e=this.xScale.invert(Math.max(this.selection.x1,this.selection.x2)-this.yAxisWidth);this.ctrl.timeSrv.setTime({from:(0,n.toUtc)(t),to:(0,n.toUtc)(e)})}this.clearSelection()}onMouseLeave(){this.ctrl.dashboard.events.publish(new n.LegacyGraphHoverClearEvent),this.clearCrosshair()}onMouseMove(t){if(!this.heatmap)return;const e=this.getEventOffset(t);if(this.selection.active)this.clearCrosshair(),this.tooltip.destroy(),this.selection.x2=this.limitSelection(e.x),this.drawSelection(this.selection.x1,this.selection.x2);else{const i=this.getEventPos(t,e);this.drawCrosshair(e.x),this.tooltip.show(i,this.data),this.emitGraphHoverEvent(i)}}getEventPos(t,e){const i=this.xScale.invert(e.x-this.yAxisWidth).valueOf(),a=this.yScale.invert(e.y-this.chartTop);return{pageX:t.pageX,pageY:t.pageY,x:i,x1:i,y:a,y1:a,panelRelY:null,offset:e}}emitGraphHoverEvent(t){t.panelRelY=Math.max(t.offset.y/this.height,.001),this.hoverEvent.payload.pos=t,this.hoverEvent.payload.panel=this.panel,this.hoverEvent.payload.point.time=t.x,this.ctrl.dashboard.events.publish(this.hoverEvent)}limitSelection(t){return t=Math.max(t,this.yAxisWidth),t=Math.min(t,this.chartWidth+this.yAxisWidth)}drawSelection(t,e){if(this.heatmap){this.heatmap.selectAll(".heatmap-selection").remove();const i=Math.min(t,e),a=Math.abs(t-e);a>2&&this.heatmap.append("rect").attr("class","heatmap-selection").attr("x",i).attr("width",a).attr("y",this.chartTop).attr("height",this.chartHeight)}}clearSelection(){this.selection.x1=-1,this.selection.x2=-1,this.heatmap&&this.heatmap.selectAll(".heatmap-selection").remove()}drawCrosshair(t){if(this.heatmap){this.heatmap.selectAll(".heatmap-crosshair").remove();let e=t;e=Math.max(e,this.yAxisWidth),e=Math.min(e,this.chartWidth+this.yAxisWidth),this.heatmap.append("g").attr("class","heatmap-crosshair").attr("transform","translate("+e+",0)").append("line").attr("x1",1).attr("y1",this.chartTop).attr("x2",1).attr("y2",this.chartBottom).attr("stroke-width",1)}}drawSharedCrosshair(t){if(this.heatmap&&0!==this.ctrl.dashboard.graphTooltip){const e=this.xScale(t.x)+this.yAxisWidth;this.drawCrosshair(e)}}clearCrosshair(){this.heatmap&&this.heatmap.selectAll(".heatmap-crosshair").remove()}render(){if(this.data=this.ctrl.data,this.panel=this.ctrl.panel,this.timeRange=this.ctrl.range,this.setElementHeight()&&this.data){if((0,r.isEmpty)(this.data.buckets))return this.addHeatmapCanvas(),void this.addAxes();this.addHeatmap(),this.scope.yAxisWidth=this.yAxisWidth,this.scope.xAxisHeight=this.xAxisHeight,this.scope.chartHeight=this.chartHeight,this.scope.chartWidth=this.chartWidth,this.scope.chartTop=this.chartTop}}getPanelYAxisWidth(){return this.panel.yAxis.width?(0,r.isNaN)(this.panel.yAxis.width)?null:parseInt(this.panel.yAxis.width,10):null}}function Z(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}const Q={heatmap:{},cards:{cardPadding:null,cardRound:null},color:{mode:"spectrum",cardColor:"#b4ff00",colorScale:"sqrt",exponent:.5,colorScheme:"interpolateOranges"},legend:{show:!1},dataFormat:"timeseries",yBucketBound:"auto",reverseYBuckets:!1,xAxis:{show:!0},yAxis:{show:!0,format:"short",decimals:null,logBase:1,splitFactor:null,min:null,max:null},xBucketSize:null,xBucketNumber:null,yBucketSize:null,yBucketNumber:null,tooltip:{show:!0,showHistogram:!1},highlightCards:!0,hideZeroBuckets:!1},_=["opacity","spectrum"],J=["linear","sqrt"],K=[{name:"Spectral",value:"interpolateSpectral",invert:"always"},{name:"RdYlGn",value:"interpolateRdYlGn",invert:"always"},{name:"Blues",value:"interpolateBlues",invert:"dark"},{name:"Greens",value:"interpolateGreens",invert:"dark"},{name:"Greys",value:"interpolateGreys",invert:"dark"},{name:"Oranges",value:"interpolateOranges",invert:"dark"},{name:"Purples",value:"interpolatePurples",invert:"dark"},{name:"Reds",value:"interpolateReds",invert:"dark"},{name:"Turbo",value:"interpolateTurbo",invert:"light"},{name:"Cividis",value:"interpolateCividis",invert:"light"},{name:"Viridis",value:"interpolateViridis",invert:"light"},{name:"Magma",value:"interpolateMagma",invert:"light"},{name:"Inferno",value:"interpolateInferno",invert:"light"},{name:"Plasma",value:"interpolatePlasma",invert:"light"},{name:"Warm",value:"interpolateWarm",invert:"light"},{name:"Cool",value:"interpolateCool",invert:"light"},{name:"Cubehelix",value:"interpolateCubehelixDefault",invert:"light"},{name:"BuGn",value:"interpolateBuGn",invert:"dark"},{name:"BuPu",value:"interpolateBuPu",invert:"dark"},{name:"GnBu",value:"interpolateGnBu",invert:"dark"},{name:"OrRd",value:"interpolateOrRd",invert:"dark"},{name:"PuBuGn",value:"interpolatePuBuGn",invert:"dark"},{name:"PuBu",value:"interpolatePuBu",invert:"dark"},{name:"PuRd",value:"interpolatePuRd",invert:"dark"},{name:"RdPu",value:"interpolateRdPu",invert:"dark"},{name:"YlGnBu",value:"interpolateYlGnBu",invert:"dark"},{name:"YlGn",value:"interpolateYlGn",invert:"dark"},{name:"YlOrBr",value:"interpolateYlOrBr",invert:"dark"},{name:"YlOrRd",value:"interpolateYlOrRd",invert:"dark"}],tt=["elasticsearch"];class et extends k.MetricsPanelCtrl{constructor(t,e,i,a){super(t,e),Z(this,"opacityScales",[]),Z(this,"colorModes",[]),Z(this,"colorSchemes",[]),Z(this,"selectionActivated",void 0),Z(this,"unitFormats",void 0),Z(this,"data",void 0),Z(this,"series",[]),Z(this,"dataWarning",void 0),Z(this,"decimals",0),Z(this,"scaledDecimals",0),Z(this,"processor",void 0),this.selectionActivated=!1,(0,r.defaultsDeep)(this.panel,Q),this.opacityScales=J,this.colorModes=_,this.colorSchemes=K,this.useDataFrames=!0,this.processor=new M.$({xaxis:{mode:"custom"},aliasColors:{}}),this.events.on(n.PanelEvents.render,this.onRender.bind(this)),this.events.on(n.PanelEvents.dataFramesReceived,this.onDataFramesReceived.bind(this)),this.events.on(n.PanelEvents.dataSnapshotLoad,this.onSnapshotLoad.bind(this)),this.events.on(n.PanelEvents.editModeInitialized,this.onInitEditMode.bind(this)),this.onCardColorChange=this.onCardColorChange.bind(this)}onInitEditMode(){this.addEditorTab("Axes",A,2),this.addEditorTab("Display",H,3),this.unitFormats=y.Z.getUnitFormats()}zoomOut(t){f.Z.publish(new S.p8({scale:2}))}onRender(){"tsbuckets"===this.panel.dataFormat?this.convertHistogramToHeatmapData():this.convertTimeSeriesToHeatmapData()}convertTimeSeriesToHeatmapData(){if(!this.range||!this.series)return;let t,e,i,a;const s=this.panel.yAxis.logBase,o=this.panel.xBucketNumber||30,h=Math.floor((this.range.to.valueOf()-this.range.from.valueOf())/o);t=y.Z.intervalRegex.test(this.panel.xBucketSize)?n.rangeUtil.intervalToMs(this.panel.xBucketSize):isNaN(Number(this.panel.xBucketSize))||""===this.panel.xBucketSize||null===this.panel.xBucketSize?h:Number(this.panel.xBucketSize),a=this.parseSeries(this.series);const l=this.panel.yBucketNumber||10;1!==s?e=this.panel.yAxis.splitFactor:(e=a.max===a.min?a.max?a.max/10:1:(a.max-a.min)/l,e=this.panel.yBucketSize||e),i=function(t,e,i){let a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;const s={};for(const e of t){const t=e.datapoints,a=e.label;(0,r.forEach)(t,(t=>{const e=z(t[1],i);R(s,t,e,a)}))}return(0,r.forEach)(s,(t=>{t.buckets=1!==a?$(t,e,a):O(t,e)})),s}(this.series,e,t,s),a.min||a.max||(a={min:-1,max:1,minLog:1},e=1);const{cards:c,cardStats:d}=E(i,this.panel.hideZeroBuckets);this.data={buckets:i,heatmapStats:a,xBucketSize:t,yBucketSize:e,cards:c,cardStats:d}}convertHistogramToHeatmapData(){if(!this.range||!this.series)return;const t=this.getPanelDataSourceType();let e,i,a,s;(0,r.includes)(tt,t)||this.series.sort(W),this.panel.reverseYBuckets&&this.series.reverse(),a=function(t){const e={};for(let i=0;i<t.length;i++){const a=t[i],s=i;if(isNaN(s))return e;for(const t of a.datapoints){const i=t[0],a=t[1];if(!(0,r.isNumber)(i))continue;let o=e[a];o||(o=e[a]={x:a,buckets:{}}),o.buckets[s]={y:s,count:i,bounds:{top:null,bottom:s},values:[],points:[]}}}return e}(this.series),s=(0,r.map)(this.series,"label");const o=this.panel.yBucketBound;"prometheus"===t&&"lower"!==o&&"middle"!==o||"upper"===o?s=[""].concat(s):s.push("");e=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1,i=1/0;if(0===t.length)return 0;if(1===t.length)return t[0];t=(0,r.sortBy)(t);for(let a=1;a<t.length;a++){const s=D(t[a],t[a-1],e);i=s<i?s:i}return i}((0,r.map)((0,r.keys)(a),(t=>Number(t)))),i=1;const{cards:n,cardStats:h}=E(a,this.panel.hideZeroBuckets);this.data={buckets:a,xBucketSize:e,yBucketSize:1,tsBuckets:s,cards:n,cardStats:h}}getPanelDataSourceType(){return this.datasource&&this.datasource.meta&&this.datasource.meta.id?this.datasource.meta.id:"unknown"}onSnapshotLoad(t){this.onDataFramesReceived((0,b.F9)(t))}onDataFramesReceived(t){this.series=this.processor.getSeriesList({dataList:t,range:this.range}).map((t=>(t.color=void 0,t.flotpairs=t.getFlotPairs(this.panel.nullPointMode),t))),this.dataWarning=null;if(0===(0,r.reduce)(this.series,((t,e)=>t+e.datapoints.length),0))this.dataWarning={title:"No data points",tip:"No datapoints returned from data query"};else for(const t of this.series)if(t.isOutsideRange){this.dataWarning={title:"Data points outside time range",tip:"Can be caused by timezone mismatch or missing time filter in query"};break}this.render()}onDataError(){this.series=[],this.render()}onCardColorChange(t){this.panel.color.cardColor=t,this.render()}parseSeries(t){const e=(0,r.min)((0,r.map)(t,(t=>t.stats.min))),i=(0,r.min)((0,r.map)(t,(t=>t.stats.logmin)));return{max:(0,r.max)((0,r.map)(t,(t=>t.stats.max))),min:e,minLog:i}}parseHistogramSeries(t){const e=(0,r.map)(t,(t=>Number(t.alias))),i=(0,r.min)(e),a=(0,r.min)(e);return{max:(0,r.max)(e),min:i,minLog:a}}link(t,e,i,a){!function(t,e,i,a){new q(t,e,i,a)}(t,e,i,a)}}et.$inject=["$scope","$injector","templateSrv","timeSrv"],Z(et,"templateUrl","module.html")},60974:(t,e,i)=>{i.r(e),i.d(e,{MetricsPanelCtrl:()=>l,PanelCtrl:()=>h,QueryCtrl:()=>c,loadPluginCss:()=>s.loadPluginCss});var a=i(43215),s=i(90923),o=i(15866),r=i(91082),n=i(88643);const h=(0,a.makeClassES5Compatible)(r.q),l=(0,a.makeClassES5Compatible)(o.k),c=(0,a.makeClassES5Compatible)(n.G)}}]);
- //# sourceMappingURL=heatmapPlugin.023404025d5e6228a049.js.map
|
