React Data GridSparklines - Column CustomisationEnterprise

formatter: SparklineColumnFormatter;

type SparklineColumnFormatter = 
      (params: ColumnFormatterParams) => ColumnFormat


interface ColumnFormatterParams {
  // The raw data associated with the specific column. 
  datum: any;
  // The X value of the data point. 
  xValue: any;
  // The Y value of the data point. 
  yValue: any;
  // The width of the column in pixels. 
  width: number;
  // The height of the column in pixels. 
  height: number;
  // Whether or not the column is a minimum point. 
  min?: boolean;
  // Whether or not the column is a maximum point. 
  max?: boolean;
  // Whether or not the column represents the first data point. 
  first?: boolean;
  // Whether or not the column represents the last data point. 
  last?: boolean;
  // The CSS colour value for the fill of the individual column. 
  fill?: string;
  // The CSS colour value for the outline of the individual column. 
  stroke?: string;
  // The thickness in pixels for the stroke of the individual column. 
  strokeWidth: number;
  // Whether or not the column is highlighted. 
  highlighted: boolean;
}

interface ColumnFormat {
  // The CSS colour value for the fill of the individual column. 
  fill?: string;
  // The CSS colour value for the outline of the individual column. 
  stroke?: string;
  // The thickness in pixels for the stroke of the individual column.
  strokeWidth?: number;
}

label: SparklineLabelOptions;

interface SparklineLabelOptions {
  // Set to true to enable labels.
  // Default: `false`
  enabled?: boolean;
  // Set size of the font.
  // Default: `8`
  fontSize?: number;
  // Specify the font for the label text.
  // Default: `Verdana, sans-serif`
  fontFamily?: string;
  // Specify the font style for the label text. 
  fontStyle?: 'normal' | 'italic' | 'oblique';
  // Set how thick or thin characters in label text should be displayed. 
  fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
  // Set the color of the label text. The color can be specified by a color name, a HEX or an RGB value.
  // Default: `rgba(70, 70, 70, 1)`
  color?: string;
  // A callback function to return the text to be displayed as the label, based on the value represented by the column or bar.
  // By default the values are simply stringified. 
  formatter?: (params: LabelFormatterParams) => string;
  // Where to render labels relative to the segments.
  // Default: `insideEnd`
  // 
  placement?: BarColumnLabelPlacement;
}

interface LabelFormatterParams {
  // The Y value of the data point. 
  value: number | undefined;
}

enum BarColumnLabelPlacement {
  InsideBase = 'insideBase'
  InsideEnd = 'insideEnd'
  Center = 'center'
  OutsideEnd = 'outsideEnd'
}

padding: PaddingOptions;

interface PaddingOptions {
  // The number of pixels of padding at the top of the sparkline area.
  // Default: `3`
  top?: number;
  // The number of pixels of padding at the right of the sparkline area.
  // Default: `3`
  right?: number;
  // The number of pixels of padding at the bottom of the sparkline area.
  // Default: `3`
  bottom?: number;
  // The number of pixels of padding at the left of the sparkline area.
  // Default: `3`
  left?: number;
}

axis: SparklineAxisOptions;

interface SparklineAxisOptions {
  // The type of axis used to plot the data.
  // Default: `'category'`
  type?: AxisType;
  // The CSS colour value for the outline of the axis line.
  // Default: `'rgb(204, 214, 235)'`
  stroke?: string;
  // The thickness in pixels for the stroke of the axis line.
  // Default: `1`
  strokeWidth?: number;
}

type AxisType = 
      'number' 
    | 'category' 
    | 'time'

highlightStyle: HighlightStyleOptions;

interface HighlightStyleOptions {
  // The width in pixels of the markers when hovered over. This is only for the Line and Area sparklines as Column and Bar sparklines do not have markers.
  // Default: `6`
  size?: number;
  // The fill colour of the markers, columns or bars when hovered over. Use `undefined` for no highlight fill.
  // Default: `'yellow'`
  fill?: string;
  // The CSS colour value for the outline of the markers, columns or bars when hovered over. Use `undefined` for no highlight stroke.
  // Default: `'silver'`
  stroke?: string;
  // The thickness in pixels for the stroke of the markers, columns or bars when hovered over.
  // Default: `1`
  strokeWidth?: number;
}

tooltip: SparklineTooltipOptions;

interface SparklineTooltipOptions {
  // Set to false to disable tooltips. 
  enabled?: boolean;
  // The element to place the tooltip into. This can be used to confine the tooltip to a specific area which may be outside of the sparkline grid cell. 
  container?: HTMLElement;
  // The horizontal distance in pixels between the cursor and the top left corner of the tooltip.
  // Default: `10`
  xOffset?: number;
  // The vertical distance in pixels between the cursor and the top left corner of the tooltip.
  // Default: `0`
  yOffset?: number;
  // A callback function used to create the content for the tooltips. This function should return an object or a HTML string used to render the tooltip. 
  renderer?: SparklineTooltipRenderer;
}

type SparklineTooltipRenderer = 
      (params: TooltipRendererParams) => TooltipRendererResult


interface TooltipRendererParams {
  // The grid context, includes row data, giving access to data from other columns in the same row. 
  context?: any;
  // The raw datum associated with the point. 
  datum: any;
  // The X value of the data point. 
  xValue: any;
  // The Y value of the data point. 
  yValue: any;
}

interface TooltipRendererResult {
  // Set to false to disable individual tooltip. 
  enabled?: boolean;
  // The content to display in each tooltip. 
  content?: string;
  // The title of the tooltip. 
  title?: string;
  // The CSS color for the title text. 
  color?: string;
  // The CSS color for the background of the tooltip title. 
  backgroundColor?: string;
  // The opacity of the background for the tooltip title. 
  opacity?: number;
}

type: AxisType;

type AxisType = 
      'number' 
    | 'category' 
    | 'time'

formatter = (
    params: LabelFormatterParams
) => string;

interface LabelFormatterParams {
  // The Y value of the data point. 
  value: number | undefined;
}

placement: BarColumnLabelPlacement;

enum BarColumnLabelPlacement {
  InsideBase = 'insideBase'
  InsideEnd = 'insideEnd'
  Center = 'center'
  OutsideEnd = 'outsideEnd'
}