🚀 Project Overview

EV Charger Visualization Dashboard is a fully-featured, extensible, and visually engaging mobile and web app for:

Exploring and analyzing EV charging station usage data.

Viewing geographic and temporal patterns.

Discovering operational inefficiencies.

Gaining actionable AI-derived insights and forecasts.

Everything—from analytics to forecasts to data presentation—runs client-side for privacy, instant feedback, and modern mobile UX. 📊 Features Overview Category Feature Data Visualization Dynamic Victory.js-based bar, line, pie, and area charts Real-Time Analytics Usage and energy stats, station performance, interactive data filtering Predictive Insights AI/ML-driven demand forecasting and recommendations Smart Comparison Weekday/weekend, hourly, and inter-station analytics Mock or Live Data Uses rich mock data, but can be connected to APIs for real deployments UI/UX Expo Router navigation, dark/light mode, adaptive layouts, interactive tooltips Customization Filtering by date, time period, station; theming; modular architecture Platform Support Runs as mobile app (iOS/Android) and web progressive app (PWA) Tech Stack React Native, Expo, Victory, TypeScript, React Navigation, modern JS toolchain

🛠️ Technology Stack

Framework: React Native (v0.79+), Expo (SDK ~53)

Language: TypeScript (preferred) & JavaScript

Visualization: Victory, Victory Native, React Native SVG

UI Navigation: Expo Router, React Navigation

Analytics: Custom JS/TS & AI/ML local helpers

Styling: StyleSheet, styled components, adaptive theming

Testing/Dev tools: ESLint, Babel, Metro Bundler, React Native Debugger

AI Engine: Local JavaScript/statistical analysis; can integrate APIs (see aiHelpers.js)

Vendor Integrations: None required—local-first architecture for privacy and ease

📦 Installation & Setup

1. Prerequisites

Software:

Node.js (v16+)

npm (v7+) or yarn

Expo CLI (npm install -g expo-cli)

Git

For Mobile Development:

Expo Go app (for testing on your device, iOS/Android)

Xcode (for iOS Simulator, macOS only)

Android Studio (for Android Emulator)

Modern web browser for web

2. Clone and Install

text git clone https://github.com/Rishi8520/ev-charger-visualization.git cd ev-charger-visualization

Install dependencies

npm install # or: yarn install

3. Run the App

Start the Expo development server:

text npx expo start

Scan QR code with Expo Go for instant mobile preview.

Press w to open the web app.

Alternatively:

text npx expo start --android # Android emulator/device npx expo start --ios # iOS simulator/device (macOS) npx expo start --web # Web application

4. Project Configuration

   Edit app metadata in app.json (name, icons, splash screens)

   TypeScript config in tsconfig.json

   Add custom fonts/images in /assets

   Change mock data in /data/mockChargerData.js

5. Building for Production

See Expo docs for building standalone binaries.

text expo build:android # APK or AAB for Android expo build:ios # Archive for App Store expo build:web # Web static build

⚡ Usage Guide Dashboard Overview

Summary Cards: Total sessions, energy delivered, avg. energy/session, peak day.

Charts: Bar/line charts for sessions & energy, pie/area for station data.

AI Insights: Key patterns, outlier detection, suggestions for improvement.

Predictions: 7-day forecasts of sessions/energy based on historical trends.

Navigation

Tabs: Chargers (stats, analytics), Explore (advanced exploration/demo), Home

Filters: Select by date range (7, 14, 30 days), station, hour.

Mock Data & Live API

All data (usage, energy, per-station) mockable and easily swappable for API integration.

To plug in live data, replace functions in /utils/aiHelpers.js and /data/*.

🧠 AI & Analytics Details

Local Processing: No cloud AI or private data sent off-device by default.

Insights Engine: utils/aiHelpers.js provides:

    Temporal trends (increasing/decreasing, volatility)

    Weekday/weekend/daily/houly patterns

    Peak stations, usage outliers, infrastructure load suggestions

    Forecasting via moving average + trend estimation (can be extended with ML)

Charting: Powered by Victory for mobile-web harmony; interactive tooltips, live updates.

📝 Customization & Extensibility

New Charts: Create new chart types in /components/ using Victory API.

Data Backends: Integrate REST APIs for live data via fetch or Apollo in /data/.

Themes/UI: Tweak /constants/Colors.js and StyleSheets for branding.

Internationalization: Add i18n wrappers as needed.

Authentication: Easy to layer in with React Navigation, Auth0, Firebase, etc.

🛡️ Data Privacy & Security

No PII in mock data.

Strict local processing for analytics & insight generation.

Secure recommendations for real-world deployments (HTTPS APIs, encrypted storage, etc.)

🔍 Troubleshooting

Metro/Bundler Issues:

text

npx expo start --clear

Dependency Conflicts:

text
rm -rf node_modules package-lock.json
npm install

Emulator Fails: Ensure Xcode/Android Studio are updated and have proper device images installed.

📞 Support & Documentation

For issues/feature requests: GitHub Issues

Expo Docs: https://docs.expo.dev/

Victory Docs: https://formidable.com/open-source/victory/

React Native Docs: https://reactnative.dev/

TypeScript Docs: https://www.typescriptlang.org/docs/

Last updated: August 2025