@websy/websy-designs 1.4.2 → 1.4.4

package/dist/websy-designs-es6.debug.js

@@ -158,7 +158,9 @@ class ButtonGroup {
     const DEFAULTS = {
       style: 'button',
       subscribers: {},
-      activeItem: 0    
+      activeItem: -1,
+      tag: 'div',
+      allowNone: false
     }
     this.options = Object.assign({}, DEFAULTS, options)
     const el = document.getElementById(this.elementId)
@@ -171,7 +173,7 @@ class ButtonGroup {
     if (event.target.classList.contains('websy-button-group-item')) {
       const index = +event.target.getAttribute('data-index')
       if (this.options.activeItem !== index) {
-        if (this.options.onDeactivate) {
+        if (this.options.onDeactivate && this.options.activeItem !== -1) {
           this.options.onDeactivate(this.options.items[this.options.activeItem], this.options.activeItem)
         }
         this.options.activeItem = index
@@ -187,7 +189,14 @@ class ButtonGroup {
         })        
         event.target.classList.remove('inactive')
         event.target.classList.add('active')        
-      } 
+      }
+      else if (this.options.activeItem === index && this.options.allowNone === true) { 
+        if (this.options.onDeactivate) {
+          this.options.onDeactivate(this.options.items[this.options.activeItem], this.options.activeItem)
+        }
+        this.options.activeItem = -1
+        event.target.classList.remove('active')
+      }
     }    
   }
   on (event, fn) {
@@ -210,7 +219,7 @@ class ButtonGroup {
           activeClass = i === this.options.activeItem ? 'active' : 'inactive'
         }
         return `
-          <div ${(t.attributes || []).join(' ')} data-id="${t.id || t.label}" data-index="${i}" class="websy-button-group-item ${(t.classes || []).join(' ')} ${this.options.style}-style ${activeClass}">${t.label}</div>
+          <${this.options.tag} ${(t.attributes || []).join(' ')} data-id="${t.id || t.label}" data-index="${i}" class="websy-button-group-item ${(t.classes || []).join(' ')} ${this.options.style}-style ${activeClass}">${t.label}</${this.options.tag}>
         `
       }).join('')
     }
