Render Functions

In the widgets.json configuration, you can specify render functions to customize how the data is displayed in the widget - These functions are only compatible with widgets that use a columnsDefs.

Available Render Functions

greenRed: Applies a green or red color based on conditions.
titleCase: Converts text to title case.
hoverCard: Displays additional information when hovering over a cell.
cellOnClick: Triggers an action when a cell is clicked.
columnColor: Changes the color of a column based on specified rules.

Render Function Parameters

actionType
Type: string
Specifies the action type for the render function.
Possible values: "groupBy"
Used with: cellOnClick render function

hoverCardData
Type: array of strings
Specifies columns to show in the hover card.
Used with: hoverCard render function

colorRules
Type: array of objects
An array of rules for conditional coloring.
Used with: columnColor render function

Each rule can include:

condition
Type: string
The condition for applying the color.
Options: "eq", "ne", "gt", "lt", "gte", "lte", "between"
value
Type: number
The value for the condition.
range
Type: object
An object specifying min and max values for the condition.
color
Type: string
The color to apply, specified as a hex code or "green", "red", "blue".
fill
Type: boolean
Indicates if the color should fill the cell.

Example Configurations

Column Color

To use the column color render function, you need to add it to the columnsDefs array in your widgets.json file for the column you want to apply it to.

The below example would apply a green color to the cell if the value is between 50 and 90, a red color if the value is less than 50, and a blue color if the value is greater than 90.

{
    ...
    "columnsDefs": [
        {
            "field": "Analyst",
            "headerName": "Analyst",
            "renderFn": "columnColor",
            "renderFnParams": {
                "colorRules": [
                    {
                        "condition": "between",
                        "range": {
                            "min": 50,
                            "max": 90
                        },
                        "color": "blue",
                        "fill": true
                    },
                    {
                        "condition": "lt",
                        "value": 50,
                        "color": "red",
                        "fill": true
                    },
                    {
                        "condition": "gt",
                        "value": 90,
                        "color": "green",
                        "fill": true
                    }
                ]
            }
        }
    ]
}

To use the hover card render function, you need to add it to the columnsDefs array in your widgets.json file for the column you want to apply it to.

{
    ...
    "columnsDefs": [
          {
            "field": "analyst",
            "headerName": "Analyst",
            "renderFn": "hoverCard",
            "renderFnParams": {
              "hoverCard": {
                "cellField": "value",
                "title": "Analyst Details",
                "markdown": "### {value}\n- **Description:** {description}\n- **Additional Info:** {additionalInfo}"
              }
            }
          }
        ]
}

The hover card example would use the below data to display the hover card.

[
  {
    "id": 1,
    "name": "Item 1",
    "analyst": {
      "value": "Cool Guy 1",
      "description": "This is a detailed description for Item 1, but it's not as long as the others",
      "additionalInfo": "Some additional information about Item 1"
    }
  },
  {
    "id": 2,
    "name": "Item 2",
    "analyst": {
      "value": "Cool Guy 2",
      "description": "This is a detailed description for Item 2, but it's a bit longer than the first one",
      "additionalInfo": "Some additional information about Item 2"
    }
  },
  {
    "id": 3,
    "name": "Item 3",
    "analyst": {
      "value": "Cool Guy 3",
      "description": "This is a detailed description for Item 3, but it's the longest one yet and it's still going",
      "additionalInfo": "Some additional information about Item 3"
    }
  }
]

You can pass a simple configuration to get a hover card with default settings, excluding the title and value.
The hoverCard render function allows for markdown customization, providing flexibility in how information is displayed.

Render Functions