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