Charts

Module Extensions

ColumnRegular (Extended from @revolist/revogrid)

interface ColumnRegular {
  /**
       * 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;
  thresholds?: ThresholdConfig[];
  /**
       * Format the value of the cell.
       */
      formatValue?: (value: number, column: ColumnRegular) => string
}

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.

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.

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,
  },
];

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

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;

---

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
}