### Simple Line Chart Setup

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/line-chart.mdx

A minimal example demonstrating how to set up a basic line chart with data, a grid, a single line, and an X-axis. This is useful for straightforward data visualization needs.

```tsx
import { LineChart, Line, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts";

const data = [
  { date: new Date("2025-01-01"), users: 1200 },
  { date: new Date("2025-01-02"), users: 1350 },
  // ...
];

export default function SimpleChart() {
  return (
    <LineChart data={data}>
      <Grid horizontal />
      <Line dataKey="users" />
      <XAxis />
      <ChartTooltip />
    </LineChart>
  );
}
```

--------------------------------

### Install Bklit UI Component

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

Use the CLI to install any Bklit UI component. This automatically downloads the source code, installs dependencies, and places files in your configured component directory.

```bash
npx shadcn@latest add area-chart
```

--------------------------------

### Run Local Development Server

Source: https://github.com/bklit/bklit-ui/blob/main/apps/studio-docs/README.md

Starts the local development server for the studio-docs project from the repository root.

```bash
# from repo root
pnpm --filter studio-docs dev
```

--------------------------------

### Get Shadcn Component Info

Source: https://github.com/bklit/bklit-ui/blob/main/apps/studio-docs/content/docs/primitives.mdx

Retrieve information about the installed shadcn components in JSON format. Run this command from the 'packages/studio' directory.

```bash
pnpm dlx shadcn@latest info --json
```

--------------------------------

### Initialize shadcn/ui

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/installation.mdx

Run this command to set up shadcn/ui in your project before installing Bklit UI components.

```bash
npx shadcn@latest init
```

--------------------------------

### Basic Pie Chart Example

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

A simple example showcasing a basic pie chart with data. This serves as a starting point for creating pie charts.

```tsx
<PieChart data={salesData} size={240}>
  {salesData.map((item, index) => (
    <PieSlice key={item.label} index={index} />
  ))}
</PieChart>
```

--------------------------------

### Run Development Server

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/app/playground/README.md

Use this command to start the development server from the repository root. Open the Studio at the specified localhost address.

```bash
pnpm dev   # repo root
```

--------------------------------

### Install Live Line Chart Dependencies

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/live-line-chart.mdx

Install necessary packages for live line charts, including shape, curve, scale, responsive, event, d3-array, and motion.

```bash
pnpm add @visx/shape @visx/curve @visx/scale @visx/responsive @visx/event d3-array motion
```

--------------------------------

### Install Dependencies for Choropleth Chart

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/choropleth-chart.mdx

Install the necessary dependencies for the Choropleth Chart component using pnpm.

```bash
pnpm add @visx/geo @visx/responsive @visx/pattern @visx/zoom topojson-client motion react-use-measure
```

--------------------------------

### Install a Bklit UI Component

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/installation.mdx

Use the shadcn CLI to add Bklit UI components to your project, specifying the @bklit namespace.

```bash
npx shadcn@latest add @bklit/area-chart
```

--------------------------------

### Install Base UI Dependency for LegendProgress

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/utility/legend.mdx

The LegendProgress component depends on the base-ui library for accessible progress bars. Install it using pnpm.

```bash
pnpm add @base-ui/react
```

--------------------------------

### Install Bklit UI Skill

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/skills.mdx

Installs the bklit-ui skill into your project using npm. This allows your AI assistant to automatically load the skill when working with Bklit charts.

```bash
npx skills add bklit/bklit-ui
```

--------------------------------

### Install and Add BKLIT UI Charts

Source: https://github.com/bklit/bklit-ui/blob/main/skills/bklit-ui/SKILL.md

Commands to check project info, add a specific chart component, and search BKLIT registries.

```bash
# Project info
npx shadcn@latest info --json

# Add a chart
npx shadcn@latest add @bklit/line-chart

# Search registries (if configured)
npx shadcn@latest search @bklit
```

--------------------------------

### Install Radar Chart Dependencies

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/radar-chart.mdx

Lists the necessary packages to install for using the Radar Chart component. Includes charting libraries and animation utilities.

```bash
pnpm add @visx/group @visx/responsive @visx/scale @visx/shape motion
```

--------------------------------

### Line Chart with Tooltips and Markers

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/line-chart.mdx

A basic line chart composition including grid, lines for users and pageviews, markers, X-axis, and a tooltip with custom marker content. This example demonstrates the core setup for a multi-line chart.

