apexcharts/dist/heatmap.js

A JavaScript Chart Library

/*!
 * ApexCharts v7.0.0
 * (c) 2018-2026 ApexCharts
 */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ApexHeatmap={})}(this,function(e){"use strict";const t=globalThis.ApexCharts,a=globalThis.ApexCharts.__internals,s=a.__apex_Animations,i=a.__apex_Animations_computeStagger;a.__apex_Animations_applyAnimationPolicy,a.__apex_Animations_prefersReducedMotion,a.__apex_Animations_applyProgressiveReveal;const o=globalThis.ApexCharts.__internals.__apex_Graphics,l=globalThis.ApexCharts.__internals.__apex_Fill,n=globalThis.ApexCharts.__internals.__apex_Series,r=globalThis.ApexCharts.__internals.__apex_Utils,c=globalThis.ApexCharts.__internals.__apex_DataLabels,h=(e,t,a,s)=>{if("function"!=typeof e)return e;const i=e({series:t.seriesData.series,seriesIndex:a,dataPointIndex:s,w:t});return Number.isFinite(i)?i:0};class g{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 i=this.w;let o=1;const l=i.config.plotOptions[e].shadeIntensity,n=this.determineColor(e,t,a);i.globals.hasNegs||s?o=i.config.plotOptions[e].reverseNegativeShade?n.percent<0?n.percent/100*(1.25*l):(1-n.percent/100)*(1.25*l):n.percent<=0?1-(1+n.percent/100)*l:(1-n.percent/100)*l:(o=1-n.percent/100,"treemap"===e&&(o=(1-n.percent/100)*(1.25*l)));let c=n.color;const h=new r;if(i.config.plotOptions[e].enableShades)if("dark"===this.w.config.theme.mode){const e=h.shadeColor(-1*o,n.color);c=r.hexToRgba(r.isColorHex(e)?e:r.rgb2hex(e),i.config.fill.opacity)}else{const e=h.shadeColor(o,n.color);c=r.hexToRgba(r.isColorHex(e)?e:r.rgb2hex(e),i.config.fill.opacity)}return{color:c,colorProps:n}}determineColor(e,t,a){const s=this.w,i=s.seriesData.series[t][a],o=s.config.plotOptions[e];let l=o.colorScale.inverse?a:t;o.distributed&&"treemap"===s.config.chart.type&&(l=a);let n,r,c=s.globals.colors[l],h=null;if(o.distributed||"heatmap"!==e){const e=s.seriesData.series[t];n=e.length?e[0]:0,r=n;for(let t=1;t<e.length;t++)e[t]<n&&(n=e[t]),e[t]>r&&(r=e[t])}else n=s.globals.minY,r=s.globals.maxY;const g=o.colorScale.min,p=o.colorScale.max;void 0!==g&&void 0!==p&&p>g?(n=g,r=p):void 0!==g&&(n=g<s.globals.minY?g:s.globals.minY,r=p>s.globals.maxY?p:s.globals.maxY);const d=Math.abs(r)+Math.abs(n),f=Math.min(Math.max(i,n),r);let m=0===d?0:100*f/d;if(o.colorScale.ranges.length>0){o.colorScale.ranges.map(e=>{if(i>=e.from&&i<=e.to){c=e.color,h=e.foreColor?e.foreColor:null,n=e.from,r=e.to;const t=Math.abs(r)+Math.abs(n);m=0===t?0:100*i/t}})}return{color:c,foreColor:h,percent:m}}calculateDataLabels({text:e,x:t,y:a,i:s,j:i,colorProps:l,fontSize:n}){const r=this.w,g=r.config.dataLabels,p=new o(this.w),d=new c(this.w,this.ctx);let f=null;if(g.enabled){f=p.group({class:"apexcharts-data-labels"});const o=h(g.offsetX,r,s,i),c=h(g.offsetY,r,s,i),m=t+o,x=a+parseFloat(g.style.fontSize)/3+c;d.plotDataLabelsText({x:m,y:x,text:e,i:s,j:i,color:l.foreColor,parent:f,fontSize:n,dataLabelsConfig:g})}return f}}const p=globalThis.ApexCharts.__internals.__apex_Filters;t.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 g(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){var t,a;const s=this.w,i=new o(this.w,this.ctx),c=function(e,t){const a=e&&e.renderer;return a&&a.kind&&"svg"!==a.kind?a:t}(this.ctx,i),h=c!==i&&"function"==typeof c.drawRectCell,g=i.group({class:"apexcharts-heatmap"});g.attr("clip-path",`url(#gridRectMask${s.globals.cuid})`);const d=s.layout.gridWidth/s.globals.dataPoints,f=s.layout.gridHeight/s.seriesData.series.length,m=("numeric"===s.config.xaxis.type||"datetime"===s.config.xaxis.type)&&s.axisFlags.isXNumeric&&this.xRatio>0;let x=d;if(m){const e=s.globals.minXDiff;x=Number.isFinite(e)&&e>0?e/this.xRatio:d}const b=Array.isArray(s.config.fill.opacity)?null!=(t=s.config.fill.opacity[0])?t:1:null!=(a=s.config.fill.opacity)?a:1;let u=0,_=!1;this.negRange=this.helpers.checkColorRange();const y=e.slice();s.config.yaxis[0].reversed&&(_=!0,y.reverse());for(let t=_?0:y.length-1;_?t<y.length:t>=0;_?t++:t--){const a=i.group({class:"apexcharts-series apexcharts-heatmap-series",seriesName:r.escapeString(s.seriesData.seriesNames[t]),rel:t+1,"data:realIndex":t});if(n.addCollapsedClassToSeries(this.w,a,t),h||i.setupEventDelegation(a,".apexcharts-heatmap-rect"),s.config.chart.dropShadow.enabled){const e=s.config.chart.dropShadow;new p(this.w).dropShadow(a,e,t)}let o=0;const _=s.config.plotOptions.heatmap.shadeIntensity;let w=0;for(let n=0;n<s.globals.dataPoints;n++){if(!m&&s.seriesData.seriesX.length&&!s.globals.allSeriesHasEqualX&&s.globals.minX+s.globals.minXDiff*n<s.seriesData.seriesX[t][w]){o+=d;continue}if(w>=y[t].length)break;const g=m?x:d;if(m){const e=s.seriesData.seriesX[t]?s.seriesData.seriesX[t][w]:null;if(null==e||e!=e){w++;continue}o=(e-s.globals.minX)/this.xRatio-x/2}const p=this.helpers.getShadeColor(s.config.chart.type,t,w,this.negRange);let C=p.color;const S=p.colorProps;if("image"===s.config.fill.type){C=new l(this.w).fillPath({seriesNumber:t,dataPointIndex:w,opacity:s.globals.hasNegs?S.percent<0?1-(1+S.percent/100):_+S.percent/100:S.percent/100,patternID:r.randomId(),width:s.config.fill.image.width?s.config.fill.image.width:g,height:s.config.fill.image.height?s.config.fill.image.height:f})}const A=this.rectRadius,R=s.config.plotOptions.heatmap.useFillColorAsStroke?C:s.globals.stroke.colors[0];if(h)c.drawRectCell(o,u,g,f,{fill:C,fillOpacity:b,stroke:R,strokeWidth:this.strokeWidth,radius:A,seriesIndex:t,dataPointIndex:w});else{const l=i.drawRect(o,u,g,f,A);if(l.attr({cx:o,cy:u}),l.node.classList.add("apexcharts-heatmap-rect"),a.add(l),l.attr({fill:C,i:t,index:t,j:w,val:e[t][w],"stroke-width":this.strokeWidth,stroke:R,color:C}),s.config.chart.animations.enabled&&!s.globals.dataChanged){let e=1;s.globals.resized||(e=s.config.chart.animations.speed),this.animateHeatMap(l,o,u,g,f,e,t,w)}if(s.globals.dataChanged){let e=1;if(this.dynamicAnim.enabled&&s.globals.shouldAnimate){e=this.dynamicAnim.speed;let a=s.globals.previousPaths[t]&&s.globals.previousPaths[t][w]&&s.globals.previousPaths[t][w].color;a||(a="rgba(255, 255, 255, 0)"),this.animateHeatColor(l,r.isColorHex(a)?a:r.rgb2hex(a),r.isColorHex(C)?C:r.rgb2hex(C),e)}}}const v=(0,s.config.dataLabels.formatter)(s.seriesData.series[t][w],{value:s.seriesData.series[t][w],seriesIndex:t,dataPointIndex:w,w:s}),D=this.helpers.calculateDataLabels({text:v,x:o+g/2,y:u+f/2,i:t,j:w,colorProps:S,series:y});null!==D&&a.add(D),m||(o+=d),w++}u+=f,g.add(a)}const w=s.globals.yAxisScale[0].result.slice();return s.config.yaxis[0].reversed?w.unshift(""):w.push(""),s.globals.yAxisScale[0].result=w,g}animateHeatMap(e,t,a,o,l,n,r=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*n/Math.max(1,e));d=i({style:"diagonal",index:c,row:r,col:c,baseDelay:t})}g.animateRect(e,{x:t+o/2,y:a+l/2,width:0,height:0},{x:t,y:a,width:o,height:l},n,()=>{g.animationCompleted(e)},d)}animateHeatColor(e,t,a,s){e.attr({fill:t}).animate(s).attr({fill:a})}}}),e.default=t,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});