apexcharts/dist/heatmap.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v7.0.0
 * (c) 2018-2026 ApexCharts
 */
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});function e(e){if(e&&e.__esModule)return 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 t=e(require("apexcharts/core")),a=t.__apex_Animations,s=t.__apex_Animations_computeStagger,i=t.__apex_Graphics,o=t.__apex_Fill,l=t.__apex_Series,r=t.__apex_Utils,n=t.__apex_DataLabels,c=(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 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,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 r,n,c=s.globals.colors[l],h=null;if(o.distributed||"heatmap"!==e){const e=s.seriesData.series[t];r=e.length?e[0]:0,n=r;for(let t=1;t<e.length;t++)e[t]<r&&(r=e[t]),e[t]>n&&(n=e[t])}else r=s.globals.minY,n=s.globals.maxY;const g=o.colorScale.min,d=o.colorScale.max;void 0!==g&&void 0!==d&&d>g?(r=g,n=d):void 0!==g&&(r=g<s.globals.minY?g:s.globals.minY,n=d>s.globals.maxY?d:s.globals.maxY);const f=Math.abs(n)+Math.abs(r),p=Math.min(Math.max(i,r),n);let m=0===f?0:100*p/f;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,r=e.from,n=e.to;const t=Math.abs(n)+Math.abs(r);m=0===t?0:100*i/t}})}return{color:c,foreColor:h,percent:m}}calculateDataLabels({text:e,x:t,y:a,i:s,j:o,colorProps:l,fontSize:r}){const h=this.w,g=h.config.dataLabels,d=new i(this.w),f=new n(this.w,this.ctx);let p=null;if(g.enabled){p=d.group({class:"apexcharts-data-labels"});const i=c(g.offsetX,h,s,o),n=c(g.offsetY,h,s,o),m=t+i,u=a+parseFloat(g.style.fontSize)/3+n;f.plotDataLabelsText({x:m,y:u,text:e,i:s,j:o,color:l.foreColor,parent:p,fontSize:r,dataLabelsConfig:g})}return p}}const g=t.__apex_Filters;t.default.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,n=new i(this.w,this.ctx),c=function(e,t){const a=e&&e.renderer;return a&&a.kind&&"svg"!==a.kind?a:t}(this.ctx,n),h=c!==n&&"function"==typeof c.drawRectCell,d=n.group({class:"apexcharts-heatmap"});d.attr("clip-path",`url(#gridRectMask${s.globals.cuid})`);const f=s.layout.gridWidth/s.globals.dataPoints,p=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 u=f;if(m){const e=s.globals.minXDiff;u=Number.isFinite(e)&&e>0?e/this.xRatio:f}const x=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=n.group({class:"apexcharts-series apexcharts-heatmap-series",seriesName:r.escapeString(s.seriesData.seriesNames[t]),rel:t+1,"data:realIndex":t});if(l.addCollapsedClassToSeries(this.w,a,t),h||n.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 i=0;const w=s.config.plotOptions.heatmap.shadeIntensity;let S=0;for(let l=0;l<s.globals.dataPoints;l++){if(!m&&s.seriesData.seriesX.length&&!s.globals.allSeriesHasEqualX&&s.globals.minX+s.globals.minXDiff*l<s.seriesData.seriesX[t][S]){i+=f;continue}if(S>=y[t].length)break;const g=m?u:f;if(m){const e=s.seriesData.seriesX[t]?s.seriesData.seriesX[t][S]:null;if(null==e||e!=e){S++;continue}i=(e-s.globals.minX)/this.xRatio-u/2}const d=this.helpers.getShadeColor(s.config.chart.type,t,S,this.negRange);let _=d.color;const C=d.colorProps;if("image"===s.config.fill.type){_=new o(this.w).fillPath({seriesNumber:t,dataPointIndex:S,opacity:s.globals.hasNegs?C.percent<0?1-(1+C.percent/100):w+C.percent/100:C.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:p})}const D=this.rectRadius,v=s.config.plotOptions.heatmap.useFillColorAsStroke?_:s.globals.stroke.colors[0];if(h)c.drawRectCell(i,b,g,p,{fill:_,fillOpacity:x,stroke:v,strokeWidth:this.strokeWidth,radius:D,seriesIndex:t,dataPointIndex:S});else{const o=n.drawRect(i,b,g,p,D);if(o.attr({cx:i,cy:b}),o.node.classList.add("apexcharts-heatmap-rect"),a.add(o),o.attr({fill:_,i:t,index:t,j:S,val:e[t][S],"stroke-width":this.strokeWidth,stroke:v,color:_}),s.config.chart.animations.enabled&&!s.globals.dataChanged){let e=1;s.globals.resized||(e=s.config.chart.animations.speed),this.animateHeatMap(o,i,b,g,p,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(o,r.isColorHex(a)?a:r.rgb2hex(a),r.isColorHex(_)?_:r.rgb2hex(_),e)}}}const R=(0,s.config.dataLabels.formatter)(s.seriesData.series[t][S],{value:s.seriesData.series[t][S],seriesIndex:t,dataPointIndex:S,w:s}),P=this.helpers.calculateDataLabels({text:R,x:i+g/2,y:b+p/2,i:t,j:S,colorProps:C,series:y});null!==P&&a.add(P),m||(i+=f),S++}b+=p,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,i,o,l,r,n=0,c=0){const h=this.w,g=new a(this.w),d=h.config.chart.animations.animateGradually;let f=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));f=s({style:"diagonal",index:c,row:n,col:c,baseDelay:t})}g.animateRect(e,{x:t+o/2,y:i+l/2,width:0,height:0},{x:t,y:i,width:o,height:l},r,()=>{g.animationCompleted(e)},f)}animateHeatColor(e,t,a,s){e.attr({fill:t}).animate(s).attr({fill:a})}}}),Object.defineProperty(exports,"default",{enumerable:!0,get:()=>t.default});