```tsx
import { studioChartHref } from "@bklitui/studio";
import { LineChart, Line, Grid, XAxis, ChartTooltip, ChartBrush, ChartBrushLayout, ChartMarkers } from "@bklitui/ui/charts";
import { LineChartBrushDemo } from "@/components/docs/line-chart-brush-demo";
import { LineChartYDomainDemo } from "@/components/docs/line-chart-y-domain-demo";
import { MarkerContentDemo } from "@/components/docs/marker-content-demo";
import { OpenInStudioButton } from "@/components/docs/open-in-studio-button";
import {
  lineChartDocsData as chartData,
  lineChartDocsMarkers as demoMarkers,
} from "@/components/docs/line-chart-docs-data";

<ComponentPreview registryName="line-chart">
  <div className="w-full">
    <LineChart data={chartData}>
      <Grid horizontal />
      <Line dataKey="users" stroke="var(--chart-line-primary)" />
      <Line dataKey="pageviews" stroke="var(--chart-line-secondary)" />
      <ChartMarkers items={demoMarkers} />
      <XAxis />
      <ChartTooltip>
        <MarkerContentDemo markers={demoMarkers} />
      </ChartTooltip>
    </LineChart>
  </div>
</ComponentPreview>
```

--------------------------------

### Add Bklit Line Chart using Shadcn CLI

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/skills.mdx

Configures the @bklit namespace and installs a line chart using the shadcn CLI. This is part of the registry installation process for Bklit charts.

```bash
npx shadcn@latest add @bklit/line-chart
```

--------------------------------

### Configure Bklit UI Registry

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/installation.mdx

Add the Bklit UI registry to your components.json file to enable installation of Bklit components.

```json
{
  "registries": {
    "@bklit": "https://ui.bklit.com/r/{name}.json"
  }
}
```

--------------------------------

### Default Tooltip Example

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/utility/tooltip.mdx

A full-featured tooltip example including crosshair, dots, and date pill. This showcases the default behavior and appearance.

```tsx
<LineChart data={data}>
  <Grid horizontal />
  <Line dataKey="users" stroke="var(--chart-line-primary)" />
  <Line dataKey="pageviews" stroke="var(--chart-line-secondary)" />
  <XAxis />
  <ChartTooltip />
</LineChart>
```

--------------------------------

### Line Chart with Tooltip and Markers

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

This example demonstrates how to create a Line Chart with data, tooltips, and custom markers. It includes imports for necessary components and defines sample data and markers.

```javascript
import { LineChart, Line, Grid, XAxis, ChartTooltip, ChartMarkers } from "@bklitui/ui/charts";
import { MarkerContentDemo } from "@/components/docs/marker-content-demo";

export const chartData = [
  { date: new Date(Date.now() - 29 * 24 * 60 * 60 * 1000), users: 1200, pageviews: 4500 },
  { date: new Date(Date.now() - 28 * 24 * 60 * 60 * 1000), users: 1350, pageviews: 4800 },
  { date: new Date(Date.now() - 27 * 24 * 60 * 60 * 1000), users: 1100, pageviews: 4200 },
  { date: new Date(Date.now() - 26 * 24 * 60 * 60 * 1000), users: 1450, pageviews: 5100 },
  { date: new Date(Date.now() - 25 * 24 * 60 * 60 * 1000), users: 1380, pageviews: 4900 },
  { date: new Date(Date.now() - 24 * 24 * 60 * 60 * 1000), users: 1520, pageviews: 5400 },
  { date: new Date(Date.now() - 23 * 24 * 60 * 60 * 1000), users: 1600, pageviews: 5800 },
  { date: new Date(Date.now() - 22 * 24 * 60 * 60 * 1000), users: 1480, pageviews: 5200 },
  { date: new Date(Date.now() - 21 * 24 * 60 * 60 * 1000), users: 1550, pageviews: 5500 },
  { date: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000), users: 1420, pageviews: 5000 },
  { date: new Date(Date.now() - 19 * 24 * 60 * 60 * 1000), users: 1680, pageviews: 6100 },
  { date: new Date(Date.now() - 18 * 24 * 60 * 60 * 1000), users: 1750, pageviews: 6400 },
  { date: new Date(Date.now() - 17 * 24 * 60 * 60 * 1000), users: 1620, pageviews: 5900 },
  { date: new Date(Date.now() - 16 * 24 * 60 * 60 * 1000), users: 1580, pageviews: 5700 },
  { date: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000), users: 1720, pageviews: 6200 },
  { date: new Date(Date.now() - 14 * 24 * 60 * 60 * 1000), users: 1850, pageviews: 6800 },
  { date: new Date(Date.now() - 13 * 24 * 60 * 60 * 1000), users: 1780, pageviews: 6500 },
  { date: new Date(Date.now() - 12 * 24 * 60 * 60 * 1000), users: 1650, pageviews: 6000 },
  { date: new Date(Date.now() - 11 * 24 * 60 * 60 * 1000), users: 1920, pageviews: 7100 },
  { date: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000), users: 1880, pageviews: 6900 },
  { date: new Date(Date.now() - 9 * 24 * 60 * 60 * 1000), users: 1750, pageviews: 6400 },
  { date: new Date(Date.now() - 8 * 24 * 60 * 60 * 1000), users: 1980, pageviews: 7300 },
  { date: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), users: 2050, pageviews: 7600 },
  { date: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000), users: 1920, pageviews: 7100 },
  { date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), users: 2100, pageviews: 7800 },
  { date: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000), users: 2180, pageviews: 8100 },
  { date: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000), users: 2050, pageviews: 7600 },
  { date: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), users: 2250, pageviews: 8400 },
  { date: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000), users: 2320, pageviews: 8700 },
  { date: new Date(), users: 2400, pageviews: 9000 },
];

export const demoMarkers = [
  // 5 days ago - multiple events to test fan animation (with clickable links)
  { date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), icon: "🚀", title: "v1.2.0 Released", description: "New chart animations", href: "https://github.com/bklit/bklit-ui/releases", target: "_blank" },
  { date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), icon: "🐛", title: "Bug Fix", description: "Fixed tooltip positioning", href: "https://github.com/bklit/bklit-ui/issues", target: "_blank" },
  { date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), icon: "📦", title: "Dependency Update", description: "Updated motion to v12", href: "https://motion.dev", target: "_blank" },
  { date: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000), icon: "⚡", title: "Performance", description: "50% faster renders", href: "#performance", target: "_self" },
  // 12 days ago - single marker
  { date: new Date(Date.now() - 12 * 24 * 60 * 60 * 1000), icon: "✨", title: "Feature Launch", description: "Added grid support", href: "#grid", target: "_self" },
  // 20 days ago - pair of markers
  { date: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000), icon: "🎨", title: "Design Update", description: "New color system", href: "#theming", target: "_self" },
  { date: new Date(Date.now() - 20 * 24 * 60 * 60 * 1000), icon: "📝", title: "Docs Updated", description: "Added examples", href: "#usage", target: "_self" },
];

// Example usage within a React component:
// <LineChart data={chartData}>
//   <XAxis />
//   <Line dataKey="users" />
//   <Line dataKey="pageviews" />
//   <ChartTooltip />
//   <ChartMarkers markers={demoMarkers} />
// </LineChart>
```

