apexcharts/dist/heatmap.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v6.6.1
 * (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,i=a.__apex_Animations_computeStagger,o=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 i=this.w;let o=1;const l=i.config.plotOptions[e].shadeIntensity,r=this.determineColor(e,t,a);i.globals.hasNegs||s?o=i.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:(o=1-r.percent/100,"treemap"===e&&(o=(1-r.percent/100)*(1.25*l)));let c=r.color;const h=new n;if(i.config.plotOptions[e].enableShades)if("dark"===this.w.config.theme.mode){const e=h.shadeColor(-1*o,r.color);c=n.hexToRgba(n.isColorHex(e)?e:n.rgb2hex(e),i.config.fill.opacity)}else{const e=h.shadeColor(o,r.color);c=n.hexToRgba(n.isColorHex(e)?e:n.rgb2hex(e),i.config.fill.opacity)}return{color:c,colorProps:r}}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 r=s.globals.colors[l],n=null,c=Math.min(...s.seriesData.series[t]),h=Math.max(...s.seriesData.series[t]);o.distributed||"heatmap"!==e||(c=s.globals.minY,h=s.globals.maxY),void 0!==o.colorScale.min&&(c=o.colorScale.min<s.globals.minY?o.colorScale.min:s.globals.minY,h=o.colorScale.max>s.globals.maxY?o.colorScale.max:s.globals.maxY);const g=Math.abs(h)+Math.abs(c);let d=0===g?0:100*i/g;if(o.colorScale.ranges.length>0){o.colorScale.ranges.map(e=>{if(i>=e.from&&i<=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);d=0===t?0:100*i/t}})}return{color:r,foreColor:n,percent:d}}calculateDataLabels({text:e,x:t,y:a,i:s,j:i,colorProps:l,fontSize:r}){const n=this.w.config.dataLabels,h=new o(this.w),g=new c(this.w,this.ctx);let d=null;if(n.enabled){d=h.group({class:"apexcharts-data-labels"});const o=n.offsetX,c=n.offsetY,p=t+o,f=a+parseFloat(n.style.fontSize)/3+c;g.plotDataLabelsText({x:p,y:f,text:e,i:s,j:i,color:l.foreColor,parent:d,fontSize:r,dataLabelsConfig:n})}return d}}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){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,d=i.group({class:"apexcharts-heatmap"});d.attr("clip-path",`url(#gridRectMask${s.globals.cuid})`);const p=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=p;if(m){const e=s.globals.minXDiff;x=Number.isFinite(e)&&e>0?e/this.xRatio:p}const u=Array.isArray(s.config.fill.opacity)?null!=(t=s.config.fill.opacity[0])?t:1:null!=(a=s.config.fill.opacity)?a:1;let b=0,w=!1;this.negRange=this.helpers.checkColorRange();const y=e.slice();s.config.yaxis[0].reversed&&(w=!0,y.reverse());for(let t=w?0:y.length-1;w?t<y.length:t>=0;w?t++:t--){const a=i.group({class:"apexcharts-series apexcharts-heatmap-series",seriesName:n.escapeString(s.seriesData.seriesNames[t]),rel:t+1,"data:realIndex":t});if(r.addCollapsedClassToSeries(this.w,a,t),h||i.setupEventDelegation(a,".apexcharts-heatmap-rect"),s.config.chart.dropShadow.enabled){const e=s.config.chart.dropShadow;new g(this.w).dropShadow(a,e,t)}let o=0;const w=s.config.plotOptions.heatmap.shadeIntensity;let S=0;for(let r=0;r<s.globals.dataPoints;r++){if(!m&&s.seriesData.seriesX.length&&!s.globals.allSeriesHasEqualX&&s.globals.minX+s.globals.minXDiff*r<s.seriesData.seriesX[t][S]){o+=p;continue}if(S>=y[t].length)break;const g=m?x:p;if(m){const e=s.seriesData.seriesX[t]?s.seriesData.seriesX[t][S]:null;if(null==e||e!=e){S++;continue}o=(e-s.globals.minX)/this.xRatio-x/2}const d=this.helpers.getShadeColor(s.config.chart.type,t,S,this.negRange);let C=d.color;const _=d.colorProps;if("image"===s.config.fill.type){C=new l(this.w).fillPath({seriesNumber:t,dataPointIndex:S,opacity:s.globals.hasNegs?_.percent<0?1-(1+_.percent/100):w+_.percent/100:_.percent/100,patternID:n.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 D=this.rectRadius,R=s.config.plotOptions.heatmap.useFillColorAsStroke?C:s.globals.stroke.colors[0];if(h)c.drawRectCell(o,b,g,f,{fill:C,fillOpacity:u,stroke:R,strokeWidth:this.strokeWidth,radius:D,seriesIndex:t,dataPointIndex:S});else{const l=i.drawRect(o,b,g,f,D);if(l.attr({cx:o,cy:b}),l.node.classList.add("apexcharts-heatmap-rect"),a.add(l),l.attr({fill:C,i:t,index:t,j:S,val:e[t][S],"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,b,g,f,e,t,S)}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][S]&&s.globals.previousPaths[t][S].color;a||(a="rgba(255, 255, 255, 0)"),this.animateHeatColor(l,n.isColorHex(a)?a:n.rgb2hex(a),n.isColorHex(C)?C:n.rgb2hex(C),e)}}}const k=(0,s.config.dataLabels.formatter)(s.seriesData.series[t][S],{value:s.seriesData.series[t][S],seriesIndex:t,dataPointIndex:S,w:s}),v=this.helpers.calculateDataLabels({text:k,x:o+g/2,y:b+f/2,i:t,j:S,colorProps:_,series:y});null!==v&&a.add(v),m||(o+=p),S++}b+=f,d.add(a)}const S=s.globals.yAxisScale[0].result.slice();return s.config.yaxis[0].reversed?S.unshift(""):S.push(""),s.globals.yAxisScale[0].result=S,d}animateHeatMap(e,t,a,o,l,r,n=0,c=0){const h=this.w,g=new s(this.w),d=h.config.chart.animations.animateGradually;let p=0;if(d&&!1!==d.enabled){const e=((h.seriesData.series||[]).length||1)+(h.globals.dataPoints||1)-2,t=Math.min(d.delay||0,.5*r/Math.max(1,e));p=i({style:"diagonal",index:c,row:n,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},r,()=>{g.animationCompleted(e)},p)}animateHeatColor(e,t,a,s){e.attr({fill:t}).animate(s).attr({fill:a})}}}),exports.default=e;