@buun_group/brutalist-ui
Version:
A brutalist-styled component library
91 lines (90 loc) • 2.42 kB
TypeScript
/**
* @module PieChart
* @description A brutalist-styled pie chart component for data visualization with customizable segments, animations, and interactive tooltips. Features stark visual design with bold borders and high contrast colors.
*/
import React, { CSSProperties } from 'react';
/**
* Data point interface for pie chart segments
*/
interface PieChartDataPoint {
/**
* Text label for this data segment
*/
label: string;
/**
* Numeric value for this data segment
*/
value: number;
/**
* Optional custom color for this segment (defaults to auto-generated color)
*/
color?: string;
}
/**
* Props for the PieChart component
*/
interface PieChartProps {
/**
* Array of data points to display in the pie chart
*/
data: PieChartDataPoint[];
/**
* Optional title to display above the chart
*/
title?: string;
/**
* Optional subtitle to display below the title
*/
subtitle?: string;
/**
* Size of the chart in pixels (both width and height)
* @default 300
*/
size?: number;
/**
* Whether to show percentage values on the chart segments
* @default true
*/
showValues?: boolean;
/**
* Whether to show the legend with labels below the chart
* @default true
*/
showLabels?: boolean;
/**
* Whether to enable entry animations for chart segments
* @default true
*/
animated?: boolean;
/**
* Visual style variant for the chart
* @default 'default'
*/
variant?: 'default' | 'minimal' | 'brutal';
/**
* Whether to show a border container around the chart
* @default false
*/
showContainer?: boolean;
/**
* Style of the border (when showContainer is true)
* @default 'solid'
*/
borderStyle?: 'solid' | 'dashed' | 'dotted' | 'double';
/**
* Width of the stroke between segments in pixels
* @default 2
*/
strokeWidth?: number;
/**
* Additional CSS classes to apply to the chart container
*/
className?: string;
/**
* Inline styles to apply to the chart container (supports utility classes)
*/
style?: CSSProperties;
}
declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<HTMLDivElement>>;
export { PieChart };
export type { PieChartProps, PieChartDataPoint };