AdapTable Version:

Framework:

Sparkline Column

Summary

Sparkline Columns are AdapTable Columns which wrap AG Grid's Sparkline Charts functionality
This allows them to be easily created, edited and saved at runtime
Most Sparkline Columns contain an array of numbers, but advanced columns can contain Tuples and Objects

Sparkline Columns allow Sparklines to be easily displayed in Column form and then saved in Layouts.

The Sparklines are the AG Grid Sparklines provided as part of their excellent Charting package.

Sparkline Columns can be provided by developers at Design Time or created / edited by run-time users.

Hint

Sparkline Columns created at design time must have an appropriate Array Cell Data Type
The Column Type has to be numberArray, tupleArray or objectArray

Sparkline Types

AG Grid Sparkline Columns can be of 4 types:

Each of these types is fully supported by AdapTable.

A Sparkline Column works on an array of data, rather than a single value.

Caution

To use Sparkline Columns - you must have the AG Grid SparklinesModule Module installed

Numeric Array

Sparkline data most typically takes the form of standard numeric arrays (e.g. history data).

Styled Column: Sparkline

Fork Fork

This Example provides a fictitious History column which supplies an Array of Numbers
We provide 4 different Sparkline Columns all of which use the same History column but provide a different, appropriately named, Sparkline type:
- History - Line
- History - Area
- History - Bar
- History - Column

Try It Out

Create a Sparkline Column in the Wizard for the History Column
Click the Edit First Row button in the Dashboard to change the History value - and see all 4 Sparklines update

import {
  AdaptableButton,
  AdaptableOptions,
  CellUpdateRequest,
  CustomToolbarButtonContext,
  GridApi,
} from '@adaptabletools/adaptable';
import {IRowNode} from 'ag-grid-enterprise';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Sparkline Columns Basic',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'ButtonToolbar',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Edit First Row',
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              // Get handle to Grid APi
              const gridApi: GridApi = context.adaptableApi.gridApi;
              const firstNode = gridApi.getFirstRowNode();
              const meteorNode = gridApi.getRowNodeForPrimaryKey(3214406);
              if (firstNode && meteorNode) {
                const cellUpdateRequest: CellUpdateRequest = {
                  columnId: 'history',
                  newValue: meteorNode.data['history'],
                  primaryKeyValue:
                    gridApi.getPrimaryKeyValueForRowNode(firstNode),
                  rowNode: firstNode,
                };
                gridApi.setCellValue(cellUpdateRequest);
              }
            },
            buttonStyle: {
              tone: 'info',
              variant: 'text',
            },
          },
        ],
      },
    ],
  },
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
      PinnedToolbars: ['ButtonToolbar'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Sparklines',
      Layouts: [
        {
          Name: 'Sparklines',
          TableColumns: [
            'name',
            'historyLine',
            'language',
            'historyArea',
            'github_stars',
            'historyBar',
            'license',
            'historyColumn',
            'history',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'historyLine',
          SparklineStyle: {
            options: {
              type: 'line',
              stroke: 'rgb(124, 255, 178)',
              strokeWidth: 2,
              padding: {
                top: 5,
                bottom: 5,
              },
              marker: {
                enabled: true,
                size: 3,
                shape: 'diamond',
              },
            },
          },
        },
        {
          ColumnId: 'historyArea',
          SparklineStyle: {
            options: {
              type: 'area',
              fill: 'rgba(216, 204, 235, 0.3)',
              stroke: 'rgb(119,77,185)',
              axis: {
                type: 'category',
                stroke: 'rgb(204, 204, 235)',
              },
            },
          },
        },
        {
          ColumnId: 'historyBar',
          SparklineStyle: {
            options: {
              type: 'bar',
              direction: 'horizontal',
              fill: '#5470c6',
              stroke: '#91cc75',
            },
          },
        },
        {
          ColumnId: 'historyColumn',
          SparklineStyle: {
            options: {
              type: 'bar',
              direction: 'vertical',
              fill: '#90D5FF',
              stroke: '#90D5FF',
              axis: {
                type: 'category',
                paddingInner: 0.3,
                paddingOuter: 0.1,
              },
            },
          },
        },
      ],
    },
  },
};

Advanced Array Types

More advanced Sparkline Columns can use complex, rather than numeric, arrays.

These arrays can be of 3 types:

Tuple Array

In a Tuple Array the data is provided in a array of arrays each of which has 2 values:

[ [14, 22], [5, 13], [19, 30] ]

Note

Tuple Arrays should provide a Cell Data Type of tupleArray

Standard Object Array

AG Grid Sparklines can also receive objects.

These objects, by convention, will contain 2 properties: x and y:

[ {x: 14, y: 22}, {x: 5, y: 13},  {x: 19, y: 30} ]

Note

Standard Object Arrays should provide a Cell Data Type of objectArray

Non-Standard Object Array

AG Grid Sparklines can also be created with objects that do not have the standard x and y properties.

However they are still required to contain 2 properties, which are needed for the 2 axes:

[ {xVal: 14, yVal: 22}, {xVal: 5, yVal: 13},  {xVal: 19, yVal: 30} ]

Note

Non-Standard Object Arrays should also provide a Cell Data Type of objectArray

Styled Column: Sparkline Advanced

Fork Fork

