apexcharts/dist/heatmap.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v5.13.0
 * (c) 2018-2026 ApexCharts
 */
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("apexcharts/core");function t(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e)for(const a in e)if("default"!==a){const s=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,s.get?s:{enumerable:!0,get:()=>e[a]})}return t.default=e,Object.freeze(t)}const a=t(e),s=a.__apex_Animations,o=a.__apex_Animations_computeStagger,i=a.__apex_Graphics,l=a.__apex_Fill,r=a.__apex_Series,n=a.__apex_Utils,c=a.__apex_DataLabels;class h{constructor(e,t){this.ctx=t,this.w=e}checkColorRange(){const e=this.w;let t=!1;const a=e.config.plotOptions[e.config.chart.type];return a.colorScale.ranges.length>0&&a.colorScale.ranges.map(e=>{e.from<=0&&(t=!0)}),t}getShadeColor(e,t,a,s){const o=this.w;let i=1;const l=o.config.plotOptions[e].shadeIntensity,r=this.determineColor(e,t,a);o.globals.hasNegs||s?i=o.config.plotOptions[e].reverseNegativeShade?r.percent<0?r.percent/100*(1.25*l):(1-r.percent/100)*(1.25*l):r.percent<=0?1-(1+r.percent/100)*l:(1-r.percent/100)*l:(i=1-r.percent/100,"treemap"===e&&(i=(1-r.percent/100)*(1.25*l)));let c=r.color;const h=new n;if(o.config.plotOptions[e].enableShades)if("dark"===this.w.config.theme.mode){const e=h.shadeColor(-1*i,r.color);c=n.hexToRgba(n.isColorHex(e)?e:n.rgb2hex(e),o.config.fill.opacity)}else{const e=h.shadeColor(i,r.color);c=n.hexToRgba(n.isColorHex(e)?e:n.rgb2hex(e),o.config.fill.opacity)}return{color:c,colorProps:r}}determineColor(e,t,a){const s=this.w,o=s.seriesData.series[t][a],i=s.config.plotOptions[e];let l=i.colorScale.inverse?a:t;i.distributed&&"treemap"===s.config.chart.type&&(l=a);let r=s.globals.colors[l],n=null,c=Math.min(...s.seriesData.series[t]),h=Math.max(...s.seriesData.series[t]);i.distributed||"heatmap"!==e||(c=s.globals.minY,h=s.globals.maxY),void 0!==i.colorScale.min&&(c=i.colorScale.min<s.globals.minY?i.colorScale.min:s.globals.minY,h=i.colorScale.max>s.globals.maxY?i.colorScale.max:s.globals.maxY);const g=Math.abs(h)+Math.abs(c);let p=100*o/(0===g?g-1e-6:g);if(i.colorScale.ranges.length>0){i.colorScale.ranges.map(e=>{if(o>=e.from&&o<=e.to){r=e.color,n=e.foreColor?e.foreColor:null,c=e.from,h=e.to;const t=Math.abs(h)+Math.abs(c);p=100*o/(0===t?t-1e-6:t)}})}return{color:r,foreColor:n,percent:p}}calculateDataLabels({text:e,x:t,y:a,i:s,j:o,colorProps:l,fontSize:r}){const n=this.w.config.dataLabels,h=new i(this.w),g=new c(this.w,this.ctx);let p=null;if(n.enabled){p=h.group({class:"apexcharts-data-labels"});const i=n.offsetX,c=n.offsetY,d=t+i,f=a+parseFloat(n.style.fontSize)/3+c;g.plotDataLabelsText({x:d,y:f,text:e,i:s,j:o,color:l.foreColor,parent:p,fontSize:r,dataLabelsConfig:n})}return p}}const g=a.__apex_Filters;e.use({heatmap:class{constructor(e,t,a){this.ctx=t,this.w=e,this.xRatio=a.xRatio,this.yRatio=a.yRatio,this.dynamicAnim=this.w.config.chart.animations.dynamicAnimation,this.helpers=new h(e,t),this.rectRadius=this.w.config.plotOptions.heatmap.radius,this.strokeWidth=this.w.config.stroke.show?this.w.config.stroke.width:0}draw(e){const t=this.w,a=new i(this.w,this.ctx),s=a.group({class:"apexcharts-heatmap"});s.attr("clip-path",`url(#gridRectMask${t.globals.cuid})`);const o=t.layout.gridWidth/t.globals.dataPoints,c=t.layout.gridHeight/t.seriesData.series.length;let h=0,p=!1;this.negRange=this.helpers.checkColorRange();const d=e.slice();t.config.yaxis[0].reversed&&(p=!0,d.reverse());for(let i=p?0:d.length-1;p?i<d.length:i>=0;p?i++:i--){const p=a.group({class:"apexcharts-series apexcharts-heatmap-series",seriesName:n.escapeString(t.seriesData.seriesNames[i]),rel:i+1,"data:realIndex":i});if(r.addCollapsedClassToSeries(this.w,p,i),a.setupEventDelegation(p,".apexcharts-heatmap-rect"),t.config.chart.dropShadow.enabled){const e=t.config.chart.dropShadow;new g(this.w).dropShadow(p,e,i)}let f=0;const m=t.config.plotOptions.heatmap.shadeIntensity;let b=0;for(let s=0;s<t.globals.dataPoints;s++){if(t.seriesData.seriesX.length&&!t.globals.allSeriesHasEqualX&&t.globals.minX+t.globals.minXDiff*s<t.seriesData.seriesX[i][b]){f+=o;continue}if(b>=d[i].length)break;const r=this.helpers.getShadeColor(t.config.chart.type,i,b,this.negRange);let g=r.color;const x=r.colorProps;if("image"===t.config.fill.type){g=new l(this.w).fillPath({seriesNumber:i,dataPointIndex:b,opacity:t.globals.hasNegs?x.percent<0?1-(1+x.percent/100):m+x.percent/100:x.percent/100,patternID:n.randomId(),width:t.config.fill.image.width?t.config.fill.image.width:o,height:t.config.fill.image.height?t.config.fill.image.height:c})}const u=this.rectRadius,w=a.drawRect(f,h,o,c,u);if(w.attr({cx:f,cy:h}),w.node.classList.add("apexcharts-heatmap-rect"),p.add(w),w.attr({fill:g,i:i,index:i,j:b,val:e[i][b],"stroke-width":this.strokeWidth,stroke:t.config.plotOptions.heatmap.useFillColorAsStroke?g:t.globals.stroke.colors[0],color:g}),t.config.chart.animations.enabled&&!t.globals.dataChanged){let e=1;t.globals.resized||(e=t.config.chart.animations.speed),this.animateHeatMap(w,f,h,o,c,e,i,b)}if(t.globals.dataChanged){let e=1;if(this.dynamicAnim.enabled&&t.globals.shouldAnimate){e=this.dynamicAnim.speed;let a=t.globals.previousPaths[i]&&t.globals.previousPaths[i][b]&&t.globals.previousPaths[i][b].color;a||(a="rgba(255, 255, 255, 0)"),this.animateHeatColor(w,n.isColorHex(a)?a:n.rgb2hex(a),n.isColorHex(g)?g:n.rgb2hex(g),e)}}const y=(0,t.config.dataLabels.formatter)(t.seriesData.series[i][b],{value:t.seriesData.series[i][b],seriesIndex:i,dataPointIndex:b,w:t}),S=this.helpers.calculateDataLabels({text:y,x:f+o/2,y:h+c/2,i:i,j:b,colorProps:x,series:d});null!==S&&p.add(S),f+=o,b++}h+=c,s.add(p)}const f=t.globals.yAxisScale[0].result.slice();return t.config.yaxis[0].reversed?f.unshift(""):f.push(""),t.globals.yAxisScale[0].result=f,s}animateHeatMap(e,t,a,i,l,r,n=0,c=0){const h=this.w,g=new s(this.w),p=h.config.chart.animations.animateGradually;let d=0;if(p&&!1!==p.enabled){const e=((h.seriesData.series||[]).length||1)+(h.globals.dataPoints||1)-2,t=Math.min(p.delay||0,.5*r/Math.max(1,e));d=o({style:"diagonal",index:c,row:n,col:c,baseDelay:t})}g.animateRect(e,{x:t+i/2,y:a+l/2,width:0,height:0},{x:t,y:a,width:i,height:l},r,()=>{g.animationCompleted(e)},d)}animateHeatColor(e,t,a,s){e.attr({fill:t}).animate(s).attr({fill:a})}}}),exports.default=e;