This project is a React-based dashboard application for Toshiba, consisting of both frontend and backend components. The frontend provides a user interface with various components displaying information and statistics, while the backend handles data processing and serves it to the frontend.
- Frontend: Toshiba Dashboard
- Backend: Toshiba Backend
Make sure to install the following dependencies for the client (frontend):
- tabler/icons-react - Icon library
- axios - HTTP client for making requests
- react - JavaScript library for building user interfaces
- react-dom - Entry point to the DOM and server renderers for React
- recharts - Charting library for React applications
To install the frontend dependencies, follow the steps below in the /client folder:
npm install
npm install tabler/icons-react axios react react-dom rechartsTo run the frontend, follow the steps below in the /client folder:
npm run devMake sure to install the following dependencies for the server (backend):
- axios - HTTP client for making requests
- cors - Middleware for enabling Cross-Origin Resource Sharing
- dotenv - Zero-dependency module that loads environment variables
- express - Web application framework for Node.js
- papaparse - CSV parsing library
- node - JavaScript runtime built on Chrome's V8 JavaScript engine
To install the backend dependencies, follow the steps below in the /server folder:
npm install axios cors dotenv express papaparse nodeTo run the backend, follow the steps below in the /server folder:
node server.jsThe frontend consists of 11 React components:
-
Menu.jsx
- Fixed on the left
- Collapsible
- Static buttons
-
InformationBox.jsx
- Used for both Revenues and Lost Deals
- Dynamic profit/loss icon
- A button at the bottom
-
QuarterGoal.jsx
- Dynamically shows the goal achieved using Recharts
- Linked to DashboardInfo.jsx for current goal
- A button at the bottom
-
Customers.jsx
- Customers are pulled from DashboardInfo.jsx
- Sortable by newest, oldest, and alphabetical order
- Selectable with CSS shown
- A button at the bottom
-
Growth.jsx
- Uses backend to pull dynamic data
- View by year, month, or day
-
TopMonth.jsx
- Uses backend to pull dynamic data
-
TopYear.jsx
- Uses backend to pull dynamic data
-
TopBuyer.jsx
- Linked to DashboardInfo.jsx for the top buyer
-
Chats.jsx
- Chats are pulled from DashboardInfo.jsx
- Subheading displays 'n unread messages'
- Unread messages shown with CSS
-
TopStates.jsx
- Top states are pulled from DashboardInfo.jsx
- Displayed in a sorted bar chart
-
NewDeals.jsx
- New deals are pulled from DashboardInfo.jsx
- Deals can be selected when clicked
The backend server pulls a dataset in CSV format from a raw GitHub link, uses papaparse to parse the CSV to JSON, and serves the data to the frontend. The server includes a function called downsampleData(data, timeUnit) for downsampling data by grouping it based on the specified time unit and calculating the mean. Proper error handling is implemented to provide accurate status responses.
This JavaScript function takes an array of data points with timestamps and profit percentages and groups them based on a specified time unit. The purpose of this function is to downsample the data, aggregating profit percentages over specified time intervals.
data: An array of data points, where each entry should have aTimestampandProfitPercentageproperty.timeUnit: A string specifying the time unit for grouping the data. Supported values are "day," "month," and "year."
const data = [
{ Timestamp: "2022-01-01 12:00:00", ProfitPercentage: 30.8899991273 },
{ Timestamp: "2022-01-01 14:30:00", ProfitPercentage: 28.2183913922 },
// ... more data entries
];
const downsampledData = downsampleData(data, "day");The function groups data based on the provided timeUnit. It calculates the average profit percentage for each time interval and returns a new array of objects containing timestamps and corresponding downsampled profit percentages.
- If an entry has an invalid timestamp or is missing a timestamp, the function logs an error message to the console.
-
"day": Groups data by day.
-
"month": Groups data by month.
-
"year": Groups data by year.
The function returns an array of objects with downsampled data, each containing a timestamp and the corresponding downsampled profit percentage.
[
{ Timestamp: "2022-01-01", ProfitPercentage: 227.1928381293 },
// ... more downsampled entries
];This JavaScript function analyzes an array of data points containing timestamps and profit percentages. Its purpose is to identify and retrieve the entry with the highest profit percentage.
data: An array of data points, where each entry should have aTimestampandProfitPercentageproperty.
const data = [
{ Timestamp: "2022-01-01 12:00:00", ProfitPercentage: 30.8899991273 },
{ Timestamp: "2022-01-01 14:30:00", ProfitPercentage: 28.2183913922 },
// ... more data entries
];
const maxProfitInfo = getMaxProfitInfo(data);The function iterates through the provided data and identifies the entry with the highest profit percentage. It returns an object containing the timestamp and corresponding maximum profit percentage.
- If the provided data is not an array or is an empty array, the function returns
null.
The function returns an object with information about the entry with the maximum profit percentage.
{
Timestamp: "2022-01-01 12:00:00",
ProfitPercentage: 30.8899991273,
}- In case of ties, the function returns the first occurrence of the maximum profit percentage.
- The project is mostly static except for the Growth component, which pulls data from the backend hosted on render.com.
- The static data is stored in
DashboardInfo.jsx, acting as a pseudo-database for easy future implementation of a dynamic database.