apexcharts/dist/radar.common.js

A JavaScript Chart Library

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