@iamproperty/components 5.7.1-beta4 → 5.7.1-beta6

package/assets/ts/modules/chart.module.ts

@@ -2,17 +2,24 @@ import { numberOfDays } from './helpers'
 
 // #region Functions that setup and trigger other functions 
 
-export const addClasses = (chartElement:any) => {
+export const addClasses = (chartElement:any, chartOuter:any) => {
 
   // add colour classes
   for (let i = 1; i <= 10; i++) {
     if(chartElement.hasAttribute(`data-colour-${i}`)){
 
       let colour = chartElement.getAttribute(`data-colour-${i}`);
-
       chartElement.style.setProperty(`--chart-colour-${i}`, `var(--chart-colour-${colour})`);
       chartElement.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);
     }
+
+    Array.from(chartOuter.querySelectorAll(`[data-colour-${i}]`)).forEach((element:HTMLElement) => {
+      
+      let colour = element.getAttribute(`data-colour-${i}`);
+      element.style.setProperty(`--chart-colour-${i}-set`, `var(--chart-colour-${colour})`);
+      element.style.setProperty(`--chart-colour-${i}-hover`, `var(--chart-colour-${colour}-hover)`);
+    });
+
   }
 
   return true;
@@ -53,7 +60,7 @@ export const setupChart = (chartElement:any,chartOuter:any,tableElement:any) =>
 // #endregion
 
 // #region Event handlers and observers
-export const setEventListener = function(chartOuter:any) {
+export const setEventListener = function(chartElement:any, chartOuter:any) {
 
   let chart = chartOuter.querySelector('.chart');
   chart.addEventListener('mousemove', (event:any) => {
@@ -81,15 +88,35 @@ export const setEventListener = function(chartOuter:any) {
       label.setAttribute('part','key-unchecked');
   });
 
-  chartOuter.addEventListener('change', function(){
+  
+  let table = chartElement.querySelector('table');
+  let shadowTable = chartOuter.querySelector('table');
+
+  chartOuter.addEventListener('change', function(event:any){
+
+    let eventTarget = event.target;
+
+    const customEvent = new CustomEvent("view-change", {  detail: { 
+                                                            'data-dataset': eventTarget.getAttribute('data-dataset'), 
+                                                            'label': eventTarget.getAttribute('data-label'),
+                                                            'checked': eventTarget.checked
+                                                          }
+                                                        });
+
+    chartElement.dispatchEvent(customEvent);
 
     Array.from(labels).forEach((label:HTMLElement) => {
       
-      if(chartOuter.querySelector(`input#${label.getAttribute('for')}`).checked)
+      if(chartOuter.querySelector(`input#${label.getAttribute('for')}`)?.checked)
         label.setAttribute('part','key-checked');
       else
         label.setAttribute('part','key-unchecked');
     });
+
+    
+    shadowTable.innerHTML = table.innerHTML;
+    setCellData(chartElement,chartOuter,shadowTable);
+
   });
 }
 
@@ -152,7 +179,7 @@ export const getChartData = function(chartElement:any,chartOuter:any){
   let table = chartOuter.querySelector('.chart__wrapper table');
 
   let min:any = chartElement.hasAttribute('data-min') ? chartElement.getAttribute('data-min') : 0;
-  let max:any = chartElement.hasAttribute('data-max') ? chartElement.getAttribute('data-max') : getLargestValue(table);
+  let max:any = chartElement.hasAttribute('data-max') ? chartElement.getAttribute('data-max') : getLargestValue(chartElement,table);
   let type:string = chartElement.hasAttribute('data-type') ? chartElement.getAttribute('data-type') : 'column';
   let yaxis:any = chartElement.hasAttribute('data-yaxis') ? chartElement.getAttribute('data-yaxis').split(',') : [];
   let guidelines:any = chartElement.hasAttribute('data-guidelines') ? chartElement.getAttribute('data-guidelines').split(',') : [];
@@ -162,7 +189,7 @@ export const getChartData = function(chartElement:any,chartOuter:any){
   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(table); // TODO - get largest value from the data-xaxis
+  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;
@@ -171,23 +198,21 @@ export const getChartData = function(chartElement:any,chartOuter:any){
   return {min,max,type,yaxis,targets,events,xaxis,increment,start,end,slope,yInt,guidelines};
 }
 
-function getLargestValue(table:any){
+function getLargestValue(chartElement:any,table:any){
+
+  const selector = chartElement.classList.contains('chart--stacked') ? 'tbody tr' : 'tbody td:not(:first-child)';
 
-  let values = Array.from(table.querySelectorAll('tbody td:not(:first-child)')).map((element: any) => {
+  let values = Array.from(table.querySelectorAll(selector)).map((element: any) => {
 
-    let currentValue:string|number = String(element.textContent);
-    currentValue = currentValue.replace('£','');
-    currentValue = currentValue.replace('%','');
-    currentValue = currentValue.replace(',','');
-    currentValue = Number.parseFloat(currentValue);
+    let currentValue = element.getAttribute('data-numeric');
 
     return currentValue;
-  })
+  });
 
-  let largetValue:number = Math.max(...values);
+  let largestValue:number = Math.max(...values);
 
   // TO DO round to the nearest 10, 100, 1000 and so on
-  return Math.ceil(largetValue);
+  return Math.ceil(largestValue);
 }
 
 const getValues = function(value:number,min:any,max:any,start?:number){
@@ -229,10 +254,27 @@ const getValues = function(value:number,min:any,max:any,start?:number){
 // #region SET functions - set data attributes and classes
 export const setCellData = function(chartElement:any,chartOuter:any,table:any){
   
-  let {min, max} = getChartData(chartElement,chartOuter);
+  Array.from(table.querySelectorAll('tbody tr')).forEach((tr:any) => {
 
-  let increment = chartElement.getAttribute('data-increment');
-  let startDay = min;
+    let rowValue = 0;
+    // Set the data numeric value if not set
+    Array.from(tr.querySelectorAll('td:not(:first-child)')).forEach((td:any) => {
+
+      let value = parseFloat(td.textContent.replace('£','').replace('%','').replace(',',''));
+    
+      td.setAttribute('data-numeric',value);
+      td.setAttribute('data-value',td.textContent);
+
+      let display = getComputedStyle(td).display;
+
+      if(display != 'none')
+        rowValue += value;
+    });
+
+    tr.setAttribute('data-numeric',rowValue);
+  });
+
+  let {min, max} = getChartData(chartElement,chartOuter);
   
   Array.from(table.querySelectorAll('tbody tr')).forEach((tr:any, index) => {
 
@@ -240,24 +282,10 @@ export const setCellData = function(chartElement:any,chartOuter:any,table:any){
 
     tr.setAttribute('part','group');
 
-    // Set the data numeric value if not set
-    Array.from(tr.querySelectorAll('td:not([data-numeric]):not(:first-child)')).forEach((td:any) => {
-
-      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-value',td.textContent);
-      td.setAttribute('data-start',start);
-    });
+    let percent = ((tr.getAttribute('data-numeric') - min)/(max - min)) * 100;
+
+    tr.style.setProperty('--percent',`${percent}%`)
 
     // Set the data label value if not set
     Array.from(tr.querySelectorAll('td:not([data-label])')).forEach((td:any, index) => {
@@ -385,6 +413,8 @@ function createChartKeyItem(chartID:string,index:number,text:Array<string>,chart
   let input = document.createElement('input');
   input.setAttribute('name',`${chartID}-dataset-${index}`);
   input.setAttribute('id',`${chartID}-dataset-${index}`);
+  input.setAttribute('data-dataset',`${index}`);
+  input.setAttribute('data-label',`${text}`);
   input.checked = true;
   input.setAttribute('type',`checkbox`);
   

package/dist/components.es.js

@@ -67,7 +67,7 @@ const Ra = /* @__PURE__ */ m(U, [["render", G]]), J = (t) => t.charAt(0).toUpper
   },
   created() {
     this.$nextTick(function() {
-      import("./table.component.min-7e6d8daa.mjs").then((t) => {
+      import("./table.component.min-9853d2c5.mjs").then((t) => {
         window.customElements.get("iam-table") || window.customElements.define("iam-table", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -453,7 +453,7 @@ const N = /* @__PURE__ */ m(ne, [["render", Se]]), xe = {
   },
   created() {
     this.$nextTick(function() {
-      import("./fileupload.component.min-c3c1e155.mjs").then((t) => {
+      import("./fileupload.component.min-82035493.mjs").then((t) => {
         window.customElements.get("iam-fileupload") || window.customElements.define("iam-fileupload", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -483,7 +483,7 @@ const qe = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./accordion.component.min-eb962f3b.mjs").then((t) => {
+      import("./accordion.component.min-768b3be9.mjs").then((t) => {
         window.customElements.get("iam-accordion") || window.customElements.define("iam-accordion", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -592,7 +592,7 @@ const Va = /* @__PURE__ */ m(Ne, [["render", Fe]]), ze = {
   name: "Card",
   created() {
     this.$nextTick(function() {
-      import("./card.component.min-71ce1025.mjs").then((t) => {
+      import("./card.component.min-c4e53d1e.mjs").then((t) => {
         window.customElements.get("iam-card") || window.customElements.define("iam-card", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -623,7 +623,7 @@ const Fa = /* @__PURE__ */ m(ze, [["render", Be]]), Oe = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./carousel.component.min-50867178.mjs").then((t) => {
+      import("./carousel.component.min-a5083bec.mjs").then((t) => {
         window.customElements.get("iam-carousel") || window.customElements.define("iam-carousel", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -652,7 +652,7 @@ const za = /* @__PURE__ */ m(Oe, [["render", We]]), Ke = {
   },
   mounted() {
     this.$nextTick(function() {
-      import("./header.component.min-62691ae5.mjs").then((t) => {
+      import("./header.component.min-2a524d9d.mjs").then((t) => {
         window.customElements.get("iam-header") || window.customElements.define("iam-header", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1048,7 +1048,7 @@ const Wa = /* @__PURE__ */ m(_t, [["render", Ht]]), Mt = {
   name: "Nav",
   mounted() {
     this.$nextTick(function() {
-      import("./nav.component.min-5fc49410.mjs").then((t) => {
+      import("./nav.component.min-35f8fe36.mjs").then((t) => {
         window.customElements.get("iam-nav") || window.customElements.define("iam-nav", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1168,7 +1168,7 @@ const Zt = {
   name: "Tabs",
   created() {
     this.$nextTick(function() {
-      import("./tabs.component.min-a87a5a3a.mjs").then((t) => {
+      import("./tabs.component.min-58743be6.mjs").then((t) => {
         window.customElements.get("iam-tabs") || window.customElements.define("iam-tabs", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1315,7 +1315,7 @@ function ha(t, a, e, i, r, s) {
 }
 const es = /* @__PURE__ */ m(pa, [["render", ha]]);
 /*!
-  * iamKey v5.7.1-beta4
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */
 function fa(t, a) {
@@ -1485,7 +1485,7 @@ const as = /* @__PURE__ */ m(ka, [["render", Aa]]), La = {
   props: {},
   mounted() {
     this.$nextTick(function() {
-      import("./actionbar.component.min-5cf5753f.mjs").then((t) => {
+      import("./actionbar.component.min-d141c9b1.mjs").then((t) => {
         window.customElements.get("iam-actionbar") || window.customElements.define("iam-actionbar", t.default);
       }).catch((t) => {
         console.log(t.message);
@@ -1500,7 +1500,7 @@ function Sa(t, a, e, i, r, s) {
 }
 const ss = /* @__PURE__ */ m(La, [["render", Sa]]);
 /*!
-  * iamKey v5.7.1-beta4
+  * iamKey v5.7.1-beta6
   * Copyright 2022-2024 iamproperty
   */
 class R extends HTMLElement {