NeonNight Data Visualization Dashboard

Overview

neonDataDashboard is a front-end TypeScript React dashboard template built with Vite. It presents a neon-styled admin UI with sidebar navigation, responsive mobile header/overlay, live clock, server status indicators and a range of chart/table widgets (line, bar, area, donut, radar, gauge, sparkline, KPI stat cards, activity feed and data table). The project uses mocked data (kpiData, serverNodes) and Recharts for visualizations.

This code block includes the main app shell (layout, navigation, mobile responsiveness) and wiring to the individual dashboard widgets (components are imported from src/components). It is intended as a UI starter you can drop into a frontend project and connect to your real data sources.

Features

• Responsive sidebar with collapse toggle and active state
• Mobile header and slide-in overlay navigation
• Live digital clock (updates every second)
• Server status bar showing node indicators and online count (driven by mock data)
• Integration points for multiple chart widgets:
  • LineChartWidget
  • BarChartWidget
  • AreaChartWidget
  • DonutChartWidget
  • RadarChartWidget
  • GaugeWidget
  • SparklineCard
• KPI stat cards and activity feed components
• Data table component for tabular views
• Neon / glass UI styling via utility classes (Tailwind-esque classnames present)
• Built with TypeScript + React + Vite; charts via Recharts
• Includes lint/typecheck/build scripts

Tech Stack

• React 19 (JSX/TSX)
• TypeScript (~5.6)
• Vite (dev server + build)
• Recharts (charts)
• Tailwind-style utility classes referenced (Tailwind is listed in devDependencies)
• ESLint + TypeScript ESLint plugin for linting

Project structure (relevant files)

• index.html — app entry + loading screen
• package.json — scripts and dependencies
• src/
  • App.tsx — main application shell, navigation, responsive layout, LiveClock, ServerStatusBar, Sidebar, MobileHeader, MobileOverlay
  • components/ — (imported) StatCard, LineChartWidget, BarChartWidget, AreaChartWidget, DonutChartWidget, RadarChartWidget, GaugeWidget, SparklineCard, ActivityFeed, DataTable
  • data/
    • mockData.ts — exported mock data used by the dashboard (kpiData, serverNodes)

Note: only App.tsx and top-level files are included in this code block preview; the individual component implementations are referenced and expected under src/components/.

Setup / Usage

1. Prerequisites

   • Node.js (18+ recommended) and npm or yarn

2. Install

   • npm:
     • npm install
   • yarn:
     • yarn

3. Run development server

   • npm: npm run dev
   • yarn: yarn dev
   • Opens on Vite dev server (typically http://localhost:5173)

4. Build for production

   • npm run build
   • npm run preview (to preview the built output)
   • or yarn build / yarn preview

5. Lint / Typecheck

   • Typecheck: npm run typecheck
   • Lint: npm run lint
   • Auto-fix lint issues: npm run lint:fix

6. Wiring real data

   • The dashboard reads data from src/data/mockData (exports kpiData, serverNodes). Replace or extend these mock exports with API calls / context / state management to provide live data to components.
   • Chart components use Recharts — ensure incoming data matches the component’s expected shape. Open each widget component in src/components/ to see required prop shapes.

Components & Integration Points

• App.tsx
  • LiveClock — displays current time/date (updates every second)
  • ServerStatusBar — maps serverNodes mock data to status dots and counts
  • Sidebar / MobileHeader / MobileOverlay — navigation UI (navSections declared in App.tsx). Provide onNav handler to switch views.
  • The main layout imports a set of widgets:
    • StatCard
    • LineChartWidget
    • BarChartWidget
    • AreaChartWidget
    • DonutChartWidget
    • RadarChartWidget
    • GaugeWidget
    • SparklineCard
    • ActivityFeed
    • DataTable
  • These components are expected to be present under src/components/ and consume kpiData or other props.

Styling

• Uses utility-style class names (Tailwind-like). Tailwind is included in devDependencies and @tailwindcss/vite plugin is present — however the provided code uses class names directly; ensure Tailwind is configured in your environment if you want to use its features.

API endpoints

• This is a frontend-only code block. No backend or network API endpoints are included. Data is currently sourced from local mock data (src/data/mockData). To integrate remote APIs:
  • Replace mock data imports with fetch/axios calls or pass fetched data down via context/props.
  • Ensure chart components receive the data shapes they expect.

Notes & Next steps

• The repository is a UI shell — the actual widgets and mock data files should be reviewed to verify prop shapes and visuals.
• To connect to real-time server metrics, replace mockData with API calls and add polling/WebSocket logic as needed.
• Tailwind configuration and CSS variables (neon/glass styles) are referenced by class names; confirm your Tailwind build config and any custom CSS are present if you import this into an existing project.