@websy/websy-designs 0.0.118 → 0.0.122

package/dist/server/websy-designs-server.js

@@ -8,6 +8,20 @@ const expressSession = require('express-session')
 
 module.exports = function (options) {
   return new Promise((resolve, reject) => {
+    const unless = function (middleware) {
+      let excludedPaths = ['health']
+      if (process.env.EXCLUDED_SESSION_PATHS) {
+        excludedPaths = excludedPaths.concat(process.env.EXCLUDED_SESSION_PATHS.split(','))
+      }
+      return function (req, res, next) {
+        if (excludedPaths.indexOf(req.path) !== -1) {
+          return next()
+        }
+        else {
+          return middleware(req, res, next)
+        }
+      }
+    }
     const app = express()
     app.set('trust proxy', 1)
     process.env.wdRoot = __dirname
@@ -33,6 +47,9 @@ module.exports = function (options) {
       next()
     }    
     app.use(allowCrossDomain)
+    app.get('/health', (req, res) => {
+      res.json('OK')
+    })
     app.get('/environment', (req, res) => {
       const env = {}
       for (let key in process.env) {
@@ -83,26 +100,14 @@ module.exports = function (options) {
             })            
           }          
         }
-        app.use(expressSession({
+        app.use(unless(expressSession({
           secret: process.env.SESSION_SECRET,
           resave: false,
           saveUninitialized: true,
           cookie: cookieConfig,
           name: process.env.COOKIE_NAME,
           store: store
-        }))         
-        // app.use(sessionHelper.checkSession(dbHelper))
-        // app.use(function (req, res, next) {
-        //   console.log('WD MIDDLEWARE')
-        //   console.log(req.session)
-        //   let cookies = {}
-        //   if (typeof req.headers.cookie === 'string') {
-        //     cookies = cookie.parse(req.headers.cookie)
-        //   }
-        //   console.log('cookies')
-        //   console.log(cookies)
-        //   next()
-        // })                 
+        })))                                 
         if (options.uses && Array.isArray(options.uses)) {
           try {
             options.uses.forEach(u => app.use(u)) 

package/dist/websy-designs.debug.js

@@ -158,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')		
@@ -198,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(' ')}
@@ -237,15 +243,17 @@ class WebsyNavigationMenu {
       // update the block to the current item		
       let selected = '' // items[i].default === true ? 'selected' : ''
       let active = items[i].default === true ? 'active' : ''
-      let currentBlock = this.normaliseString(items[i].text)		
+      let currentBlock = this.normaliseString(items[i].text)	
+      let blockId = items[i].id || 	`${this.elementId}_${currentBlock}_label`
       html += `
 			<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}' 
+						 id='${blockId}' 
+						 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(' ')}
         >
       `
@@ -280,6 +288,9 @@ class WebsyNavigationMenu {
     }
     html += `</ul>`
     return html
+  }
+  toggleOpen () {
+
   }
   toggleMobileMenu (method) {
     if (typeof method === 'undefined') {
@@ -978,10 +989,10 @@ class WebsyDropdown {
     contentEl.classList.remove('on-top')
     const searchEl = document.getElementById(`${this.elementId}_search`)
     if (searchEl) {
-      if (this.options.onCancelSearch) {            
-        this.options.onCancelSearch('')        
-      }
-      searchEl.value = ''
+      if (searchEl.value.length > 0 && this.options.onCancelSearch) {            
+        this.options.onCancelSearch('')
+        searchEl.value = ''
+      }      
     }
   }
   handleClick (event) {
@@ -2362,19 +2373,60 @@ class WebsyTable {
       bodyHTML += data.map((r, rowIndex) => {
         return '<tr>' + r.map((c, i) => {
           if (this.options.columns[i].show !== false) {
+            let style = ''
+            if (c.style) {
+              style += c.style
+            }
+            if (this.options.columns[i].width) {
+              style += `width: ${this.options.columns[i].width}; `
+            }
+            if (c.backgroundColor) {
+              style += `background-color: ${c.backgroundColor}; `
+            }
+            if (c.color) {
+              style += `color: ${c.color}; `
+            }
             if (this.options.columns[i].showAsLink === true && c.value.trim() !== '') {
               return `
-                <td data-row-index='${this.rowCount + rowIndex}' data-col-index='${i}' class='${this.options.columns[i].classes || ''}' ${this.options.columns[i].width ? 'style="width: ' + this.options.columns[i].width + '"' : ''}><a href='${c.value}' target='${this.options.columns[i].openInNewTab === true ? '_blank' : '_self'}'>${this.options.columns[i].linkText || c.value}</a></td>
+                <td 
+                  data-row-index='${this.rowCount + rowIndex}' 
+                  data-col-index='${i}' 
+                  class='${this.options.columns[i].classes || ''}' 
+                  style='${style}'
+                  colspan='${c.colspan || 1}'
+                >
+                  <a href='${c.value}' target='${this.options.columns[i].openInNewTab === true ? '_blank' : '_self'}'>${this.options.columns[i].linkText || c.value}</a>
+                </td>
               `
             } 
             else if (this.options.columns[i].showAsNavigatorLink === true && c.value.trim() !== '') {
               return `
-                <td 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 || ''}' ${this.options.columns[i].width ? 'style="width: ' + this.options.columns[i].width + '"' : ''}>${this.options.columns[i].linkText || c.value}</td>
+                <td 
+                  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 || ''}' 
+                  style='${style}'
+                  colspan='${c.colspan || 1}'
+                >${this.options.columns[i].linkText || c.value}</td>
               `
             } 
-            else {              
+            else {  
+              let info = c.value
+              if (this.options.columns[i].showAsImage === true) {
+                c.value = `
+                  <img src='${c.value}'>
+                `
+              }            
               return `
-                <td data-info='${c.value}' data-row-index='${this.rowCount + rowIndex}' data-col-index='${i}' class='${this.options.columns[i].classes || ''}' ${this.options.columns[i].width ? 'style="width: ' + (this.options.columns[i].width || 'auto') + '"' : ''}>${c.value}</td>
+                <td 
+                  data-info='${info}' 
+                  data-row-index='${this.rowCount + rowIndex}' 
+                  data-col-index='${i}' 
+                  class='${this.options.columns[i].classes || ''}' 
+                  style='${style}'
+                  colspan='${c.colspan || 1}'
+                >${c.value}</td>
               `
             }
           }
@@ -2739,6 +2791,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')
@@ -2914,6 +2967,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
@@ -3106,6 +3161,7 @@ else {
         series.color = this.options.colors[index % this.options.colors.length]
       }
       this[`render${series.type || 'bar'}`](series, index)
+      this.renderLabels(series, index)
     })
   }  
 }
@@ -3232,6 +3288,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 */
@@ -3317,7 +3443,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')
@@ -3327,7 +3453,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)})` 
   })
 
   }
@@ -3341,8 +3467,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
@@ -3372,24 +3500,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})`)         
 }
 
   }