Components in aggregated rows

Dash Python
1

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

2

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
3

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:

image
image2220×420 16.9 KB

Cheers

4

You just want to sum the values?

5

Yes. But they should be rendered as a sparkline.

6

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?

7

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:

image
image2210×325 6.19 KB

Cheers

8

image
image1780×364 3.27 KB

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
9

You are Legend!

That’s exactly what I was looking for!

Thank you very much!

2 Likes
10

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

11

Hello @TonyH,

Welcome to the community!

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

12

Thank you!

Oh my, I meant grouped rows

13

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.