@iamproperty/components 3.2.0 → 3.4.5

package/assets/js/modules/alert.js

@@ -1,57 +1,41 @@
+// @ts-nocheck
 function alert(element) {
-
-  // Create a dissmissable button
-  element.addEventListener('click', function(e){
-
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.btn-close')) {
-        
-        e.preventDefault();
-
-        element.classList.remove('show');
+    // Create a dissmissable button
+    element.addEventListener('click', function (e) {
+        for (var target = e.target; target && target != this; target = target.parentNode) {
+            if (target.matches('.btn-close')) {
+                e.preventDefault();
+                element.classList.remove('show');
+                setTimeout(function () {
+                    element.remove();
+                }, 300); // Execute something() 1 second later.
+                break;
+            }
+        }
+    }, false);
+    // Self disappearing alert
+    if (element.hasAttribute('data-timeout')) {
+        let timeOut = element.getAttribute('data-timeout');
         setTimeout(function () {
-          element.remove();
-        }, 300); // Execute something() 1 second later.
-
-        break;
-      }
+            element.classList.remove('show');
+            setTimeout(function () {
+                element.remove();
+            }, 300); // Execute something() 1 second later.
+        }, timeOut); // Execute something() 1 second later.
+    }
+    // Create an alert holder thats fixed to the bottom of the page, alerts with the class of alert--fix are then moved to this area. Creating a fixed but scrollable area that alerts can be stacked up on.
+    if (!document.querySelector('.alert__holder')) {
+        var bodyElement = document.getElementsByTagName("BODY")[0];
+        let newDiv = document.createElement("div");
+        newDiv.classList.add('alert__holder');
+        if (document.querySelector('main'))
+            document.querySelector('main').appendChild(newDiv);
+        else
+            document.body.appendChild(newDiv);
+    }
+    let alertHolder = document.querySelector('.alert__holder');
+    if (element.classList.contains('alert--fixed') && !element.parentNode.classList.contains('alert__wrapper')) {
+        alertHolder.appendChild(element);
     }
-  }, false);
-
-  // Self disappearing alert
-  if(element.hasAttribute('data-timeout')){
-
-    let timeOut = element.getAttribute('data-timeout');
-
-    setTimeout(function () {
-      element.classList.remove('show');
-      setTimeout(function () {
-        element.remove();
-      }, 300); // Execute something() 1 second later.
-    }, timeOut); // Execute something() 1 second later.
-  }
-    
-
-
-  // Create an alert holder thats fixed to the bottom of the page, alerts with the class of alert--fix are then moved to this area. Creating a fixed but scrollable area that alerts can be stacked up on.
-  if(!document.querySelector('.alert__holder')){
-    var bodyElement = document.getElementsByTagName("BODY")[0];
-
-    let newDiv = document.createElement("div");
-    newDiv.classList.add('alert__holder');
-
-    if(document.querySelector('main'))
-      document.querySelector('main').appendChild(newDiv);
-    else
-      document.body.appendChild(newDiv); 
-  }
-
-  let alertHolder = document.querySelector('.alert__holder');
-
-  if(element.classList.contains('alert--fixed') && !element.parentNode.classList.contains('alert__wrapper')){
-
-    alertHolder.appendChild(element);
-  }
 }
-
-export default alert
+export default alert;

package/assets/js/modules/carousel.js

