Charts

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

interface ColumnRegular {
  /**
      * The position of the bars in the chart.
      */
      barPosition?: 'top' | 'bottom';
  /**
       * Define badge styles for the cell.
       */
      badgeStyles?: Record<string, { backgroundColor: string; color: string }>;
  /**
       * Whether to render the shape as a rectangular.
       */
      rectangular?: boolean;
  /**
       * Maximum number of stars in the rating. Default is 5.
       */
      maxStars?: number;
  /**
       * Minimum value for the progress line. Default is 0.
       */
      minValue?: number;
  /**
       * Maximum value for the progress line. Default is 100.
       */
      maxValue?: number;
  /**
       * Define thresholds for the cell.
       */
      thresholds?: ThresholdConfig[];
  /**
       * Format the value of the cell.
       */
      formatValue?: (value: number, column: ColumnRegular) => string;
  /**
       * Function to calculate progress based on row data.
       * This allows connecting multiple fields to determine progress.
       * @param config Configuration object containing model, data, and prop
       * @returns A number between 0 and 100 representing progress
       */
      progress?: (config: { model: DataType; data: DataType[]; prop: ColumnProp }) => number
}

Plugin API

progressLineRenderer

The progressLineRenderer is a custom cell renderer for RevoGrid that provides a visual representation of progress as a horizontal line within grid cells. This renderer effectively communicates the completion level of a numeric value relative to a defined range.

Features:

• Displays a progress line that visually indicates the percentage completion within specified minimum and maximum values.
• Shows a percentage label beside the progress bar, formatted to one decimal place for precision.
• Automatically normalizes values to ensure accurate representation within the defined range.
• Configurable through column properties such as minValue and maxValue.
• Supports a custom progress function to calculate progress based on row data.

Usage:

• Import progressLineRenderer and use it as the cellTemplate in your RevoGrid’s column configuration.
• Specify minValue and maxValue for each column to define the range for progress calculation.
• Optionally provide a progress function to calculate progress based on row data.

Example

import { progressLineRenderer } from './charts/progress-line.renderer';

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'score',
    name: 'Completion Rate',
    minValue: 0,
    maxValue: 100,
    cellTemplate: progressLineRenderer,
    // Optional: Custom progress calculation
    progress: (config) => {
      // Calculate progress based on multiple fields
      const completed = config.model.completedTasks || 0;
      const total = config.model.totalTasks || 1;
      return (completed / total) * 100;
    }
  },
];

This renderer is suitable for applications where tracking progression or percentage completion is necessary, such as performance dashboards, goal tracking systems, or any scenario where a visual progress indicator is beneficial.

progressLineRenderer: CellTemplate;

---

progressLineWithValueRenderer

progressLineWithValueRenderer: CellTemplate;

---

sparklineRenderer

sparklineRenderer: CellTemplate | undefined;

---

barChartRenderer

RevoGrid Renderer Generates a bar chart visualization based on the provided data values and column configuration.

barChartRenderer: (h: HyperFunc<VNode>, { value, column, }: { value?: any; column: Partial<ColumnRegular>; }) => VNode;

---

heatmapRenderer

heatmapRenderer: CellTemplate | undefined;

---

badgeRenderer

RevoGrid Renderer Renderers a badge cell with custom background color, text Supports both badgeStyles and thresholds for styling

badgeRenderer: CellTemplate | undefined;

---

ratingStarRenderer

ratingStarRenderer: CellTemplate;

---

timelineRenderer

timelineRenderer: CellTemplate | undefined;

---

changeRenderer

RevoGrid Renderer Formats a numeric cell value with corresponding styles and icons based on whether the value is positive, negative, or zero, and exports a cell template renderer for a grid that utilizes this formatting.

changeRenderer: CellTemplate;

---

thumbsRenderer

thumbsRenderer: CellTemplate | undefined;

---

columnTypeRenderer

columnTypeRenderer: ColumnTemplateFunc | undefined;

---

PieData

interface PieData {
  value: number;
  color?: string;
  name?: string
}

---

pieChartRenderer

pieChartRenderer: (h: HyperFunc<VNode>, { value, column, }: { value?: number[] | PieData[] | undefined; column?: Partial<ColumnDataSchemaModel> | undefined; }) => VNode;

---

summaryHeaderRenderer

summaryHeaderRenderer: (h: HyperFunc<VNode>, summary: Record<string, number>, column?: { maxItems?: number | undefined; }) => VNode;

---

summaryAggregateRenderer

summaryAggregateRenderer: (h: HyperFunc<VNode>, summary: Record<string, number>, column?: { showSum?: boolean | undefined; showAvg?: boolean | undefined; }) => VNode;

---

avatarRenderer

avatarRenderer: CellTemplate | undefined;

---

thresholdRenderer

The thresholdRenderer is a custom cell renderer for RevoGrid that applies CSS classes based on defined thresholds. It uses the existing threshold system to apply classes to cells based on their values.

Features:

• Supports multiple thresholds with custom CSS classes
• Simple and straightforward threshold-based styling
• Works with the existing threshold system

Usage:

import { thresholdRenderer } from '@revolist/revogrid-pro'

const grid = document.createElement('revo-grid');
grid.columns = [
  {
    prop: 'score',
    name: 'Score',
    thresholds: [
      { value: 0, className: 'high' },    // Red for negative values
      { value: 50, className: 'medium' },     // Yellow for values 0-50
      { value: 100, className: 'low' },      // Green for values 50-100
    ],
    cellProperties: thresholdRenderer,
  },
];

thresholdRenderer: PropertiesFunc;

---

circularProgressRenderer

circularProgressRenderer: CellTemplate;

---

getThresholdClasses

Get the threshold classes for a given value and column.

Example

const columns: ColumnRegular[] = [
  {
    name: 'Avg Rating',
    prop: 'Average Rating',
    filter: ['number', 'slider'],
    sortable: true,
    maxStars: 5,
    maxValue: 5,
    thresholds: [
      { value: 4, className: 'high' },
      { value: 3, className: 'medium' },
      { value: 0, className: 'low' },
    ],
  },
];

export function getThresholdClasses(
  value: number,
  column: Partial<ColumnRegular>,
);

---

ThresholdConfig

The ThresholdConfig interface defines the structure of a threshold configuration object. It specifies the value and the class name to be applied when the value exceeds or equals the threshold.

interface ThresholdConfig {
  /**
     * The value of the threshold.
     */
    value: number;
  /**
     * The class name to be applied when the value exceeds or equals the threshold.
     */
    className: string
}