@websy/websy-designs 1.3.1 → 1.3.3

package/dist/websy-designs.debug.js

@@ -737,8 +737,9 @@ class WebsyDatePicker {
         let rangeEnd
         if (this.options.mode === 'date') {          
           d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + (i * this.oneDay)))          
-          d.setUTCHours(12, 0, 0, 0)
+          // d.setUTCHours(12, 0, 0, 0)
           d = d.getTime()
+          // console.log('highlighting', this.selectedRangeDates[0].getTime(), d)
           rangeStart = this.selectedRangeDates[0].getTime()
           rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
         }      
@@ -747,8 +748,10 @@ class WebsyDatePicker {
           rangeStart = this.selectedRangeDates[0]
           rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1]
         }
-        else if (this.options.mode === 'monthyear') {
-          d = new Date(this.selectedRangeDates[0].getTime()).setMonth(this.selectedRangeDates[0].getMonth() + i)          
+        else if (this.options.mode === 'monthyear') {          
+          d = this.floorDate(new Date(this.selectedRangeDates[0].getTime()).setMonth(this.selectedRangeDates[0].getMonth() + i))          
+          d = d.getTime()
+          console.log('highlighting', this.selectedRangeDates[0].getTime(), d)
           rangeStart = this.selectedRangeDates[0].getTime()
           rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime()
         }
@@ -3307,6 +3310,7 @@ class WebsyResultList {
     this.rows = []
     this.apiService = new WebsyDesigns.APIService('/api')
     this.templateService = new WebsyDesigns.APIService('')
+    this.activeTemplate = ''
     if (!elementId) {
       console.log('No element Id provided for Websy Search List')		
       return
@@ -3328,16 +3332,17 @@ class WebsyResultList {
   appendData (d) {
     let startIndex = this.rows.length
     this.rows = this.rows.concat(d)
+    this.activeTemplate = this.options.template
     const html = this.buildHTML(d, startIndex)
     const el = document.getElementById(this.elementId)
     el.innerHTML += html.replace(/\n/g, '')
   }
-  buildHTML (d, startIndex = 0) {
+  buildHTML (d, startIndex = 0, inputTemplate) {
     let html = ``
     if (this.options.template) {      
       if (d.length > 0) {
         d.forEach((row, ix) => {
-          let template = `${ix > 0 ? '-->' : ''}${this.options.template}${ix < d.length - 1 ? '<!--' : ''}`
+          let template = `${ix > 0 ? '-->' : ''}${inputTemplate || this.options.template}${ix < d.length - 1 ? '<!--' : ''}`
           // find conditional elements
           let ifMatches = [...template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g)]
           ifMatches.forEach(m => {
@@ -3416,16 +3421,39 @@ class WebsyResultList {
               }
             }
           })
+          let forMatches = [...template.matchAll(/<\s*for[^>]*>([\s\S]*?)<\s*\/\s*for>/g)]
+          forMatches.forEach(m => {
+            let itemsMatch = m[0].match(/(items=["|']\w.+)["|']/g)
+            let forMarkup = m[0].match(/<\s*for[^>]*>/)
+            let withoutFor = m[0].replace(forMarkup, '').replace('</for>', '').replace(/<\s*for[^>]*>/g, '')
+            if (itemsMatch && itemsMatch[0]) {
+              let c = itemsMatch[0].trim().replace('items=', '')
+              if (c.split('')[0] === '"') {
+                c = c.replace(/"/g, '')
+              }
+              else if (c.split('')[0] === '\'') {
+                c = c.replace(/'/g, '')
+              }              
+              let items = row
+              let parts = c.split('.')
+              parts.forEach(p => {
+                items = items[p]
+              })
+              template = template.replace(m[0], this.buildHTML(items, 0, withoutFor))              
+            }
+          })
           let tagMatches = [...template.matchAll(/(\sdata-event=["|']\w.+)["|']/g)]
           tagMatches.forEach(m => {
             if (m[0] && m.index > -1) {
               template = template.replace(m[0], `${m[0]} data-id=${startIndex + ix}`)
             }
-          })
-          for (let key in row) {
+          })         
+          let flatRow = this.flattenObject(row) 
+          for (let key in flatRow) {
             let rg = new RegExp(`{${key}}`, 'gm')                            
-            template = template.replace(rg, row[key])
+            template = template.replace(rg, flatRow[key] || '')
           }
+          template = template.replace(/\{(.*?)\}/g, '')
           html += template        
         })
       }
@@ -3450,6 +3478,27 @@ class WebsyResultList {
     }
     return null
   }
+  flattenObject (obj) {
+    const toReturn = {}
+    for (const i in obj) {
+      if (!obj.hasOwnProperty(i)) {
+        continue
+      }
+      if (typeof obj[i] === 'object') {
+        const flatObject = this.flattenObject(obj[i])
+        for (const x in flatObject) {
+          if (!flatObject.hasOwnProperty(x)) {
+            continue
+          }
+          toReturn[i + '.' + x] = flatObject[x]
+        }
+      }
+      else {
+        toReturn[i] = obj[i]
+      }
+    }
+    return JSON.parse(JSON.stringify(toReturn))
+  }
   handleClick (event) {    
     if (event.target.classList.contains('clickable')) {
       let l = event.target.getAttribute('data-event')
@@ -3535,7 +3584,7 @@ class WebsyRouter {
     if (this.options.onHide) {
       this.on('hide', this.options.onHide)
     }  
-    this.init()
+    // this.init()
   }
   addGroup (group) {
     if (!this.groups[group]) {
@@ -4084,7 +4133,7 @@ class WebsySearch {
         }, this.options.searchTimeout) 
       }      
       else {
-        if (this.options.onSearch) {
+        if (this.options.onSearch && (event.key === 'Delete' || event.key === 'Backspace')) {
           this.options.onSearch('')
         }
       }
@@ -7119,15 +7168,20 @@ if (this.options.showLabels === true || series.showLabels === true) {
     .text(d => d.y.label || d.y.value)
     .each(function (d, i) {      
       if (that.options.orientation === 'horizontal') {
-        if (that.options.grouping === 'stacked') {
+        if (that.options.grouping === 'stacked' && series.labelPosition !== 'outside') {
           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('x', +(this.getAttribute('x')) - 8)                  
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
         }    
-        else {        
+        else if (series.labelPosition === 'outside') {
+          this.setAttribute('text-anchor', 'start')
+          this.setAttribute('x', +(this.getAttribute('x')) + 8)                  
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
+        }
+        else {                  
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
         }
       }
@@ -7151,15 +7205,20 @@ if (this.options.showLabels === true || series.showLabels === true) {
     .text(d => d.y.label || d.y.value)
     .each(function (d, i) {      
       if (that.options.orientation === 'horizontal') {
-        if (that.options.grouping === 'stacked') {
+        if (that.options.grouping === 'stacked' && series.labelPosition !== 'outside') {
           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('x', +(this.getAttribute('x')) - 8)                  
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark(d.y.color || d.color || series.color))
         }    
-        else {        
+        else if (series.labelPosition === 'outside') {
+          this.setAttribute('text-anchor', 'start')
+          this.setAttribute('x', +(this.getAttribute('x')) + 8)                  
+          this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
+        }
+        else {                  
           this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'))
         }
       }
@@ -7171,10 +7230,10 @@ if (this.options.showLabels === true || series.showLabels === true) {
     })
 }
 
-function getLabelX (d) {
+function getLabelX (d, labelPosition = 'inside') {
   if (this.options.orientation === 'horizontal') {
     if (this.options.grouping === 'stacked') {
-      return this[yAxis](d.y.accumulative) + (this[yAxis](d.y.value) / 2)
+      return this[yAxis](d.y.accumulative) + (this[yAxis](d.y.value) / (labelPosition === 'inside' ? 2 : 1))
     }
     else {
       return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) + 4
@@ -7184,13 +7243,13 @@ function getLabelX (d) {
     return this[xAxis](this.parseX(d.x.value)) + (this[xAxis].bandwidth() / 2)
   }
 }
-function getLabelY (d) {
+function getLabelY (d, labelPosition = 'inside') {
   if (this.options.orientation === 'horizontal') {    
     return this[xAxis](this.parseX(d.x.value)) + (this[xAxis].bandwidth() / 2)
   }
   else {
     if (this.options.grouping === 'stacked') {
-      // 
+      return this[yAxis](d.y.accumulative) + (this[yAxis](d.y.value) / (labelPosition === 'inside' ? 2 : 1))
     }
     else {
       return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) - 4

package/dist/websy-designs.js

@@ -829,9 +829,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
           var rangeEnd = void 0;
 
           if (this.options.mode === 'date') {
-            d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + _i * this.oneDay));
-            d.setUTCHours(12, 0, 0, 0);
-            d = d.getTime();
+            d = this.floorDate(new Date(this.selectedRangeDates[0].getTime() + _i * this.oneDay)); // d.setUTCHours(12, 0, 0, 0)
+
+            d = d.getTime(); // console.log('highlighting', this.selectedRangeDates[0].getTime(), d)
+
             rangeStart = this.selectedRangeDates[0].getTime();
             rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime();
           } else if (this.options.mode === 'year') {
@@ -839,7 +840,9 @@ var WebsyDatePicker = /*#__PURE__*/function () {
             rangeStart = this.selectedRangeDates[0];
             rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1];
           } else if (this.options.mode === 'monthyear') {
-            d = new Date(this.selectedRangeDates[0].getTime()).setMonth(this.selectedRangeDates[0].getMonth() + _i);
+            d = this.floorDate(new Date(this.selectedRangeDates[0].getTime()).setMonth(this.selectedRangeDates[0].getMonth() + _i));
+            d = d.getTime();
+            console.log('highlighting', this.selectedRangeDates[0].getTime(), d);
             rangeStart = this.selectedRangeDates[0].getTime();
             rangeEnd = this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime();
           } else if (this.options.mode === 'hour') {
@@ -3625,6 +3628,7 @@ var WebsyResultList = /*#__PURE__*/function () {
     this.rows = [];
     this.apiService = new WebsyDesigns.APIService('/api');
     this.templateService = new WebsyDesigns.APIService('');
+    this.activeTemplate = '';
 
     if (!elementId) {
       console.log('No element Id provided for Websy Search List');
@@ -3653,6 +3657,7 @@ var WebsyResultList = /*#__PURE__*/function () {
     value: function appendData(d) {
       var startIndex = this.rows.length;
       this.rows = this.rows.concat(d);
+      this.activeTemplate = this.options.template;
       var html = this.buildHTML(d, startIndex);
       var el = document.getElementById(this.elementId);
       el.innerHTML += html.replace(/\n/g, '');
@@ -3663,12 +3668,13 @@ var WebsyResultList = /*#__PURE__*/function () {
       var _this23 = this;
 
       var startIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      var inputTemplate = arguments.length > 2 ? arguments[2] : undefined;
       var html = "";
 
       if (this.options.template) {
         if (d.length > 0) {
           d.forEach(function (row, ix) {
-            var template = "".concat(ix > 0 ? '-->' : '').concat(_this23.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
+            var template = "".concat(ix > 0 ? '-->' : '').concat(inputTemplate || _this23.options.template).concat(ix < d.length - 1 ? '<!--' : ''); // find conditional elements
 
             var ifMatches = _toConsumableArray(template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g));
 
@@ -3752,6 +3758,31 @@ var WebsyResultList = /*#__PURE__*/function () {
               }
             });
 
+            var forMatches = _toConsumableArray(template.matchAll(/<\s*for[^>]*>([\s\S]*?)<\s*\/\s*for>/g));
+
+            forMatches.forEach(function (m) {
+              var itemsMatch = m[0].match(/(items=["|']\w.+)["|']/g);
+              var forMarkup = m[0].match(/<\s*for[^>]*>/);
+              var withoutFor = m[0].replace(forMarkup, '').replace('</for>', '').replace(/<\s*for[^>]*>/g, '');
+
+              if (itemsMatch && itemsMatch[0]) {
+                var c = itemsMatch[0].trim().replace('items=', '');
+
+                if (c.split('')[0] === '"') {
+                  c = c.replace(/"/g, '');
+                } else if (c.split('')[0] === '\'') {
+                  c = c.replace(/'/g, '');
+                }
+
+                var items = row;
+                var parts = c.split('.');
+                parts.forEach(function (p) {
+                  items = items[p];
+                });
+                template = template.replace(m[0], _this23.buildHTML(items, 0, withoutFor));
+              }
+            });
+
             var tagMatches = _toConsumableArray(template.matchAll(/(\sdata-event=["|']\w.+)["|']/g));
 
             tagMatches.forEach(function (m) {
@@ -3760,11 +3791,14 @@ var WebsyResultList = /*#__PURE__*/function () {
               }
             });
 
-            for (var key in row) {
+            var flatRow = _this23.flattenObject(row);
+
+            for (var key in flatRow) {
               var rg = new RegExp("{".concat(key, "}"), 'gm');
-              template = template.replace(rg, row[key]);
+              template = template.replace(rg, flatRow[key] || '');
             }
 
+            template = template.replace(/\{(.*?)\}/g, '');
             html += template;
           });
         } else if (this.options.noRowsHTML) {
@@ -3785,6 +3819,33 @@ var WebsyResultList = /*#__PURE__*/function () {
 
       return null;
     }
+  }, {
+    key: "flattenObject",
+    value: function flattenObject(obj) {
+      var toReturn = {};
+
+      for (var i in obj) {
+        if (!obj.hasOwnProperty(i)) {
+          continue;
+        }
+
+        if (_typeof(obj[i]) === 'object') {
+          var flatObject = this.flattenObject(obj[i]);
+
+          for (var x in flatObject) {
+            if (!flatObject.hasOwnProperty(x)) {
+              continue;
+            }
+
+            toReturn[i + '.' + x] = flatObject[x];
+          }
+        } else {
+          toReturn[i] = obj[i];
+        }
+      }
+
+      return JSON.parse(JSON.stringify(toReturn));
+    }
   }, {
     key: "handleClick",
     value: function handleClick(event) {
@@ -3906,9 +3967,8 @@ var WebsyRouter = /*#__PURE__*/function () {
 
     if (this.options.onHide) {
       this.on('hide', this.options.onHide);
-    }
+    } // this.init()
 
-    this.init();
   }
 
   _createClass(WebsyRouter, [{
@@ -4585,7 +4645,7 @@ var WebsySearch = /*#__PURE__*/function () {
             }
           }, this.options.searchTimeout);
         } else {
-          if (this.options.onSearch) {
+          if (this.options.onSearch && (event.key === 'Delete' || event.key === 'Backspace')) {
             this.options.onSearch('');
           }
         }
@@ -7825,12 +7885,16 @@ var WebsyChart = /*#__PURE__*/function () {
           return d.y.label || d.y.value;
         }).each(function (d, i) {
           if (that.options.orientation === 'horizontal') {
-            if (that.options.grouping === 'stacked') {
+            if (that.options.grouping === 'stacked' && series.labelPosition !== 'outside') {
               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 if (series.labelPosition === 'outside') {
+              this.setAttribute('text-anchor', 'start');
+              this.setAttribute('x', +this.getAttribute('x') + 8);
+              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
             } else {
               this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
             }
@@ -7846,12 +7910,16 @@ var WebsyChart = /*#__PURE__*/function () {
           return d.y.label || d.y.value;
         }).each(function (d, i) {
           if (that.options.orientation === 'horizontal') {
-            if (that.options.grouping === 'stacked') {
+            if (that.options.grouping === 'stacked' && series.labelPosition !== 'outside') {
               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 if (series.labelPosition === 'outside') {
+              this.setAttribute('text-anchor', 'start');
+              this.setAttribute('x', +this.getAttribute('x') + 8);
+              this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
             } else {
               this.setAttribute('fill', that.options.labelColor || WebsyDesigns.WebsyUtils.getLightDark('#ffffff'));
             }
@@ -7864,9 +7932,11 @@ var WebsyChart = /*#__PURE__*/function () {
       }
 
       function getLabelX(d) {
+        var labelPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inside';
+
         if (this.options.orientation === 'horizontal') {
           if (this.options.grouping === 'stacked') {
-            return this[yAxis](d.y.accumulative) + this[yAxis](d.y.value) / 2;
+            return this[yAxis](d.y.accumulative) + this[yAxis](d.y.value) / (labelPosition === 'inside' ? 2 : 1);
           } else {
             return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) + 4;
           }
@@ -7876,10 +7946,13 @@ var WebsyChart = /*#__PURE__*/function () {
       }
 
       function getLabelY(d) {
+        var labelPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'inside';
+
         if (this.options.orientation === 'horizontal') {
           return this[xAxis](this.parseX(d.x.value)) + this[xAxis].bandwidth() / 2;
         } else {
-          if (this.options.grouping === 'stacked') {// 
+          if (this.options.grouping === 'stacked') {
+            return this[yAxis](d.y.accumulative) + this[yAxis](d.y.value) / (labelPosition === 'inside' ? 2 : 1);
           } else {
             return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) - 4;
           }