Ability to add a footer row to the DataGrid about highcharts

[peterlaczkorailsware]

Sure, we want to create a dashboard about ad metrics and would like to have a table (among other charts) showing spending and performance stats (like ad spent amount, impressions and click-through rate) per campaign as well as totals on the bottom (or top). The thing is that some of those metrics have an easy grand total (like amount spent or impressions). For others, however, we would need a formula for example CTR is clicks / impressions. So it would need to work with the Math modifiers (as far as I understand we could load the impressions and clicks columns and create a third column using this modifier). Let me know if this makes sense or if you have any questions.

[karolkolodziej]

Thank you both @peterlaczkorailsware @mcmastermind!
This gives us perspective on what you need!

[karolkolodziej]

Hi @mcmastermind!
Thank you for sharing this idea! Right now we are in the process of defining what can be changed/improved in the datagrid so your input is very valuable to us!

To clarify, by footer do you mean something like this:

What would you like to show in the footer?

[peterlaczkorailsware]

Hey @karolkolodziej, I'm not the issue submitter but for us (currently evaluating HighCharts and starting a PoC) something like what you posted would be really valuable.

[karolkolodziej]

Thank you @peterlaczkorailsware for your feedback.
Could you please provide more details on your specific requirements and how you envision this feature working for your use case?

[mcmastermind]

@karolkolodziej, I was able to come up with my own solution using the DataGrid resize event callback to fire a method that iterates over the rendered columns and adds the footer to the DataGrid component. The resize event is used because it fires after the grid is completely rendered and the component is set in Dashboards.boards.

Fortunately, my data is very static numbers, so a straight aggregate works well for me. I also added extra properties (such as prefix) to the column options that I can reference when adding the footer.

This method gets called in the resize event:

const addTotalRowToDataGrid = async evt => {
    const target = evt.target;
    // Wait for element to be available via mutationObserver in waitForElement
    const dataGridContainer = await waitForElement(`#${target.parentElement.id} .highcharts-datagrid-container`);

    // Remove existing footer if present
    dataGridContainer.querySelector('.highcharts-datagrid-footer-container')?.remove();

    const dataGridHeader = dataGridContainer.querySelector('.highcharts-datagrid-header-container'),
      data = target.connector.options.data,
      columnNames = target.connector.options.columnNames,
      columnOpts = target.options.dataGridOptions.columns,
      dataGridFooter = dataGridHeader.cloneNode(true),
      footerCols = dataGridFooter.querySelectorAll('.highcharts-datagrid-column-header');

    dataGridFooter.classList.add('highcharts-datagrid-footer-container');

    for (let i = 0, iLen = footerCols.length; i < iLen; i++) {
      const col = footerCols[i];
      if (i === 0) {
        // Add text to first/header column 
        col.innerText = 'Total';
      } else {
        const prefix = columnOpts[columnNames[i]]?.prefix;
        col.innerText =
          (prefix || '') +
          formatNumber(
            data
              .map(c => c[i])
              .reduce((acc, cur) => {
                return (acc || 0) + (cur || 0);
              })
          );
      }
    }

    dataGridContainer.appendChild(dataGridFooter);
  }

I hope this illustrates what I mean by this enhancement and helps someone currently in a similar scenario.