@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.
Files changed (9) hide show
  1. package/dist/server/routes/v1/shop.js +10 -1
  2. package/dist/websy-designs-es6.debug.js +33 -120
  3. package/dist/websy-designs-es6.js +19 -108
  4. package/dist/websy-designs-es6.min.js +1 -1
  5. package/dist/websy-designs.debug.js +33 -120
  6. package/dist/websy-designs.js +19 -108
  7. package/dist/websy-designs.min.css +1 -1
  8. package/dist/websy-designs.min.js +1 -1
  9. package/package.json +1 -1
package/dist/websy-designs.debug.js CHANGED
@@ -3054,6 +3054,8 @@ class WebsyNavigationMenu {
3054
3054
  enableSearch: false,
3055
3055
  searchProp: 'text',
3056
3056
  indent: 'padding',
3057
+ 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>`,
3058
+ 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>`,
3057
3059
  menuIcon: `<svg viewbox="0 0 40 40" width="30" height="40">
3058
3060
  <rect x="0" y="0" width="30" height="4" rx="2"></rect>
3059
3061
  <rect x="0" y="12" width="30" height="4" rx="2"></rect>
@@ -3328,8 +3330,8 @@ class WebsyNavigationMenu {
3328
3330
  html += `</a>`
3329
3331
  }
3330
3332
  if (items[i].items && items[i].items.length > 0) {
3331
- html += `
3332
- <span class='menu-carat'></span>
3333
+ html += `
3334
+ <div class='websy-menu-expand-collapse-buttons'>${this.options.expandIcon}${this.options.collapseIcon}</div>
3333
3335
  `
3334
3336
  }