--------------------------------

### Verify Project Context with shadcn

Source: https://github.com/bklit/bklit-ui/blob/main/skills/bklit-ui/rules/installation.md

Check your project's configuration, including framework, aliases, and installed `@bklit` components, by running this command. Use the JSON output for detailed information.

```bash
npx shadcn@latest info --json
```

--------------------------------

### Install Bklit UI Chart Component

Source: https://github.com/bklit/bklit-ui/blob/main/skills/bklit-ui/SKILL.md

Use the shadcn CLI to add a specific Bklit UI chart component to your project. Ensure the @bklit registry is configured in your components.json.

```Bash
npx shadcn@latest add @bklit/<slug>
```

--------------------------------

### Basic Area Chart Setup

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

Demonstrates the fundamental structure of an Area Chart, including data, grid, areas, x-axis, and tooltip. Ensure all necessary components are imported.

```tsx
import { AreaChart, Area, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts";

const data = [
  { date: new Date("2025-01-01"), revenue: 12000, costs: 8500 },
  { date: new Date("2025-01-02"), revenue: 13500, costs: 9200 },
  // ... more data
];

export default function RevenueChart() {
  return (
    <AreaChart data={data}>
      <Grid horizontal />
      <Area dataKey="revenue" fill="var(--chart-line-primary)" />
      <Area dataKey="costs" fill="var(--chart-line-secondary)" />
      <XAxis />
      <ChartTooltip />
    </AreaChart>
  );
}
```

--------------------------------

### Pie Chart Dependencies

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/pie-chart.mdx

Lists the necessary packages to install for using the Pie Chart component. Use pnpm to add these dependencies to your project.

```bash
pnpm add @visx/shape @visx/group @visx/responsive @visx/pattern @visx/gradient d3-shape motion
```

--------------------------------

### Basic Line Chart Composition

Source: https://github.com/bklit/bklit-ui/blob/main/skills/bklit-ui/SKILL.md

Example of composing a LineChart with Grid, Line, XAxis, and ChartTooltip components. Ensure necessary imports are present.

```tsx
import { LineChart, Line, Grid, XAxis, ChartTooltip, chartCssVars } from "@bklitui/ui/charts";

<LineChart data={data} xDataKey="date">
  <Grid horizontal />
  <Line dataKey="users" stroke={chartCssVars.linePrimary} />
  <XAxis />
  <ChartTooltip />
</LineChart>
```

--------------------------------

### Chart Dependencies Installation

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

Lists the npm packages required for chart components, including scales, shapes, responsiveness, event handling, grids, d3-array, and motion.

```bash
pnpm add @visx/shape @visx/scale @visx/responsive @visx/event @visx/grid d3-array motion react-use-measure
```

--------------------------------

### Usage of MotionEasePresetGrid Component

Source: https://github.com/bklit/bklit-ui/blob/main/apps/studio-docs/content/docs/motion.mdx

Example of how to use the MotionEasePresetGrid component in an application. It handles selecting ease presets and updating motionEase and motionBezier states.