@@ -1606,7 +1615,9 @@ class WebsyDropdown {
     if (el) {
       el.style.zIndex = ''
     }
-    scrollEl.scrollTop = 0
+    if (scrollEl) {
+      scrollEl.scrollTo(0, 0)
+    }    
     maskEl.classList.remove('active')
     contentEl.classList.remove('active')
     contentEl.classList.remove('on-top')    
@@ -5677,12 +5688,16 @@ class WebsyTable3 {
         if (typeof sizingColumns[sizeIndex] === 'undefined') {
           return // need to revisit this logic
         }
-        let style = `width: ${sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth}px!important; `        
-        let divStyle = style
+        let style = ''
+        let divStyle = ''
+        if (useWidths === true && (+cell.colspan === 1 || !cell.colspan)) {
+          style = `width: ${sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth}px!important; `        
+          divStyle = style
+        }
         if (cell.style) {
           style += cell.style
         }
-        if (useWidths === true) {
+        if (useWidths === true && (+cell.colspan === 1 || !cell.colspan)) {
           style += `max-width: ${sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth}px!important;`
           divStyle += `max-width: ${sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth}px!important;`
         }        
@@ -5727,6 +5742,25 @@ class WebsyTable3 {
             class='websy-table-cell-collapse'
           >${WebsyDesigns.Icons.MinusFilled}</i>`
         }
+        if (sizingColumns[sizeIndex].showAsLink === true && cell.value.trim() !== '') {
+          cell.value = `
+            <a href='${cell.value}' target='${sizingColumns[sizeIndex].openInNewTab === true ? '_blank' : '_self'}'>${cell.displayText || sizingColumns[sizeIndex].linkText || cell.value}</a>
+          `
+        }
+        if (sizingColumns[sizeIndex].showAsRouterLink === true && cell.value.trim() !== '') {
+          cell.value = `
+            <a data-view='${(cell.link || cell.value).replace(/'/g, '\'')}' class='websy-trigger'>${cell.value}</a>
+          `
+        }
+        if (sizingColumns[sizeIndex].showAsImage === true) {
+          cell.value = `
+            <img               
+              style="width: ${sizingColumns[sizeIndex].imgWidth ? sizingColumns[sizeIndex].imgWidth : 'auto'}; height: ${sizingColumns[sizeIndex].imgHeight ? sizingColumns[sizeIndex].imgHeight : 'auto'};" 
+              src='${cell.value}'
+              ${sizingColumns[sizeIndex].errorImage ? 'onerror="this.src=\'' + sizingColumns[sizeIndex].errorImage + '\'"' : ''}
+            />
+          `
+        }
         bodyHtml += `
           ${cell.value}
         </div></td>`
@@ -5953,9 +5987,11 @@ class WebsyTable3 {
       }
       else if (data) {
         let longest = ''
-        for (let i = 0; i < Math.min(data.length, 1000); i++) {          
-          if (longest.length < data[i][colIndex].value.length) {
-            longest = data[i][colIndex].value
+        for (let i = 0; i < Math.min(data.length, 1000); i++) { 
+          if (data[i].length === this.options.columns[this.options.columns.length - 1].length) {
+            if (longest.length < data[i][colIndex].value.length) {
+              longest = data[i][colIndex].value
+            }
           }
         }
         output.push({value: longest})
@@ -6033,14 +6069,16 @@ class WebsyTable3 {
     this.mouseXStart = null
   }
   handleScrollWheel (event) {
-    event.preventDefault()
-    // console.log('scrollwheel', event)
-    if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-      this.scrollX(Math.max(-5, Math.min(5, event.deltaX)))
-    }
-    else {
-      this.scrollY(Math.max(-5, Math.min(5, event.deltaY)))
-    }
+    if (this.options.virtualScroll === true) {
+      event.preventDefault()
+      // console.log('scrollwheel', event)
+      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+        this.scrollX(Math.max(-5, Math.min(5, event.deltaX)))
+      }
+      else {
+        this.scrollY(Math.max(-5, Math.min(5, event.deltaY)))
+      }
+    }    
   }
   hideError () {
     const el = document.getElementById(`${this.elementId}_tableContainer`)

package/dist/websy-designs-es6.js

@@ -206,7 +206,9 @@ var ButtonGroup = /*#__PURE__*/function () {
     var DEFAULTS = {
       style: 'button',
       subscribers: {},
-      activeItem: 0
+      activeItem: -1,
+      tag: 'div',
+      allowNone: false
     };
     this.options = _extends({}, DEFAULTS, options);
     var el = document.getElementById(this.elementId);
@@ -224,7 +226,7 @@ var ButtonGroup = /*#__PURE__*/function () {
         var index = +event.target.getAttribute('data-index');
 
         if (this.options.activeItem !== index) {
-          if (this.options.onDeactivate) {
+          if (this.options.onDeactivate && this.options.activeItem !== -1) {
             this.options.onDeactivate(this.options.items[this.options.activeItem], this.options.activeItem);
           }
 
@@ -243,6 +245,13 @@ var ButtonGroup = /*#__PURE__*/function () {
           });
           event.target.classList.remove('inactive');
           event.target.classList.add('active');
+        } else if (this.options.activeItem === index && this.options.allowNone === true) {
+          if (this.options.onDeactivate) {
+            this.options.onDeactivate(this.options.items[this.options.activeItem], this.options.activeItem);
+          }
+
+          this.options.activeItem = -1;
+          event.target.classList.remove('active');
         }
       }
     }
@@ -277,7 +286,7 @@ var ButtonGroup = /*#__PURE__*/function () {
             activeClass = i === _this.options.activeItem ? 'active' : 'inactive';
           }
 
-          return "\n          <div ".concat((t.attributes || []).join(' '), " data-id=\"").concat(t.id || t.label, "\" data-index=\"").concat(i, "\" class=\"websy-button-group-item ").concat((t.classes || []).join(' '), " ").concat(_this.options.style, "-style ").concat(activeClass, "\">").concat(t.label, "</div>\n        ");
+          return "\n          <".concat(_this.options.tag, " ").concat((t.attributes || []).join(' '), " data-id=\"").concat(t.id || t.label, "\" data-index=\"").concat(i, "\" class=\"websy-button-group-item ").concat((t.classes || []).join(' '), " ").concat(_this.options.style, "-style ").concat(activeClass, "\">").concat(t.label, "</").concat(_this.options.tag, ">\n        ");
         }).join('');
       }
     }
@@ -1739,7 +1748,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
         el.style.zIndex = '';
       }
 
-      scrollEl.scrollTop = 0;
+      if (scrollEl) {
+        scrollEl.scrollTo(0, 0);
+      }
+
       maskEl.classList.remove('active');
       contentEl.classList.remove('active');
       contentEl.classList.remove('on-top');
@@ -6174,14 +6186,19 @@ var WebsyTable3 = /*#__PURE__*/function () {
             return; // need to revisit this logic
           }
 
-          var style = "width: ".concat(sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth, "px!important; ");
-          var divStyle = style;
+          var style = '';
+          var divStyle = '';
+
+          if (useWidths === true && (+cell.colspan === 1 || !cell.colspan)) {
+            style = "width: ".concat(sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth, "px!important; ");
+            divStyle = style;
+          }
 
           if (cell.style) {
             style += cell.style;
           }
 
-          if (useWidths === true) {
+          if (useWidths === true && (+cell.colspan === 1 || !cell.colspan)) {
             style += "max-width: ".concat(sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth, "px!important;");
             divStyle += "max-width: ".concat(sizingColumns[sizeIndex].width || sizingColumns[sizeIndex].actualWidth, "px!important;");
           }
@@ -6216,6 +6233,18 @@ var WebsyTable3 = /*#__PURE__*/function () {
             bodyHtml += "<i \n            data-row-index='".concat(rowIndex, "'\n            data-col-index='").concat(cell.level || cellIndex, "'\n            class='websy-table-cell-collapse'\n          >").concat(WebsyDesigns.Icons.MinusFilled, "</i>");
           }
 
+          if (sizingColumns[sizeIndex].showAsLink === true && cell.value.trim() !== '') {
+            cell.value = "\n            <a href='".concat(cell.value, "' target='").concat(sizingColumns[sizeIndex].openInNewTab === true ? '_blank' : '_self', "'>").concat(cell.displayText || sizingColumns[sizeIndex].linkText || cell.value, "</a>\n          ");
+          }
+
+          if (sizingColumns[sizeIndex].showAsRouterLink === true && cell.value.trim() !== '') {
+            cell.value = "\n            <a data-view='".concat((cell.link || cell.value).replace(/'/g, '\''), "' class='websy-trigger'>").concat(cell.value, "</a>\n          ");
+          }
+
+          if (sizingColumns[sizeIndex].showAsImage === true) {
+            cell.value = "\n            <img               \n              style=\"width: ".concat(sizingColumns[sizeIndex].imgWidth ? sizingColumns[sizeIndex].imgWidth : 'auto', "; height: ").concat(sizingColumns[sizeIndex].imgHeight ? sizingColumns[sizeIndex].imgHeight : 'auto', ";\" \n              src='").concat(cell.value, "'\n              ").concat(sizingColumns[sizeIndex].errorImage ? 'onerror="this.src=\'' + sizingColumns[sizeIndex].errorImage + '\'"' : '', "\n            />\n          ");
+          }
+
           bodyHtml += "\n          ".concat(cell.value, "\n        </div></td>");
         });
         bodyHtml += "</tr>";
@@ -6467,6 +6496,8 @@ var WebsyTable3 = /*#__PURE__*/function () {
   }, {
     key: "createSample",
     value: function createSample(data) {
+      var _this39 = this;
+
       var output = [];
       this.options.columns[this.options.columns.length - 1].forEach(function (col, colIndex) {
         if (col.maxLength) {
@@ -6477,8 +6508,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
           var longest = '';
 
           for (var i = 0; i < Math.min(data.length, 1000); i++) {
-            if (longest.length < data[i][colIndex].value.length) {
-              longest = data[i][colIndex].value;
+            if (data[i].length === _this39.options.columns[_this39.options.columns.length - 1].length) {
+              if (longest.length < data[i][colIndex].value.length) {
+                longest = data[i][colIndex].value;
+              }
             }
           }
 
@@ -6569,12 +6602,14 @@ var WebsyTable3 = /*#__PURE__*/function () {
   }, {
     key: "handleScrollWheel",
     value: function handleScrollWheel(event) {
-      event.preventDefault(); // console.log('scrollwheel', event)
+      if (this.options.virtualScroll === true) {
+        event.preventDefault(); // console.log('scrollwheel', event)
 
-      if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
-        this.scrollX(Math.max(-5, Math.min(5, event.deltaX)));
-      } else {
-        this.scrollY(Math.max(-5, Math.min(5, event.deltaY)));
+        if (Math.abs(event.deltaX) > Math.abs(event.deltaY)) {
+          this.scrollX(Math.max(-5, Math.min(5, event.deltaX)));
+        } else {
+          this.scrollY(Math.max(-5, Math.min(5, event.deltaY)));
+        }
       }
     }
   }, {
@@ -6868,7 +6903,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
 
 var WebsyChart = /*#__PURE__*/function () {
   function WebsyChart(elementId, options) {
-    var _this39 = this;
+    var _this40 = this;
 
     _classCallCheck(this, WebsyChart);
 
@@ -6919,22 +6954,22 @@ var WebsyChart = /*#__PURE__*/function () {
     this.invertOverride = function (input, input2) {
       var xAxis = 'bottomAxis';
 
-      if (_this39.options.orientation === 'horizontal') {
+      if (_this40.options.orientation === 'horizontal') {
         xAxis = 'leftAxis';
       }
 
-      var width = _this39[xAxis].step();
+      var width = _this40[xAxis].step();
 
       var output;
 
-      var domain = _toConsumableArray(_this39[xAxis].domain());
+      var domain = _toConsumableArray(_this40[xAxis].domain());
 
-      if (_this39.options.orientation === 'horizontal') {
+      if (_this40.options.orientation === 'horizontal') {
         domain = domain.reverse();
       }
 
       for (var j = 0; j < domain.length; j++) {
-        var breakA = _this39[xAxis](domain[j]) - width / 2;
+        var breakA = _this40[xAxis](domain[j]) - width / 2;
         var breakB = breakA + width;
 
         if (input > breakA && input <= breakB) {
@@ -7034,10 +7069,10 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "handleEventMouseMove",
     value: function handleEventMouseMove(event, d) {
-      var _this40 = this;
+      var _this41 = this;
 
       var bisectDate = d3.bisector(function (d) {
-        return _this40.parseX(d.x.value);
+        return _this41.parseX(d.x.value);
       }).left;
 
       if (this.options.showTrackingLine === true && d3.pointer(event)) {
@@ -7076,8 +7111,8 @@ var WebsyChart = /*#__PURE__*/function () {
         }
 
         this.options.data.series.forEach(function (s) {
-          if (_this40.options.data[xData].scale !== 'Time') {
-            xPoint = _this40[xAxis](_this40.parseX(xLabel));
+          if (_this41.options.data[xData].scale !== 'Time') {
+            xPoint = _this41[xAxis](_this41.parseX(xLabel));
             s.data.forEach(function (d) {
               if (d.x.value === xLabel) {
                 if (!tooltipTitle) {
@@ -7096,13 +7131,13 @@ var WebsyChart = /*#__PURE__*/function () {
             var pointA = s.data[index - 1];
             var pointB = s.data[index];
 
-            if (_this40.options.orientation === 'horizontal') {
+            if (_this41.options.orientation === 'horizontal') {
               pointA = _toConsumableArray(s.data).reverse()[index - 1];
               pointB = _toConsumableArray(s.data).reverse()[index];
             }
 
             if (pointA && !pointB) {
-              xPoint = _this40[xAxis](_this40.parseX(pointA.x.value));
+              xPoint = _this41[xAxis](_this41.parseX(pointA.x.value));
               tooltipTitle = pointA.x.value;
 
               if (!pointA.y.color) {
@@ -7112,12 +7147,12 @@ var WebsyChart = /*#__PURE__*/function () {
               tooltipData.push(pointA.y);
 
               if (typeof pointA.x.value.getTime !== 'undefined') {
-                tooltipTitle = d3.timeFormat(_this40.options.dateFormat || _this40.options.calculatedTimeFormatPattern)(pointA.x.value);
+                tooltipTitle = d3.timeFormat(_this41.options.dateFormat || _this41.options.calculatedTimeFormatPattern)(pointA.x.value);
               }
             }
 
             if (pointB && !pointA) {
-              xPoint = _this40[xAxis](_this40.parseX(pointB.x.value));
+              xPoint = _this41[xAxis](_this41.parseX(pointB.x.value));
               tooltipTitle = pointB.x.value;
 
               if (!pointB.y.color) {
@@ -7127,14 +7162,14 @@ var WebsyChart = /*#__PURE__*/function () {
               tooltipData.push(pointB.y);
 
               if (typeof pointB.x.value.getTime !== 'undefined') {
-                tooltipTitle = d3.timeFormat(_this40.options.dateFormat || _this40.options.calculatedTimeFormatPattern)(pointB.x.value);
+                tooltipTitle = d3.timeFormat(_this41.options.dateFormat || _this41.options.calculatedTimeFormatPattern)(pointB.x.value);
               }
             }
 
             if (pointA && pointB) {
-              var d0 = _this40[xAxis](_this40.parseX(pointA.x.value));
+              var d0 = _this41[xAxis](_this41.parseX(pointA.x.value));
 
-              var d1 = _this40[xAxis](_this40.parseX(pointB.x.value));
+              var d1 = _this41[xAxis](_this41.parseX(pointB.x.value));
 
               var mid = Math.abs(d0 - d1) / 2;
 
@@ -7143,7 +7178,7 @@ var WebsyChart = /*#__PURE__*/function () {
                 tooltipTitle = pointB.x.value;
 
                 if (typeof pointB.x.value.getTime !== 'undefined') {
-                  tooltipTitle = d3.timeFormat(_this40.options.dateFormat || _this40.options.calculatedTimeFormatPattern)(pointB.x.value);
+                  tooltipTitle = d3.timeFormat(_this41.options.dateFormat || _this41.options.calculatedTimeFormatPattern)(pointB.x.value);
                 }
 
                 if (!pointB.y.color) {
@@ -7156,7 +7191,7 @@ var WebsyChart = /*#__PURE__*/function () {
                 tooltipTitle = pointA.x.value;
 
                 if (typeof pointB.x.value.getTime !== 'undefined') {
-                  tooltipTitle = d3.timeFormat(_this40.options.dateFormat || _this40.options.calculatedTimeFormatPattern)(pointB.x.value);
+                  tooltipTitle = d3.timeFormat(_this41.options.dateFormat || _this41.options.calculatedTimeFormatPattern)(pointB.x.value);
                 }
 
                 if (!pointA.y.color) {
@@ -7270,7 +7305,7 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render(options) {
-      var _this41 = this;
+      var _this42 = this;
 
       /* global d3 options WebsyUtils */
       if (typeof options !== 'undefined') {
@@ -7339,7 +7374,7 @@ var WebsyChart = /*#__PURE__*/function () {
             var legendData = this.options.data.series.map(function (s, i) {
               return {
                 value: s.label || s.key,
-                color: s.color || _this41.options.colors[i % _this41.options.colors.length]
+                color: s.color || _this42.options.colors[i % _this42.options.colors.length]
               };
             });
 
@@ -7621,7 +7656,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
             if (this.options.data.bottom.formatter) {
               bAxisFunc.tickFormat(function (d) {
-                return _this41.options.data.bottom.formatter(d);
+                return _this42.options.data.bottom.formatter(d);
               });
             }
 
@@ -7647,8 +7682,8 @@ var WebsyChart = /*#__PURE__*/function () {
 
           if (this.options.margin.axisLeft > 0) {
             this.leftAxisLayer.call(d3.axisLeft(this.leftAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
-              if (_this41.options.data.left.formatter) {
-                d = _this41.options.data.left.formatter(d);
+              if (_this42.options.data.left.formatter) {
+                d = _this42.options.data.left.formatter(d);
               }
 
               return d;
@@ -7685,8 +7720,8 @@ var WebsyChart = /*#__PURE__*/function () {
 
             if (this.options.margin.axisRight > 0 && (this.options.data.right.min !== 0 || this.options.data.right.max !== 0)) {
               this.rightAxisLayer.call(d3.axisRight(this.rightAxis).ticks(this.options.data.left.ticks || 5).tickFormat(function (d) {
-                if (_this41.options.data.right.formatter) {
-                  d = _this41.options.data.right.formatter(d);
+                if (_this42.options.data.right.formatter) {
+                  d = _this42.options.data.right.formatter(d);
                 }
 
                 return d;
@@ -7725,18 +7760,18 @@ var WebsyChart = /*#__PURE__*/function () {
           this.renderedKeys = {};
           this.options.data.series.forEach(function (series, index) {
             if (!series.key) {
-              series.key = _this41.createIdentity();
+              series.key = _this42.createIdentity();
             }
 
             if (!series.color) {
-              series.color = _this41.options.colors[index % _this41.options.colors.length];
+              series.color = _this42.options.colors[index % _this42.options.colors.length];
             }
 
-            _this41["render".concat(series.type || 'bar')](series, index);
+            _this42["render".concat(series.type || 'bar')](series, index);
 
-            _this41.renderLabels(series, index);
+            _this42.renderLabels(series, index);
 
-            _this41.renderedKeys[series.key] = series.type;
+            _this42.renderedKeys[series.key] = series.type;
           });
         }
       }
@@ -7744,17 +7779,17 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "renderarea",
     value: function renderarea(series, index) {
-      var _this42 = this;
+      var _this43 = this;
 
       /* global d3 series index */
       var drawArea = function drawArea(xAxis, yAxis, curveStyle) {
         return d3.area().x(function (d) {
-          return _this42[xAxis](_this42.parseX(d.x.value));
+          return _this43[xAxis](_this43.parseX(d.x.value));
         }).y0(function (d) {
-          return _this42[yAxis](0);
+          return _this43[yAxis](0);
         }).y1(function (d) {
-          return _this42[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
-        }).curve(d3[curveStyle || _this42.options.curveStyle]);
+          return _this43[yAxis](isNaN(d.y.value) ? 0 : d.y.value);
+        }).curve(d3[curveStyle || _this43.options.curveStyle]);
       };
 
       var xAxis = 'bottomAxis';
@@ -7877,7 +7912,7 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "renderLabels",
     value: function renderLabels(series, index) {
-      var _this43 = this;
+      var _this44 = this;
 
       /* global series index d3 WebsyDesigns */
       var xAxis = 'bottomAxis';
@@ -7896,11 +7931,11 @@ var WebsyChart = /*#__PURE__*/function () {
         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', function (d) {
-          return getLabelX.call(_this43, d, series.labelPosition);
+          return getLabelX.call(_this44, d, series.labelPosition);
         }).attr('y', function (d) {
-          return getLabelY.call(_this43, d, series.labelPosition);
+          return getLabelY.call(_this44, d, series.labelPosition);
         }).attr('class', "label_".concat(series.key)).attr('fill', function (d) {
-          return _this43.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
+          return _this44.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) {
@@ -7925,11 +7960,11 @@ var WebsyChart = /*#__PURE__*/function () {
           }
         });
         labels.enter().append('text').attr('class', "label_".concat(series.key)).attr('x', function (d) {
-          return getLabelX.call(_this43, d, series.labelPosition);
+          return getLabelX.call(_this44, d, series.labelPosition);
         }).attr('y', function (d) {
-          return getLabelY.call(_this43, d, series.labelPosition);
+          return getLabelY.call(_this44, d, series.labelPosition);
         }).attr('alignment-baseline', 'central').attr('text-anchor', this.options.orientation === 'horizontal' ? 'left' : 'middle').attr('fill', function (d) {
-          return _this43.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color);
+          return _this44.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) {
@@ -7986,16 +8021,16 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "renderline",
     value: function renderline(series, index) {
-      var _this44 = this;
+      var _this45 = this;
 
       /* global series index d3 */
       var drawLine = function drawLine(xAxis, yAxis, curveStyle) {
         return d3.line().x(function (d) {
-          var adjustment = _this44.options.data[xAxis].scale === 'Time' ? 0 : _this44["".concat(xAxis, "Axis")].bandwidth() / 2;
-          return _this44["".concat(xAxis, "Axis")](_this44.parseX(d.x.value)) + adjustment;
+          var adjustment = _this45.options.data[xAxis].scale === 'Time' ? 0 : _this45["".concat(xAxis, "Axis")].bandwidth() / 2;
+          return _this45["".concat(xAxis, "Axis")](_this45.parseX(d.x.value)) + adjustment;
         }).y(function (d) {
-          return _this44["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
-        }).curve(d3[curveStyle || _this44.options.curveStyle]);
+          return _this45["".concat(yAxis, "Axis")](isNaN(d.y.value) ? 0 : d.y.value);
+        }).curve(d3[curveStyle || _this45.options.curveStyle]);
       };
 
       var xAxis = 'bottom';
@@ -8039,14 +8074,14 @@ var WebsyChart = /*#__PURE__*/function () {
   }, {
     key: "rendersymbol",
     value: function rendersymbol(series, index) {
-      var _this45 = this;
+      var _this46 = this;
 
       /* global d3 series index series.key */
       var drawSymbol = function drawSymbol(size) {
         return d3.symbol() // .type(d => {
         //   return d3.symbols[0]
         // })
-        .size(size || _this45.options.symbolSize);
+        .size(size || _this46.options.symbolSize);
       };
 
       var xAxis = 'bottomAxis';
@@ -8064,7 +8099,7 @@ var WebsyChart = /*#__PURE__*/function () {
       symbols.attr('d', function (d) {
         return drawSymbol(d.y.size || series.symbolSize)(d);
       }).transition(this.transition).attr('fill', 'white').attr('stroke', series.color).attr('transform', function (d) {
-        return "translate(".concat(_this45[xAxis](_this45.parseX(d.x.value)), ", ").concat(_this45[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        return "translate(".concat(_this46[xAxis](_this46.parseX(d.x.value)), ", ").concat(_this46[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
       }); // Enter
 
       symbols.enter().append('path').attr('d', function (d) {
@@ -8073,7 +8108,7 @@ var WebsyChart = /*#__PURE__*/function () {
       .attr('fill', 'white').attr('stroke', series.color).attr('class', function (d) {
         return "symbol symbol_".concat(series.key);
       }).attr('transform', function (d) {
-        return "translate(".concat(_this45[xAxis](_this45.parseX(d.x.value)), ", ").concat(_this45[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
+        return "translate(".concat(_this46[xAxis](_this46.parseX(d.x.value)), ", ").concat(_this46[yAxis](isNaN(d.y.value) ? 0 : d.y.value), ")");
       });
     }
   }, {
@@ -8228,7 +8263,7 @@ var WebsyLegend = /*#__PURE__*/function () {
   }, {
     key: "resize",
     value: function resize() {
-      var _this46 = this;
+      var _this47 = this;
 
       var el = document.getElementById(this.elementId);
 
@@ -8241,7 +8276,7 @@ var WebsyLegend = /*#__PURE__*/function () {
         // }
         var html = "\n        <div class='text-".concat(this.options.align, "'>\n      ");
         html += this._data.map(function (d, i) {
-          return _this46.getLegendItemHTML(d);
+          return _this47.getLegendItemHTML(d);
         }).join('');
         html += "\n        <div>\n      ";
         el.innerHTML = html;
@@ -8413,7 +8448,7 @@ var WebsyMap = /*#__PURE__*/function () {
   }, {
     key: "render",
     value: function render() {
-      var _this47 = this;
+      var _this48 = this;
 
       var mapEl = document.getElementById("".concat(this.elementId, "_map"));
       var legendEl = document.getElementById("".concat(this.elementId, "_map"));
@@ -8422,7 +8457,7 @@ var WebsyMap = /*#__PURE__*/function () {
         var legendData = this.options.data.polygons.map(function (s, i) {
           return {
             value: s.label || s.key,
-            color: s.color || _this47.options.colors[i % _this47.options.colors.length]
+            color: s.color || _this48.options.colors[i % _this48.options.colors.length]
           };
         });
         var longestValue = legendData.map(function (s) {
@@ -8486,7 +8521,7 @@ var WebsyMap = /*#__PURE__*/function () {
 
       if (this.polygons) {
         this.polygons.forEach(function (p) {
-          return _this47.map.removeLayer(p);
+          return _this48.map.removeLayer(p);
         });
       }
 
@@ -8544,18 +8579,18 @@ var WebsyMap = /*#__PURE__*/function () {
           }
 
           if (!p.options.color) {
-            p.options.color = _this47.options.colors[i % _this47.options.colors.length];
+            p.options.color = _this48.options.colors[i % _this48.options.colors.length];
           }
 
           var pol = L.polygon(p.data.map(function (c) {
             return c.map(function (d) {
               return [d.Latitude, d.Longitude];
             });
-          }), p.options).addTo(_this47.map);
+          }), p.options).addTo(_this48.map);
 
-          _this47.polygons.push(pol);
+          _this48.polygons.push(pol);
 
-          _this47.map.fitBounds(pol.getBounds());
+          _this48.map.fitBounds(pol.getBounds());
         });
       } // if (this.data.markers.length > 0) {            
       //   el.classList.remove('hidden')