@fusioncharts/fusiontime/src/_internal/components/canvas.js

FusionCharts JavaScript time-series charting framework

"use strict";var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule=true;exports.default=void 0;var _inheritsLoose2=_interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _smartRenderer=_interopRequireDefault(require("@fusioncharts/core/src/component-interface/smart-renderer"));var _libGraphics=require("@fusioncharts/core/src/lib/lib-graphics");var _lib=require("@fusioncharts/core/src/lib");var _timeMarkerFactory=_interopRequireDefault(require("../factories/time-marker-factory"));var _referenceLineFactory=_interopRequireDefault(require("../factories/reference-line-factory"));var _referenceZoneFactory=_interopRequireDefault(require("../factories/reference-zone-factory"));var _gridLineFactory=_interopRequireDefault(require("../factories/grid-line-factory"));var _mouseTrackerFactory=_interopRequireDefault(require("../factories/mouse-tracker-factory"));var _tooltipAndHoverFactory=_interopRequireDefault(require("../factories/tooltip-and-hover-factory"));var _wheelFactory=_interopRequireDefault(require("../factories/interactions/wheel-factory"));var _dbTapFactory=_interopRequireDefault(require("../factories/interactions/db-tap-factory"));var _swipeFactory=_interopRequireDefault(require("../factories/interactions/swipe-factory"));var _pinchZoomFactory=_interopRequireDefault(require("../factories/interactions/pinch-zoom-factory"));var _datasetFactory=_interopRequireDefault(require("../factories/dataset-factory"));var _verticalCrosslineFactory=_interopRequireDefault(require("../factories/vertical-crossline-factory"));var _horizontalCrosslineFactory=_interopRequireDefault(require("../factories/horizontal-crossline-factory"));var _gridBandFactory=_interopRequireDefault(require("../factories/grid-band-factory"));var M="M",H="H",V="V",HORIZONTAL="horizontal",DEFAULT_BORDER_WIDTH=2,BIN_SKIP_LINE_GAP=2,BIN_SKIP_LINE_TRANSX=4,BIN_SKIP_LINE_TRANSY=6;var createBinSkipLine=function createBinSkipLine(xPos,yPos){var firstLineX=xPos-BIN_SKIP_LINE_GAP,secondLineX=xPos+BIN_SKIP_LINE_GAP,transX=BIN_SKIP_LINE_TRANSX,transY=BIN_SKIP_LINE_TRANSY;return["\n    M "+(firstLineX+transX)+", "+(yPos-transY)+" L "+(firstLineX-transX)+", "+(yPos+transY)+"\n    M "+(secondLineX+transX)+", "+(yPos-transY)+" L "+(secondLineX-transX)+", "+(yPos+transY)+"\n    ","\n    M "+(xPos+transX)+", "+(yPos-transY)+" L "+(xPos-transX)+", "+(yPos+transY)+"\n    "]};var Canvas=function(_SmartRenderer){function Canvas(){var _this;_this=_SmartRenderer.call(this)||this;_this.registerFactory("dataset",_datasetFactory.default);_this.registerFactory("gridLine",_gridLineFactory.default);_this.registerFactory("gridBand",_gridBandFactory.default);_this.registerFactory("timeMarker",_timeMarkerFactory.default);_this.registerFactory("referenceLine",_referenceLineFactory.default);_this.registerFactory("referenceZone",_referenceZoneFactory.default,["mouseTracker"]);_this.registerFactory("mouseTracker",_mouseTrackerFactory.default);_this.registerFactory("tooltip",_tooltipAndHoverFactory.default,["mouseTracker"]);_this.registerFactory("wheel",_wheelFactory.default);_this.registerFactory("dbTap",_dbTapFactory.default);_this.registerFactory("swipe",_swipeFactory.default);_this.registerFactory("pinchZoom",_pinchZoomFactory.default);_this.registerFactory("verticalCrossline",_verticalCrosslineFactory.default,["dataset"]);_this.registerFactory("horizontalCrossline",_horizontalCrosslineFactory.default,["dataset"]);return _this}(0,_inheritsLoose2.default)(Canvas,_SmartRenderer);var _proto=Canvas.prototype;_proto.__setDefaultConfig=function __setDefaultConfig(){_SmartRenderer.prototype.__setDefaultConfig.call(this);var config=this.config;config.padding={left:0,right:0,top:0,bottom:0};config.multiSeriesDatasetMap={};config.enableMouseTracking=1;config.enableMarkers=1;config.enableTimeMarkers=1;config.enableReferenceLine=1;config.enableReferenceZone=1;config.enableInteraction=0;config.includeLegend=1;config.gridLineDirection=HORIZONTAL;config.styleGridLines=1};_proto.getName=function getName(){return"canvas"};_proto.highlightDataPoints=function highlightDataPoints(hovered,refZoneScale,refZoneRange){var canvas=this,allDataSets=canvas.getChildren("dataset"),highlightIndices,mouseTrackerComp=canvas.getChildren("mouseTracker")[0],filteredDatasets=allDataSets.filter((function(dataset){return dataset.getFromEnv("yScale")===refZoneScale}));filteredDatasets.forEach((function(dataset){highlightIndices=dataset.getHighlightedIndices(refZoneRange);if(highlightIndices.length){if(hovered){mouseTrackerComp.deactivate();dataset.setHoverInEffect(highlightIndices)}else{mouseTrackerComp.activate();dataset.setHoverOutEffect(highlightIndices)}}}))};_proto.getType=function getType(){return"canvas"};_proto.configureAttributes=function configureAttributes(overrideConfig){if(overrideConfig===void 0){overrideConfig={}}var config=this.config,borderConfig=config.borderConfig||(config.borderConfig={});Object.assign(config,overrideConfig);var canvasStyle=config.canvasStyle;["leftBorder","topBorder","rightBorder","bottomBorder"].forEach((function(border){borderConfig[border]=overrideConfig[border]?(0,_lib.pluckNumber)(canvasStyle["stroke-width"],DEFAULT_BORDER_WIDTH):borderConfig[border]||0}));config.canvasBorderColor=(0,_libGraphics.convertColor)((0,_lib.pluck)(canvasStyle.stroke,"D6D6D6"),(0,_lib.pluckNumber)(canvasStyle["stroke-opacity"]*100,100));config.canvasBGColor=(0,_libGraphics.convertColor)((0,_lib.pluck)(canvasStyle.fill,"ffffff"),(0,_lib.pluckNumber)(canvasStyle["fill-opacity"]*100,100));config.opacity=canvasStyle.opacity;config.showGridBand=config.gridBandSupported&&(0,_lib.pluckNumber)(config.yConfigs[0].showgridband,0);config.gridBandStyle=config.yConfigs[0].style?config.yConfigs[0].style["grid-band"]:{}};_proto.setDimension=function setDimension(dim){if(dim===void 0){dim={}}var canvas=this,config=canvas.config,borderConfig=config.borderConfig,chartConfig=canvas.getFromEnv("chartConfig");config.canvasTop=dim.top||0;config.canvasLeft=dim.left||0;config.canvasWidth=dim.width||chartConfig.origRenderWidth;config.canvasHeight=dim.height||chartConfig.origRenderHeight;config.canvasBGTop=config.canvasTop+borderConfig.topBorder;config.canvasBGLeft=config.canvasLeft+borderConfig.leftBorder;config.canvasBGWidth=Math.max(0,config.canvasWidth-borderConfig.rightBorder-borderConfig.leftBorder);config.canvasBGHeight=Math.max(0,config.canvasHeight-borderConfig.bottomBorder)};_proto.getDimension=function getDimension(){var config=this.config;return{top:config.canvasTop,left:config.canvasLeft,width:config.canvasWidth,height:config.canvasHeight}};_proto.isWithinCanvas=function isWithinCanvas(xArg,yArg){var canvas=this,x=xArg,y=yArg,config=canvas.config,left=config&&config.canvasBGLeft,right=Math.floor(left+config&&config.canvasBGWidth),top=config&&config.canvasBGTop,padding=config&&config.padding,bottom=Math.floor(top+config&&config.canvasBGHeight),translationObj=canvas.getTranslation();x=x-(translationObj.x||0)+(padding&&padding.left||0);y=y-(translationObj.y||0)+(padding&&padding.top||0);return x>left&&x<right&&y>top&&y<bottom};_proto.draw=function draw(){var canvas=this;canvas._createGroup();canvas._drawCanvas();!canvas.config.isContext&&canvas._setTooltipBounding()};_proto._setTooltipBounding=function _setTooltipBounding(){var canvas=this,config=canvas.config,translate=canvas.getTranslation(),tooltipController=canvas.getFromEnv("toolTipController"),left=config.canvasLeft+(translate.x||0),top=config.canvasTop+(translate.y||0);tooltipController._setRelativePosition({left:left,right:left+config.canvasWidth,top:top,bottom:top+config.canvasHeight,canvas:this})};_proto._drawCanvas=function _drawCanvas(){var canvas=this,config=canvas.config,borderConfig=config.borderConfig,canvasTop=config.canvasTop+borderConfig.topBorder/2,canvasLeft=config.canvasLeft+borderConfig.leftBorder/2,canvasWidth=config.canvasWidth-(borderConfig.rightBorder/2+borderConfig.leftBorder/2),canvasHeight=config.canvasHeight-(borderConfig.bottomBorder/2+borderConfig.topBorder/2),canvasPaths={leftBorder:[M,canvasLeft,canvasTop,V,canvasTop+canvasHeight],rightBorder:[M,canvasLeft+canvasWidth,canvasTop,V,canvasTop+canvasHeight],topBorder:[M,canvasLeft,canvasTop,H,canvasLeft+canvasWidth],bottomBorder:[M,canvasLeft,canvasTop+canvasHeight,H,canvasLeft+canvasWidth]},border,bottomBorderPaths;canvas.addGraphicalElement({el:"rect",component:canvas,label:"canvas",container:{id:"tropo",label:"group",isParent:false},attr:{y:config.canvasBGTop,x:config.canvasBGLeft,width:config.canvasBGWidth,height:config.canvasBGHeight,fill:config.canvasBGColor,"stroke-width":0,stroke:"none",opacity:config.opacity},id:"background"},true);for(border in borderConfig){if(border==="bottomBorder"){bottomBorderPaths=this.getBottomBorderPaths();bottomBorderPaths.normalLine.length&&canvas.addGraphicalElement({el:"path",component:canvas,label:"canvas",container:{id:"tropo",label:"group",isParent:false},attr:{path:bottomBorderPaths.normalLine.join(""),stroke:config.canvasBorderColor,"stroke-width":borderConfig[border],opacity:config.opacity},id:border+"-normal"},true);bottomBorderPaths.dashedLine.length&&canvas.addGraphicalElement({el:"path",component:canvas,label:"canvas",container:{id:"tropo",label:"group",isParent:false},attr:{path:bottomBorderPaths.dashedLine.join(""),stroke:config.canvasBorderColor,"stroke-width":borderConfig[border],opacity:config.opacity,"stroke-dasharray":[3,4]},id:border+"-dashed"},true);if(bottomBorderPaths.clippedLine.length){canvas.addGraphicalElement({el:"path",component:canvas,label:"canvas",container:{id:"tropo",label:"group",isParent:false},attr:{path:bottomBorderPaths.clippedLine.join(""),stroke:config.canvasBorderColor,"stroke-width":borderConfig[border],opacity:config.opacity},id:border+"-clipped"},true);canvas.addGraphicalElement({el:"path",component:canvas,label:"canvas",container:{id:"tropo",label:"group",isParent:false},attr:{path:bottomBorderPaths.clippedLineMid.join(""),stroke:"#ffffff","stroke-width":borderConfig[border],opacity:config.opacity},id:border+"-clipped"},true)}}else{canvas.addGraphicalElement({el:"path",component:canvas,label:"canvas",container:{id:"tropo",label:"group",isParent:false},attr:{path:canvasPaths[border],stroke:config.canvasBorderColor,"stroke-width":borderConfig[border],opacity:config.opacity},id:border},true)}}};_proto.getBottomBorderPaths=function getBottomBorderPaths(){var xScale=this.getFromEnv("focusScalesX")[0],config=this.config,borderConfig=config.borderConfig,bins=xScale.bins,domain=xScale.getDomain(),range=xScale.getRange(),showClippingCue=(0,_lib.pluckNumber)(config.xConfigs[0].showclippingcue,1),canvasTop=config.canvasTop+borderConfig.topBorder/2,canvasHeight=config.canvasHeight-(borderConfig.bottomBorder/2+borderConfig.topBorder/2),j,len=bins.length,lastNonClippedBinIndex,lastClippedBin,xPos,yVal=canvasTop+canvasHeight,pathStr,binSkipLines,normalLine=[],dashedLine=[],clippedLine=[],clippedLineMid=[];for(j=0,len=bins.length;j<len;j++){if(bins[j].end>+domain[0]&&bins[j].start<+domain[1]){pathStr="M "+xScale.getRangeValue(Math.max(+domain[0],+bins[j].start))+", "+yVal+" \n          L "+xScale.getRangeValue(Math.min(+bins[j].end,+domain[1]))+", "+yVal;if(!bins[j].clipType||!showClippingCue){normalLine.push(pathStr);lastNonClippedBinIndex=j}else if(bins[j].clipType===1){dashedLine.push(pathStr);lastNonClippedBinIndex=j}}if(bins[j].clipType===2&&showClippingCue){if(lastClippedBin===j-1){lastClippedBin=j;continue}if(lastNonClippedBinIndex){xPos=(xScale.getRangeValue(bins[lastNonClippedBinIndex].start)+xScale.getRangeValue(bins[j].end))/2}else{xPos=xScale.getRangeValue(bins[j].end)}if(xPos<range[0]+BIN_SKIP_LINE_GAP||xPos>range[1]-BIN_SKIP_LINE_GAP){continue}binSkipLines=createBinSkipLine(xPos,yVal);clippedLine.push(binSkipLines[0]);clippedLineMid.push(binSkipLines[1]);lastClippedBin=j}}return{normalLine:normalLine,dashedLine:dashedLine,clippedLine:clippedLine,clippedLineMid:clippedLineMid}};_proto._createGroup=function _createGroup(){var canvas=this,config=canvas.config,padding=config.padding,canvasLeft=config.canvasBGLeft-padding.left,canvasTop=config.canvasBGTop-padding.top,canvasWidth=config.canvasBGWidth,canvasHeight=config.canvasBGHeight,clipPath=["M"+canvasLeft+","+canvasTop,"L"+(canvasLeft+canvasWidth)+","+canvasTop,"L"+(canvasLeft+canvasWidth)+","+(canvasTop+canvasHeight),"L"+canvasLeft+","+(canvasTop+canvasHeight)+"Z"];canvas.addGraphicalElement({el:"group",container:{id:"tropo",label:"group",isParent:true},component:canvas,label:"group",attr:{name:"canvas-tropo",transform:config.canvasTranslation},id:"tropo"});canvas.addGraphicalElement({el:"group",container:{id:"strato",label:"group",isParent:true},component:canvas,label:"strato",attr:{name:"canvas-strato",transform:config.translate},id:"strato"});canvas.addGraphicalElement({el:"group",container:{id:"meso",label:"group",isParent:true},component:canvas,label:"meso",attr:{name:"canvas-meso",transform:config.translate,"clip-path":clipPath},id:"meso"});canvas.addGraphicalElement({el:"group",container:{id:"thermo",label:"group",isParent:true},component:canvas,label:"thermo",attr:{name:"canvas-thermo",transform:config.translate},id:"thermo"});canvas.addGraphicalElement({el:"group",container:{id:"exo",label:"group",isParent:true},component:canvas,label:"exo",attr:{name:"canvas-exo",transform:config.translate},id:"exo"});canvas.addToEnv("dsGroupclipPath",clipPath)};_proto.setTranslation=function setTranslation(x,y){var config=this.config,borderConfig=config.borderConfig,padding=config.padding;config._translateX=x+borderConfig.leftBorder;config._translateY=y+borderConfig.topBorder;config.canvasTranslation="t"+config._translateX+","+config._translateY;config._translateX+=padding.left;config._translateY+=padding.top;config.translate="t"+config._translateX+","+config._translateY};_proto.getCanvasBorder=function getCanvasBorder(){return this.config.borderConfig};_proto.setPadding=function setPadding(padding){if(padding===void 0){padding={}}Object.assign(this.config.padding,padding)};return Canvas}(_smartRenderer.default);var _default=exports.default=Canvas;