```tsx
import { Icon } from "@bklitui/icons";
import { MotionEasePresetGrid } from "@/components/controls/motion-ease-preset-grid";
import { motionEasePresetUpdates } from "@/lib/motion-config";

<MotionEasePresetGrid
  value={state.motionEase}
  onSelect={(id) => {
    const preset = motionEasePresetUpdates(id);
    onCommit("motionEase", preset.motionEase);
    onCommit("motionBezier", preset.motionBezier);
  }}
/>
```

--------------------------------

### Bar Chart Usage Example

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/bar-chart.mdx

Demonstrates how to use the BarChart component in a React application. Ensure necessary components like Bar, BarXAxis, Grid, and ChartTooltip are imported.

```tsx
import {
  BarChart,
  Bar,
  BarXAxis,
  Grid,
  ChartTooltip,
} from "@bklitui/ui/charts";

const data = [
  { month: "Jan", revenue: 12000, profit: 4500 },
  { month: "Feb", revenue: 15500, profit: 5200 },
  // ... more data
];

export default function RevenueChart() {
  return (
    <BarChart data={data} xDataKey="month">
      <Grid horizontal />
      <Bar dataKey="revenue" fill="var(--chart-line-primary)" lineCap="round" />
      <Bar
        dataKey="profit"
        fill="var(--chart-line-secondary)"
        lineCap="round"
      />
      <BarXAxis />
      <ChartTooltip />
    </BarChart>
  );
}
```

--------------------------------

### Basic Ring Chart Example

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

A simple RingChart with default settings. It requires data and child Ring components. The RingCenter component displays the total value.

```tsx
<RingChart data={sessionsData} size={280}>
  {sessionsData.map((_, index) => (
    <Ring key={index} index={index} />
  ))}
  <RingCenter />
</RingChart>
```

--------------------------------

### Ring Chart Dependencies

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/ring-chart.mdx

Lists the necessary npm packages required to use the Ring Chart component. Install these dependencies using your package manager.

```bash
pnpm add @visx/shape @visx/group @visx/responsive motion
```

--------------------------------

### Ring Chart Usage Example

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/ring-chart.mdx

Demonstrates how to use the RingChart component with its child components (Ring and RingCenter) to display progress data. Ensure the necessary components are imported from '@bklitui/ui/charts'.

```tsx
import { RingChart, Ring, RingCenter } from "@bklitui/ui/charts";

const data = [
  { label: "Organic", value: 4250, maxValue: 5000, color: "#0ea5e9" },
  { label: "Paid", value: 3120, maxValue: 5000, color: "#a855f7" },
  { label: "Email", value: 2100, maxValue: 5000, color: "#f59e0b" },
];

export default function SessionsChart() {
  return (
    <RingChart data={data} size={300}>
      {data.map((item, index) => (
        <Ring key={item.label} index={index} />
      ))}
      <RingCenter defaultLabel="Total Sessions" />
    </RingChart>
  );
}
```

--------------------------------

### Radar Chart Usage Example

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/radar-chart.mdx

Demonstrates how to use the RadarChart component with its sub-components like RadarGrid, RadarAxis, RadarLabels, and RadarArea. Define metrics and data to render the chart.

```tsx
import { RadarChart, RadarGrid, RadarAxis, RadarLabels, RadarArea } from "@bklitui/ui/charts";

const metrics = [
  { key: "speed", label: "Speed" },
  { key: "power", label: "Power" },
  { key: "technique", label: "Technique" },
];

const data = [
  { label: "Player A", color: "#3b82f6", values: { speed: 85, power: 70, technique: 90 } },
  { label: "Player B", color: "#f59e0b", values: { speed: 65, power: 95, technique: 60 } },
];

export default function PerformanceRadar() {
  return (
    <RadarChart data={data} metrics={metrics} size={400}>
      <RadarGrid />
      <RadarAxis />
      <RadarLabels />
      {data.map((item, index) => (
        <RadarArea key={item.label} index={index} />
      ))}
    </RadarChart>
  );
}
```

--------------------------------

### Import Bklit UI Charts

Source: https://github.com/bklit/bklit-ui/blob/main/skills/bklit-ui/rules/installation.md

Import components after installation. The import path depends on your project's shadcn configuration and aliases. Alternatively, import directly from the npm package re-exports.

```tsx
import { LineChart, Line, Grid, XAxis, ChartTooltip } from "@/components/ui/line-chart";
```

```tsx
// or from package re-exports when using the npm package directly:
import { LineChart, Line, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts";
```

--------------------------------

### Choropleth Chart Usage Example

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/choropleth-chart.mdx

Demonstrates how to use the ChoroplethChart component with its sub-components to render a world map. Ensure GeoJSON data is loaded and converted from TopoJSON if necessary.

