AI Components / Chart Summary
Chart Summary
AI-generated chart insight with natural language summary, trend indicators, confidence badge, type tags, and actions.
ai-display v0.1.0
Playground
Examples
Full insight
<ai-chart-summary summary="Revenue grew 23% month-over-month driven by enterprise tier expansion. Churn decreased slightly, while NPS remained stable." confidence="0.87" timeRange="Last 30 days" collapsible style="max-width:480px;"></ai-chart-summary>Anomaly
<ai-chart-summary type="anomaly" summary="Unusual spike in error rate detected at 14:32 UTC. 3x above the 7-day average." confidence="0.92" timeRange="Today" style="max-width:480px;"></ai-chart-summary>Forecast
<ai-chart-summary type="forecast" summary="Based on current trajectory, MRR is projected to reach $52K by end of Q2." confidence="0.74" style="max-width:480px;"></ai-chart-summary>Compact
<ai-chart-summary compact summary="Revenue up 23%, churn down." confidence="0.87" style="max-width:480px;"></ai-chart-summary>Loading
<ai-chart-summary loading style="max-width:480px;"></ai-chart-summary>Import
import { AiChartSummary } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-chart-summary';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
summary | string | — | Natural language insight text |
trends | {label, direction, value}[] | — | Trend indicators (up/down/neutral) |
confidence | number | — | AI confidence score (0-1) |
type | "summary" | "anomaly" | "forecast" | "comparison" | "summary" | Insight type badge |
timeRange | string | — | Time period (e.g. "Last 30 days") |
collapsible | boolean | false | Enable collapse/expand |
compact | boolean | false | Compact — hides summary text |
loading | boolean | false | Skeleton loading state |
Events
| Event | Detail | Description |
|---|---|---|
ai-summary-toggle | {collapsed: boolean} | Collapsed/expanded |
ai-summary-trend-click | {label, direction, value} | Trend chip clicked |
ai-summary-refresh | {} | Refresh clicked |