@websy/websy-designs 1.7.19 → 1.8.0

package/dist/websy-designs.js

@@ -39,6 +39,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
   WebsyIcons
   WebsyChart
   WebsyChartTooltip
+  WebsyPie
   WebsyLegend
   WebsyMap
   WebsyKPI
@@ -2454,8 +2455,8 @@ var WebsyDragDrop = /*#__PURE__*/function () {
         el.innerHTML = html;
         this.options.items.forEach(function (item, i) {
           if (item.component) {
-            if (item.isQlikPlugin && WebsyDesigns.QlikPlugin[item.component]) {
-              item.instance = new WebsyDesigns.QlikPlugin[item.component]("".concat(item.id, "_component"), item.options);
+            if (item.isQlikPlugin && WebsyDesigns.QlikPlugins[item.component]) {
+              item.instance = new WebsyDesigns.QlikPlugins[item.component]("".concat(item.id, "_component"), item.options);
             } else if (WebsyDesigns[item.component]) {
               item.instance = new WebsyDesigns[item.component]("".concat(item.id, "_component"), item.options);
             } else {
@@ -5638,13 +5639,25 @@ var Switch = /*#__PURE__*/function () {
     key: "disable",
     value: function disable() {
       this.options.enabled = false;
-      this.render();
+      var method = this.options.enabled === true ? 'add' : 'remove';
+      var el = document.getElementById("".concat(this.elementId, "_switch"));
+      el.classList[method]('enabled');
+
+      if (this.options.onToggle) {
+        this.options.onToggle(this.options.enabled);
+      }
     }
   }, {
     key: "enable",
     value: function enable() {
       this.options.enabled = true;
-      this.render();
+      var method = this.options.enabled === true ? 'add' : 'remove';
+      var el = document.getElementById("".concat(this.elementId, "_switch"));
+      el.classList[method]('enabled');
+
+      if (this.options.onToggle) {
+        this.options.onToggle(this.options.enabled);
+      }
     }
   }, {
     key: "handleClick",
@@ -7118,7 +7131,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
     var el = document.getElementById(this.elementId);
 
     if (el) {
-      var html = "\n        <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table-3 ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', "'>\n          <!--<div class=\"download-button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n          </div>-->\n          <div id=\"").concat(this.elementId, "_tableInner\" class=\"websy-table-inner-container\">\n            <table id=\"").concat(this.elementId, "_tableHeader\" class=\"websy-table-header\"></table>\n            <table id=\"").concat(this.elementId, "_tableBody\" class=\"websy-table-body\"></table>\n            <table id=\"").concat(this.elementId, "_tableFooter\" class=\"websy-table-footer\"></table>\n            <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\">\n              <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n            </div>\n            <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\">\n              <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n            </div>\n      ");
+      var html = "\n        <div id='".concat(this.elementId, "_tableContainer' class='websy-vis-table-3 ").concat(this.options.paging === 'pages' ? 'with-paging' : '', " ").concat(this.options.virtualScroll === true ? 'with-virtual-scroll' : '', " ").concat(this.isTouchDevice === true && this.options.virtualScroll === true ? 'touch-device' : '', "'>\n          <!--<div class=\"download-button\">\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M16 11h5l-9 10-9-10h5v-11h8v11zm1 11h-10v2h10v-2z\"/></svg>\n          </div>-->\n          <div id=\"").concat(this.elementId, "_tableInner\" class=\"websy-table-inner-container\">\n            <table id=\"").concat(this.elementId, "_tableHeader\" class=\"websy-table-header\"></table>\n            <table id=\"").concat(this.elementId, "_tableBody\" class=\"websy-table-body\"></table>\n            <table id=\"").concat(this.elementId, "_tableFooter\" class=\"websy-table-footer\"></table>\n            <div id=\"").concat(this.elementId, "_vScrollContainer\" class=\"websy-v-scroll-container\">\n              <div id=\"").concat(this.elementId, "_vScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-y\"></div>\n            </div>\n            <div id=\"").concat(this.elementId, "_hScrollContainer\" class=\"websy-h-scroll-container\">\n              <div id=\"").concat(this.elementId, "_hScrollHandle\" class=\"websy-scroll-handle websy-scroll-handle-x\"></div>\n            </div>\n      ");
 
       if (this.isTouchDevice === true && this.options.virtualScroll === true) {
         html += "\n            <div id=\"".concat(this.elementId, "_touchScroller\" class=\"websy-table-touch-scroller\"></div>\n        ");
@@ -7542,9 +7555,9 @@ var WebsyTable3 = /*#__PURE__*/function () {
       }
 
       this.sizes.rowsToRender = Math.ceil(this.sizes.bodyHeight / this.sizes.cellHeight);
-      this.sizes.rowsToRenderPrecise = this.sizes.bodyHeight / this.sizes.cellHeight;
-      this.startRow = 0;
-      this.endRow = this.sizes.rowsToRender;
+      this.sizes.rowsToRenderPrecise = this.sizes.bodyHeight / this.sizes.cellHeight; // this.startRow = 0
+
+      this.endRow = this.startRow + this.sizes.rowsToRender;
       this.startCol = 0;
       this.endCol = this.options.columns[this.options.columns.length - 1].length;
 
@@ -7646,7 +7659,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
   }, {
     key: "handleMouseDown",
     value: function handleMouseDown(event) {
-      if (this.isTouchDevice === true) {
+      if (this.isTouchDevice) {
         return;
       }
 
@@ -7659,6 +7672,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
         this.mouseYStart = event.pageY; // console.log('mouse down', this.handleYStart, this.mouseYStart)
         // console.log(scrollHandleEl.offsetTop)
       } else if (event.target.classList.contains('websy-scroll-handle-x')) {
+        if (this.isTouchDevice) {
+          event.preventDefault();
+        }
+
         this.scrollDragging = true;
         this.scrollDirection = 'x';
 
@@ -7673,6 +7690,10 @@ var WebsyTable3 = /*#__PURE__*/function () {
     value: function handleMouseMove(event) {
       // event.preventDefault()
       if (this.scrollDragging === true) {
+        if (this.isTouchDevice) {
+          event.preventDefault();
+        }
+
         if (this.scrollDirection === 'y') {
           var diff = event.pageY - this.mouseYStart;
           this.scrollY(diff);
@@ -7744,12 +7765,19 @@ var WebsyTable3 = /*#__PURE__*/function () {
     key: "handleTouchEnd",
     value: function handleTouchEnd(event) {
       // console.log('touch end fired')
-      if (typeof event.targetTouches !== 'undefined') {
-        this.isTouchScrolling = false;
-        this.touchEndTime = new Date().getTime();
-        this.isPerpetual = true; // this.perpetualScroll()	
+      this.scrollDragging = false;
+      this.cellDragging = false;
+      this.handleYStart = null;
+      this.mouseYStart = null;
+      this.handleXStart = null;
+      this.mouseXStart = null;
 
-        this.touchStartTime = null; // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
+      if (typeof event.targetTouches !== 'undefined') {
+        this.isTouchScrolling = false; // this.touchEndTime = (new Date()).getTime()
+        // this.isPerpetual = true
+        // this.perpetualScroll()	
+        // this.touchStartTime = null
+        // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
         // touchScrollEl.classList.add('hidden')
       }
     }
@@ -7762,46 +7790,70 @@ var WebsyTable3 = /*#__PURE__*/function () {
         event.stopPropagation();
 
         if (typeof event.targetTouches !== 'undefined' && event.targetTouches.length > 0) {
-          var deltaX = this.mouseXStart - event.targetTouches[0].pageX;
-          var deltaY = this.mouseYStart - event.targetTouches[0].pageY;
-          var hScrollContainerEl = document.getElementById("".concat(this.elementId, "_hScrollContainer"));
-          var vScrollContainerEl = document.getElementById("".concat(this.elementId, "_vScrollContainer"));
-          var hScrollHandleEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
-          var vScrollHandleEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
-          var translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width);
-          var translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height); // need to adjust the delta so that it scrolls at a reasonable speed/distance
-
-          var scrollHandleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
-          var scrollHandleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle")); // if (Math.abs(deltaY) > this.sizes.cellHeight) {
-          //   this.isTouchScrolling = true			
-          // }
-          // else {
-          //   this.isTouchScrolling = false
-          // }
-          // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
-          // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
-          // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
-          // console.log('delta', deltaY)
-          // NW      
-          // else if (Math.abs(deltaX) > 50) {
-          //   this.isTouchScrolling = false			
-          // }
+          event.deltaX = this.touchXStart - event.targetTouches[0].pageX;
+          event.deltaY = this.touchYStart - event.targetTouches[0].pageY;
+
+          if (Math.abs(event.deltaY) > 50) {
+            event.deltaX = 0;
+            this.handleScrollWheel(event);
+          } else if (Math.abs(event.deltaX) > 50) {
+            event.deltaY = 0;
+            this.handleScrollWheel(event);
+          } // let deltaX = (this.mouseXStart - event.targetTouches[0].pageX)
+          // let deltaY = (this.mouseYStart - event.targetTouches[0].pageY)
+          // const hScrollContainerEl = document.getElementById(`${this.elementId}_hScrollContainer`)
+          // const vScrollContainerEl = document.getElementById(`${this.elementId}_vScrollContainer`)
+          // const hScrollHandleEl = document.getElementById(`${this.elementId}_hScrollHandle`)    
+          // const vScrollHandleEl = document.getElementById(`${this.elementId}_vScrollHandle`)    
+          // let translatedDeltaX = deltaX * (hScrollHandleEl.getBoundingClientRect().width / vScrollContainerEl.getBoundingClientRect().width)
+          // let translatedDeltaY = deltaY * (vScrollHandleEl.getBoundingClientRect().height / vScrollContainerEl.getBoundingClientRect().height)
+          // // need to adjust the delta so that it scrolls at a reasonable speed/distance
+          // const scrollHandleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+          // const scrollHandleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+          // // if (Math.abs(deltaY) > this.sizes.cellHeight) {
+          // //   this.isTouchScrolling = true			
+          // // }
+          // // else {
+          // //   this.isTouchScrolling = false
+          // // }
+          // // console.log('delta', this.mouseYStart, event.targetTouches[0].pageY, deltaY)
+          // // deltaX = deltaX * (scrollHandleXEl.offsetWidth / this.sizes.scrollableWidth)
+          // // deltaY = deltaY * (scrollHandleYEl.offsetHeight / this.sizes.bodyHeight)
+          // // console.log('delta', deltaY)
+          // // NW      
+          // // else if (Math.abs(deltaX) > 50) {
+          // //   this.isTouchScrolling = false			
+          // // }
+          // this.currentClientY = event.targetTouches[0].pageY			
+          // this.currentTouchtime = (new Date()).getTime()
+          // // end
+          // // delta = Math.min(10, delta)
+          // // delta = Math.max(-10, delta)		
+          // if (this.isTouchScrolling === true) {			
+          //   // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))          		
+          //   if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
+          //     // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
+          //     this.scrollX(translatedDeltaX)
+          //   }
+          //   else if (deltaY > 20) {
+          //     // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
+          //     this.scrollY(translatedDeltaY)
+          //   }
+          // }		
 
-          this.currentClientY = event.targetTouches[0].pageY;
-          this.currentTouchtime = new Date().getTime(); // end
-          // delta = Math.min(10, delta)
-          // delta = Math.max(-10, delta)		
-
-          if (this.isTouchScrolling === true) {
-            // this.$scope.scrollTop += (delta / (this.$scope.layout.qHyperCube.qSize.qcy / this.$scope.rowsToLoad / (this.$scope.totalSpaceAvailable / 250)))          		
-            if (Math.abs(deltaX) > Math.abs(deltaY) && deltaX > 20) {
-              // this.scrollX(Math.max(-5, Math.min(5, translatedDeltaX)))
-              this.scrollX(translatedDeltaX);
-            } else if (deltaY > 20) {
-              // this.scrollY(Math.max(-5, Math.min(5, translatedDeltaY)))
-              this.scrollY(translatedDeltaY);
-            }
-          }
+        }
+      }
+
+      if (this.scrollDragging === true) {
+        event.preventDefault();
+
+        if (this.scrollDirection === 'y') {
+          var diff = event.targetTouches[0].pageY - this.mouseYStart;
+          this.scrollY(diff);
+        } else if (this.scrollDirection === 'x') {
+          var _diff2 = event.targetTouches[0].pageX - this.mouseXStart;
+
+          this.scrollX(_diff2);
         }
       }
     }
@@ -7817,19 +7869,44 @@ var WebsyTable3 = /*#__PURE__*/function () {
       } // console.log(event.target.classList)
 
 
-      if (this.options.virtualScroll === true) {
-        this.touchStartTime = new Date().getTime();
-        this.isTouchScrolling = true;
-        this.isPerpetual = false;
-        this.mouseYStart = event.targetTouches[0].pageY;
-        this.mouseXStart = event.targetTouches[0].pageX; // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
-        // touchScrollEl.classList.remove('hidden')
+      if (event.target.classList.contains('websy-table-touch-scroller')) {
+        if (this.options.virtualScroll === true) {
+          //   this.touchStartTime = (new Date()).getTime()
+          this.isTouchScrolling = true; //   this.isPerpetual = false
 
-        var handleYEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
-        this.handleYStart = handleYEl.offsetTop;
-        var handleXEl = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
-        this.handleXStart = handleXEl.offsetLeft;
+          this.touchYStart = event.targetTouches[0].pageY;
+          this.touchXStart = event.targetTouches[0].pageX;
+        }
       }
+
+      if (event.target.classList.contains('websy-scroll-handle-y')) {
+        // set up the scroll start values
+        this.scrollDragging = true;
+        this.scrollDirection = 'y';
+        var scrollHandleEl = document.getElementById("".concat(this.elementId, "_vScrollHandle"));
+        this.handleYStart = scrollHandleEl.offsetTop;
+        this.mouseYStart = event.targetTouches[0].pageY; // console.log('mouse down', this.handleYStart, this.mouseYStart)
+        // console.log(scrollHandleEl.offsetTop)
+      } else if (event.target.classList.contains('websy-scroll-handle-x')) {
+        if (this.isTouchDevice) {
+          event.preventDefault();
+        }
+
+        this.scrollDragging = true;
+        this.scrollDirection = 'x';
+
+        var _scrollHandleEl3 = document.getElementById("".concat(this.elementId, "_hScrollHandle"));
+
+        this.handleXStart = _scrollHandleEl3.offsetLeft;
+        this.mouseXStart = event.targetTouches[0].pageX;
+      } //   // const touchScrollEl = document.getElementById(`${this.elementId}_touchScroller`)
+      //   // touchScrollEl.classList.remove('hidden')
+      //   const handleYEl = document.getElementById(`${this.elementId}_vScrollHandle`)
+      //   this.handleYStart = handleYEl.offsetTop
+      //   const handleXEl = document.getElementById(`${this.elementId}_hScrollHandle`)
+      //   this.handleXStart = handleXEl.offsetLeft  
+      // }    
+
     }
   }, {
     key: "hideError",
@@ -7965,6 +8042,11 @@ var WebsyTable3 = /*#__PURE__*/function () {
           vScrollEl.style.top = "".concat(this.sizes.header.height + this.sizes.total.height, "px");
           vScrollEl.style.height = "".concat(this.sizes.bodyHeight, "px");
           vHandleEl.style.height = Math.max(this.options.minHandleSize, this.sizes.bodyHeight * (this.sizes.rowsToRenderPrecise / this.totalRowCount)) + 'px';
+
+          if (this.startRow !== 0) {
+            var scrollableSpace = vScrollEl.getBoundingClientRect().height - vHandleEl.getBoundingClientRect().height;
+            vHandleEl.style.top = Math.round(this.startRow / (this.totalRowCount - this.sizes.rowsToRender) * scrollableSpace) + 'px';
+          }
         } else {
           vHandleEl.style.height = '0px';
         }
@@ -7974,7 +8056,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
 
         if (this.hScrollRequired === true) {
           hScrollEl.style.left = "".concat(this.sizes.table.width - this.sizes.scrollableWidth, "px");
-          hScrollEl.style.width = "".concat(this.sizes.scrollableWidth - 20, "px");
+          hScrollEl.style.width = "".concat(this.sizes.scrollableWidth - (this.isTouchDevice ? 30 : 20), "px");
           hHandleEl.style.width = Math.max(this.options.minHandleSize, this.sizes.scrollableWidth * (this.sizes.scrollableWidth / this.sizes.totalNonPinnedWidth)) + 'px';
         } else {
           hHandleEl.style.width = '0px';
@@ -8163,7 +8245,7 @@ var WebsyTable3 = /*#__PURE__*/function () {
           this.startRow += 1;
         }
 
-        this.options.onScroll('y', this.startRow, this.endRow, this.startCol - this.pinnedColumns, this.endCol - this.pinnedColumns);
+        this.options.onScroll('y', this.startRow, this.endRow, Math.max(0, this.startCol - this.pinnedColumns), this.endCol - this.pinnedColumns);
       }
     }
   }, {
@@ -9950,7 +10032,9 @@ var WebsyChart = /*#__PURE__*/function () {
     key: "removebar",
     value: function removebar(key) {
       /* global key d3 */
-      var bars = this.barLayer.selectAll(".bar_".concat(key)).transition(this.transition).style('fill-opacity', 1e-6).remove();
+      this.barLayer.selectAll(".bar_".concat(key)).transition(this.transition).style('fill-opacity', 1e-6).remove(); // remove from the brush as well
+
+      this.brushArea.selectAll(".bar_".concat(key)).transition(this.transition).style('fill-opacity', 1e-6).remove();
     }
   }, {
     key: "renderLabels",
@@ -10504,6 +10588,469 @@ var WebsyChart = /*#__PURE__*/function () {
 
   return WebsyChart;
 }();
+/* global include */
+
+
+var WebsyPie = /*#__PURE__*/function () {
+  function WebsyPie(elementId, options) {
+    _classCallCheck(this, WebsyPie);
+
+    this.elementId = elementId;
+    var DEFAULTS = {
+      labelMode: 'auto',
+      labelLocs: [],
+      showLabels: false,
+      segments: ['#9dbca6', '#e3c080', '#fd7336', '#b12737', '#50424b'],
+      label: {
+        value: {
+          size: '12px',
+          colour: '#BBB',
+          family: 'arial',
+          weight: 'normal'
+        },
+        label: {
+          size: '10px',
+          colour: '#888',
+          family: 'arial',
+          weight: 'normal'
+        }
+      },
+      kpi: {
+        background: '#555',
+        value: {
+          size: '60px',
+          colour: '#CCC',
+          family: 'arial',
+          weight: 'bold'
+        },
+        label: {
+          size: '20px',
+          colour: '#FFF',
+          family: 'arial',
+          weight: 'normal'
+        }
+      }
+    };
+    this.options = _extends({}, DEFAULTS, options);
+    this.listening = true;
+
+    if (!elementId) {
+      console.log('No element Id provided for Websy Chart');
+      return;
+    }
+
+    var el = document.getElementById(this.elementId);
+
+    if (el) {
+      el.classList.add('websy-pie');
+    } else {
+      console.error("No element found with ID ".concat(this.elementId));
+    }
+  }
+
+  _createClass(WebsyPie, [{
+    key: "calculateArcAngle",
+    value: function calculateArcAngle(arcLength, radius) {
+      return this.convertRadiansToDegrees(arcLength / (Math.PI * (2 * radius)));
+    }
+  }, {
+    key: "calculateCircumference",
+    value: function calculateCircumference(perc) {
+      return Math.PI * 2 * perc;
+    }
+  }, {
+    key: "close",
+    value: function close() {}
+  }, {
+    key: "convertDegreesToRadians",
+    value: function convertDegreesToRadians(degrees) {
+      return degrees * (Math.PI / 180);
+    }
+  }, {
+    key: "convertRadiansToDegrees",
+    value: function convertRadiansToDegrees(radians) {
+      return radians * (180 / Math.PI);
+    }
+  }, {
+    key: "createCanvases",
+    value: function createCanvases(element) {
+      /* global element */
+      if (element && !element.target) {
+        if (!this.listening) {
+          // add event listeners to help with responsiveness
+          element.addEventListener('resize', this.render.bind(this), false);
+          window.addEventListener('resize', this.render.bind(this), false);
+          this.listening = true;
+        }
+
+        var height = element.clientHeight;
+        var width = element.clientWidth;
+        this.width = width;
+        this.height = height;
+        this.center = {
+          x: width / 2,
+          y: height / 2
+        };
+        this.outerRadius = Math.min(this.height, this.width) / 2 - 20;
+        console.log('radius is ' + this.outerRadius); // segment canvas
+
+        var segmentCanvas = document.createElement('canvas');
+        this.segmentPaper = {
+          canvas: segmentCanvas,
+          pen: segmentCanvas.getContext('2d')
+        };
+        this.segmentPaper.canvas.style.position = 'absolute';
+        this.segmentPaper.canvas.style.top = '0px';
+        this.segmentPaper.canvas.style.left = '0px';
+        this.segmentPaper.canvas.style.zIndex = '5';
+        this.segmentPaper.canvas.style.width = width + 'px';
+        this.segmentPaper.canvas.style.height = height + 'px'; // make the canvase size double to accommodate for retina displays
+
+        this.segmentPaper.canvas.width = width * 2;
+        this.segmentPaper.canvas.height = height * 2;
+        this.segmentPaper.pen.scale(2, 2);
+        element.appendChild(this.segmentPaper.canvas); // label canvas
+
+        var labelCanvas = document.createElement('canvas');
+        this.labelPaper = {
+          canvas: labelCanvas,
+          pen: labelCanvas.getContext('2d')
+        };
+        this.labelPaper.canvas.style.position = 'absolute';
+        this.labelPaper.canvas.style.top = '0px';
+        this.labelPaper.canvas.style.left = '0px';
+        this.labelPaper.canvas.style.zIndex = '5';
+        this.labelPaper.canvas.style.width = width + 'px';
+        this.labelPaper.canvas.style.height = height + 'px'; // make the canvase size double to accommodate for retina displays
+
+        this.labelPaper.canvas.width = width * 2;
+        this.labelPaper.canvas.height = height * 2;
+        this.labelPaper.pen.scale(2, 2);
+        element.appendChild(this.labelPaper.canvas); // kpi canvas
+
+        var kpiCanvas = document.createElement('canvas');
+        this.kpiPaper = {
+          canvas: kpiCanvas,
+          pen: kpiCanvas.getContext('2d')
+        };
+        this.kpiPaper.canvas.style.position = 'absolute';
+        this.kpiPaper.canvas.style.top = '0px';
+        this.kpiPaper.canvas.style.left = '0px';
+        this.kpiPaper.canvas.style.zIndex = '5';
+        this.kpiPaper.canvas.style.width = width + 'px';
+        this.kpiPaper.canvas.style.height = height + 'px'; // make the canvase size double to accommodate for retina displays
+
+        this.kpiPaper.canvas.width = width * 2;
+        this.kpiPaper.canvas.height = height * 2;
+        this.kpiPaper.pen.scale(2, 2);
+        element.appendChild(this.kpiPaper.canvas);
+      } else {
+        // clear the canvases
+        this.segmentPaper.canvas.width = this.width * 2;
+        this.labelPaper.canvas.width = this.width * 2;
+        this.kpiPaper.canvas.width = this.width * 2;
+      }
+    }
+  }, {
+    key: "drawKPI",
+    value: function drawKPI() {
+      var kpiStyleDefaults = this.options.kpi;
+
+      if (this.kpi) {
+        // draw the circle for the background colour if one has been specified
+        if (!this.kpi.background || this.kpi.background !== 'transparent') {
+          this.kpiPaper.pen.beginPath();
+          this.kpiPaper.pen.fillStyle = this.kpi.background || kpiStyleDefaults.background;
+          this.kpiPaper.pen.moveTo(this.center.x, this.center.y);
+          this.kpiPaper.pen.arc(this.center.x, this.center.y, this.innerRadiusPixels + 5 * !this.addShading + 1, 0, Math.PI * 2);
+          this.kpiPaper.pen.fill();
+          this.kpiPaper.pen.closePath();
+        } // draw the kpi value
+
+
+        if (this.kpi.value) {
+          this.kpiPaper.pen.save();
+          this.kpiPaper.pen.beginPath();
+          this.kpiPaper.pen.moveTo(this.center.x, this.center.y);
+          this.kpiPaper.pen.font = (this.kpi.value.weight || kpiStyleDefaults.value.weight) + ' ' + (this.kpi.value.size || kpiStyleDefaults.value.size) + ' ' + (this.kpi.value.family || kpiStyleDefaults.value.family);
+          this.kpiPaper.pen.textAlign = 'center';
+
+          if (this.kpi.label) {
+            this.kpiPaper.pen.textBaseline = 'text-bottom';
+          } else {
+            this.kpiPaper.pen.textBaseline = 'middle';
+          }
+
+          this.kpiPaper.pen.fillStyle = this.kpi.value.colour || kpiStyleDefaults.value.colour;
+          this.kpiPaper.pen.fillText(this.kpi.value.text, this.center.x, this.center.y);
+          this.kpiPaper.pen.closePath();
+          this.kpiPaper.pen.restore();
+        } // draw the kpi label
+
+
+        if (this.kpi.label) {
+          this.kpiPaper.pen.save();
+          this.kpiPaper.pen.beginPath();
+          this.kpiPaper.pen.moveTo(this.center.x, this.center.y);
+          this.kpiPaper.pen.font = (this.kpi.label.weight || kpiStyleDefaults.label.weight) + ' ' + (this.kpi.label.size || kpiStyleDefaults.label.size) + ' ' + (this.kpi.label.family || kpiStyleDefaults.label.family);
+          this.kpiPaper.pen.textAlign = 'center';
+
+          if (this.kpi.value) {
+            this.kpiPaper.pen.textBaseline = 'top';
+          } else {
+            this.kpiPaper.pen.textBaseline = 'middle';
+          }
+
+          this.kpiPaper.pen.fillStyle = this.kpi.label.colour || kpiStyleDefaults.label.colour;
+          this.kpiPaper.pen.fillText(this.kpi.label.text, this.center.x, this.center.y + 10);
+          this.kpiPaper.pen.closePath();
+          this.kpiPaper.pen.restore();
+        }
+      }
+    }
+  }, {
+    key: "drawLabels",
+    value: function drawLabels() {
+      // this.labelPaper.pen.translate(this.center.x, this.center.y)
+      if (this.options.showLabels) {
+        for (var s in this.data.segments) {
+          this.labelPaper.pen.beginPath();
+          this.labelPaper.pen.font = '20px arial';
+          this.labelPaper.pen.textAlign = 'center';
+          this.labelPaper.pen.textBaseline = 'text-bottom';
+          this.labelPaper.pen.fillStyle = 'black'; // calculate the nearest 90 degrees to the mid point and reduce to within 360 degrees
+
+          var midAngleDeg = this.data.segments[s].midAngleDeg % 360;
+          var nearest90Deg = Math.round(midAngleDeg / 90) * 90 % 360;
+          console.log(Math.abs(nearest90Deg - midAngleDeg));
+          var missingAngleDeg = 270 - Math.abs(nearest90Deg - midAngleDeg);
+          console.log(nearest90Deg);
+          var oppLength = this.outerRadius * Math.sin(this.convertDegreesToRadians(Math.abs(nearest90Deg - midAngleDeg))) / Math.sin(this.convertDegreesToRadians(missingAngleDeg));
+          oppLength = Math.abs(oppLength);
+          var moveLength = this.outerRadius + 5;
+          var slopeMultiplier = 1.2;
+          var flatMultiplier = 1.3;
+
+          if (midAngleDeg > 0 && midAngleDeg <= 45) {
+            this.labelPaper.pen.moveTo(this.center.x + moveLength, this.center.y + oppLength);
+            this.labelPaper.pen.lineTo(this.center.x + moveLength * slopeMultiplier, this.center.y + oppLength * slopeMultiplier);
+            this.labelPaper.pen.lineTo(this.center.x + moveLength * flatMultiplier, this.center.y + oppLength * slopeMultiplier);
+          } else if (midAngleDeg > 45 && midAngleDeg <= 90) {
+            this.labelPaper.pen.moveTo(this.center.x + oppLength, this.center.y + moveLength);
+            this.labelPaper.pen.lineTo(this.center.x + oppLength * slopeMultiplier, this.center.y + moveLength * slopeMultiplier);
+            this.labelPaper.pen.lineTo(this.center.x + oppLength * flatMultiplier, this.center.y + moveLength * slopeMultiplier);
+          } else if (midAngleDeg > 90 && midAngleDeg <= 135) {
+            this.labelPaper.pen.moveTo(this.center.x - oppLength, this.center.y + moveLength);
+            this.labelPaper.pen.lineTo(this.center.x - oppLength * slopeMultiplier, this.center.y + moveLength * slopeMultiplier);
+            this.labelPaper.pen.lineTo(this.center.x - oppLength * flatMultiplier, this.center.y + moveLength * slopeMultiplier);
+          } else if (midAngleDeg > 135 && midAngleDeg <= 180) {
+            this.labelPaper.pen.moveTo(this.center.x - moveLength, this.center.y + oppLength);
+            this.labelPaper.pen.lineTo(this.center.x - moveLength * slopeMultiplier, this.center.y + oppLength * slopeMultiplier);
+            this.labelPaper.pen.lineTo(this.center.x - moveLength * flatMultiplier, this.center.y + oppLength * slopeMultiplier);
+          } else if (midAngleDeg > 180 && midAngleDeg <= 225) {
+            this.labelPaper.pen.moveTo(this.center.x - moveLength, this.center.y - oppLength);
+            this.labelPaper.pen.lineTo(this.center.x - moveLength * slopeMultiplier, this.center.y - oppLength * slopeMultiplier);
+            this.labelPaper.pen.lineTo(this.center.x - moveLength * flatMultiplier, this.center.y - oppLength * slopeMultiplier);
+          } else if (midAngleDeg > 225 && midAngleDeg <= 270) {
+            this.labelPaper.pen.moveTo(this.center.x - oppLength, this.center.y - moveLength);
+            this.labelPaper.pen.lineTo(this.center.x - oppLength * slopeMultiplier, this.center.y - moveLength * slopeMultiplier);
+            this.labelPaper.pen.lineTo(this.center.x - oppLength * flatMultiplier, this.center.y - moveLength * slopeMultiplier);
+          } else if (midAngleDeg > 270 && midAngleDeg <= 315) {
+            this.labelPaper.pen.moveTo(this.center.x + oppLength, this.center.y - moveLength);
+            this.labelPaper.pen.lineTo(this.center.x + oppLength * slopeMultiplier, this.center.y - moveLength * slopeMultiplier);
+            this.labelPaper.pen.lineTo(this.center.x + oppLength * flatMultiplier, this.center.y - moveLength * slopeMultiplier);
+          } else {
+            this.labelPaper.pen.moveTo(this.center.x + moveLength, this.center.y - oppLength);
+            this.labelPaper.pen.lineTo(this.center.x + moveLength * slopeMultiplier, this.center.y - oppLength * slopeMultiplier);
+            this.labelPaper.pen.lineTo(this.center.x + moveLength * flatMultiplier, this.center.y - oppLength * slopeMultiplier);
+          }
+
+          this.labelPaper.pen.strokeStyle = '#cccccc';
+          this.labelPaper.pen.stroke();
+          this.labelPaper.pen.fillText(this.center.x + this.data.segments[s].label.x, this.center.y + this.data.segments[s].label.y, s);
+          this.labelPaper.pen.closePath();
+        }
+      }
+    }
+  }, {
+    key: "drawSegments",
+    value: function drawSegments() {
+      var originalStartPoint = this.convertDegreesToRadians(270);
+      var startPoint = originalStartPoint;
+      var colourIndex = 0;
+
+      for (var s in this.data.segments) {
+        if (colourIndex >= this.options.colors.length) {
+          colourIndex = 0;
+        }
+
+        var segmentColour = this.options.colors[colourIndex];
+        var endPoint = startPoint + this.data.segments[s].circumference;
+        var midAngle = (startPoint + endPoint) / 2;
+        this.data.segments[s].labelCanvasRotation = startPoint;
+        this.data.segments[s].startAngle = startPoint;
+        this.data.segments[s].midAngle = midAngle;
+        this.data.segments[s].endAngle = endPoint;
+        this.data.segments[s].startAngleDeg = this.convertRadiansToDegrees(startPoint);
+        this.data.segments[s].midAngleDeg = this.convertRadiansToDegrees(midAngle);
+        this.data.segments[s].endAngleDeg = this.convertRadiansToDegrees(endPoint);
+        this.segmentPaper.pen.beginPath();
+        this.segmentPaper.pen.moveTo(this.center.x, this.center.y);
+        this.segmentPaper.pen.fillStyle = segmentColour;
+        this.segmentPaper.pen.arc(this.center.x, this.center.y, this.outerRadius, startPoint, endPoint);
+        console.log(this.segmentPaper.pen);
+        this.segmentPaper.pen.fill();
+        this.segmentPaper.pen.closePath();
+        startPoint = endPoint;
+        colourIndex++;
+      } // cut out the center of the pie if an inner radius has been set
+
+
+      if (this.innerRadius && this.innerRadius !== 0) {
+        // inner radius is a percentage so we compare it against outerRadius (px) to calculate the pixel value
+        this.innerRadiusPixels = Math.round(this.outerRadius * (this.innerRadius / 100));
+        this.segmentPaper.pen.save();
+        this.segmentPaper.pen.beginPath();
+        this.segmentPaper.pen.moveTo(this.center.x, this.center.y);
+        this.segmentPaper.pen.arc(this.center.x, this.center.y, this.innerRadiusPixels + 5, 0, Math.PI * 2);
+        this.segmentPaper.pen.clip();
+        this.segmentPaper.pen.clearRect(0, 0, this.width * 2, this.height * 2);
+        this.segmentPaper.pen.closePath();
+        this.segmentPaper.pen.restore(); // add shading if required
+
+        if (this.addShading === true) {
+          startPoint = originalStartPoint;
+          colourIndex = 0;
+
+          for (var _s in this.data.segments) {
+            if (colourIndex >= this.options.colors.length) {
+              colourIndex = 0;
+            }
+
+            var _segmentColour = this.hexToRGBA(this.options.colors[colourIndex], 0.8);
+
+            var _endPoint = startPoint + this.data.segments[_s].circumference;
+
+            this.segmentPaper.pen.beginPath();
+            this.segmentPaper.pen.moveTo(this.center.x, this.center.y);
+            this.segmentPaper.pen.fillStyle = _segmentColour;
+            this.segmentPaper.pen.arc(this.center.x, this.center.y, this.innerRadiusPixels + 6, startPoint, _endPoint);
+            this.segmentPaper.pen.fill();
+            this.segmentPaper.pen.closePath();
+            startPoint = _endPoint;
+            colourIndex++;
+          } // cut out the center again
+
+
+          this.segmentPaper.pen.save();
+          this.segmentPaper.pen.beginPath();
+          this.segmentPaper.pen.moveTo(this.center.x, this.center.y);
+          this.segmentPaper.pen.arc(this.center.x, this.center.y, this.innerRadiusPixels, 0, Math.PI * 2);
+          this.segmentPaper.pen.clip();
+          this.segmentPaper.pen.clearRect(0, 0, this.width * 2, this.height * 2);
+          this.segmentPaper.pen.closePath();
+          this.segmentPaper.pen.restore();
+        }
+      }
+
+      console.log(this.data);
+    }
+  }, {
+    key: "hexToRGBA",
+    value: function hexToRGBA(hex, opacity) {
+      if (!opacity) {
+        opacity = 1;
+      }
+
+      var c;
+
+      if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+        c = hex.substring(1).split('');
+
+        if (c.length === 3) {
+          c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+        }
+
+        c = '0x' + c.join('');
+        return 'rgba(' + [c >> 16 & 255, c >> 8 & 255, c & 255, opacity].join(',') + ')';
+      }
+
+      console.error("Unable to convert hex (".concat(hex, ") to RGBA"));
+      return 'rgba(0, 0, 0, 1)';
+    }
+  }, {
+    key: "render",
+    value: function render(data) {
+      /* global data */
+      var el = document.getElementById(this.elementId);
+
+      if (el && !el.target) {
+        this.createCanvases(el);
+      }
+
+      if (data && !data.target) {
+        this.originalData = _toConsumableArray(data);
+      }
+
+      this.processData(data);
+      this.drawSegments();
+      this.drawLabels();
+      this.drawKPI();
+    }
+  }, {
+    key: "resize",
+    value: function resize() {}
+  }, {
+    key: "processData",
+    value: function processData(data) {
+      /* global data */
+      var tempData = {};
+      var tempTotal = 0;
+
+      for (var i = 0; i < data.length; i++) {
+        // if the dimension does not exists as a property on tempData, add it
+        if (!tempData[data[i][0].label]) {
+          tempData[data[i][0].label] = {
+            segmentValue: 0,
+            drill: []
+          };
+        } // add the value to the relevent segmentValue
+
+
+        tempData[data[i][0].label].segmentValue += data[i][1].value; // add the value to the total
+
+        tempTotal += data[i][1].value; // if a drill has been specified add the data to the drill property
+
+        if (this.drill && this.drill !== '') {
+          tempData[data[i][0].label].drill.push({
+            label: data[i][0].label,
+            value: data[i][1].value
+          });
+        }
+      } // loop through the full data set to calculate the percentages
+
+
+      for (var s in tempData) {
+        tempData[s].percValue = tempData[s].segmentValue / tempTotal;
+        tempData[s].circumference = this.calculateCircumference(tempData[s].percValue);
+        tempData[s].labelAngle = 360 * (tempData[s].percValue / 2); // calculate where the label should be for that segment
+
+        tempData[s].label = {
+          x: (this.outerRadius + 5) / Math.sin(this.convertDegreesToRadians(90)) * Math.sin(this.convertDegreesToRadians(180 - 90 - tempData[s].labelAngle))
+        };
+        tempData[s].label.y = (this.outerRadius + 5) / Math.sin(this.convertDegreesToRadians(90)) * Math.sin(this.convertDegreesToRadians(tempData[s].labelAngle));
+      }
+
+      this.data = {
+        segments: tempData,
+        total: tempTotal
+      };
+      console.log(this.data);
+    }
+  }]);
+
+  return WebsyPie;
+}();
 
 var WebsyLegend = /*#__PURE__*/function () {
   function WebsyLegend(elementId, options) {
@@ -11033,6 +11580,8 @@ var WebsyDesigns = {
   Chart: WebsyChart,
   WebsyChartTooltip: WebsyChartTooltip,
   ChartTooltip: WebsyChartTooltip,
+  Pie: WebsyPie,
+  WebsyPie: WebsyPie,
   Legend: WebsyLegend,
   WebsyMap: WebsyMap,
   Map: WebsyMap,