```tsx
import { ChoroplethChart, ChoroplethFeatureComponent, ChoroplethGraticule, ChoroplethTooltip } from "@bklitui/ui/charts";
import * as topojson from "topojson-client";

// Load your GeoJSON data (from TopoJSON or direct GeoJSON)
const geojson = topojson.feature(topology, topology.objects.countries);

export default function WorldMap() {
  return (
    <ChoroplethChart data={geojson} aspectRatio="16 / 9">
      <ChoroplethGraticule />
      <ChoroplethFeatureComponent fill="var(--chart-1)" />
      <ChoroplethTooltip />
    </ChoroplethChart>
  );
}
```

--------------------------------

### Gauge Chart Usage

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

Renders a GaugeChart with specified value, center value, spacing, and formatting. This example demonstrates a basic setup for displaying revenue run rate.

```tsx
import { Gauge, PatternLines } from "@bklitui/ui/charts";

export default function RevenueGauge() {
  return (
    <Gauge
      value={66}
      centerValue={428_000}
      spacing={25}
      inactiveFillOpacity={0.4}
      defaultLabel="ARR run rate"
      formatOptions={{
        style: "currency",
        currency: "USD",
        maximumFractionDigits: 0,
      }}
    />
  );
}
```

--------------------------------

### Initialize shadcn and add Bklit Line Chart

Source: https://github.com/bklit/bklit-ui/blob/main/README.md

Use these commands to initialize shadcn in your project and then add the Bklit line chart component.

```bash
npx shadcn@latest init
npx shadcn@latest add @bklit/line-chart
```

--------------------------------

### Revenue Gauge Example

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/gauge-chart.mdx

A basic example of a Gauge component displaying revenue, configured with a specific value, center statistic, spacing, and currency formatting.

```tsx
import { Gauge, PatternLines } from "@bklitui/ui/charts";

export default function RevenueGauge() {
  return (
    <Gauge
      value={66}
      centerValue={428000}
      spacing={25}
      inactiveFillOpacity={0.4}
      defaultLabel="ARR run rate"
      formatOptions={{
        style: "currency",
        currency: "USD",
        maximumFractionDigits: 0,
      }}
    />
  );
}
```

--------------------------------

### Sankey Chart Component Setup

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

Import and utilize the SankeyChart component along with its related components and demo data. This setup is for a typical Sankey Chart visualization.

```tsx
import { SankeyChart, SankeyNode, SankeyLink, SankeyTooltip, PatternLines } from "@bklitui/ui/charts";
import { SankeyPatternDemo, SankeyNoLabelsDemo } from "@/components/docs/sankey-pattern-demo";

export const analyticsData = {
  nodes: [
    { name: "Organic Search", category: "source" },
    { name: "Paid Search", category: "source" },
    { name: "Paid Social", category: "source" },
    { name: "Email", category: "source" },
    { name: "Referral", category: "source" },
    { name: "Direct", category: "source" },
    { name: "Blog", category: "landing" },
    { name: "Pricing", category: "landing" },
    { name: "Product", category: "landing" },
    { name: "Docs", category: "landing" },
    { name: "Homepage", category: "landing" },
    { name: "Converted", category: "outcome" },
    { name: "Engaged", category: "outcome" },
    { name: "Bounced", category: "outcome" },
  ],
  links: [
    { source: 0, target: 6, value: 4200 },
    { source: 0, target: 9, value: 2800 },
    { source: 0, target: 7, value: 1500 },
    { source: 1, target: 7, value: 3100 },
    { source: 1, target: 8, value: 2200 },
    { source: 1, target: 6, value: 800 },
    { source: 2, target: 6, value: 2800 },
    { source: 2, target: 10, value: 1900 },
    { source: 2, target: 8, value: 600 },
    { source: 3, target: 7, value: 2100 },
    { source: 3, target: 8, value: 1400 },
    { source: 3, target: 6, value: 900 },
    { source: 4, target: 6, value: 1800 },
    { source: 4, target: 9, value: 1200 },
    { source: 4, target: 7, value: 700 },
    { source: 5, target: 10, value: 3500 },
    { source: 5, target: 7, value: 1800 },
    { source: 5, target: 8, value: 1100 },
    { source: 6, target: 11, value: 2100 },
    { source: 6, target: 12, value: 4800 },
    { source: 6, target: 13, value: 3600 },
    { source: 7, target: 11, value: 4500 },
    { source: 7, target: 12, value: 3200 },
    { source: 7, target: 13, value: 1500 },
    { source: 8, target: 11, value: 2800 },
    { source: 8, target: 12, value: 1900 },
    { source: 8, target: 13, value: 600 },
    { source: 9, target: 11, value: 800 },
    { source: 9, target: 12, value: 2400 },
    { source: 9, target: 13, value: 800 },
    { source: 10, target: 11, value: 1200 },
    { source: 10, target: 12, value: 1800 },
    { source: 10, target: 13, value: 2400 },
  ],
};
```

--------------------------------

### Add shadcn Components

