apexcharts/dist/heatmap.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v5.10.5
 * (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_Graphics,i=a.__apex_Fill,l=a.__apex_Series,r=a.__apex_Utils,n=a.__apex_DataLabels;class c{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,n=this.determineColor(e,t,a);o.globals.hasNegs||s?i=o.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:(i=1-n.percent/100,"treemap"===e&&(i=(1-n.percent/100)*(1.25*l)));let c=n.color;const h=new r;if(o.config.plotOptions[e].enableShades)if("dark"===this.w.config.theme.mode){const e=h.shadeColor(-1*i,n.color);c=r.hexToRgba(r.isColorHex(e)?e:r.rgb2hex(e),o.config.fill.opacity)}else{const e=h.shadeColor(i,n.color);c=r.hexToRgba(r.isColorHex(e)?e:r.rgb2hex(e),o.config.fill.opacity)}return{color:c,colorProps:n}}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:i,colorProps:l,fontSize:r}){const c=this.w.config.dataLabels,h=new o(this.w),g=new n(this.w,this.ctx);let p=null;if(c.enabled){p=h.group({class:"apexcharts-data-labels"});const o=c.offsetX,n=c.offsetY,d=t+o,f=a+parseFloat(c.style.fontSize)/3+n;g.plotDataLabelsText({x:d,y:f,text:e,i:s,j:i,color:l.foreColor,parent:p,fontSize:r,dataLabelsConfig:c})}return p}}const h=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 c(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 o(this.w,this.ctx),s=a.group({class:"apexcharts-heatmap"});s.attr("clip-path",`url(#gridRectMask${t.globals.cuid})`);const n=t.layout.gridWidth/t.globals.dataPoints,c=t.layout.gridHeight/t.seriesData.series.length;let g=0,p=!1;this.negRange=this.helpers.checkColorRange();const d=e.slice();t.config.yaxis[0].reversed&&(p=!0,d.reverse());for(let o=p?0:d.length-1;p?o<d.length:o>=0;p?o++:o--){const p=a.group({class:"apexcharts-series apexcharts-heatmap-series",seriesName:r.escapeString(t.seriesData.seriesNames[o]),rel:o+1,"data:realIndex":o});if(l.addCollapsedClassToSeries(this.w,p,o),a.setupEventDelegation(p,".apexcharts-heatmap-rect"),t.config.chart.dropShadow.enabled){const e=t.config.chart.dropShadow;new h(this.w).dropShadow(p,e,o)}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[o][b]){f+=n;continue}if(b>=d[o].length)break;const l=this.helpers.getShadeColor(t.config.chart.type,o,b,this.negRange);let h=l.color;const x=l.colorProps;if("image"===t.config.fill.type){h=new i(this.w).fillPath({seriesNumber:o,dataPointIndex:b,opacity:t.globals.hasNegs?x.percent<0?1-(1+x.percent/100):m+x.percent/100:x.percent/100,patternID:r.randomId(),width:t.config.fill.image.width?t.config.fill.image.width:n,height:t.config.fill.image.height?t.config.fill.image.height:c})}const u=this.rectRadius,w=a.drawRect(f,g,n,c,u);if(w.attr({cx:f,cy:g}),w.node.classList.add("apexcharts-heatmap-rect"),p.add(w),w.attr({fill:h,i:o,index:o,j:b,val:e[o][b],"stroke-width":this.strokeWidth,stroke:t.config.plotOptions.heatmap.useFillColorAsStroke?h:t.globals.stroke.colors[0],color:h}),t.config.chart.animations.enabled&&!t.globals.dataChanged){let e=1;t.globals.resized||(e=t.config.chart.animations.speed),this.animateHeatMap(w,f,g,n,c,e)}if(t.globals.dataChanged){let e=1;if(this.dynamicAnim.enabled&&t.globals.shouldAnimate){e=this.dynamicAnim.speed;let a=t.globals.previousPaths[o]&&t.globals.previousPaths[o][b]&&t.globals.previousPaths[o][b].color;a||(a="rgba(255, 255, 255, 0)"),this.animateHeatColor(w,r.isColorHex(a)?a:r.rgb2hex(a),r.isColorHex(h)?h:r.rgb2hex(h),e)}}const y=(0,t.config.dataLabels.formatter)(t.seriesData.series[o][b],{value:t.seriesData.series[o][b],seriesIndex:o,dataPointIndex:b,w:t}),S=this.helpers.calculateDataLabels({text:y,x:f+n/2,y:g+c/2,i:o,j:b,colorProps:x,series:d});null!==S&&p.add(S),f+=n,b++}g+=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,o,i,l){const r=new s(this.w);r.animateRect(e,{x:t+o/2,y:a+i/2,width:0,height:0},{x:t,y:a,width:o,height:i},l,()=>{r.animationCompleted(e)})}animateHeatColor(e,t,a,s){e.attr({fill:t}).animate(s).attr({fill:a})}}}),exports.default=e;