apexcharts/dist/radar.common.js

A JavaScript Chart Library

/*!
 * ApexCharts v6.6.1
 * (c) 2018-2026 ApexCharts
 */
"use strict";var t=Object.defineProperty,s=Object.defineProperties,e=Object.getOwnPropertyDescriptors,a=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,r=(s,e,a)=>e in s?t(s,e,{enumerable:!0,configurable:!0,writable:!0,value:a}):s[e]=a,l=(t,s)=>{for(var e in s||(s={}))i.call(s,e)&&r(t,e,s[e]);if(a)for(var e of a(s))o.call(s,e)&&r(t,e,s[e]);return t},n=(t,a)=>s(t,e(a));Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("apexcharts/core");function c(t){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t)for(const e in t)if("default"!==e){const a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(s,e,a.get?a:{enumerable:!0,get:()=>t[e]})}return s.default=t,Object.freeze(s)}const d=c(h),g=d.__apex_Fill,p=d.__apex_Graphics,x=d.__apex_Markers,f=d.__apex_DataLabels,y=d.__apex_Filters,b=d.__apex_Utils;class u{constructor(t){this.w=t}drawYAxisTexts(t,s,e,a){const i=this.w,o=i.config.yaxis[0],r=i.formatters.yLabelFormatters[0];return new p(this.w).drawText({x:t+o.labels.offsetX,y:s+o.labels.offsetY,text:r(a,e),textAnchor:"middle",fontSize:o.labels.style.fontSize,fontFamily:o.labels.style.fontFamily,foreColor:Array.isArray(o.labels.style.colors)?o.labels.style.colors[e]:o.labels.style.colors})}getMaxLabelWidth(t,{fontSize:s,fontFamily:e}={}){const a=new p(this.w);let i=0;return t.forEach(t=>{if(null==t||""===t)return;const o=a.getTextRects(`${t}`,s||"12px",e,"");i=Math.max(i,o.width)}),i}drawExternalLabel({lines:t,lineHeight:s,anchor:e,elbow:a,labelX:i,labelY:o,side:r,connector:l,style:n,foreColor:h}){const c=new p(this.w),d=c.group({class:"apexcharts-pie-name-label-group"});if(l.show){const t=`M ${e.x} ${e.y} L ${a.x} ${a.y} L ${i} ${o}`,s=c.drawPath({d:t,stroke:l.color,strokeWidth:l.width,fill:"none",strokeLinecap:"round"});s.node.classList.add("apexcharts-pie-label-connector"),d.add(s)}const g="right"===r?i+4:i-4,x=t.length,f=o-(x-1)*s/2,y=c.drawText({x:g,y:f,text:1===x?t[0]:t,textAnchor:"right"===r?"start":"end",fontSize:n.fontSize,fontFamily:n.fontFamily,fontWeight:n.fontWeight,foreColor:h,dominantBaseline:"central",cssClass:"apexcharts-pie-name-label"});if(x>1){const t=y.node.getElementsByTagName("tspan");for(let e=0;e<t.length;e++)t[e].setAttribute("x",`${g}`),t[e].setAttribute("dy",0===e?"0":`${s}`)}return d.add(y),d}}const w=d.__apex_CoreUtils;h.use({radar:class{constructor(t,s){this.ctx=s,this.w=t,this.chartType=this.w.config.chart.type,this.initialAnim=this.w.config.chart.animations.enabled,this.dynamicAnim=this.initialAnim&&this.w.config.chart.animations.dynamicAnimation.enabled,this.animDur=0,this.graphics=new p(this.w),this.lineColorArr=void 0!==t.globals.stroke.colors?t.globals.stroke.colors:t.globals.colors,this.defaultSize=t.globals.svgHeight<t.globals.svgWidth?t.layout.gridHeight:t.layout.gridWidth,this.isLog=t.config.yaxis[0].logarithmic,this.logBase=t.config.yaxis[0].logBase,this.coreUtils=new w(this.w),this.maxValue=this.isLog?this.coreUtils.getLogVal(this.logBase,t.globals.maxY,0):t.globals.maxY,this.minValue=this.isLog?this.coreUtils.getLogVal(this.logBase,this.w.globals.minY,0):t.globals.minY,this.polygons=t.config.plotOptions.radar.polygons,this.strokeWidth=t.config.stroke.show?t.config.stroke.width:0,this.size=this.defaultSize/2.1-this.strokeWidth-t.config.chart.dropShadow.blur,t.config.xaxis.labels.show&&(this.size=this.size-t.layout.xAxisLabelsWidth/1.75),void 0!==t.config.plotOptions.radar.size&&(this.size=t.config.plotOptions.radar.size),this.dataRadiusOfPercent=[],this.dataRadius=[],this.angleArr=[],this.dataPointsLen=0,this.disAngle=0,this.yaxisLabelsTextsPos=[]}draw(t){const s=this.w,e=new g(this.w),a=[],i=new f(this.w,this.ctx);t.length&&(this.dataPointsLen=t[s.globals.maxValsInArrayIndex].length),this.disAngle=2*Math.PI/this.dataPointsLen;const o=s.layout.gridWidth/2,r=s.layout.gridHeight/2,h=o+s.config.plotOptions.radar.offsetX,c=r+s.config.plotOptions.radar.offsetY,d=this.graphics.group({class:"apexcharts-radar-series apexcharts-plot-series",transform:`translate(${h||0}, ${c||0})`});let p=[],u=null,w=null;if(this.yaxisLabels=this.graphics.group({class:"apexcharts-yaxis"}),t.forEach((t,o)=>{const r=t.length===s.globals.dataPoints,h=this.graphics.group().attr({class:"apexcharts-series","data:longestSeries":r,seriesName:b.escapeString(s.seriesData.seriesNames[o]),rel:o+1,"data:realIndex":o});this.dataRadiusOfPercent[o]=[],this.dataRadius[o]=[],this.angleArr[o]=[],t.forEach((t,s)=>{const e=Math.abs(this.maxValue-this.minValue);t-=this.minValue,this.isLog&&(t=this.coreUtils.getLogVal(this.logBase,t,0)),this.dataRadiusOfPercent[o][s]=t/e,this.dataRadius[o][s]=this.dataRadiusOfPercent[o][s]*this.size,this.angleArr[o][s]=s*this.disAngle}),p=this.getDataPointsPos(this.dataRadius[o],this.angleArr[o]);const c=this.createPaths(p,{x:0,y:0});u=this.graphics.group({class:"apexcharts-series-markers-wrap apexcharts-element-hidden"}),w=this.graphics.group({class:"apexcharts-datalabels","data:realIndex":o}),s.globals.delayedElements.push({el:u.node,index:o});const d={i:o,realIndex:o,animationDelay:o,initialSpeed:s.config.chart.animations.speed,dataChangeSpeed:s.config.chart.animations.dynamicAnimation.speed,className:"apexcharts-radar",shouldClipToGrid:!1,bindEventsOnPaths:!1,stroke:s.globals.stroke.colors[o],strokeLineCap:s.config.stroke.lineCap};let g=null;s.globals.previousPaths.length>0&&(g=this.getPreviousPath(o));for(let t=0;t<c.linePathsTo.length;t++){const a=this.graphics.renderPaths(n(l({},d),{pathFrom:null===g?c.linePathsFrom[t]:g,pathTo:c.linePathsTo[t],strokeWidth:Array.isArray(this.strokeWidth)?this.strokeWidth[o]:this.strokeWidth,fill:"none",drawShadow:!1}));h.add(a);const i=e.fillPath({seriesNumber:o}),r=this.graphics.renderPaths(n(l({},d),{pathFrom:null===g?c.areaPathsFrom[t]:g,pathTo:c.areaPathsTo[t],strokeWidth:0,fill:i,drawShadow:!1,drawMask:{type:"radial",cx:0,cy:0,r:this.size}}));if(s.config.chart.dropShadow.enabled){const t=new y(this.w),e=s.config.chart.dropShadow;t.dropShadow(r,Object.assign({},e,{noUserSpaceOnUse:!0}),o)}h.add(r)}t.forEach((t,e)=>{const a=new x(this.w,this.ctx).getMarkerConfig({cssClass:"apexcharts-marker",seriesIndex:o,dataPointIndex:e}),r=this.graphics.drawMarker(p[e].x,p[e].y,a);r.attr("rel",e),r.attr("j",e),r.attr("index",o),r.node.setAttribute("default-marker-size",a.pSize);const n=this.graphics.group({class:"apexcharts-series-markers"});n&&n.add(r),u.add(n),h.add(u);const c=s.config.dataLabels;if(c.enabled){const t=c.formatter(s.seriesData.series[o][e],{seriesIndex:o,dataPointIndex:e,w:s});i.plotDataLabelsText({x:p[e].x,y:p[e].y,text:t,textAnchor:"middle",i:o,j:o,parent:w,offsetCorrection:!1,dataLabelsConfig:l({},c)})}h.add(w)}),a.push(h)}),this.drawPolygons({parent:d}),s.config.xaxis.labels.show){const t=this.drawXAxisTexts();d.add(t)}return a.forEach(t=>{d.add(t)}),d.add(this.yaxisLabels),d}drawPolygons(t){const s=this.w,{parent:e}=t,a=new u(this.w),i=s.globals.yAxisScale[0].result.reverse(),o=i.length,r=[],l=this.size/(o-1);for(let t=0;t<o;t++)r[t]=l*t;r.reverse();const n=[],h=[];r.forEach((t,s)=>{const e=b.getPolygonPos(t,this.dataPointsLen);let a="";e.forEach((t,e)=>{if(0===s){const s=this.graphics.drawLine(t.x,t.y,0,0,Array.isArray(this.polygons.connectorColors)?this.polygons.connectorColors[e]:this.polygons.connectorColors);h.push(s)}0===e&&this.yaxisLabelsTextsPos.push({x:t.x,y:t.y}),a+=t.x+","+t.y+" "}),n.push(a)}),n.forEach((t,a)=>{const i=this.polygons.strokeColors,o=this.polygons.strokeWidth,r=this.graphics.drawPolygon(t,Array.isArray(i)?i[a]:i,Array.isArray(o)?o[a]:o,s.globals.radarPolygons.fill.colors[a]);e.add(r)}),h.forEach(t=>{e.add(t)}),s.config.yaxis[0].show&&this.yaxisLabelsTextsPos.forEach((t,s)=>{const e=a.drawYAxisTexts(t.x,t.y,s,i[s]);this.yaxisLabels.add(e)})}drawXAxisTexts(){const t=this.w,s=t.config.xaxis.labels,e=this.graphics.group({class:"apexcharts-xaxis"}),a=b.getPolygonPos(this.size,this.dataPointsLen);return t.labelData.labels.forEach((i,o)=>{const r=t.config.xaxis.labels.formatter,n=new f(this.w,this.ctx);if(a[o]){const h=this.getTextPos(a[o],this.size),c=r(i,{seriesIndex:-1,dataPointIndex:o,w:t});n.plotDataLabelsText({x:h.newX,y:h.newY,text:c,textAnchor:h.textAnchor,i:o,j:o,parent:e,className:"apexcharts-xaxis-label",color:Array.isArray(s.style.colors)&&s.style.colors[o]?s.style.colors[o]:"#a8a8a8",dataLabelsConfig:l({textAnchor:h.textAnchor,dropShadow:{enabled:!1}},s),offsetCorrection:!1}).on("click",s=>{if("function"==typeof t.config.chart.events.xAxisLabelClick){const e=Object.assign({},t,{labelIndex:o});t.config.chart.events.xAxisLabelClick(s,this.ctx,e)}})}}),e}createPaths(t,s){const e=[];let a=[];const i=[];let o=[];if(t.length){a=[this.graphics.move(s.x,s.y)],o=[this.graphics.move(s.x,s.y)];let r=this.graphics.move(t[0].x,t[0].y),l=this.graphics.move(t[0].x,t[0].y);t.forEach((s,e)=>{r+=this.graphics.line(s.x,s.y),l+=this.graphics.line(s.x,s.y),e===t.length-1&&(r+="Z",l+="Z")}),e.push(r),i.push(l)}return{linePathsFrom:a,linePathsTo:e,areaPathsFrom:o,areaPathsTo:i}}getTextPos(t,s){let e="middle",a=t.x,i=t.y;return Math.abs(t.x)>=10?t.x>0?(e="start",a+=10):t.x<0&&(e="end",a-=10):e="middle",Math.abs(t.y)>=s-10&&(t.y<0?i-=10:t.y>0&&(i+=10)),{textAnchor:e,newX:a,newY:i}}getPreviousPath(t){const s=this.w;let e=null;for(let a=0;a<s.globals.previousPaths.length;a++){const i=s.globals.previousPaths[a];i.paths.length>0&&parseInt(i.realIndex,10)===parseInt(String(t),10)&&void 0!==s.globals.previousPaths[a].paths[0]&&(e=s.globals.previousPaths[a].paths[0].d)}return e}getDataPointsPos(t,s,e=this.dataPointsLen){t=t||[],s=s||[];const a=[];for(let i=0;i<e;i++){const e={};e.x=t[i]*Math.sin(s[i]),e.y=-t[i]*Math.cos(s[i]),a.push(e)}return a}}}),exports.default=h;