@iamproperty/components 5.7.1-beta6 → 6.1.0--beta

package/assets/js/modules/chart.module.js

@@ -1,4 +1,3 @@
-import { numberOfDays } from './helpers.js';
 // #region Functions that setup and trigger other functions 
 export const addClasses = (chartElement, chartOuter) => {
     // add colour classes
@@ -28,13 +27,13 @@ export const setupChart = (chartElement, chartOuter, tableElement) => {
     // Remove old input fields
     Array.from(chartOuter.querySelectorAll(':scope > input[type="checkbox"],:scope > input[type="radio"]')).map((element) => { element.remove(); });
     // #endregion
-    let { xaxis } = getChartData(chartElement, chartOuter);
-    setCellData(chartElement, chartOuter, tableElement);
+    let { xaxis } = getChartData(chartElement);
+    setCellData(chartElement, tableElement);
     createChartKey(chartOuter, tableElement, chartKey);
-    createChartGuidelines(chartElement, chartOuter, chartGuidelines);
-    createChartYaxis(chartElement, chartOuter, chartYaxis);
+    createChartGuidelines(chartElement, chartGuidelines);
+    createChartYaxis(chartElement, chartYaxis);
     if (xaxis) {
-        createXaxis(chartElement, chartOuter, xaxis);
+        createXaxis(chartOuter);
     }
     return true;
 };
@@ -78,7 +77,7 @@ export const setEventListener = function (chartElement, chartOuter) {
                 label.setAttribute('part', 'key-unchecked');
         });
         shadowTable.innerHTML = table.innerHTML;
-        setCellData(chartElement, chartOuter, shadowTable);
+        setCellData(chartElement, shadowTable);
     });
 };
 export const setEventObservers = function (chartElement, chartOuter) {
@@ -88,7 +87,7 @@ export const setEventObservers = function (chartElement, chartOuter) {
         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.type === 'attributes') {
                 shadowTable.innerHTML = table.innerHTML;
                 setupChart(chartElement, chartOuter, shadowTable);
             }
@@ -116,22 +115,22 @@ export const setEventObservers = function (chartElement, chartOuter) {
 };
 // #endregion
 // #region GET functions
-export const getChartData = function (chartElement, chartOuter) {
-    let table = chartOuter.querySelector('.chart__wrapper table');
+export const getChartData = function (chartElement) {
+    let table = chartElement.shadowRoot.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(chartElement, table);
-    let type = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
+    //let type:string = 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 targets:any = chartElement.hasAttribute('data-targets') ? JSON.parse(chartElement.getAttribute('data-targets')) : null;
+    //let events:any = 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(chartElement, 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 };
+    //let increment = chartElement.hasAttribute('data-increment') ? chartElement.getAttribute('data-increment'): null;
+    //let start:any = chartElement.hasAttribute('data-start') ? chartElement.getAttribute('data-start') : 0;
+    //let end:any = chartElement.hasAttribute('data-end') ? chartElement.getAttribute('data-end') : getLargestValue(chartElement,table); // TODO - get largest value from the data-xaxis
+    //let slope:any = chartElement.hasAttribute('data-slope') ? chartElement.getAttribute('data-slope') : null;
+    //let yInt:any = chartElement.hasAttribute('data-yint') ? chartElement.getAttribute('data-yint') : null;
+    return { min, max, yaxis, xaxis, guidelines };
 };
 function getLargestValue(chartElement, table) {
     const selector = chartElement.classList.contains('chart--stacked') ? 'tbody tr' : 'tbody td:not(:first-child)';
@@ -172,7 +171,7 @@ const getValues = function (value, min, max, start) {
 };
 // #endregion
 // #region SET functions - set data attributes and classes
-export const setCellData = function (chartElement, chartOuter, table) {
+export const setCellData = function (chartElement, table) {
     Array.from(table.querySelectorAll('tbody tr')).forEach((tr) => {
         let rowValue = 0;
         // Set the data numeric value if not set
@@ -186,7 +185,7 @@ export const setCellData = function (chartElement, chartOuter, table) {
         });
         tr.setAttribute('data-numeric', rowValue);
     });
-    let { min, max } = getChartData(chartElement, chartOuter);
+    let { min, max } = getChartData(chartElement);
     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').textContent : '';
         tr.setAttribute('part', 'group');
@@ -201,19 +200,6 @@ export const setCellData = function (chartElement, chartOuter, table) {
             if (tr.querySelectorAll('td').length > 2)
                 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'));
-        }
-    
-          */
         let rowMin = tr.hasAttribute('data-min') ? tr.getAttribute('data-min') : min;
         let rowMax = tr.hasAttribute('data-max') ? tr.getAttribute('data-max') : max;
         if (rowMin < 0) {
@@ -303,14 +289,10 @@ function createChartKeyItem(chartID, index, text, chartKey, chartOuter, previous
     chartKey.append(label);
     return previousInput;
 }
-export const createChartGuidelines = function (chartElement, chartOuter, chartGuidelines) {
-    let { min, max, yaxis, increment, guidelines } = getChartData(chartElement, chartOuter);
+export const createChartGuidelines = function (chartElement, chartGuidelines) {
+    let { min, max, yaxis, guidelines } = getChartData(chartElement);
     if (!guidelines.length)
         guidelines = yaxis;
-    if (increment == "days") {
-        max = numberOfDays(min, max);
-        min = 0;
-    }
     chartGuidelines.innerHTML = '';
     for (var i = 0; i < guidelines.length; i++) {
         let value = parseFloat(guidelines[i].replace('£', '').replace('%', '').replace(',', ''));
@@ -318,39 +300,22 @@ export const createChartGuidelines = function (chartElement, chartOuter, chartGu
         chartGuidelines.innerHTML += `<div class="guideline" style="--percent:${axis}%;">${yaxis.indexOf(guidelines[i]) != -1 ? `<span>${guidelines[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;
-    }
+export const createChartYaxis = function (chartElement, chartYaxis) {
+    let { min, max, yaxis } = getChartData(chartElement);
     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) {
+export const createXaxis = function (chartOuter) {
     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 createTooltips = function (chartOuter) {

package/assets/js/modules/dialogs.js

@@ -1,5 +1,4 @@
 // @ts-nocheck
-import { createEmbed } from "./youtubevideo.js";
 const extendDialogs = (body) => {
     Array.from(body.querySelectorAll('dialog[open]')).forEach((dialog, index) => {
         let parent = dialog.closest('.dialog__wrapper');
@@ -169,11 +168,6 @@ const extendDialogs = (body) => {
     return null;
 };
 export const createDialog = (dialog) => {
-    // Create the video embed
-    let videoButton = dialog.querySelector('.youtube-embed a');
-    if (videoButton) {
-        createEmbed(videoButton);
-    }
     // Multi dialog
     if (dialog.classList.contains('dialog--multi') && !dialog.querySelector(':scope > .steps')) {
         createMultiFormDialog(dialog);

package/assets/js/modules/table.js

@@ -546,7 +546,7 @@ export const filterTable = (table, form, wrapper) => {
         }
     });
     // Work out what to display after pagination
-    Array.from(table.querySelectorAll('tbody tr:not(.filtered')).forEach((row, index) => {
+    Array.from(table.querySelectorAll('tbody tr:not(.filtered)')).forEach((row, index) => {
         matched++;
         row.classList.add('filtered--matched');
         // pagination bit