@buun_group/brutalist-ui
Version:
A brutalist-styled component library
91 lines (90 loc) • 2.74 kB
TypeScript
/**
* @module AreaChart
* @description A data visualization component for displaying area charts with smooth curves, interactive tooltips, and customizable styling. Perfect for showing trends and data over time.
*/
import React, { CSSProperties } from 'react';
/**
* Data point structure for the area chart
*/
interface AreaChartDataPoint {
/** Label for the data point (typically X-axis value) */
label: string;
/** Numeric value for the data point (Y-axis value) */
value: number;
/** Optional custom color for this specific data point */
color?: string;
}
/**
* Props for the AreaChart component
*/
interface AreaChartProps {
/** Array of data points to display in the chart */
data: AreaChartDataPoint[];
/** Optional title displayed above the chart */
title?: string;
/** Optional subtitle displayed below the title */
subtitle?: string;
/** Height of the chart area in pixels
* @default 300
*/
height?: number;
/** Whether to show value labels on data points
* @default true
*/
showValues?: boolean;
/** Whether to show grid lines
* @default true
*/
showGrid?: boolean;
/** Whether to animate the chart on mount
* @default true
*/
animated?: boolean;
/** Size variant affecting padding and text sizes
* @default 'md'
*/
size?: 'sm' | 'md' | 'lg';
/** Visual style variant
* @default 'default'
*/
variant?: 'default' | 'minimal' | 'brutal';
/** Whether to show a container border around the chart
* @default false
*/
showContainer?: boolean;
/** Border style when showContainer is true
* @default 'solid'
*/
borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
/** Fill color for the area (CSS color value)
* @default 'var(--brutal-accent)'
*/
fillColor?: string;
/** Stroke color for the line (CSS color value)
* @default 'var(--brutal-accent)'
*/
lineColor?: string;
/** Width of the line stroke
* @default 3
*/
lineWidth?: number;
/** Whether to show dots at data points
* @default true
*/
showDots?: boolean;
/** Whether to use smooth curves instead of straight lines
* @default false
*/
smooth?: boolean;
/** Opacity of the area fill (0-1)
* @default 0.3
*/
fillOpacity?: number;
/** Additional CSS class names */
className?: string;
/** Additional inline styles (supports utility classes) */
style?: CSSProperties;
}
declare const AreaChart: React.ForwardRefExoticComponent<AreaChartProps & React.RefAttributes<HTMLDivElement>>;
export { AreaChart };
export type { AreaChartProps, AreaChartDataPoint };