@websy/websy-designs 1.3.0 → 1.3.1

package/dist/websy-designs.js

@@ -629,6 +629,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       var _this4 = this;
 
       var isRange = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      console.trace();
       var maskEl = document.getElementById("".concat(this.elementId, "_mask"));
       var contentEl = document.getElementById("".concat(this.elementId, "_content"));
       var el = document.getElementById(this.elementId);
@@ -650,9 +651,9 @@ var WebsyDatePicker = /*#__PURE__*/function () {
                 hoursOut.push(this.options.hours[i]);
               }
 
-              this.options.onChange(hoursOut, true);
+              this.options.onChange(hoursOut, true, this.selectedRange);
             } else {
-              this.options.onChange(this.selectedRangeDates, true);
+              this.options.onChange(this.selectedRangeDates, true, this.selectedRange);
             }
           } else {
             if (this.options.mode === 'hour') {
@@ -660,9 +661,9 @@ var WebsyDatePicker = /*#__PURE__*/function () {
                 return _this4.options.hours[h];
               });
 
-              this.options.onChange(_hoursOut, true);
+              this.options.onChange(_hoursOut, true, this.selectedRange);
             } else {
-              this.options.onChange(this.currentselection, isRange);
+              this.options.onChange(this.currentselection, isRange, this.selectedRange);
             }
           }
         }
@@ -688,7 +689,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       } // d.setTime(d.getTime() + d.getTimezoneOffset() * 60000)
 
 
-      return new Date(d.setHours(0, 0, 0, 0));
+      return new Date(d.setUTCHours(12, 0, 0, 0));
     }
   }, {
     key: "handleClick",
@@ -829,7 +830,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
 
           if (this.options.mode === 'date') {
             d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + _i * this.oneDay));
-            d.setHours(0, 0, 0, 0);
+            d.setUTCHours(12, 0, 0, 0);
             d = d.getTime();
             rangeStart = this.selectedRangeDates[0].getTime();
             rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime();
@@ -885,9 +886,11 @@ var WebsyDatePicker = /*#__PURE__*/function () {
             dateEl = document.getElementById("".concat(_this5.elementId, "_").concat(d, "_hour"));
           }
 
-          dateEl.classList.add('selected');
-          dateEl.classList.add('first');
-          dateEl.classList.add('last');
+          if (dateEl) {
+            dateEl.classList.add('selected');
+            dateEl.classList.add('first');
+            dateEl.classList.add('last');
+          }
         });
       }
     }
@@ -1135,7 +1138,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
 
         html += "<div id='".concat(this.elementId, "_dateList' class='websy-dp-date-list'><ul>");
         html += yearList.map(function (d) {
-          return "<li id='".concat(_this6.elementId, "_").concat(d.id, "_year' class='websy-dp-date websy-dp-year ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.year, "</li>");
+          return "<li id='".concat(_this6.elementId, "_").concat(d.id, "_year' data-id='").concat(d.id, "' class='websy-dp-date websy-dp-year ").concat(d.disabled === true ? 'websy-disabled-date' : '', "'>").concat(d.year, "</li>");
         }).join('');
         html += "</ul></div>";
       } else if (this.options.mode === 'monthyear') {
@@ -1155,7 +1158,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           }
 
           html += this.monthYears[year].map(function (d) {
-            return "<li id='".concat(_this6.elementId, "_").concat(d.id, "_monthyear' data-year='").concat(d.year, "' class='websy-dp-date websy-dp-monthyear'>").concat(d.month, "</li>");
+            return "<li id='".concat(_this6.elementId, "_").concat(d.id, "_monthyear' data-id='").concat(d.id, "' data-year='").concat(d.year, "' class='websy-dp-date websy-dp-monthyear'>").concat(d.month, "</li>");
           }).join('');
           html += "</ul>";
         }
@@ -1263,16 +1266,6 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           return d.getTime();
         });
         this.selectedRange = +index;
-        var el = document.getElementById("".concat(this.elementId, "_header"));
-
-        if (el) {
-          if (this.selectedRange === 0) {
-            el.classList.remove('range-selected');
-          } else {
-            el.classList.add('range-selected');
-          }
-        }
-
         this.highlightRange();
         this.updateRange();
         this.close(confirm, true);
