Components
Loading preview...
stacked normalized incident chart component
npx shadcn@latest add https://21st.dev/r/reaviz/stacked-normalized-incident-chartimport React from 'react';
import StackedNormalizedIncidentChart from '@/components/ui/stacked-normalized-incident-chart'; // Adjust path as per your actual structure
function StackedNormalizedIncidentChartDemoPage() {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4 transition-colors duration-300">
{/*
To enable dark mode for the demo page and component:
1. Ensure Tailwind CSS is configured for dark mode (e.g., darkMode: 'class' in tailwind.config.js).
2. Apply the 'dark' class to a parent element, typically <html> or <body>.
For Next.js, this might be in your _app.tsx, layout.tsx, or a theme provider.
Example for a global layout:
<html lang="en" className={isDarkMode ? "dark" : ""}> // where isDarkMode is your theme state
*/}
<StackedNormalizedIncidentChart />
</div>
);
}
export default StackedNormalizedIncidentChartDemoPage;