@@ -1,102 +1,76 @@
+// @ts-nocheck
 function carousel(carouselElement) {
-
-  var scrollTimeout;
-
-  let carouselInner = carouselElement.querySelector('.carousel__inner');
-  let itemCount = carouselElement.querySelectorAll('.carousel__item').length;
-  let cols = carouselElement.getAttribute('data-cols');
-  let smCols = carouselElement.getAttribute('data-sm-cols');
-  let mdCols = carouselElement.getAttribute('data-md-cols');
-
-  carouselElement.querySelector('.carousel__controls a').classList.add('active');
-
-  // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
-  carouselInner.addEventListener('scroll', function(e){
-    clearTimeout(scrollTimeout);
-    scrollTimeout = setTimeout(function(){ 
-
-      let scrollArea = carouselInner.clientWidth;
-      let scrollWidth = carouselInner.scrollWidth;
-      let scrollLeft = carouselInner.scrollLeft;
-      let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
-      let lastItemOffset = carouselElement.querySelector('.carousel__item:last-child').offsetLeft;
-
-      Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-        link.classList.remove('active');
-      });
-
-      carouselElement.querySelector('.control-'+targetSlide).classList.add('active');
-      
-      // Disable the previous button
-      if(targetSlide == 1)
-        carouselElement.querySelector('.btn-prev').setAttribute('disabled','disabled');
-      else
-        carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
-
-      // Disable the next button if the last item is in view
-      if(carouselInner.scrollLeft + scrollArea > lastItemOffset)
-        carouselElement.querySelector('.btn-next').setAttribute('disabled','disabled');
-      else
-        carouselElement.querySelector('.btn-next').removeAttribute('disabled');
-
-    }, 100); 
-
-  }, false);
-
-  // when the buttons are used we need to make sure the carousel scrolls to the correct place
-  carouselElement.addEventListener('click', function(e){
-
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.carousel__controls a')) {
-        
-        e.preventDefault();
-
-        Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
-          link.classList.remove('active');
-        });
-        target.classList.add('active');
-
-        const el = document.querySelector(target.getAttribute('href'));
-
-        carouselInner.scroll({
-          top: 0,
-          left: el.offsetLeft, 
-          behavior: 'smooth'
-        });
-
-        break;
-      }
-    }
-  }, false);
-
-  carouselElement.addEventListener('click', function(e){
-
-    for (var target = e.target; target && target != this; target = target.parentNode) {
-      if (target.matches('.btn-next, .btn-prev')) {
-        
-        e.preventDefault();
-        let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;
-        
-        carouselInner.scroll({
-          top: 0,
-          left: scrollTo, 
-          behavior: 'smooth'
-        });
-        break;
-      }
-    }
-  }, false);
-
-
-  // Add responsive hide button classes
-  if(itemCount == 1)
-    carouselElement.classList.add('hide-btns');
-
-  if(smCols >= itemCount)
-    carouselElement.classList.add('hide-sm-btns');
-
-  if(mdCols >= itemCount)
-    carouselElement.classList.add('hide-md-btns');
+    var scrollTimeout;
+    let carouselInner = carouselElement.querySelector('.carousel__inner');
+    let itemCount = carouselElement.querySelectorAll('.carousel__item').length;
+    let cols = carouselElement.getAttribute('data-cols');
+    let smCols = carouselElement.getAttribute('data-sm-cols');
+    let mdCols = carouselElement.getAttribute('data-md-cols');
+    carouselElement.querySelector('.carousel__controls a').classList.add('active');
+    // On scroll we need to make sure the buttons get corrected and the next testimonial is shown
+    carouselInner.addEventListener('scroll', function (e) {
+        clearTimeout(scrollTimeout);
+        scrollTimeout = setTimeout(function () {
+            let scrollArea = carouselInner.clientWidth;
+            let scrollWidth = carouselInner.scrollWidth;
+            let scrollLeft = carouselInner.scrollLeft;
+            let targetSlide = Math.round((scrollLeft / scrollWidth) * itemCount) + 1;
+            let lastItemOffset = carouselElement.querySelector('.carousel__item:last-child').offsetLeft;
+            Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
+                link.classList.remove('active');
+            });
+            carouselElement.querySelector('.control-' + targetSlide).classList.add('active');
+            // Disable the previous button
+            if (targetSlide == 1)
+                carouselElement.querySelector('.btn-prev').setAttribute('disabled', 'disabled');
+            else
+                carouselElement.querySelector('.btn-prev').removeAttribute('disabled');
+            // Disable the next button if the last item is in view
+            if (carouselInner.scrollLeft + scrollArea > lastItemOffset)
+                carouselElement.querySelector('.btn-next').setAttribute('disabled', 'disabled');
+            else
+                carouselElement.querySelector('.btn-next').removeAttribute('disabled');
+        }, 100);
+    }, false);
+    // when the buttons are used we need to make sure the carousel scrolls to the correct place
+    carouselElement.addEventListener('click', function (e) {
+        for (var target = e.target; target && target != this; target = target.parentNode) {
+            if (target.matches('.carousel__controls a')) {
+                e.preventDefault();
+                Array.from(carouselElement.querySelectorAll('.carousel__controls a')).forEach((link, index) => {
+                    link.classList.remove('active');
+                });
+                target.classList.add('active');
+                const el = document.querySelector(target.getAttribute('href'));
+                carouselInner.scroll({
+                    top: 0,
+                    left: el.offsetLeft,
+                    behavior: 'smooth'
+                });
+                break;
+            }
+        }
+    }, false);
+    carouselElement.addEventListener('click', function (e) {
+        for (var target = e.target; target && target != this; target = target.parentNode) {
+            if (target.matches('.btn-next, .btn-prev')) {
+                e.preventDefault();
+                let scrollTo = target.classList.contains('btn-prev') ? carouselInner.scrollLeft - carouselInner.clientWidth : carouselInner.scrollLeft + carouselInner.clientWidth;
+                carouselInner.scroll({
+                    top: 0,
+                    left: scrollTo,
+                    behavior: 'smooth'
+                });
+                break;
+            }
+        }
+    }, false);
+    // Add responsive hide button classes
+    if (itemCount == 1)
+        carouselElement.classList.add('hide-btns');
+    if (smCols >= itemCount)
+        carouselElement.classList.add('hide-sm-btns');
+    if (mdCols >= itemCount)
+        carouselElement.classList.add('hide-md-btns');
 }
