DVD Project Dashboard

A beautiful, Apple-inspired dashboard built with Next.js and AmCharts for visualizing loan application data analytics.

Features

• 🎨 Apple-like UI: Clean, minimalist design with smooth animations
• 📊 Interactive Charts: Powered by AmCharts 5
• 📈 Key Metrics: Overview cards with important statistics
• 🔍 Detailed Analysis:
  • Target distribution (default vs non-default)
  • Default rates by categorical variables
  • Age group analysis
  • Credit amount analysis

Getting Started

Prerequisites

• Node.js 18+ and npm/yarn
• Python 3.8+ (for data processing)

Installation

1. Install dependencies:

cd dashboard
npm install

2. Process the data:

# Using Python (recommended - faster for large datasets)
python scripts/process-data.py

# OR using Node.js
npm run process-data

3. Start the development server:

npm run dev

4. Open http://localhost:3000 in your browser.

Project Structure

dashboard/
├── app/
│   ├── layout.tsx          # Root layout
│   ├── page.tsx            # Main page
│   └── globals.css         # Global styles
├── components/
│   ├── Dashboard.tsx       # Main dashboard component
│   ├── MetricCard.tsx      # Metric card component
│   └── charts/
│       ├── TargetDistributionChart.tsx
│       ├── DefaultRatesChart.tsx
│       ├── AgeAnalysisChart.tsx
│       └── CreditAnalysisChart.tsx
├── scripts/
│   ├── process-data.py     # Python data processing script
│   └── process-data.js     # Node.js data processing script
└── public/
    └── data/
        └── dashboard-data.json  # Processed data (generated)

Data Processing

The data processing scripts read the CSV files from ../data_dvd/ and generate a JSON file at public/data/dashboard-data.json with:

• Target distribution statistics
• Default rates by categorical variables (gender, contract type, income type, etc.)
• Age group analysis
• Credit amount analysis
• Key metrics (total applications, default rate, averages, etc.)

Building for Production

npm run build
npm start

Technologies Used

• Next.js 14: React framework
• TypeScript: Type safety
• AmCharts 5: Interactive charts
• Pandas (Python): Data processing
• PapaParse (Node.js): CSV parsing

Design Philosophy

The dashboard follows Apple's design principles:

• Clean, spacious layouts
• Subtle shadows and rounded corners
• Smooth hover animations
• High contrast for readability
• Minimal color palette (blue, green, red accents)

License

MIT