@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.
@@ -6614,6 +6614,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
6614
6614
  minusIcon: WebsyDesigns.Icons.MinusFilled
6615
6615
  };
6616
6616
  this.options = _extends({}, DEFAULTS, options);
6617
+ this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
6617
6618
  this.sizes = {};
6618
6619
  this.currentData = [];
6619
6620
  this.scrollDragging = false;
@@ -6636,7 +6637,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
6636
6637
  var el = document.getElementById(this.elementId);
6637
6638
 
6638
6639
  if (el) {
6639
- 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 ");
6640
+ 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 ");
6640
6641
 
6641
6642
  if (this.options.paging === 'pages') {
6642
6643
  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 ");
@@ -6645,6 +6646,9 @@ var WebsyTable3 = /*#__PURE__*/function () {
6645
6646
  el.innerHTML = html;
6646
6647
  el.addEventListener('click', this.handleClick.bind(this));
6647
6648
  el.addEventListener('mousedown', this.handleMouseDown.bind(this));
6649
+ el.addEventListener('touchstart', this.handleTouchStart.bind(this));
6650
+ window.addEventListener('touchmove', this.handleTouchMove.bind(this));
6651
+ window.addEventListener('touchend', this.handleTouchEnd.bind(this));
6648
6652
  window.addEventListener('mousemove', this.handleMouseMove.bind(this));
6649
6653
  window.addEventListener('mouseup', this.handleMouseUp.bind(this));
6650
6654
  var scrollEl = document.getElementById("".concat(this.elementId, "_tableBody"));
@@ -6711,6 +6715,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
6711
6715
  bodyHtml += "<tr class=\"websy-table-row\">";
6712
6716
  row.forEach(function (cell, cellIndex) {
6713
6717
  var sizeIndex = cell.level || cellIndex;
6718
+ var colIndex = cell.index || cellIndex;
6714
6719
 
6715
6720
  if (typeof sizingColumns[sizeIndex] === 'undefined' || sizingColumns[sizeIndex].show === false) {
6716
6721
  return; // need to revisit this logic
@@ -6746,14 +6751,14 @@ var WebsyTable3 = /*#__PURE__*/function () {
6746
6751
  } // console.log('rowspan', cell.rowspan)
6747
6752
 
6748
6753
 
6749
- bodyHtml += "<td \n class='websy-table-cell ".concat(sizeIndex < _this39.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) {
6754
+ bodyHtml += "<td \n class='websy-table-cell ".concat(sizeIndex < _this39.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) {
6750
6755
  // bodyHtml += `
6751
6756
  // style='width: ${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}px!important'
6752
6757
  // width='${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}'
6753
6758
  // `
6754
6759
  // }
6755
6760
 
6756
- 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 >");
6761
+ 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 >");
6757
6762
 
6758
6763
  if (cell.expandable === true) {
6759
6764
  bodyHtml += "<i \n data-row-index='".concat(rowIndex, "'\n data-col-index='").concat(cell.level || cellIndex, "'\n class='websy-table-cell-expand'\n >").concat(_this39.options.plusIcon, "</i>");
@@ -7149,6 +7154,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
7149
7154
  }, {
7150
7155
  key: "handleMouseDown",
7151
7156
  value: function handleMouseDown(event) {
7157
+ if (this.isTouchDevice === true) {
7158
+ return;
7159
+ }
7160
+
7152
7161
  if (event.target.classList.contains('websy-scroll-handle-y')) {
7153
7162
  // set up the scroll start values
7154
7163
  this.scrollDragging = true;
@@ -7201,8 +7210,99 @@ var WebsyTable3 = /*#__PURE__*/function () {
7201
7210
  if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
7202
7211
  this.scrollX(Math.max(-5, Math.min(5, event.deltaX)));
7203
7212
  } else {
7213
+ console.log('delta', event.deltaY);
7204
7214
  this.scrollY(Math.max(-5, Math.min(5, event.deltaY)));
7205
7215
  }
7216
+ } else if (this.options.onNativeScroll) {
7217
+ var el = document.getElementById("".concat(this.elementId, "_tableBody"));
7218
+ this.options.onNativeScroll(el.scrollTop);
7219
+ }
7220
+ }
7221
+ }, {
7222
+ key: "handleTouchEnd",
7223
+ value: function handleTouchEnd(event) {
7224
+ console.log('touch end fired');
7225
+
7226
+ if (typeof event.targetTouches !== 'undefined') {
7227
+ this.isTouchScrolling = false;
7228
+ this.touchEndTime = new Date().getTime();
7229
+ this.isPerpetual = true; // this.perpetualScroll()
7230
+
7231
+ this.touchStartTime = null;
7232
+ var touchScrollEl = document.getElementById("".concat(this.elementId, "_touchScroller"));
7233
+ touchScrollEl.classList.add('hidden');
7234
+ }
7235
+ }
7236
+ }, {
7237
+ key: "handleTouchMove",
7238
+ value: function handleTouchMove(event) {
7239
+ console.log(event.target.classList);
7240
+
7241
+ if (this.isTouchScrolling === true) {
7242
+ event.preventDefault();
7243
+ event.stopPropagation();
7244
+
7245
+ if (typeof event.targetTouches !== 'undefined' && event.targetTouches.length > 0) {
7246
+ var deltaX = this.mouseXStart - event.targetTouches[0].pageX;
7247
+ var deltaY = this.mouseYStart - event.targetTouches[0].pageY; // need to adjust the delta so that it scrolls at a reasonable speed/distance
7248
+
7249
+ var scrollHandleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
7250
+ var scrollHandleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle")); // if (Math.abs(deltaY) > this.sizes.cellHeight) {
7251
+ // this.isTouchScrolling = true
7252
+ // }
7253
+ // else {
7254
+ // this.isTouchScrolling = false
7255
+ // }
7256
+
7257
+ console.log('delta init', deltaY); // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
7258
+ // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
7259
+ // console.log('delta', deltaY)
7260
+ // NW
7261
+ // else if (Math.abs(deltaX) > 50) {
7262
+ // this.isTouchScrolling = false
7263
+ // }
7264
+
7265
+ this.currentClientY = event.targetTouches[0].pageY;
7266
+ this.currentTouchtime = new Date().getTime(); // end
7267
+ // delta = Math.min(10, delta)
7268
+ // delta = Math.max(-10, delta)
7269
+
7270
+ if (this.isTouchScrolling === true) {
7271
+ // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
7272
+ if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 10) {
7273
+ this.scrollX(Math.max(-5, Math.min(5, deltaX)));
7274
+ } else {
7275
+ this.scrollY(Math.max(-5, Math.min(5, deltaY)));
7276
+ }
7277
+ }
7278
+ }
7279
+ }
7280
+ }
7281
+ }, {
7282
+ key: "handleTouchStart",
7283
+ value: function handleTouchStart(event) {
7284
+ if (event.target.classList.contains('websy-table-cell-expand')) {
7285
+ return;
7286
+ }
7287
+
7288
+ if (event.target.classList.contains('websy-table-cell-collapse')) {
7289
+ return;
7290
+ }
7291
+
7292
+ console.log(event.target.classList);
7293
+
7294
+ if (this.options.virtualScroll === true) {
7295
+ this.touchStartTime = new Date().getTime();
7296
+ this.isTouchScrolling = true;
7297
+ this.isPerpetual = false;
7298
+ this.mouseYStart = event.targetTouches[0].pageY;
7299
+ this.mouseXStart = event.targetTouches[0].pageX;
7300
+ var touchScrollEl = document.getElementById("".concat(this.elementId, "_touchScroller"));
7301
+ touchScrollEl.classList.remove('hidden');
7302
+ var handleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
7303
+ this.handleYStart = handleYEl.offsetTop;
7304
+ var handleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
7305
+ this.handleXStart = handleXEl.offsetLeft;
7206
7306
  }
7207
7307
  }
7208
7308
  }, {
@@ -7231,6 +7331,52 @@ var WebsyTable3 = /*#__PURE__*/function () {
7231
7331
  value: function hideLoading() {
7232
7332
  this.loadingDialog.hide();
7233
7333
  }
7334
+ }, {
7335
+ key: "perpetualScroll",
7336
+ value: function perpetualScroll() {
7337
+ var _this44 = this;
7338
+
7339
+ // if the currentTouchtime and touchEndTime are more than 300ms apart then we abort the perpetual scroll
7340
+ if (this.touchEndTime - this.currentTouchtime > 300) {
7341
+ return;
7342
+ } // get the difference in time between when the touch initially started and when it ended
7343
+ // the longer the touch duration, the slower the scroll
7344
+
7345
+
7346
+ var touchDuration = this.touchEndTime - this.touchStartTime; // get the distance moved between when the touch initially started and when it ended
7347
+
7348
+ var touchDistance = this.currentClientY - this.mouseYStart; // the bigger the distance, the more we scroll
7349
+ // use the duration and distance to calculate the duration of the perpetual scroll
7350
+
7351
+ var perpetualDistance = Math.abs(touchDistance * (1 / (touchDuration / 1000)));
7352
+ var perpetualDuration = touchDuration * 1.5 / 1000;
7353
+ var requiredFrames = Math.abs(Math.ceil(perpetualDistance / this.sizes.cellHeight));
7354
+ var fps = requiredFrames / perpetualDuration;
7355
+ var direction = touchDistance > 0 ? -1 : 1;
7356
+
7357
+ var _loop2 = function _loop2(i) {
7358
+ setTimeout(function () {
7359
+ var delta = _this44.mouseYStart - _this44.currentClientY + _this44.sizes.cellHeight * (i + 1) * direction;
7360
+ delta = Math.min(10, delta);
7361
+ delta = Math.max(-10, delta); // only run this if isPerpetual === true
7362
+ // this value is reset to false on touchStart
7363
+
7364
+ if (_this44.isPerpetual === true) {
7365
+ // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))
7366
+ // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 200)))
7367
+ _this44.scrollY(Math.max(-5, Math.min(5, delta)));
7368
+
7369
+ if (_this44.scrollTimeout) {
7370
+ clearTimeout(_this44.scrollTimeout);
7371
+ }
7372
+ }
7373
+ }, 1000 / fps * i);
7374
+ };
7375
+
7376
+ for (var i = 0; i < requiredFrames; i++) {
7377
+ _loop2(i);
7378
+ }
7379
+ }
7234
7380
  }, {
7235
7381
  key: "render",
7236
7382
  value: function render(data) {
@@ -7516,7 +7662,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
7516
7662
 
7517
7663
  var WebsyChart = /*#__PURE__*/function () {
7518
7664
  function WebsyChart(elementId, options) {
7519
- var _this44 = this;
7665
+ var _this45 = this;
7520
7666
 
7521
7667
  _classCallCheck(this, WebsyChart);
7522
7668
 
@@ -7576,7 +7722,7 @@ var WebsyChart = /*#__PURE__*/function () {
7576
7722
  var forBrush = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
7577
7723
  var xAxis = 'bottom';
7578
7724
 
7579
- if (_this44.options.orientation === 'horizontal') {
7725
+ if (_this45.options.orientation === 'horizontal') {
7580
7726
  xAxis = 'left';
7581
7727
  }
7582
7728
 
@@ -7587,13 +7733,13 @@ var WebsyChart = /*#__PURE__*/function () {
7587
7733
  xAxis += 'Axis';
7588
7734
  var output;
7589
7735
 
7590
- var width = _this44.options.data[xAxis.replace('Brush', '').replace('Axis', '')].bandWidth; // if (this.customBottomRange) {
7736
+ var width = _this45.options.data[xAxis.replace('Brush', '').replace('Axis', '')].bandWidth; // if (this.customBottomRange) {
7591
7737
 
7592
7738
 
7593
- for (var index = 0; index < _this44.customBottomRange.length; index++) {
7594
- if (input > _this44.customBottomRange[index]) {
7595
- if (_this44.customBottomRange[index + 1]) {
7596
- if (input < _this44.customBottomRange[index + 1]) {
7739
+ for (var index = 0; index < _this45.customBottomRange.length; index++) {
7740
+ if (input > _this45.customBottomRange[index]) {
7741
+ if (_this45.customBottomRange[index + 1]) {
7742
+ if (input < _this45.customBottomRange[index + 1]) {
7597
7743
  output = index;
7598
7744
  break;
7599
7745
  }
@@ -7831,10 +7977,10 @@ var WebsyChart = /*#__PURE__*/function () {
7831
7977
  }, {
7832
7978
  key: "handleEventMouseMove",
7833
7979
  value: function handleEventMouseMove(event, d) {
7834
- var _this45 = this;
7980
+ var _this46 = this;
7835
7981
 
7836
7982
  var bisectDate = d3.bisector(function (d) {
7837
- return _this45.parseX(d.x.value);
7983
+ return _this46.parseX(d.x.value);
7838
7984
  }).left;
7839
7985
 
7840
7986
  if (this.options.showTrackingLine === true && d3.pointer(event)) {
@@ -7873,9 +8019,9 @@ var WebsyChart = /*#__PURE__*/function () {
7873
8019
  }
7874
8020
 
7875
8021
  this.options.data.series.forEach(function (s) {
7876
- if (_this45.options.data[xData].scale !== 'Time') {
8022
+ if (_this46.options.data[xData].scale !== 'Time') {
7877
8023
  // if (this.customBottomRange && this.customBottomRange.length > 0) {
7878
- xPoint = _this45.customBottomRange[x0] + (_this45.customBottomRange[x0 + 1] - _this45.customBottomRange[x0]) / 2; // }
8024
+ xPoint = _this46.customBottomRange[x0] + (_this46.customBottomRange[x0 + 1] - _this46.customBottomRange[x0]) / 2; // }
7879
8025
  // else {
7880
8026
  // xPoint = this[xAxis](this.parseX(xLabel))
7881
8027
  // }
@@ -7898,13 +8044,13 @@ var WebsyChart = /*#__PURE__*/function () {
7898
8044
  var pointA = s.data[index - 1];
7899
8045
  var pointB = s.data[index];
7900
8046
 
7901
- if (_this45.options.orientation === 'horizontal') {
8047
+ if (_this46.options.orientation === 'horizontal') {
7902
8048
  pointA = _toConsumableArray(s.data).reverse()[index - 1];
7903
8049
  pointB = _toConsumableArray(s.data).reverse()[index];
7904
8050
  }
7905
8051
 
7906
8052
  if (pointA && !pointB) {
7907
- xPoint = _this45[xAxis](_this45.parseX(pointA.x.value));
8053
+ xPoint = _this46[xAxis](_this46.parseX(pointA.x.value));
7908
8054
  tooltipTitle = pointA.x.value;
7909
8055
 
7910
8056
  if (!pointA.y.color) {
@@ -7914,12 +8060,12 @@ var WebsyChart = /*#__PURE__*/function () {
7914
8060
  tooltipData.push(pointA.y);
7915
8061
 
7916
8062
  if (typeof pointA.x.value.getTime !== 'undefined') {
7917
- tooltipTitle = d3.timeFormat(_this45.options.dateFormat || _this45.options.calculatedTimeFormatPattern)(pointA.x.value);
8063
+ tooltipTitle = d3.timeFormat(_this46.options.dateFormat || _this46.options.calculatedTimeFormatPattern)(pointA.x.value);
7918
8064
  }
7919
8065
  }
7920
8066
 
7921
8067
  if (pointB && !pointA) {
7922
- xPoint = _this45[xAxis](_this45.parseX(pointB.x.value));
8068
+ xPoint = _this46[xAxis](_this46.parseX(pointB.x.value));
7923
8069
  tooltipTitle = pointB.x.value;
7924
8070
 
7925
8071
  if (!pointB.y.color) {
@@ -7929,14 +8075,14 @@ var WebsyChart = /*#__PURE__*/function () {
7929
8075
  tooltipData.push(pointB.y);
7930
8076
 
7931
8077
  if (typeof pointB.x.value.getTime !== 'undefined') {
7932
- tooltipTitle = d3.timeFormat(_this45.options.dateFormat || _this45.options.calculatedTimeFormatPattern)(pointB.x.value);
8078
+ tooltipTitle = d3.timeFormat(_this46.options.dateFormat || _this46.options.calculatedTimeFormatPattern)(pointB.x.value);
7933
8079
  }
7934
8080
  }
7935
8081
 
7936
8082
  if (pointA && pointB) {
7937
- var d0 = _this45[xAxis](_this45.parseX(pointA.x.value));
8083
+ var d0 = _this46[xAxis](_this46.parseX(pointA.x.value));
7938
8084
 
7939
- var d1 = _this45[xAxis](_this45.parseX(pointB.x.value));
8085
+ var d1 = _this46[xAxis](_this46.parseX(pointB.x.value));
7940
8086
 
7941
8087
  var mid = Math.abs(d0 - d1) / 2;
7942
8088
 
@@ -7945,7 +8091,7 @@ var WebsyChart = /*#__PURE__*/function () {
7945
8091
  tooltipTitle = pointB.x.value;
7946
8092
 
7947
8093
  if (typeof pointB.x.value.getTime !== 'undefined') {
7948
- tooltipTitle = d3.timeFormat(_this45.options.dateFormat || _this45.options.calculatedTimeFormatPattern)(pointB.x.value);
8094
+ tooltipTitle = d3.timeFormat(_this46.options.dateFormat || _this46.options.calculatedTimeFormatPattern)(pointB.x.value);
7949
8095
  }
7950
8096
 
7951
8097
  if (!pointB.y.color) {
@@ -7958,7 +8104,7 @@ var WebsyChart = /*#__PURE__*/function () {
7958
8104
  tooltipTitle = pointA.x.value;
7959
8105
 
7960
8106
  if (typeof pointB.x.value.getTime !== 'undefined') {
7961
- tooltipTitle = d3.timeFormat(_this45.options.dateFormat || _this45.options.calculatedTimeFormatPattern)(pointB.x.value);
8107
+ tooltipTitle = d3.timeFormat(_this46.options.dateFormat || _this46.options.calculatedTimeFormatPattern)(pointB.x.value);
7962
8108
  }
7963
8109
 
7964
8110
  if (!pointA.y.color) {
@@ -8059,8 +8205,10 @@ var WebsyChart = /*#__PURE__*/function () {
8059
8205
  this.defs = this.svg.append('defs');
8060
8206
  this.clip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_clip")).append('rect');
8061
8207
  this.xAxisClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_xAxisClip")).append('rect');
8208
+ this.yAxisClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_yAxisClip")).append('rect');
8062
8209
  this.brushClip = this.defs.append('clipPath').attr('id', "".concat(this.elementId, "_brushclip")).append('rect');
8063
- this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer');
8210
+ this.leftAxisLayer = this.svg.append('g').attr('class', 'left-axis-layer'); // .attr('clip-path', `url(#${this.elementId}_yAxisClip)`).append('g')
8211
+
8064
8212
  this.rightAxisLayer = this.svg.append('g').attr('class', 'right-axis-layer');
8065
8213
  this.bottomAxisLayer = this.svg.append('g').attr('class', 'bottom-axis-layer').attr('clip-path', "url(#".concat(this.elementId, "_xAxisClip)")).append('g');
8066
8214
  this.leftAxisLabel = this.svg.append('g').attr('class', 'left-axis-label-layer');
@@ -8091,7 +8239,7 @@ var WebsyChart = /*#__PURE__*/function () {
8091
8239
  }, {
8092
8240
  key: "render",
8093
8241
  value: function render(options) {
8094
- var _this46 = this;
8242
+ var _this47 = this;
8095
8243
 
8096
8244
  /* global d3 options WebsyUtils */
8097
8245
  if (typeof options !== 'undefined') {
@@ -8170,7 +8318,7 @@ var WebsyChart = /*#__PURE__*/function () {
8170
8318
  this.options.data.series.map(function (s, i) {
8171
8319
  return {
8172
8320
  value: s.label || s.key,
8173
- color: s.color || _this46.options.colors[i % _this46.options.colors.length]
8321
+ color: s.color || _this47.options.colors[i % _this47.options.colors.length]
8174
8322
  };
8175
8323
  });
8176
8324
  }
@@ -8512,10 +8660,18 @@ var WebsyChart = /*#__PURE__*/function () {
8512
8660
  this.symbolLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8513
8661
  this.refLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8514
8662
  this.trackingLineLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8515
- 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, ")"));
8516
8663
  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);
8517
- 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);
8518
- 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);
8664
+
8665
+ if (this.options.orientation === 'horizontal') {
8666
+ this.brushLayer.attr('transform', "translate(".concat(this.options.margin.left, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8667
+ 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);
8668
+ 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);
8669
+ } else {
8670
+ 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, ")"));
8671
+ 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);
8672
+ 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);
8673
+ }
8674
+
8519
8675
  this.eventLayer.attr('transform', "translate(".concat(this.options.margin.left + this.options.margin.axisLeft, ", ").concat(this.options.margin.top + this.options.margin.axisTop, ")"));
8520
8676
  var that = this;
8521
8677
  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)
@@ -8531,6 +8687,7 @@ var WebsyChart = /*#__PURE__*/function () {
8531
8687
 
8532
8688
  if (this.options.orientation === 'horizontal') {
8533
8689
  leftBrushRange = [this.plotHeight, 0];
8690
+ bottomBrushRange = [0, this.options.brushHeight];
8534
8691
  }
8535
8692
 
8536
8693
  this.widthForCalc = proposedBandWidth * noOfPoints; // + totalPadding
@@ -8554,28 +8711,28 @@ var WebsyChart = /*#__PURE__*/function () {
8554
8711
  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') {
8555
8712
  var acc = 0;
8556
8713
  this["custom".concat(customRangeSide, "Range")] = [0].concat(_toConsumableArray(this.options.data[customRangeSideLC].data.map(function (d, index, arr) {
8557
- var adjustment = _this46.bandPadding * index + _this46.bandPadding; // if (this.options.data.bottom.padding) {
8714
+ var adjustment = _this47.bandPadding * index + _this47.bandPadding; // if (this.options.data.bottom.padding) {
8558
8715
  // adjustment = (this.widthForCalc * this.options.data.bottom.padding) / (arr.length * 2)
8559
8716
  // }
8560
8717
 
8561
- var start = _this46.widthForCalc / noOfPoints * acc;
8718
+ var start = _this47.widthForCalc / noOfPoints * acc;
8562
8719
 
8563
8720
  for (var i = 0; i < (d.valueCount || 1); i++) {
8564
8721
  var pos = i * proposedBandWidth;
8565
8722
 
8566
- _this46["custom".concat(customRangeSide, "DetailRange")].push(start + adjustment + pos);
8723
+ _this47["custom".concat(customRangeSide, "DetailRange")].push(start + adjustment + pos);
8567
8724
  }
8568
8725
 
8569
- acc += _this46.options.grouping !== 'stacked' && _this46.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
8570
- var end = _this46.widthForCalc / noOfPoints * acc; // this.customBottomBrushRange.push((end + adjustment) * (this.plotWidth / this.widthForCalc))
8726
+ acc += _this47.options.grouping !== 'stacked' && _this47.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
8727
+ var end = _this47.widthForCalc / noOfPoints * acc; // this.customBottomBrushRange.push((end + adjustment) * (this.plotWidth / this.widthForCalc))
8571
8728
 
8572
8729
  return end + adjustment;
8573
8730
  })));
8574
8731
  acc = 0;
8575
8732
  this["custom".concat(customRangeSide, "BrushRange")] = [0].concat(_toConsumableArray(this.options.data[customRangeSideLC].data.map(function (d, index, arr) {
8576
- var adjustment = _this46.brushBandPadding * index + _this46.brushBandPadding;
8577
- acc += _this46.options.grouping !== 'stacked' && _this46.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
8578
- return (_this46.options.orientation === 'vertical' ? _this46.plotWidth : _this46.plotHeight) / noOfPoints * acc;
8733
+ var adjustment = _this47.brushBandPadding * index + _this47.brushBandPadding;
8734
+ acc += _this47.options.grouping !== 'stacked' && _this47.options.allowUnevenBands === true ? d.valueCount || 1 : 1;
8735
+ return (_this47.options.orientation === 'vertical' ? _this47.plotWidth : _this47.plotHeight) / noOfPoints * acc;
8579
8736
  })));
8580
8737
  } // }
8581
8738
 
@@ -8623,6 +8780,10 @@ var WebsyChart = /*#__PURE__*/function () {
8623
8780
  brushMethod = 'brushY';
8624
8781
  brushLength = this.options.brushHeight;
8625
8782
  brushThickness = this.plotHeight;
8783
+
8784
+ if (this.brushNeeded) {
8785
+ brushEnd = this.plotHeight * (this.plotHeight / (this.widthForCalc + this.totalBandPadding));
8786
+ }
8626
8787
  } else {
8627
8788
  if (this.brushNeeded) {
8628
8789
  brushEnd = this.plotWidth * (this.plotWidth / (this.widthForCalc + this.totalBandPadding));
@@ -8753,7 +8914,7 @@ var WebsyChart = /*#__PURE__*/function () {
8753
8914
 
8754
8915
  if (this.options.data.bottom.formatter) {
8755
8916
  this.bAxisFunc.tickFormat(function (d) {
8756
- return _this46.options.data.bottom.formatter(d);
8917
+ return _this47.options.data.bottom.formatter(d);
8757
8918
  });
8758
8919
  }
8759
8920
 
@@ -8765,14 +8926,14 @@ var WebsyChart = /*#__PURE__*/function () {
8765
8926
 
8766
8927
  if (this.customBottomRange.length > 0) {
8767
8928
  this.bottomAxisLayer.selectAll('g').attr('transform', function (d, i) {
8768
- return "translate(".concat(_this46.customBottomRange[i] + (_this46.customBottomRange[i + 1] - _this46.customBottomRange[i]) / 2, ", 0)");
8929
+ return "translate(".concat(_this47.customBottomRange[i] + (_this47.customBottomRange[i + 1] - _this47.customBottomRange[i]) / 2, ", 0)");
8769
8930
  });
8770
8931
  }
8771
8932
  } // Configure the left axis
8772
8933
 
8773
8934
 
8774
8935
  var leftDomain = this.createDomain('left');
8775
- var leftBrushDomain = this.createDomain('left', true);
8936
+ var leftBrushDomain = this.createDomain('left');
8776
8937
  var rightDomain = this.createDomain('right');
8777
8938
  this.leftAxis = d3["scale".concat(this.options.data.left.scale || 'Linear')]().domain(leftDomain).range(leftRange);
8778
8939
  this.leftBrushAxis = d3["scale".concat(this.options.data.left.scale || 'Linear')]().domain(leftBrushDomain).range(leftBrushRange);
@@ -8787,8 +8948,8 @@ var WebsyChart = /*#__PURE__*/function () {
8787
8948
 
8788
8949
  if (this.options.margin.axisLeft > 0) {
8789
8950
  this.leftAxisLayer.call(d3.axisLeft(this.leftAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
8790
- if (_this46.options.data.left.formatter) {
8791
- d = _this46.options.data.left.formatter(d);
8951
+ if (_this47.options.data.left.formatter) {
8952
+ d = _this47.options.data.left.formatter(d);
8792
8953
  }
8793
8954
 
8794
8955
  return d;
@@ -8796,7 +8957,7 @@ var WebsyChart = /*#__PURE__*/function () {
8796
8957
 
8797
8958
  if (this.customLeftRange.length > 0) {
8798
8959
  this.leftAxisLayer.selectAll('g').attr('transform', function (d, i) {
8799
- return "translate(0, ".concat(_this46.customLeftRange[i] + (_this46.customLeftRange[i + 1] - _this46.customLeftRange[i]) / 2, ")");
8960
+ return "translate(0, ".concat(_this47.customLeftRange[i] + (_this47.customLeftRange[i + 1] - _this47.customLeftRange[i]) / 2, ")");
8800
8961
  });
8801
8962
  }
8802
8963
  }
@@ -8829,8 +8990,8 @@ var WebsyChart = /*#__PURE__*/function () {
8829
8990
 
8830
8991
  if (this.options.margin.axisRight > 0 && (this.options.data.right.min !== 0 || this.options.data.right.max !== 0)) {
8831
8992
  this.rightAxisLayer.call(d3.axisRight(this.rightAxis).ticks(this.options.data.right.ticks || 5).tickFormat(function (d) {
8832
- if (_this46.options.data.right.formatter) {
8833
- d = _this46.options.data.right.formatter(d);
8993
+ if (_this47.options.data.right.formatter) {
8994
+ d = _this47.options.data.right.formatter(d);
8834
8995
  }
8835
8996
 
8836
8997
  return d;
@@ -8876,57 +9037,60 @@ var WebsyChart = /*#__PURE__*/function () {
8876
9037
  }, {
8877
9038
  key: "renderComponents",
8878
9039
  value: function renderComponents() {
8879
- var _this47 = this;
9040
+ var _this48 = this;
8880
9041
 
8881
9042
  // Draw the series data
8882
9043
  this.renderedKeys = {};
8883
9044
  this.options.data.series.forEach(function (series, index) {
8884
9045
  if (!series.key) {
8885
- series.key = _this47.createIdentity();
9046
+ series.key = _this48.createIdentity();
8886
9047
  }
8887
9048
 
8888
9049
  if (!series.color) {
8889
- series.color = _this47.options.colors[index % _this47.options.colors.length];
9050
+ series.color = _this48.options.colors[index % _this48.options.colors.length];
8890
9051
  }
8891
9052
 
8892
- _this47["render".concat(series.type || 'bar')](series, index);
9053
+ _this48["render".concat(series.type || 'bar')](series, index);
8893
9054
 
8894
- _this47.renderLabels(series, index);
9055
+ _this48.renderLabels(series, index);
8895
9056
 
8896
- _this47.renderedKeys[series.key] = series.type;
9057
+ _this48.renderedKeys[series.key] = series.type;
8897
9058
  });
8898
9059
  this.refLineLayer.selectAll('.reference-line').remove();
8899
9060
  this.refLineLayer.selectAll('.reference-line-label').remove();
8900
9061
 
8901
9062
  if (this.options.refLines && this.options.refLines.length > 0) {
8902
9063
  this.options.refLines.forEach(function (l) {
8903
- return _this47.renderRefLine(l);
9064
+ return _this48.renderRefLine(l);
8904
9065
  });
8905
9066
  }
8906
9067
  }
8907
9068
  }, {
8908
9069
  key: "renderarea",
8909
9070
  value: function renderarea(series, index) {
8910
- var _this48 = this;
9071
+ var _this49 = this;
8911
9072
 
8912
9073
  /* global d3 series index */
8913
9074
  var drawArea = function drawArea(xAxis, yAxis, curveStyle) {
8914
9075
  return d3.area().x(function (d) {
8915
- // return this[`${xAxis}Axis`](this.parseX(d.x.value))
8916
- var xIndex = _this48[xAxis + 'Axis'].domain().indexOf(d.x.value);
9076
+ if (_this49.options.data[xAxis].scale === 'Time') {
9077
+ return _this49["".concat(xAxis, "Axis")](_this49.parseX(d.x.value));
9078
+ } else {
9079
+ var xIndex = _this49[xAxis + 'Axis'].domain().indexOf(d.x.value);
8917
9080
 
8918
- var xPos = _this48["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9081
+ var xPos = _this49["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
8919
9082
 
8920
- if (_this48["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
8921
- xPos = xPos + (_this48["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
8922
- }
9083
+ if (_this49["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9084
+ xPos = xPos + (_this49["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9085
+ }
8923
9086
 
8924
- return xPos;
9087
+ return xPos;
9088
+ }
8925
9089
  }).y0(function (d) {
8926
- return _this48["".concat(yAxis, "Axis")](0);
9090
+ return _this49["".concat(yAxis, "Axis")](0);
8927
9091
  }).y1(function (d) {
8928
- return _this48["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
8929
- }).curve(d3[curveStyle || _this48.options.curveStyle]);
9092
+ return _this49["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9093
+ }).curve(d3[curveStyle || _this49.options.curveStyle]);
8930
9094
  };
8931
9095
 
8932
9096
  var xAxis = 'bottom';
@@ -8964,7 +9128,7 @@ var WebsyChart = /*#__PURE__*/function () {
8964
9128
  }, {
8965
9129
  key: "renderbar",
8966
9130
  value: function renderbar(series, index) {
8967
- var _this49 = this;
9131
+ var _this50 = this;
8968
9132
 
8969
9133
  /* global series index d3 */
8970
9134
  var xAxis = 'bottom';
@@ -9004,7 +9168,7 @@ var WebsyChart = /*#__PURE__*/function () {
9004
9168
  var output;
9005
9169
 
9006
9170
  if (this.options.orientation === 'horizontal') {
9007
- output = this["".concat(yAxis, "Axis")](Math.abs(d.y.value));
9171
+ output = this["".concat(yAxis, "Axis")](Math.abs(d.y.value)); // output = (this[`${yAxis}Axis`](0)) - this[`${yAxis}Axis`](Math.abs(d.y.value))
9008
9172
  } else {
9009
9173
  var x = getBarX.call(this, d, i, xAxis);
9010
9174
 
@@ -9053,15 +9217,7 @@ var WebsyChart = /*#__PURE__*/function () {
9053
9217
 
9054
9218
  if (this.processedX[d.x.value]) {
9055
9219
  xIndex = Math.max(0, this.processedX[d.x.value].indexOf(d.y.tooltipLabel));
9056
- } // let barAdjustment =
9057
- // (this.options.data[xAxis].bandWidth * xIndex) +
9058
- // (xIndex * this.options.groupPadding * 2) + this.options.groupPadding +
9059
- // (xAxis.indexOf('Brush') === -1 ? this.bandPadding : 1)
9060
- // let barAdjustment =
9061
- // (this.options.data[xAxis.replace('Brush', '')].step * xIndex) +
9062
- // this.options.groupPadding
9063
- // // (xAxis.indexOf('Brush') === -1 ? this.bandPadding : 1)
9064
-
9220
+ }
9065
9221
 
9066
9222
  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);
9067
9223
 
@@ -9101,7 +9257,28 @@ var WebsyChart = /*#__PURE__*/function () {
9101
9257
  var barAdjustment = (xAxis.indexOf('Brush') !== -1 ? this.brushBandPadding : this.bandPadding) / 2 + (xAxis.indexOf('Brush') !== -1 ? 1 : this.options.groupPadding);
9102
9258
  output = this["custom".concat(xAxis.toInitialCaps(), "Range")][this[xAxis + 'Axis'].domain().indexOf(d.x.value)] + barAdjustment;
9103
9259
  } else {
9104
- output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)) + (d.y.index || i) * this.options.data[xAxis.replace('Brush', '')].barWidth;
9260
+ // output = this[`${xAxis}Axis`](this.parseX(d.x.value)) + ((d.y.index || i) * this.options.data[xAxis.replace('Brush', '')].barWidth)
9261
+ var xIndex = 0;
9262
+
9263
+ if (this.processedX[d.x.value]) {
9264
+ xIndex = Math.max(0, this.processedX[d.x.value].indexOf(d.y.tooltipLabel));
9265
+ }
9266
+
9267
+ 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);
9268
+
9269
+ if (this["custom".concat(xAxis.toInitialCaps(), "Range")].length > 0) {
9270
+ 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)]
9271
+ } else {
9272
+ output = this["".concat(xAxis, "Axis")](this.parseX(d.x.value)) + _barAdjustment2;
9273
+ }
9274
+
9275
+ if (!this.processedX[d.x.value]) {
9276
+ this.processedX[d.x.value] = [];
9277
+ }
9278
+
9279
+ if (this.processedX[d.x.value].indexOf(d.y.tooltipLabel) === -1) {
9280
+ this.processedX[d.x.value].push(d.y.tooltipLabel);
9281
+ }
9105
9282
  }
9106
9283
  } else {
9107
9284
  if (this.options.grouping === 'stacked') {
@@ -9129,25 +9306,25 @@ var WebsyChart = /*#__PURE__*/function () {
9129
9306
 
9130
9307
  bars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
9131
9308
  bars.attr('width', function (d, i) {
9132
- return Math.abs(getBarWidth.call(_this49, d, i, xAxis));
9309
+ return Math.abs(getBarWidth.call(_this50, d, i, xAxis));
9133
9310
  }).attr('height', function (d, i) {
9134
- return getBarHeight.call(_this49, d, i, yAxis, xAxis);
9311
+ return getBarHeight.call(_this50, d, i, yAxis, xAxis);
9135
9312
  }).attr('x', function (d, i) {
9136
- return getBarX.call(_this49, d, i, xAxis);
9313
+ return getBarX.call(_this50, d, i, xAxis);
9137
9314
  }).attr('y', function (d, i) {
9138
- return getBarY.call(_this49, d, i, yAxis, xAxis);
9315
+ return getBarY.call(_this50, d, i, yAxis, xAxis);
9139
9316
  }) // .transition(this.transition)
9140
9317
  .attr('fill', function (d) {
9141
9318
  return d.y.color || d.color || series.color;
9142
9319
  });
9143
9320
  bars.enter().append('rect').attr('width', function (d, i) {
9144
- return Math.abs(getBarWidth.call(_this49, d, i, xAxis));
9321
+ return Math.abs(getBarWidth.call(_this50, d, i, xAxis));
9145
9322
  }).attr('height', function (d, i) {
9146
- return getBarHeight.call(_this49, d, i, yAxis, xAxis);
9323
+ return getBarHeight.call(_this50, d, i, yAxis, xAxis);
9147
9324
  }).attr('x', function (d, i) {
9148
- return getBarX.call(_this49, d, i, xAxis);
9325
+ return getBarX.call(_this50, d, i, xAxis);
9149
9326
  }).attr('y', function (d, i) {
9150
- return getBarY.call(_this49, d, i, yAxis, xAxis);
9327
+ return getBarY.call(_this50, d, i, yAxis, xAxis);
9151
9328
  }) // .transition(this.transition)
9152
9329
  .attr('fill', function (d) {
9153
9330
  return d.y.color || d.color || series.color;
@@ -9159,25 +9336,25 @@ var WebsyChart = /*#__PURE__*/function () {
9159
9336
  this.brushBarsInitialized[series.key] = true;
9160
9337
  brushBars.exit().transition(this.transition).style('fill-opacity', 1e-6).remove();
9161
9338
  brushBars.attr('width', function (d, i) {
9162
- return Math.abs(getBarWidth.call(_this49, d, i, "".concat(xAxis, "Brush")));
9339
+ return Math.abs(getBarWidth.call(_this50, d, i, "".concat(xAxis, "Brush")));
9163
9340
  }).attr('height', function (d, i) {
9164
- return getBarHeight.call(_this49, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9341
+ return getBarHeight.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9165
9342
  }).attr('x', function (d, i) {
9166
- return getBarX.call(_this49, d, i, "".concat(xAxis, "Brush"));
9343
+ return getBarX.call(_this50, d, i, "".concat(xAxis, "Brush"));
9167
9344
  }).attr('y', function (d, i) {
9168
- return getBarY.call(_this49, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9345
+ return getBarY.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9169
9346
  }) // .transition(this.transition)
9170
9347
  .attr('fill', function (d) {
9171
9348
  return d.y.color || d.color || series.color;
9172
9349
  });
9173
9350
  brushBars.enter().append('rect').attr('width', function (d, i) {
9174
- return Math.abs(getBarWidth.call(_this49, d, i, "".concat(xAxis, "Brush")));
9351
+ return Math.abs(getBarWidth.call(_this50, d, i, "".concat(xAxis, "Brush")));
9175
9352
  }).attr('height', function (d, i) {
9176
- return getBarHeight.call(_this49, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9353
+ return getBarHeight.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9177
9354
  }).attr('x', function (d, i) {
9178
- return getBarX.call(_this49, d, i, "".concat(xAxis, "Brush"));
9355
+ return getBarX.call(_this50, d, i, "".concat(xAxis, "Brush"));
9179
9356
  }).attr('y', function (d, i) {
9180
- return getBarY.call(_this49, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9357
+ return getBarY.call(_this50, d, i, "".concat(yAxis, "Brush"), "".concat(xAxis, "Brush"));
9181
9358
  }) // .transition(this.transition)
9182
9359
  .attr('fill', function (d) {
9183
9360
  return d.y.color || d.color || series.color;
@@ -9195,7 +9372,7 @@ var WebsyChart = /*#__PURE__*/function () {
9195
9372
  }, {
9196
9373
  key: "renderLabels",
9197
9374
  value: function renderLabels(series, index) {
9198
- var _this50 = this;
9375
+ var _this51 = this;
9199
9376
 
9200
9377
  /* global series index d3 WebsyDesigns */
9201
9378
  var xAxis = 'bottom';
@@ -9214,15 +9391,15 @@ var WebsyChart = /*#__PURE__*/function () {
9214
9391
  var labels = this.labelLayer.selectAll(".label_".concat(series.key)).data(series.data);
9215
9392
  labels.exit().transition(this.transition).style('stroke-opacity', 1e-6).remove();
9216
9393
  labels.attr('x', function (d) {
9217
- return getLabelX.call(_this50, d, series.labelPosition);
9394
+ return getLabelX.call(_this51, d, series.labelPosition);
9218
9395
  }).attr('y', function (d) {
9219
- return getLabelY.call(_this50, d, series.labelPosition);
9396
+ return getLabelY.call(_this51, d, series.labelPosition);
9220
9397
  }).attr('class', "label_".concat(series.key)).attr('fill', function (d) {
9221
- if (_this50.options.grouping === 'stacked' && d.y.value === 0) {
9398
+ if (_this51.options.grouping === 'stacked' && d.y.value === 0) {
9222
9399
  return 'transparent';
9223
9400
  }
9224
9401
 
9225
- return _this50.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
9402
+ return _this51.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
9226
9403
  }).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).transition(this.transition).text(function (d) {
9227
9404
  return d.y.label || d.y.value;
9228
9405
  }).each(function (d, i) {
@@ -9247,15 +9424,15 @@ var WebsyChart = /*#__PURE__*/function () {
9247
9424
  }
9248
9425
  });
9249
9426
  labels.enter().append('text').attr('class', "label_".concat(series.key)).attr('x', function (d) {
9250
- return getLabelX.call(_this50, d, series.labelPosition);
9427
+ return getLabelX.call(_this51, d, series.labelPosition);
9251
9428
  }).attr('y', function (d) {
9252
- return getLabelY.call(_this50, d, series.labelPosition);
9429
+ return getLabelY.call(_this51, d, series.labelPosition);
9253
9430
  }).attr('alignment-baseline', 'central').attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle').attr('fill', function (d) {
9254
- if (_this50.options.grouping === 'stacked' && d.y.value === 0) {
9431
+ if (_this51.options.grouping === 'stacked' && d.y.value === 0) {
9255
9432
  return 'transparent';
9256
9433
  }
9257
9434
 
9258
- return _this50.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
9435
+ return _this51.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
9259
9436
  }).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).text(function (d) {
9260
9437
  return d.y.label || d.y.value;
9261
9438
  }).each(function (d, i) {
@@ -9333,34 +9510,36 @@ var WebsyChart = /*#__PURE__*/function () {
9333
9510
  }, {
9334
9511
  key: "renderline",
9335
9512
  value: function renderline(series, index) {
9336
- var _this51 = this;
9513
+ var _this52 = this;
9337
9514
 
9338
9515
  /* global series index d3 */
9339
9516
  var drawLine = function drawLine(xAxis, yAxis, curveStyle) {
9340
9517
  return d3.line().x(function (d) {
9341
- if (_this51.options.orientation === 'horizontal') {
9342
- return _this51["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9518
+ if (_this52.options.orientation === 'horizontal') {
9519
+ return _this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9343
9520
  } else {
9344
- var xIndex = _this51[xAxis + 'Axis'].domain().indexOf(d.x.value);
9345
-
9346
- var xPos = _this51["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9521
+ if (_this52.options.data[xAxis].scale === 'Time') {
9522
+ return _this52["".concat(xAxis, "Axis")](_this52.parseX(d.x.value));
9523
+ } else {
9524
+ var xIndex = _this52[xAxis + 'Axis'].domain().indexOf(d.x.value);
9347
9525
 
9348
- if (_this51["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9349
- xPos = xPos + (_this51["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9350
- } // let adjustment = this.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : this.options.data[xAxis].bandWidth / 2
9351
- // return this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment
9526
+ var xPos = _this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9352
9527
 
9528
+ if (_this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9529
+ xPos = xPos + (_this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9530
+ }
9353
9531
 
9354
- return xPos;
9532
+ return xPos;
9533
+ }
9355
9534
  }
9356
9535
  }).y(function (d) {
9357
- if (_this51.options.orientation === 'horizontal') {
9358
- var adjustment = _this51.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : _this51.options.data[xAxis].bandWidth / 2;
9359
- return _this51["".concat(xAxis, "Axis")](_this51.parseX(d.x.value)) + adjustment;
9536
+ if (_this52.options.orientation === 'horizontal') {
9537
+ var adjustment = _this52.options.data[xAxis.replace('Brush', '')].scale === 'Time' ? 0 : _this52.options.data[xAxis].bandWidth / 2;
9538
+ return _this52["".concat(xAxis, "Axis")](_this52.parseX(d.x.value)) + adjustment;
9360
9539
  } else {
9361
- return _this51["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9540
+ return _this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
9362
9541
  }
9363
- }).curve(d3[curveStyle || _this51.options.curveStyle]);
9542
+ }).curve(d3[curveStyle || _this52.options.curveStyle]);
9364
9543
  };
9365
9544
 
9366
9545
  var xAxis = 'bottom';
@@ -9474,14 +9653,14 @@ var WebsyChart = /*#__PURE__*/function () {
9474
9653
  }, {
9475
9654
  key: "rendersymbol",
9476
9655
  value: function rendersymbol(series, index) {
9477
- var _this52 = this;
9656
+ var _this53 = this;
9478
9657
 
9479
9658
  /* global d3 series index series.key */
9480
9659
  var drawSymbol = function drawSymbol(size) {
9481
9660
  return d3.symbol() // .type(d => {
9482
9661
  // return d3.symbols[0]
9483
9662
  // })
9484
- .size(size || _this52.options.symbolSize);
9663
+ .size(size || _this53.options.symbolSize);
9485
9664
  };
9486
9665
 
9487
9666
  var xAxis = 'bottom';
@@ -9510,21 +9689,25 @@ var WebsyChart = /*#__PURE__*/function () {
9510
9689
  // else {
9511
9690
  // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
9512
9691
  // }
9513
- var xIndex = _this52[xAxis + 'Axis'].domain().indexOf(d.x.value);
9692
+ var xIndex = _this53[xAxis + 'Axis'].domain().indexOf(d.x.value);
9514
9693
 
9515
- var xPos = _this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9694
+ var xPos = _this53["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9516
9695
 
9517
- if (_this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9518
- xPos = xPos + (_this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9696
+ if (_this53["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9697
+ xPos = xPos + (_this53["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9519
9698
  }
9520
9699
 
9521
- var adjustment = _this52.options.data[xAxis].scale === 'Time' || _this52.options.data[xAxis].scale === 'Linear' ? 0 : _this52.options.data[xAxis].bandWidth / 2;
9700
+ var adjustment = _this53.options.data[xAxis].scale === 'Time' || _this53.options.data[xAxis].scale === 'Linear' ? 0 : _this53.options.data[xAxis].bandWidth / 2;
9522
9701
 
9523
- if (_this52.options.orientation === 'horizontal') {
9524
- return "translate(".concat(_this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(xPos, ")");
9702
+ if (_this53.options.orientation === 'horizontal') {
9703
+ return "translate(".concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(xPos, ")");
9525
9704
  } else {
9526
- // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
9527
- return "translate(".concat(xPos, ", ").concat(_this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
9705
+ if (_this53.options.data[xAxis].scale === 'Time') {
9706
+ xPos = _this53["".concat(xAxis, "Axis")](_this53.parseX(d.x.value));
9707
+ } // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
9708
+
9709
+
9710
+ return "translate(".concat(xPos, ", ").concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
9528
9711
  }
9529
9712
  }); // Enter
9530
9713
 
@@ -9538,21 +9721,25 @@ var WebsyChart = /*#__PURE__*/function () {
9538
9721
  }).attr('class', function (d) {
9539
9722
  return "symbol symbol_".concat(series.key);
9540
9723
  }).attr('transform', function (d) {
9541
- var xIndex = _this52[xAxis + 'Axis'].domain().indexOf(d.x.value);
9724
+ var xIndex = _this53[xAxis + 'Axis'].domain().indexOf(d.x.value);
9542
9725
 
9543
- var xPos = _this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9726
+ var xPos = _this53["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex];
9544
9727
 
9545
- if (_this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9546
- xPos = xPos + (_this52["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9728
+ if (_this53["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1]) {
9729
+ xPos = xPos + (_this53["custom".concat(xAxis.toInitialCaps(), "Range")][xIndex + 1] - xPos) / 2;
9547
9730
  }
9548
9731
 
9549
- var adjustment = _this52.options.data[xAxis].scale === 'Time' || _this52.options.data[xAxis].scale === 'Linear' ? 0 : _this52.options.data[xAxis].bandWidth / 2;
9732
+ var adjustment = _this53.options.data[xAxis].scale === 'Time' || _this53.options.data[xAxis].scale === 'Linear' ? 0 : _this53.options.data[xAxis].bandWidth / 2;
9550
9733
 
9551
- if (_this52.options.orientation === 'horizontal') {
9552
- return "translate(".concat(_this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(xPos, ")");
9734
+ if (_this53.options.orientation === 'horizontal') {
9735
+ return "translate(".concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ", ").concat(xPos, ")");
9553
9736
  } else {
9554
- // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
9555
- return "translate(".concat(xPos, ", ").concat(_this52["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
9737
+ if (_this53.options.data[xAxis].scale === 'Time') {
9738
+ xPos = _this53["".concat(xAxis, "Axis")](_this53.parseX(d.x.value));
9739
+ } // return `translate(${this[`${xAxis}Axis`](this.parseX(d.x.value)) + adjustment}, ${this[`${yAxis}Axis`](isNaN(d.y.value) ? 0 : d.y.value)})`
9740
+
9741
+
9742
+ return "translate(".concat(xPos, ", ").concat(_this53["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value), ")");
9556
9743
  }
9557
9744
  });
9558
9745
  }
@@ -9774,7 +9961,7 @@ var WebsyLegend = /*#__PURE__*/function () {
9774
9961
  }, {
9775
9962
  key: "resize",
9776
9963
  value: function resize() {
9777
- var _this53 = this;
9964
+ var _this54 = this;
9778
9965
 
9779
9966
  var el = document.getElementById(this.elementId);
9780
9967
 
@@ -9787,7 +9974,7 @@ var WebsyLegend = /*#__PURE__*/function () {
9787
9974
  // }
9788
9975
  var html = "\n <div class='text-".concat(this.options.align, "'>\n ");
9789
9976
  html += this._data.map(function (d, i) {
9790
- return _this53.getLegendItemHTML(d);
9977
+ return _this54.getLegendItemHTML(d);
9791
9978
  }).join('');
9792
9979
  html += "\n <div>\n ";
9793
9980
  el.innerHTML = html;
@@ -9964,7 +10151,7 @@ var WebsyMap = /*#__PURE__*/function () {
9964
10151
  }, {
9965
10152
  key: "render",
9966
10153
  value: function render() {
9967
- var _this54 = this;
10154
+ var _this55 = this;
9968
10155
 
9969
10156
  var mapEl = document.getElementById("".concat(this.elementId, "_map"));
9970
10157
  var legendEl = document.getElementById("".concat(this.elementId, "_map"));
@@ -9973,7 +10160,7 @@ var WebsyMap = /*#__PURE__*/function () {
9973
10160
  var legendData = this.options.data.polygons.map(function (s, i) {
9974
10161
  return {
9975
10162
  value: s.label || s.key,
9976
- color: s.color || _this54.options.colors[i % _this54.options.colors.length]
10163
+ color: s.color || _this55.options.colors[i % _this55.options.colors.length]
9977
10164
  };
9978
10165
  });
9979
10166
  var longestValue = legendData.map(function (s) {
@@ -10037,7 +10224,7 @@ var WebsyMap = /*#__PURE__*/function () {
10037
10224
 
10038
10225
  if (this.polygons) {
10039
10226
  this.polygons.forEach(function (p) {
10040
- return _this54.map.removeLayer(p);
10227
+ return _this55.map.removeLayer(p);
10041
10228
  });
10042
10229
  }
10043
10230
 
@@ -10095,18 +10282,18 @@ var WebsyMap = /*#__PURE__*/function () {
10095
10282
  }
10096
10283
 
10097
10284
  if (!p.options.color) {
10098
- p.options.color = _this54.options.colors[i % _this54.options.colors.length];
10285
+ p.options.color = _this55.options.colors[i % _this55.options.colors.length];
10099
10286
  }
10100
10287
 
10101
10288
  var pol = L.polygon(p.data.map(function (c) {
10102
10289
  return c.map(function (d) {
10103
10290
  return [d.Latitude, d.Longitude];
10104
10291
  });
10105
- }), p.options).addTo(_this54.map);
10292
+ }), p.options).addTo(_this55.map);
10106
10293
 
10107
- _this54.polygons.push(pol);
10294
+ _this55.polygons.push(pol);
10108
10295
 
10109
- _this54.map.fitBounds(pol.getBounds());
10296
+ _this55.map.fitBounds(pol.getBounds());
10110
10297
  });
10111
10298
  } // if (this.data.markers.length > 0) {
10112
10299
  // el.classList.remove('hidden')