@iamproperty/components 5.5.0 → 5.5.1-beta-2

package/assets/js/modules/chart.js

@@ -1,151 +1,653 @@
-// @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) => {
+import { ucfirst, unsnake, numberOfDays } from './helpers.js';
+// #region Functions that setup and trigger other functions 
+export const setupChart = (chartElement, chartOuter, tableElement) => {
+    // #region Reset the chart
+    // empty divs to re-populate
+    const chartOptions = chartOuter.querySelector('.chart__options');
+    chartOptions.innerHTML = `<span>Chart Type</span>`;
+    const chartKey = chartOuter.querySelector('.chart__key');
+    chartKey.innerHTML = '';
+    const chartGuidelines = chartOuter.querySelector('.chart__guidelines');
+    chartGuidelines.innerHTML = ``;
+    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(); });
+    // #endregion
+    createTypeSwitcher(chartElement, chartKey, chartOptions);
+    let { 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];
+    if (availableTypes.includes('line')) {
+        createLines(chartElement, chartOuter);
+    }
+    if (availableTypes.includes('pie'))
+        createPies(chartOuter);
+    if (xaxis) {
+        createXaxis(chartElement, chartOuter, xaxis);
+    }
+    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);
+    if (availableTypes.includes('bar') || availableTypes.includes('dumbbell') || availableTypes.includes('responsive'))
+        setLongestLabel(chartOuter);
+    // Event handlers
+    setEventHandlers(chartElement, chartOuter);
+    return true;
+};
+// #endregion
+// #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++) {
+        showData[i].addEventListener('change', function () {
+            if (availableTypes.includes('pie'))
+                createPies(chartOuter);
+            //setupOptionalContent(chartElement,min,max); // TODO: move this to the observer and just update the data attribute
+        });
+    }
+    /* TO DO: do i need?
+    // Update chart type
+    const chartTypes = chartElement.querySelectorAll(':scope > input[type="radio"]');
+    for (var i = 0; i < chartTypes.length; i++) {
+      chartTypes[i].addEventListener('change', function() {
+        //setupOptionalContent(chartElement,min,max); // TODO: move this to the observer and just update the data attribute
+      });
+    }
+    */
+};
+export const setEventObservers = function (chartElement, chartOuter) {
+    if (chartElement.hasAttribute('data-series'))
+        return false;
+    let table = chartElement.querySelector('table');
+    let 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') {
+                newTable.innerHTML = table.innerHTML;
+                setupChart(chartElement, chartOuter, newTable);
+            }
+        }
+        observer.observe(table, { characterData: true, subtree: true });
+        observer2.observe(chartElement, { attributes: true });
+    };
+    const tableUpdated = (mutationList, observer) => {
+        observer.disconnect();
+        observer2.disconnect();
+        for (const mutation of mutationList) {
+            if (mutation.type == "characterData" || (mutation.type == "childList" && mutation.addedNodes.length)) {
+                newTable.innerHTML = table.innerHTML;
+                setupChart(chartElement, chartOuter, newTable);
+            }
+        }
+        observer.observe(table, { characterData: true, subtree: true });
+        observer2.observe(chartElement, { attributes: true });
+    };
+    let observer = new MutationObserver(tableUpdated);
+    let observer2 = new MutationObserver(attributesUpdated);
+    observer.observe(table, { characterData: true, subtree: true });
+    observer2.observe(chartElement, { attributes: true });
+    return true;
+};
+// #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 };
+};
+function getLargestValue(table) {
+    let values = Array.from(table.querySelectorAll('tbody td:not(:first-child)')).map((element) => {
+        let currentValue = String(element.textContent);
+        currentValue = currentValue.replace('£', '');
+        currentValue = currentValue.replace('%', '');
+        currentValue = currentValue.replace(',', '');
+        currentValue = Number.parseFloat(currentValue);
+        return currentValue;
+    });
+    let largetValue = Math.max(...values);
+    // TO DO round to the nearest 10, 100, 1000 and so on
+    return Math.ceil(largetValue);
+}
+const getValues = function (value, min, max, start) {
+    let cleanValue = String(value);
+    cleanValue = cleanValue.replace('£', '');
+    cleanValue = cleanValue.replace('%', '');
+    cleanValue = cleanValue.replace(',', '');
+    cleanValue = Number.parseFloat(cleanValue);
+    let percent = ((cleanValue - min) / (max - min)) * 100;
+    let axis = percent;
+    let bottom = 0;
+    if (start && start != 0) {
+        bottom = ((start - min) / (max - min)) * 100;
+    }
+    // If the value is negative the position below the 0 line
+    if (min < 0) {
+        bottom = Math.abs(((min) / (max - min)) * 100);
+        if (cleanValue < 0) {
+            percent = bottom - percent;
+            bottom = bottom - percent;
+            axis = bottom;
+        }
+        else {
+            percent = percent - bottom;
+            axis = percent + bottom;
+        }
+    }
+    return { percent, axis, bottom };
+};
+function getCoordinatesForPercent(percent, pieCount) {
+    // This moves the start point to the top middle point like a clock
+    if (pieCount > 1)
+        percent = percent - 0.25;
+    const x = Math.cos(2 * Math.PI * percent);
+    const y = Math.sin(2 * Math.PI * percent);
+    return [x * 100, y * 100];
+}
+// #endregion
+// #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;
+    // Change how gant charts are configured as this just seems bizarre now
+    if (increment == "days") {
+        max = numberOfDays(min, max);
+        min = 0;
+        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 : '';
-        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;
+        let coverageStart = 100;
+        let coverageEnd = 0;
+        let cumulativeComparison = 0;
+        // For waffle charts
+        let previousAfter = 0;
+        let rowPosition = 0;
+        let totalPercent = 0;
+        // Set the data numeric value if not set
+        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 (dates[1]) {
+                    value = numberOfDays(dates[0], dates[1]);
+                    start = numberOfDays(startDay, dates[0]) - 1;
+                }
+            }
+            td.setAttribute('data-numeric', value);
+            td.setAttribute('data-start', start);
+        });
+        // Set the data label value if not set
+        Array.from(tr.querySelectorAll('td:not([data-label])')).forEach((td, index) => {
+            td.setAttribute('data-label', table.querySelectorAll('thead th')[index].textContent);
+        });
+        if (tr.querySelector('[data-label="Total"]')) {
+            tr.setAttribute('data-total', tr.querySelector('[data-label="Total"][data-numeric]').getAttribute('data-numeric'));
+        }
+        if (tr.querySelector('[data-label="Min"]')) {
+            tr.setAttribute('data-min', tr.querySelector('[data-label="Min"][data-numeric]').getAttribute('data-numeric'));
+        }
+        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')) {
+            let total = 0;
+            Array.from(tr.querySelectorAll('td[data-numeric]:not(:first-child)')).forEach((td) => {
+                let 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;
+        // 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);
+            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;
+            if (display == 'none')
+                return;
             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;
+            const content = td.innerHTML;
+            const value = Number.parseFloat(td.getAttribute('data-numeric'));
+            const start = Number.parseFloat(td.getAttribute('data-start'));
+            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);
+                td.setAttribute('data-percent', percent);
+                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;
+                    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));
+                    td.style.setProperty('--order', `${order}%`);
+                }
+                if (chartType == "dumbbell") {
+                    if (percent < coverageStart) {
+                        tr.style.setProperty('--coverage-start', `${percent}%`);
+                        coverageStart = percent;
+                    }
+                    if (percent > coverageEnd) {
+                        tr.style.setProperty('--coverage-end', `${percent}%`);
+                        coverageEnd = percent;
+                    }
                 }
