@websy/websy-designs 1.7.3 → 1.7.5

package/dist/websy-designs.debug.js

@@ -6435,6 +6435,7 @@ class WebsyTable3 {
       minusIcon: WebsyDesigns.Icons.MinusFilled      
     }
     this.options = Object.assign({}, DEFAULTS, options)
+    this.isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
     this.sizes = {}
     this.currentData = []
     this.scrollDragging = false
@@ -6469,6 +6470,7 @@ class WebsyTable3 {
             <div id="${this.elementId}_hScrollContainer" class="websy-h-scroll-container">
               <div id="${this.elementId}_hScrollHandle" class="websy-scroll-handle websy-scroll-handle-x"></div>
             </div>
+            <div id="${this.elementId}_touchScroller" class="websy-table-touch-scroller hidden"></div>
           </div>     
           <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
             <div>
@@ -6491,6 +6493,9 @@ class WebsyTable3 {
       el.innerHTML = html
       el.addEventListener('click', this.handleClick.bind(this))
       el.addEventListener('mousedown', this.handleMouseDown.bind(this))
+      el.addEventListener('touchstart', this.handleTouchStart.bind(this))
+      window.addEventListener('touchmove', this.handleTouchMove.bind(this))
+      window.addEventListener('touchend', this.handleTouchEnd.bind(this))
       window.addEventListener('mousemove', this.handleMouseMove.bind(this))
       window.addEventListener('mouseup', this.handleMouseUp.bind(this))
       let scrollEl = document.getElementById(`${this.elementId}_tableBody`)
@@ -6549,7 +6554,8 @@ class WebsyTable3 {
     data.forEach((row, rowIndex) => {
       bodyHtml += `<tr class="websy-table-row">`
       row.forEach((cell, cellIndex) => {        
-        let sizeIndex = cell.level || cellIndex        
+        let sizeIndex = cell.level || cellIndex
+        let colIndex = cell.index || cellIndex        
         if (typeof sizingColumns[sizeIndex] === 'undefined' || sizingColumns[sizeIndex].show === false) {
           return // need to revisit this logic
         }
@@ -6584,7 +6590,7 @@ class WebsyTable3 {
           rowspan='${cell.rowspan || 1}'
           data-row-index='${rowIndex}'
           data-cell-index='${cellIndex}'
-          data-col-index='${sizeIndex}'
+          data-col-index='${colIndex}'
         `
         // if (useWidths === true) {
         //   bodyHtml += `
@@ -6598,7 +6604,7 @@ class WebsyTable3 {
           class='websy-table-cell-content'
           data-row-index='${rowIndex}'
           data-cell-index='${cellIndex}'
-          data-col-index='${sizeIndex}'
+          data-col-index='${colIndex}'
         >`
         if (cell.expandable === true) {
           bodyHtml += `<i 
@@ -6960,6 +6966,9 @@ class WebsyTable3 {
     }
   }
   handleMouseDown (event) {
+    if (this.isTouchDevice === true) {
+      return
+    }
     if (event.target.classList.contains('websy-scroll-handle-y')) {
       // set up the scroll start values
       this.scrollDragging = true
@@ -7007,8 +7016,89 @@ class WebsyTable3 {
         this.scrollX(Math.max(-5, Math.min(5, event.deltaX)))
       }
       else {
+        console.log('delta', event.deltaY)
         this.scrollY(Math.max(-5, Math.min(5, event.deltaY)))
       }
+    }  
+    else if (this.options.onNativeScroll) {
+      const el = document.getElementById(`${this.elementId}_tableBody`)
+      this.options.onNativeScroll(el.scrollTop)
+    }  
+  }  
+  handleTouchEnd (event) {
+    console.log('touch end fired')
+    if (typeof event.targetTouches !== 'undefined') {
+      this.isTouchScrolling = false		
+      this.touchEndTime = (new Date()).getTime()
+      this.isPerpetual = true
+      // this.perpetualScroll()	
+      this.touchStartTime = null
+      const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
+      touchScrollEl.classList.add('hidden')
+    }
+  }
+  handleTouchMove (event) {
+    console.log(event.target.classList)
+    if (this.isTouchScrolling === true) {      
+      event.preventDefault()
+      event.stopPropagation()
+      if (typeof event.targetTouches !== 'undefined' && event.targetTouches.length > 0) {
+        let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
+        let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
+        // need to adjust the delta so that it scrolls at a reasonable speed/distance
+        const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+        const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+        // if (Math.abs(deltaY) > this.sizes.cellHeight) {
+        //   this.isTouchScrolling = true			
+        // }
+        // else {
+        //   this.isTouchScrolling = false
+        // }
+        console.log('delta init', deltaY)
+        // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
+        // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
+        // console.log('delta', deltaY)
+        // NW      
+        // else if (Math.abs(deltaX) > 50) {
+        //   this.isTouchScrolling = false			
+        // }
+        this.currentClientY = event.targetTouches[0].pageY			
+        this.currentTouchtime = (new Date()).getTime()
+        // end
+        // delta = Math.min(10, delta)
+        // delta = Math.max(-10, delta)		
+        if (this.isTouchScrolling === true) {			
+          // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))          		
+          if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 10) {
+            this.scrollX(Math.max(-5, Math.min(5, deltaX)))
+          }
+          else {
+            this.scrollY(Math.max(-5, Math.min(5, deltaY)))
+          }
+        }		
+      }
+    }
+  }
+  handleTouchStart (event) {
+    if (event.target.classList.contains('websy-table-cell-expand')) {
+      return
+    }
+    if (event.target.classList.contains('websy-table-cell-collapse')) {
+      return
+    }
+    console.log(event.target.classList)
+    if (this.options.virtualScroll === true) {
+      this.touchStartTime = (new Date()).getTime()
+      this.isTouchScrolling = true
+      this.isPerpetual = false
+      this.mouseYStart = event.targetTouches[0].pageY
+      this.mouseXStart = event.targetTouches[0].pageX    
+      const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
+      touchScrollEl.classList.remove('hidden')
+      const handleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+      this.handleYStart = handleYEl.offsetTop
+      const handleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      this.handleXStart = handleXEl.offsetLeft  
     }    
   }
   hideError () {
@@ -7028,6 +7118,41 @@ class WebsyTable3 {
   hideLoading () {
     this.loadingDialog.hide()
   }
+  perpetualScroll () {
+    // if the currentTouchtime and touchEndTime are more than 300ms apart then we abort the perpetual scroll
+    if (this.touchEndTime - this.currentTouchtime > 300) {
+      return
+    }
+    // get the difference in time between when the touch initially started and when it ended
+    // the longer the touch duration, the slower the scroll
+    let touchDuration = this.touchEndTime - this.touchStartTime
+    // get the distance moved between when the touch initially started and when it ended
+    let touchDistance = this.currentClientY - this.mouseYStart
+    // the bigger the distance, the more we scroll
+    // use the duration and distance to calculate the duration of the perpetual scroll
+    let perpetualDistance = Math.abs(touchDistance * (1 / (touchDuration / 1000)))
+    let perpetualDuration = touchDuration * 1.5 / 1000
+    let requiredFrames = Math.abs(Math.ceil(perpetualDistance / this.sizes.cellHeight))
+    let fps = requiredFrames / perpetualDuration
+    let direction = touchDistance > 0 ? -1 : 1
+    for (let i = 0; i < requiredFrames; i++) {
+      setTimeout(() => {
+        let delta = (this.mouseYStart - this.currentClientY + (this.sizes.cellHeight * (i + 1)) * direction)
+        delta = Math.min(10, delta)
+        delta = Math.max(-10, delta)
+        // only run this if isPerpetual === true
+        // this value is reset to false on touchStart
+        if (this.isPerpetual === true) {
+          // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
+          // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 200)))
+          this.scrollY(Math.max(-5, Math.min(5, delta)))
+          if (this.scrollTimeout) {
+            clearTimeout(this.scrollTimeout)
+          }
+        }
+      }, (1000 / fps) * i)
+    }
+  }
   render (data, calcSizes = true) {
     if (!this.options.columns) {
       console.log(`No columns provided for table with ID ${this.elementId}`)
@@ -7723,8 +7848,9 @@ else {
 this.defs = this.svg.append('defs')
 this.clip = this.defs.append('clipPath').attr('id', `${this.elementId}_clip`).append('rect')
 this.xAxisClip = this.defs.append('clipPath').attr('id', `${this.elementId}_xAxisClip`).append('rect')
+this.yAxisClip = this.defs.append('clipPath').attr('id', `${this.elementId}_yAxisClip`).append('rect')
 this.brushClip = this.defs.append('clipPath').attr('id', `${this.elementId}_brushclip`).append('rect')
-this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer')
+this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer') // .attr('clip-path', `url(#${this.elementId}_yAxisClip)`).append('g')
 this.rightAxisLayer = this.svg.append('g').attr('class', 'right-axis-layer')
 this.bottomAxisLayer = this.svg.append('g').attr('class', 'bottom-axis-layer').attr('clip-path', `url(#${this.elementId}_xAxisClip)`).append('g')
 this.leftAxisLabel = this.svg.append('g').attr('class', 'left-axis-label-layer')
@@ -8134,20 +8260,34 @@ else {
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.trackingLineLayer
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)         
-    this.brushLayer
-      .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)         
     this.clip
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, 0)`)
       .attr('width', this.plotWidth)
       .attr('height', this.plotHeight + this.options.margin.top + this.options.margin.axisTop)   
-    this.xAxisClip
-      .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
-      .attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight)
-      .attr('height', longestBottomBounds.height + 10)      
-    this.brushClip
-      .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)               
-      .attr('width', this.plotWidth)
-      .attr('height', this.options.brushHeight)      
+    if (this.options.orientation === 'horizontal') {
+      this.brushLayer
+        .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
+      this.yAxisClip
+        .attr('transform', `translate(${this.options.brushHeight + this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
+        .attr('width', this.options.margin.axisLeft - this.options.brushHeight)
+        .attr('height', this.plotHeight)      
+      this.brushClip
+        .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)               
+        .attr('height', this.plotHeight)
+        .attr('width', this.options.brushHeight)      
+    }
+    else {
+      this.brushLayer
+        .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)         
+      this.xAxisClip
+        .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
+        .attr('width', this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight)
+        .attr('height', longestBottomBounds.height + 10)      
+      this.brushClip
+        .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height})`)               
+        .attr('width', this.plotWidth)
+        .attr('height', this.options.brushHeight)      
+    }
     this.eventLayer
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)         
     let that = this
@@ -8165,9 +8305,10 @@ else {
     let bottomRange = [0, this.plotWidth]
     let bottomBrushRange = [0, this.plotWidth] 
     let leftRange = [this.plotHeight, 0]
-    let leftBrushRange = [this.options.brushHeight, 0]   
+    let leftBrushRange = [this.options.brushHeight, 0]
     if (this.options.orientation === 'horizontal') {
       leftBrushRange = [this.plotHeight, 0]   
+      bottomBrushRange = [0, this.options.brushHeight]
     } 
     this.widthForCalc = (proposedBandWidth * noOfPoints) // + totalPadding
     this.customBottomRange = []
@@ -8250,10 +8391,13 @@ else {
       brushMethod = 'brushY'
       brushLength = this.options.brushHeight
       brushThickness = this.plotHeight
+      if (this.brushNeeded) {        
+        brushEnd = this.plotHeight * (this.plotHeight / (this.widthForCalc + this.totalBandPadding))
+      }
     }    
     else {
-      if (this.brushNeeded) {
-        brushEnd = this.plotWidth * (this.plotWidth / (this.widthForCalc + this.totalBandPadding))
+      if (this.brushNeeded) {        
+        brushEnd = this.plotWidth * (this.plotWidth / (this.widthForCalc + this.totalBandPadding))        
       }
     }
     this.brush = d3[brushMethod]()
@@ -8415,7 +8559,7 @@ else {
     }  
     // Configure the left axis
     let leftDomain = this.createDomain('left')
-    let leftBrushDomain = this.createDomain('left', true) 
+    let leftBrushDomain = this.createDomain('left') 
     let rightDomain = this.createDomain('right')       
     this.leftAxis = d3[`scale${this.options.data.left.scale || 'Linear'}`]()
       .domain(leftDomain)
@@ -8578,13 +8722,17 @@ const drawArea = (xAxis, yAxis, curveStyle) => {
   return d3
     .area()
     .x(d => {
-      // return this[`${xAxis}Axis`](this.parseX(d.x.value))
-      let xIndex = this[xAxis + 'Axis'].domain().indexOf(d.x.value)
-      let xPos = this[`custom${xAxis.toInitialCaps()}Range`][xIndex]
-      if (this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1]) {
-        xPos = xPos + ((this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1] - xPos) / 2)
+      if (this.options.data[xAxis].scale === 'Time') {          
+        return this[`${xAxis}Axis`](this.parseX(d.x.value))          
+      }
+      else {
+        let xIndex = this[xAxis + 'Axis'].domain().indexOf(d.x.value)
+        let xPos = this[`custom${xAxis.toInitialCaps()}Range`][xIndex]
+        if (this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1]) {
+          xPos = xPos + ((this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1] - xPos) / 2)
+        }
+        return xPos
       }
-      return xPos
     })
     .y0(d => {
       return this[`${yAxis}Axis`](0)
@@ -8662,6 +8810,7 @@ function getBarWidth (d, i, xAxis) {
   let output
   if (this.options.orientation === 'horizontal') {    
     output = this[`${yAxis}Axis`](Math.abs(d.y.value))
+    // output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
   }
   else {
     let x = getBarX.call(this, d, i, xAxis)
@@ -8701,15 +8850,7 @@ function getBarX (d, i, xAxis) {
       let xIndex = 0
       if (this.processedX[d.x.value]) {
         xIndex = Math.max(0, this.processedX[d.x.value].indexOf(d.y.tooltipLabel))
-      }      
-      // let barAdjustment = 
-      //   (this.options.data[xAxis].bandWidth * xIndex) +
-      //   (xIndex * this.options.groupPadding * 2) + this.options.groupPadding +
-      //   (xAxis.indexOf('Brush') === -1 ? this.bandPadding : 1)
-      // let barAdjustment = 
-      //   (this.options.data[xAxis.replace('Brush', '')].step * xIndex) +
-      //   this.options.groupPadding
-      //   // (xAxis.indexOf('Brush') === -1 ? this.bandPadding : 1)
+      }            
       let barAdjustment = (this.options.data[xAxis].bandWidth * xIndex) + ((xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2) + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding)
       if (this[`custom${xAxis.toInitialCaps()}Range`].length > 0) {
         output = this[`custom${xAxis.toInitialCaps()}Range`][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + barAdjustment
@@ -8744,7 +8885,25 @@ function getBarY (d, i, yAxis, xAxis) {
       output = this[`custom${xAxis.toInitialCaps()}Range`][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + barAdjustment
     }
     else {
-      output = this[`${xAxis}Axis`](this.parseX(d.x.value)) + ((d.y.index || i) * this.options.data[xAxis.replace('Brush', '')].barWidth)
+      // output = this[`${xAxis}Axis`](this.parseX(d.x.value)) + ((d.y.index || i) * this.options.data[xAxis.replace('Brush', '')].barWidth)
+      let xIndex = 0
+      if (this.processedX[d.x.value]) {
+        xIndex = Math.max(0, this.processedX[d.x.value].indexOf(d.y.tooltipLabel))
+      }            
+      let barAdjustment = (this.options.data[xAxis].bandWidth * xIndex) + ((xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2) + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding)
+      if (this[`custom${xAxis.toInitialCaps()}Range`].length > 0) {
+        output = this[`custom${xAxis.toInitialCaps()}Range`][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + barAdjustment
+        // output = this[`custom${xAxis.toInitialCaps().replace('Brush', '')}DetailRange`][this[xAxis + 'Axis'].domain().indexOf(d.x.value)]
+      }
+      else {
+        output = this[`${xAxis}Axis`](this.parseX(d.x.value)) + barAdjustment
+      }    
+      if (!this.processedX[d.x.value]) {
+        this.processedX[d.x.value] = []
+      }
+      if (this.processedX[d.x.value].indexOf(d.y.tooltipLabel) === -1) {
+        this.processedX[d.x.value].push(d.y.tooltipLabel)
+      }
     }    
   }
   else {
@@ -8985,14 +9144,17 @@ const drawLine = (xAxis, yAxis, curveStyle) => {
         return this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)
       }     
       else {
-        let xIndex = this[xAxis + 'Axis'].domain().indexOf(d.x.value)
-        let xPos = this[`custom${xAxis.toInitialCaps()}Range`][xIndex]
-        if (this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1]) {
-          xPos = xPos + ((this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1] - xPos) / 2)
+        if (this.options.data[xAxis].scale === 'Time') {          
+          return this[`${xAxis}Axis`](this.parseX(d.x.value))          
         }
-        // let adjustment = this.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : this.options.data[xAxis].bandWidth / 2
-        // return this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment
-        return xPos
+        else {
+          let xIndex = this[xAxis + 'Axis'].domain().indexOf(d.x.value)
+          let xPos = this[`custom${xAxis.toInitialCaps()}Range`][xIndex]
+          if (this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1]) {
+            xPos = xPos + ((this[`custom${xAxis.toInitialCaps()}Range`][xIndex + 1] - xPos) / 2)
+          }          
+          return xPos
+        }        
       }
     })
     .y(d => {
@@ -9203,6 +9365,9 @@ symbols
       return `translate(${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)}, ${xPos})` 
     }
     else {
+      if (this.options.data[xAxis].scale === 'Time') {          
+        xPos = this[`${xAxis}Axis`](this.parseX(d.x.value))          
+      }      
       // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})` 
       return `translate(${xPos}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`       
     }
@@ -9226,6 +9391,9 @@ symbols.enter()
       return `translate(${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)}, ${xPos})` 
     }
     else {
+      if (this.options.data[xAxis].scale === 'Time') {          
+        xPos = this[`${xAxis}Axis`](this.parseX(d.x.value))          
+      }
       // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})` 
       return `translate(${xPos}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`       
     }