Insight cardPro

One finding from a data agent: the sentence, a chart of the shift with both levels named, the numbers behind it, a confidence label with its reason and the query one click away.

Markdown

On this page

ProRefunds doubled after a new carrier started shipping: the shift on the chart, the numbers, high confidence and the query.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/insight-card

Usage

tsx

import { InsightCard } from "@/components/ui/chatcn/pro/insight-card"

<InsightCard
  title="Refunds doubled after Northline started shipping on 18 Oct"
  series={weekly}
  changeAt={5}
  numbers={numbers}
  confidence="high"
  confidenceReason="16,086 orders, p < 0.001"
  query={sql}
/>

changeAt splits the series: the baseline steps back to gray with its average dashed, the shift is drawn in the first chart color with its level, and the gap between them is marked. Low confidence turns the label amber so nobody acts on a hunch by accident.

Examples

States

ProMedium and low confidence, streaming, loading and error.

Props

Prop	Type	Notes
`title`, `summary`	`string`, `ReactNode`	The finding and what to do
`series`, `changeAt`, `format`	`{ label, value }[]`, `number`, formatter	The mini chart
`numbers`	`InsightNumber[]`	`{ label, value, note?, good? }`
`confidence`, `confidenceReason`	`high \| medium \| low`, `string`	Three steps and words
`query`, `queryLanguage`, `queryMeta`	`string`	Show the query
`queryOpen`, `defaultQueryOpen`, `onQueryOpenChange`	`boolean`	Disclosure state
`streaming`, `loading`, `error`, `onRetry`, `actions`		Card states and footer actions

Keyboard

Key	Action
Enter on Show the query	Opens or closes the query

Accessibility

The card is an article named by its finding.
Confidence is three bars plus words; deltas say their sign as well as their color.
The query region is inert while closed.

Motion

Show the query opens over 200 ms with a height and opacity transition; reduced motion makes it instant. The title streams with the kit's caret.