-
-export default carousel
+export default carousel;

package/assets/js/modules/chart.js

@@ -1,218 +1,151 @@
-import { ucfirst, unsnake } from './helpers'
-
-function chart(chartElement,min,max,type) {
-
-  let chartKey = chartElement.querySelector('.chart__key');
-  let chartYaxis = chartElement.querySelector('.chart__yaxis');
-  let chartGuidelines = chartElement.querySelector('.chart__guidelines');
-
-  // Chart key
-  if(chartKey && chartKey.childElementCount == 0){
-    createChartKey(chartElement);
-  }
-
-  // Y Axis and Guidelines
-  if(chartYaxis && chartYaxis.childElementCount == 0){
-    createChartYaxis(chartElement);
-  }
-  if(chartGuidelines && chartGuidelines.childElementCount == 0){
-    createChartGuidelines(chartElement);
-  }
-
-  // Create lines for line graph
-  if(type == "line")
-    createLines(chartElement,min,max);
-
-  // Create pies
-  if(type == "pie")
-    createPies(chartElement);
-
-  // Add css vars to cells
-  Array.from(chartElement.querySelectorAll('tbody tr')).forEach((tr, index) => {
-
-    let group = tr.querySelector('td:first-child, th:first-child') ? tr.querySelector('td:first-child, th:first-child').innerHTML : '';
-
-    Array.from(tr.querySelectorAll('td[data-numeric]:not([data-numeric="0"]):not(:first-child)')).forEach((td, index) => {
-
-      const value = Number.parseFloat(td.getAttribute('data-numeric'));
-      let percent = ((value - min)/(max)) * 100;
-      const content = td.innerHTML;
-      const label = td.getAttribute('data-label');
-      let bottom = 0;
-
-      // If the value is negative the position below the 0 line
-      if(min < 0){
-        bottom = Math.abs((min)/(max)*100);
-        if(value < 0){
-          bottom = bottom - percent;
-        }
-      }
-      td.setAttribute("style",`--bottom:${bottom}%;--percent:${percent}%;`);
-
-
-      td.innerHTML = `<span data-group="${group}" data-label="${label}">${content}</span>`;
+// @ts-nocheck
+import { ucfirst, unsnake } from './helpers.js';
+function chart(chartElement, min, max, type) {
+    let chartKey = chartElement.querySelector('.chart__key');
+    let chartYaxis = chartElement.querySelector('.chart__yaxis');
+    let chartGuidelines = chartElement.querySelector('.chart__guidelines');
+    // Chart key
+    if (chartKey && chartKey.childElementCount == 0) {
+        createChartKey(chartElement);
+    }
+    // Y Axis and Guidelines
+    if (chartYaxis && chartYaxis.childElementCount == 0) {
+        createChartYaxis(chartElement);
+    }
+    if (chartGuidelines && chartGuidelines.childElementCount == 0) {
+        createChartGuidelines(chartElement);
+    }
+    // Create lines for line graph
+    if (type == "line")
+        createLines(chartElement, min, max);
+    // Create pies
+    if (type == "pie")
+        createPies(chartElement);
+    // Add css vars to cells
+    Array.from(chartElement.querySelectorAll('tbody tr')).forEach((tr, index) => {
+        let group = tr.querySelector('td:first-child, th:first-child') ? tr.querySelector('td:first-child, th:first-child').innerHTML : '';
+        Array.from(tr.querySelectorAll('td[data-numeric]:not([data-numeric="0"]):not(:first-child)')).forEach((td, index) => {
+            const value = Number.parseFloat(td.getAttribute('data-numeric'));
+            let percent = ((value - min) / (max)) * 100;
+            const content = td.innerHTML;
+            const label = td.getAttribute('data-label');
+            let bottom = 0;
+            // If the value is negative the position below the 0 line
+            if (min < 0) {
+                bottom = Math.abs((min) / (max) * 100);
+                if (value < 0) {
+                    bottom = bottom - percent;
+                }
+            }
+            td.setAttribute("style", `--bottom:${bottom}%;--percent:${percent}%;`);
+            td.innerHTML = `<span data-group="${group}" data-label="${label}">${content}</span>`;
+        });
     });
-  });
-}
-
-export const createChartKey = function(chartElement){
-
-  let chartKey = chartElement.querySelector('.chart__key');
-
-  Array.from(chartElement.querySelectorAll('thead th')).forEach((arrayElement, index) => {
-
-    chartKey.innerHTML += `<div class="key">${arrayElement.innerText}</div>`;
-  });
-}
-
-export const createChartGuidelines = function(chartElement){
-
-  let chartGuidelines = chartElement.querySelector('.chart__guidelines');
-  const max = chartElement.getAttribute('data-max');
-  const min = chartElement.getAttribute('data-min');
-
-  chartGuidelines.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
-  chartGuidelines.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
-}
-
-export const createChartYaxis = function(chartElement){
-
-  let chartYaxis = chartElement.querySelector('.chart__yaxis');
-  const max = chartElement.getAttribute('data-max');
-  const min = chartElement.getAttribute('data-min');
-
-  chartYaxis.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
-  chartYaxis.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
 }
-
+export const createChartKey = function (chartElement) {
+    let chartKey = chartElement.querySelector('.chart__key');
+    Array.from(chartElement.querySelectorAll('thead th')).forEach((arrayElement, index) => {
+        chartKey.innerHTML += `<div class="key">${arrayElement.innerText}</div>`;
+    });
+};
+export const createChartGuidelines = function (chartElement) {
+    let chartGuidelines = chartElement.querySelector('.chart__guidelines');
+    const max = chartElement.getAttribute('data-max');
+    const min = chartElement.getAttribute('data-min');
+    chartGuidelines.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
+    chartGuidelines.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
+};
+export const createChartYaxis = function (chartElement) {
+    let chartYaxis = chartElement.querySelector('.chart__yaxis');
+    const max = chartElement.getAttribute('data-max');
+    const min = chartElement.getAttribute('data-min');
+    chartYaxis.innerHTML += `<div style="--value: 0;--percent:0%;" class="axis__point"><span>0</span></div>`;
+    chartYaxis.innerHTML += `<div style="--value: ${max};--percent:100%;" class="axis__point"><span>${max}</span></div>`;
+};
 function getCoordinatesForPercent(percent) {
-  const x = Math.cos(2 * Math.PI * percent);
-  const y = Math.sin(2 * Math.PI * percent);
-  return [x*100, y*100];
+    const x = Math.cos(2 * Math.PI * percent);
+    const y = Math.sin(2 * Math.PI * percent);
+    return [x * 100, y * 100];
 }
-
-export const createPies = function(chartElement){
-
-  let returnString = '';
-  let pieWrapper = chartElement.querySelector('.pies');
-
-  Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
-
-    let paths = '';
-    let tooltips = '';
-
-    let cumulativePercent = 0;
-
-    let total = 0;
-
-    let titleKey = item.querySelectorAll('td')[0]
-    let title = titleKey.innerHTML;
-
-    Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
-
-      if(subindex != 0){
-
-        let value = cell.getAttribute('data-numeric');
-
-        value = value.replace('£','');
-        value = value.replace('%','');
-        value = Number.parseInt(value);
-
-        total += value;
-      }
+export const createPies = function (chartElement) {
+    let returnString = '';
+    let pieWrapper = chartElement.querySelector('.pies');
+    Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
+        let paths = '';
+        let tooltips = '';
+        let cumulativePercent = 0;
+        let total = 0;
+        let titleKey = item.querySelectorAll('td')[0];
+        let title = titleKey.innerHTML;
+        Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
+            if (subindex != 0) {
+                let value = cell.getAttribute('data-numeric');
+                value = value.replace('£', '');
+                value = value.replace('%', '');
+                value = Number.parseInt(value);
+                total += value;
+            }
+        });
+        Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
+            if (subindex != 0) {
+                let value = cell.getAttribute('data-numeric');
+                value = value.replace('£', '');
+                value = value.replace('%', '');
+                value = Number.parseInt(value);
+                let percent = value / total;
+                //lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
+                const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
+                // each slice starts where the last slice ended, so keep a cumulative percent
+                cumulativePercent += percent;
+                const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
+                // if the slice is more than 50%, take the large arc (the long way around)
+                const largeArcFlag = percent > .5 ? 1 : 0;
+                // create an array and join it just for code readability
+                const pathData = [
+                    `M ${startX} ${startY}`,
+                    `A 100 100 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+                    `L 0 0`, // Line
+                ].join(' ');
+                paths += `<path d="${pathData}"></path>`;
+                tooltips += `<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0"><span class="total d-block">${ucfirst(unsnake(title))}</span> ${ucfirst(unsnake(cell.getAttribute('data-label')))}<br/> ${cell.innerHTML}</span></div></foreignObject>`;
+            }
+        });
+        returnString += `<div class="pie"><svg viewBox="-105 -105 210 210" style="transform: rotate(-90deg)" preserveAspectRatio="none">${paths}<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${title}</span></div></foreignObject>${tooltips}</svg></div>`;
     });
