@websy/websy-designs 1.9.3 → 1.9.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -193,7 +193,13 @@ function ShopRoutes (dbHelper, engine, app) {
193
193
  }
194
194
  catch (error) {
195
195
  if (basket.items) {
196
- basket.items = JSON.parse(basket.items)
196
+ try {
197
+ basket.items = JSON.parse(basket.items)
198
+ }
199
+ catch (error) {
200
+ console.log('Unable to parse basket')
201
+ console.log(basket.items)
202
+ }
197
203
  }
198
204
  else {
199
205
  basket.items = {}
@@ -221,6 +227,9 @@ function ShopRoutes (dbHelper, engine, app) {
221
227
  else {
222
228
  resolve({items: {}, meta: {}})
223
229
  }
230
+ }, err => {
231
+ console.log('unable to get sql:', sql)
232
+ console.log(err)
224
233
  })
225
234
  }
226
235
  else {
@@ -2791,6 +2791,8 @@ class WebsyNavigationMenu {
2791
2791
  enableSearch: false,
2792
2792
  searchProp: 'text',
2793
2793
  indent: 'padding',
2794
+ expandIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 512 512"><polyline points="112 184 256 328 400 184" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`,
2795
+ collapseIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 512 512"><polyline points="328 112 184 256 328 400" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>`,
2794
2796
  menuIcon: `<svg viewbox="0 0 40 40" width="30" height="40">
2795
2797
  <rect x="0" y="0" width="30" height="4" rx="2"></rect>
2796
2798
  <rect x="0" y="12" width="30" height="4" rx="2"></rect>
@@ -3065,8 +3067,8 @@ class WebsyNavigationMenu {
3065
3067
  html += `</a>`
3066
3068
  }
3067
3069
  if (items[i].items && items[i].items.length > 0) {
3068
- html += `
3069
- <span class='menu-carat'></span>
3070
+ html += `
3071
+ <div class='websy-menu-expand-collapse-buttons'>${this.options.expandIcon}${this.options.collapseIcon}</div>
3070
3072
  `
3071
3073
  }
3072
3074
  if (this.options.activeSymbol === 'triangle') {
@@ -6086,10 +6088,16 @@ class WebsyTable3 {
6086
6088
  searchIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 512 512"><title>ionicons-v5-f</title><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`,
6087
6089
  plusIcon: WebsyDesigns.Icons.PlusFilled,
6088
6090
  minusIcon: WebsyDesigns.Icons.MinusFilled,
6089
- disableInternalLoader: false
6091
+ disableInternalLoader: false,
6092
+ disableTouch: false,
6093
+ scrollWidth: 10,
6094
+ touchScrollWidth: 30
6090
6095
  }
6091
6096
  this.options = Object.assign({}, DEFAULTS, options)
6092
6097
  this.isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
6098
+ if (this.options.disableTouch === true) {
6099
+ this.isTouchDevice = false
6100
+ }
6093
6101
  this.sizes = {}
6094
6102
  this.currentData = []
6095
6103
  this.scrollDragging = false
@@ -6107,10 +6115,11 @@ class WebsyTable3 {
6107
6115
  console.log('No element Id provided for Websy Table')
6108
6116
  return
6109
6117
  }
6110
- const el = document.getElementById(this.elementId)
6118
+ const el = document.getElementById(this.elementId)
6119
+ el.style.position = 'relative'
6111
6120
  if (el) {
6112
6121
  let html = `
6113
- <div id='${this.elementId}_tableContainer' class='websy-vis-table-3 ${this.options.paging === 'pages' ? 'with-paging' : ''} ${this.options.virtualScroll === true ? 'with-virtual-scroll' : ''} ${this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : ''}'>
6122
+ <div id='${this.elementId}_tableContainer' style='width: calc(100% - ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px); height: calc(100% - ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px);' class='websy-vis-table-3 ${this.options.paging === 'pages' ? 'with-paging' : ''} ${this.options.virtualScroll === true ? 'with-virtual-scroll' : ''} ${this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : ''}'>
6114
6123
  <!--<div class="download-button">
6115
6124
  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z"/></svg>
6116
6125
  </div>-->
@@ -6118,20 +6127,14 @@ class WebsyTable3 {
6118
6127
  <table id="${this.elementId}_tableHeader" class="websy-table-header"></table>
6119
6128
  <table id="${this.elementId}_tableBody" class="websy-table-body"></table>
6120
6129
  <table id="${this.elementId}_tableFooter" class="websy-table-footer"></table>
6121
- <div id="${this.elementId}_vScrollContainer" class="websy-v-scroll-container">
6122
- <div id="${this.elementId}_vScrollHandle" class="websy-scroll-handle websy-scroll-handle-y"></div>
6123
- </div>
6124
- <div id="${this.elementId}_hScrollContainer" class="websy-h-scroll-container">
6125
- <div id="${this.elementId}_hScrollHandle" class="websy-scroll-handle websy-scroll-handle-x"></div>
6126
- </div>
6127
6130
  `
6128
6131
  if (this.isTouchDevice === true && this.options.virtualScroll === true) {
6129
6132
  html += `
6130
6133
  <div id="${this.elementId}_touchScroller" class="websy-table-touch-scroller"></div>
6131
6134
  `
6132
6135
  }
6133
- html += `
6134
- </div>
6136
+ html += `
6137
+ </div>
6135
6138
  <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
6136
6139
  <div>
6137
6140
  <div id="${this.elementId}_errorTitle"></div>
@@ -6141,6 +6144,12 @@ class WebsyTable3 {
6141
6144
  <div id="${this.elementId}_dropdownContainer" class="table-dropdown-container"></div>
6142
6145
  <div id="${this.elementId}_loadingContainer"></div>
6143
6146
  </div>
6147
+ <div id="${this.elementId}_vScrollContainer" class="websy-v-scroll-container" style="width: ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px;">
6148
+ <div id="${this.elementId}_vScrollHandle" class="websy-scroll-handle websy-scroll-handle-y"></div>
6149
+ </div>
6150
+ <div id="${this.elementId}_hScrollContainer" class="websy-h-scroll-container" style="height: ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px;">
6151
+ <div id="${this.elementId}_hScrollHandle" class="websy-scroll-handle websy-scroll-handle-x"></div>
6152
+ </div>
6144
6153
  `
6145
6154
  if (this.options.paging === 'pages') {
6146
6155
  html += `
@@ -6487,7 +6496,7 @@ class WebsyTable3 {
6487
6496
  // this.sizes.scrollableWidth -= col.actualWidth
6488
6497
  // }
6489
6498
  // })
6490
- this.sizes.totalWidth = columnsForSizing.reduce((a, b) => a + (b.width || b.actualWidth), 0)
6499
+ this.sizes.totalWidth = columnsForSizing.reduce((a, b) => a + (b.width || b.actualWidth), 0)
6491
6500
  this.sizes.totalNonPinnedWidth = columnsForSizing.filter((c, i) => i >= this.pinnedColumns).reduce((a, b) => a + (b.width || b.actualWidth), 0)
6492
6501
  this.sizes.pinnedWidth = this.sizes.totalWidth - this.sizes.totalNonPinnedWidth
6493
6502
  // const outerSize = outerEl.getBoundingClientRect()
@@ -6754,48 +6763,7 @@ class WebsyTable3 {
6754
6763
  else if (Math.abs(event.deltaX) > 50) {
6755
6764
  event.deltaY = 0
6756
6765
  this.handleScrollWheel(event)
6757
- }
6758
- // let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
6759
- // let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
6760
- // const hScrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
6761
- // const vScrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
6762
- // const hScrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6763
- // const vScrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6764
- // let translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width)
6765
- // let translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height)
6766
- // // need to adjust the delta so that it scrolls at a reasonable speed/distance
6767
- // const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6768
- // const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6769
- // // if (Math.abs(deltaY) > this.sizes.cellHeight) {
6770
- // // this.isTouchScrolling = true
6771
- // // }
6772
- // // else {
6773
- // // this.isTouchScrolling = false
6774
- // // }
6775
- // // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
6776
- // // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
6777
- // // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
6778
- // // console.log('delta', deltaY)
6779
- // // NW
6780
- // // else if (Math.abs(deltaX) > 50) {
6781
- // // this.isTouchScrolling = false
6782
- // // }
6783
- // this.currentClientY = event.targetTouches[0].pageY
6784
- // this.currentTouchtime = (new Date()).getTime()
6785
- // // end
6786
- // // delta = Math.min(10, delta)
6787
- // // delta = Math.max(-10, delta)
6788
- // if (this.isTouchScrolling === true) {
6789
- // // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
6790
- // if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
6791
- // // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
6792
- // this.scrollX(translatedDeltaX)
6793
- // }
6794
- // else if (deltaY > 20) {
6795
- // // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
6796
- // this.scrollY(translatedDeltaY)
6797
- // }
6798
- // }
6766
+ }
6799
6767
  }
6800
6768
  }
6801
6769
  if (this.scrollDragging === true) {
@@ -6959,6 +6927,7 @@ class WebsyTable3 {
6959
6927
  let vHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6960
6928
  if (this.vScrollRequired === true) {
6961
6929
  vScrollEl.style.top = `${this.sizes.header.height + this.sizes.total.height}px`
6930
+ // vScrollEl.style.left = `${this.sizes.outer.width - (this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
6962
6931
  vScrollEl.style.height = `${this.sizes.bodyHeight}px`
6963
6932
  if (this.isTouchDevice === true) {
6964
6933
  vScrollEl.style.visibility = `unset`
@@ -6973,8 +6942,10 @@ class WebsyTable3 {
6973
6942
  let hScrollEl = document.getElementById(`${this.elementId}_hScrollContainer`)
6974
6943
  let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6975
6944
  if (this.hScrollRequired === true) {
6976
- hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
6977
- hScrollEl.style.width = `${this.sizes.scrollableWidth - (this.isTouchDevice ? 30 : 20)}px`
6945
+ hScrollEl.style.right = `${(this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
6946
+ // hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
6947
+ // hScrollEl.style.width = `${this.sizes.scrollableWidth - (this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
6948
+ hScrollEl.style.width = `${this.sizes.scrollableWidth}px`
6978
6949
  hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px'
6979
6950
  if (this.isTouchDevice === true) {
6980
6951
  hScrollEl.style.visibility = `unset`
@@ -7270,65 +7241,7 @@ class WebsyChart {
7270
7241
  if (that.bottomAxisLayer) {
7271
7242
  that.bottomAxisLayer.attr('transform', `translate(${newX}, ${newY + that.plotHeight})`)
7272
7243
  }
7273
- }
7274
- // that.brushedDomain = []
7275
- // let xAxis = 'bottom'
7276
- // let xAxisCaps = 'Bottom'
7277
- // if (that.options.orientation === 'horizontal') {
7278
- // xAxis = 'left'
7279
- // xAxisCaps = 'Left'
7280
- // }
7281
- // if (!that[`${xAxis}Axis`]) {
7282
- // return
7283
- // }
7284
- // if (!that[`${xAxis}Axis`].invert) {
7285
- // that[`${xAxis}Axis`].invert = that.invertOverride
7286
- // }
7287
- // let s = event.selection || that[`${xAxis}Axis`].range()
7288
- // if (!event.selection || event.selection.length === 0) {
7289
- // that.brushLayer
7290
- // .select('.brush')
7291
- // .call(that.brush)
7292
- // .call(that.brush.move, s)
7293
- // return
7294
- // }
7295
- // if (that.options.data[xAxis].scale && that.options.data[xAxis].scale === 'Time') {
7296
- // that.brushedDomain = s.map(that[`${xAxis}BrushAxis`].invert, that[[`${xAxis}Axis`]])
7297
- // }
7298
- // else {
7299
- // let startEndOrdinal = s.map((a, b) => that.bottomAxis.invert(a, b, true), that.bottomBrushAxis)
7300
- // if (
7301
- // startEndOrdinal &&
7302
- // startEndOrdinal.length === 2 &&
7303
- // typeof startEndOrdinal[0] !== 'undefined' &&
7304
- // typeof startEndOrdinal[1] !== 'undefined'
7305
- // ) {
7306
- // let domain = []
7307
- // let domainValues = [...that[`${xAxis}BrushAxis`].domain()]
7308
- // for (let i = startEndOrdinal[0]; i < startEndOrdinal[1] + 1; i++) {
7309
- // // domain.push(that.xRange[i])
7310
- // that.brushedDomain.push(domainValues[i])
7311
- // }
7312
- // }
7313
- // }
7314
- // if (that.brushedDomain.length > 0) {
7315
- // that[`${xAxis}Axis`].domain(that.brushedDomain)
7316
- // that[`${xAxis}AxisLayer`].call(
7317
- // d3[`axis${xAxisCaps}`](that[`${xAxis}Axis`])
7318
- // )
7319
- // }
7320
- // if (that.leftAxis && that.bottomAxis) {
7321
- // that.renderComponents()
7322
- // if (that.options.orientation === 'vertical') {
7323
- // // that.bottomAxisLayer.call(that.bAxisFunc)
7324
- // if (that.options.data.bottom.rotate) {
7325
- // that.bottomAxisLayer.selectAll('text')
7326
- // .attr('transform', `rotate(${((that.options.data.bottom && that.options.data.bottom.rotate) || 0)})`)
7327
- // .style('text-anchor', `${((that.options.data.bottom && that.options.data.bottom.rotate) || 0) === 0 ? 'middle' : 'end'}`)
7328
- // .style('transform-origin', ((that.options.data.bottom && that.options.data.bottom.rotate) || 0) === 0 ? '0 0' : `0 ${((that.options.data.bottom && that.options.data.bottom.fontSize) || that.options.fontSize)}px`)
7329
- // }
7330
- // }
7331
- // }
7244
+ }
7332
7245
  }
7333
7246
  const el = document.getElementById(this.elementId)
7334
7247
  if (el) {
@@ -7850,7 +7763,7 @@ else {
7850
7763
  }
7851
7764
  }
7852
7765
  // Check to see if we need to balance the min and max values
7853
- if (this.options.balancedMinMax) {
7766
+ if (this.options.balancedMinMax === true) {
7854
7767
  if (this.options.orientation === 'horizontal') {
7855
7768
  let biggestBottom = Math.max(Math.abs(this.options.data.bottom.min), this.options.data.bottom.max)
7856
7769
  this.options.data.bottom.min = 1 - biggestBottom
@@ -7864,7 +7777,7 @@ else {
7864
7777
  this.options.data.right.min = biggestRight * -1
7865
7778
  this.options.data.right.max = biggestRight
7866
7779
  }
7867
- }
7780
+ }
7868
7781
  // establish the space needed for the various axes
7869
7782
  // this.options.margin.axisLeft = this.longestLeft * ((this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize) * 0.7
7870
7783
  // this.options.margin.axisRight = this.longestRight * ((this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize) * 0.7
@@ -8197,7 +8110,7 @@ else {
8197
8110
  }
8198
8111
  this.bottomAxis = d3[`scale${this.options.data.bottom.scale || 'Ordinal'}`]()
8199
8112
  .domain(bottomDomain)
8200
- .range(bottomRange)
8113
+ .range(bottomRange)
8201
8114
  if (!this.brushInitialized) {
8202
8115
  this.bottomBrushAxis = d3[`scale${this.options.data.bottom.scale || 'Ordinal'}`]()
8203
8116
  .domain(bottomBrushDomain)
@@ -2623,6 +2623,8 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
2623
2623
  enableSearch: false,
2624
2624
  searchProp: 'text',
2625
2625
  indent: 'padding',
2626
+ expandIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 512 512\"><polyline points=\"112 184 256 328 400 184\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px\"/></svg>",
2627
+ collapseIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14\" height=\"14\" viewBox=\"0 0 512 512\"><polyline points=\"328 112 184 256 328 400\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px\"/></svg>",
2626
2628
  menuIcon: "<svg viewbox=\"0 0 40 40\" width=\"30\" height=\"40\"> \n <rect x=\"0\" y=\"0\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n <rect x=\"0\" y=\"12\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n <rect x=\"0\" y=\"24\" width=\"30\" height=\"4\" rx=\"2\"></rect>\n </svg>",
2627
2629
  searchOptions: {}
2628
2630
  }, options);
@@ -2885,7 +2887,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
2885
2887
  html += "</a>";
2886
2888
  }
2887
2889
  if (items[i].items && items[i].items.length > 0) {
2888
- html += " \n <span class='menu-carat'></span>\n ";
2890
+ html += " \n <div class='websy-menu-expand-collapse-buttons'>".concat(this.options.expandIcon).concat(this.options.collapseIcon, "</div>\n ");
2889
2891
  }
2890
2892
  if (this.options.activeSymbol === 'triangle') {
2891
2893
  html += "\n <span class='active-square'></span>\n ";
@@ -5820,10 +5822,16 @@ var WebsyTable3 = /*#__PURE__*/function () {
5820
5822
  searchIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><title>ionicons-v5-f</title><path d=\"M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><line x1=\"338.29\" y1=\"338.29\" x2=\"448\" y2=\"448\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px\"/></svg>",
5821
5823
  plusIcon: WebsyDesigns.Icons.PlusFilled,
5822
5824
  minusIcon: WebsyDesigns.Icons.MinusFilled,
5823
- disableInternalLoader: false
5825
+ disableInternalLoader: false,
5826
+ disableTouch: false,
5827
+ scrollWidth: 10,
5828
+ touchScrollWidth: 30
5824
5829
  };
5825
5830
  this.options = _extends({}, DEFAULTS, options);
5826
5831
  this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
5832
+ if (this.options.disableTouch === true) {
5833
+ this.isTouchDevice = false;
5834
+ }
5827
5835
  this.sizes = {};
5828
5836
  this.currentData = [];
5829
5837
  this.scrollDragging = false;
@@ -5842,12 +5850,13 @@ var WebsyTable3 = /*#__PURE__*/function () {
5842
5850
  return;
5843
5851
  }
5844
5852
  var el = document.getElementById(this.elementId);
5853
+ el.style.position = 'relative';
5845
5854
  if (el) {
5846
- var html = "\n <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table-3 ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', " ").concat(this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : '', "'>\n <!--<div class=\"download-button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n </div>-->\n <div id=\"").concat(this.elementId, "_tableInner\" class=\"websy-table-inner-container\">\n <table id=\"").concat(this.elementId, "_tableHeader\" class=\"websy-table-header\"></table>\n <table id=\"").concat(this.elementId, "_tableBody\" class=\"websy-table-body\"></table>\n <table id=\"").concat(this.elementId, "_tableFooter\" class=\"websy-table-footer\"></table>\n <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\">\n <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n </div>\n <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\">\n <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n </div>\n ");
5855
+ var html = "\n <div id='".concat(this.elementId, "_tableContainer' style='width: calc(100% - ").concat(this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px); height: calc(100% - ").concat(this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px);' class='websy-vis-table-3 ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', " ").concat(this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : '', "'>\n <!--<div class=\"download-button\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n </div>-->\n <div id=\"").concat(this.elementId, "_tableInner\" class=\"websy-table-inner-container\">\n <table id=\"").concat(this.elementId, "_tableHeader\" class=\"websy-table-header\"></table>\n <table id=\"").concat(this.elementId, "_tableBody\" class=\"websy-table-body\"></table>\n <table id=\"").concat(this.elementId, "_tableFooter\" class=\"websy-table-footer\"></table>\n ");
5847
5856
  if (this.isTouchDevice === true && this.options.virtualScroll === true) {
5848
5857
  html += "\n <div id=\"".concat(this.elementId, "_touchScroller\" class=\"websy-table-touch-scroller\"></div>\n ");
5849
5858
  }
5850
- html += " \n </div> \n <div id=\"".concat(this.elementId, "_errorContainer\" class='websy-vis-error-container'>\n <div>\n <div id=\"").concat(this.elementId, "_errorTitle\"></div>\n <div id=\"").concat(this.elementId, "_errorMessage\"></div>\n </div> \n </div>\n <div id=\"").concat(this.elementId, "_dropdownContainer\" class=\"table-dropdown-container\"></div>\n <div id=\"").concat(this.elementId, "_loadingContainer\"></div>\n </div>\n ");
5859
+ html += " \n </div> \n <div id=\"".concat(this.elementId, "_errorContainer\" class='websy-vis-error-container'>\n <div>\n <div id=\"").concat(this.elementId, "_errorTitle\"></div>\n <div id=\"").concat(this.elementId, "_errorMessage\"></div>\n </div> \n </div>\n <div id=\"").concat(this.elementId, "_dropdownContainer\" class=\"table-dropdown-container\"></div>\n <div id=\"").concat(this.elementId, "_loadingContainer\"></div>\n </div>\n <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\" style=\"width: ").concat(this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px;\">\n <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n </div>\n <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\" style=\"height: ").concat(this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px;\">\n <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n </div> \n ");
5851
5860
  if (this.options.paging === 'pages') {
5852
5861
  html += "\n <div class=\"websy-table-paging-container\">\n Show <div id=\"".concat(this.elementId, "_pageSizeSelector\" class=\"websy-vis-page-selector\"></div> rows\n <ul id=\"").concat(this.elementId, "_pageList\" class=\"websy-vis-page-list\"></ul>\n </div>\n ");
5853
5862
  }
@@ -6443,50 +6452,8 @@ var WebsyTable3 = /*#__PURE__*/function () {
6443
6452
  event.deltaY = 0;
6444
6453
  this.handleScrollWheel(event);
6445
6454
  }
6446
- // let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
6447
- // let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
6448
- // const hScrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
6449
- // const vScrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
6450
- // const hScrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6451
- // const vScrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6452
- // let translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width)
6453
- // let translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height)
6454
- // // need to adjust the delta so that it scrolls at a reasonable speed/distance
6455
- // const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6456
- // const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6457
- // // if (Math.abs(deltaY) > this.sizes.cellHeight) {
6458
- // // this.isTouchScrolling = true
6459
- // // }
6460
- // // else {
6461
- // // this.isTouchScrolling = false
6462
- // // }
6463
- // // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
6464
- // // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
6465
- // // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
6466
- // // console.log('delta', deltaY)
6467
- // // NW
6468
- // // else if (Math.abs(deltaX) > 50) {
6469
- // // this.isTouchScrolling = false
6470
- // // }
6471
- // this.currentClientY = event.targetTouches[0].pageY
6472
- // this.currentTouchtime = (new Date()).getTime()
6473
- // // end
6474
- // // delta = Math.min(10, delta)
6475
- // // delta = Math.max(-10, delta)
6476
- // if (this.isTouchScrolling === true) {
6477
- // // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
6478
- // if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
6479
- // // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
6480
- // this.scrollX(translatedDeltaX)
6481
- // }
6482
- // else if (deltaY > 20) {
6483
- // // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
6484
- // this.scrollY(translatedDeltaY)
6485
- // }
6486
- // }
6487
6455
  }
6488
6456
  }
6489
-
6490
6457
  if (this.scrollDragging === true) {
6491
6458
  event.preventDefault();
6492
6459
  if (this.scrollDirection === 'y') {
@@ -6661,6 +6628,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
6661
6628
  var vHandleEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
6662
6629
  if (this.vScrollRequired === true) {
6663
6630
  vScrollEl.style.top = "".concat(this.sizes.header.height + this.sizes.total.height, "px");
6631
+ // vScrollEl.style.left = `${this.sizes.outer.width - (this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
6664
6632
  vScrollEl.style.height = "".concat(this.sizes.bodyHeight, "px");
6665
6633
  if (this.isTouchDevice === true) {
6666
6634
  vScrollEl.style.visibility = "unset";
@@ -6674,8 +6642,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
6674
6642
  var hScrollEl = document.getElementById("".concat(this.elementId, "_hScrollContainer"));
6675
6643
  var hHandleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
6676
6644
  if (this.hScrollRequired === true) {
6677
- hScrollEl.style.left = "".concat(this.sizes.table.width - this.sizes.scrollableWidth, "px");
6678
- hScrollEl.style.width = "".concat(this.sizes.scrollableWidth - (this.isTouchDevice ? 30 : 20), "px");
6645
+ hScrollEl.style.right = "".concat(this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px");
6646
+ // hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
6647
+ // hScrollEl.style.width = `${this.sizes.scrollableWidth - (this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
6648
+ hScrollEl.style.width = "".concat(this.sizes.scrollableWidth, "px");
6679
6649
  hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px';
6680
6650
  if (this.isTouchDevice === true) {
6681
6651
  hScrollEl.style.visibility = "unset";
@@ -6982,66 +6952,7 @@ var WebsyChart = /*#__PURE__*/function () {
6982
6952
  that.bottomAxisLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY + that.plotHeight, ")"));
6983
6953
  }
6984
6954
  }
6985
- // that.brushedDomain = []
6986
- // let xAxis = 'bottom'
6987
- // let xAxisCaps = 'Bottom'
6988
- // if (that.options.orientation === 'horizontal') {
6989
- // xAxis = 'left'
6990
- // xAxisCaps = 'Left'
6991
- // }
6992
- // if (!that[`${xAxis}Axis`]) {
6993
- // return
6994
- // }
6995
- // if (!that[`${xAxis}Axis`].invert) {
6996
- // that[`${xAxis}Axis`].invert = that.invertOverride
6997
- // }
6998
- // let s = event.selection || that[`${xAxis}Axis`].range()
6999
- // if (!event.selection || event.selection.length === 0) {
7000
- // that.brushLayer
7001
- // .select('.brush')
7002
- // .call(that.brush)
7003
- // .call(that.brush.move, s)
7004
- // return
7005
- // }
7006
- // if (that.options.data[xAxis].scale && that.options.data[xAxis].scale === 'Time') {
7007
- // that.brushedDomain = s.map(that[`${xAxis}BrushAxis`].invert, that[[`${xAxis}Axis`]])
7008
- // }
7009
- // else {
7010
- // let startEndOrdinal = s.map((a, b) => that.bottomAxis.invert(a, b, true), that.bottomBrushAxis)
7011
- // if (
7012
- // startEndOrdinal &&
7013
- // startEndOrdinal.length === 2 &&
7014
- // typeof startEndOrdinal[0] !== 'undefined' &&
7015
- // typeof startEndOrdinal[1] !== 'undefined'
7016
- // ) {
7017
- // let domain = []
7018
- // let domainValues = [...that[`${xAxis}BrushAxis`].domain()]
7019
- // for (let i = startEndOrdinal[0]; i < startEndOrdinal[1] + 1; i++) {
7020
- // // domain.push(that.xRange[i])
7021
- // that.brushedDomain.push(domainValues[i])
7022
- // }
7023
- // }
7024
- // }
7025
- // if (that.brushedDomain.length > 0) {
7026
- // that[`${xAxis}Axis`].domain(that.brushedDomain)
7027
- // that[`${xAxis}AxisLayer`].call(
7028
- // d3[`axis${xAxisCaps}`](that[`${xAxis}Axis`])
7029
- // )
7030
- // }
7031
- // if (that.leftAxis && that.bottomAxis) {
7032
- // that.renderComponents()
7033
- // if (that.options.orientation === 'vertical') {
7034
- // // that.bottomAxisLayer.call(that.bAxisFunc)
7035
- // if (that.options.data.bottom.rotate) {
7036
- // that.bottomAxisLayer.selectAll('text')
7037
- // .attr('transform', `rotate(${((that.options.data.bottom && that.options.data.bottom.rotate) || 0)})`)
7038
- // .style('text-anchor', `${((that.options.data.bottom && that.options.data.bottom.rotate) || 0) === 0 ? 'middle' : 'end'}`)
7039
- // .style('transform-origin', ((that.options.data.bottom && that.options.data.bottom.rotate) || 0) === 0 ? '0 0' : `0 ${((that.options.data.bottom && that.options.data.bottom.fontSize) || that.options.fontSize)}px`)
7040
- // }
7041
- // }
7042
- // }
7043
6955
  };
7044
-
7045
6956
  var el = document.getElementById(this.elementId);
7046
6957
  if (el) {
7047
6958
  el.classList.add('websy-chart');
@@ -7555,7 +7466,7 @@ var WebsyChart = /*#__PURE__*/function () {
7555
7466
  }
7556
7467
  }
7557
7468
  // Check to see if we need to balance the min and max values
7558
- if (this.options.balancedMinMax) {
7469
+ if (this.options.balancedMinMax === true) {
7559
7470
  if (this.options.orientation === 'horizontal') {
7560
7471
  var biggestBottom = Math.max(Math.abs(this.options.data.bottom.min), this.options.data.bottom.max);
7561
7472
  this.options.data.bottom.min = 1 - biggestBottom;