@websy/websy-designs 1.1.12 → 1.2.1

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

@@ -89,7 +89,7 @@ class APIService {
       }
       xhr.withCredentials = true      
       xhr.onload = () => {
-        if (xhr.status === 401 || xhr.status === 403) {
+        if (xhr.status === 401) { // || xhr.status === 403) {
           if (ENV && ENV.AUTH_REDIRECT) {
             window.location = ENV.AUTH_REDIRECT
           }
@@ -207,6 +207,7 @@ class WebsyDatePicker {
     this.shiftPressed = false
     const DEFAULTS = {
       defaultRange: 0,
+      allowClear: true,
       minAllowedDate: this.floorDate(new Date(new Date((new Date().setFullYear(new Date().getFullYear() - 1))).setDate(1))),
       maxAllowedDate: this.floorDate(new Date((new Date()))),
       minAllowedYear: 1970,
@@ -301,9 +302,16 @@ class WebsyDatePicker {
       let html = `
         <div class='websy-date-picker-container'>
           <span class='websy-dropdown-header-label'>${this.options.label || 'Date'}</span>
-          <div class='websy-date-picker-header'>
+          <div id="${this.elementId}_header" class='websy-date-picker-header ${this.options.allowClear === true ? 'allow-clear' : ''}'>
             <span id='${this.elementId}_selectedRange'>${this.options.ranges[this.options.mode][this.selectedRange].label}</span>
             <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>
+      `
+      if (this.options.allowClear === true) {
+        html += `
+          <svg class='clear-selection' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><title>ionicons-v5-l</title><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
+        `
+      }
+      html += `
           </div>
           <div id='${this.elementId}_mask' class='websy-date-picker-mask'></div>
           <div id='${this.elementId}_content' class='websy-date-picker-content'>
@@ -335,6 +343,10 @@ class WebsyDatePicker {
   close (confirm) {
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      el.style.zIndex = ''
+    }
     maskEl.classList.remove('active')
     contentEl.classList.remove('active')
     if (confirm === true) {
@@ -390,9 +402,12 @@ class WebsyDatePicker {
     else if (event.target.classList.contains('websy-dp-cancel')) {
       this.close()
     }
+    else if (event.target.classList.contains('clear-selection')) {
+      this.selectRange(0)
+      this.updateRange(0)
+    }
   }
-  handleKeyDown (event) {
-    console.log('key down', event)
+  handleKeyDown (event) {    
     if (event.key === 'Shift') {
       this.dragging = true
       this.shiftPressed = true
@@ -452,13 +467,14 @@ class WebsyDatePicker {
     if (this.selectedRange === 0) {
       return
     }
-    if (this.customRangeSelected === true) {      
+    if (this.customRangeSelected === true) {   
+      console.log('if date selection', this.currentselection)   
       let diff
       if (this.options.mode === 'date') {
         diff = Math.floor((this.selectedRangeDates[this.selectedRangeDates.length - 1].getTime() - this.selectedRangeDates[0].getTime()) / this.oneDay)
-        if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
-          diff += 1
-        }
+        // if (this.selectedRangeDates[0].getMonth() !== this.selectedRangeDates[this.selectedRangeDates.length - 1].getMonth()) {
+        //   diff += 1
+        // }
       }  
       else if (this.options.mode === 'year') {
         diff = this.selectedRangeDates[this.selectedRangeDates.length - 1] - this.selectedRangeDates[0]
@@ -499,7 +515,7 @@ class WebsyDatePicker {
         }
       }
     }
-    else {
+    else {      
       this.currentselection.forEach(d => {
         let dateEl
         if (this.options.mode === 'date') {
@@ -517,6 +533,10 @@ class WebsyDatePicker {
   open (options, override = false) {
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      el.style.zIndex = 999
+    }
     maskEl.classList.add('active')
     contentEl.classList.add('active')
     this.priorSelectedDates = [...this.selectedRangeDates]
@@ -735,6 +755,15 @@ class WebsyDatePicker {
       this.selectedRangeDates = [...this.options.ranges[this.options.mode][index].range]
       this.currentselection = [...this.options.ranges[this.options.mode][index].range]
       this.selectedRange = +index
+      const el = document.getElementById(`${this.elementId}_header`)
+      if (el) {
+        if (this.selectedRange === 0) {
+          el.classList.remove('range-selected')
+        }
+        else {
+          el.classList.add('range-selected')
+        }
+      }
       this.highlightRange()      
       this.close(true)
     }
@@ -926,6 +955,10 @@ class WebsyDropdown {
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
     const scrollEl = document.getElementById(`${this.elementId}_itemsContainer`)
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      el.style.zIndex = ''
+    }
     scrollEl.scrollTop = 0
     maskEl.classList.remove('active')
     contentEl.classList.remove('active')
@@ -1041,6 +1074,10 @@ class WebsyDropdown {
   open (options, override = false) {
     const maskEl = document.getElementById(`${this.elementId}_mask`)
     const contentEl = document.getElementById(`${this.elementId}_content`)
+    const el = document.getElementById(this.elementId)
+    if (el) {
+      el.style.zIndex = 999
+    }
     maskEl.classList.add('active')
     contentEl.classList.add('active')
     if (WebsyUtils.getElementPos(contentEl).bottom > window.innerHeight) {
@@ -1203,8 +1240,10 @@ class WebsyForm {
   constructor (elementId, options) {
     const defaults = {
       submit: { text: 'Save', classes: '' },
+      useRecaptcha: false,
       clearAfterSave: false,
       fields: [],
+      mode: 'add',
       onSuccess: function (data) {},
       onError: function (err) { console.log('Error submitting form data:', err) }
     }
@@ -1240,19 +1279,25 @@ class WebsyForm {
   checkRecaptcha () {
     return new Promise((resolve, reject) => {
       if (this.options.useRecaptcha === true) {
-        if (this.recaptchaValue) {        
-          this.apiService.add('/google/checkrecaptcha', JSON.stringify({grecaptcharesponse: this.recaptchaValue})).then(response => {
-            if (response.success && response.success === true) {
-              resolve(true)
-            }
-            else {
-              reject(false)              
-            }
+        // if (this.recaptchaValue) {                  
+        grecaptcha.ready(() => {
+          grecaptcha.execute(ENVIRONMENT.RECAPTCHA_KEY, { action: 'submit' }).then(token => {
+            this.apiService.add('google/checkrecaptcha', {grecaptcharesponse: token}).then(response => {
+              if (response.success && response.success === true) {
+                resolve(true)
+              }
+              else {
+                reject(false)              
+              }
+            })
+          }, err => {
+            reject(err)
           })
-        }
-        else {
-          reject(false)
-        }
+        })
+        // }
+        // else {
+        //   reject(false)
+        // }
       }
       else {
         resolve(true)
@@ -1333,7 +1378,7 @@ class WebsyForm {
     let componentsToProcess = []
     if (el) {      
       let html = `
-        <form id="${this.elementId}Form" class="${this.options.classes || ''}">
+        <form id="${this.elementId}Form" class="websy-form ${this.options.classes || ''}">
       `
       this.options.fields.forEach((f, i) => {
         if (f.component) {
@@ -1354,6 +1399,7 @@ class WebsyForm {
                 ${f.required === true ? 'required' : ''} 
                 placeholder="${f.placeholder || ''}"
                 name="${f.field}" 
+                ${(f.attributes || []).join(' ')}
                 class="websy-input websy-textarea"
               ></textarea>
             </div><!--
@@ -1368,6 +1414,7 @@ class WebsyForm {
                 ${f.required === true ? 'required' : ''} 
                 type="${f.type || 'text'}" 
                 class="websy-input" 
+                ${(f.attributes || []).join(' ')}
                 name="${f.field}" 
                 placeholder="${f.placeholder || ''}"
                 value="${f.value || ''}"
@@ -1398,7 +1445,7 @@ class WebsyForm {
       el.innerHTML = html
       this.processComponents(componentsToProcess, () => {
         if (this.options.useRecaptcha === true && typeof grecaptcha !== 'undefined') {
-          this.recaptchaReady()
+          // this.recaptchaReady()
         }
       })      
     }
@@ -1415,7 +1462,14 @@ class WebsyForm {
             data[key] = value
           })
           if (this.options.url) {
-            this.apiService.add(this.options.url, data).then(result => {
+            let params = [
+              this.options.url
+            ]
+            if (this.options.mode === 'update') {
+              params.push(this.options.id)
+            }
+            params.push(data)
+            this.apiService[this.options.mode](...params).then(result => {
               if (this.options.clearAfterSave === true) {
                 // this.render()
                 formEl.reset()
@@ -1624,7 +1678,7 @@ class WebsyNavigationMenu {
         items[i].classes = items[i].classes.join(' ')
       }
       html += `
-			<li class='websy-${this.options.orientation}-list-item'>
+			<li class='websy-${this.options.orientation}-list-item ${items[i].alwaysOpen === true ? 'always-open' : ''}'>
 				<div class='websy-menu-header ${items[i].classes || ''} ${selected} ${active}' 
 						 id='${blockId}' 
 						 data-id='${currentBlock}'
@@ -1943,7 +1997,9 @@ class WebsyPDFButton {
 class WebsyPopupDialog {
   constructor (elementId, options) {
     this.DEFAULTS = {
-      buttons: []
+      buttons: [],
+      classes: [],
+      style: ''
     }
     this.options = Object.assign({}, this.DEFAULTS, options)
     if (!elementId) {
@@ -1995,7 +2051,7 @@ class WebsyPopupDialog {
     }
     html += `
 			<div class='websy-popup-dialog-container'>
-				<div class='websy-popup-dialog'>
+				<div class='websy-popup-dialog ${this.options.classes.join(' ')}' style='${this.options.style}'>
 		`
     if (this.options.title) {
       html += `<h1>${this.options.title}</h1>`
@@ -2310,8 +2366,7 @@ class WebsyRouter {
   addGroup (group) {
     if (!this.groups[group]) {
       const els = document.querySelectorAll(`.websy-view[data-group="${group}"]`)
-      if (els) {
-        console.log('els', els)
+      if (els) {        
         this.getClosestParent(els[0], parent => {
           this.groups[group] = {
             activeView: '',
@@ -2716,8 +2771,10 @@ class WebsyRouter {
       if (popped === false) {
         let historyUrl = inputPath
         if (this.options.urlPrefix) {
-          historyUrl = `/${this.options.urlPrefix}/${historyUrl}`
-          inputPath = `/${this.options.urlPrefix}/${inputPath}`
+          historyUrl = historyUrl === '/' ? '' : `/${historyUrl}`
+          inputPath = inputPath === '/' ? '' : `/${inputPath}`
+          historyUrl = (`/${this.options.urlPrefix}${historyUrl}`).replace(/\/\//g, '/')
+          inputPath = (`/${this.options.urlPrefix}${inputPath}`).replace(/\/\//g, '/')
         }
         if (this.currentParams && this.currentParams.path) {
           historyUrl += `?${this.currentParams.path}`
@@ -3055,6 +3112,21 @@ const WebsyUtils = {
     }
     return (red * 0.299 + green * 0.587 + blue * 0.114) > 186 ? darkColor : lightColor
   },
+  measureText (text, rotation = 0, fontSize = '12px') {
+    if (!isNaN(fontSize)) {
+      fontSize = `${fontSize}px`
+    }
+    let html = `<div style='display: inline-block; width: auto; font-size: ${fontSize}'>${text}</div>`
+    const el = document.createElement('div')
+    el.style.position = 'absolute'    
+    el.style.visibility = 'hidden'
+    el.style.transform = `rotate(${rotation}deg)`
+    el.innerHTML = html
+    document.body.appendChild(el)
+    let w = el.getBoundingClientRect()
+    el.remove()
+    return w
+  },
   parseUrlParams: () => {
     let queryString = window.location.search.replace('?', '')
     const params = {}
@@ -3295,7 +3367,7 @@ class WebsyTable {
                   data-view='${c.value}' 
                   data-row-index='${this.rowCount + rowIndex}' 
                   data-col-index='${i}' 
-                  class='trigger-item ${this.options.columns[i].clickable === true ? 'clickable' : ''} ${this.options.columns[i].classes || ''}' 
+                  class='websy-trigger trigger-item ${this.options.columns[i].clickable === true ? 'clickable' : ''} ${this.options.columns[i].classes || ''}' 
                   style='${style}'
                   colspan='${c.colspan || 1}'
                   rowspan='${c.rowspan || 1}'
@@ -3379,19 +3451,26 @@ class WebsyTable {
         event.target.classList.remove('active')
       })
     }
-    else if (event.target.classList.contains('clickable')) {
-      const colIndex = +event.target.getAttribute('data-col-index')
-      const rowIndex = +event.target.getAttribute('data-row-index')
-      if (this.options.onClick) {
-        this.options.onClick(event, this.data[rowIndex][colIndex], this.data[rowIndex], this.options.columns[colIndex])
-      }      
-    }
+    // else if (event.target.classList.contains('clickable')) {
+    //   const colIndex = +event.target.getAttribute('data-col-index')
+    //   const rowIndex = +event.target.getAttribute('data-row-index')
+    //   if (this.options.onClick) {
+    //     this.options.onClick(event, this.data[rowIndex][colIndex], this.data[rowIndex], this.options.columns[colIndex])
+    //   }      
+    // }
     else if (event.target.classList.contains('websy-page-num')) {
       const pageNum = +event.target.getAttribute('data-page')
       if (this.options.onSetPage) {
         this.options.onSetPage(pageNum)
       }
     }
+    else {
+      const colIndex = +event.target.getAttribute('data-col-index')
+      const rowIndex = +event.target.getAttribute('data-row-index')
+      if (this.options.onClick) {
+        this.options.onClick(event, { cell: this.data[rowIndex][colIndex], row: this.data[rowIndex], column: this.options.columns[colIndex], colIndex, rowIndex })
+      } 
+    }
   }
   handleMouseMove (event) {  
     if (this.tooltipTimeoutFn) {
@@ -3692,7 +3771,7 @@ class WebsyTable2 {
                   data-view='${c.value}' 
                   data-row-index='${this.rowCount + rowIndex}' 
                   data-col-index='${i}' 
-                  class='trigger-item ${this.options.columns[i].clickable === true ? 'clickable' : ''} ${this.options.columns[i].classes || ''}' 
+                  class='websy-trigger trigger-item ${this.options.columns[i].clickable === true ? 'clickable' : ''} ${this.options.columns[i].classes || ''}' 
                   style='${style}'
                   colspan='${c.colspan || 1}'
                   rowspan='${c.rowspan || 1}'
@@ -3800,6 +3879,18 @@ class WebsyTable2 {
         this.options.onSetPage(pageNum)
       }
     }
+    else if (event.target.classList.contains('websy-h-scroll-container')) {
+      console.log('scroll handle clicked', event)
+      let clickX = event.clientX
+      let elX = event.target.getBoundingClientRect().left
+      const handleEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      let startPoint = clickX - elX - (handleEl.clientWidth / 2)
+      startPoint = Math.max(0, Math.min(startPoint, event.target.clientWidth - handleEl.clientWidth))
+      handleEl.style.left = `${startPoint}px`
+      if (this.options.onScrollX) {
+        this.options.onScrollX(startPoint)
+      } 
+    }
   }
   handleMouseDown (event) {
     if (event.target.classList.contains('websy-scroll-handle')) {
@@ -3941,8 +4032,15 @@ class WebsyTable2 {
     // let colGroupHTML = this.options.columns.map(c => `<col style="${c.width ? 'width: ' + c.width : ''}"></col>`)
     let headHTML = '<tr>' + this.options.columns.map((c, i) => {
       if (c.show !== false) {
+        let style = ''
+        if (c.style) {
+          style += c.style
+        }
+        if (c.width) {
+          style += `width: ${c.width || 'auto'}; `
+        }
         return `
-        <th ${c.width ? 'style="width: ' + (c.width || 'auto') + ';"' : ''}>
+        <th style="${style}">
           <div class ="tableHeader">
             <div class="leftSection">
               <div
@@ -4059,7 +4157,7 @@ class WebsyTable2 {
     const bodyEl = document.getElementById(`${this.elementId}_body`)
     bodyEl.innerHTML = '<tr>' + values.map(c => `
       <td                 
-        style='height: ${this.options.cellSize}px; line-height: ${this.options.cellSize}px;'
+        style='height: ${this.options.cellSize}px; line-height: ${this.options.cellSize}px; padding: 10px 5px;'
       >${c.value || '&nbsp;'}</td>
     `).join('') + '</tr>'    
     // get height of the first data cell
@@ -4067,12 +4165,20 @@ class WebsyTable2 {
     const tableContainerEl = document.getElementById(`${this.elementId}_tableContainer`)
     const cellHeight = cells[0].offsetHeight || cells[0].clientHeight
     const cellWidths = []
+    let accWidth = 0
     let nonScrollableWidth = 0
     for (let i = 0; i < cells.length; i++) {
       if (i < this.options.leftColumns) {
         nonScrollableWidth += values[i].width || cells[i].offsetWidth || cells[i].clientWidth
       }
       cellWidths.push(values[i].width || cells[i].offsetWidth || cells[i].clientWidth)      
+      accWidth += values[i].width || cells[i].offsetWidth || cells[i].clientWidth
+    }
+    // if the table doesn't fill the available space we adjust the space so that the columns grow
+    if (accWidth < (tableContainerEl.offsetWidth || tableContainerEl.clientWidth) - nonScrollableWidth) {
+      for (let i = this.options.leftColumns; i < cellWidths.length; i++) {
+        cellWidths[i] = ((tableContainerEl.offsetWidth || tableContainerEl.clientWidth) - nonScrollableWidth) / (cellWidths.length - this.options.leftColumns)
+      }
     }
     // const cellWidth = firstDataCell.offsetWidth || firstDataCell.clientWidth        
     // tableEl.style.width = ''
@@ -4109,6 +4215,7 @@ class WebsyChart {
         legendRight: 0, 
         legendTop: 0 
       },
+      axis: {},
       orientation: 'vertical',
       colors: ['#5e4fa2', '#3288bd', '#66c2a5', '#abdda4', '#e6f598', '#fee08b', '#fdae61', '#f46d43', '#d53e4f', '#9e0142'],
       transitionDuration: 650,
@@ -4433,7 +4540,7 @@ this.render()
 
   }
   render (options) {
-    /* global d3 options */ 
+    /* global d3 options WebsyUtils */ 
 if (typeof options !== 'undefined') {
   this.options = Object.assign({}, this.options, options)
 }
@@ -4532,9 +4639,9 @@ else {
       this.options.data.bottom.min = this.options.data.bottom.data[0].value
     }
     if (this.options.data.bottom && typeof this.options.data.bottom.max !== 'undefined') {
-      this.longestBottom = this.options.data.bottom.max.toString().length
+      this.longestBottom = this.options.data.bottom.max.toString()
       if (this.options.data.bottom.formatter) {
-        this.longestBottom = this.options.data.bottom.formatter(this.options.data.bottom.max).toString().length
+        this.longestBottom = this.options.data.bottom.formatter(this.options.data.bottom.max).toString()
       } 
     }
     if (this.options.data.left && this.options.data.left.data && this.options.data.left.max === 'undefined') {
@@ -4548,9 +4655,9 @@ else {
       this.options.data.left.min = this.options.data.left.data.reduce((a, b) => a.length < b.value.length ? a : b.value, this.options.data.left.max)
     }
     if (this.options.data.left && typeof this.options.data.left.max !== 'undefined') {
-      this.longestLeft = this.options.data.left.max.toString().length
+      this.longestLeft = this.options.data.left.max.toString()
       if (this.options.data.left.formatter) {
-        this.longestLeft = this.options.data.left.formatter(this.options.data.left.max).toString().length
+        this.longestLeft = this.options.data.left.formatter(this.options.data.left.max).toString()
       } 
     } 
     if (this.options.data.right && this.options.data.right.data && this.options.data.right.max === 'undefined') {
@@ -4558,15 +4665,21 @@ else {
       this.options.data.right.max = d3.max(this.options.data.right.data)
     }   
     if (this.options.data.right && typeof this.options.data.right.max !== 'undefined') {
-      this.longestRight = this.options.data.right.max.toString().length
+      this.longestRight = this.options.data.right.max.toString()
       if (this.options.data.right.formatter) {
-        this.longestRight = this.options.data.right.formatter(this.options.data.right.max).toString().length
+        this.longestRight = this.options.data.right.formatter(this.options.data.right.max).toString()
       }
     }    
     // establish the space needed for the various axes    
-    this.options.margin.axisLeft = this.longestLeft * ((this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize) * 0.7
-    this.options.margin.axisRight = this.longestRight * ((this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize) * 0.7
-    this.options.margin.axisBottom = ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize) + 10
+    // this.options.margin.axisLeft = this.longestLeft * ((this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize) * 0.7
+    // this.options.margin.axisRight = this.longestRight * ((this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize) * 0.7
+    // this.options.margin.axisBottom = ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize) + 10
+    let longestLeftBounds = WebsyUtils.measureText(this.longestLeft, 0, ((this.options.data.left && this.options.data.left.fontSize) || this.options.fontSize))
+    let longestRightBounds = WebsyUtils.measureText(this.longestRight, 0, ((this.options.data.right && this.options.data.right.fontSize) || this.options.fontSize))
+    let longestBottomBounds = WebsyUtils.measureText(this.longestBottom, ((this.options.data.bottom && this.options.data.bottom.rotate) || 0), ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize))
+    this.options.margin.axisLeft = longestLeftBounds.width
+    this.options.margin.axisRight = longestRightBounds.width
+    this.options.margin.axisBottom = longestBottomBounds.height + 10
     this.options.margin.axisTop = 0       
     // adjust axis margins based on title options
     if (this.options.data.left && this.options.data.left.showTitle === true) {
@@ -4585,11 +4698,20 @@ else {
         this.options.margin.axisTop += (this.options.data.right.titleFontSize || 10) + 10
       }
     }
-    if (this.options.data.bottom.rotate) {
-      // this.options.margin.bottom = this.longestBottom * ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize)   
-      this.options.margin.axisBottom = this.longestBottom * ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize) * 0.4
-      // this.options.margin.bottom = this.options.margin.bottom * (1 + this.options.data.bottom.rotate / 100)
-    }  
+    if (((this.options.data.bottom && this.options.data.bottom.rotate) || 0) === 0 && this.options.axis.hideBottom !== true) {
+      this.options.margin.axisLeft = Math.max(this.options.margin.axisLeft, longestBottomBounds.width / 2)
+    }
+    else if (((this.options.data.bottom && this.options.data.bottom.rotate) || 0) < 0 && this.options.axis.hideBottom !== true) {
+      this.options.margin.axisLeft = Math.max(this.options.margin.axisLeft, longestBottomBounds.width)
+    }
+    else if (((this.options.data.bottom && this.options.data.bottom.rotate) || 0) > 0 && this.options.axis.hideBottom !== true) {
+      this.options.margin.axisRight = Math.max(this.options.margin.axisRight, longestBottomBounds.width)
+    }        
+    // if (this.options.data.bottom.rotate) {
+    //   // this.options.margin.bottom = this.longestBottom * ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize)   
+    //   this.options.margin.axisBottom = this.longestBottom * ((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize) * 0.4
+    //   // this.options.margin.bottom = this.options.margin.bottom * (1 + this.options.data.bottom.rotate / 100)
+    // }  
     // hide the margin if necessary
     if (this.options.axis) {
       if (this.options.axis.hideAll === true) {
@@ -4724,17 +4846,18 @@ else {
       let bAxisFunc = d3.axisBottom(this.bottomAxis)
         // .ticks(this.options.data.bottom.ticks || Math.min(this.options.data.bottom.data.length, 5))
         .ticks(tickDefinition)
-      console.log('tickDefinition', tickDefinition)
-      console.log(bAxisFunc)
+      // console.log('tickDefinition', tickDefinition)
+      // console.log(bAxisFunc)
       if (this.options.data.bottom.formatter) {
         bAxisFunc.tickFormat(d => this.options.data.bottom.formatter(d))        
       }
       this.bottomAxisLayer.call(bAxisFunc)
-      console.log(this.bottomAxisLayer.ticks)
+      // console.log(this.bottomAxisLayer.ticks)
       if (this.options.data.bottom.rotate) {
         this.bottomAxisLayer.selectAll('text')
-          .attr('transform', `rotate(${this.options.data.bottom.rotate})`)
-          .style('text-anchor', 'end')
+          .attr('transform', `rotate(${((this.options.data.bottom && this.options.data.bottom.rotate) || 0)})`)
+          .style('text-anchor', `${((this.options.data.bottom && this.options.data.bottom.rotate) || 0) === 0 ? 'middle' : 'end'}`)
+          .style('transform-origin', ((this.options.data.bottom && this.options.data.bottom.rotate) || 0) === 0 ? '0 0' : `0 ${((this.options.data.bottom && this.options.data.bottom.fontSize) || this.options.fontSize)}px`)
       } 
     }  
     // Configure the left axis