@iamproperty/components 7.0.0 → 7.1.0--beta2

package/assets/js/modules/chart.js

@@ -1,5 +1,5 @@
 import { ucfirst, unsnake, numberOfDays } from './helpers.js';
-// #region Functions that setup and trigger other functions 
+// #region Functions that setup and trigger other functions
 export const setupChart = (chartElement, chartOuter, tableElement) => {
     // #region Reset the chart
     // empty divs to re-populate
@@ -12,15 +12,19 @@ export const setupChart = (chartElement, chartOuter, tableElement) => {
     const chartYaxis = chartOuter.querySelector('.chart__yaxis');
     chartYaxis.innerHTML = ``;
     // Remove old input fields
-    Array.from(chartOuter.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map((element) => { element.remove(); });
+    Array.from(chartOuter.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map((element) => {
+        element.remove();
+    });
     // #endregion
     createTypeSwitcher(chartElement, chartKey, chartOptions);
-    let { xaxis, type } = getChartData(chartElement, chartOuter);
+    const { xaxis, type } = getChartData(chartElement, chartOuter);
     setCellData(chartElement, chartOuter, tableElement);
     createChartKey(chartOuter, tableElement, chartKey);
     createChartGuidelines(chartElement, chartOuter, chartGuidelines);
     createChartYaxis(chartElement, chartOuter, chartYaxis);
-    const availableTypes = chartElement.hasAttribute('data-types') ? chartElement.getAttribute('data-types').split(',') : [type];
+    const availableTypes = chartElement.hasAttribute('data-types')
+        ? chartElement.getAttribute('data-types').split(',')
+        : [type];
     if (availableTypes.includes('line')) {
         createLines(chartElement, chartOuter);
     }
@@ -29,7 +33,8 @@ export const setupChart = (chartElement, chartOuter, tableElement) => {
     if (xaxis) {
         createXaxis(chartElement, chartOuter, xaxis);
     }
-    if (chartElement.hasAttribute('data-slope')) // Need to check attribute is there not its value
+    if (chartElement.hasAttribute('data-slope'))
+        // Need to check attribute is there not its value
         createSlope(chartElement, chartOuter);
     if (chartElement.classList.contains('chart--show-totals'))
         createKeyTotals(chartElement, chartOuter);
@@ -43,9 +48,11 @@ export const setupChart = (chartElement, chartOuter, tableElement) => {
 // #region Event handlers and observers
 export const setEventHandlers = function (chartElement, chartOuter) {
     const showData = chartOuter.querySelectorAll(':scope > input[type="checkbox"]');
-    let { type } = getChartData(chartElement, chartOuter);
-    const availableTypes = chartElement.hasAttribute('data-types') ? chartElement.getAttribute('data-types').split(',') : [type];
-    for (var i = 0; i < showData.length; i++) {
+    const { type } = getChartData(chartElement, chartOuter);
+    const availableTypes = chartElement.hasAttribute('data-types')
+        ? chartElement.getAttribute('data-types').split(',')
+        : [type];
+    for (let i = 0; i < showData.length; i++) {
         showData[i].addEventListener('change', function () {
             if (availableTypes.includes('pie'))
                 createPies(chartOuter);
@@ -65,13 +72,15 @@ export const setEventHandlers = function (chartElement, chartOuter) {
 export const setEventObservers = function (chartElement, chartOuter) {
     if (chartElement.hasAttribute('data-series'))
         return false;
-    let table = chartElement.querySelector('table');
-    let newTable = chartOuter.querySelector('table');
+    const table = chartElement.querySelector('table');
+    const newTable = chartOuter.querySelector('table');
     const attributesUpdated = (mutationList, observer) => {
         observer.disconnect();
         observer2.disconnect();
         for (const mutation of mutationList) {
-            if (mutation.attributeName == 'class' || (mutation.type === 'attributes' && mutation.attributeName === 'data-total') || mutation.type === 'attributes') {
+            if (mutation.attributeName == 'class' ||
+                (mutation.type === 'attributes' && mutation.attributeName === 'data-total') ||
+                mutation.type === 'attributes') {
                 newTable.innerHTML = table.innerHTML;
                 setupChart(chartElement, chartOuter, newTable);
             }
@@ -83,7 +92,7 @@ export const setEventObservers = function (chartElement, chartOuter) {
         observer.disconnect();
         observer2.disconnect();
         for (const mutation of mutationList) {
-            if (mutation.type == "characterData" || (mutation.type == "childList" && mutation.addedNodes.length)) {
+            if (mutation.type == 'characterData' || (mutation.type == 'childList' && mutation.addedNodes.length)) {
                 newTable.innerHTML = table.innerHTML;
                 setupChart(chartElement, chartOuter, newTable);
             }
@@ -91,8 +100,8 @@ export const setEventObservers = function (chartElement, chartOuter) {
         observer.observe(table, { characterData: true, subtree: true });
         observer2.observe(chartElement, { attributes: true });
     };
-    let observer = new MutationObserver(tableUpdated);
-    let observer2 = new MutationObserver(attributesUpdated);
+    const observer = new MutationObserver(tableUpdated);
+    const observer2 = new MutationObserver(attributesUpdated);
     observer.observe(table, { characterData: true, subtree: true });
     observer2.observe(chartElement, { attributes: true });
     return true;
@@ -100,24 +109,50 @@ export const setEventObservers = function (chartElement, chartOuter) {
 // #endregion
 // #region GET functions
 export const getChartData = function (chartElement, chartOuter) {
-    let table = chartOuter.querySelector('.chart__wrapper table');
-    let min = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;
-    let max = chartElement.hasAttribute('data-max') ? chartElement.getAttribute('data-max') : getLargestValue(table);
-    let type = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
-    let yaxis = chartElement.hasAttribute('data-yaxis') ? chartElement.getAttribute('data-yaxis').split(',') : [];
-    let guidelines = chartElement.hasAttribute('data-guidelines') ? chartElement.getAttribute('data-guidelines').split(',') : [];
-    let targets = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;
-    let events = chartElement.hasAttribute('data-events') ? JSON.parse(chartElement.getAttribute('data-events')) : null;
-    let xaxis = chartElement.hasAttribute('data-xaxis') ? chartElement.getAttribute('data-xaxis').split(',') : null;
-    let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment') : null;
-    let start = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;
-    let end = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(table); // TODO - get largest value from the data-xaxis
-    let slope = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;
-    let yInt = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;
-    return { min, max, type, yaxis, targets, events, xaxis, increment, start, end, slope, yInt, guidelines };
+    const table = chartOuter.querySelector('.chart__wrapper table');
+    const min = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;
+    const max = chartElement.hasAttribute('data-max')
+        ? chartElement.getAttribute('data-max')
+        : getLargestValue(table);
+    const type = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
+    const yaxis = chartElement.hasAttribute('data-yaxis') ? chartElement.getAttribute('data-yaxis').split(',') : [];
+    const guidelines = chartElement.hasAttribute('data-guidelines')
+        ? chartElement.getAttribute('data-guidelines').split(',')
+        : [];
+    const targets = chartElement.hasAttribute('data-targets')
+        ? JSON.parse(chartElement.getAttribute('data-targets'))
+        : null;
+    const events = chartElement.hasAttribute('data-events')
+        ? JSON.parse(chartElement.getAttribute('data-events'))
+        : null;
+    const xaxis = chartElement.hasAttribute('data-xaxis')
+        ? chartElement.getAttribute('data-xaxis').split(',')
+        : null;
+    const increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment') : null;
+    const start = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;
+    const end = chartElement.hasAttribute('data-end')
+        ? chartElement.getAttribute('data-end')
+        : getLargestValue(table); // TODO - get largest value from the data-xaxis
+    const slope = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;
+    const yInt = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;
+    return {
+        min,
+        max,
+        type,
+        yaxis,
+        targets,
+        events,
+        xaxis,
+        increment,
+        start,
+        end,
+        slope,
+        yInt,
+        guidelines,
+    };
 };
 function getLargestValue(table) {
-    let values = Array.from(table.querySelectorAll('tbody td:not(:first-child)')).map((element) => {
+    const values = Array.from(table.querySelectorAll('tbody td:not(:first-child)')).map((element) => {
         let currentValue = String(element.textContent);
         currentValue = currentValue.replace('£', '');
         currentValue = currentValue.replace('%', '');
@@ -125,7 +160,7 @@ function getLargestValue(table) {
         currentValue = Number.parseFloat(currentValue);
         return currentValue;
     });
-    let largetValue = Math.max(...values);
+    const largetValue = Math.max(...values);
     // TO DO round to the nearest 10, 100, 1000 and so on
     return Math.ceil(largetValue);
 }
@@ -143,7 +178,7 @@ const getValues = function (value, min, max, start) {
     }
     // If the value is negative the position below the 0 line
     if (min < 0) {
-        bottom = Math.abs(((min) / (max - min)) * 100);
+        bottom = Math.abs((min / (max - min)) * 100);
         if (cleanValue < 0) {
             percent = bottom - percent;
             bottom = bottom - percent;
@@ -168,19 +203,21 @@ function getCoordinatesForPercent(percent, pieCount) {
 // #region SET functions - set data attributes and classes
 export const setCellData = function (chartElement, chartOuter, table) {
     let { min, max } = getChartData(chartElement, chartOuter);
-    let chartType = chartElement.getAttribute('data-type');
-    let increment = chartElement.getAttribute('data-increment');
-    let incrementStart = chartElement.getAttribute('data-start');
-    let incrementEnd = chartElement.getAttribute('data-end');
-    let startDay = min;
+    const chartType = chartElement.getAttribute('data-type');
+    const increment = chartElement.getAttribute('data-increment');
+    const incrementStart = chartElement.getAttribute('data-start');
+    const incrementEnd = chartElement.getAttribute('data-end');
+    const startDay = min;
     // Change how gant charts are configured as this just seems bizarre now
-    if (increment == "days") {
+    if (increment == 'days') {
         max = numberOfDays(min, max);
         min = 0;
-        chartElement.querySelector('tbody').setAttribute('style', `--single-day:${((1 / max) * 100)}%;`);
+        chartElement.querySelector('tbody').setAttribute('style', `--single-day:${(1 / max) * 100}%;`);
     }
     Array.from(table.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 : '';
+        const group = tr.querySelector('td:first-child, th:first-child')
+            ? tr.querySelector('td:first-child, th:first-child').innerHTML
+            : '';
         let coverageStart = 100;
         let coverageEnd = 0;
         let cumulativeComparison = 0;
@@ -192,8 +229,8 @@ export const setCellData = function (chartElement, chartOuter, table) {
         Array.from(tr.querySelectorAll('td:not([data-numeric]):not(:first-child)')).forEach((td) => {
             let value = parseFloat(td.textContent.replace('£', '').replace('%', '').replace(',', ''));
             let start = 0;
-            if (increment == "days") {
-                let dates = td.textContent.split(' - ');
+            if (increment == 'days') {
+                const dates = td.textContent.split(' - ');
                 if (dates[1]) {
                     value = numberOfDays(dates[0], dates[1]);
                     start = numberOfDays(startDay, dates[0]) - 1;
@@ -215,27 +252,27 @@ export const setCellData = function (chartElement, chartOuter, table) {
         if (tr.querySelector('[data-label="Max"]')) {
             tr.setAttribute('data-max', tr.querySelector('[data-label="Max"][data-numeric]').getAttribute('data-numeric'));
         }
-        if ((chartType == "proportional" || chartType == "waffle") && !tr.hasAttribute('data-total')) {
+        if ((chartType == 'proportional' || chartType == 'waffle') && !tr.hasAttribute('data-total')) {
             let total = 0;
             Array.from(tr.querySelectorAll('td[data-numeric]:not(:first-child)')).forEach((td) => {
-                let display = getComputedStyle(td).display;
+                const display = getComputedStyle(td).display;
                 if (display == 'none')
                     return;
                 total += Number.parseFloat(td.getAttribute('data-numeric'));
             });
             tr.setAttribute('data-total', total);
         }
-        let rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;
-        let rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;
+        const rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;
+        const rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;
         // Add a useful index css var for the use of animatons.
         tr.setAttribute('style', `--row-index:${index + 1};`);
         if (rowMin < 0) {
-            let minBottom = Math.abs(((rowMin) / (rowMax - rowMin)) * 100);
+            const minBottom = Math.abs((rowMin / (rowMax - rowMin)) * 100);
             chartElement.setAttribute('style', `--min-bottom: ${minBottom}%;`);
         }
         // Add css vars to cells
         Array.from(tr.querySelectorAll('td[data-numeric]:not([data-label="Min"]):not([data-label="Max"]):not(:first-child)')).forEach((td) => {
-            let display = getComputedStyle(td).display;
+            const display = getComputedStyle(td).display;
             if (display == 'none')
                 return;
             const label = td.getAttribute('data-label');
@@ -245,22 +282,22 @@ export const setCellData = function (chartElement, chartOuter, table) {
             if (!td.querySelector('span[data-group]'))
                 td.innerHTML = `<span data-group="${group}" data-label="${label}">${content}</span>`;
             if (!td.hasAttribute('style')) {
-                let { percent, bottom, axis } = getValues(value, rowMin, rowMax, start);
+                const { percent, bottom, axis } = getValues(value, rowMin, rowMax, start);
                 td.setAttribute('data-percent', percent);
-                td.setAttribute("style", `--bottom:${bottom}%;--percent:${percent}%;--axis:${axis}%;`);
+                td.setAttribute('style', `--bottom:${bottom}%;--percent:${percent}%;--axis:${axis}%;`);
                 if (tr.hasAttribute('data-total')) {
-                    let rowTotal = tr.getAttribute('data-total');
-                    let comparison = ((value - rowMin) / (rowTotal)) * 100;
+                    const rowTotal = tr.getAttribute('data-total');
+                    const comparison = ((value - rowMin) / rowTotal) * 100;
                     cumulativeComparison += comparison;
                     td.setAttribute('data-comparison', comparison);
                     td.style.setProperty('--cumulative-comparision', `${cumulativeComparison}%`);
                     td.style.setProperty('--comparison', `${comparison}%`);
                 }
-                if (chartElement.classList.contains("chart--value-order")) {
-                    let order = (10000 - Math.round(percent * 100));
+                if (chartElement.classList.contains('chart--value-order')) {
+                    const order = 10000 - Math.round(percent * 100);
                     td.style.setProperty('--order', `${order}%`);
                 }
-                if (chartType == "dumbbell") {
+                if (chartType == 'dumbbell') {
                     if (percent < coverageStart) {
                         tr.style.setProperty('--coverage-start', `${percent}%`);
                         coverageStart = percent;
@@ -270,16 +307,16 @@ export const setCellData = function (chartElement, chartOuter, table) {
                         coverageEnd = percent;
                     }
                 }
-                if (chartType == "waffle") {
+                if (chartType == 'waffle') {
                     let actualPercent = Math.round(td.getAttribute('data-comparison'));
                     // Prevent the chart from spilling out of the top
                     totalPercent += actualPercent;
                     if (totalPercent > 100)
                         actualPercent = actualPercent - (totalPercent - 100);
-                    let percentMinusAfter = previousAfter != 0 ? actualPercent - (10 - previousAfter) : actualPercent;
-                    let rowHeight = percentMinusAfter < 10 ? 10 : Math.floor(percentMinusAfter / 10) * 10;
-                    let rowWidth = percentMinusAfter < 10 ? percentMinusAfter * 10 : 100;
-                    let maxWidth = actualPercent * 10;
+                    const percentMinusAfter = previousAfter != 0 ? actualPercent - (10 - previousAfter) : actualPercent;
+                    const rowHeight = percentMinusAfter < 10 ? 10 : Math.floor(percentMinusAfter / 10) * 10;
+                    const rowWidth = percentMinusAfter < 10 ? percentMinusAfter * 10 : 100;
+                    const maxWidth = actualPercent * 10;
                     td.style.setProperty('--rowPosition', `${rowPosition}%`);
                     td.style.setProperty('--rowHeight', `${rowHeight}%`);
                     td.style.setProperty('--rowWidth', `${rowWidth}%`);
@@ -287,19 +324,19 @@ export const setCellData = function (chartElement, chartOuter, table) {
                     // Create the psuedo element variables for the the block that sticks out BELOW the main row
                     let beforeWidth = 0;
                     if (previousAfter != 0) {
-                        beforeWidth = 100 - (previousAfter * 10);
+                        beforeWidth = 100 - previousAfter * 10;
                         td.style.setProperty('--beforeWidth', `${beforeWidth}%`);
-                        td.style.setProperty('--beforeHeight', `${10 / rowHeight * 100}%`);
+                        td.style.setProperty('--beforeHeight', `${(10 / rowHeight) * 100}%`);
                         td.style.setProperty('--beforeLeft', `${previousAfter * 10}%`);
                     }
                     // Create the psuedo element variables for the the block that sticks out ABOVE the main row
-                    let afterWidth = Math.round(percentMinusAfter - rowHeight) * 10;
-                    let afterHeight = 10 / (rowHeight) * 100;
+                    const afterWidth = Math.round(percentMinusAfter - rowHeight) * 10;
+                    const afterHeight = (10 / rowHeight) * 100;
                     td.style.setProperty('--afterWidth', `${afterWidth}%`);
                     td.style.setProperty('--afterHeight', `${afterHeight}%`);
                     // If the row width plus the previous after is under 10 it needs to be added to the new previousAfter variable
                     if (previousAfter + beforeWidth / 10 + rowWidth / 10 < 10)
-                        previousAfter += beforeWidth / 10 + (rowWidth / 10);
+                        previousAfter += beforeWidth / 10 + rowWidth / 10;
                     else if (percentMinusAfter < 10)
                         previousAfter = percentMinusAfter;
                     else
@@ -310,8 +347,13 @@ export const setCellData = function (chartElement, chartOuter, table) {
             }
             // totals
             if (chartElement.classList.contains('chart--show-totals')) {
-                let chartTotal = chartElement.getAttribute('data-total') ? Number.parseFloat(chartElement.getAttribute('data-total')) : 0;
-                let keyTotal = chartElement.querySelector(`.key[data-label="${label}"]`) && chartElement.querySelector(`.key[data-label="${label}"]`).getAttribute('data-total') ? Number.parseFloat(chartElement.querySelector(`.key[data-label="${label}"]`).getAttribute('data-total')) : 0;
+                const chartTotal = chartElement.getAttribute('data-total')
+                    ? Number.parseFloat(chartElement.getAttribute('data-total'))
+                    : 0;
+                const keyTotal = chartElement.querySelector(`.key[data-label="${label}"]`) &&
+                    chartElement.querySelector(`.key[data-label="${label}"]`).getAttribute('data-total')
+                    ? Number.parseFloat(chartElement.querySelector(`.key[data-label="${label}"]`).getAttribute('data-total'))
+                    : 0;
                 if (chartElement.querySelector(`.key[data-label="${label}"]`))
                     chartElement.querySelector(`.key[data-label="${label}"]`).setAttribute('data-total', keyTotal + value);
                 chartElement.setAttribute('data-total', chartTotal + value);
@@ -319,19 +361,19 @@ export const setCellData = function (chartElement, chartOuter, table) {
         });
         // Values for incremental charts i.e. histograms...
         if (increment && incrementStart && incrementEnd) {
-            let firstCellValue = parseFloat(tr.querySelector('td:first-child').textContent.replace('£', '').replace('%', '').replace(',', ''));
-            let position = ((firstCellValue - incrementStart) / (incrementEnd - incrementStart)) * 100;
+            const firstCellValue = parseFloat(tr.querySelector('td:first-child').textContent.replace('£', '').replace('%', '').replace(',', ''));
+            const position = ((firstCellValue - incrementStart) / (incrementEnd - incrementStart)) * 100;
             tr.setAttribute('style', `--position:${position}%;`);
         }
     });
 };
 export const setLongestLabel = function (chartOuter) {
-    let chartWrapper = chartOuter.querySelector('.chart__wrapper');
-    let table = chartOuter.querySelector('.chart table');
+    const chartWrapper = chartOuter.querySelector('.chart__wrapper');
+    const table = chartOuter.querySelector('.chart table');
     // set the longest label attr so that the bar chart knows what margin to set on the left
     let longestLabel = '';
     Array.from(table.querySelectorAll('tbody tr td:first-child')).forEach((td) => {
-        if (typeof td.textContent != "undefined" && td.textContent.length > longestLabel.length)
+        if (typeof td.textContent != 'undefined' && td.textContent.length > longestLabel.length)
             longestLabel = td.textContent;
     });
     chartWrapper.setAttribute('data-longest-label', longestLabel);
@@ -347,12 +389,16 @@ export const setLongestLabel = function (chartOuter) {
 // #region CREATE function
 export const createTypeSwitcher = function (chartElement, chartKey, chartOptions) {
     const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
-    const availableTypes = chartElement.hasAttribute('data-types') ? chartElement.getAttribute('data-types').split(',') : [];
+    const availableTypes = chartElement.hasAttribute('data-types')
+        ? chartElement.getAttribute('data-types').split(',')
+        : [];
     if (!chartElement.hasAttribute('data-types') && chartElement.hasAttribute('data-type'))
         chartKey.insertAdjacentHTML('afterend', `<input type="radio" name="chart-type" value="${chartElement.getAttribute('data-type')}" checked="">`);
     else if (chartElement.hasAttribute('data-types')) {
-        let chartType = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
-        chartOptions.insertAdjacentHTML('beforebegin', availableTypes.map((type) => `<input type="radio" name="chart-type" value="${type}" id="${chartID}-${type}" ${chartType == type ? 'checked=""' : ''}>`).join(''));
+        const chartType = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
+        chartOptions.insertAdjacentHTML('beforebegin', availableTypes
+            .map((type) => `<input type="radio" name="chart-type" value="${type}" id="${chartID}-${type}" ${chartType == type ? 'checked=""' : ''}>`)
+            .join(''));
         chartOptions.insertAdjacentHTML('beforeend', availableTypes.map((type) => `<label for="${chartID}-${type}">${type}</label>`).join(''));
     }
 };
@@ -360,7 +406,7 @@ export const createChartKey = function (chartOuter, tableElement, chartKey) {
     const chartID = `chart-${Date.now() + (Math.floor(Math.random() * 100) + 1)}`;
     //const chartOuter = chartElement.querySelector('.chart__outer');
     let previousInput;
-    let headings = Array.from(tableElement.querySelectorAll('thead th'));
+    const headings = Array.from(tableElement.querySelectorAll('thead th'));
     headings.forEach((arrayElement, index) => {
         if (index != 0) {
             previousInput = createChartKeyItem(chartID, index, arrayElement.textContent, chartKey, chartOuter, previousInput);
@@ -372,7 +418,7 @@ export const createChartKey = function (chartOuter, tableElement, chartKey) {
     return true;
 };
 function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previousInput) {
-    let input = document.createElement('input');
+    const input = document.createElement('input');
     input.setAttribute('name', `${chartID}-dataset-${index}`);
     input.setAttribute('id', `${chartID}-dataset-${index}`);
     input.setAttribute('checked', `checked`);
@@ -382,7 +428,7 @@ function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previous
     else
         chartOuter.insertBefore(input, previousInput.nextSibling);
     previousInput = input;
-    let label = document.createElement('label');
+    const label = document.createElement('label');
     label.setAttribute('class', `key btn btn-action`);
     label.setAttribute('for', `${chartID}-dataset-${index}`);
     label.setAttribute('data-label', `${text}`);
@@ -394,8 +440,8 @@ export const createChartGuidelines = function (chartElement, chartOuter, chartGu
     let { min, max, yaxis, increment, guidelines } = getChartData(chartElement, chartOuter);
     if (guidelines.length)
         yaxis = guidelines;
-    let startDay = min;
-    if (increment == "days") {
+    const startDay = min;
+    if (increment == 'days') {
         max = numberOfDays(min, max);
         min = 0;
     }
@@ -404,19 +450,19 @@ export const createChartGuidelines = function (chartElement, chartOuter, chartGu
         chartGuidelines.setAttribute('class', 'chart__guidelines');
     }
     chartGuidelines.innerHTML = '';
-    for (var i = 0; i < yaxis.length; i++) {
+    for (let i = 0; i < yaxis.length; i++) {
         let value = parseFloat(yaxis[i].replace('£', '').replace('%', '').replace(',', ''));
-        if (increment == "days") {
+        if (increment == 'days') {
             value = numberOfDays(startDay, yaxis[i]) - 1;
         }
-        let { axis } = getValues(value, min, max);
+        const { axis } = getValues(value, min, max);
         chartGuidelines.innerHTML += `<div class="guideline" style="--percent:${axis}%;"><span>${yaxis[i]}</span></div>`;
     }
 };
 export const createChartYaxis = function (chartElement, chartOuter, chartYaxis) {
     let { min, max, yaxis, increment } = getChartData(chartElement, chartOuter);
-    let startDay = min;
-    if (increment == "days") {
+    const startDay = min;
+    if (increment == 'days') {
         max = numberOfDays(min, max);
         min = 0;
     }
@@ -425,49 +471,49 @@ export const createChartYaxis = function (chartElement, chartOuter, chartYaxis)
         chartYaxis.setAttribute('class', 'chart__yaxis');
     }
     chartYaxis.innerHTML = '';
-    for (var i = 0; i < yaxis.length; i++) {
+    for (let i = 0; i < yaxis.length; i++) {
         let value = parseFloat(yaxis[i].replace('£', '').replace('%', ''));
-        if (increment == "days") {
+        if (increment == 'days') {
             value = numberOfDays(startDay, yaxis[i]);
         }
-        let { axis } = getValues(value, min, max);
+        const { axis } = getValues(value, min, max);
         chartYaxis.innerHTML += `<div class="axis__point" style="--percent:${axis}%;"><span>${yaxis[i]}</span></div>`;
     }
 };
 export const createXaxis = function (chartElement, chartOuter, xaxis) {
     const chart = chartOuter.querySelector('.chart');
     let chartXaxis = chartOuter.querySelector('.chart__xaxis');
-    let { increment, start, end } = getChartData(chartElement, chartOuter);
+    const { increment, start, end } = getChartData(chartElement, chartOuter);
     if (!chartXaxis) {
         chartXaxis = document.createElement('div');
         chartXaxis.setAttribute('class', 'chart__xaxis');
     }
     if (increment && start && end) {
         chartXaxis.innerHTML = '';
-        for (var i = 0; i < xaxis.length; i++) {
-            let value = parseFloat(xaxis[i].replace('£', '').replace('%', ''));
-            let position = ((value - start) / (end - start)) * 100;
+        for (let i = 0; i < xaxis.length; i++) {
+            const value = parseFloat(xaxis[i].replace('£', '').replace('%', ''));
+            const position = ((value - start) / (end - start)) * 100;
             chartXaxis.innerHTML += `<div class="axis__point" style="--percent:${position}%;"><span>${xaxis[i]}</span></div>`;
         }
     }
     chart.prepend(chartXaxis);
 };
 export const createLines = function (chartElement, chartOuter) {
-    let { min, max } = getChartData(chartElement, chartOuter);
-    let chartType = chartElement.getAttribute('data-type');
+    const { min, max } = getChartData(chartElement, chartOuter);
+    const chartType = chartElement.getAttribute('data-type');
     let returnString = '';
     //let chartWrapper = chartOuter.querySelector('.chart__wrapper');
-    let linesWrapper = chartOuter.querySelector('.chart__lines');
-    let items = Array.from(chartOuter.querySelectorAll('tbody tr'));
-    let lines = Array();
-    let linesCount = chartOuter.querySelectorAll('thead th:not(:first-child)').length;
-    let commands = Array();
-    let animatelines = Array();
-    let itemCount = items.length <= 1000 ? items.length : 1000;
+    const linesWrapper = chartOuter.querySelector('.chart__lines');
+    const items = Array.from(chartOuter.querySelectorAll('tbody tr'));
+    const lines = [];
+    const linesCount = chartOuter.querySelectorAll('thead th:not(:first-child)').length;
+    const commands = [];
+    const animatelines = [];
+    const itemCount = items.length <= 1000 ? items.length : 1000;
     let spacer = 200 / (itemCount - 1);
     let spacerIndent = 0;
-    if (chartType == "combo") {
-        spacer = 200 / (itemCount);
+    if (chartType == 'combo') {
+        spacer = 200 / itemCount;
         spacerIndent = spacer / 2;
     }
     // Creates the lines array from the fields array
@@ -480,13 +526,13 @@ export const createLines = function (chartElement, chartOuter) {
     let counter = 0;
     Array.from(chartOuter.querySelectorAll('tbody tr')).forEach((item) => {
         const display = getComputedStyle(item).display;
-        if (display != "none") {
+        if (display != 'none') {
             Array.from(item.querySelectorAll('td:not(:first-child)')).forEach((cell, subindex) => {
                 if (!cell.classList.contains('chart__bar')) {
-                    let value = cell.getAttribute('data-numeric');
-                    let { axis } = getValues(value, min, max);
+                    const value = cell.getAttribute('data-numeric');
+                    const { axis } = getValues(value, min, max);
                     if (!Number.isNaN(axis)) {
-                        lines[subindex] += `${commands[subindex]} ${(spacerIndent) + (spacer * counter)} ${100 - axis} `;
+                        lines[subindex] += `${commands[subindex]} ${spacerIndent + spacer * counter} ${100 - axis} `;
                         animatelines[subindex] += `${commands[subindex]} ${spacer * counter} 100 `;
                         commands[subindex] = 'L';
                     }
@@ -508,10 +554,10 @@ export const createLines = function (chartElement, chartOuter) {
 };
 export const createPies = function (chartOuter) {
     let returnString = '';
-    let chartInner = chartOuter.querySelector('.chart');
+    const chartInner = chartOuter.querySelector('.chart');
     let pieWrapper = chartOuter.querySelector('.pies');
     if (!pieWrapper) {
-        pieWrapper = document.createElement("div");
+        pieWrapper = document.createElement('div');
         pieWrapper.setAttribute('class', 'pies');
         chartInner.append(pieWrapper);
     }
@@ -520,8 +566,8 @@ export const createPies = function (chartOuter) {
         let tooltips = '';
         let cumulativePercent = 0;
         let total = 0;
-        let titleKey = item.querySelectorAll('td')[0];
-        let title = titleKey.innerHTML;
+        const titleKey = item.querySelectorAll('td')[0];
+        const title = titleKey.innerHTML;
         let pieCount = 0;
         // Work out the total amount
         Array.from(item.querySelectorAll('td')).forEach((td, subindex) => {
@@ -539,26 +585,26 @@ export const createPies = function (chartOuter) {
         // Create the paths
         Array.from(item.querySelectorAll('td')).forEach((td, subindex) => {
             const display = getComputedStyle(td).display;
-            if (subindex != 0 && pieCount == 1 && display != "none") {
+            if (subindex != 0 && pieCount == 1 && display != 'none') {
                 const pathData = `M 0 0 L 100 0 A 100 100 0 1 1 100 -0.01 L 0 0`;
                 paths += `<path d="${pathData}" style="${td.getAttribute('style')} --path-index: ${subindex};"></path>`;
                 tooltips += `<foreignObject x="-70" y="-70" width="140" height="140" ><div><span class="h5 mb-0"><span class="total d-block">${ucfirst(unsnake(title))}</span> ${ucfirst(unsnake(td.getAttribute('data-label')))}<br/> ${td.innerHTML}${td.hasAttribute('data-second') ? `${td.getAttribute('data-second-label')}: ${td.getAttribute('data-second')}` : ''}</span></div></foreignObject>`;
             }
             else if (subindex != 0) {
                 let value = td.getAttribute('data-numeric');
-                let hide = display == "none" ? "display: none;" : "";
+                const hide = display == 'none' ? 'display: none;' : '';
                 value = value.replace('£', '');
                 value = value.replace('%', '');
                 value = value.replace(',', '');
                 value = Number.parseInt(value);
-                let percent = value / total;
+                const percent = value / total;
                 const [startX, startY] = getCoordinatesForPercent(cumulativePercent, pieCount);
                 const [endX, endY] = getCoordinatesForPercent(cumulativePercent + percent, pieCount);
-                const largeArcFlag = percent > .5 ? 1 : 0; // if the slice is more than 50%, take the large arc (the long way around)
+                const largeArcFlag = percent > 0.5 ? 1 : 0; // if the slice is more than 50%, take the large arc (the long way around)
                 const pathData = [
                     `M 0 0`,
-                    `L ${(startX ? startX.toFixed(0) : 0)} ${(startY ? startY.toFixed(0) : 0)}`, // Move
-                    `A 100 100 0 ${largeArcFlag} 1 ${(endX ? endX.toFixed(0) : 0)} ${(endY ? endY.toFixed(0) : 0)}`, // Arc
+                    `L ${startX ? startX.toFixed(0) : 0} ${startY ? startY.toFixed(0) : 0}`, // Move
+                    `A 100 100 0 ${largeArcFlag} 1 ${endX ? endX.toFixed(0) : 0} ${endY ? endY.toFixed(0) : 0}`, // Arc
                     `L 0 0`, // Line
                 ].join(' ');
                 paths += `<path d="${pathData}" style="${td.getAttribute('style')} --path-index: ${subindex};${hide}"></path>`;
@@ -578,24 +624,24 @@ export const createSlope = function (chartElement, chartOuter) {
     let totalY = 0;
     let totalXY = 0;
     let totalXsquared = 0;
-    let { min, max, start, end, slope, yInt } = getChartData(chartElement, chartOuter);
-    let chart = chartOuter.querySelector('.chart');
+    const { min, max, start, end, slope, yInt } = getChartData(chartElement, chartOuter);
+    const chart = chartOuter.querySelector('.chart');
     let slopeWrapper = chartOuter.querySelector('.slope');
     if (!slopeWrapper) {
-        slopeWrapper = document.createElement("div");
+        slopeWrapper = document.createElement('div');
         slopeWrapper.setAttribute('class', 'slope');
         chart.prepend(slopeWrapper);
     }
     Array.from(chart.querySelectorAll('tbody tr')).forEach((tr) => {
         const display = getComputedStyle(tr).display;
-        if (display != "none") {
-            let x = parseFloat(tr.querySelector('td:first-child').textContent);
+        if (display != 'none') {
+            const x = parseFloat(tr.querySelector('td:first-child').textContent);
             let y = 0;
             Array.from(tr.querySelectorAll('td:not(:first-child)')).forEach((td) => {
                 y += parseFloat(td.getAttribute('data-numeric'));
             });
-            let xy = x * y;
-            let xSquared = x * x;
+            const xy = x * y;
+            const xSquared = x * x;
             totalX += x;
             totalY += y;
             totalXY += xy;
@@ -604,12 +650,12 @@ export const createSlope = function (chartElement, chartOuter) {
         }
     });
     // Least squares method (https://www.youtube.com/watch?v=P8hT5nDai6A)
-    let m = slope ? parseFloat(slope) : ((n * totalXY) - (totalX * totalY)) / ((n * totalXsquared) - (totalX * totalX)); // Slope
-    let b = yInt ? parseFloat(yInt) : (totalY - (m * totalX)) / n; // Y intercept
-    let firstY = (m * parseFloat(start)) + b;
-    let lastY = (m * parseFloat(end)) + b;
-    let { percent: firstYPercent } = getValues(firstY, min, max);
-    let { percent: lastYPercent } = getValues(lastY, min, max);
+    const m = slope ? parseFloat(slope) : (n * totalXY - totalX * totalY) / (n * totalXsquared - totalX * totalX); // Slope
+    const b = yInt ? parseFloat(yInt) : (totalY - m * totalX) / n; // Y intercept
+    const firstY = m * parseFloat(start) + b;
+    const lastY = m * parseFloat(end) + b;
+    const { percent: firstYPercent } = getValues(firstY, min, max);
+    const { percent: lastYPercent } = getValues(lastY, min, max);
     slopeWrapper.innerHTML = `<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none"><path fill="none" d="M 0 ${100 - firstYPercent} L 200 ${100 - lastYPercent}" style="--path: path('M 0 100 L 200 100');"></path></svg>`;
 };
 function createKeyTotals(chartElement, chartOuter) {
@@ -627,17 +673,21 @@ function createKeyTotals(chartElement, chartOuter) {
     Array.from(chartOuter.querySelectorAll('.chart__key .key[data-label]')).forEach((key) => {
         if (key.querySelector('.chart__total'))
             key.querySelector('.chart__total').remove();
-        let label = key.getAttribute('data-label');
+        const label = key.getAttribute('data-label');
         let keyTotal = 0;
         Array.from(chartOuter.querySelectorAll(`tbody td[data-label="${label}"]`)).forEach((td) => {
             const value = Number.parseFloat(td.getAttribute('data-numeric'));
             keyTotal += value;
         });
-        let keyPercent = Math.round((keyTotal / chartTotal) * 100);
+        const keyPercent = Math.round((keyTotal / chartTotal) * 100);
         if (chartElement.hasAttribute('data-currency')) {
-            if (chartElement.getAttribute('data-currency') == "GBP") {
+            if (chartElement.getAttribute('data-currency') == 'GBP') {
                 // @ts-ignore
-                keyTotal = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', trailingZeroDisplay: 'stripIfInteger' }).format(keyTotal);
+                keyTotal = new Intl.NumberFormat('en-GB', {
+                    style: 'currency',
+                    currency: 'GBP',
+                    trailingZeroDisplay: 'stripIfInteger',
+                }).format(keyTotal);
             }
         }
         else if (chartElement.hasAttribute('data-total-format')) {