If you want to see yesterday's challenge: Receipt Interface in React
If you want to try the challenge yourself: DailyUI
Today, we're designing analytics charts, an essential feature for modern data visualization. I've created a flexible, interactive dashboard that showcases different types of charts while maintaining performance and usability.
The interface should include:
Line chart for trend analysis
Bar chart for comparison
Pie chart for distribution
Data filtering options
Interactive tooltips
Legend customization
Responsive design
The solution 💡
Here's the React component that brings together these requirements using the Recharts library:
import React, { useState } from 'react';
import {
LineChart, Line, BarChart, Bar, PieChart, Pie,
XAxis, YAxis, CartesianGrid, Tooltip, Legend,
ResponsiveContainer, Cell
} from 'recharts';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select';
const Analytics = ({ data }) => {
const [timeRange, setTimeRange] = useState('week');
const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
return (
<div className="w-full space-y-6">
{/* Filter Controls */}
<div className="flex justify-end">
<Select value={timeRange} onValueChange={setTimeRange}>
<SelectTrigger className="w-32">
<SelectValue placeholder="Select range" />
</SelectTrigger>
<SelectContent>
<SelectItem value="week">Week</SelectItem>
<SelectItem value="month">Month</SelectItem>
<SelectItem value="year">Year</SelectItem>
</SelectContent>
</Select>
</div>
{/* Line Chart */}
<Card>
<CardHeader>
<CardTitle>Trend Analysis</CardTitle>
</CardHeader>
<CardContent>
<ResponsiveContainer width="100%" height={300}>
<LineChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Line
type="monotone"
dataKey="value"
stroke="#8884d8"
activeDot={{ r: 8 }}
/>
</LineChart>
</ResponsiveContainer>
</CardContent>
</Card>
{/* Bar Chart */}
<Card>
<CardHeader>
<CardTitle>Comparison Analysis</CardTitle>
</CardHeader>
<CardContent>
<ResponsiveContainer width="100%" height={300}>
<BarChart data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Legend />
<Bar dataKey="value" fill="#8884d8" />
<Bar dataKey="comparison" fill="#82ca9d" />
</BarChart>
</ResponsiveContainer>
</CardContent>
</Card>
{/* Pie Chart */}
<Card>
<CardHeader>
<CardTitle>Distribution Analysis</CardTitle>
</CardHeader>
<CardContent>
<ResponsiveContainer width="100%" height={300}>
<PieChart>
<Pie
data={data}
dataKey="value"
nameKey="name"
cx="50%"
cy="50%"
outerRadius={100}
label
>
{data.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
<Legend />
</PieChart>
</ResponsiveContainer>
</CardContent>
</Card>
</div>
);
};
export default Analytics;
To use this component, you would pass your data as a prop:
import Analytics from './Analytics';
const sampleData = [
{ name: 'Jan', value: 4000, comparison: 2400 },
{ name: 'Feb', value: 3000, comparison: 1398 },
{ name: 'Mar', value: 2000, comparison: 9800 },
{ name: 'Apr', value: 2780, comparison: 3908 },
];
function App() {
return (
<div className="min-h-screen p-8 bg-gray-100">
<Analytics data={sampleData} />
</div>
);
}
The component leverages several key features:
Recharts for responsive and interactive charts
shadcn/ui components for consistent styling
Tailwind CSS for layout and customization
React hooks for state management
Responsive containers for optimal viewing on all devices
Key features implemented:
Interactive tooltips that show detailed information on hover
Custom color schemes for better visualization
Responsive design that adapts to container size
Time range filtering
Consistent styling across all chart types
Clear visual hierarchy with the card-based layout
To enhance this component further, consider:
Adding data export functionality
Implementing more advanced filtering options
Adding animation effects for data updates
Including drill-down capabilities for detailed analysis
Supporting real-time data updates
Conclusion
Building effective analytics charts in React requires careful consideration of both technical implementation and user experience. The component-based approach using Recharts and shadcn/ui provides a solid foundation for creating scalable and maintainable visualization solutions. This implementation demonstrates how modern React features can be combined with powerful charting libraries to create intuitive and interactive data visualizations.
For long-term development, this approach offers several advantages. The modular structure allows for easy updates and additions of new chart types, while the use of responsive containers ensures consistent performance across devices. The integration with shadcn/ui components provides a professional look while maintaining consistency with your application's design system.
Remember that effective data visualization is not just about displaying numbers – it's about telling a story with your data. This implementation provides the foundation for creating meaningful insights that can drive better decision-making in your applications.
Top comments (0)