3335
3337
  if (this.options.activeSymbol === 'triangle') {
@@ -6502,10 +6504,16 @@ class WebsyTable3 {
6502
6504
  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>`,
6503
6505
  plusIcon: WebsyDesigns.Icons.PlusFilled,
6504
6506
  minusIcon: WebsyDesigns.Icons.MinusFilled,
6505
- disableInternalLoader: false
6507
+ disableInternalLoader: false,
6508
+ disableTouch: false,
6509
+ scrollWidth: 10,
6510
+ touchScrollWidth: 30
6506
6511
  }
6507
6512
  this.options = Object.assign({}, DEFAULTS, options)
6508
6513
  this.isTouchDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0)
6514
+ if (this.options.disableTouch === true) {
6515
+ this.isTouchDevice = false
6516
+ }
6509
6517
  this.sizes = {}
6510
6518
  this.currentData = []
6511
6519
  this.scrollDragging = false
@@ -6523,10 +6531,11 @@ class WebsyTable3 {
6523
6531
  console.log('No element Id provided for Websy Table')
6524
6532
  return
6525
6533
  }
6526
- const el = document.getElementById(this.elementId)
6534
+ const el = document.getElementById(this.elementId)
6535
+ el.style.position = 'relative'
6527
6536
  if (el) {
6528
6537
  let html = `
6529
- <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' : ''}'>
6538
+ <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' : ''}'>
6530
6539
  <!--<div class="download-button">
6531
6540
  <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>
6532
6541
  </div>-->
@@ -6534,20 +6543,14 @@ class WebsyTable3 {
6534
6543
  <table id="${this.elementId}_tableHeader" class="websy-table-header"></table>
6535
6544
  <table id="${this.elementId}_tableBody" class="websy-table-body"></table>
6536
6545
  <table id="${this.elementId}_tableFooter" class="websy-table-footer"></table>
6537
- <div id="${this.elementId}_vScrollContainer" class="websy-v-scroll-container">
6538
- <div id="${this.elementId}_vScrollHandle" class="websy-scroll-handle websy-scroll-handle-y"></div>
6539
- </div>
6540
- <div id="${this.elementId}_hScrollContainer" class="websy-h-scroll-container">
6541
- <div id="${this.elementId}_hScrollHandle" class="websy-scroll-handle websy-scroll-handle-x"></div>
6542
- </div>
6543
6546
  `
6544
6547
  if (this.isTouchDevice === true && this.options.virtualScroll === true) {
6545
6548
  html += `
6546
6549
  <div id="${this.elementId}_touchScroller" class="websy-table-touch-scroller"></div>
6547
6550
  `
6548
6551
  }
6549
- html += `
6550
- </div>
6552
+ html += `
6553
+ </div>
6551
6554
  <div id="${this.elementId}_errorContainer" class='websy-vis-error-container'>
6552
6555
  <div>
6553
6556
  <div id="${this.elementId}_errorTitle"></div>
@@ -6557,6 +6560,12 @@ class WebsyTable3 {
6557
6560
  <div id="${this.elementId}_dropdownContainer" class="table-dropdown-container"></div>
6558
6561
  <div id="${this.elementId}_loadingContainer"></div>
6559
6562
  </div>
6563
+ <div id="${this.elementId}_vScrollContainer" class="websy-v-scroll-container" style="width: ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px;">
6564
+ <div id="${this.elementId}_vScrollHandle" class="websy-scroll-handle websy-scroll-handle-y"></div>
6565
+ </div>
6566
+ <div id="${this.elementId}_hScrollContainer" class="websy-h-scroll-container" style="height: ${this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth}px;">
6567
+ <div id="${this.elementId}_hScrollHandle" class="websy-scroll-handle websy-scroll-handle-x"></div>
6568
+ </div>
6560
6569
  `
6561
6570
  if (this.options.paging === 'pages') {
6562
6571
  html += `
@@ -6903,7 +6912,7 @@ class WebsyTable3 {
6903
6912
  // this.sizes.scrollableWidth -= col.actualWidth
6904
6913
  // }
6905
6914
  // })
6906
- this.sizes.totalWidth = columnsForSizing.reduce((a, b) => a + (b.width || b.actualWidth), 0)
6915
+ this.sizes.totalWidth = columnsForSizing.reduce((a, b) => a + (b.width || b.actualWidth), 0)
6907
6916
  this.sizes.totalNonPinnedWidth = columnsForSizing.filter((c, i) => i >= this.pinnedColumns).reduce((a, b) => a + (b.width || b.actualWidth), 0)
6908
6917
  this.sizes.pinnedWidth = this.sizes.totalWidth - this.sizes.totalNonPinnedWidth
6909
6918
  // const outerSize = outerEl.getBoundingClientRect()
@@ -7170,48 +7179,7 @@ class WebsyTable3 {
7170
7179
  else if (Math.abs(event.deltaX) > 50) {
7171
7180
  event.deltaY = 0
7172
7181
  this.handleScrollWheel(event)
7173
- }
7174
- // let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
7175
- // let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
7176
- // const hScrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
7177
- // const vScrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
7178
- // const hScrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
7179
- // const vScrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
7180
- // let translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width)
7181
- // let translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height)
7182
- // // need to adjust the delta so that it scrolls at a reasonable speed/distance
7183
- // const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
7184
- // const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
7185
- // // if (Math.abs(deltaY) > this.sizes.cellHeight) {
7186
- // // this.isTouchScrolling = true
7187
- // // }
7188
- // // else {
7189
- // // this.isTouchScrolling = false
7190
- // // }
7191
- // // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
7192
- // // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
7193
- // // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
7194
- // // console.log('delta', deltaY)
7195
- // // NW
7196
- // // else if (Math.abs(deltaX) > 50) {
7197
- // // this.isTouchScrolling = false
7198
- // // }
7199
- // this.currentClientY = event.targetTouches[0].pageY
7200
- // this.currentTouchtime = (new Date()).getTime()
7201
- // // end
7202
- // // delta = Math.min(10, delta)
7203
- // // delta = Math.max(-10, delta)
7204
- // if (this.isTouchScrolling === true) {
7205
- // // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
7206
- // if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
7207
- // // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
7208
- // this.scrollX(translatedDeltaX)
7209
- // }
7210
- // else if (deltaY > 20) {
7211
- // // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
7212
- // this.scrollY(translatedDeltaY)
7213
- // }
7214
- // }
7182
+ }
7215
7183
  }
7216
7184
  }
7217
7185
  if (this.scrollDragging === true) {
@@ -7375,6 +7343,7 @@ class WebsyTable3 {
7375
7343
  let vHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
7376
7344
  if (this.vScrollRequired === true) {
7377
7345
  vScrollEl.style.top = `${this.sizes.header.height + this.sizes.total.height}px`
7346
+ // vScrollEl.style.left = `${this.sizes.outer.width - (this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
7378
7347
  vScrollEl.style.height = `${this.sizes.bodyHeight}px`
7379
7348
  if (this.isTouchDevice === true) {
7380
7349
  vScrollEl.style.visibility = `unset`
@@ -7389,8 +7358,10 @@ class WebsyTable3 {
7389
7358
  let hScrollEl = document.getElementById(`${this.elementId}_hScrollContainer`)
7390
7359
  let hHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
7391
7360
  if (this.hScrollRequired === true) {
7392
- hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
7393
- hScrollEl.style.width = `${this.sizes.scrollableWidth - (this.isTouchDevice ? 30 : 20)}px`
7361
+ hScrollEl.style.right = `${(this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
7362
+ // hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
7363
+ // hScrollEl.style.width = `${this.sizes.scrollableWidth - (this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
7364
+ hScrollEl.style.width = `${this.sizes.scrollableWidth}px`
7394
7365
  hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px'
7395
7366
  if (this.isTouchDevice === true) {
7396
7367
  hScrollEl.style.visibility = `unset`
@@ -7686,65 +7657,7 @@ class WebsyChart {
7686
7657
  if (that.bottomAxisLayer) {
7687
7658
  that.bottomAxisLayer.attr('transform', `translate(${newX}, ${newY + that.plotHeight})`)
7688
7659
  }
7689
- }
7690
- // that.brushedDomain = []
7691
- // let xAxis = 'bottom'
7692
- // let xAxisCaps = 'Bottom'
7693
- // if (that.options.orientation === 'horizontal') {
7694
- // xAxis = 'left'
7695
- // xAxisCaps = 'Left'
7696
- // }
7697
- // if (!that[`${xAxis}Axis`]) {
7698
- // return
7699
- // }
7700
- // if (!that[`${xAxis}Axis`].invert) {
7701
- // that[`${xAxis}Axis`].invert = that.invertOverride
7702
- // }
7703
- // let s = event.selection || that[`${xAxis}Axis`].range()
7704
- // if (!event.selection || event.selection.length === 0) {
7705
- // that.brushLayer
7706
- // .select('.brush')
7707
- // .call(that.brush)
7708
- // .call(that.brush.move, s)
7709
- // return
7710
- // }
7711
- // if (that.options.data[xAxis].scale && that.options.data[xAxis].scale === 'Time') {
7712
- // that.brushedDomain = s.map(that[`${xAxis}BrushAxis`].invert, that[[`${xAxis}Axis`]])
7713
- // }
7714
- // else {
7715
- // let startEndOrdinal = s.map((a, b) => that.bottomAxis.invert(a, b, true), that.bottomBrushAxis)
7716
- // if (
7717
- // startEndOrdinal &&
7718
- // startEndOrdinal.length === 2 &&
7719
- // typeof startEndOrdinal[0] !== 'undefined' &&
7720
- // typeof startEndOrdinal[1] !== 'undefined'
7721
- // ) {
7722
- // let domain = []
7723
- // let domainValues = [...that[`${xAxis}BrushAxis`].domain()]
7724
- // for (let i = startEndOrdinal[0]; i < startEndOrdinal[1] + 1; i++) {
7725
- // // domain.push(that.xRange[i])
7726
- // that.brushedDomain.push(domainValues[i])
7727
- // }
7728
- // }
7729
- // }
7730
- // if (that.brushedDomain.length > 0) {
7731
- // that[`${xAxis}Axis`].domain(that.brushedDomain)
7732
- // that[`${xAxis}AxisLayer`].call(
7733
- // d3[`axis${xAxisCaps}`](that[`${xAxis}Axis`])
7734
- // )
7735
- // }
7736
- // if (that.leftAxis && that.bottomAxis) {
7737
- // that.renderComponents()
7738
- // if (that.options.orientation === 'vertical') {
7739
- // // that.bottomAxisLayer.call(that.bAxisFunc)
7740
- // if (that.options.data.bottom.rotate) {
7741
- // that.bottomAxisLayer.selectAll('text')
7742
- // .attr('transform', `rotate(${((that.options.data.bottom && that.options.data.bottom.rotate) || 0)})`)
7743
- // .style('text-anchor', `${((that.options.data.bottom && that.options.data.bottom.rotate) || 0) === 0 ? 'middle' : 'end'}`)
7744
- // .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`)
7745
- // }
7746
- // }
7747
- // }
7660
+ }
7748
7661
  }
7749
7662
  const el = document.getElementById(this.elementId)
7750
7663
  if (el) {
@@ -8266,7 +8179,7 @@ else {
8266
8179
  }
8267
8180
  }
8268
8181
  // Check to see if we need to balance the min and max values
8269
- if (this.options.balancedMinMax) {
8182
+ if (this.options.balancedMinMax === true) {
8270
8183
  if (this.options.orientation === 'horizontal') {
8271
8184
  let biggestBottom = Math.max(Math.abs(this.options.data.bottom.min), this.options.data.bottom.max)
8272
8185
  this.options.data.bottom.min = 1 - biggestBottom
@@ -8280,7 +8193,7 @@ else {
8280
8193
  this.options.data.right.min = biggestRight * -1
8281
8194
  this.options.data.right.max = biggestRight
8282
8195
  }
8283
- }
8196
+ }
8284
8197
  // establish the space needed for the various axes
8285
8198
  // this.options.margin.axisLeft = this.longestLeft * ((this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize) * 0.7
8286
8199
  // this.options.margin.axisRight = this.longestRight * ((this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize) * 0.7
@@ -8613,7 +8526,7 @@ else {
8613
8526
  }
8614
8527
  this.bottomAxis = d3[`scale${this.options.data.bottom.scale || 'Ordinal'}`]()
8615
8528
  .domain(bottomDomain)
8616
- .range(bottomRange)
8529
+ .range(bottomRange)
8617
8530
  if (!this.brushInitialized) {
8618
8531
  this.bottomBrushAxis = d3[`scale${this.options.data.bottom.scale || 'Ordinal'}`]()
8619
8532
  .domain(bottomBrushDomain)
package/dist/websy-designs.js CHANGED
@@ -2863,6 +2863,8 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
2863
2863
  enableSearch: false,
2864
2864
  searchProp: 'text',
2865
2865
  indent: 'padding',
2866
+ 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>",
2867
+ 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>",
2866
2868
  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>",
2867
2869
  searchOptions: {}
2868
2870
  }, options);
@@ -3125,7 +3127,7 @@ var WebsyNavigationMenu = /*#__PURE__*/function () {
3125
3127
  html += "</a>";
3126
3128
  }
3127
3129
  if (items[i].items && items[i].items.length > 0) {
3128
- html += " \n <span class='menu-carat'></span>\n ";
3130
+ html += " \n <div class='websy-menu-expand-collapse-buttons'>".concat(this.options.expandIcon).concat(this.options.collapseIcon, "</div>\n ");
3129
3131
  }
3130
3132
  if (this.options.activeSymbol === 'triangle') {
3131
3133
  html += "\n <span class='active-square'></span>\n ";
@@ -6213,10 +6215,16 @@ var WebsyTable3 = /*#__PURE__*/function () {
6213
6215
  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>",
6214
6216
  plusIcon: WebsyDesigns.Icons.PlusFilled,
6215
6217
  minusIcon: WebsyDesigns.Icons.MinusFilled,
6216
- disableInternalLoader: false
6218
+ disableInternalLoader: false,
6219
+ disableTouch: false,
6220
+ scrollWidth: 10,
6221
+ touchScrollWidth: 30
6217
6222
  };
6218
6223
  this.options = _extends({}, DEFAULTS, options);
6219
6224
  this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
6225
+ if (this.options.disableTouch === true) {
6226
+ this.isTouchDevice = false;
6227
+ }
6220
6228
  this.sizes = {};
6221
6229
  this.currentData = [];
6222
6230
  this.scrollDragging = false;
@@ -6235,12 +6243,13 @@ var WebsyTable3 = /*#__PURE__*/function () {
6235
6243
  return;
6236
6244
  }
6237
6245
  var el = document.getElementById(this.elementId);
6246
+ el.style.position = 'relative';
6238
6247
  if (el) {
6239
- 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 ");
6248
+ 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 ");
6240
6249
  if (this.isTouchDevice === true && this.options.virtualScroll === true) {
6241
6250
  html += "\n <div id=\"".concat(this.elementId, "_touchScroller\" class=\"websy-table-touch-scroller\"></div>\n ");
6242
6251
  }
6243
- 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 ");
6252
+ 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 ");
6244
6253
  if (this.options.paging === 'pages') {
6245
6254
  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 ");
6246
6255
  }
@@ -6836,50 +6845,8 @@ var WebsyTable3 = /*#__PURE__*/function () {
6836
6845
  event.deltaY = 0;
6837
6846
  this.handleScrollWheel(event);
6838
6847
  }
6839
- // let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
6840
- // let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
6841
- // const hScrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
6842
- // const vScrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
6843
- // const hScrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6844
- // const vScrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6845
- // let translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width)
6846
- // let translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height)
6847
- // // need to adjust the delta so that it scrolls at a reasonable speed/distance
6848
- // const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
6849
- // const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
6850
- // // if (Math.abs(deltaY) > this.sizes.cellHeight) {
6851
- // // this.isTouchScrolling = true
6852
- // // }
6853
- // // else {
6854
- // // this.isTouchScrolling = false
6855
- // // }
6856
- // // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
6857
- // // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
6858
- // // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
6859
- // // console.log('delta', deltaY)
6860
- // // NW
6861
- // // else if (Math.abs(deltaX) > 50) {
6862
- // // this.isTouchScrolling = false
6863
- // // }
6864
- // this.currentClientY = event.targetTouches[0].pageY
6865
- // this.currentTouchtime = (new Date()).getTime()
6866
- // // end
6867
- // // delta = Math.min(10, delta)
6868
- // // delta = Math.max(-10, delta)
6869
- // if (this.isTouchScrolling === true) {
6870
- // // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
6871
- // if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
6872
- // // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
6873
- // this.scrollX(translatedDeltaX)
6874
- // }
6875
- // else if (deltaY > 20) {
6876
- // // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
6877
- // this.scrollY(translatedDeltaY)
6878
- // }
6879
- // }
6880
6848
  }
6881
6849
  }
6882
-
6883
6850
  if (this.scrollDragging === true) {
6884
6851
  event.preventDefault();
6885
6852
  if (this.scrollDirection === 'y') {
@@ -7054,6 +7021,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
7054
7021
  var vHandleEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
7055
7022
  if (this.vScrollRequired === true) {
7056
7023
  vScrollEl.style.top = "".concat(this.sizes.header.height + this.sizes.total.height, "px");
7024
+ // vScrollEl.style.left = `${this.sizes.outer.width - (this.options.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
7057
7025
  vScrollEl.style.height = "".concat(this.sizes.bodyHeight, "px");
7058
7026
  if (this.isTouchDevice === true) {
7059
7027
  vScrollEl.style.visibility = "unset";
@@ -7067,8 +7035,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
7067
7035
  var hScrollEl = document.getElementById("".concat(this.elementId, "_hScrollContainer"));
7068
7036
  var hHandleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
7069
7037
  if (this.hScrollRequired === true) {
7070
- hScrollEl.style.left = "".concat(this.sizes.table.width - this.sizes.scrollableWidth, "px");
7071
- hScrollEl.style.width = "".concat(this.sizes.scrollableWidth - (this.isTouchDevice ? 30 : 20), "px");
7038
+ hScrollEl.style.right = "".concat(this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth, "px");
7039
+ // hScrollEl.style.left = `${this.sizes.table.width - this.sizes.scrollableWidth}px`
7040
+ // hScrollEl.style.width = `${this.sizes.scrollableWidth - (this.isTouchDevice ? this.options.touchScrollWidth : this.options.scrollWidth)}px`
7041
+ hScrollEl.style.width = "".concat(this.sizes.scrollableWidth, "px");
7072
7042
  hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px';
7073
7043
  if (this.isTouchDevice === true) {
7074
7044
  hScrollEl.style.visibility = "unset";
@@ -7375,66 +7345,7 @@ var WebsyChart = /*#__PURE__*/function () {
7375
7345
  that.bottomAxisLayer.attr('transform', "translate(".concat(newX, ", ").concat(newY + that.plotHeight, ")"));
7376
7346
  }
7377
7347
  }
7378
- // that.brushedDomain = []
7379
- // let xAxis = 'bottom'
7380
- // let xAxisCaps = 'Bottom'
7381
- // if (that.options.orientation === 'horizontal') {
7382
- // xAxis = 'left'
7383
- // xAxisCaps = 'Left'
7384
- // }
7385
- // if (!that[`${xAxis}Axis`]) {
7386
- // return
7387
- // }
7388
- // if (!that[`${xAxis}Axis`].invert) {
7389
- // that[`${xAxis}Axis`].invert = that.invertOverride
7390
- // }
7391
- // let s = event.selection || that[`${xAxis}Axis`].range()
7392
- // if (!event.selection || event.selection.length === 0) {
7393
- // that.brushLayer
7394
- // .select('.brush')
7395
- // .call(that.brush)
7396
- // .call(that.brush.move, s)
7397
- // return
7398
- // }
7399
- // if (that.options.data[xAxis].scale && that.options.data[xAxis].scale === 'Time') {
7400
- // that.brushedDomain = s.map(that[`${xAxis}BrushAxis`].invert, that[[`${xAxis}Axis`]])
7401
- // }
7402
- // else {
7403
- // let startEndOrdinal = s.map((a, b) => that.bottomAxis.invert(a, b, true), that.bottomBrushAxis)
7404
- // if (
7405
- // startEndOrdinal &&
7406
- // startEndOrdinal.length === 2 &&
7407
- // typeof startEndOrdinal[0] !== 'undefined' &&
7408
- // typeof startEndOrdinal[1] !== 'undefined'
7409
- // ) {
7410
- // let domain = []
7411
- // let domainValues = [...that[`${xAxis}BrushAxis`].domain()]
7412
- // for (let i = startEndOrdinal[0]; i < startEndOrdinal[1] + 1; i++) {
7413
- // // domain.push(that.xRange[i])
7414
- // that.brushedDomain.push(domainValues[i])
7415
- // }
7416
- // }
7417
- // }
7418
- // if (that.brushedDomain.length > 0) {
7419
- // that[`${xAxis}Axis`].domain(that.brushedDomain)
7420
- // that[`${xAxis}AxisLayer`].call(
7421
- // d3[`axis${xAxisCaps}`](that[`${xAxis}Axis`])
7422
- // )
7423
- // }
7424
- // if (that.leftAxis && that.bottomAxis) {
7425
- // that.renderComponents()
7426
- // if (that.options.orientation === 'vertical') {
7427
- // // that.bottomAxisLayer.call(that.bAxisFunc)
7428
- // if (that.options.data.bottom.rotate) {
7429
- // that.bottomAxisLayer.selectAll('text')
7430
- // .attr('transform', `rotate(${((that.options.data.bottom && that.options.data.bottom.rotate) || 0)})`)
7431
- // .style('text-anchor', `${((that.options.data.bottom && that.options.data.bottom.rotate) || 0) === 0 ? 'middle' : 'end'}`)
7432
- // .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`)
7433
- // }
7434
- // }
7435
- // }
7436
7348
  };
7437
-
7438
7349
  var el = document.getElementById(this.elementId);
7439
7350
  if (el) {
7440
7351
  el.classList.add('websy-chart');
@@ -7948,7 +7859,7 @@ var WebsyChart = /*#__PURE__*/function () {
7948
7859
  }
7949
7860
  }
7950
7861
  // Check to see if we need to balance the min and max values
7951
- if (this.options.balancedMinMax) {
7862
+ if (this.options.balancedMinMax === true) {
7952
7863
  if (this.options.orientation === 'horizontal') {
7953
7864
  var biggestBottom = Math.max(Math.abs(this.options.data.bottom.min), this.options.data.bottom.max);
7954
7865
  this.options.data.bottom.min = 1 - biggestBottom;