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
andmaxValue
. - Supports a custom progress function to calculate progress based on row data.
Usage:
- Import
progressLineRenderer
and use it as thecellTemplate
in your RevoGrid's column configuration. - Specify
minValue
andmaxValue
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
}