@websy/websy-designs 1.1.9 → 1.1.10

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

@@ -204,6 +204,7 @@ class WebsyDatePicker {
     this.validDates = []
     this.validYears = []
     this.customRangeSelected = true
+    this.shiftPressed = false
     const DEFAULTS = {
       defaultRange: 0,
       minAllowedDate: this.floorDate(new Date(new Date((new Date().setFullYear(new Date().getFullYear() - 1))).setDate(1))),
@@ -295,6 +296,8 @@ class WebsyDatePicker {
       el.addEventListener('mousedown', this.handleMouseDown.bind(this))
       el.addEventListener('mouseover', this.handleMouseOver.bind(this))
       el.addEventListener('mouseup', this.handleMouseUp.bind(this))
+      document.addEventListener('keydown', this.handleKeyDown.bind(this))
+      document.addEventListener('keyup', this.handleKeyUp.bind(this))
       let html = `
         <div class='websy-date-picker-container'>
           <span class='websy-dropdown-header-label'>${this.options.label || 'Date'}</span>
@@ -311,6 +314,7 @@ class WebsyDatePicker {
             </div><!--
             --><div id='${this.elementId}_datelist' class='websy-date-picker-custom'>${this.renderDates()}</div>
             <div class='websy-dp-button-container'>
+              <span class="dp-footnote">Click and drag or hold Shift and click to select a range of values</span>
               <button class='${this.options.cancelBtnClasses || ''} websy-btn websy-dp-cancel'>
                 <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512"><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
               </button>
@@ -387,20 +391,37 @@ class WebsyDatePicker {
       this.close()
     }
   }
-  handleMouseDown (event) {
-    this.mouseDown = true
-    this.dragging = false       
-    if (event.target.classList.contains('websy-dp-date')) {
-      if (event.target.classList.contains('websy-disabled-date')) {
-        return
-      }
-      if (this.customRangeSelected === true) {
-        this.currentselection = []
-        this.customRangeSelected = false 
-      }      
-      this.mouseDownId = +event.target.id.split('_')[0]
-      this.selectDate(this.mouseDownId)
+  handleKeyDown (event) {
+    console.log('key down', event)
+    if (event.key === 'Shift') {
+      this.dragging = true
+      this.shiftPressed = true
+    }
+  }
+  handleKeyUp (event) {
+    this.dragging = false
+    this.shiftPressed = false
+  }
+  handleMouseDown (event) {    
+    if (this.shiftPressed === true && this.currentselection.length > 0) {
+      this.mouseDownId = this.currentselection[this.currentselection.length - 1]
+      this.selectDate(+event.target.id.split('_')[0])
     }
+    else {
+      this.mouseDown = true
+      this.dragging = false       
+      if (event.target.classList.contains('websy-dp-date')) {
+        if (event.target.classList.contains('websy-disabled-date')) {
+          return
+        }
+        if (this.customRangeSelected === true) {
+          this.currentselection = []
+          this.customRangeSelected = false 
+        }       
+        this.mouseDownId = +event.target.id.split('_')[0]       
+        this.selectDate(this.mouseDownId)
+      }
+    }    
   }
   handleMouseOver (event) {
     if (this.mouseDown === true) {
@@ -449,8 +470,8 @@ class WebsyDatePicker {
         let d
         let rangeStart
         let rangeEnd
-        if (this.options.mode === 'date') {
-          d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))
+        if (this.options.mode === 'date') {          
+          d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))          
           d = d.getTime()
           rangeStart = this.selectedRangeDates[0].getTime()
           rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
@@ -462,7 +483,7 @@ class WebsyDatePicker {
         }
         let dateEl 
         if (this.options.mode === 'date') {
-          dateEl = document.getElementById(`${d.getTime()}_date`)
+          dateEl = document.getElementById(`${d}_date`)
         }
         else if (this.options.mode === 'year') {
           dateEl = document.getElementById(`${d}_year`)
@@ -756,7 +777,10 @@ class WebsyDatePicker {
     let range
     if (this.selectedRange === -1) {
       const list = (this.currentselection.length > 0 ? this.currentselection : this.selectedRangeDates).map(d => {
-        if (this.options.mode === 'date') {        
+        if (this.options.mode === 'date') {      
+          if (!d.toLocaleDateString) {
+            d = new Date(d)
+          }  
           return d.toLocaleDateString()
         }
         else if (this.options.mode === 'year') {
@@ -911,6 +935,9 @@ class WebsyDropdown {
         searchEl.value = ''
       }      
     }
+    if (this.options.onClose) {
+      this.options.onClose(this.elementId)
+    }
   }
   handleClick (event) {
     if (this.options.disabled === true) {
@@ -2425,7 +2452,7 @@ class WebsyRouter {
       this.currentViewMain = this.options.defaultView
     }    
     if (view !== '') {
-      this.showView(view, params)      
+      this.showView(view, params, 'main')      
     }
   }
   handleFocus (event) {
@@ -2456,6 +2483,11 @@ class WebsyRouter {
       this.hideTriggerItems(view, group)
       this.hideViewItems(view, group)
       this.publish('hide', [view])
+    }
+    else if (group !== this.options.defaultGroup) {
+      this.hideTriggerItems(view, group)
+      this.hideViewItems(view, group)
+      this.publish('hide', [view])
     }    
   }
   // registerElements (root) {
@@ -2554,7 +2586,7 @@ class WebsyRouter {
       })      
     }
   }
-  showView (view, params) {
+  showView (view, params, group) {
     this.activateItem(view, this.options.triggerClass)
     this.activateItem(view, this.options.viewClass)
     let children = this.getActiveViewsFromParent(view)
@@ -2562,15 +2594,15 @@ class WebsyRouter {
       this.activateItem(children[c].view, this.options.triggerClass)
       this.activateItem(children[c].view, this.options.viewClass)
       this.showComponents(children[c].view)
-      this.publish('show', [children[c].view])
+      this.publish('show', [children[c].view, null, group])
     }
-    if (this.previousView !== this.currentView) {
+    if (this.previousView !== this.currentView || group !== 'main') {
       this.showComponents(view)
-      this.publish('show', [view, params]) 
+      this.publish('show', [view, params, group]) 
     }    
   }
   reloadCurrentView () {
-    this.showView(this.currentView, this.currentParams)
+    this.showView(this.currentView, this.currentParams, 'main')
   }
   navigate (inputPath, group = 'main', event, popped) {
     if (typeof popped === 'undefined') {
@@ -2667,10 +2699,10 @@ class WebsyRouter {
       return
     }
     if (toggle === false) {
-      this.showView(this.currentView, this.currentParams)
+      this.showView(this.currentView, this.currentParams, group)
     }
     else if (newPath && newPath !== '') {      
-      this.showView(newPath)
+      this.showView(newPath, null, group)
     }
     if (this.usesHTMLSuffix === true) {
       inputPath = window.location.pathname.split('/').pop() + inputPath
@@ -2789,7 +2821,7 @@ class Switch {
       this.render() 
     }    
   }
-  disabled () {
+  disable () {
     this.options.enabled = false
     this.render()
   }
@@ -3588,7 +3620,7 @@ class WebsyTable2 {
           selectedItems: [pageOptions.indexOf(this.options.pageSize)],
           items: pageOptions.map(p => ({ label: p.toString(), value: p })),
           allowClear: false,
-          disableSearch: true,
+          disableSearch: true,          
           onItemSelected: (selectedItem) => {
             if (this.options.onChangePageSize) {
               this.options.onChangePageSize(selectedItem.value)
@@ -4227,8 +4259,11 @@ if (this.options.data[side].scale === 'Time') {
       this.options.data.series.forEach(s => {     
         if (this.options.data[xData].scale !== 'Time') {
           xPoint = this[xAxis](this.parseX(xLabel))
-          s.data.forEach(d => {
+          s.data.forEach(d => {            
             if (d.x.value === xLabel) {
+              if (!tooltipTitle) {
+                tooltipTitle = d.x.value
+              }
               if (!d.y.color) {
                 d.y.color = s.color 
               }
@@ -4930,7 +4965,7 @@ function getBarX (d, i) {
 }
 function getBarY (d, i) {
   if (this.options.orientation === 'horizontal') {
-    if (this.options.grouping !== 'stacked') {
+    if (this.options.grouping === 'stacked') {
       return this[xAxis](this.parseX(d.x.value))
     }
     else {
@@ -5015,7 +5050,10 @@ if (this.options.showLabels) {
     .text(d => d.y.label || d.y.value)
     .each(function (d, i) {      
       if (that.options.orientation === 'horizontal') {
-        if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
+        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)
         }    
@@ -5471,7 +5509,7 @@ class WebsyMap {
   render () {
     const mapEl = document.getElementById(`${this.elementId}_map`)
     const legendEl = document.getElementById(`${this.elementId}_map`)
-    if (this.options.showLegend === true) {            
+    if (this.options.showLegend === true && this.options.data.polygons) {            
       let legendData = this.options.data.polygons.map((s, i) => ({value: s.label || s.key, color: s.color || this.options.colors[i % this.options.colors.length]})) 
       let longestValue = legendData.map(s => s.value).reduce((a, b) => a.length > b.length ? a : b)
       if (this.options.legendPosition === 'top' || this.options.legendPosition === 'bottom') {

package/dist/websy-designs-es6.js

@@ -301,6 +301,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
     this.validDates = [];
     this.validYears = [];
     this.customRangeSelected = true;
+    this.shiftPressed = false;
     var DEFAULTS = {
       defaultRange: 0,
       minAllowedDate: this.floorDate(new Date(new Date(new Date().setFullYear(new Date().getFullYear() - 1)).setDate(1))),
@@ -382,7 +383,9 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       el.addEventListener('mousedown', this.handleMouseDown.bind(this));
       el.addEventListener('mouseover', this.handleMouseOver.bind(this));
       el.addEventListener('mouseup', this.handleMouseUp.bind(this));
-      var html = "\n        <div class='websy-date-picker-container'>\n          <span class='websy-dropdown-header-label'>".concat(this.options.label || 'Date', "</span>\n          <div class='websy-date-picker-header'>\n            <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.options.mode][this.selectedRange].label, "</span>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>\n          </div>\n          <div id='").concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n          <div id='").concat(this.elementId, "_content' class='websy-date-picker-content'>\n            <div class='websy-date-picker-ranges'>\n              <ul id='").concat(this.elementId, "_rangelist'>\n                ").concat(this.renderRanges(), "\n              </ul>\n            </div><!--\n            --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n            <div class='websy-dp-button-container'>\n              <button class='").concat(this.options.cancelBtnClasses || '', " websy-btn websy-dp-cancel'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n              <button class='").concat(this.options.confirmBtnClasses || '', " websy-btn websy-dp-confirm'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><polyline points=\"416 128 192 384 96 288\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n            </div>\n          </div>          \n        </div>\n      ");
+      document.addEventListener('keydown', this.handleKeyDown.bind(this));
+      document.addEventListener('keyup', this.handleKeyUp.bind(this));
+      var html = "\n        <div class='websy-date-picker-container'>\n          <span class='websy-dropdown-header-label'>".concat(this.options.label || 'Date', "</span>\n          <div class='websy-date-picker-header'>\n            <span id='").concat(this.elementId, "_selectedRange'>").concat(this.options.ranges[this.options.mode][this.selectedRange].label, "</span>\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>\n          </div>\n          <div id='").concat(this.elementId, "_mask' class='websy-date-picker-mask'></div>\n          <div id='").concat(this.elementId, "_content' class='websy-date-picker-content'>\n            <div class='websy-date-picker-ranges'>\n              <ul id='").concat(this.elementId, "_rangelist'>\n                ").concat(this.renderRanges(), "\n              </ul>\n            </div><!--\n            --><div id='").concat(this.elementId, "_datelist' class='websy-date-picker-custom'>").concat(this.renderDates(), "</div>\n            <div class='websy-dp-button-container'>\n              <span class=\"dp-footnote\">Click and drag or hold Shift and click to select a range of values</span>\n              <button class='").concat(this.options.cancelBtnClasses || '', " websy-btn websy-dp-cancel'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n              <button class='").concat(this.options.confirmBtnClasses || '', " websy-btn websy-dp-confirm'>\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\"><polyline points=\"416 128 192 384 96 288\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>\n              </button>\n            </div>\n          </div>          \n        </div>\n      ");
       el.innerHTML = html;
       this.render();
     } else {
@@ -451,24 +454,45 @@ var WebsyDatePicker = /*#__PURE__*/function () {
         this.close();
       }
     }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(event) {
+      console.log('key down', event);
+
+      if (event.key === 'Shift') {
+        this.dragging = true;
+        this.shiftPressed = true;
+      }
+    }
+  }, {
+    key: "handleKeyUp",
+    value: function handleKeyUp(event) {
+      this.dragging = false;
+      this.shiftPressed = false;
+    }
   }, {
     key: "handleMouseDown",
     value: function handleMouseDown(event) {
-      this.mouseDown = true;
-      this.dragging = false;
+      if (this.shiftPressed === true && this.currentselection.length > 0) {
+        this.mouseDownId = this.currentselection[this.currentselection.length - 1];
+        this.selectDate(+event.target.id.split('_')[0]);
+      } else {
+        this.mouseDown = true;
+        this.dragging = false;
 
-      if (event.target.classList.contains('websy-dp-date')) {
-        if (event.target.classList.contains('websy-disabled-date')) {
-          return;
-        }
+        if (event.target.classList.contains('websy-dp-date')) {
+          if (event.target.classList.contains('websy-disabled-date')) {
+            return;
+          }
 
-        if (this.customRangeSelected === true) {
-          this.currentselection = [];
-          this.customRangeSelected = false;
-        }
+          if (this.customRangeSelected === true) {
+            this.currentselection = [];
+            this.customRangeSelected = false;
+          }
 
-        this.mouseDownId = +event.target.id.split('_')[0];
-        this.selectDate(this.mouseDownId);
+          this.mouseDownId = +event.target.id.split('_')[0];
+          this.selectDate(this.mouseDownId);
+        }
       }
     }
   }, {
@@ -547,7 +571,7 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           var dateEl = void 0;
 
           if (this.options.mode === 'date') {
-            dateEl = document.getElementById("".concat(d.getTime(), "_date"));
+            dateEl = document.getElementById("".concat(d, "_date"));
           } else if (this.options.mode === 'year') {
             dateEl = document.getElementById("".concat(d, "_year"));
           }
@@ -901,6 +925,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
       if (this.selectedRange === -1) {
         var list = (this.currentselection.length > 0 ? this.currentselection : this.selectedRangeDates).map(function (d) {
           if (_this5.options.mode === 'date') {
+            if (!d.toLocaleDateString) {
+              d = new Date(d);
+            }
+
             return d.toLocaleDateString();
           } else if (_this5.options.mode === 'year') {
             return d;
@@ -1042,6 +1070,10 @@ var WebsyDropdown = /*#__PURE__*/function () {
           searchEl.value = '';
         }
       }
+
+      if (this.options.onClose) {
+        this.options.onClose(this.elementId);
+      }
     }
   }, {
     key: "handleClick",
@@ -2842,7 +2874,7 @@ var WebsyRouter = /*#__PURE__*/function () {
       }
 
       if (view !== '') {
-        this.showView(view, params);
+        this.showView(view, params, 'main');
       }
     }
   }, {
@@ -2885,6 +2917,10 @@ var WebsyRouter = /*#__PURE__*/function () {
         this.hideTriggerItems(view, group);
         this.hideViewItems(view, group);
         this.publish('hide', [view]);
+      } else if (group !== this.options.defaultGroup) {
+        this.hideTriggerItems(view, group);
+        this.hideViewItems(view, group);
+        this.publish('hide', [view]);
       }
     } // registerElements (root) {
     //   if (root.nodeName === '#document') {
@@ -2988,7 +3024,7 @@ var WebsyRouter = /*#__PURE__*/function () {
     }
   }, {
     key: "showView",
-    value: function showView(view, params) {
+    value: function showView(view, params, group) {
       this.activateItem(view, this.options.triggerClass);
       this.activateItem(view, this.options.viewClass);
       var children = this.getActiveViewsFromParent(view);
@@ -2997,18 +3033,18 @@ var WebsyRouter = /*#__PURE__*/function () {
         this.activateItem(children[c].view, this.options.triggerClass);
         this.activateItem(children[c].view, this.options.viewClass);
         this.showComponents(children[c].view);
-        this.publish('show', [children[c].view]);
+        this.publish('show', [children[c].view, null, group]);
       }
 
-      if (this.previousView !== this.currentView) {
+      if (this.previousView !== this.currentView || group !== 'main') {
         this.showComponents(view);
-        this.publish('show', [view, params]);
+        this.publish('show', [view, params, group]);
       }
     }
   }, {
     key: "reloadCurrentView",
     value: function reloadCurrentView() {
-      this.showView(this.currentView, this.currentParams);
+      this.showView(this.currentView, this.currentParams, 'main');
     }
   }, {
     key: "navigate",
@@ -3128,9 +3164,9 @@ var WebsyRouter = /*#__PURE__*/function () {
       }
 
       if (toggle === false) {
-        this.showView(this.currentView, this.currentParams);
+        this.showView(this.currentView, this.currentParams, group);
       } else if (newPath && newPath !== '') {
-        this.showView(newPath);
+        this.showView(newPath, null, group);
       }
 
       if (this.usesHTMLSuffix === true) {
@@ -3287,8 +3323,8 @@ var Switch = /*#__PURE__*/function () {
   }
 
   _createClass(Switch, [{
-    key: "disabled",
-    value: function disabled() {
+    key: "disable",
+    value: function disable() {
       this.options.enabled = false;
       this.render();
     }
@@ -4847,6 +4883,10 @@ var WebsyChart = /*#__PURE__*/function () {
             xPoint = _this33[xAxis](_this33.parseX(xLabel));
             s.data.forEach(function (d) {
               if (d.x.value === xLabel) {
+                if (!tooltipTitle) {
+                  tooltipTitle = d.x.value;
+                }
+
                 if (!d.y.color) {
                   d.y.color = s.color;
                 }
@@ -5539,7 +5579,7 @@ var WebsyChart = /*#__PURE__*/function () {
 
       function getBarY(d, i) {
         if (this.options.orientation === 'horizontal') {
-          if (this.options.grouping !== 'stacked') {
+          if (this.options.grouping === 'stacked') {
             return this[xAxis](this.parseX(d.x.value));
           } else {
             return this[xAxis](this.parseX(d.x.value)) + (d.y.index || i) * barWidth;
@@ -5586,7 +5626,9 @@ var WebsyChart = /*#__PURE__*/function () {
           return d.y.label || d.y.value;
         }).each(function (d, i) {
           if (that.options.orientation === 'horizontal') {
-            if (that.plotWidth - getLabelX.call(that, d) < this.getComputedTextLength()) {
+            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);
             }
@@ -6050,7 +6092,7 @@ var WebsyMap = /*#__PURE__*/function () {
       var mapEl = document.getElementById("".concat(this.elementId, "_map"));
       var legendEl = document.getElementById("".concat(this.elementId, "_map"));
 
-      if (this.options.showLegend === true) {
+      if (this.options.showLegend === true && this.options.data.polygons) {
         var legendData = this.options.data.polygons.map(function (s, i) {
           return {
             value: s.label || s.key,