@fusioncharts/fusiontime/src/_internal/components/time-navigator/index.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 _componentInterface=require("@fusioncharts/core/src/component-interface");var _canvas=_interopRequireDefault(require("../../components/canvas"));var _line=_interopRequireDefault(require("../../components/dataset/line"));var _timeNavigatorAxis=_interopRequireDefault(require("../../factories/time-navigator-axis"));var _scrollbarFactory=_interopRequireDefault(require("../../factories/scrollbar-factory"));var _timeNavigatorBrushFactory=_interopRequireDefault(require("../../factories/time-navigator-brush-factory"));var _timeConverter=_interopRequireDefault(require("@fusioncharts/utils/src/time-converter"));var _lib=require("@fusioncharts/core/src/lib");var DEFAULT_GRID_STYLE={stroke:"#F1F1F1","stroke-width":"1","stroke-opacity":"1"},timeNavCanvas=function timeNavCanvas(timeNav){var config=timeNav.config,styleDef=timeNav.getFromEnv("getStyleDef"),chartAttrs=timeNav.getFromEnv("chart-attrib"),xStyle=config.xConfigs[0].style?config.xConfigs[0].style:{},gridLineStyle=Object.assign({},DEFAULT_GRID_STYLE,styleDef(xStyle["grid-line"]));timeNav.attachChild(_canvas.default,"canvas").configure({xConfigs:config.xConfigs,yConfigs:config.yConfigs,plotConfigs:config.plotConfigs,tableMap:config.tableMap,enableGridLines:true,gridBandSupported:false,gridLineDirection:"vertical",enableMarkers:false,enableReferenceLine:false,enableReferenceZone:false,leftBorder:config.border.left,bottomBorder:config.border.bottom,topBorder:config.border.top,rightBorder:config.border.right,enableTimeMarkers:false,styleGridLines:0,includeLegend:0,enableMouseTracking:0,isContext:true,dataTable:config.dataTable,gridLineStyle:gridLineStyle,legendInteracted:config.legendInteracted,canvasStyle:styleDef(chartAttrs.style&&chartAttrs.style.canvas)})},extractScales=function extractScales(cfg){return cfg.scale};var TimeNavigator=function(_SmartRenderer){function TimeNavigator(){var _this;_this=_SmartRenderer.call(this)||this;_this._dimensions={};_this._translation={};_this._scrollbarConfig={};_this.registerFactory("timeNavigatorAxis",_timeNavigatorAxis.default);_this.registerFactory("scrollbar",_scrollbarFactory.default);_this.registerFactory("brush",_timeNavigatorBrushFactory.default);_this.registerFactory("canvas",timeNavCanvas);return _this}(0,_inheritsLoose2.default)(TimeNavigator,_SmartRenderer);var _proto=TimeNavigator.prototype;_proto.__setDefaultConfig=function __setDefaultConfig(obj){if(obj===void 0){obj={}}_SmartRenderer.prototype.__setDefaultConfig.call(this,obj);var config=this.config;config.startX=0;config.startY=0;config.scrollbarHeight=18;config.scrollbarStart=-17.5;config.scrollbarButtonWidth=17;config.yScalePadding=20;config.formatter=_timeConverter.default.formatter("%b %d, %Y");config.border={left:1,right:1,top:1,bottom:0};config.labels={}};_proto.setContextScaleLimit=function setContextScaleLimit(){var timeNav=this,contextBin=timeNav.getFromEnv("contextBins")[0];timeNav.config.contextScale.setBinMin(contextBin.getBinMin()).setRangeThreshold(contextBin.getRangeThreshold()).setDomain(timeNav.getFromEnv("chart").getContextLimit())};_proto.setDimension=function setDimension(dim){var _this2=this;if(dim===void 0){dim={}}var timeNav=this,config=timeNav.config,canvas=timeNav.getChildren("canvas")[0],brush=timeNav.getChildren("brush")[0],border=config.border;timeNav._dimensions.width=(0,_lib.pluckNumber)(dim.width,timeNav._dimensions.width);timeNav._dimensions.height=(0,_lib.pluckNumber)(dim.height,timeNav._dimensions.height);config.xConfigs.map(extractScales).forEach((function(scale){scale.setRange([border.left,_this2._dimensions.width-(border.left+border.right)/2])}));config.contextScale.setRange(config.xConfigs[0].scale.getRange());brush.setBrushValue(timeNav.getFromEnv("chart").getFocusLimit());var labelSpace=brush.getLabelSpace();canvas.setDimension({left:config.startX,top:labelSpace,width:this._dimensions.width,height:Math.max(this._dimensions.height-labelSpace-config.scrollbarHeight,0)});timeNav.getChildren("timeAxis").forEach((function(axis){axis.setTranslation(0,labelSpace);axis.placeAxis()}));config.yConfigs.map(extractScales).forEach((function(scale){return scale.setRange([_this2._dimensions.height-config.scrollbarHeight-border.top-border.bottom,labelSpace])}));timeNav.setChildDimension()};_proto.getPosition=function getPosition(){return{x:this.config._translateX,y:this.config._translateY}};_proto.setChildDimension=function setChildDimension(){var timeNav=this,config=timeNav.config,brush=timeNav.getChildren("brush")[0],labelSpace=brush.getLabelSpace(),scrollbar=timeNav.getChildren("scrollbar")[0],contextScale=config.contextScale,contextRange=contextScale.getRange(),focusDomain=timeNav.getFromEnv("chart").getFocusLimit(),focusRange=focusDomain.map((function(val){return contextScale.getRangeValue(val)}));brush.setMaxBrushDimensions({x:contextRange[0],y:labelSpace,width:contextRange[1]-contextRange[0],height:this._dimensions.height-labelSpace-config.scrollbarHeight});brush.setCurrentBrushDimensions({x:focusRange[0],y:labelSpace,width:focusRange[1]-focusRange[0],height:this._dimensions.height-labelSpace-config.scrollbarHeight});scrollbar.setDimension({x:config.scrollbarStart,y:this._dimensions.height-config.scrollbarHeight,height:config.scrollbarHeight,width:this._dimensions.width+2*config.scrollbarButtonWidth+1});timeNav.setScrollbarConfig("width",this._dimensions.width+2*config.scrollbarButtonWidth+1);scrollbar.config.scrollRatio=timeNav.getScrollRatio();timeNav.setScrollbarConfig("scrollRatio",scrollbar.config.scrollRatio);scrollbar.config.scrollPosition=timeNav.getScrollPosition();timeNav.setScrollbarConfig("scrollPosition",scrollbar.config.scrollPosition);timeNav.setScrollbarConfig("height",config.scrollbarHeight)};_proto.getDimension=function getDimension(){return this._dimensions};_proto.configureAttributes=function configureAttributes(obj){if(obj===void 0){obj={}}_SmartRenderer.prototype.configureAttributes.call(this,obj);var timeNav=this,timeNavConfig=timeNav.config;Object.assign(timeNavConfig,obj);timeNav.setContextScaleLimit();timeNav.addToEnv("timeNavigator",timeNav);timeNav.addToEnv("timeNavigatorConfig",timeNavConfig)};_proto.attachHandlers=function attachHandlers(){var timeNav=this,brush,leftLabel,rightLabel;timeNav.addEventListener("fc-mouseover",timeNav.mouseoverHandler||(timeNav.mouseoverHandler=function(){clearTimeout(timeNav.mouseoutTimer);brush=this.getChildren("brush")[0];leftLabel=brush.getChildren("leftLabel")[0];rightLabel=brush.getChildren("rightLabel")[0];if(!leftLabel.config.showLabel&&!rightLabel.config.showLabel){leftLabel.setData({showLabel:true},true);rightLabel.setData({showLabel:true},true)}}));timeNav.addEventListener("fc-mouseup",timeNav.mouseupHandler||(timeNav.mouseupHandler=function(){brush.config.pointerReleasedOnParent=true}));timeNav.addEventListener("fc-mouseout",timeNav.mouseoutHandler||(timeNav.mouseoutHandler=function(){if(!timeNav.config.labelsGettingDragged){timeNav.mouseoutTimer=setTimeout((function(){leftLabel.setData({showLabel:false},true);rightLabel.setData({showLabel:false},true)}),20)}}))};_proto.draw=function draw(){var timeNav=this;timeNav.addGraphicalElement({el:"group",container:{id:"tropo",label:"group",isParent:true},component:timeNav,label:"group",attr:{name:"timenav-tropo",transform:timeNav.config.translate},id:"tropo"});timeNav.addGraphicalElement({el:"group",container:{id:"strato",label:"group",isParent:true},component:timeNav,label:"group",attr:{name:"timenav-strato",transform:timeNav.config.translate},id:"strato"});timeNav.addGraphicalElement({el:"group",container:{id:"meso",label:"group",isParent:true},component:timeNav,label:"group",attr:{name:"timenav-meso",transform:timeNav.config.translate},id:"meso"});timeNav.addGraphicalElement({el:"group",container:{id:"thermo",label:"group",isParent:true},component:timeNav,label:"group",attr:{name:"timenav-thermo",transform:timeNav.config.translate},id:"thermo"});timeNav.addGraphicalElement({el:"group",container:{id:"exo",label:"group",isParent:true},component:timeNav,label:"group",attr:{name:"timenav-exo",transform:timeNav.config.translate},id:"exo"});timeNav.addGraphicalElement({el:"group",attr:{name:"time-axis-group"},id:"axisTopGroup",label:"group",container:{id:"strato",label:"group"},component:timeNav},true);timeNav.addGraphicalElement({el:"group",attr:{name:"scrollbar-group"},id:"scrollbarContainer",label:"scrollbar",container:{id:"thermo",label:"group"},component:timeNav},true)};_proto.setScrollbarConfig=function setScrollbarConfig(conf,value){this._scrollbarConfig[conf]=value};_proto.getScrollbarConfig=function getScrollbarConfig(conf){return conf?this._scrollbarConfig[conf]:this._scrollbarConfig};_proto.validateDomain=function validateDomain(values,direction,obj){var timeNav=this,startPx=values[0],endPx=values[1],scale=timeNav.config.contextScale,range=scale.getRange(),chart=timeNav.getFromEnv("chart");if(startPx>endPx){var _ref=[endPx,startPx];startPx=_ref[0];endPx=_ref[1]}startPx=_lib.clampNumber.apply(void 0,[startPx].concat(range));endPx=_lib.clampNumber.apply(void 0,[endPx].concat(range));chart.setPixelLimit([startPx,endPx],scale,[].concat(direction),{name:obj.eventName,eventArgs:obj.eventArgs,options:obj.eventArgs})};_proto.getScrollRatio=function getScrollRatio(){var timeNav=this,scrollbarConf=timeNav.getChildren("scrollbar")[0].config,_timeNav$getChildren$=timeNav.getChildren("canvas")[0].config,leftBorder=_timeNav$getChildren$.leftBorder,rightBorder=_timeNav$getChildren$.rightBorder,width=scrollbarConf.width,height=scrollbarConf.height,scrollButtonsTotalWidth=2*Math.min(height,width*.5),brush=timeNav.getChildren("brush")[0],borderToWidthRatio=(leftBorder+rightBorder)/width,selectionWidth=brush.getCurrentBrushDimensions().width;var scrollRatio=(selectionWidth+1)/Math.max(.001,width-scrollButtonsTotalWidth);if(scrollRatio>=1-borderToWidthRatio){return 1}return scrollRatio};_proto.getScrollPosition=function getScrollPosition(){var timeNav=this,scrollbarConf=timeNav.getChildren("scrollbar")[0].config,width=scrollbarConf.width,height=scrollbarConf.height,scrollButtonsTotalWidth=2*Math.min(height,width*.5),brush=timeNav.getChildren("brush")[0],selectionStart=brush.getCurrentBrushDimensions().x,selectionWidth=brush.getCurrentBrushDimensions().width,scrollRatio=timeNav.getScrollbarConfig("scrollRatio"),anchorWidth=scrollRatio*(width-scrollButtonsTotalWidth),scrollPositionRange=width-(scrollButtonsTotalWidth+anchorWidth),rangeMinPx=scrollButtonsTotalWidth/2+anchorWidth/2-timeNav.config.scrollbarButtonWidth;return(selectionStart+selectionWidth/2-rangeMinPx)/scrollPositionRange};_proto.getDSdef=function getDSdef(){return _line.default};_proto.getName=function getName(){return"TimeNavigator"};return TimeNavigator}(_componentInterface.SmartRenderer);var _default=exports.default=TimeNavigator;