"use client";

import { UsageCard } from "@/components/insights/insights-chart";

export default function Example() {
  return <UsageCard labels={["2026-09-01", "2026-09-02", "2026-09-03"]}
    metrics={[{ key: "Conversations", color: "var(--chart-1)", values: [24, 38, 31] }]}
    assistants={[]} channels={[]} defaultVisibleMetrics={["Conversations"]} fetchedAt={Date.now()} />;
}

Included variants

Metrics
Assistants
Channels
Data table
Empty

In Ciele

Use the workspace imports shown above inside Ciele. App components use the shared Tailwind tokens in globals.css. For another project, adapt the imports and bring the dependencies listed in the source.

The chart, breakdown controls, caption and table form a single Usage block. Toggle a legend row, select a brush range or open the data table.

Source files

apps/web/src/components/insights/insights-chart.tsx
apps/web/src/components/insights/analytics-card.tsx
apps/web/src/components/insights/analytics-card.module.css

Source code

The implementation used by Ciele, including its supporting components. Original attribution and license notices remain in the files.

Loading source files…

PreviousMetric grid

NextConversation depth

BlocksUsage

Analytics

Usage

The complete Insights chart: metrics, assistant and channel breakdowns, legends, zoom and a data table.

MetricsAssistantsChannelsData tableEmpty

Live components with example content. Try their controls, or switch the theme and palette.

The chart, breakdown controls, caption and table form a single Usage block. Toggle a legend row, select a brush range or open the data table.

Usage

tsx

"use client";

import { UsageCard } from "@/components/insights/insights-chart";

export default function Example() {
  return <UsageCard labels={["2026-09-01", "2026-09-02", "2026-09-03"]}
    metrics={[{ key: "Conversations", color: "var(--chart-1)", values: [24, 38, 31] }]}
    assistants={[]} channels={[]} defaultVisibleMetrics={["Conversations"]} fetchedAt={Date.now()} />;
}

Included variants

Metrics
Assistants
Channels
Data table
Empty

In Ciele

The chart, breakdown controls, caption and table form a single Usage block. Toggle a legend row, select a brush range or open the data table.

Source files

apps/web/src/components/insights/insights-chart.tsx
apps/web/src/components/insights/analytics-card.tsx
apps/web/src/components/insights/analytics-card.module.css

Source code

The implementation used by Ciele, including its supporting components. Original attribution and license notices remain in the files.

Loading source files…

PreviousMetric grid

NextConversation depth