Source: https://github.com/bklit/bklit-ui/blob/main/apps/studio-docs/content/docs/index.mdx

Command to add shadcn components to the studio project. Navigate to the studio directory first.

```bash
cd packages/studio && pnpm ui:add <name>
```

--------------------------------

### Add a Shadcn Component

Source: https://github.com/bklit/bklit-ui/blob/main/apps/studio-docs/content/docs/primitives.mdx

Use the CLI to add new shadcn components to the Studio project. Navigate to the 'packages/studio' directory and run the 'pnpm ui:add' command followed by the component name.

```bash
cd packages/studio
pnpm ui:add dropdown-menu
```

--------------------------------

### Basic Live Line Chart Usage

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/live-line-chart.mdx

Demonstrates the basic setup for a live line chart, including data streaming and essential chart components. Ensure you have the necessary imports from '@bklitui/ui/charts'.

```tsx
import {
  LiveLineChart,
  LiveLine,
  ChartTooltip,
  LiveXAxis,
  LiveYAxis,
} from "@bklitui/ui/charts";

const [data, setData] = useState([]);
const [value, setValue] = useState(100);

// Append new points (e.g. from WebSocket or polling)
useEffect(() => {
  const id = setInterval(() => {
    const point = { time: Date.now() / 1000, value: fetchLatest() };
    setData((prev) => [...prev.slice(-500), point]);
    setValue(point.value);
  }, 1000);
  return () => clearInterval(id);
}, []);

<LiveLineChart data={data} value={value} window={30}>
  <LiveLine dataKey="value" stroke="var(--chart-line-primary)" formatValue={(v) => `$${v.toFixed(2)}`} />
  <ChartTooltip showDatePill={false} content={MyTooltipContent} />
  <LiveXAxis />
  <LiveYAxis position="left" formatValue={(v) => `$${v.toFixed(2)}`} />
</LiveLineChart>
```

--------------------------------

### ChartTypeSelector Usage Example

Source: https://github.com/bklit/bklit-ui/blob/main/apps/studio-docs/content/docs/control-surfaces.mdx

Demonstrates how to use the ChartTypeSelector component to manage chart selection. Requires importing ChartTypeSelector and useState.

```tsx
import { ChartTypeSelector } from "@/components/chart-type-selector";

const [chart, setChart] = useState<ChartSlug>("area-chart");

<ChartTypeSelector onChange={setChart} value={chart} />
```

--------------------------------

### Single Area Chart Example

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

A minimal Area Chart displaying a single metric. This is useful for focusing on one data series.

```tsx
<AreaChart data={data}>
  <Area dataKey="value" fill="#3b82f6" />
  <ChartTooltip />
</AreaChart>
```

--------------------------------

### Common Use Cases

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/utility/use-chart.mdx

Examples demonstrating how to use the data returned by the useChart hook for common charting functionalities like reading hover positions, accessing bar positions, and using scales for custom rendering.

```APIDOC
## Common Use Cases

### Reading Hover Position
```tsx
function HoverIndicator() {
  const { tooltipData, innerHeight, margin } = useChart();
  
  if (!tooltipData) return null;
  
  return (
    <div 
      style={{ 
        position: 'absolute',
        left: tooltipData.x + margin.left,
        top: margin.top,
        height: innerHeight,
      }}
    >
      {/* Custom indicator */}
    </div>
  );
}
```

### Accessing Bar Positions
```tsx
function BarOverlay() {
  const { barScale, bandWidth, hoveredBarIndex, data } = useChart();
  
  if (!barScale || hoveredBarIndex === null) return null;
  
  const hoveredData = data[hoveredBarIndex];
  const x = barScale(hoveredData.category);
  
  return (
    <rect x={x} width={bandWidth} /* ... */ />
  );
}
```

### Using Scales for Custom Rendering
```tsx
function CustomMarker({ value, category }) {
  const { yScale, barScale, innerHeight } = useChart();
  
  const y = yScale(value);
  const x = barScale?.(category) ?? 0;
  
  return (
    <circle cx={x} cy={y} r={5} fill="red" />
  );
}
```
```

--------------------------------

### Crosshair Fade Effect Configuration

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/utility/tooltip.mdx

Demonstrates configuring the crosshair fade effect using `indicatorFadeEdges` and `indicatorFadeLength`. This example fades the crosshair from the top.

```tsx
<LineChart data={data}>
  <Grid horizontal />
  <Line dataKey="users" stroke="var(--chart-line-primary)" />
  <XAxis />
  <ChartTooltip
    showDots={false}
    showDatePill={false}
    indicatorFadeEdges="top"
    indicatorFadeLength={22}
    indicatorColor="var(--chart-2)"
  />
</LineChart>
```

--------------------------------

### 3D Depth and Glass Surfaces with Bar Chart

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/bar-chart.mdx

