claritykit-svelte
Version:
A comprehensive Svelte component library focused on accessibility, ADHD-optimized design, developer experience, and full SSR compatibility
51 lines • 1.7 kB
TypeScript
interface TrendDataPoint {
timestamp: string | Date;
value: number;
label?: string;
}
interface TrendAnalysis {
direction: 'up' | 'down' | 'stable';
magnitude: number;
confidence: 'high' | 'medium' | 'low';
changePercent: number;
periodComparison: string;
volatility: 'high' | 'medium' | 'low';
seasonality?: string;
}
interface Props {
value: string | number;
label: string;
subtitle?: string;
data: TrendDataPoint[];
timeframe?: string;
trendAnalysis?: TrendAnalysis;
variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
size?: 'sm' | 'md' | 'lg';
showMiniChart?: boolean;
formatValue?: (value: number) => string;
isLoading?: boolean;
onclick?: () => void;
class?: string;
'data-testid'?: string;
}
/**
* TrendCard
*
* Trend analysis card with time-series visualization and ADHD-optimized cognitive load management.
*
* @prop {string|number} value - Current trend value
* @prop {string} label - Trend label
* @prop {string} [subtitle] - Optional subtitle
* @prop {Array} data - Time-series data for trend visualization
* @prop {string} [timeframe] - Time period for trend analysis
* @prop {Object} [trendAnalysis] - Computed trend metrics
* @prop {string} [variant] - Visual variant
* @prop {string} [size] - Card size
* @prop {boolean} [showMiniChart] - Show embedded trend chart
* @prop {boolean} [isLoading] - Loading state
* @prop {Function} [onclick] - Click handler
*/
declare const TrendCard: import("svelte").Component<Props, {}, "">;
type TrendCard = ReturnType<typeof TrendCard>;
export default TrendCard;
//# sourceMappingURL=TrendCard.svelte.d.ts.map