2.8 KiB
Dashboard Component Documentation
This document describes the enhanced components added to the Dashboard for an improved visualization experience.
New Components
1. WordCloud
The WordCloud component visualizes categories or topics based on their frequency. The size of each word corresponds to its frequency in the data.
File: components/WordCloud.tsx
Features:
- Dynamic sizing based on frequency
- Colorful display with a pleasing color palette
- Responsive design
- Interactive hover effects
2. GeographicMap
This component displays a world map with circles representing the number of sessions from each country.
File: components/GeographicMap.tsx
Features:
- Interactive map using React Leaflet
- Circle sizes scaled by session count
- Tooltips showing country names and session counts
- Responsive design
3. MetricCard
A modern, visually appealing card for displaying key metrics.
File: components/MetricCard.tsx
Features:
- Multiple design variants (default, primary, success, warning, danger)
- Support for trend indicators
- Icons and descriptions
- Clean, modern styling
4. DonutChart
An enhanced donut chart with better styling and a central text display capability.
File: components/DonutChart.tsx
Features:
- Customizable colors
- Center text area for displaying summaries
- Interactive tooltips with percentages
- Well-balanced legend display
5. ResponseTimeDistribution
Visualizes the distribution of response times as a histogram.
File: components/ResponseTimeDistribution.tsx
Features:
- Color-coded bars (green for fast, yellow for medium, red for slow)
- Target time indicator
- Automatic binning of response times
- Clear labeling and scales
Dashboard Enhancements
The dashboard has been enhanced with:
- Improved Layout: Better use of space and responsive grid layouts
- Visual Hierarchies: Clear heading styles and consistent spacing
- Color Coding: Semantic use of colors to indicate statuses
- Interactive Elements: Better button styles with loading indicators
- Data Context: More complete view of metrics with additional visualizations
- Geographic Insights: Map view of session distribution by country
- Language Analysis: Improved language distribution visualization
- Category Analysis: Word cloud for category popularity
- Performance Metrics: Response time distribution for better insight into system performance
Usage Notes
- The geographic map and response time distribution use simulated data where actual data is not available
- All components are responsive and will adjust to different screen sizes
- The dashboard automatically refreshes data when using the refresh button
- Admin users have access to additional controls at the bottom of the dashboard