Use BarDepthBack and BarDepthFront to give bars a 3D perspective and glass sheen. Ensure 'perspective' is set on the Bar component for proper alignment. Place BarDepthBack before Bar, and BarDepthFront after Bar.

```tsx
import {
  BarChart,
  Bar,
  BarDepthBack,
  BarDepthFront,
  BarXAxis,
  Grid,
  ChartTooltip,
} from "@bklitui/ui/charts";

<BarChart data={data} xDataKey="month">
  <Grid horizontal />
  <BarDepthBack dataKey="revenue" color="var(--chart-1)" />
  <Bar dataKey="revenue" fill="var(--chart-1)" perspective />
  <BarDepthFront dataKey="revenue" />
  <BarXAxis />
  <ChartTooltip />
</BarChart>
```

--------------------------------

### Replay Enter Animations with Key

Source: https://github.com/bklit/bklit-ui/blob/main/skills/bklit-ui/rules/animation.md

Replay mount animations for a LineChart by changing its `key` prop. This is useful for re-triggering animations after prop changes.

```tsx
const [replayKey, setReplayKey] = useState(0);

<LineChart key={replayKey} data={data} revealSignature={String(replayKey)}>
  {/* ... */}
</LineChart>

<button type="button" onClick={() => setReplayKey((k) => k + 1)}>
  Replay
</button>
```

--------------------------------

### Sankey Chart with Analytics Data

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/sankey-chart.mdx

Example of rendering a Sankey Chart with a predefined analytics dataset. Includes SankeyLink, SankeyNode, and SankeyTooltip components.

```tsx
import { SankeyChart, SankeyNode, SankeyLink, SankeyTooltip } from "@bklitui/ui/charts";

export const analyticsData = {
  nodes: [
    { name: "Organic Search", category: "source" },
    { name: "Paid Search", category: "source" },
    { name: "Paid Social", category: "source" },
    { name: "Email", category: "source" },
    { name: "Referral", category: "source" },
    { name: "Direct", category: "source" },
    { name: "Blog", category: "landing" },
    { name: "Pricing", category: "landing" },
    { name: "Product", category: "landing" },
    { name: "Docs", category: "landing" },
    { name: "Homepage", category: "landing" },
    { name: "Converted", category: "outcome" },
    { name: "Engaged", category: "outcome" },
    { name: "Bounced", category: "outcome" },
  ],
  links: [
    { source: 0, target: 6, value: 4200 },
    { source: 0, target: 9, value: 2800 },
    { source: 0, target: 7, value: 1500 },
    { source: 1, target: 7, value: 3100 },
    { source: 1, target: 8, value: 2200 },
    { source: 1, target: 6, value: 800 },
    { source: 2, target: 6, value: 2800 },
    { source: 2, target: 10, value: 1900 },
    { source: 2, target: 8, value: 600 },
    { source: 3, target: 7, value: 2100 },
    { source: 3, target: 8, value: 1400 },
    { source: 3, target: 6, value: 900 },
    { source: 4, target: 6, value: 1800 },
    { source: 4, target: 9, value: 1200 },
    { source: 4, target: 7, value: 700 },
    { source: 5, target: 10, value: 3500 },
    { source: 5, target: 7, value: 1800 },
    { source: 5, target: 8, value: 1100 },
    { source: 6, target: 11, value: 2100 },
    { source: 6, target: 12, value: 4800 },
    { source: 6, target: 13, value: 3600 },
    { source: 7, target: 11, value: 4500 },
    { source: 7, target: 12, value: 3200 },
    { source: 7, target: 13, value: 1500 },
    { source: 8, target: 11, value: 2800 },
    { source: 8, target: 12, value: 1900 },
    { source: 8, target: 13, value: 600 },
    { source: 9, target: 11, value: 800 },
    { source: 9, target: 12, value: 2400 },
    { source: 9, target: 13, value: 800 },
    { source: 10, target: 11, value: 1200 },
    { source: 10, target: 12, value: 1800 },
    { source: 10, target: 13, value: 2400 },
  ],
};

<ComponentPreview registryName="sankey-chart">
  <div className="w-full">
    <SankeyChart data={analyticsData} aspectRatio="16 / 9" nodeWidth={16} nodePadding={24}>
      <SankeyLink />
      <SankeyNode lineCap={4} />
      <SankeyTooltip />
    </SankeyChart>
  </div>
</ComponentPreview>
```

--------------------------------

### Import and Use Icon Component

Source: https://github.com/bklit/bklit-ui/blob/main/apps/studio-docs/content/docs/icons.mdx

Import the `Icon` component from `@bklitui/icons` and use it with a typed `name` prop to display an icon. Ensure the `iconLibrary` is set to `central` in `components.json` and `CENTRAL_LICENSE_KEY` is configured in your environment.

```tsx
import { Icon } from "@bklitui/icons";

<Icon className="size-4" name="IconBezierCurves" />
```

--------------------------------

### Full Motion Panel Demo