This example contains 3 Sparkline Columns which render data that is not of numeric array form
They each show the same Data Set as in the demo above, but provided in 3 slightly different formats - each using different Sparkline types:
- History - Tuple supplies the data as an array of Tuples - displayed in a Column Sparkline
- History - Object supplies the data as an array of standard objects (i.e. x, y) - displayed in an Area Sparkline
- History - Object Non Standard supplies the data as an array of non-standard objects - displayed in a Line Sparkline

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Sparkline Columns Advanced',
  initialState: {
    Dashboard: {
      ModuleButtons: ['StyledColumn', 'SettingsPanel'],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Sparklines',
      Layouts: [
        {
          Name: 'Sparklines',
          TableColumns: [
            'name',
            'historyTuple',
            'historyObject',
            'historyObjectNonStandard',
            'language',
            'github_stars',
            'license',
          ],
          AutoSizeColumns: true,
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'historyTuple',
          SparklineStyle: {
            options: {
              type: 'bar',
              direction: 'vertical',
              fill: '#91cc75',
              stroke: '#91cc75',
              highlight: {
                highlightedItem: {
                  fill: 'orange',
                  strokeWidth: 0,
                },
              },
              axis: {
                type: 'category',
                paddingInner: 0.3,
                paddingOuter: 0.1,
              },
            },
          },
        },
        {
          ColumnId: 'historyObject',
          SparklineStyle: {
            options: {
              type: 'area',
              fill: 'rgba(216, 204, 235, 0.3)',
              stroke: 'rgb(119,77,185)',
              highlight: {
                highlightedItem: {
                  fill: 'rgb(143,185,77)',
                  strokeWidth: 0,
                },
              },
              axis: {
                type: 'category',
                stroke: 'rgb(204, 204, 235)',
              },
            },
          },
        },

        {
          ColumnId: 'historyObjectNonStandard',
          SparklineStyle: {
            options: {
              stroke: 'rgb(234, 221, 202)',
              strokeWidth: 2,
              type: 'line',
              xKey: 'xVal',
              yKey: 'yVal',
            },
          },
        },
      ],
    },
  },
};

Sparkline Calculated Columns

Sparkline Columns can be used by Calculated Columns to render Array data.

Most typically the Calculated Column will use the TO_ARRAY Expression Function to create the data.

Sparkline Columns: Calculated

Fork Fork

This demo contains 2 Calculated Columns which use TO_ARRAY to create an Array and render the result as Sparkline Columns:
- Statistics - shows an Area Sparkline with 4 columns as an array: Open Issues, Closed Issues, Open PRs, Closed PRs
- Github - shows a Bar Sparkline with an array of Github Stars and Github Watchers multiplied by 30

import {AdaptableOptions} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Sparkline Calculated Columns',
  initialState: {
    Dashboard: {
      ModuleButtons: ['CalculatedColumn', 'StyledColumn', 'SettingsPanel'],
    },
    StatusBar: {
      StatusBars: [
        {
          Key: 'Center Panel',
          StatusBarPanels: ['Layout', 'CalculatedColumn'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'stats',
            'open_pr_count',
            'closed_pr_count',
            'open_issues_count',
            'closed_issues_count',
            'github',
            'github_stars',
            'github_watchers',
            'language',
            'license',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'has_projects',
            'has_pages',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          ColumnSizing: {
            name: {Width: 100},
            open_pr_count: {Width: 120},
            closed_pr_count: {Width: 120},
            open_issues_count: {Width: 130},
            closed_issues_count: {Width: 130},
          },
        },
      ],
    },
    CalculatedColumn: {
      CalculatedColumns: [
        {
          ColumnId: 'stats',
          FriendlyName: 'Statistics',
          Query: {
            ScalarExpression:
              'TO_ARRAY([open_pr_count], [closed_pr_count], [open_issues_count], [closed_issues_count])',
          },
          CalculatedColumnSettings: {
            Resizable: true,
            DataType: 'numberArray',
          },
        },
        {
          ColumnId: 'github',
          FriendlyName: 'Github',
          Query: {
            ScalarExpression:
              'TO_ARRAY([github_stars], [github_watchers] * 30)',
          },
          CalculatedColumnSettings: {
            Resizable: true,
            DataType: 'numberArray',
          },
        },
      ],
    },
    StyledColumn: {
      StyledColumns: [
        {
          ColumnId: 'stats',
          SparklineStyle: {
            options: {
              type: 'area',
              fill: 'rgba(216, 204, 235, 0.3)',
              stroke: 'rgb(119,77,185)',
              axis: {
                type: 'category',
                stroke: 'rgb(204, 204, 235)',
              },
            },
          },
        },
        {
          ColumnId: 'github',
          SparklineStyle: {
            options: {
              type: 'bar',
              direction: 'horizontal',
              fill: '#5470c6',
              stroke: '#91cc75',
            },
          },
        },
      ],
    },
  },
};

Sparkline Calculated Columns

(Recorded with AdapTable v14.0)

FAQ

Can we export Sparkline Columns when using the VisualExcel Report Format? Not currently, but we plan to look at this in a forthcoming release

I cannot see the Sparkline Column in my Grid? Make sure you have the AG Grid SparklinesModule Module installed

Why are there no columns visible in the Wizard when I try to create a sparkline? AdapTable will only display columns which have an appropriate Cell Data Types for a Sparkline Column. This needs to be one of numberArray, tupleArray or objectArray

PreviousBadge Style NextTechnical Reference

Framework: