Components
Loading preview...
here is Area Chart Xsmall component
npx shadcn@latest add https://21st.dev/r/reaviz/area-chart-xs// src/DemoOne.tsx
import React, { useState, useEffect } from 'react';
import { Component as AreaChartComponent, DataPoint } from '@/components/ui/area-chart-xs';
import { cn } from "@/lib/utils";
const generateDemoData = (): DataPoint[] => {
const data: DataPoint[] = [];
const startDate = new Date(2023, 0, 1);
for (let i = 0; i < 15; i++) {
const currentDate = new Date(startDate);
currentDate.setDate(startDate.getDate() + i * 7);
data.push({
key: currentDate,
data: Math.floor(Math.random() * 100) + 20,
});
}
return data;
};
const areaSingleSeriesSimpleData: DataPoint[] = generateDemoData();
const DemoOne = () => {
const [isDarkMode, setIsDarkMode] = useState(true);
useEffect(() => {
const root = window.document.documentElement;
if (isDarkMode) {
root.classList.add('dark');
} else {
root.classList.remove('dark');
}
}, [isDarkMode]);
const toggleTheme = () => {
setIsDarkMode(prevMode => !prevMode);
};
return (
<div className={cn("flex w-full min-h-screen justify-center items-center p-8 bg-background text-foreground transition-colors duration-300")}>
<div className="absolute top-4 right-4">
<button
onClick={toggleTheme}
className={cn(
"px-4 py-2 rounded-lg shadow font-medium border border-border",
"bg-card text-card-foreground hover:bg-muted"
)}
>
Toggle Theme (Current: {isDarkMode ? 'Dark' : 'Light'})
</button>
</div>
<div
className={cn(
"flex flex-col pt-4 pb-4 rounded-3xl shadow-[11px_21px_3px_rgba(0,0,0,0.06),14px_27px_7px_rgba(0,0,0,0.10),19px_38px_14px_rgba(0,0,0,0.13),27px_54px_27px_rgba(0,0,0,0.16),39px_78px_50px_rgba(0,0,0,0.20),55px_110px_86px_rgba(0,0,0,0.26)] w-[450px] h-[386px] overflow-hidden",
"bg-card"
)}
>
<h3 className={cn("text-3xl text-left pl-7 pr-7 pt-6 pb-8 font-bold text-card-foreground")}>
Incident Report
</h3>
<div className="flex-grow pl-2 pr-5 pb-2">
<AreaChartComponent
id="incidentReportChart"
data={areaSingleSeriesSimpleData}
/>
</div>
</div>
</div>
);
};
export { DemoOne };