aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
157 lines • 4.67 kB
TypeScript
/**
* GlassDataChart Component
*
* An advanced glass-styled chart component with physics-based interactions,
* smooth animations, and rich customization options.
*/
import React from 'react';
import { Chart as ChartJS } from 'chart.js';
export type ChartVariant = 'line' | 'bar' | 'area' | 'pie' | 'doughnut' | 'polarArea' | 'kpi';
export interface DataPoint {
x: string | number;
y: number;
label?: string;
color?: string;
extra?: Record<string, unknown>;
formatType?: 'number' | 'currency' | 'percentage' | 'units';
formatOptions?: {
decimals?: number;
currencySymbol?: string;
locale?: string;
compact?: boolean;
showPlus?: boolean;
suffix?: string;
prefix?: string;
};
}
export interface ChartDataset {
id?: string;
label: string;
data: DataPoint[];
style?: {
lineColor?: string;
fillColor?: string;
pointColor?: string;
borderWidth?: number;
pointRadius?: number;
tension?: number;
};
formatType?: 'number' | 'currency' | 'percentage' | 'units';
formatOptions?: {
decimals?: number;
currencySymbol?: string;
locale?: string;
compact?: boolean;
showPlus?: boolean;
suffix?: string;
prefix?: string;
};
}
export type QualityTier = 'low' | 'medium' | 'high';
export interface PhysicsParams {
stiffness: number;
dampingRatio: number;
mass: number;
precision: number;
}
interface GlassDataChartProps {
data?: any;
datasets?: ChartDataset[];
width?: string | number;
height?: number;
title?: string;
subtitle?: string;
variant?: ChartVariant;
glassVariant?: 'clear' | 'frosted' | 'tinted' | 'luminous';
blurStrength?: 'low' | 'medium' | 'high' | 'standard';
color?: 'primary' | 'secondary' | 'tertiary';
animation?: {
physicsEnabled: boolean;
duration: number;
tension: number;
friction: number;
mass: number;
easing: string;
staggerDelay: number;
};
interaction?: {
zoomPanEnabled: boolean;
zoomMode: 'x' | 'y' | 'xy';
physicsHoverEffects: boolean;
hoverSpeed: number;
showTooltips: boolean;
tooltipStyle: 'frosted' | 'dynamic';
tooltipFollowCursor: boolean;
physics?: {
tension: number;
friction: number;
mass: number;
minZoom: number;
maxZoom: number;
wheelSensitivity: number;
inertiaDuration: number;
};
};
legend?: {
show: boolean;
position: 'top' | 'bottom';
align: 'start' | 'center' | 'end';
style: 'default' | 'compact';
glassEffect: boolean;
};
axis?: {
showXGrid: boolean;
showYGrid: boolean;
showXLabels: boolean;
showYLabels: boolean;
axisColor: string;
gridColor: string;
gridStyle: 'solid' | 'dashed';
};
initialSelection?: number | number[];
showToolbar?: boolean;
allowDownload?: boolean;
palette?: string[];
allowTypeSwitch?: boolean;
borderRadius?: number;
borderColor?: string;
elevation?: number | 'level1' | 'level2' | 'level3' | 'level4' | 'level5';
className?: string;
style?: React.CSSProperties;
onDataPointClick?: (datasetIndex: number, dataIndex: number, data: DataPoint) => void;
onSelectionChange?: (selection: number[]) => void;
onTypeChange?: (type: ChartVariant) => void;
onZoomPan?: (chart: ChartJS) => void;
exportOptions?: {
filename: string;
quality: number;
format: 'png' | 'jpeg';
backgroundColor: string;
includeTitle: boolean;
includeTimestamp: boolean;
};
renderExportButton?: () => React.ReactNode;
kpi?: {
value: number;
label: string;
format: 'number' | 'currency' | 'percentage';
};
useAdaptiveQuality?: boolean;
getElementPhysicsOptions?: (dataPoint: DataPoint, datasetIndex: number, dataIndex: number, chartType: ChartVariant) => {
hoverEffect?: {
scale: number;
opacity: number;
};
clickEffect?: {
scale: number;
opacity: number;
};
} | null;
'aria-label'?: string;
}
interface GlassDataChartRef {
current: any;
}
export declare const GlassDataChart: React.MemoExoticComponent<React.ForwardRefExoticComponent<GlassDataChartProps & React.RefAttributes<GlassDataChartRef>>>;
export default GlassDataChart;
//# sourceMappingURL=GlassDataChart.d.ts.map