Source: https://github.com/bklit/bklit-ui/blob/main/apps/studio-docs/content/docs/motion.mdx

Demonstrates the complete Motion panel, which integrates the Bezier editor, duration scrubber, stagger scale, bounce, and ease preset grid into a single interface.

```tsx
<ComponentShowcase>
  <StudioUiPreview>
    <MotionControlDemo />
  </StudioUiPreview>
</ComponentShowcase>
```

--------------------------------

### Sankey Chart Dependencies

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/sankey-chart.mdx

Lists the necessary packages to install for using the Sankey chart component. This includes Sankey, responsive, pattern, motion, and react-use-measure.

```bash
pnpm add @visx/sankey @visx/responsive @visx/pattern motion react-use-measure
```

--------------------------------

### Toggle Group Demo

Source: https://github.com/bklit/bklit-ui/blob/main/apps/studio-docs/content/docs/toggle-groups.mdx

A demonstration of the StudioToggleGroup component, showcasing its integration with Studio layout presets.

```typescript
function ToggleGroupDemo() {
  return (
    <StudioToggleGroup
      type="single"
      defaultValue="center"
      aria-label="Text alignment"
    >
      <StudioToggleGroupItem value="left" aria-label="Left aligned">
        <AlignLeft />
      </StudioToggleGroupItem>
      <StudioToggleGroupItem value="center" aria-label="Center aligned">
        <AlignCenter />
      </StudioToggleGroupItem>
      <StudioToggleGroupItem value="right" aria-label="Right aligned">
        <AlignRight />
      </StudioToggleGroupItem>
    </StudioToggleGroup>
  );
}
```

--------------------------------

### Simple Legend Example

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/utility/legend.mdx

A basic implementation of the Legend component with custom styling for items, markers, labels, and values. Suitable for straightforward data visualization.

```tsx
<Legend items={data}>
  <LegendItemComponent className="flex items-center gap-3">
    <LegendMarker />
    <LegendLabel className="flex-1" />
    <LegendValue />
  </LegendItemComponent>
</Legend>
```

--------------------------------

### Combining Area and Line Charts

Source: https://github.com/bklit/bklit-ui/blob/main/wiki/llms-full.txt

This example shows how to combine `Area` and `Line` components within a `LineChart` container. It's useful for displaying a primary metric alongside a background area for context. Ensure `LineChart`, `Line`, `Area`, `Grid`, and `ChartTooltip` are imported.

```tsx
import { LineChart, Line, Area, Grid, ChartTooltip } from "@bklitui/ui/charts";

<LineChart data={data}>
  <Grid horizontal />
  {/* Background area for context */}
  <Area
    dataKey="baseline"
    fill="var(--chart-grid)"
    fillOpacity={0.3}
    showLine={false}
  />
  {/* Main line for the primary metric */}
  <Line dataKey="actual" stroke="var(--chart-line-primary)" />
  <ChartTooltip />
</LineChart>
```

--------------------------------

### Custom Legend Value Formatting

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/utility/legend.mdx

Customize how legend values are displayed using the `formatValue` and `formatPercentage` props. This example formats revenue data into thousands with a '$' prefix.

```tsx
<Legend items={revenueData}>
  <LegendItemComponent className="flex items-center gap-3">
    <LegendMarker />
    <LegendLabel className="flex-1" />
    <LegendValue 
      formatValue={(v) => `$${(v / 1000).toFixed(0)}k`}
      showPercentage
      formatPercentage={(p) => `(${p.toFixed(1)}%)`}
    />
  </LegendItemComponent>
</Legend>
```

--------------------------------

### Basic ComposedChart Example

Source: https://github.com/bklit/bklit-ui/blob/main/apps/web/content/docs/components/composed-chart.mdx

Demonstrates a basic ComposedChart with Area, SeriesBar, and Line series. Includes Grid, ChartTooltip, and XAxis configurations. Use this for combining different data representations on a shared time axis.

```tsx
import {
  Area,
  ComposedChart,
  Grid,
  Line,
  SeriesBar,
  XAxis,
  ChartTooltip,
} from "@bklitui/ui/charts";
import { curveCatmullRom } from "@visx/curve";
import { composedDemoData } from "@/lib/composed-demo-data";

const smooth = curveCatmullRom.alpha(0.42);

export default function Example() {
  return (
    <ComposedChart
      aspectRatio="2 / 1"
      barGap={0}
      data={composedDemoData}
      maxBarSize={32}
      xDataKey="date"
    >
      <Grid horizontal />
      <Area
        curve={smooth}
        dataKey="runRate"
        fill="var(--chart-4)"
        fillOpacity={0.32}
      />
      <SeriesBar dataKey="units" fill="var(--chart-3)" radius={4} />
      <Line curve={smooth} dataKey="revenue" stroke="var(--chart-1)" />
      <ChartTooltip showCrosshair={false} />
      <XAxis numTicks={8} />
    </ComposedChart>
  );
}
```