Auto-insight
The product telling a reader what it noticed on a chart they did not open. Every claim has to link to the evidence, because an insight the reader cannot verify is a rumour with a nice border.
npx shadcn@latest add card button
Tokens this needs: --card, --card-foreground, --muted-foreground, --border, --chart-1
────────────────────────────────────────────────────────────────────────
// InsightCard.tsx
────────────────────────────────────────────────────────────────────────
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
/** What was compared and over what window. Without it the sentence is a
* rumour with a nice border. */
export type Provenance = {
/** How many dimensions were ranked against the baseline. */
dimensions: number;
/** The anomalous window, as the reader would type it into the chart. */
window: string;
};
type Props = {
/** The finding. It should name what separates the anomaly from the
* baseline, which is the work the reader could not do by scanning. */
finding: string;
provenance: Provenance;
/** One click to the data that produced it. Required, because an insight
* that cannot be checked will not be trusted. */
evidenceHref: string;
heading?: string;
};
export function InsightCard({ finding, provenance, evidenceHref, heading = "Insight" }: Props) {
return (
);
}
────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────
import { InsightCard } from "./InsightCard";
/**
* A finding rather than a description: the 40% is what the chart showed, the
* build, region and time are what comparing 38 dimensions found.
*/
export default function Demo() {
return (