Components in aggregated rows

Hey everyone, I am looking for a way to get agSparklineCellRenderer rendered in an aggregated AG Grid. I have tried a few things, but to no avail. Also, I couldn’t find an example of what I’m after on either the AG Grid or Dash websites.

In brief, I have a dataset like this:

rowData = [
  { columnA: 'A', columnB: 'B', sparklineValues: 2 },
  { columnA: 'A', columnB: 'B', sparklineValues: 3 },
  { columnA: 'A', columnB: 'C', sparklineValues: 3 },
  { columnA: 'A', columnB: 'C', sparklineValues: 4 },
]

I am grouping the Column A and Column B columns and would like to see the sparkline chart rendered in the cells of the sparklineValues column.

columnDefs = [
    {"headerName": "Column A", "field": "columnA", "rowGroup": True, "hide": True},
    {"headerName": "Column B", "field": "columnB", "rowGroup": True, "hide": True},
    {
        "headerName": "Sparkline",
        "field": "sparklineValues",
        "cellRenderer": "agSparklineCellRenderer",
        "cellRendererParams": {"function": "sparklineCellRenderer(params)" },
        "aggFunc": "sum", 
        "valueGetter": {"function": "[params.data['sparklineValues']]"} #As I need to return a list for the sparkline component
    },
]

ag-grid.js

dagfuncs.sparklineCellRenderer = (params) => {
        return {
        "sparklineOptions": {
          "type": "bar",
          "stroke": "#91cc75",
          "highlightStyle": {
            "fill": "#fac858",
          },
          "valueAxisDomain": [-30, 30],
          "paddingOuter": 0,
          "padding": {
            "top": 0,
            "bottom": 0,
          },
          "label": {
                    "enabled": true,
                    "fontWeight": "normal",
                    "fontSize": 14,
                    "placement": "insideEnd",
          },
          formatter: (params) => {
            const { yValue, highlighted } = params;
              if (highlighted) {
                return;
              }
              return {
                  fill: yValue < 0 ? "#F9CACA" : "#C8ECD7",
              };
            }
        },
     }
}

I would really appreciate any input that can help me with this or anything related.

Cheers,
Adriana Cavalcanti

Hello @Drii,

Your function for the valueGetter should take into account if it is grouped or not.

I’m not sure what value you want to show if it is grouped.

1 Like

Hi @jinnyzor ,

Thank you for your reply.

I thought the same, but it doesn’t seem to work. If I just set valueGetter to multiply by 100 without using cellRenderer, it works fine. However, when I try converting the total return (since the column is aggregated by sum) into a list, it doesn’t work.

Do you know how I can transform the result of a sum into a list? I think this might be what’s preventing agSparklineCellRenderer from rendering properly.

This is a really poor draft of what I was expecting:

Cheers

You just want to sum the values?

Yes. But they should be rendered as a sparkline.

Sparkline is enterprise only, and all you are doing is passing a single value.

Can you please provide a full example of what you are trying to do?

Hi! I do have Enterprise License.

They are single values that will be summarized in the top-level row. As a standard sum in row grouping, I wanted to render them as a sparkline (bar chart) instead of rendering them as a total.

        import dash_ag_grid as dag

        rowData = [
            {'columnA': 'A', 'columnB': 'B', 'sparklineValues': 2},
            {'columnA': 'A', 'columnB': 'B', 'sparklineValues': 3},
            {'columnA': 'A', 'columnB': 'C', 'sparklineValues': 3},
            {'columnA': 'A', 'columnB': 'C', 'sparklineValues': 4},
        ]

        columnDefs = [
            {"headerName": "Column A", "field": "columnA", "rowGroup": True, "hide": True},
            {"headerName": "Column B", "field": "columnB", "rowGroup": True, "hide": True},
            {
                "headerName": "Sparkline",
                "field": "sparklineValues",
                "cellRenderer": "agSparklineCellRenderer",
                "cellRendererParams": {"function": "sparklineCellRenderer(params)"},
                "aggFunc": "sum",
                "valueGetter": {"function": "[params.data['sparklineValues']]"}
                # As I need to return a list for the sparkline component
            },
        ]

        grid_options = {
            "autoSizeColumns": True,
            "groupDisplayType": 'singleColumn',
            "suppressAggFuncInHeader": True,
            "animateRows": True,
        }

      ag_grid = dag.AgGrid(
          # style=style,
          id="grid",
          defaultColDef=default_col_def,
          enableEnterpriseModules=True,
          rowData=rowData,
          columnDefs=columnDefs,
          licenseKey=[ENTERPRISE_LICENSE],
          dashGridOptions=grid_options,
          className="ag-theme-alpine",
          columnSize="responsiveSizeToFit",
      )

      return html.Div(children=ag_grid)