@@ -1284,16 +1277,17 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       var _this8 = this;
 
       this.selectedRange = -1;
-      var isContinuousRange = true;
-
-      if (rangeInput.length === 1) {
-        this.selectedRangeDates = _toConsumableArray(rangeInput);
-        this.customRangeSelected = true;
-      } else if (rangeInput.length === 2) {
-        this.selectedRangeDates = _toConsumableArray(rangeInput);
-        this.customRangeSelected = true;
-      }
+      var isContinuousRange = true; // if (rangeInput.length === 1) {
+      //   this.selectedRangeDates = [...rangeInput]
+      //   this.customRangeSelected = true
+      // }
+      // else if (rangeInput.length === 2) {      
+      //   this.selectedRangeDates = [...rangeInput]
+      //   this.customRangeSelected = true
+      // }
 
+      this.selectedRangeDates = _toConsumableArray(rangeInput);
+      this.customRangeSelected = true;
       rangeInput.forEach(function (r, i) {
         if (i > 0) {
           if (_this8.options.mode === 'date' || _this8.options.mode === 'monthyear') {
@@ -1447,6 +1441,16 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       if (labelEl) {
         labelEl.innerHTML = range.label;
       }
+
+      var headerEl = document.getElementById("".concat(this.elementId, "_header"));
+
+      if (headerEl) {
+        if (this.selectedRange === 0) {
+          headerEl.classList.remove('range-selected');
+        } else {
+          headerEl.classList.add('range-selected');
+        }
+      }
     }
   }]);
 
