kjanat/livedash-node
1
0
Fork 0
mirror of https://github.com/kjanat/livedash-node.git synced 2026-01-16 13:52:16 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
bde0b44ea0545153542f6273a3fbfd34e1ebeb5d
livedash-node/docs/dashboard-components.md
Kaj Kowalski 5317b2aa39 Enhances dashboard with new metrics and charts 
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.
2025-05-22 04:04:50 +02:00

2.8 KiB
Raw Blame History

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