aura-glass
Version:
A comprehensive glassmorphism design system for React applications with 142+ production-ready components
87 lines • 2.61 kB
TypeScript
import React from "react";
export interface HeatmapDataPoint {
x: number;
y: number;
value: number;
label?: string;
metadata?: Record<string, any>;
}
export interface HeatmapCell {
row: number;
col: number;
value: number;
normalizedValue: number;
label?: string;
metadata?: Record<string, any>;
}
export interface HeatmapColorScale {
min: string;
mid?: string;
max: string;
steps?: number;
}
export interface HeatmapAxis {
labels: string[];
title?: string;
tickCount?: number;
format?: (value: any) => string;
}
export interface GlassHeatmapProps extends React.HTMLAttributes<HTMLDivElement> {
/** Heatmap data */
data: HeatmapDataPoint[] | number[][];
/** X-axis configuration */
xAxis?: HeatmapAxis;
/** Y-axis configuration */
yAxis?: HeatmapAxis;
/** Color scale configuration */
colorScale?: HeatmapColorScale;
/** Cell size in pixels */
cellSize?: number;
/** Gap between cells */
cellGap?: number;
/** Whether to show cell values */
showValues?: boolean;
/** Whether to show grid lines */
showGrid?: boolean;
/** Whether to show tooltips */
showTooltips?: boolean;
/** Whether to enable cell selection */
selectable?: boolean;
/** Selected cells */
selectedCells?: Array<{
row: number;
col: number;
}>;
/** Selection change handler */
onSelectionChange?: (cells: Array<{
row: number;
col: number;
}>) => void;
/** Cell click handler */
onCellClick?: (cell: HeatmapCell) => void;
/** Cell hover handler */
onCellHover?: (cell: HeatmapCell | null) => void;
/** Custom cell renderer */
renderCell?: (cell: HeatmapCell) => React.ReactNode;
/** Custom tooltip renderer */
renderTooltip?: (cell: HeatmapCell) => React.ReactNode;
/** Whether to enable zoom */
zoomable?: boolean;
/** Zoom level */
zoomLevel?: number;
/** Zoom change handler */
onZoomChange?: (level: number) => void;
/** Whether to show legend */
showLegend?: boolean;
/** Legend position */
legendPosition?: "top" | "bottom" | "left" | "right";
/** Whether to enable animation */
animated?: boolean;
/** Animation duration in milliseconds */
animationDuration?: number;
/** Respect motion preferences */
respectMotionPreference?: boolean;
}
export declare const GlassHeatmap: React.ForwardRefExoticComponent<GlassHeatmapProps & React.RefAttributes<HTMLDivElement>>;
export default GlassHeatmap;
//# sourceMappingURL=GlassHeatmap.d.ts.map