@@ -1981,7 +1985,8 @@ var WebsyDragDrop = /*#__PURE__*/function () {
     var DEFAULTS = {
       items: [],
       orientation: 'horizontal',
-      dropPlaceholder: 'Drop item here'
+      dropPlaceholder: 'Drop item here',
+      accepts: 'application/wd-item'
     };
     this.busy = false;
     this.options = _extends({}, DEFAULTS, options);
@@ -2047,7 +2052,7 @@ var WebsyDragDrop = /*#__PURE__*/function () {
         item.id = WebsyDesigns.Utils.createIdentity();
       }
 
-      var html = "\n      <div id='".concat(item.id, "_item' class='websy-dragdrop-item' draggable='true' data-id='").concat(item.id, "'>        \n        <div id='").concat(item.id, "_itemInner' class='websy-dragdrop-item-inner' data-id='").concat(item.id, "'>\n    ");
+      var html = "\n      <div id='".concat(item.id, "_item' class='websy-dragdrop-item ").concat((item.classes || []).join(' '), "' draggable='true' data-id='").concat(item.id, "'>        \n        <div id='").concat(item.id, "_itemInner' class='websy-dragdrop-item-inner' data-id='").concat(item.id, "'>\n    ");
 
       if (item.component) {
         html += "<div id='".concat(item.id, "_component'></div>");
@@ -2077,27 +2082,32 @@ var WebsyDragDrop = /*#__PURE__*/function () {
     value: function handleDragStart(event) {
       this.draggedId = event.target.getAttribute('data-id');
       event.dataTransfer.effectAllowed = 'move';
-      event.dataTransfer.setData('application/wd-item', JSON.stringify({
+      event.dataTransfer.setData(this.options.accepts, JSON.stringify({
         el: event.target.id,
         id: this.elementId,
         itemId: this.draggedId
-      })); // console.log('drag start', event)
+      }));
+      event.target.classList.add('dragging'); // event.target.style.opacity = 0.5
 
-      event.target.style.opacity = 0.5;
       this.dragging = true;
     }
   }, {
     key: "handleDragOver",
     value: function handleDragOver(event) {
-      // console.log('drag over', event.target.classList)
       if (event.preventDefault) {
         event.preventDefault();
       }
 
+      console.log('drag', event.target.classList);
+
       if (!event.target.classList.contains('droppable')) {
         return;
       }
 
+      if (event.dataTransfer.types.indexOf(this.options.accepts) === -1) {
+        return;
+      }
+
       event.target.classList.add('drag-over');
     }
   }, {
@@ -2117,8 +2127,8 @@ var WebsyDragDrop = /*#__PURE__*/function () {
     key: "handleDrop",
     value: function handleDrop(event) {
       // console.log('drag drop')
-      // console.log(event.dataTransfer.getData('application/wd-item'))
-      var data = JSON.parse(event.dataTransfer.getData('application/wd-item'));
+      // console.log(event.dataTransfer.getData('application/wd-item'))    
+      var data = JSON.parse(event.dataTransfer.getData(this.options.accepts));
 
       if (event.preventDefault) {
         event.preventDefault();
@@ -2128,6 +2138,10 @@ var WebsyDragDrop = /*#__PURE__*/function () {
         return;
       }
 
+      if (event.dataTransfer.types.indexOf(this.options.accepts) === -1) {
+        return;
+      }
+
       var side = event.target.getAttribute('data-side');
       var id = event.target.getAttribute('data-id');
       var index = this.getItemIndex(id);
@@ -2185,6 +2199,7 @@ var WebsyDragDrop = /*#__PURE__*/function () {
     value: function handleDragEnd(event) {
       // console.log('drag end')
       event.target.style.opacity = 1;
+      event.target.classList.remove('dragging');
       this.draggedId = null;
       this.dragging = false;
       var startEl = document.getElementById("".concat(this.elementId, "start_item"));
@@ -6200,12 +6215,20 @@ var WebsyTable3 = /*#__PURE__*/function () {
       data.forEach(function (row) {
         bodyHtml += "<tr class=\"websy-table-row\">";
         row.forEach(function (cell, cellIndex) {
+          if (typeof sizingColumns[cellIndex] === 'undefined') {
+            return; // need to revisit this logic
+          }
+
           var style = '';
 
           if (cell.style) {
             style += cell.style;
           }
 
+          if (useWidths === true) {
+            style += "max-width: ".concat(sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth, "px!important;");
+          }
+
           if (cell.backgroundColor) {
             style += "background-color: ".concat(cell.backgroundColor, "; ");
 
@@ -6218,7 +6241,8 @@ var WebsyTable3 = /*#__PURE__*/function () {
             style += "color: ".concat(cell.color, "; ");
           }
 
-          bodyHtml += "<td \n          class='websy-table-cell'\n          style='".concat(style, "'\n          data-info='").concat(cell.value, "'\n          colspan='").concat(cell.colspan || 1, "'\n          rowspan='").concat(cell.rowspan || 1, "'\n        "); // if (useWidths === true) {
+          console.log('rowspan', cell.rowspan);
+          bodyHtml += "<td \n          class='websy-table-cell ".concat((cell.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        "); // if (useWidths === true) {
           //   bodyHtml += `
           //     style='width: ${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}px!important'
           //     width='${sizingColumns[cellIndex].width || sizingColumns[cellIndex].actualWidth}'
@@ -6377,10 +6401,16 @@ var WebsyTable3 = /*#__PURE__*/function () {
       this.sizes.totalWidth = this.options.columns[this.options.columns.length - 1].reduce(function (a, b) {
         return a + (b.width || b.actualWidth);
       }, 0);
+      this.sizes.totalNonPinnedWidth = this.options.columns[this.options.columns.length - 1].filter(function (c, i) {
+        return i >= _this40.pinnedColumns;
+      }).reduce(function (a, b) {
+        return a + (b.width || b.actualWidth);
+      }, 0);
       var outerSize = outerEl.getBoundingClientRect();
 
       if (this.sizes.totalWidth < outerSize.width) {
         this.sizes.totalWidth = 0;
+        this.sizes.totalNonPinnedWidth = 0;
         var equalWidth = outerSize.width / this.options.columns[this.options.columns.length - 1].length;
         this.options.columns[this.options.columns.length - 1].forEach(function (c, i) {
           if (!c.width) {
@@ -6391,6 +6421,11 @@ var WebsyTable3 = /*#__PURE__*/function () {
           }
 
           _this40.sizes.totalWidth += c.width || c.actualWidth;
+
+          if (i < _this40.pinnedColumns) {
+            _this40.sizes.totalNonPinnedWidth += c.width || c.actualWidth;
+          }
+
           equalWidth = (outerSize.width - _this40.sizes.totalWidth) / (_this40.options.columns[_this40.options.columns.length - 1].length - (i + 1));
         });
       } // take the height of the last cell as the official height for data cells
@@ -6412,10 +6447,14 @@ var WebsyTable3 = /*#__PURE__*/function () {
 
       if (this.sizes.rowsToRender < this.totalRowCount) {
         this.vScrollRequired = true;
+      } else {
+        this.vScrollRequired = false;
       }
 
       if (this.sizes.totalWidth > this.sizes.outer.width) {
         this.hScrollRequired = true;
+      } else {
+        this.hScrollRequired = false;
       }
 
       this.options.allColumns = this.options.columns.map(function (c) {
@@ -6605,9 +6644,9 @@ var WebsyTable3 = /*#__PURE__*/function () {
         if (this.hScrollRequired === true) {
           hScrollEl.style.left = "".concat(this.sizes.table.width - this.sizes.scrollableWidth, "px");
           hScrollEl.style.width = "".concat(this.sizes.scrollableWidth - 20, "px");
-          hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalWidth)) + 'px';
+          hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px';
         } else {
-          hHandleEl.style.height = '0px';
+          hHandleEl.style.width = '0px';
         }
       }
     }
@@ -6648,8 +6687,6 @@ var WebsyTable3 = /*#__PURE__*/function () {
         el.classList.add('has-error');
       }
 
-      var tableEl = document.getElementById("".concat(this.elementId, "_tableInner"));
-      tableEl.classList.add('hidden');
       var containerEl = document.getElementById("".concat(this.elementId, "_errorContainer"));
 
       if (containerEl) {
@@ -6675,6 +6712,24 @@ var WebsyTable3 = /*#__PURE__*/function () {
   }, {
     key: "scrollX",
     value: function scrollX(diff) {
+      var el = document.getElementById("".concat(this.elementId, "_tableContainer"));
+
+      if (!el.classList.contains('scrolling')) {
+        el.classList.add('scrolling');
+      }
+
+      if (this.scrollTimeoutFn) {
+        clearTimeout(this.scrollTimeoutFn);
+      }
+
+      this.scrollTimeoutFn = setTimeout(function () {
+        el.classList.remove('scrolling');
+      }, 200);
+
+      if (this.hScrollRequired === false) {
+        return;
+      }
+
       var scrollContainerEl = document.getElementById("".concat(this.elementId, "_hScrollContainer"));
       var scrollHandleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
       var handlePos;
@@ -6690,12 +6745,12 @@ var WebsyTable3 = /*#__PURE__*/function () {
       scrollHandleEl.style.left = Math.min(scrollableSpace, Math.max(0, handlePos)) + 'px';
 
       if (this.options.onScroll) {
-        var actualLeft = (this.sizes.totalWidth - this.sizes.scrollableWidth) * (Math.min(scrollableSpace, Math.max(0, handlePos)) / scrollableSpace);
+        var actualLeft = (this.sizes.totalNonPinnedWidth - this.sizes.scrollableWidth) * (Math.min(scrollableSpace, Math.max(0, handlePos)) / scrollableSpace);
         var cumulativeWidth = 0;
         this.startCol = 0;
         this.endCol = 0;
 
-        for (var i = 0; i < this.options.allColumns[this.options.allColumns.length - 1].length; i++) {
+        for (var i = this.pinnedColumns; i < this.options.allColumns[this.options.allColumns.length - 1].length; i++) {
           cumulativeWidth += this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth;
           console.log('actualLeft', actualLeft, this.sizes.totalWidth, cumulativeWidth, cumulativeWidth + this.options.allColumns[this.options.allColumns.length - 1][i].actualWidth);
 
@@ -6730,6 +6785,24 @@ var WebsyTable3 = /*#__PURE__*/function () {
   }, {
     key: "scrollY",
     value: function scrollY(diff) {
+      var el = document.getElementById("".concat(this.elementId, "_tableContainer"));
+
+      if (!el.classList.contains('scrolling')) {
+        el.classList.add('scrolling');
+      }
+
+      if (this.scrollTimeoutFn) {
+        clearTimeout(this.scrollTimeoutFn);
+      }
+
+      this.scrollTimeoutFn = setTimeout(function () {
+        el.classList.remove('scrolling');
+      }, 200);
+
+      if (this.vScrollRequired === false) {
+        return;
+      }
+
       var scrollContainerEl = document.getElementById("".concat(this.elementId, "_vScrollContainer"));
       var scrollHandleEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
       var handlePos;
@@ -7716,11 +7789,11 @@ var WebsyChart = /*#__PURE__*/function () {
 
       bars.exit().transition(this.transition).style('stroke-opacity', 1e-6).remove();
       bars.attr('width', getBarWidth.bind(this)).attr('height', getBarHeight.bind(this)).attr('x', getBarX.bind(this)).attr('y', getBarY.bind(this)).transition(this.transition).attr('fill', function (d) {
-        return d.color || series.color;
+        return d.y.color || d.color || series.color;
       });
       bars.enter().append('rect').attr('width', getBarWidth.bind(this)).attr('height', getBarHeight.bind(this)).attr('x', getBarX.bind(this)).attr('y', getBarY.bind(this)) // .transition(this.transition)
       .attr('fill', function (d) {
-        return d.color || series.color;
+        return d.y.color || d.color || series.color;
       }).attr('class', function (d) {
         return "bar bar_".concat(series.key);
       });
@@ -7740,20 +7813,36 @@ var WebsyChart = /*#__PURE__*/function () {
         yAxis = 'bottomAxis';
       }
 
-      if (this.options.showLabels) {
+      if (this.options.showLabels === true || series.showLabels === true) {
         // need to add logic to handle positioning options
         // e.g. Inside, Outide, Auto (this will also affect the available plot space)
         // We currently only support 'Auto'  
         var labels = this.labelLayer.selectAll(".label_".concat(series.key)).data(series.data);
         labels.exit().transition(this.transition).style('stroke-opacity', 1e-6).remove();
-        labels.attr('x', getLabelX.bind(this)).attr('y', getLabelY.bind(this)).attr('class', "label_".concat(series.key)).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).style('fill', function (d) {
-          return _this45.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.color || series.color);
-        }).transition(this.transition).text(function (d) {
+        labels.attr('x', getLabelX.bind(this)).attr('y', getLabelY.bind(this)).attr('class', "label_".concat(series.key)).attr('fill', function (d) {
+          return _this45.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
+        }).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).transition(this.transition).text(function (d) {
           return d.y.label || d.y.value;
+        }).each(function (d, i) {
+          if (that.options.orientation === 'horizontal') {
+            if (that.options.grouping === 'stacked') {
+              this.setAttribute('text-anchor', 'middle');
+            } else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
+              this.setAttribute('text-anchor', 'end');
+              this.setAttribute('x', +this.getAttribute('x') - 8);
+              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color));
+            } else {
+              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
+            }
+          } else {
+            if (that.plotheight - getLabelX.call(that, d) < (that.options.labelSize || that.options.fontSize)) {
+              this.setAttribute('y', +this.getAttribute('y') + 8);
+            }
+          }
         });
-        labels.enter().append('text').attr('class', "label_".concat(series.key)).attr('x', getLabelX.bind(this)).attr('y', getLabelY.bind(this)).attr('alignment-baseline', 'central').attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle').style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).style('fill', function (d) {
-          return _this45.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.color || series.color);
-        }).text(function (d) {
+        labels.enter().append('text').attr('class', "label_".concat(series.key)).attr('x', getLabelX.bind(this)).attr('y', getLabelY.bind(this)).attr('alignment-baseline', 'central').attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle').attr('fill', function (d) {
+          return _this45.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
+        }).style('font-size', "".concat(this.options.labelSize || this.options.fontSize, "px")).text(function (d) {
           return d.y.label || d.y.value;
         }).each(function (d, i) {
           if (that.options.orientation === 'horizontal') {
@@ -7762,6 +7851,9 @@ var WebsyChart = /*#__PURE__*/function () {
             } else if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
               this.setAttribute('text-anchor', 'end');
               this.setAttribute('x', +this.getAttribute('x') - 8);
+              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color));
+            } else {
+              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
             }
           } else {
             if (that.plotheight - getLabelX.call(that, d) < (that.options.labelSize || that.options.fontSize)) {