"use client" import { useState } from "react" import * as RechartsPrimitive from "recharts" import { type ChartConfig, ChartContainer, ChartWrapper } from "@/components/ui/orecus.io/charts/chart" import { ChartSkeleton } from "@/components/ui/orecus.io/charts/chart/skeleton" import { Button } from "@/components/ui/orecus.io/components/enhanced-button" import { Tabs } from "@/components/ui/orecus.io/navigation/tabs" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Download, RefreshCw, LayoutGrid, LineChart, Server } from "lucide-react" const demoData = [ { name: "Jan", value: 400 }, { name: "Feb", value: 300 }, { name: "Mar", value: 600 }, { name: "Apr", value: 800 }, { name: "May", value: 500 }, { name: "Jun", value: 700 }, ] const chartConfig: ChartConfig = { value: { label: "Value", color: "#6366f1", // Indigo - visible in both modes }, } export function Preview() { const [activeTab, setActiveTab] = useState<"wrapper" | "types" | "skeleton">("wrapper") const [loading, setLoading] = useState(false) const [isLoading, setIsLoading] = useState(true) const handleRefresh = () => { setLoading(true) setTimeout(() => setLoading(false), 1500) } return (

{/* Tab Selection */} setActiveTab(v as typeof activeTab)} fullWidth > }>ChartWrapper }>Chart Types }>Skeleton {/* ChartWrapper Examples */} {activeTab === "wrapper" && (

ChartWrapper provides Card, Header (title/description/actions), and loading state out of the box.

{/* ChartWrapper with Title & Description */} {/* ChartWrapper with Actions */}

} >

)} {/* Chart Types */} {activeTab === "types" && (

ChartContainer provides the responsive container and theming. Use with ChartWrapper or your own layout.

{/* Line Chart */} {/* Bar Chart */} {/* Area Chart */} {/* Pie Chart */}

)} {/* Skeleton */} {activeTab === "skeleton" && (

Server-compatible skeleton for Next.js loading.tsx files.

Same API - pass header to show header skeleton.

{isLoading ? "Skeleton" : "Content"}

{/* With header */}

With Header

{isLoading ? ( ) : ( )}

{/* Without header */}

Without Header

{isLoading ? ( ) : ( )}

{/* Taller chart */}

Taller (350px)

{isLoading ? ( ) : ( )}

{/* Shorter chart */}

Shorter (150px)

{isLoading ? ( ) : ( )}

)} ) }

Chart

Installation

Component

Monthly Revenue

Sales Overview