@websy/websy-designs 1.7.3 → 1.7.5

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.
@@ -7095,6 +7095,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
7095
7095
  minusIcon: WebsyDesigns.Icons.MinusFilled
7096
7096
  };
7097
7097
  this.options = _extends({}, DEFAULTS, options);
7098
+ this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
7098
7099
  this.sizes = {};
7099
7100
  this.currentData = [];
7100
7101
  this.scrollDragging = false;
@@ -7117,7 +7118,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
7117
7118
  var el = document.getElementById(this.elementId);
7118
7119
 
7119
7120
  if (el) {
7120
- 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' : '', "'>\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 </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\"></div>\n <div id=\"").concat(this.elementId, "_loadingContainer\"></div>\n </div>\n ");
7121
+ 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' : '', "'>\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 <div id=\"").concat(this.elementId, "_touchScroller\" class=\"websy-table-touch-scroller hidden\"></div>\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\"></div>\n <div id=\"").concat(this.elementId, "_loadingContainer\"></div>\n </div>\n ");
7121
7122
 
7122
7123
  if (this.options.paging === 'pages') {
7123
7124
  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 ");
@@ -7126,6 +7127,9 @@ var WebsyTable3 = /*#__PURE__*/function () {
7126
7127
  el.innerHTML = html;
7127
7128
  el.addEventListener('click', this.handleClick.bind(this));
7128
7129
  el.addEventListener('mousedown', this.handleMouseDown.bind(this));
7130
+ el.addEventListener('touchstart', this.handleTouchStart.bind(this));
7131
+ window.addEventListener('touchmove', this.handleTouchMove.bind(this));
7132
+ window.addEventListener('touchend', this.handleTouchEnd.bind(this));
7129
7133
  window.addEventListener('mousemove', this.handleMouseMove.bind(this));
7130
7134
  window.addEventListener('mouseup', this.handleMouseUp.bind(this));
7131
7135
  var scrollEl = document.getElementById("".concat(this.elementId, "_tableBody"));
@@ -7192,6 +7196,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
7192
7196
  bodyHtml += "<tr class=\"websy-table-row\">";
7193
7197
  row.forEach(function (cell, cellIndex) {
7194
7198
  var sizeIndex = cell.level || cellIndex;
7199
+ var colIndex = cell.index || cellIndex;
7195
7200
 
7196
7201
  if (typeof sizingColumns[sizeIndex] === 'undefined' || sizingColumns[sizeIndex].show === false) {
7197
7202
  return; // need to revisit this logic
@@ -7227,14 +7232,14 @@ var WebsyTable3 = /*#__PURE__*/function () {
7227
7232
  } // console.log('rowspan', cell.rowspan)
7228
7233
 
7229
7234
 
7230
- bodyHtml += "<td \n class='websy-table-cell ".concat(sizeIndex < _this42.pinnedColumns ? 'pinned' : 'unpinned', " ").concat((cell.classes || []).join(' '), " ").concat((sizingColumns[sizeIndex].classes || []).join(' '), "'\n style='").concat(style, "'\n data-info='").concat(cell.value, "'\n colspan='").concat(cell.colspan || 1, "'\n rowspan='").concat(cell.rowspan || 1, "'\n data-row-index='").concat(rowIndex, "'\n data-cell-index='").concat(cellIndex, "'\n data-col-index='").concat(sizeIndex, "'\n "); // if (useWidths === true) {
7235
+ bodyHtml += "<td \n class='websy-table-cell ".concat(sizeIndex < _this42.pinnedColumns ? 'pinned' : 'unpinned', " ").concat((cell.classes || []).join(' '), " ").concat((sizingColumns[sizeIndex].classes || []).join(' '), "'\n style='").concat(style, "'\n data-info='").concat(cell.value, "'\n colspan='").concat(cell.colspan || 1, "'\n rowspan='").concat(cell.rowspan || 1, "'\n data-row-index='").concat(rowIndex, "'\n data-cell-index='").concat(cellIndex, "'\n data-col-index='").concat(colIndex, "'\n "); // if (useWidths === true) {
7231
7236
  // bodyHtml += `
7232
7237
  // style='width: ${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}px!important'
7233
7238
  // width='${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}'
7234
7239
  // `
7235
7240
  // }
7236
7241
 
7237
- bodyHtml += "\n ><div \n style='".concat(divStyle, "' \n class='websy-table-cell-content'\n data-row-index='").concat(rowIndex, "'\n data-cell-index='").concat(cellIndex, "'\n data-col-index='").concat(sizeIndex, "'\n >");
7242
+ bodyHtml += "\n ><div \n style='".concat(divStyle, "' \n class='websy-table-cell-content'\n data-row-index='").concat(rowIndex, "'\n data-cell-index='").concat(cellIndex, "'\n data-col-index='").concat(colIndex, "'\n >");
7238
7243
 
7239
7244
  if (cell.expandable === true) {
7240
7245
  bodyHtml += "<i \n data-row-index='".concat(rowIndex, "'\n data-col-index='").concat(cell.level || cellIndex, "'\n class='websy-table-cell-expand'\n >").concat(_this42.options.plusIcon, "</i>");
@@ -7630,6 +7635,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
7630
7635
  }, {
7631
7636
  key: "handleMouseDown",
7632
7637
  value: function handleMouseDown(event) {
7638
+ if (this.isTouchDevice === true) {
7639
+ return;
7640
+ }
7641
+
7633
7642
  if (event.target.classList.contains('websy-scroll-handle-y')) {
7634
7643
  // set up the scroll start values
7635
7644
  this.scrollDragging = true;
@@ -7682,8 +7691,99 @@ var WebsyTable3 = /*#__PURE__*/function () {
7682
7691
  if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
7683
7692
  this.scrollX(Math.max(-5, Math.min(5, event.deltaX)));
7684
7693
  } else {
7694
+ console.log('delta', event.deltaY);
7685
7695
  this.scrollY(Math.max(-5, Math.min(5, event.deltaY)));
7686
7696
  }
7697
+ } else if (this.options.onNativeScroll) {
7698
+ var el = document.getElementById("".concat(this.elementId, "_tableBody"));
7699
+ this.options.onNativeScroll(el.scrollTop);
7700
+ }
7701
+ }
7702
+ }, {
7703
+ key: "handleTouchEnd",
7704
+ value: function handleTouchEnd(event) {
7705
+ console.log('touch end fired');
7706
+
7707
+ if (typeof event.targetTouches !== 'undefined') {
7708
+ this.isTouchScrolling = false;
7709
+ this.touchEndTime = new Date().getTime();
7710
+ this.isPerpetual = true; // this.perpetualScroll()
7711
+
7712
+ this.touchStartTime = null;
7713
+ var touchScrollEl = document.getElementById("".concat(this.elementId, "_touchScroller"));
7714
+ touchScrollEl.classList.add('hidden');
7715
+ }
7716
+ }
7717
+ }, {
7718
+ key: "handleTouchMove",
7719
+ value: function handleTouchMove(event) {
7720
+ console.log(event.target.classList);
7721
+
7722
+ if (this.isTouchScrolling === true) {
7723
+ event.preventDefault();
7724
+ event.stopPropagation();
7725
+
7726
+ if (typeof event.targetTouches !== 'undefined' && event.targetTouches.length > 0) {
7727
+ var deltaX = this.mouseXStart - event.targetTouches[0].pageX;
7728
+ var deltaY = this.mouseYStart - event.targetTouches[0].pageY; // need to adjust the delta so that it scrolls at a reasonable speed/distance
7729
+
7730
+ var scrollHandleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
7731
+ var scrollHandleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle")); // if (Math.abs(deltaY) > this.sizes.cellHeight) {
7732
+ // this.isTouchScrolling = true
7733
+ // }
7734
+ // else {
7735
+ // this.isTouchScrolling = false
7736
+ // }
7737
+
7738
+ console.log('delta init', deltaY); // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
7739
+ // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
7740
+ // console.log('delta', deltaY)
7741
+ // NW
7742
+ // else if (Math.abs(deltaX) > 50) {
7743
+ // this.isTouchScrolling = false
7744
+ // }
7745
+
7746
+ this.currentClientY = event.targetTouches[0].pageY;
7747
+ this.currentTouchtime = new Date().getTime(); // end
7748
+ // delta = Math.min(10, delta)
7749
+ // delta = Math.max(-10, delta)
7750
+
7751
+ if (this.isTouchScrolling === true) {
7752
+ // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
7753
+ if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 10) {
7754
+ this.scrollX(Math.max(-5, Math.min(5, deltaX)));
7755
+ } else {
7756
+ this.scrollY(Math.max(-5, Math.min(5, deltaY)));
7757
+ }
7758
+ }
7759
+ }
7760
+ }
7761
+ }
7762
+ }, {
7763
+ key: "handleTouchStart",
7764
+ value: function handleTouchStart(event) {
7765
+ if (event.target.classList.contains('websy-table-cell-expand')) {
7766
+ return;
7767
+ }
7768
+
7769
+ if (event.target.classList.contains('websy-table-cell-collapse')) {
7770
+ return;
7771
+ }
7772
+
7773
+ console.log(event.target.classList);
7774
+
7775
+ if (this.options.virtualScroll === true) {
7776
+ this.touchStartTime = new Date().getTime();
7777
+ this.isTouchScrolling = true;
7778
+ this.isPerpetual = false;
7779
+ this.mouseYStart = event.targetTouches[0].pageY;
7780
+ this.mouseXStart = event.targetTouches[0].pageX;
7781
+ var touchScrollEl = document.getElementById("".concat(this.elementId, "_touchScroller"));
7782
+ touchScrollEl.classList.remove('hidden');
7783
+ var handleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
7784
+ this.handleYStart = handleYEl.offsetTop;
7785
+ var handleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
7786
+ this.handleXStart = handleXEl.offsetLeft;
7687
7787
  }
7688
7788
  }
7689
7789
  }, {
@@ -7712,6 +7812,52 @@ var WebsyTable3 = /*#__PURE__*/function () {
7712
7812
  value: function hideLoading() {
7713
7813
  this.loadingDialog.hide();
7714
7814
  }
7815
+ }, {
7816
+ key: "perpetualScroll",
7817
+ value: function perpetualScroll() {
7818
+ var _this47 = this;
7819
+
7820
+ // if the currentTouchtime and touchEndTime are more than 300ms apart then we abort the perpetual scroll
7821
+ if (this.touchEndTime - this.currentTouchtime > 300) {
7822
+ return;
7823
+ } // get the difference in time between when the touch initially started and when it ended
7824
+ // the longer the touch duration, the slower the scroll
7825
+
7826
+
7827
+ var touchDuration = this.touchEndTime - this.touchStartTime; // get the distance moved between when the touch initially started and when it ended
7828
+
7829
+ var touchDistance = this.currentClientY - this.mouseYStart; // the bigger the distance, the more we scroll
7830
+ // use the duration and distance to calculate the duration of the perpetual scroll
7831
+
7832
+ var perpetualDistance = Math.abs(touchDistance * (1 / (touchDuration / 1000)));
7833
+ var perpetualDuration = touchDuration * 1.5 / 1000;
7834
+ var requiredFrames = Math.abs(Math.ceil(perpetualDistance / this.sizes.cellHeight));
7835
+ var fps = requiredFrames / perpetualDuration;
7836
+ var direction = touchDistance > 0 ? -1 : 1;
7837
+
7838
+ var _loop2 = function _loop2(i) {
7839
+ setTimeout(function () {
7840
+ var delta = _this47.mouseYStart - _this47.currentClientY + _this47.sizes.cellHeight * (i + 1) * direction;
7841
+ delta = Math.min(10, delta);
7842
+ delta = Math.max(-10, delta); // only run this if isPerpetual === true
7843
+ // this value is reset to false on touchStart
7844
+
7845
+ if (_this47.isPerpetual === true) {
7846
+ // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
7847
+ // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 200)))
7848
+ _this47.scrollY(Math.max(-5, Math.min(5, delta)));
7849
+
7850
+ if (_this47.scrollTimeout) {
7851
+ clearTimeout(_this47.scrollTimeout);
7852
+ }
7853
+ }
7854
+ }, 1000 / fps * i);
7855
+ };
7856
+
7857
+ for (var i = 0; i < requiredFrames; i++) {
7858
+ _loop2(i);
7859
+ }
7860
+ }
7715
7861
  }, {
7716
7862
  key: "render",
7717
7863
  value: function render(data) {
@@ -7997,7 +8143,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
7997
8143
 
7998
8144
  var WebsyChart = /*#__PURE__*/function () {
7999
8145
  function WebsyChart(elementId, options) {
8000
- var _this47 = this;
8146
+ var _this48 = this;
8001
8147
 
8002
8148
  _classCallCheck(this, WebsyChart);
8003
8149
 
@@ -8057,7 +8203,7 @@ var WebsyChart = /*#__PURE__*/function () {
8057
8203
  var forBrush = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
8058
8204
  var xAxis = 'bottom';
8059
8205
 
8060
- if (_this47.options.orientation === 'horizontal') {
8206
+ if (_this48.options.orientation === 'horizontal') {
8061
8207
  xAxis = 'left';
8062
8208
  }
8063
8209
 
@@ -8068,13 +8214,13 @@ var WebsyChart = /*#__PURE__*/function () {
8068
8214
  xAxis += 'Axis';
8069
8215
  var output;
8070
8216
 
8071
- var width = _this47.options.data[xAxis.replace('Brush', '').replace('Axis', '')].bandWidth; // if (this.customBottomRange) {
8217
+ var width = _this48.options.data[xAxis.replace('Brush', '').replace('Axis', '')].bandWidth; // if (this.customBottomRange) {
8072
8218
 
8073
8219
 
8074
- for (var index = 0; index < _this47.customBottomRange.length; index++) {
8075
- if (input > _this47.customBottomRange[index]) {
8076
- if (_this47.customBottomRange[index + 1]) {
8077
- if (input < _this47.customBottomRange[index + 1]) {
8220
+ for (var index = 0; index < _this48.customBottomRange.length; index++) {
8221
+ if (input > _this48.customBottomRange[index]) {
8222
+ if (_this48.customBottomRange[index + 1]) {
8223
+ if (input < _this48.customBottomRange[index + 1]) {
8078
8224
  output = index;
8079
8225
  break;
8080
8226
  }
@@ -8312,10 +8458,10 @@ var WebsyChart = /*#__PURE__*/function () {
8312
8458
  }, {
8313
8459
  key: "handleEventMouseMove",
8314
8460
  value: function handleEventMouseMove(event, d) {
8315
- var _this48 = this;
8461
+ var _this49 = this;
8316
8462
 
8317
8463
  var bisectDate = d3.bisector(function (d) {
8318
- return _this48.parseX(d.x.value);
8464
+ return _this49.parseX(d.x.value);
8319
8465
  }).left;
8320
8466
 
8321
8467
  if (this.options.showTrackingLine === true && d3.pointer(event)) {
@@ -8354,9 +8500,9 @@ var WebsyChart = /*#__PURE__*/function () {
8354
8500
  }
8355
8501
 
8356
8502
  this.options.data.series.forEach(function (s) {
8357
- if (_this48.options.data[xData].scale !== 'Time') {
8503
+ if (_this49.options.data[xData].scale !== 'Time') {
8358
8504
  // if (this.customBottomRange && this.customBottomRange.length > 0) {
8359
- xPoint = _this48.customBottomRange[x0] + (_this48.customBottomRange[x0 + 1] - _this48.customBottomRange[x0]) / 2; // }
8505
+ xPoint = _this49.customBottomRange[x0] + (_this49.customBottomRange[x0 + 1] - _this49.customBottomRange[x0]) / 2; // }
8360
8506
  // else {
8361
8507
  // xPoint = this[xAxis](this.parseX(xLabel))
8362
8508
  // }
@@ -8379,13 +8525,13 @@ var WebsyChart = /*#__PURE__*/function () {
8379
8525
  var pointA = s.data[index - 1];
8380
8526
  var pointB = s.data[index];
8381
8527
 
8382
- if (_this48.options.orientation === 'horizontal') {
8528
+ if (_this49.options.orientation === 'horizontal') {
8383
8529
  pointA = _toConsumableArray(s.data).reverse()[index - 1];
8384
8530
  pointB = _toConsumableArray(s.data).reverse()[index];
8385
8531
  }
8386
8532
 
8387
8533
  if (pointA && !pointB) {
8388
- xPoint = _this48[xAxis](_this48.parseX(pointA.x.value));
8534
+ xPoint = _this49[xAxis](_this49.parseX(pointA.x.value));
8389
8535
  tooltipTitle = pointA.x.value;
8390
8536
 
8391
8537
  if (!pointA.y.color) {
@@ -8395,12 +8541,12 @@ var WebsyChart = /*#__PURE__*/function () {
8395
8541
  tooltipData.push(pointA.y);
8396
8542
 
8397
8543
  if (typeof pointA.x.value.getTime !== 'undefined') {
8398
- tooltipTitle = d3.timeFormat(_this48.options.dateFormat || _this48.options.calculatedTimeFormatPattern)(pointA.x.value);
8544
+ tooltipTitle = d3.timeFormat(_this49.options.dateFormat || _this49.options.calculatedTimeFormatPattern)(pointA.x.value);
8399
8545
  }
8400
8546
  }
8401
8547
 
8402
8548
  if (pointB && !pointA) {
8403
- xPoint = _this48[xAxis](_this48.parseX(pointB.x.value));
8549
+ xPoint = _this49[xAxis](_this49.parseX(pointB.x.value));
8404
8550
  tooltipTitle = pointB.x.value;
8405
8551
 
8406
8552
  if (!pointB.y.color) {
@@ -8410,14 +8556,14 @@ var WebsyChart = /*#__PURE__*/function () {
8410
8556
  tooltipData.push(pointB.y);
8411
8557
 
8412
8558
  if (typeof pointB.x.value.getTime !== 'undefined') {
8413
- tooltipTitle = d3.timeFormat(_this48.options.dateFormat || _this48.options.calculatedTimeFormatPattern)(pointB.x.value);
8559
+ tooltipTitle = d3.timeFormat(_this49.options.dateFormat || _this49.options.calculatedTimeFormatPattern)(pointB.x.value);
8414
8560
  }
8415
8561
  }
8416
8562
 
8417
8563
  if (pointA && pointB) {
8418
- var d0 = _this48[xAxis](_this48.parseX(pointA.x.value));
8564
+ var d0 = _this49[xAxis](_this49.parseX(pointA.x.value));
8419
8565
 
8420
- var d1 = _this48[xAxis](_this48.parseX(pointB.x.value));
8566
+ var d1 = _this49[xAxis](_this49.parseX(pointB.x.value));
8421
8567
 
8422
8568
  var mid = Math.abs(d0 - d1) / 2;
8423
8569
 
@@ -8426,7 +8572,7 @@ var WebsyChart = /*#__PURE__*/function () {
8426
8572
  tooltipTitle = pointB.x.value;
8427
8573
 
8428
8574
  if (typeof pointB.x.value.getTime !== 'undefined') {
8429
- tooltipTitle = d3.timeFormat(_this48.options.dateFormat || _this48.options.calculatedTimeFormatPattern)(pointB.x.value);
8575
+ tooltipTitle = d3.timeFormat(_this49.options.dateFormat || _this49.options.calculatedTimeFormatPattern)(pointB.x.value);
8430
8576
  }
8431
8577
 
8432
8578
  if (!pointB.y.color) {
@@ -8439,7 +8585,7 @@ var WebsyChart = /*#__PURE__*/function () {
8439
8585
  tooltipTitle = pointA.x.value;
8440
8586
 
8441
8587
  if (typeof pointB.x.value.getTime !== 'undefined') {
8442
- tooltipTitle = d3.timeFormat(_this48.options.dateFormat || _this48.options.calculatedTimeFormatPattern)(pointB.x.value);
8588
+ tooltipTitle = d3.timeFormat(_this49.options.dateFormat || _this49.options.calculatedTimeFormatPattern)(pointB.x.value);
8443
8589
  }
8444
8590
 
8445
8591
  if (!pointA.y.color) {
@@ -8540,8 +8686,10 @@ var WebsyChart = /*#__PURE__*/function () {
8540
8686
  this.defs = this.svg.append('defs');
8541
8687
  this.clip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_clip")).append('rect');
8542
8688
  this.xAxisClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_xAxisClip")).append('rect');
8689
+ this.yAxisClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_yAxisClip")).append('rect');
8543
8690
  this.brushClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_brushclip")).append('rect');
8544
- this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer');
8691
+ this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer'); // .attr('clip-path', `url(#${this.elementId}_yAxisClip)`).append('g')
8692
+
8545
8693
  this.rightAxisLayer = this.svg.append('g').attr('class', 'right-axis-layer');
8546
8694
  this.bottomAxisLayer = this.svg.append('g').attr('class', 'bottom-axis-layer').attr('clip-path', "url(#".concat(this.elementId, "_xAxisClip)")).append('g');
8547
8695
  this.leftAxisLabel = this.svg.append('g').attr('class', 'left-axis-label-layer');
@@ -8572,7 +8720,7 @@ var WebsyChart = /*#__PURE__*/function () {
8572
8720
  }, {
8573
8721
  key: "render",
8574
8722
  value: function render(options) {
8575
- var _this49 = this;
8723
+ var _this50 = this;
8576
8724
 
8577
8725
  /* global d3 options WebsyUtils */
8578
8726
  if (typeof options !== 'undefined') {
@@ -8651,7 +8799,7 @@ var WebsyChart = /*#__PURE__*/function () {
8651
8799
  this.options.data.series.map(function (s, i) {
8652
8800
  return {
8653
8801
  value: s.label || s.key,
8654
- color: s.color || _this49.options.colors[i % _this49.options.colors.length]
8802
+ color: s.color || _this50.options.colors[i % _this50.options.colors.length]
8655
8803
  };
8656
8804
  });
8657
8805
  }
@@ -8993,10 +9141,18 @@ var WebsyChart = /*#__PURE__*/function () {
8993
9141
  this.symbolLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8994
9142
  this.refLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8995
9143
  this.trackingLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8996
- this.brushLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height, ")"));
8997
9144
  this.clip.attr('transform', "translate(".concat(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);
8998
- this.xAxisClip.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(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);
8999
- this.brushClip.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height, ")")).attr('width', this.plotWidth).attr('height', this.options.brushHeight);
9145
+
9146
+ if (this.options.orientation === 'horizontal') {
9147
+ this.brushLayer.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
9148
+ this.yAxisClip.attr('transform', "translate(".concat(this.options.brushHeight + this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")")).attr('width', this.options.margin.axisLeft - this.options.brushHeight).attr('height', this.plotHeight);
9149
+ this.brushClip.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")")).attr('height', this.plotHeight).attr('width', this.options.brushHeight);
9150
+ } else {
9151
+ this.brushLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height, ")"));
9152
+ this.xAxisClip.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(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);
9153
+ this.brushClip.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop + this.plotHeight + longestBottomBounds.height, ")")).attr('width', this.plotWidth).attr('height', this.options.brushHeight);
9154
+ }
9155
+
9000
9156
  this.eventLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
9001
9157
  var that = this;
9002
9158
  this.eventLayer.attr('x', 0).attr('y', 0).attr('width', this.plotWidth).attr('height', this.plotHeight).attr('fill-opacity', '0'); // this.tooltip.transform(this.options.margin.left + this.options.margin.axisLeft, this.options.margin.top + this.options.margin.axisTop)
@@ -9012,6 +9168,7 @@ var WebsyChart = /*#__PURE__*/function () {
9012
9168
 
9013
9169
  if (this.options.orientation === 'horizontal') {
9014
9170
  leftBrushRange = [this.plotHeight, 0];
9171
+ bottomBrushRange = [0, this.options.brushHeight];
9015
9172
  }
9016
9173
 
9017
9174
  this.widthForCalc = proposedBandWidth * noOfPoints; // + totalPadding
@@ -9035,28 +9192,28 @@ var WebsyChart = /*#__PURE__*/function () {
9035
9192
  if (this.options.data[customRangeSideLC].data && this.options.data[customRangeSideLC].data[0] && (this.options.data[customRangeSideLC].data[0].valueCount || 1) && this.options.data[customRangeSideLC].scale === 'Ordinal') {
9036
9193
  var acc = 0;
9037
9194
  this["custom".concat(customRangeSide, "Range")] = [0].concat(_toConsumableArray(this.options.data[customRangeSideLC].data.map(function (d, index, arr) {
9038
- var adjustment = _this49.bandPadding * index + _this49.bandPadding; // if (this.options.data.bottom.padding) {
9195
+ var adjustment = _this50.bandPadding * index + _this50.bandPadding; // if (this.options.data.bottom.padding) {
9039
9196
  // adjustment = (this.widthForCalc * this.options.data.bottom.padding) / (arr.length * 2)
9040
9197
  // }
9041
9198
 
9042
- var start = _this49.widthForCalc / noOfPoints * acc;
9199
+ var start = _this50.widthForCalc / noOfPoints * acc;
9043
9200
 
9044
9201
  for (var i = 0; i < (d.valueCount || 1); i++) {
9045
9202
  var pos = i * proposedBandWidth;
9046
9203
 
9047
- _this49["custom".concat(customRangeSide, "DetailRange")].push(start + adjustment + pos);
9204
+ _this50["custom".concat(customRangeSide, "DetailRange")].push(start + adjustment + pos);
9048
9205
  }
9049
9206
 
9050
- acc += _this49.options.grouping !== 'stacked' && _this49.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
9051
- var end = _this49.widthForCalc / noOfPoints * acc; // this.customBottomBrushRange.push((end + adjustment) * (this.plotWidth / this.widthForCalc))
9207
+ acc += _this50.options.grouping !== 'stacked' && _this50.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
9208
+ var end = _this50.widthForCalc / noOfPoints * acc; // this.customBottomBrushRange.push((end + adjustment) * (this.plotWidth / this.widthForCalc))
9052
9209
 
9053
9210
  return end + adjustment;
9054
9211
  })));
9055
9212
  acc = 0;
9056
9213
  this["custom".concat(customRangeSide, "BrushRange")] = [0].concat(_toConsumableArray(this.options.data[customRangeSideLC].data.map(function (d, index, arr) {
9057
- var adjustment = _this49.brushBandPadding * index + _this49.brushBandPadding;
9058
- acc += _this49.options.grouping !== 'stacked' && _this49.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
9059
- return (_this49.options.orientation === 'vertical' ? _this49.plotWidth : _this49.plotHeight) / noOfPoints * acc;
9214
+ var adjustment = _this50.brushBandPadding * index + _this50.brushBandPadding;
9215
+ acc += _this50.options.grouping !== 'stacked' && _this50.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
9216
+ return (_this50.options.orientation === 'vertical' ? _this50.plotWidth : _this50.plotHeight) / noOfPoints * acc;
9060
9217
  })));
9061
9218
  } // }
9062
9219
 
@@ -9104,6 +9261,10 @@ var WebsyChart = /*#__PURE__*/function () {
9104
9261
  brushMethod = 'brushY';
9105
9262
  brushLength = this.options.brushHeight;
9106
9263
  brushThickness = this.plotHeight;
9264
+
9265
+ if (this.brushNeeded) {
9266
+ brushEnd = this.plotHeight * (this.plotHeight / (this.widthForCalc + this.totalBandPadding));
9267
+ }
9107
9268
  } else {
9108
9269
  if (this.brushNeeded) {
9109
9270
  brushEnd = this.plotWidth * (this.plotWidth / (this.widthForCalc + this.totalBandPadding));
@@ -9234,7 +9395,7 @@ var WebsyChart = /*#__PURE__*/function () {
9234
9395
 
9235
9396
  if (this.options.data.bottom.formatter) {
9236
9397
  this.bAxisFunc.tickFormat(function (d) {
9237
- return _this49.options.data.bottom.formatter(d);
9398
+ return _this50.options.data.bottom.formatter(d);
9238
9399
  });
9239
9400
  }
9240
9401
 
@@ -9246,14 +9407,14 @@ var WebsyChart = /*#__PURE__*/function () {
9246
9407
 
9247
9408
  if (this.customBottomRange.length > 0) {
9248
9409
  this.bottomAxisLayer.selectAll('g').attr('transform', function (d, i) {
9249
- return "translate(".concat(_this49.customBottomRange[i] + (_this49.customBottomRange[i + 1] - _this49.customBottomRange[i]) / 2, ", 0)");
9410
+ return "translate(".concat(_this50.customBottomRange[i] + (_this50.customBottomRange[i + 1] - _this50.customBottomRange[i]) / 2, ", 0)");
9250
9411
  });
9251
9412
  }
9252
9413
  } // Configure the left axis
9253
9414
 
9254
9415
 
9255
9416
  var leftDomain = this.createDomain('left');
9256
- var leftBrushDomain = this.createDomain('left', true);
9417
+ var leftBrushDomain = this.createDomain('left');
9257
9418
  var rightDomain = this.createDomain('right');
9258
9419
  this.leftAxis = d3["scale".concat(this.options.data.left.scale || 'Linear')]().domain(leftDomain).range(leftRange);
9259
9420
  this.leftBrushAxis = d3["scale".concat(this.options.data.left.scale || 'Linear')]().domain(leftBrushDomain).range(leftBrushRange);
@@ -9268,8 +9429,8 @@ var WebsyChart = /*#__PURE__*/function () {
9268
9429
 
9269
9430
  if (this.options.margin.axisLeft > 0) {
9270
9431
  this.leftAxisLayer.call(d3.axisLeft(this.leftAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
9271
- if (_this49.options.data.left.formatter) {
9272
- d = _this49.options.data.left.formatter(d);
9432
+ if (_this50.options.data.left.formatter) {
9433
+ d = _this50.options.data.left.formatter(d);
9273
9434
  }
9274
9435
 
9275
9436
  return d;
@@ -9277,7 +9438,7 @@ var WebsyChart = /*#__PURE__*/function () {
9277
9438
 
9278
9439
  if (this.customLeftRange.length > 0) {
9279
9440
  this.leftAxisLayer.selectAll('g').attr('transform', function (d, i) {
9280
- return "translate(0, ".concat(_this49.customLeftRange[i] + (_this49.customLeftRange[i + 1] - _this49.customLeftRange[i]) / 2, ")");
9441
+ return "translate(0, ".concat(_this50.customLeftRange[i] + (_this50.customLeftRange[i + 1] - _this50.customLeftRange[i]) / 2, ")");
9281
9442
  });
9282
9443
  }
9283
9444
  }
@@ -9310,8 +9471,8 @@ var WebsyChart = /*#__PURE__*/function () {
9310
9471
 
9311
9472
  if (this.options.margin.axisRight > 0 && (this.options.data.right.min !== 0 || this.options.data.right.max !== 0)) {
9312
9473
  this.rightAxisLayer.call(d3.axisRight(this.rightAxis).ticks(this.options.data.right.ticks || 5).tickFormat(function (d) {
9313
- if (_this49.options.data.right.formatter) {
9314
- d = _this49.options.data.right.formatter(d);
9474
+ if (_this50.options.data.right.formatter) {
9475
+ d = _this50.options.data.right.formatter(d);
9315
9476
  }
9316
9477
 
9317
9478
  return d;
@@ -9357,57 +9518,60 @@ var WebsyChart = /*#__PURE__*/function () {
9357
9518
  }, {
9358
9519
  key: "renderComponents",
9359
9520
  value: function renderComponents() {
9360
- var _this50 = this;
9521
+ var _this51 = this;
9361
9522
 
9362
9523
  // Draw the series data
9363
9524
  this.renderedKeys = {};
9364
9525
  this.options.data.series.forEach(function (series, index) {
9365
9526
  if (!series.key) {
9366
- series.key = _this50.createIdentity();
9527
+ series.key = _this51.createIdentity();
9367
9528
  }
9368
9529
 
9369
9530
  if (!series.color) {
9370
- series.color = _this50.options.colors[index % _this50.options.colors.length];
9531
+ series.color = _this51.options.colors[index % _this51.options.colors.length];
9371
9532
  }
9372
9533
 
9373
- _this50["render".concat(series.type || 'bar')](series, index);
9534
+ _this51["render".concat(series.type || 'bar')](series, index);
9374
9535
 
9375
- _this50.renderLabels(series, index);
9536
+ _this51.renderLabels(series, index);
9376
9537
 
9377
- _this50.renderedKeys[series.key] = series.type;
9538
+ _this51.renderedKeys[series.key] = series.type;
9378
9539
  });
9379
9540
  this.refLineLayer.selectAll('.reference-line').remove();
9380
9541
  this.refLineLayer.selectAll('.reference-line-label').remove();
9381
9542
 
9382
9543
  if (this.options.refLines && this.options.refLines.length > 0) {
9383
9544
  this.options.refLines.forEach(function (l) {
9384
- return _this50.renderRefLine(l);
9545
+ return _this51.renderRefLine(l);
9385
9546
  });
9386
9547
  }
9387
9548
  }
9388
9549
  }, {
9389
9550
  key: "renderarea",
9390
9551
  value: function renderarea(series, index) {
9391
- var _this51 = this;
9552
+ var _this52 = this;
9392
9553
 
9393
9554
  /* global d3 series index */
9394
9555
  var drawArea = function drawArea(xAxis, yAxis, curveStyle) {
9395
9556
  return d3.area().x(function (d) {
9396
- // return this[`${xAxis}Axis`](this.parseX(d.x.value))
9397
- var xIndex = _this51[xAxis + 'Axis'].domain().indexOf(d.x.value);
9557
+ if (_this52.options.data[xAxis].scale === 'Time') {
9558
+ return _this52["".concat(xAxis, "Axis")](_this52.parseX(d.x.value));
9559
+ } else {
9560
+ var xIndex = _this52[xAxis + 'Axis'].domain().indexOf(d.x.value);
9398
9561
 
9399
- var xPos = _this51["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9562
+ var xPos = _this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9400
9563
 
9401
- if (_this51["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9402
- xPos = xPos + (_this51["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9403
- }
9564
+ if (_this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9565
+ xPos = xPos + (_this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9566
+ }
9404
9567
 
9405
- return xPos;
9568
+ return xPos;
9569
+ }
9406
9570
  }).y0(function (d) {
9407
- return _this51["".concat(yAxis, "Axis")](0);
9571
+ return _this52["".concat(yAxis, "Axis")](0);
9408
9572
  }).y1(function (d) {
9409
- return _this51["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9410
- }).curve(d3[curveStyle || _this51.options.curveStyle]);
9573
+ return _this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9574
+ }).curve(d3[curveStyle || _this52.options.curveStyle]);
9411
9575
  };
9412
9576
 
9413
9577
  var xAxis = 'bottom';
@@ -9445,7 +9609,7 @@ var WebsyChart = /*#__PURE__*/function () {
9445
9609
  }, {
9446
9610
  key: "renderbar",
9447
9611
  value: function renderbar(series, index) {
9448
- var _this52 = this;
9612
+ var _this53 = this;
9449
9613
 
9450
9614
  /* global series index d3 */
9451
9615
  var xAxis = 'bottom';
@@ -9485,7 +9649,7 @@ var WebsyChart = /*#__PURE__*/function () {
9485
9649
  var output;
9486
9650
 
9487
9651
  if (this.options.orientation === 'horizontal') {
9488
- output = this["".concat(yAxis, "Axis")](Math.abs(d.y.value));
9652
+ output = this["".concat(yAxis, "Axis")](Math.abs(d.y.value)); // output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
9489
9653
  } else {
9490
9654
  var x = getBarX.call(this, d, i, xAxis);
9491
9655
 
@@ -9534,15 +9698,7 @@ var WebsyChart = /*#__PURE__*/function () {
9534
9698
 
9535
9699
  if (this.processedX[d.x.value]) {
9536
9700
  xIndex = Math.max(0, this.processedX[d.x.value].indexOf(d.y.tooltipLabel));
9537
- } // let barAdjustment =
9538
- // (this.options.data[xAxis].bandWidth * xIndex) +
9539
- // (xIndex * this.options.groupPadding * 2) + this.options.groupPadding +
9540
- // (xAxis.indexOf('Brush') === -1 ? this.bandPadding : 1)
9541
- // let barAdjustment =
9542
- // (this.options.data[xAxis.replace('Brush', '')].step * xIndex) +
9543
- // this.options.groupPadding
9544
- // // (xAxis.indexOf('Brush') === -1 ? this.bandPadding : 1)
9545
-
9701
+ }
9546
9702
 
9547
9703
  var barAdjustment = this.options.data[xAxis].bandWidth * xIndex + (xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2 + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding);
9548
9704
 
@@ -9582,7 +9738,28 @@ var WebsyChart = /*#__PURE__*/function () {
9582
9738
  var barAdjustment = (xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2 + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding);
9583
9739
  output = this["custom".concat(xAxis.toInitialCaps(), "Range")][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + barAdjustment;
9584
9740
  } else {
9585
- output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)) + (d.y.index || i) * this.options.data[xAxis.replace('Brush', '')].barWidth;
9741
+ // output = this[`${xAxis}Axis`](this.parseX(d.x.value)) + ((d.y.index || i) * this.options.data[xAxis.replace('Brush', '')].barWidth)
9742
+ var xIndex = 0;
9743
+
9744
+ if (this.processedX[d.x.value]) {
9745
+ xIndex = Math.max(0, this.processedX[d.x.value].indexOf(d.y.tooltipLabel));
9746
+ }
9747
+
9748
+ var _barAdjustment2 = this.options.data[xAxis].bandWidth * xIndex + (xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2 + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding);
9749
+
9750
+ if (this["custom".concat(xAxis.toInitialCaps(), "Range")].length > 0) {
9751
+ output = this["custom".concat(xAxis.toInitialCaps(), "Range")][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + _barAdjustment2; // output = this[`custom${xAxis.toInitialCaps().replace('Brush', '')}DetailRange`][this[xAxis + 'Axis'].domain().indexOf(d.x.value)]
9752
+ } else {
9753
+ output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)) + _barAdjustment2;
9754
+ }
9755
+
9756
+ if (!this.processedX[d.x.value]) {
9757
+ this.processedX[d.x.value] = [];
9758
+ }
9759
+
9760
+ if (this.processedX[d.x.value].indexOf(d.y.tooltipLabel) === -1) {
9761
+ this.processedX[d.x.value].push(d.y.tooltipLabel);
9762
+ }
9586
9763
  }
9587
9764
  } else {
9588
9765
  if (this.options.grouping === 'stacked') {
@@ -9610,25 +9787,25 @@ var WebsyChart = /*#__PURE__*/function () {
9610
9787
 
9611
9788
  bars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
9612
9789
  bars.attr('width', function (d, i) {
9613
- return Math.abs(getBarWidth.call(_this52, d, i, xAxis));
9790
+ return Math.abs(getBarWidth.call(_this53, d, i, xAxis));
9614
9791
  }).attr('height', function (d, i) {
9615
- return getBarHeight.call(_this52, d, i, yAxis, xAxis);
9792
+ return getBarHeight.call(_this53, d, i, yAxis, xAxis);
9616
9793
  }).attr('x', function (d, i) {
9617
- return getBarX.call(_this52, d, i, xAxis);
9794
+ return getBarX.call(_this53, d, i, xAxis);
9618
9795
  }).attr('y', function (d, i) {
9619
- return getBarY.call(_this52, d, i, yAxis, xAxis);
9796
+ return getBarY.call(_this53, d, i, yAxis, xAxis);
9620
9797
  }) // .transition(this.transition)
9621
9798
  .attr('fill', function (d) {
9622
9799
  return d.y.color || d.color || series.color;
9623
9800
  });
9624
9801
  bars.enter().append('rect').attr('width', function (d, i) {
9625
- return Math.abs(getBarWidth.call(_this52, d, i, xAxis));
9802
+ return Math.abs(getBarWidth.call(_this53, d, i, xAxis));
9626
9803
  }).attr('height', function (d, i) {
9627
- return getBarHeight.call(_this52, d, i, yAxis, xAxis);
9804
+ return getBarHeight.call(_this53, d, i, yAxis, xAxis);
9628
9805
  }).attr('x', function (d, i) {
9629
- return getBarX.call(_this52, d, i, xAxis);
9806
+ return getBarX.call(_this53, d, i, xAxis);
9630
9807
  }).attr('y', function (d, i) {
9631
- return getBarY.call(_this52, d, i, yAxis, xAxis);
9808
+ return getBarY.call(_this53, d, i, yAxis, xAxis);
9632
9809
  }) // .transition(this.transition)
9633
9810
  .attr('fill', function (d) {
9634
9811
  return d.y.color || d.color || series.color;
@@ -9640,25 +9817,25 @@ var WebsyChart = /*#__PURE__*/function () {
9640
9817
  this.brushBarsInitialized[series.key] = true;
9641
9818
  brushBars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
9642
9819
  brushBars.attr('width', function (d, i) {
9643
- return Math.abs(getBarWidth.call(_this52, d, i, "".concat(xAxis, "Brush")));
9820
+ return Math.abs(getBarWidth.call(_this53, d, i, "".concat(xAxis, "Brush")));
9644
9821
  }).attr('height', function (d, i) {
9645
- return getBarHeight.call(_this52, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9822
+ return getBarHeight.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9646
9823
  }).attr('x', function (d, i) {
9647
- return getBarX.call(_this52, d, i, "".concat(xAxis, "Brush"));
9824
+ return getBarX.call(_this53, d, i, "".concat(xAxis, "Brush"));
9648
9825
  }).attr('y', function (d, i) {
9649
- return getBarY.call(_this52, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9826
+ return getBarY.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9650
9827
  }) // .transition(this.transition)
9651
9828
  .attr('fill', function (d) {
9652
9829
  return d.y.color || d.color || series.color;
9653
9830
  });
9654
9831
  brushBars.enter().append('rect').attr('width', function (d, i) {
9655
- return Math.abs(getBarWidth.call(_this52, d, i, "".concat(xAxis, "Brush")));
9832
+ return Math.abs(getBarWidth.call(_this53, d, i, "".concat(xAxis, "Brush")));
9656
9833
  }).attr('height', function (d, i) {
9657
- return getBarHeight.call(_this52, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9834
+ return getBarHeight.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9658
9835
  }).attr('x', function (d, i) {
9659
- return getBarX.call(_this52, d, i, "".concat(xAxis, "Brush"));
9836
+ return getBarX.call(_this53, d, i, "".concat(xAxis, "Brush"));
9660
9837
  }).attr('y', function (d, i) {
9661
- return getBarY.call(_this52, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9838
+ return getBarY.call(_this53, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9662
9839
  }) // .transition(this.transition)
9663
9840
  .attr('fill', function (d) {
9664
9841
  return d.y.color || d.color || series.color;
@@ -9676,7 +9853,7 @@ var WebsyChart = /*#__PURE__*/function () {
9676
9853
  }, {
9677
9854
  key: "renderLabels",
9678
9855
  value: function renderLabels(series, index) {
9679
- var _this53 = this;
9856
+ var _this54 = this;
9680
9857
 
9681
9858
  /* global series index d3 WebsyDesigns */
9682
9859
  var xAxis = 'bottom';
@@ -9695,15 +9872,15 @@ var WebsyChart = /*#__PURE__*/function () {
9695
9872
  var labels = this.labelLayer.selectAll(".label_".concat(series.key)).data(series.data);
9696
9873
  labels.exit().transition(this.transition).style('stroke-opacity', 1e-6).remove();
9697
9874
  labels.attr('x', function (d) {
9698
- return getLabelX.call(_this53, d, series.labelPosition);
9875
+ return getLabelX.call(_this54, d, series.labelPosition);
9699
9876
  }).attr('y', function (d) {
9700
- return getLabelY.call(_this53, d, series.labelPosition);
9877
+ return getLabelY.call(_this54, d, series.labelPosition);
9701
9878
  }).attr('class', "label_".concat(series.key)).attr('fill', function (d) {
9702
- if (_this53.options.grouping === 'stacked' && d.y.value === 0) {
9879
+ if (_this54.options.grouping === 'stacked' && d.y.value === 0) {
9703
9880
  return 'transparent';
9704
9881
  }
9705
9882
 
9706
- return _this53.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
9883
+ return _this54.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
9707
9884
  }).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).transition(this.transition).text(function (d) {
9708
9885
  return d.y.label || d.y.value;
9709
9886
  }).each(function (d, i) {
@@ -9728,15 +9905,15 @@ var WebsyChart = /*#__PURE__*/function () {
9728
9905
  }
9729
9906
  });
9730
9907
  labels.enter().append('text').attr('class', "label_".concat(series.key)).attr('x', function (d) {
9731
- return getLabelX.call(_this53, d, series.labelPosition);
9908
+ return getLabelX.call(_this54, d, series.labelPosition);
9732
9909
  }).attr('y', function (d) {
9733
- return getLabelY.call(_this53, d, series.labelPosition);
9910
+ return getLabelY.call(_this54, d, series.labelPosition);
9734
9911
  }).attr('alignment-baseline', 'central').attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle').attr('fill', function (d) {
9735
- if (_this53.options.grouping === 'stacked' && d.y.value === 0) {
9912
+ if (_this54.options.grouping === 'stacked' && d.y.value === 0) {
9736
9913
  return 'transparent';
9737
9914
  }
9738
9915
 
9739
- return _this53.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
9916
+ return _this54.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
9740
9917
  }).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).text(function (d) {
9741
9918
  return d.y.label || d.y.value;
9742
9919
  }).each(function (d, i) {
@@ -9814,34 +9991,36 @@ var WebsyChart = /*#__PURE__*/function () {
9814
9991
  }, {
9815
9992
  key: "renderline",
9816
9993
  value: function renderline(series, index) {
9817
- var _this54 = this;
9994
+ var _this55 = this;
9818
9995
 
9819
9996
  /* global series index d3 */
9820
9997
  var drawLine = function drawLine(xAxis, yAxis, curveStyle) {
9821
9998
  return d3.line().x(function (d) {
9822
- if (_this54.options.orientation === 'horizontal') {
9823
- return _this54["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9999
+ if (_this55.options.orientation === 'horizontal') {
10000
+ return _this55["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9824
10001
  } else {
9825
- var xIndex = _this54[xAxis + 'Axis'].domain().indexOf(d.x.value);
9826
-
9827
- var xPos = _this54["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
10002
+ if (_this55.options.data[xAxis].scale === 'Time') {
10003
+ return _this55["".concat(xAxis, "Axis")](_this55.parseX(d.x.value));
10004
+ } else {
10005
+ var xIndex = _this55[xAxis + 'Axis'].domain().indexOf(d.x.value);
9828
10006
 
9829
- if (_this54["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9830
- xPos = xPos + (_this54["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9831
- } // let adjustment = this.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : this.options.data[xAxis].bandWidth / 2
9832
- // return this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment
10007
+ var xPos = _this55["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9833
10008
 
10009
+ if (_this55["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
10010
+ xPos = xPos + (_this55["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
10011
+ }
9834
10012
 
9835
- return xPos;
10013
+ return xPos;
10014
+ }
9836
10015
  }
9837
10016
  }).y(function (d) {
9838
- if (_this54.options.orientation === 'horizontal') {
9839
- var adjustment = _this54.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : _this54.options.data[xAxis].bandWidth / 2;
9840
- return _this54["".concat(xAxis, "Axis")](_this54.parseX(d.x.value)) + adjustment;
10017
+ if (_this55.options.orientation === 'horizontal') {
10018
+ var adjustment = _this55.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : _this55.options.data[xAxis].bandWidth / 2;
10019
+ return _this55["".concat(xAxis, "Axis")](_this55.parseX(d.x.value)) + adjustment;
9841
10020
  } else {
9842
- return _this54["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
10021
+ return _this55["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9843
10022
  }
9844
- }).curve(d3[curveStyle || _this54.options.curveStyle]);
10023
+ }).curve(d3[curveStyle || _this55.options.curveStyle]);
9845
10024
  };
9846
10025
 
9847
10026
  var xAxis = 'bottom';
@@ -9955,14 +10134,14 @@ var WebsyChart = /*#__PURE__*/function () {
9955
10134
  }, {
9956
10135
  key: "rendersymbol",
9957
10136
  value: function rendersymbol(series, index) {
9958
- var _this55 = this;
10137
+ var _this56 = this;
9959
10138
 
9960
10139
  /* global d3 series index series.key */
9961
10140
  var drawSymbol = function drawSymbol(size) {
9962
10141
  return d3.symbol() // .type(d => {
9963
10142
  // return d3.symbols[0]
9964
10143
  // })
9965
- .size(size || _this55.options.symbolSize);
10144
+ .size(size || _this56.options.symbolSize);
9966
10145
  };
9967
10146
 
9968
10147
  var xAxis = 'bottom';
@@ -9991,21 +10170,25 @@ var WebsyChart = /*#__PURE__*/function () {
9991
10170
  // else {
9992
10171
  // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
9993
10172
  // }
9994
- var xIndex = _this55[xAxis + 'Axis'].domain().indexOf(d.x.value);
10173
+ var xIndex = _this56[xAxis + 'Axis'].domain().indexOf(d.x.value);
9995
10174
 
9996
- var xPos = _this55["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
10175
+ var xPos = _this56["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9997
10176
 
9998
- if (_this55["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9999
- xPos = xPos + (_this55["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
10177
+ if (_this56["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
10178
+ xPos = xPos + (_this56["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
10000
10179
  }
10001
10180
 
10002
- var adjustment = _this55.options.data[xAxis].scale === 'Time' || _this55.options.data[xAxis].scale === 'Linear' ? 0 : _this55.options.data[xAxis].bandWidth / 2;
10181
+ var adjustment = _this56.options.data[xAxis].scale === 'Time' || _this56.options.data[xAxis].scale === 'Linear' ? 0 : _this56.options.data[xAxis].bandWidth / 2;
10003
10182
 
10004
- if (_this55.options.orientation === 'horizontal') {
10005
- return "translate(".concat(_this55["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(xPos, ")");
10183
+ if (_this56.options.orientation === 'horizontal') {
10184
+ return "translate(".concat(_this56["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(xPos, ")");
10006
10185
  } else {
10007
- // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
10008
- return "translate(".concat(xPos, ", ").concat(_this55["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
10186
+ if (_this56.options.data[xAxis].scale === 'Time') {
10187
+ xPos = _this56["".concat(xAxis, "Axis")](_this56.parseX(d.x.value));
10188
+ } // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
10189
+
10190
+
10191
+ return "translate(".concat(xPos, ", ").concat(_this56["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
10009
10192
  }
10010
10193
  }); // Enter
10011
10194
 
@@ -10019,21 +10202,25 @@ var WebsyChart = /*#__PURE__*/function () {
10019
10202
  }).attr('class', function (d) {
10020
10203
  return "symbol symbol_".concat(series.key);
10021
10204
  }).attr('transform', function (d) {
10022
- var xIndex = _this55[xAxis + 'Axis'].domain().indexOf(d.x.value);
10205
+ var xIndex = _this56[xAxis + 'Axis'].domain().indexOf(d.x.value);
10023
10206
 
10024
- var xPos = _this55["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
10207
+ var xPos = _this56["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
10025
10208
 
10026
- if (_this55["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
10027
- xPos = xPos + (_this55["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
10209
+ if (_this56["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
10210
+ xPos = xPos + (_this56["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
10028
10211
  }
10029
10212
 
10030
- var adjustment = _this55.options.data[xAxis].scale === 'Time' || _this55.options.data[xAxis].scale === 'Linear' ? 0 : _this55.options.data[xAxis].bandWidth / 2;
10213
+ var adjustment = _this56.options.data[xAxis].scale === 'Time' || _this56.options.data[xAxis].scale === 'Linear' ? 0 : _this56.options.data[xAxis].bandWidth / 2;
10031
10214
 
10032
- if (_this55.options.orientation === 'horizontal') {
10033
- return "translate(".concat(_this55["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(xPos, ")");
10215
+ if (_this56.options.orientation === 'horizontal') {
10216
+ return "translate(".concat(_this56["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(xPos, ")");
10034
10217
  } else {
10035
- // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
10036
- return "translate(".concat(xPos, ", ").concat(_this55["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
10218
+ if (_this56.options.data[xAxis].scale === 'Time') {
10219
+ xPos = _this56["".concat(xAxis, "Axis")](_this56.parseX(d.x.value));
10220
+ } // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
10221
+
10222
+
10223
+ return "translate(".concat(xPos, ", ").concat(_this56["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
10037
10224
  }
10038
10225
  });
10039
10226
  }
@@ -10255,7 +10442,7 @@ var WebsyLegend = /*#__PURE__*/function () {
10255
10442
  }, {
10256
10443
  key: "resize",
10257
10444
  value: function resize() {
10258
- var _this56 = this;
10445
+ var _this57 = this;
10259
10446
 
10260
10447
  var el = document.getElementById(this.elementId);
10261
10448
 
@@ -10268,7 +10455,7 @@ var WebsyLegend = /*#__PURE__*/function () {
10268
10455
  // }
10269
10456
  var html = "\n <div class='text-".concat(this.options.align, "'>\n ");
10270
10457
  html += this._data.map(function (d, i) {
10271
- return _this56.getLegendItemHTML(d);
10458
+ return _this57.getLegendItemHTML(d);
10272
10459
  }).join('');
10273
10460
  html += "\n <div>\n ";
10274
10461
  el.innerHTML = html;
@@ -10445,7 +10632,7 @@ var WebsyMap = /*#__PURE__*/function () {
10445
10632
  }, {
10446
10633
  key: "render",
10447
10634
  value: function render() {
10448
- var _this57 = this;
10635
+ var _this58 = this;
10449
10636
 
10450
10637
  var mapEl = document.getElementById("".concat(this.elementId, "_map"));
10451
10638
  var legendEl = document.getElementById("".concat(this.elementId, "_map"));
@@ -10454,7 +10641,7 @@ var WebsyMap = /*#__PURE__*/function () {
10454
10641
  var legendData = this.options.data.polygons.map(function (s, i) {
10455
10642
  return {
10456
10643
  value: s.label || s.key,
10457
- color: s.color || _this57.options.colors[i % _this57.options.colors.length]
10644
+ color: s.color || _this58.options.colors[i % _this58.options.colors.length]
10458
10645
  };
10459
10646
  });
10460
10647
  var longestValue = legendData.map(function (s) {
@@ -10518,7 +10705,7 @@ var WebsyMap = /*#__PURE__*/function () {
10518
10705
 
10519
10706
  if (this.polygons) {
10520
10707
  this.polygons.forEach(function (p) {
10521
- return _this57.map.removeLayer(p);
10708
+ return _this58.map.removeLayer(p);
10522
10709
  });
10523
10710
  }
10524
10711
 
@@ -10576,18 +10763,18 @@ var WebsyMap = /*#__PURE__*/function () {
10576
10763
  }
10577
10764
 
10578
10765
  if (!p.options.color) {
10579
- p.options.color = _this57.options.colors[i % _this57.options.colors.length];
10766
+ p.options.color = _this58.options.colors[i % _this58.options.colors.length];
10580
10767
  }
10581
10768
 
10582
10769
  var pol = L.polygon(p.data.map(function (c) {
10583
10770
  return c.map(function (d) {
10584
10771
  return [d.Latitude, d.Longitude];
10585
10772
  });
10586
- }), p.options).addTo(_this57.map);
10773
+ }), p.options).addTo(_this58.map);
10587
10774
 
10588
- _this57.polygons.push(pol);
10775
+ _this58.polygons.push(pol);
10589
10776
 
10590
- _this57.map.fitBounds(pol.getBounds());
10777
+ _this58.map.fitBounds(pol.getBounds());
10591
10778
  });
10592
10779
  } // if (this.data.markers.length > 0) {
10593
10780
  // el.classList.remove('hidden')