+                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;
+                    td.style.setProperty('--rowPosition', `${rowPosition}%`);
+                    td.style.setProperty('--rowHeight', `${rowHeight}%`);
+                    td.style.setProperty('--rowWidth', `${rowWidth}%`);
+                    td.style.setProperty('--maxWidth', `${maxWidth}%`);
+                    // 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);
+                        td.style.setProperty('--beforeWidth', `${beforeWidth}%`);
+                        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;
+                    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);
+                    else if (percentMinusAfter < 10)
+                        previousAfter = percentMinusAfter;
+                    else
+                        previousAfter = afterWidth / 10;
+                    // Add to the row position so that the new row is shoved up if needed
+                    rowPosition += (rowWidth > 0 ? rowHeight : 0) + (afterWidth > 0 ? 10 : 0);
+                }
+            }
+            // 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;
+                if (chartElement.querySelector(`.key[data-label="${label}"]`))
+                    chartElement.querySelector(`.key[data-label="${label}"]`).setAttribute('data-total', keyTotal + value);
+                chartElement.setAttribute('data-total', chartTotal + value);
             }
-            td.setAttribute("style", `--bottom:${bottom}%;--percent:${percent}%;`);
-            td.innerHTML = `<span data-group="${group}" data-label="${label}">${content}</span>`;
         });
+        // 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;
+            tr.setAttribute('style', `--position:${position}%;`);
+        }
     });
-}
-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 setLongestLabel = function (chartOuter) {
+    let chartWrapper = chartOuter.querySelector('.chart__wrapper');
+    let 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)
+            longestLabel = td.textContent;
     });
+    chartWrapper.setAttribute('data-longest-label', longestLabel);
+    // set the longest data set attr so that the bar chart knows what margin to set on the left
+    let longestSet = '';
+    Array.from(table.querySelectorAll('thead tr th')).forEach((td) => {
+        if (td.textContent.length > longestSet.length)
+            longestSet = td.textContent;
+    });
+    chartWrapper.setAttribute('data-set-label', longestSet);
 };
