quoslibero/vendors/fc-timeseries/src/_internal/components/custom-range-selector/time-box.js

FusionCharts JavaScript charting framework

import{SmartRenderer}from'../../../../../fc-core/src/component-interface';import{PXSTRING,isIE11,isFirefox}from'../../../../../fc-core/src/lib';const SEMICOLON=':',DEFAULT_PADDING=10,DEFAULT_INPUT_BOX_WIDTH=isIE11?38:32,ARROW_SVG='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.95 10"><defs><style>.cls-2 {fill: #444;}</style></defs><polygon class="cls-2" points="1.41 4.67 2.48 3.18 3.54 4.67 1.41 4.67" /><polygon class="cls-2" points="3.54 5.33 2.48 6.82 1.41 5.33 3.54 5.33" /></svg>',SELECT_BG_IMAGE='url(data:image/svg+xml;base64,'+btoa('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4.95 10"><defs><style>.cls-2 {fill: #444;}</style></defs><polygon class="cls-2" points="1.41 4.67 2.48 3.18 3.54 4.67 1.41 4.67" /><polygon class="cls-2" points="3.54 5.33 2.48 6.82 1.41 5.33 3.54 5.33" /></svg>')+') no-repeat 100% 100%',formatDate=a=>(10>a?'0'+a:a)+'',getOptionsString=(a,b=-1)=>{let c,d='';for(c=0;c<=a;c++)d+=c===b?`<option value="${formatDate(c)}" selected>${formatDate(c)}</option>`:`<option value="${formatDate(c)}">${formatDate(c)}</option>`;return d},getMultiplier=a=>21>a?2:31>a?1.67:51>a?1.5:1.25;class TimeBox extends SmartRenderer{__setDefaultConfig(){let a=this.config;a.enabled=!0,a.label='Time: ',a._labelStyle={"font-size":'12px',"font-weight":'normal',"font-style":'normal',color:'#5f5f5f'},a._selectStyle={"font-size":'12px',border:'0',outline:'1px solid #efefef',"outline-offset":'-1px',color:'#5f5f5f',width:DEFAULT_INPUT_BOX_WIDTH+PXSTRING,"padding-left":isIE11||isFirefox?'0px':'5px',"padding-right":isIE11||isFirefox?'0px':'5px',"padding-top":'5px',"padding-bottom":'5px',background:SELECT_BG_IMAGE,"background-color":'#FFFFFF',"-webkit-appearance":'none',"-moz-appearance":'none',"-o-appearance":'none',"border-radius":'0px',appearance:'none'},isIE11&&delete a._selectStyle.background}configureAttributes(a={}){let b=this,c=b.config,d=b.getFromEnv('getStyleDef'),e=b.getFromEnv('baseTextStyle');Object.keys(a).forEach(b=>c[b]=a[b]),c._finalLabelStyle=Object.assign({},c._labelStyle,e,d(c.labelStyle)),c._finalSelectStyle=Object.assign({},c._selectStyle,e,d(c.selectStyle)),delete c._finalSelectStyle['line-height']}getDimension(){var a=Math.max;let b,c,d=this,e=d.config,f=d.getFromEnv('fontParser'),g=f(e._finalSelectStyle['font-size']),h=d.getFromEnv('smartLabel'),i=getMultiplier(g);return h.setStyle(e._finalLabelStyle),b=e.labelDim=h.getOriSize(e.label),c=h.getOriSize(':').width,e.inputBoxWidth=a(f(e._finalSelectStyle.width),2.6*g),e.inputBoxHeight=g*i,e.spacingMultiplier=30<g?2:1,e._finalSelectStyle.width=e.inputBoxWidth+PXSTRING,{width:b.width+3*c+3*e.inputBoxWidth+20,height:a(b.height,e.inputBoxHeight)}}setTranslation(a,b){this.config.position={x:a,y:b}}getTime(){let a,b,c,d=this;return a=d.getGraphicalElement('hour-box','hour-box'),b=d.getGraphicalElement('minute-box','minute-box'),c=d.getGraphicalElement('second-box','second-box'),{hours:+a.element.value,minutes:+b.element.value,seconds:+c.element.value}}draw(){let a=this,b=a.config,c=b.position,d=b.labelDim,e=b.time||{},f=c.x,g=Math.abs(d.height-b.inputBoxHeight)/2;a.addGraphicalElement({el:'html',attr:{x:f,y:c.y,type:'label',text:b.label},component:a,css:b._finalLabelStyle,container:{id:'box-container',label:'box-container',isParent:!0},label:'time-label',id:'time-label'}),f+=d.width+5,a.addGraphicalElement({el:'html',attr:{x:f,y:c.y-g,type:'select',innerHTML:getOptionsString(23,e.hours),class:'fc__select__time'},component:a,css:b._finalSelectStyle,container:{id:'box-container',label:'box-container',isParent:!0},label:'hour-box',id:'hour-box'}),f+=b.inputBoxWidth,a.addGraphicalElement({el:'html',attr:{x:f+3,y:c.y,type:'label',text:SEMICOLON},component:a,css:b._finalLabelStyle,container:{id:'box-container',label:'box-container',isParent:!0},label:'semicolon-minute',id:'semicolon-minute'}),f+=b.spacingMultiplier*DEFAULT_PADDING,a.addGraphicalElement({el:'html',attr:{x:f,y:c.y-g,type:'select',innerHTML:getOptionsString(59,e.minutes),class:'fc__select__time'},component:a,css:b._finalSelectStyle,container:{id:'box-container',label:'box-container',isParent:!0},label:'minute-box',id:'minute-box'}),f+=b.inputBoxWidth,a.addGraphicalElement({el:'html',attr:{x:f+3,y:c.y,type:'label',text:SEMICOLON},component:a,css:b._finalLabelStyle,container:{id:'box-container',label:'box-container',isParent:!0},label:'semicolon-second',id:'semicolon-second'}),f+=b.spacingMultiplier*DEFAULT_PADDING,a.addGraphicalElement({el:'html',attr:{x:f,y:c.y-g,type:'select',innerHTML:getOptionsString(59,e.seconds),class:'fc__select__time'},component:a,css:b._finalSelectStyle,container:{id:'box-container',label:'box-container',isParent:!0},label:'second-box',id:'second-box'})}}export default TimeBox;