Deployed Link:- https://switchy-me.netlify.app/
Demo Video:- https://drive.google.com/file/d/1XnvTk7gMVTeqvsQkUub9lqeppIM4_Ktw/view?usp=sharing
The EnergyDistributionGraph component is a React component that displays energy distribution data using a line chart. It fetches data from an external API and allows users to select specific energy sources and a date for visualization. The chart is implemented using the react-chartjs-2 library along with various Chart.js components.
⚫ Fetches energy distribution data from an API.
⚫Allows users to select energy sources (Load, Solar, Grid).
⚫Allows users to select a specific date.
⚫Displays a responsive line chart representing the energy distribution over time.
⚫Randomly generates colours for each selected energy source.
⚫Provides loading indicators while fetching data.
The EnergyUsesGraph component is a React component that displays energy consumption data using a bar chart. It also fetches data from an external API and provides options to toggle between different time intervals (Day, Week, Month) for visualization. The chart is implemented using the react-chartjs-2 library along with various Chart.js components.
⚫Fetches energy consumption data from an API.
⚫Allows users to toggle between different time intervals (Day, Week, Month).
⚫Displays a responsive bar chart representing energy consumption over time.
⚫Colors bars based on energy consumption levels.
⚫Provides loading indicators while fetching data.
The Header component is a reusable React component that represents the application's header bar. It includes the application logo, navigation menu, user profile avatar, and a theme toggle switch. The header is implemented using the @mui/material library (previously known as Material-UI).
⚫Displays the application logo and name.
⚫Displays user profile avatar and settings menu.
⚫Includes a theme toggle switch for switching between Light and Dark modes.
The ToggleTheme context and ToggleThemeProvider components are used to manage the application's theme. The context provides the current theme state and a function to toggle between themes. It allows components to access and control the application's theme.
⚫Provides the current theme state (Light/Dark mode).
⚫Provides a function to toggle between themes.
