@websy/websy-designs 0.0.115 → 0.0.119

package/dist/websy-designs.debug.js

@@ -15,7 +15,9 @@
   WebsyMap
   WebsyKPI
   WebsyPDFButton
+  WebsyTemplate
   APIService
+  WebsyUtils
 */ 
 
 class WebsyPopupDialog {
@@ -156,8 +158,10 @@ class WebsyLoadingDialog {
 class WebsyNavigationMenu {
   constructor (elementId, options) {
     this.options = Object.assign({}, {
+      collapsable: false,
       orientation: 'horizontal',
-      parentMap: {}
+      parentMap: {},
+      childIndentation: 10
     }, options)
     if (!elementId) {
       console.log('No element Id provided for Websy Menu')		
@@ -196,15 +200,19 @@ class WebsyNavigationMenu {
     const el = document.getElementById(this.elementId)
     if (el) {
       let html = ``
-      if (this.options.logo) {
+      if (this.options.collapsable === true) {
         html += `
           <div id='${this.elementId}_menuIcon' class='websy-menu-icon'>
-            <svg viewbox="0 0 40 40" width="40" height="40">              
-              <rect x="0" y="0" width="40" height="4" rx="2"></rect>
-              <rect x="0" y="12" width="40" height="4" rx="2"></rect>
-              <rect x="0" y="24" width="40" height="4" rx="2"></rect>
+            <svg viewbox="0 0 40 40" width="30" height="40">              
+              <rect x="0" y="0" width="30" height="4" rx="2"></rect>
+              <rect x="0" y="12" width="30" height="4" rx="2"></rect>
+              <rect x="0" y="24" width="30" height="4" rx="2"></rect>
             </svg>
-            </div>
+          </div>
+        `
+      }
+      if (this.options.logo) {
+        html += `          
           <div 
             class='logo ${(this.options.logo.classes && this.options.logo.classes.join(' ')) || ''}'
             ${this.options.logo.attributes && this.options.logo.attributes.join(' ')}
@@ -240,10 +248,11 @@ class WebsyNavigationMenu {
 			<li class='websy-${this.options.orientation}-list-item'>
 				<div class='websy-menu-header ${items[i].classes && items[i].classes.join(' ')} ${selected} ${active}' 
 						 id='${this.elementId}_${currentBlock}_label' 
-						 data-id='${currentBlock}' 
+						 data-id='${currentBlock}'
+             data-menu-id='${this.elementId}_${currentBlock}_list'
 						 data-popout-id='${level > 1 ? block : currentBlock}'
 						 data-text='${items[i].text}'
-						 style='padding-left: ${level * this.options.menuHPadding}px'
+						 style='padding-left: ${level * this.options.childIndentation}px'
 						 ${items[i].attributes && items[i].attributes.join(' ')}
         >
       `
@@ -278,6 +287,9 @@ class WebsyNavigationMenu {
     }
     html += `</ul>`
     return html
+  }
+  toggleOpen () {
+
   }
   toggleMobileMenu (method) {
     if (typeof method === 'undefined') {
@@ -325,6 +337,13 @@ class WebsyForm {
       this.render()
     }
   }
+  cancelForm () {
+    const formEl = document.getElementById(`${this.elementId}Form`)
+    formEl.reset()
+    if (this.options.cancelFn) {
+      this.options.cancelFn(this.elementId)
+    }
+  }
   checkRecaptcha () {
     return new Promise((resolve, reject) => {
       if (this.options.useRecaptcha === true) {
@@ -375,9 +394,13 @@ class WebsyForm {
     }
   }
   handleClick (event) {
+    event.preventDefault()
     if (event.target.classList.contains('submit')) {
       this.submitForm()
     }
+    else if (event.target.classList.contains('cancel')) {
+      this.cancelForm()
+    }
   }
   handleKeyDown (event) {
     if (event.key === 'enter') {
@@ -418,42 +441,56 @@ class WebsyForm {
       let html = `
         <form id="${this.elementId}Form">
       `
-      this.options.fields.forEach(f => {
+      this.options.fields.forEach((f, i) => {
         if (f.component) {
           componentsToProcess.push(f)
           html += `
-            ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}
-            <div id='${this.elementId}_input_${f.field}_component' class='form-component'></div>
+            ${i > 0 ? '-->' : ''}<div class='${f.classes}'>
+              ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}
+              <div id='${this.elementId}_input_${f.field}_component' class='form-component'></div>
+            </div><!--
           `
         }
         else if (f.type === 'longtext') {
           html += `
-            ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}
-            <textarea
-              id="${this.elementId}_input_${f.field}"
-              ${f.required === true ? 'required' : ''} 
-              placeholder="${f.placeholder || ''}"
-              name="${f.field}" 
-              class="websy-input websy-textarea ${f.classes}"
-            ></textarea>
+            ${i > 0 ? '-->' : ''}<div class='${f.classes}'>
+              ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}
+              <textarea
+                id="${this.elementId}_input_${f.field}"
+                ${f.required === true ? 'required' : ''} 
+                placeholder="${f.placeholder || ''}"
+                name="${f.field}" 
+                class="websy-input websy-textarea"
+              ></textarea>
+            </div><!--
           ` 
         }
         else {
           html += `
-            ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}
-            <input 
-              id="${this.elementId}_input_${f.field}"
-              ${f.required === true ? 'required' : ''} 
-              type="${f.type || 'text'}" 
-              class="websy-input ${f.classes}" 
-              name="${f.field}" 
-              placeholder="${f.placeholder || ''}"
-              value="${f.value || ''}"
-              oninvalidx="this.setCustomValidity('${f.invalidMessage || 'Please fill in this field.'}')"
-            />
+            ${i > 0 ? '-->' : ''}<div class='${f.classes}'>
+              ${f.label ? `<label for="${f.field}">${f.label}</label>` : ''}
+              <input 
+                id="${this.elementId}_input_${f.field}"
+                ${f.required === true ? 'required' : ''} 
+                type="${f.type || 'text'}" 
+                class="websy-input" 
+                name="${f.field}" 
+                placeholder="${f.placeholder || ''}"
+                value="${f.value || ''}"
+                oninvalidx="this.setCustomValidity('${f.invalidMessage || 'Please fill in this field.'}')"
+              />
+            </div><!--
           `
         }        
       })
+      html += `
+        --><button class="websy-btn submit ${this.options.submit.classes}">${this.options.submit.text || 'Save'}</button>${this.options.cancel ? '<!--' : ''}
+      `
+      if (this.options.cancel) {
+        html += `
+          --><button class="websy-btn cancel ${this.options.cancel.classes}">${this.options.cancel.text || 'Cancel'}</button>
+        `
+      }
       html += `          
         </form>
         <div id="${this.elementId}_validationFail" class="websy-validation-failure"></div>
@@ -463,9 +500,6 @@ class WebsyForm {
           <div id='${this.elementId}_recaptcha'></div>
         ` 
       }      
-      html += `
-        <button class="websy-btn submit ${this.options.submit.classes}">${this.options.submit.text || 'Save'}</button>
-      `
       el.innerHTML = html
       this.processComponents(componentsToProcess, () => {
         if (this.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
@@ -884,6 +918,7 @@ Date.prototype.floor = function () {
   return new Date(`${this.getMonth() + 1}/${this.getDate()}/${this.getFullYear()}`)
 }
 
+/* global WebsyUtils */ 
 class WebsyDropdown {
   constructor (elementId, options) {
     const DEFAULTS = {
@@ -893,8 +928,10 @@ class WebsyDropdown {
       style: 'plain',
       items: [],
       label: '',
+      disabled: false,
       minSearchCharacters: 2,
-      showCompleteSelectedList: false
+      showCompleteSelectedList: false,
+      closeAfterSelection: true
     }
     this.options = Object.assign({}, DEFAULTS, options)    
     this.tooltipTimeoutFn = null
@@ -948,6 +985,7 @@ class WebsyDropdown {
     const contentEl = document.getElementById(`${this.elementId}_content`)
     maskEl.classList.remove('active')
     contentEl.classList.remove('active')
+    contentEl.classList.remove('on-top')
     const searchEl = document.getElementById(`${this.elementId}_search`)
     if (searchEl) {
       if (this.options.onCancelSearch) {            
@@ -957,6 +995,9 @@ class WebsyDropdown {
     }
   }
   handleClick (event) {
+    if (this.options.disabled === true) {
+      return
+    }
     if (event.target.classList.contains('websy-dropdown-header')) {
       this.open()
     }
@@ -1044,6 +1085,9 @@ class WebsyDropdown {
     const contentEl = document.getElementById(`${this.elementId}_content`)
     maskEl.classList.add('active')
     contentEl.classList.add('active')
+    if (WebsyUtils.getElementPos(contentEl).bottom > window.innerHeight) {
+      contentEl.classList.add('on-top')
+    }
     if (this.options.disableSearch !== true) {
       const searchEl = document.getElementById(`${this.elementId}_search`)
       if (searchEl) {
@@ -1057,12 +1101,13 @@ class WebsyDropdown {
       return
     }
     const el = document.getElementById(this.elementId)
-    const headerValue = this.selectedItems.map(s => this.options.items[s].label).join(this.options.multiValueDelimiter)
+    const headerLabel = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
+    const headerValue = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
     let html = `
-      <div class='websy-dropdown-container ${this.options.disableSearch !== true ? 'with-search' : ''}'>
+      <div class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''}'>
         <div id='${this.elementId}_header' class='websy-dropdown-header ${this.selectedItems.length === 1 ? 'one-selected' : ''} ${this.options.allowClear === true ? 'allow-clear' : ''}'>
           <span id='${this.elementId}_headerLabel' class='websy-dropdown-header-label'>${this.options.label}</span>
-          <span data-info='${headerValue}' class='websy-dropdown-header-value' id='${this.elementId}_selectedItems'>${headerValue}</span>
+          <span data-info='${headerLabel}' class='websy-dropdown-header-value' id='${this.elementId}_selectedItems'>${headerLabel}</span>
           <input class='dropdown-input' id='${this.elementId}_input' name='${this.options.field || this.options.label}' value='${headerValue}'>
           <svg class='arrow' 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>
     `
@@ -1142,19 +1187,21 @@ class WebsyDropdown {
       if (this.selectedItems.length === 1) {
         labelEl.innerHTML = item.label
         labelEl.setAttribute('data-info', item.label)
-        inputEl.value = item.label
+        inputEl.value = item.value
       }
       else if (this.selectedItems.length > 1) {
         if (this.options.showCompleteSelectedList === true) {
-          let selectedValues = this.selectedItems.map(s => this.options.items[s].label).join(this.options.multiValueDelimiter)
-          labelEl.innerHTML = selectedValues
-          labelEl.setAttribute('data-info', selectedValues)
+          let selectedLabels = this.selectedItems.map(s => this.options.items[s].label || this.options.items[s].value).join(this.options.multiValueDelimiter)
+          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
+          labelEl.innerHTML = selectedLabels
+          labelEl.setAttribute('data-info', selectedLabels)
           inputEl.value = selectedValues
         }
         else {
+          let selectedValues = this.selectedItems.map(s => this.options.items[s].value || this.options.items[s].label).join(this.options.multiValueDelimiter)
           labelEl.innerHTML = `${this.selectedItems.length} selected`
           labelEl.setAttribute('data-info', '')
-          inputEl.value = this.selectedItems.join(this.options.multiValueDelimiter)
+          inputEl.value = selectedValues
         }        
       }
       else {        
@@ -1182,7 +1229,9 @@ class WebsyDropdown {
     if (item && this.options.onItemSelected) {
       this.options.onItemSelected(item, this.selectedItems, this.options.items)
     }
-    this.close()
+    if (this.options.closeAfterSelection === true) {
+      this.close() 
+    }    
   }
 }
 
@@ -1390,6 +1439,149 @@ class WebsyResultList {
   }
 }
 
+/* global WebsyDesigns */ 
+class WebsyTemplate {
+  constructor (elementId, options) {
+    const DEFAULTS = {
+      listeners: {
+        click: {}
+      }
+    }
+    this.options = Object.assign({}, DEFAULTS, options)
+    this.elementId = elementId
+    this.templateService = new WebsyDesigns.APIService('')
+    if (!elementId) {
+      console.log('No element Id provided for Websy Template')		
+      return
+    }
+    const el = document.getElementById(elementId)
+    if (el) {
+      el.addEventListener('click', this.handleClick.bind(this))
+    }
+    if (typeof options.template === 'object' && options.template.url) {
+      this.templateService.get(options.template.url).then(templateString => {
+        this.options.template = templateString
+        this.render()        
+      })
+    }
+    else {
+      this.render()      
+    }    
+  }
+  buildHTML () {
+    let html = ``
+    if (this.options.template) {            
+      let template = this.options.template
+      // find conditional elements
+      let ifMatches = [...template.matchAll(/<\s*if[^>]*>([\s\S]*?)<\s*\/\s*if>/g)]
+      ifMatches.forEach(m => {
+        // get the condition
+        if (m[0] && m.index > -1) {
+          let conditionMatch = m[0].match(/(\scondition=["|']\w.+)["|']/g)
+          if (conditionMatch && conditionMatch[0]) {
+            let c = conditionMatch[0].trim().replace('condition=', '')
+            if (c.split('')[0] === '"') {
+              c = c.replace(/"/g, '')
+            }
+            else if (c.split('')[0] === '\'') {
+              c = c.replace(/'/g, '')
+            }
+            let parts = []
+            let polarity = true
+            if (c.indexOf('===') !== -1) {
+              parts = c.split('===')
+            }
+            else if (c.indexOf('!==') !== -1) {
+              parts = c.split('!==')
+              polarity = false
+            }
+            else if (c.indexOf('==') !== -1) {
+              parts = c.split('==')
+            }
+            else if (c.indexOf('!=') !== -1) {
+              parts = c.split('!=')
+              polarity = false
+            }
+            let removeAll = true
+            if (parts.length === 2) {
+              if (!isNaN(parts[1])) {
+                parts[1] = +parts[1]
+              }
+              if (parts[1] === 'true') {
+                parts[1] = true
+              }
+              if (parts[1] === 'false') {
+                parts[1] = false
+              }
+              if (typeof parts[1] === 'string') {
+                if (parts[1].indexOf('"') !== -1) {
+                  parts[1] = parts[1].replace(/"/g, '')
+                }
+                else if (parts[1].indexOf('\'') !== -1) {
+                  parts[1] = parts[1].replace(/'/g, '')
+                } 
+              }
+              if (polarity === true) {
+                if (typeof this.options.data[parts[0]] !== 'undefined' && this.options.data[parts[0]] === parts[1]) {
+                  // remove the <if> tags
+                  removeAll = false
+                }
+                else if (parts[0] === parts[1]) {
+                  removeAll = false
+                }
+              } 
+              else if (polarity === false) {
+                if (typeof this.options.data[parts[0]] !== 'undefined' && this.options.data[parts[0]] !== parts[1]) {
+                  // remove the <if> tags
+                  removeAll = false
+                }
+              }                                                
+            }
+            if (removeAll === true) {
+              // remove the whole markup                
+              template = template.replace(m[0], '')
+            }
+            else {
+              // remove the <if> tags
+              let newMarkup = m[0]
+              newMarkup = newMarkup.replace('</if>', '').replace(/<\s*if[^>]*>/g, '')
+              template = template.replace(m[0], newMarkup) 
+            }
+          }
+        }
+      })
+      let tagMatches = [...template.matchAll(/(\sdata-event=["|']\w.+)["|']/g)]
+      tagMatches.forEach(m => {
+        if (m[0] && m.index > -1) {
+          template = template.replace(m[0], `${m[0]}`)
+        }
+      })
+      for (let key in this.options.data) {
+        let rg = new RegExp(`{${key}}`, 'gm')
+        if (rg) {
+          template = template.replace(rg, this.options.data[key])
+        }                                    
+      } 
+      html = template     
+    }
+    return html
+  }
+  handleClick (event) {
+    // 
+  }
+  render () {
+    this.resize()
+  }
+  resize () {    
+    const html = this.buildHTML()
+    const el = document.getElementById(this.elementId)
+    el.innerHTML = html.replace(/\n/g, '')
+    if (this.options.readyCallbackFn) {
+      this.options.readyCallbackFn()
+    }
+  }
+}
+
 class WebsyPubSub {
   constructor (elementId, options) {
     this.options = Object.assign({}, options)
@@ -1888,7 +2080,7 @@ class APIService {
     if (id) {
       query.push(`id:${id}`)
     }    
-    return `${this.baseUrl}/${entity}${query.length > 0 ? `?where=${query.join(';')}` : ''}`
+    return `${this.baseUrl}/${entity}${query.length > 0 ? `${entity.indexOf('?') === -1 ? '?' : '&'}where=${query.join(';')}` : ''}`
   }
   delete (entity, id) {
     const url = this.buildUrl(entity, id)
@@ -2557,6 +2749,7 @@ this.plotArea = this.svg.append('g')
 this.areaLayer = this.svg.append('g')
 this.lineLayer = this.svg.append('g')
 this.barLayer = this.svg.append('g')
+this.labelLayer = this.svg.append('g')
 this.symbolLayer = this.svg.append('g')
 this.trackingLineLayer = this.svg.append('g')
 this.trackingLineLayer.append('line').attr('class', 'tracking-line')
@@ -2732,6 +2925,8 @@ else {
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.barLayer
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+    this.labelLayer
+      .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.symbolLayer
       .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
     this.trackingLineLayer
@@ -2924,6 +3119,7 @@ else {
         series.color = this.options.colors[index % this.options.colors.length]
       }
       this[`render${series.type || 'bar'}`](series, index)
+      this.renderLabels(series, index)
     })
   }  
 }
@@ -3050,6 +3246,76 @@ bars
     return `bar bar_${series.key}`
   })
 
+  }
+  renderLabels (series, index) {
+    /* global series index d3 */
+let xAxis = 'bottomAxis'
+let yAxis = 'leftAxis'  
+let that = this
+if (this.options.orientation === 'horizontal') {
+  xAxis = 'leftAxis'
+  yAxis = 'bottomAxis'
+}
+if (this.options.showLabels) {
+  // 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'  
+  let labels = this.labelLayer.selectAll(`.label_${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_${series.key}`)
+    .style('font-size', `${this.options.labelSize || this.options.fontSize}px`)
+    .transition(this.transition)
+    .text(d => d.y.label || d.y.value)
+  
+  labels
+    .enter()
+    .append('text')
+    .attr('class', `.label_${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', `${this.options.labelSize || this.options.fontSize}px`)
+    .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()) {
+          this.setAttribute('text-anchor', 'end')
+          this.setAttribute('x', +(this.getAttribute('x')) - 8)
+        }    
+      }
+      else {
+        if (that.plotheight - getLabelX.call(that, d) < (that.options.labelSize || that.options.fontSize)) {          
+          this.setAttribute('y', +(this.getAttribute('y')) + 8)
+        }
+      }
+    })
+}
+
+function getLabelX (d) {
+  if (this.options.orientation === 'horizontal') {
+    return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) + 4
+  }
+  else {
+    return this[xAxis](this.parseX(d.x.value)) + (this[xAxis].bandwidth() / 2)
+  }
+}
+function getLabelY (d) {
+  if (this.options.orientation === 'horizontal') {
+    return this[xAxis](this.parseX(d.x.value)) + (this[xAxis].bandwidth() / 2)
+  }
+  else {
+    return this[yAxis](isNaN(d.y.value) ? 0 : d.y.value) - 4
+  }
+}
+
   }
   renderline (series, index) {
     /* global series index d3 */
@@ -3135,7 +3401,7 @@ symbols
   .transition(this.transition)
   .attr('fill', 'white')
   .attr('stroke', series.color)
-  .attr('transform', d => { return `translate(${this[xAxis](this.parseX(d.x.value))}, ${this[yAxis](d.y.value)})` })   
+  .attr('transform', d => { return `translate(${this[xAxis](this.parseX(d.x.value))}, ${this[yAxis](isNaN(d.y.value) ? 0 : d.y.value)})` })   
 // Enter
 symbols.enter()
   .append('path')
@@ -3145,7 +3411,7 @@ symbols.enter()
   .attr('stroke', series.color)
   .attr('class', d => { return `symbol symbol_${series.key}` })
   .attr('transform', d => {
-    return `translate(${this[xAxis](this.parseX(d.x.value))}, ${this[yAxis](d.y.value)})` 
+    return `translate(${this[xAxis](this.parseX(d.x.value))}, ${this[yAxis](isNaN(d.y.value) ? 0 : d.y.value)})` 
   })
 
   }
@@ -3159,8 +3425,10 @@ if (el) {
     .attr('width', this.width)
     .attr('height', this.height)
     // Define the plot height  
+  // this.plotWidth = this.width - this.options.margin.left - this.options.margin.right - this.options.margin.axisLeft - this.options.margin.axisRight
+  // this.plotHeight = this.height - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom
   this.plotWidth = this.width - this.options.margin.left - this.options.margin.right - this.options.margin.axisLeft - this.options.margin.axisRight
-  this.plotHeight = this.height - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom
+  this.plotHeight = this.height - this.options.margin.top - this.options.margin.bottom - this.options.margin.axisBottom - this.options.margin.axisTop
   // establish the space needed for the various axes
   this.longestRight = 5
   this.longestBottom = 5
@@ -3190,24 +3458,54 @@ if (el) {
     }
   }
   // Translate the layers
+  // this.leftAxisLayer
+  //   .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+  // this.rightAxisLayer
+  //   .attr('transform', `translate(${this.options.margin.left + this.plotWidth + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+  // this.bottomAxisLayer
+  //   .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.plotHeight})`)
+  // this.plotArea
+  //   .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+  // this.areaLayer
+  //   .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+  // this.lineLayer
+  //   .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+  // this.barLayer
+  //   .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+  // this.labelLayer
+  //   .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+  // this.symbolLayer
+  //   .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+  // this.trackingLineLayer
+  //   .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
   this.leftAxisLayer
-    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
   this.rightAxisLayer
-    .attr('transform', `translate(${this.options.margin.left + this.plotWidth + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+    .attr('transform', `translate(${this.options.margin.left + this.plotWidth + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
   this.bottomAxisLayer
-    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.plotHeight})`)
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
+  this.leftAxisLabel
+    .attr('transform', `translate(${this.options.margin.left}, ${this.options.margin.top + this.options.margin.axisTop})`)
+  this.rightAxisLabel
+    .attr('transform', `translate(${this.options.margin.left + this.plotWidth + this.options.margin.axisLeft + this.options.margin.axisRight}, ${this.options.margin.top + this.options.margin.axisTop})`)
+  this.bottomAxisLabel
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop + this.plotHeight})`)
   this.plotArea
-    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
   this.areaLayer
-    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
   this.lineLayer
-    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
   this.barLayer
-    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
+  this.labelLayer
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
   this.symbolLayer
-    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)
   this.trackingLineLayer
-    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top})`)
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)         
+  this.eventLayer
+    .attr('transform', `translate(${this.options.margin.left + this.options.margin.axisLeft}, ${this.options.margin.top + this.options.margin.axisTop})`)         
 }
 
   }
@@ -3493,6 +3791,29 @@ class WebsyChartTooltip {
   }
 }
 
+const WebsyUtils = {
+  createIdentity: (size = 6) => {	
+    let text = ''
+    let possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
+  
+    for (let i = 0; i < size; i++) {
+      text += possible.charAt(Math.floor(Math.random() * possible.length))
+    }
+    return text
+  },
+  getElementPos: el => {
+    const rect = el.getBoundingClientRect()
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop
+    return { 
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft,
+      bottom: rect.top + scrollTop + el.clientHeight,
+      right: rect.left + scrollLeft + el.clientWidth
+    }
+  }
+}
+
 
 const WebsyDesigns = {
   WebsyPopupDialog,
@@ -3502,6 +3823,7 @@ const WebsyDesigns = {
   WebsyDatePicker,
   WebsyDropdown,
   WebsyResultList,
+  WebsyTemplate,
   WebsyPubSub,
   WebsyRouter,
   WebsyTable,
@@ -3511,7 +3833,8 @@ const WebsyDesigns = {
   WebsyKPI,
   WebsyPDFButton,
   PDFButton: WebsyPDFButton,
-  APIService
+  APIService,
+  WebsyUtils
 }
 
 const GlobalPubSub = new WebsyPubSub('empty', {})