-
-    Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
-
-      if(subindex != 0){
-
-        let value = cell.getAttribute('data-numeric');
-
-        value = value.replace('£','');
-        value = value.replace('%','');
-        value = Number.parseInt(value);
-
-        let percent = value/total;
-
-        //lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
-        const [startX, startY] = getCoordinatesForPercent(cumulativePercent);
-
-          // each slice starts where the last slice ended, so keep a cumulative percent
-          cumulativePercent += percent;
-
-          const [endX, endY] = getCoordinatesForPercent(cumulativePercent);
-
-          // if the slice is more than 50%, take the large arc (the long way around)
-          const largeArcFlag = percent > .5 ? 1 : 0;
-
-          // create an array and join it just for code readability
-          const pathData = [
-            `M ${startX} ${startY}`, // Move
-            `A 100 100 0 ${largeArcFlag} 1 ${endX} ${endY}`, // Arc
-            `L 0 0`, // Line
-          ].join(' ');
-
-        paths += `<path d="${pathData}"></path>`;
-        tooltips += `<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0"><span class="total d-block">${ucfirst(unsnake(title))}</span> ${ucfirst(unsnake(cell.getAttribute('data-label')))}<br/> ${cell.innerHTML}</span></div></foreignObject>`;
-      }
+    pieWrapper.innerHTML = returnString;
+};
+export const createLines = function (chartElement, min, max) {
+    let returnString = '';
+    let linesWrapper = chartElement.querySelector('.lines');
+    let items = Array.from(chartElement.querySelectorAll('tbody tr'));
+    let lines = Array();
+    let spacer = 200 / (items.length - 1);
+    // Creates the lines array from the fields array
+    Array.from(chartElement.querySelectorAll('thead th')).forEach((field, index) => {
+        if (index != 0) {
+            lines[index - 1] = '';
+        }
     });
-
-    returnString += `<div class="pie"><svg viewBox="-105 -105 210 210" style="transform: rotate(-90deg)" preserveAspectRatio="none">${paths}<foreignObject x="-70" y="-70" width="140" height="140" style="transform: rotate(90deg)"><div><span class="h5 mb-0">${title}</span></div></foreignObject>${tooltips}</svg></div>`
-  });
-
-  pieWrapper.innerHTML = returnString;
-}
-
-export const createLines = function(chartElement,min,max){
-
-  let returnString = '';
-  let linesWrapper = chartElement.querySelector('.lines');
-
-  let items = Array.from(chartElement.querySelectorAll('tbody tr'));
-
-  let lines = Array();
-  let spacer = 200/(items.length - 1);
-
-  // Creates the lines array from the fields array
-  Array.from(chartElement.querySelectorAll('thead th')).forEach((field, index) => {
-
-    if(index != 0){
-
-      lines[index-1] = '';
-    }
-  });
-
-  // populate the lines array from the items array
-  Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
-
-    Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
-
-      if(subindex != 0){
-
-        let value = cell.getAttribute('data-numeric');
-
-        value = value.replace('£','');
-        value = value.replace('%','');
-        value = Number.parseFloat(value) - min;
-
-        const percent = (value/max) * 100;
-
-        let command = index == 0 ? 'M' : 'L';
-
-        lines[subindex-1] += `${command} ${spacer * index} ${100-percent} `;
-      }
+    // populate the lines array from the items array
+    Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
+        Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
+            if (subindex != 0) {
+                let value = cell.getAttribute('data-numeric');
+                value = value.replace('£', '');
+                value = value.replace('%', '');
+                value = Number.parseFloat(value) - min;
+                const percent = (value / max) * 100;
+                let command = index == 0 ? 'M' : 'L';
+                lines[subindex - 1] += `${command} ${spacer * index} ${100 - percent} `;
+            }
+        });
     });
-  });
-
-  lines.forEach((line, index) => {
-
-    returnString += `
+    lines.forEach((line, index) => {
+        returnString += `
 <svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none">
   <path fill="none" d="${line}"></path>
-</svg>`
-  });
-
-  linesWrapper.innerHTML = returnString;
-}
-
-export default chart
+</svg>`;
+    });
+    linesWrapper.innerHTML = returnString;
+};
+export default chart;