@fusioncharts/widgets/src/dataset/radialtrack/index.js

FusionCharts JavaScript charting framework

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=true;exports.default=void 0;var _defineProperty2=_interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _inheritsLoose2=_interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _componentInterface=require("@fusioncharts/core/src/component-interface");var _polarUtil=require("@fusioncharts/utils/src/scale-utils/polar-util");var _lib=require("@fusioncharts/core/src/lib");var _animationManager=_interopRequireDefault(require("@fusioncharts/core/src/animation-manager"));var _index=require("@fusioncharts/core/src/dependency-manager/index");function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach((function(r){(0,_defineProperty2.default)(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}var PERCENT_STR="%",M="M",A="A",L="L",Z="Z";function setPath(_startAngle,_endAngle,arc,outerRadius,innerRadius,centerX,centerY,thickness,startRadius,endRadius,trackClockwise){if(startRadius>0&&arc!==360){_startAngle+=(0,_polarUtil.radiansInAngle)(startRadius,innerRadius+startRadius)}if(endRadius>0&&arc!==360){_endAngle-=(0,_polarUtil.radiansInAngle)(endRadius,innerRadius+endRadius)}var startAngle=(0,_polarUtil.normaliseAngle)(_startAngle),endAngle=(0,_polarUtil.normaliseAngle)(_endAngle),_pointOnCircleFromCen=(0,_polarUtil.pointOnCircleFromCenter)(centerX,centerY,outerRadius,startAngle),x1=_pointOnCircleFromCen.x,y1=_pointOnCircleFromCen.y,_pointOnCircleFromCen2=(0,_polarUtil.pointOnCircleFromCenter)(centerX,centerY,outerRadius,endAngle),x2=_pointOnCircleFromCen2.x,y2=_pointOnCircleFromCen2.y,_pointOnCircleFromCen3=(0,_polarUtil.pointOnCircleFromCenter)(centerX,centerY,innerRadius,startAngle),x3=_pointOnCircleFromCen3.x,y3=_pointOnCircleFromCen3.y,_pointOnCircleFromCen4=(0,_polarUtil.pointOnCircleFromCenter)(centerX,centerY,innerRadius,endAngle),x4=_pointOnCircleFromCen4.x,y4=_pointOnCircleFromCen4.y;x1=(0,_lib.toPrecision)(x1,4);y1=(0,_lib.toPrecision)(y1,4);x2=(0,_lib.toPrecision)(x2,4);y2=(0,_lib.toPrecision)(y2,4);x3=(0,_lib.toPrecision)(x3,4);y3=(0,_lib.toPrecision)(y3,4);x4=(0,_lib.toPrecision)(x4,4);y4=(0,_lib.toPrecision)(y4,4);return[M,x1,y1,A,outerRadius,outerRadius,0,arc<=180?0:1,trackClockwise?1:0,x2,y2,endRadius>0&&arc!==360?A+", "+thickness/2+", "+endRadius+", 0, 1, 1, "+x4+", "+y4:L+", "+x4+", "+y4,A,innerRadius,innerRadius,0,arc<=180?0:1,trackClockwise?0:1,x3,y3,startRadius>0&&arc!==360?A+", "+startRadius+", "+thickness/2+", 0, 1, 1, "+x1+", "+y1:"",Z]}function setTextPath(_startAngle,_endAngle,arc,radius,centerX,centerY,trackClockwise){var startAngle=(0,_polarUtil.normaliseAngle)(_startAngle),endAngle=(0,_polarUtil.normaliseAngle)(_endAngle),_pointOnCircleFromCen5=(0,_polarUtil.pointOnCircleFromCenter)(centerX,centerY,radius,startAngle),x1=_pointOnCircleFromCen5.x,y1=_pointOnCircleFromCen5.y,_pointOnCircleFromCen6=(0,_polarUtil.pointOnCircleFromCenter)(centerX,centerY,radius,endAngle),x2=_pointOnCircleFromCen6.x,y2=_pointOnCircleFromCen6.y;x1=(0,_lib.toPrecision)(x1,4);y1=(0,_lib.toPrecision)(y1,4);x2=(0,_lib.toPrecision)(x2,4);y2=(0,_lib.toPrecision)(y2,4);return"M "+x1+" "+y1+" A "+radius+" "+radius+" 0 "+(arc<=180?0:1)+" "+(trackClockwise?1:0)+" "+x2+" "+y2+" Z"}var RadialTrack=function(_SmartRenderer){function RadialTrack(){return _SmartRenderer.apply(this,arguments)||this}(0,_inheritsLoose2.default)(RadialTrack,_SmartRenderer);var _proto=RadialTrack.prototype;_proto.getName=function getName(){return"RadialTrack"};_proto.getType=function getType(){return"dataset"};RadialTrack.getName=function getName(){return"RadialTrack"};RadialTrack.getType=function getType(){return"dataset"};_proto.__setDefaultConfig=function __setDefaultConfig(){this.config.startangle=90;this.config.endangle=180;this.config.trackpadding=0;this.config.trackmargin=6;this.config.trackstartradius="100%";this.config.trackendradius="100%";this.config.trackfillcolor="#0000ff";this.config.trackalpha=.4;this.config.trackborder="none";this.config.trackbordercolor="#000000";this.config.trackborderalpha=1;this.config.trackborderthickness=1;this.config.value=0};_proto.configureAttributes=function configureAttributes(dataObj){_SmartRenderer.prototype.configureAttributes.call(this,dataObj);this.config=_objectSpread(_objectSpread({},this.config),dataObj);if(!this.getFromEnv("chartConfig")){this.addToEnv("chartConfig",this.config)}this.createBaseComponent();if(dataObj.thickness){this.config.thickness=dataObj.thickness}if(dataObj.startangle||dataObj.startangle===0){this.config.startingAngle=dataObj.startangle}if(dataObj.endangle||dataObj.endangle===0){this.config.endingAngle=dataObj.endangle}if(this.config.trackborder==="none"){this.config.trackborderalpha=0;this.config.trackborderthickness=0}};_proto.createBaseComponent=function createBaseComponent(){var iapi=this,animationManager=iapi.getFromEnv("animationManager");if(!animationManager){animationManager=new _animationManager.default;iapi.addToEnv("animationManager",animationManager);animationManager.addToEnv("chart",iapi)}animationManager.configure();animationManager._setAnimDuration()};_proto.addPaperToEnv=function addPaperToEnv(){var container=this.getFromEnv("chart-container"),Raphael=(0,_index.getDep)("redraphael","plugin"),paper=new Raphael(container,this.getFromEnv("chartWidth"),this.getFromEnv("chartHeight"));paper.setHTMLClassName("fusioncharts-div");var animationManager=this.getFromEnv("animationManager");animationManager.addToEnv("paper",paper)};_proto.setNodePath=function setNodePath(box,thickness,config){this.config.thickness=thickness;this.config.outerRadius=box/2;this.config.innerRadius=this.config.outerRadius-this.config.thickness;this.config.trackstartradius=config.trackstartradius;this.config.trackendradius=config.trackendradius;this.manageSpace()};_proto.manageSpace=function manageSpace(){var chartConfig=this.getFromEnv("chartConfig"),config=this.config,radialBar=this.getLinkedParent(),canvasLeft=chartConfig.canvasLeft,canvasTop=chartConfig.canvasTop,availableWidth=chartConfig.canvasWidth,availableHeight=chartConfig.canvasHeight,centerX=canvasLeft+availableWidth/2,centerY=canvasTop+availableHeight/2,startAngle=(0,_polarUtil.changeAngleBase)(config.startingAngle),endingAngle=(0,_polarUtil.changeAngleBase)(config.endingAngle),endAngle=startAngle===endingAngle?endingAngle-.1:endingAngle,arc=(0,_polarUtil.findArc)(startAngle,endAngle),startRadius=parseInt(config.trackstartradius,10)/100*(config.thickness/2),endRadius=parseInt(config.trackendradius,10)/100*(config.thickness/2),labelFontSize=config.thickness-radialBar.config.labelpadding.top-radialBar.config.labelpadding.bottom,iconSize,numTicksBaseNumber=parseInt(arc/(radialBar.config.tickvaluefontsize/(2*Math.PI*radialBar.config.outerradius)*360)/2,10);labelFontSize=iconSize=labelFontSize<5?config.thickness:labelFontSize;iconSize=iconSize*parseInt(radialBar.config.iconscale,10)/100;if(iconSize>=Math.abs(config.outerRadius-config.innerRadius)){iconSize=Math.abs(config.outerRadius-config.innerRadius)}iconSize=iconSize<0?Math.abs(config.outerRadius-config.innerRadius):iconSize;config.numTicks=parseInt(config.numTicks,10);if(isNaN(config.numTicks)){config.numTicks=numTicksBaseNumber>10?10:numTicksBaseNumber}else{config.numTicks=config.numTicks>numTicksBaseNumber?numTicksBaseNumber:config.numTicks}iconSize=radialBar.config.iconposition==="end"?iconSize/2+10:iconSize+10;config.iconAngle=iconSize/(2*Math.PI*(config.outerRadius-config.thickness/2))*360;config.iconAngle=radialBar.config.showlabelicon?config.iconAngle:0;config.plotIdentifierAngle=radialBar.config.labeltext.toLowerCase().indexOf("$plotidentifier")>-1?(labelFontSize+1)/(2*Math.PI*(config.outerRadius-config.thickness))*360:0;config.paddingAngle=radialBar.config.labelpadding.left/(2*Math.PI*(config.outerRadius-config.thickness/2))*360;config.labelPath={start:{start:setTextPath(startAngle+config.paddingAngle+config.iconAngle+config.plotIdentifierAngle,endAngle,arc,config.outerRadius-config.thickness/2,centerX,centerY,config.thickness,startRadius,endRadius,true),end:setTextPath(startAngle+config.paddingAngle+config.plotIdentifierAngle,endAngle,arc,config.outerRadius-config.thickness/2,centerX,centerY,true)},end:{start:setTextPath(endAngle-config.paddingAngle-config.iconAngle-config.plotIdentifierAngle,startAngle,arc,config.outerRadius-config.thickness/2,centerX,centerY,false),end:setTextPath(endAngle-config.paddingAngle-config.plotIdentifierAngle,startAngle,arc,config.outerRadius-config.thickness/2,centerX,centerY,false)}};config.arcLength=arc/360*(2*Math.PI*(config.outerRadius-config.thickness/2));config.path_d=setPath(startAngle,endAngle,arc,config.outerRadius,config.innerRadius,centerX,centerY,config.thickness,startRadius,endRadius,true)};_proto.allocatePosition=function allocatePosition(){return false};_proto.checkInvalidData=function checkInvalidData(){return false};_proto.checkInvalidSpecificData=function checkInvalidSpecificData(){return false};_proto.draw=function draw(){this.addGraphicalElement({el:"path",attr:{path:this.config.path_d,fill:this.config.trackfillcolor,stroke:this.config.trackbordercolor,"stroke-width":this.config.trackborderthickness,"stroke-opacity":this.config.trackborderalpha,"stroke-dasharray":this.config.trackborder==="dashed"?5:_lib.UNDEF,"fill-opacity":this.config.trackalpha},container:{id:"node-container",isParent:true},label:"track",component:this});if(this.config.isLast){this.drawTicks()}};_proto.drawTicks=function drawTicks(){var _this=this;var chartConfig=this.getFromEnv("chartConfig"),canvasLeft=chartConfig.canvasLeft,canvasTop=chartConfig.canvasTop,availableWidth=chartConfig.canvasWidth,availableHeight=chartConfig.canvasHeight,centerX=canvasLeft+availableWidth/2,centerY=canvasTop+availableHeight/2,startAngle=(0,_polarUtil.changeAngleBase)(this.config.startingAngle),endingAngle=(0,_polarUtil.changeAngleBase)(this.config.endingAngle),trackArc=(0,_polarUtil.findArc)(startAngle,startAngle===endingAngle?endingAngle-.1:endingAngle),diff=trackArc/this.config.numTicks,percentDiff=100/this.config.numTicks,start,end,finalAngle,labelstart,tickValueRadius,labelStartArr=[];if(startAngle===endingAngle){this.config.numTicks-=1}for(var i=0;i<=this.config.numTicks;i++){finalAngle=(0,_polarUtil.normaliseAngle)(startAngle)+i*diff;tickValueRadius=this.config.outerRadius+this.config.tickMarkLength+this.config.tickvaluegap;labelstart=(0,_polarUtil.pointOnCircleFromCenter)(centerX,centerY,tickValueRadius,finalAngle);if(this.config.showtickvalues){labelStartArr.push(labelstart)}end=(0,_polarUtil.pointOnCircleFromCenter)(centerX,centerY,this.config.outerRadius+this.config.tickMarkLength,finalAngle);start=(0,_polarUtil.pointOnCircleFromCenter)(centerX,centerY,this.config.outerRadius,finalAngle);if(this.config.showtickmarks&&this.config.showticks){this.addGraphicalElement({el:"path",attr:{path:M+" "+start.x+" "+start.y+" "+L+" "+end.x+" "+end.y+" "+Z,stroke:this.config.tickmarkcolor,"stroke-width":this.config.tickmarkthickness/2,"stroke-opacity":this.config.tickalpha},container:{id:"ticks-container",isParent:true},label:"tick",component:this})}}if(this.config.showtickvalues&&this.config.showticks){labelStartArr.forEach((function(labelPos,index){finalAngle=(0,_polarUtil.changeAngleBase)((0,_polarUtil.normaliseAngle)(startAngle)+index*diff);finalAngle=finalAngle<0?360+finalAngle:finalAngle;finalAngle=finalAngle%360;_this.addGraphicalElement({el:"text",attr:{text:Math.round(index*percentDiff)+PERCENT_STR,x:labelPos.x,y:labelPos.y,fill:_this.config.tickvaluefontcolor,"font-family":_this.config.tickvaluelabelfont,"font-size":_this.computeFontSize(_this.config.tickvaluefontsizeWithUnit),opacity:_this.config.tickvaluealpha,"text-anchor":finalAngle>180?"end":"start"},container:{id:"ticks-container",isParent:true},label:"label",component:_this})}))}};return RadialTrack}(_componentInterface.SmartRenderer);var _default=exports.default=RadialTrack;