var dagfuncs = window.dashAgGridFunctions = window.dashAgGridFunctions || {};


dagfuncs.sparklineCellRenderer = (params) => {
        return {
        "sparklineOptions": {
          "type": "bar",
          "stroke": "#91cc75",
          "highlightStyle": {
            "fill": "#fac858",
          },
          "valueAxisDomain": [-30, 30],
          "paddingOuter": 0,
          "padding": {
            "top": 0,
            "bottom": 0,
          },
          "label": {
                    "enabled": true,
                    "fontWeight": "normal",
                    "fontSize": 14,
                    "placement": "insideEnd",
          },
          formatter: (params) => {
            const { yValue, highlighted } = params;
              if (highlighted) {
                return;
              }
              return {
                  fill: yValue < 0 ? "#F9CACA" : "#C8ECD7",
              };
            }
        },
     }
}

I am wondering whether the valueGetter is rendered before the sum calculation.

This is what I get without the sparkline component:

Cheers

new function to be added, basically you needed a new aggFunc.

dagfuncs.customSparkLineAdding = (params) => {
    const {rowNode} = params
    if (rowNode.group) {
        const values = rowNode.allLeafChildren.map((n) => n.data['sparklineValues'])
        const sum = values.reduce((accumulator, currentValue) => {
          return accumulator + currentValue;
        }, 0);
        return [sum]
    }
}

Here is whole code of the app:

import dash_ag_grid as dag
from dash import *

app = Dash(__name__)

rowData = [
    {'columnA': 'A', 'columnB': 'B', 'sparklineValues': 2},
    {'columnA': 'A', 'columnB': 'B', 'sparklineValues': 3},
    {'columnA': 'A', 'columnB': 'C', 'sparklineValues': 3},
    {'columnA': 'A', 'columnB': 'C', 'sparklineValues': 4},
]

columnDefs = [
    {"headerName": "Column A", "field": "columnA", "rowGroup": True, "hide": True},
    {"headerName": "Column B", "field": "columnB", "rowGroup": True, "hide": True},
    {
        "headerName": "Sparkline",
        "field": "sparklineValues",
        "cellRenderer": "agSparklineCellRenderer",
        "cellRendererParams": {"function": "sparklineCellRenderer(params)"},
        "aggFunc": {"function":"customSparkLineAdding(params)"},
        "valueGetter": {"function": "[params.data.sparklineValues]"}
        # As I need to return a list for the sparkline component
    },
]

grid_options = {
    "autoSizeColumns": True,
    "groupDisplayType": 'singleColumn',
    "suppressAggFuncInHeader": True,
    "animateRows": True,
}

ag_grid = dag.AgGrid(
  # style=style,
  id="grid",
  # defaultColDef=default_col_def,
  enableEnterpriseModules=True,
  rowData=rowData,
  columnDefs=columnDefs,
  # licenseKey=[ENTERPRISE_LICENSE],
  dashGridOptions=grid_options,
  className="ag-theme-alpine",
  columnSize="responsiveSizeToFit",
)

app.layout = html.Div(children=ag_grid)

app.run(debug=True)

If you dont want to agSparklineCellRenderer on the non-grouped rows, then you’ll need to use a conditional cellRenderer. :slight_smile:

1 Like

You are Legend!

That’s exactly what I was looking for!

Thank you very much!

2 Likes

Can you show an example of using “cellRendererSelector” for agSparklineCellRenderer on only non-grouped rows?

I have rows with a repeated array for the sparkline, but want to minimize the rendering

Hello @TonyH,

Welcome to the community!

This should be the default actually. Just remove the cellRenderParams.

Thank you!

Oh my, I meant grouped rows

This is how you would perform the operation for grouped rows, you’ll just need to adjust the logic to pull back the data that you want to display.