mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 16:12:10 +01:00
Kaj Kowalski
5317b2aa39
Improves the dashboard with additional metrics and visualizations to provide a more comprehensive overview of application usage and performance. Adds new charts, including: - Word cloud for category analysis - Geographic map for user distribution (simulated data) - Response time distribution chart Refactors existing components for improved clarity and reusability, including the introduction of a generic `MetricCard` component. Improves error handling and user feedback during data refresh and session loading. Adds recommended VSCode extensions for ESLint and Prettier.
92 lines
2.8 KiB
Markdown
92 lines
2.8 KiB
Markdown
# 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:
|
|
|
|
1. **Improved Layout**: Better use of space and responsive grid layouts
|
|
2. **Visual Hierarchies**: Clear heading styles and consistent spacing
|
|
3. **Color Coding**: Semantic use of colors to indicate statuses
|
|
4. **Interactive Elements**: Better button styles with loading indicators
|
|
5. **Data Context**: More complete view of metrics with additional visualizations
|
|
6. **Geographic Insights**: Map view of session distribution by country
|
|
7. **Language Analysis**: Improved language distribution visualization
|
|
8. **Category Analysis**: Word cloud for category popularity
|
|
9. **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
|