A modern, interactive metrics dashboard built with React Native and Expo. This application features a bottom tab navigation system that displays four different types of charts - Line, Bar, Pie, and Progress charts - each in its own dedicated screen for optimal viewing experience.
- Contributing Guide - Learn how to contribute to this project
- Changelog - Version history and release notes
- Bottom Tab Navigation: Intuitive navigation with 4 dedicated tabs for each chart type
- Line Chart: Daily app usage metrics with smooth curved lines and gradient fill
- Bar Chart: Weekly usage statistics with color-coded bars
- Pie Chart: Category breakdown with random color generation and legend
- Progress Chart: Feature completion tracking with circular progress indicators
- Real-time Data Fetching: Dynamic data loading from external APIs using axios
- Responsive Design: Adapts to different screen sizes with dynamic width calculations
- Modern UI: Clean interface with professional styling and color scheme
┌─────────────────────────────────────┐
│ 📊 Metrics Dashboard │
├─────────────────────────────────────┤
│ │
│ Daily App Usage │
│ ┌───────────────────────────┐ │
│ │ /\ /\ │ │
│ │ / \ / \ /\ │ │
│ │ / \/ \ / \ │ │
│ │ / \/ \ │ │
│ └───────────────────────────┘ │
│ Mon Tue Wed Thu Fri │
│ │
├─────────────────────────────────────┤
│ [Daily] [Weekly] [Category] [Features] │
└─────────────────────────────────────┘
- React Native - v0.81.5 - Cross-platform mobile framework
- Expo SDK - v54.0.22 - Development platform
- React Navigation - v7.x - Bottom tab navigation
- react-native-chart-kit - Bar, Pie, and Progress charts
- react-native-gifted-charts - Advanced line chart with animations
- axios - v1.13.2 - HTTP client for API requests
- React Native SVG - v15.14.0 - SVG rendering support
metricsDashboard/
├── App.js # Main application with tab navigation and chart screens
├── index.js # Entry point
├── package.json # Dependencies and scripts
├── app.json # Expo configuration
├── LICENSE # MIT License
├── README.md # Project documentation
├── CONTRIBUTING.md # Contribution guidelines
├── CHANGELOG.md # Version history
└── assets/ # Images and static resources
Before you begin, ensure you have the following installed:
- Node.js >= 18.0
- npm or yarn
- Expo CLI (optional but recommended)
Follow these steps to get your development environment running:
-
Clone the repository:
git clone https://github.com/mohammadfirmansyah/metricsDashboard.git cd metricsDashboard -
Install dependencies:
npm install
-
Start the development server:
npm start
-
Run on specific platform:
# Run on web browser npm run web # Run on Android device/emulator npm run android # Run on iOS simulator (macOS only) npm run ios
-
Navigate between tabs:
- Tap the bottom tabs to switch between different chart views
- Each tab loads its data independently when accessed
Displays daily app usage metrics with a smooth, animated line chart featuring gradient fill and customizable data points.
// Fetch daily usage data from API
const fetchDailyUsageMetrics = async () => {
try {
const response = await axios.get('API_ENDPOINT');
setDailyUsageData(response.data);
} catch (error) {
console.log('Error fetching data:', error);
}
};Key Features:
- Curved line interpolation for smooth visualization
- Gradient fill from light blue to white
- Customizable data point colors and radius
- X-axis labels showing days of the week
Visualizes weekly usage patterns with a vertical bar chart, displaying values on top of each bar for easy reading.
Configuration:
- Green gradient background (#8ccf9e)
- Values displayed on top of bars
- Zero-based scale for accurate comparison
- Responsive width based on screen size
Shows app usage distribution across categories with dynamically generated colors for each segment.
Unique Implementation:
// Generate random hex colors for each category
let getRandomHexColor = () => {
const randomNum = Math.floor(Math.random() * 16777215);
return `#${randomNum.toString(16).padStart(6, "0")}`;
};Tracks feature completion progress with circular progress indicators showing percentage completion.
Display Format:
- Multiple circular progress rings
- Label-based tracking
- Customizable stroke width and colors
- Absolute values displayed
This project demonstrates modern React Native development practices:
- ✅ Navigation Architecture: Implementing bottom tab navigation with React Navigation
- ✅ State Management: Managing independent state for each screen component
- ✅ Data Fetching: Async/await patterns with axios for API calls
- ✅ Chart Libraries: Integration of multiple charting libraries (chart-kit and gifted-charts)
- ✅ Responsive Design: Dynamic sizing with Dimensions API
- ✅ Component Composition: Separating screens into reusable components
- ✅ Error Handling: Proper try-catch blocks for network requests
- ✅ Performance: Lazy loading data only when screens are accessed
We welcome contributions! Please see our Contributing Guide for details on how to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'feat: add some amazing feature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License. See the LICENSE file for details.
- Mohammad Firman Syah
- Project Link: https://github.com/mohammadfirmansyah/metricsDashboard
Note: For production deployment, consider implementing:
- Loading states and skeletons while data is fetching
- Error boundaries for robust error handling
- Data caching to reduce API calls
- Pull-to-refresh functionality
- Offline support with local storage
- Performance optimization with memo and useMemo
Built with ❤️ using React Native & Expo