-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>`;
+// #endregion
+// #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(',') : [];
+    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(''));
+        chartOptions.insertAdjacentHTML('beforeend', availableTypes.map((type) => `<label for="${chartID}-${type}">${type}</label>`).join(''));
+    }
 };
-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 (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'));
+    headings.forEach((arrayElement, index) => {
+        if (index != 0) {
+            previousInput = createChartKeyItem(chartID, index, arrayElement.textContent, chartKey, chartOuter, previousInput);
+        }
+        if (index == 50) {
+            headings.length = index + 1;
+        }
+    });
+    return true;
 };
-function getCoordinatesForPercent(percent) {
-    const x = Math.cos(2 * Math.PI * percent);
-    const y = Math.sin(2 * Math.PI * percent);
-    return [x * 100, y * 100];
+function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previousInput) {
+    let input = document.createElement('input');
+    input.setAttribute('name', `${chartID}-dataset-${index}`);
+    input.setAttribute('id', `${chartID}-dataset-${index}`);
+    input.setAttribute('checked', `checked`);
+    input.setAttribute('type', `checkbox`);
+    if (index == 1)
+        chartOuter.prepend(input);
+    else
+        chartOuter.insertBefore(input, previousInput.nextSibling);
+    previousInput = input;
+    let label = document.createElement('label');
+    label.setAttribute('class', `key btn btn-action`);
+    label.setAttribute('for', `${chartID}-dataset-${index}`);
+    label.setAttribute('data-label', `${text}`);
+    label.innerHTML = `${text}`;
+    chartKey.append(label);
+    return previousInput;
 }
-export const createPies = function (chartElement) {
+export const createChartGuidelines = function (chartElement, chartOuter, chartGuidelines) {
+    let { min, max, yaxis, increment, guidelines } = getChartData(chartElement, chartOuter);
+    if (guidelines.length)
+        yaxis = guidelines;
+    let startDay = min;
+    if (increment == "days") {
+        max = numberOfDays(min, max);
+        min = 0;
+    }
+    if (!chartGuidelines) {
+        chartGuidelines = document.createElement('div');
+        chartGuidelines.setAttribute('class', 'chart__guidelines');
+    }
+    chartGuidelines.innerHTML = '';
+    for (var i = 0; i < yaxis.length; i++) {
+        let value = parseFloat(yaxis[i].replace('£', '').replace('%', '').replace(',', ''));
+        if (increment == "days") {
+            value = numberOfDays(startDay, yaxis[i]) - 1;
+        }
+        let { 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") {
+        max = numberOfDays(min, max);
+        min = 0;
+    }
+    if (!chartYaxis) {
+        chartYaxis = document.createElement('div');
+        chartYaxis.setAttribute('class', 'chart__yaxis');
+    }
+    chartYaxis.innerHTML = '';
+    for (var i = 0; i < yaxis.length; i++) {
+        let value = parseFloat(yaxis[i].replace('£', '').replace('%', ''));
+        if (increment == "days") {
+            value = numberOfDays(startDay, yaxis[i]);
+        }
+        let { 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);
+    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;
+            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');
+    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;
+    let spacer = 200 / (itemCount - 1);
+    let spacerIndent = 0;
+    if (chartType == "combo") {
+        spacer = 200 / (itemCount);
+        spacerIndent = spacer / 2;
+    }
+    // Creates the lines array from the fields array
+    for (let i = 0; i < linesCount; i++) {
+        lines[i] = '';
+        animatelines[i] = '';
+        commands[i] = 'M';
+    }
+    // populate the lines array from the items array
+    let counter = 0;
+    Array.from(chartOuter.querySelectorAll('tbody tr')).forEach((item) => {
+        const display = getComputedStyle(item).display;
+        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);
+                    if (!Number.isNaN(axis)) {
+                        lines[subindex] += `${commands[subindex]} ${(spacerIndent) + (spacer * counter)} ${100 - axis} `;
+                        animatelines[subindex] += `${commands[subindex]} ${spacer * counter} 100 `;
+                        commands[subindex] = 'L';
+                    }
+                    else {
+                        commands[subindex] = 'M';
+                    }
+                }
+            });
+            counter++;
+        }
+    });
+    lines.forEach((line, index) => {
+        returnString += `
+<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none">
+  <path fill="none" d="${line}" style="--path: path('${animatelines[index]}');"></path>
+</svg>`;
+    });
+    linesWrapper.innerHTML = returnString;
+};
+export const createPies = function (chartOuter) {
     let returnString = '';
-    let pieWrapper = chartElement.querySelector('.pies');
-    Array.from(chartElement.querySelectorAll('tbody tr')).forEach((item, index) => {
+    let chartInner = chartOuter.querySelector('.chart');
+    let pieWrapper = chartOuter.querySelector('.pies');
+    if (!pieWrapper) {
+        pieWrapper = document.createElement("div");
+        pieWrapper.setAttribute('class', 'pies');
+        chartInner.append(pieWrapper);
+    }
+    Array.from(chartInner.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');
+        let pieCount = 0;
+        // Work out the total amount
+        Array.from(item.querySelectorAll('td')).forEach((td, subindex) => {
+            const display = getComputedStyle(td).display;
+            if (subindex != 0 && display != 'none') {
+                let value = td.getAttribute('data-numeric');
                 value = value.replace('£', '');
                 value = value.replace('%', '');
+                value = value.replace(',', '');
                 value = Number.parseInt(value);
                 total += value;
+                pieCount++;
             }
         });
-        Array.from(item.querySelectorAll('td')).forEach((cell, subindex) => {
-            if (subindex != 0) {
-                let value = cell.getAttribute('data-numeric');
+        // Create the paths
+        Array.from(item.querySelectorAll('td')).forEach((td, subindex) => {
+            const display = getComputedStyle(td).display;
+            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;" : "";
                 value = value.replace('£', '');
                 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 [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 pathData = [
-                    `M ${startX} ${startY}`,
-                    `A 100 100 0 ${largeArcFlag} 1 ${endX} ${endY}`,
+                    `M 0 0`,
+                    `L ${(startX ? startX.toFixed(0) : 0)} ${(startY ? startY.toFixed(0) : 0)}`,
+                    `A 100 100 0 ${largeArcFlag} 1 ${(endX ? endX.toFixed(0) : 0)} ${(endY ? endY.toFixed(0) : 0)}`,
                     `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>`;
+                paths += `<path d="${pathData}" style="${td.getAttribute('style')} --path-index: ${subindex};${hide}"></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>`;
+                // each slice starts where the last slice ended, so keep a cumulative percent
+                if (display != 'none')
+                    cumulativePercent += percent;
             }
         });
-        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>`;
+        returnString += `<div class="pie"><svg viewBox="-105 -105 210 210" preserveAspectRatio="none" style="--row-index: ${index + 1};">${paths}${tooltips}</svg><div><span class="h5 mb-0">${title}</span></div></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] = '';
+export const createSlope = function (chartElement, chartOuter) {
+    let n = 0;
+    let totalX = 0;
+    let totalY = 0;
+    let totalXY = 0;
+    let totalXsquared = 0;
+    let { min, max, start, end, slope, yInt } = getChartData(chartElement, chartOuter);
+    let chart = chartOuter.querySelector('.chart');
+    let slopeWrapper = chartOuter.querySelector('.slope');
+    if (!slopeWrapper) {
+        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);
+            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;
+            totalX += x;
+            totalY += y;
+            totalXY += xy;
+            totalXsquared += xSquared;
+            n++;
         }
     });
-    // 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} `;
-            }
-        });
+    // 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);
+    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) {
+    let chartTotal = 0;
+    Array.from(chartOuter.querySelectorAll('tbody tr:not([data-total]) td[data-numeric]:not([data-label="Min"]):not([data-label="Max"]):not(:first-child)')).forEach((td) => {
+        const value = Number.parseFloat(td.getAttribute('data-numeric'));
+        chartTotal += value;
     });
-    lines.forEach((line, index) => {
-        returnString += `
-<svg viewBox="0 0 200 100" class="line" preserveAspectRatio="none">
-  <path fill="none" d="${line}"></path>
-</svg>`;
+    // Get row totals already worked out
+    Array.from(chartOuter.querySelectorAll('tbody tr[data-total]')).forEach((tr) => {
+        const value = Number.parseFloat(tr.getAttribute('data-total'));
+        chartTotal += value;
     });
-    linesWrapper.innerHTML = returnString;
-};
-export default chart;
+    chartElement.setAttribute('data-total', chartTotal);
+    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');
+        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);
+        if (chartElement.hasAttribute('data-currency')) {
+            if (chartElement.getAttribute('data-currency') == "GBP") {
+                // @ts-ignore
+                keyTotal = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', trailingZeroDisplay: 'stripIfInteger' }).format(keyTotal);
+            }
+        }
+        else if (chartElement.hasAttribute('data-total-format')) {
+            keyTotal = chartElement.getAttribute('data-total-format').replace('{i}', keyTotal);
+        }
+        else {
+            keyTotal = new Intl.NumberFormat('en-GB').format(keyTotal);
+        }
+        key.innerHTML += `<span class="chart__total"><span class="chart__total__number"><span class="visually-hidden">Total: </span>${keyTotal}</span><span class="chart__total__percent"><span class="visually-hidden">Total percent: </span>${keyPercent}%</span></span>`;
+    });
+}
+// #endregion
+export default setupChart;