The charts each have drilldowns within them and extra fields to make the filtering functional. So the KPI boxes can't just take the "last value" from the window of data.
I have the following functional that works where it is going and finding the value in the html and updating it, but I don't love this approach as it is dependent on specific class naming.
All of my other filtering - I am using the highcharts.charts array to perform the filters, but I cannot do that with this. Are KPI values rendering in some other array? I am pretty new to highcharts/js so trying to muddle my way through. This is the last piece I have to figure out.
Code: Select all
function updateKpiElement(kpiConfig, selectedFilters) {
const dataArray = window[kpiConfig.id];
if (Array.isArray(dataArray)) {
const filteredData = filterData(dataArray, selectedFilters);
const sumOfYs = calculateSumForLastEntry(filteredData);
window[`lastValue_${kpiConfig.id}`] = sumOfYs;
const kpiValueElement = document.querySelector(
`#${kpiConfig.cell} .highcharts-dashboards-component-kpi-value`
);
if (kpiValueElement) {
kpiValueElement.innerText = sumOfYs.toLocaleString();
console.log(
`Updated KPI element for cell ${kpiConfig.cell} with value: ${sumOfYs}`
);
} else {
console.error(`KPI value element not found for cell ${kpiConfig.cell}`);
}
} else {
console.log(
`Skipping KPI element for cell ${kpiConfig.cell} as data array is not found or not an array.`
);
}
}
