# Charts
URL: https://pro.rv-grid.com/api/charts/
Source: src/content/docs/api/charts.md
## Module Extensions

### `ColumnRegular` (Extended from `@revolist/revogrid`)

```ts
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
```typescript
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.

```ts
progressLineRenderer: CellTemplate<DataType<any, ColumnProp>>;
```

---

### `progressLineWithValueRenderer`

```ts
progressLineWithValueRenderer: CellTemplate<DataType<any, ColumnProp>>;
```

---

### `sparklineRenderer`

```ts
sparklineRenderer: CellTemplate<DataType<any, ColumnProp>> | undefined;
```

---

### `barChartRenderer`

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

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

---

### `heatmapRenderer`

```ts
heatmapRenderer: CellTemplate<DataType<any, ColumnProp>> | undefined;
```

---

### `badgeRenderer`

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

```ts
badgeRenderer: CellTemplate<DataType<any, ColumnProp>> | undefined;
```

---

### `ratingStarRenderer`

```ts
ratingStarRenderer: CellTemplate<DataType<any, ColumnProp>>;
```

---

### `timelineRenderer`

```ts
timelineRenderer: CellTemplate<DataType<any, ColumnProp>> | 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.

```ts
changeRenderer: CellTemplate<DataType<any, ColumnProp>>;
```

---

### `thumbsRenderer`

```ts
thumbsRenderer: CellTemplate<DataType<any, ColumnProp>> | undefined;
```

---

### `renderColumnTypeIcon`

Helper to render icons based on the columnType.

**@param** h Hyperscript function.
 *
**@param** columnType The column type to determine the icon.
 *
**@returns** A VNode containing the corresponding SVG icon.

```ts
export function renderColumnTypeIcon(
  h: HyperFunc<VNode>,
  columnType: string
);
```

---

### `columnTypeRenderer`

```ts
columnTypeRenderer: ColumnTemplateFunc | undefined;
```

---

### `PieData`

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

---

### `pieChartRenderer`

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

---

### `summaryHeaderRenderer`

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

---

### `summaryAggregateRenderer`

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

---

### `avatarRenderer`

```ts
avatarRenderer: CellTemplate<DataType<any, ColumnProp>> | undefined;
```

---

### `avatarTemplate`

```ts
export function avatarTemplate(h: any, options: AvatarTemplateOptions =;
```

---

### `avatarWithTextRenderer`

```ts
avatarWithTextRenderer: CellTemplate<DataType<any, ColumnProp>> | 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**:
```typescript
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,
  },
];
```

```ts
thresholdRenderer: PropertiesFunc<DataType<any, ColumnProp>>;
```

---

### `circularProgressRenderer`

```ts
circularProgressRenderer: CellTemplate<DataType<any, ColumnProp>>;
```

---

### `getThresholdClasses`

Get the threshold classes for a given value and column.

### Example
```typescript
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' },
    ],
  },
];
```

```ts
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.

```ts
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
}
```
