Charts

A PoC of an interactive time-series dashboard application built with React and Chart.js. Features multiple chart visualizations, flexible layouts, and real-time data filtering.

Controls

• Click and drag on a chart to zoom in on the selected date range.
• Click and drag the chart name or hold Ctrl and drag (or Cmd on Mac) to move charts in any mode.
• In free mode, click on the little arrow on the bottom right of a chart to resize it.

Features

• 9 Time-Series Charts: Displays metrics including CPU usage, memory consumption, network traffic, active users, API request rates, database query times, disk I/O, error rates, and cache hit ratios
• Multiple Layout Modes:
  • Vertical: Stacked single-column layout
  • Grid: 3-column grid with snap-to-grid positioning
  • Free: Fully customizable drag-and-drop with resizing
• Date Range Filtering: Filter all charts by custom date ranges with calendar picker
• Responsive Design: Adapts to different screen sizes with breakpoint-aware layouts
• Theme Support: Light and dark mode toggle
• Persistent Layouts: Layout configurations are saved to localStorage
• Interactive Charts: Hover synchronization across charts with visual indicators
• Data Caching: Smart caching system for generated time-series data

How It Works

1. Data Generation: Mock data generators create time-series data at 1-second intervals for the selected date range
2. Layout System: Uses react-grid-layout to manage chart positioning across different layout modes
3. Chart Rendering: Each chart uses Chart.js with time-series scales and custom plugins for hover synchronization
4. State Management: Context providers handle global state for themes, date ranges, and chart hover interactions
5. Responsive Behavior: Layout configurations adapt to screen size breakpoints (xxs, xs, sm, md, lg)

Tech Stack

• React 19 with TypeScript
• Chart.js with react-chartjs-2 for visualizations
• react-grid-layout for drag-and-drop layouts
• Tailwind CSS for styling
• Vite as build tool
• Shadcn & Radix UI components for UI primitives
• date-fns for date manipulation

Development

Prerequisites

• Node.js 18+ and npm

Installation

npm install

Development

npm run dev

The application will be available at http://localhost:5173

Build

npm run build

Preview Production Build

npm run preview

Linting

npm run lint        # Check for issues
npm run lint:fix    # Auto-fix issues
npm run ts-check    # TypeScript type checking

Project Structure

src/
├── components/          # React components
│   ├── BarChart.tsx    # Chart visualization component
│   ├── ChartContainer.tsx
│   ├── Dashboard.tsx   # Main dashboard component
│   ├── DateRangePicker.tsx
│   └── ui/             # Reusable UI components from shadcn
├── contexts/           # React context providers
│   ├── ChartHoverContext.tsx
│   ├── DateRangeContext.tsx
│   └── ThemeContext.tsx
├── utils/              # Utility functions and types
└── styles/             # Global styles