Create simple POS with React.js, Node.js, and MongoDB #17: Stat screen

Create simple POS with React.js, Node.js, and MongoDB #17: Stat screen

Create simple POS with React.js, Node.js, and MongoDB #17: Stat screen

Defenition: POS – “Point of Sale”. At the point of sale, the merchant calculates the amount owed by the customer, indicates that amount, may prepare an invoice for the customer (which may be a cash register printout), and indicates the options for the customer to make payment.

In the previous chapter, we implemented the order page in our POS project. We successfully displayed the products and calculate the total price along with a calculator to calculate the change to be returned. Finally, each order transaction was saved to the database. This was one of the complex parts of our tutorial that we successfully tackled.

Now, we are going to implement the final chapter for this tutorial series where we are implementing a graphical representation section on our dashboard screen. In the dashboard screen, we are going o display the statistics from the database using the react-chart.js library. The main aim here is to show you how to add graphs to represent visual data in the React app that already uses redux as functionality.

So, let us get started!

Prepare data from the backend

first, we create a new endpoint for send stat data create a new file name api_state.js inside this file we add a function for fetching data from the product table

Next, we need to register the API endpoint to api.js using use middleware function provided by express library as shown in the code snippet below:

Thus, we are done on the backend. Now, we can move forward to implement our frontend which will include a chart diagram on the dashboard screen.

Installing Dependencies

In order to configure and display charts in our react app, we need to install some dependencies that we will make it possible. The required libraries are chart.js and react-chartjs-2 which we can install by running the following command in our project terminal:

Next, we need to import the chart components such as Bar, Doughnut, etc. to the dashboard.js file from react-chartjs-2 library as directed in the code snippet below:

Configuring Chart

Here, we are going to configure the chart by using the data that we are going to fetch from the API endpoint that we created earlier. We are going to use redux methodologies for getting the chart data as well. Hence, we need to create constant states first.

Defining Constants

Here, we are defining some constants for the configuring redux mechanism for the chart as shown in the code snippet below:

Creating Reducer

Next, we need to create a reducer in order to access the Redux store. The code required to implement a reducer for the redux mechanism is provided in the code snippet below:

Creating Reducer

Next, we need to create a reducer in order to access the Redux store. The code required to implement a reducer for the redux mechanism is provided in the code snippet below:

Creating Action

Next, we need to create action in order to send data to the reducer to change the value of the state. For that, we need to create a file named state.action.js and import the constants we defined earlier. Then, we can create the action functions to dispatch data to the reducers as directed in the code snippet below:

Then, we need to create a function called getCurrentInventoryState in order to fetch the stat data by picking only two columns. The coding implementation of this function is provided in the code snippet below:

Creating Column Chart

Here, we are going to make the necessary configurations to grab the data and set the data to the component states.

First, we need to make the following imports as directed in the code snippet below:

Then, we need to define the initial states using the useState hook as well as initialize the reducer using the useSelectorhook. We also need to initialize the dispatch variable for the new useDispatch hook instance as shown in the code snippet below:

Next, we need to fetch the stat data using the dispatch method inside the useEffect hook for the first loading of the dashboard screen. The code for this is provided in the code snippet below:

Then, we need to subscribe to data change and flatten the data to one dimension array for correctly matching the data required for the chart. We are going to do this inside another useEffect hook tracking the changes in the reducer result. The code for this is provided in the code snippet below:

Since we have the data now, we can move on to creating a bar chart.

Creating a Bar Chart

First, we need to create a dataset to be configured into the Bar chart as shown in the code snippet below:

Then, we need to add the Bar component with conditional rendering based on the availability of data. The Bar component is to be configured with the dataset we defined a step before along with other prop configurations to make Bar chart look sublime. The code for this is provided in the code snippet below:

Hence, we will the Bar chart result as shown in the demo screenshot below:

React bar chart example

React bar chart example

Creating Donut Chart

Since having a single bar chart is boring, we are going to add the Donut chart to the display as well.

For this, we need to create a dataset just as for the Bar chart but with simple modifications as shown in the code snippet below:

Then, we need to add the Doughnut component with conditional rendering configured with datasets we defined earlier. The Doughnut component along with other prop configuration is provided in the code snippet below:

Hence, we will get the Doughnut chart as shown in the demo screenshot below:

React donut chart

React donut chart

Creating a Line Chart

Since we already know how to implement two types of chart, why not implement a third one as well. The configuration steps are very much similar to the two charts that we implemented earlier. First, we need to define the dataset as shown in the code snippet below:

Then, we need to add the Line component to the view with the following configurations:

Hence, we will get the result as shown in the demo screenshot below:

React line chart example

React line chart example

Hence, we have successfully implemented the dashboard screen with different types of charts that will definitely make the UI look captivating. Remember that all of this started with the creation of an API endpoint in our backend NodeJS project.

What next…?

Now, the challenge for you is to other types of charts and display different statistical data such as sales summary, employee stat, etc. You can use chart types like bubble, polar and scatter, etc. Besides that, if you have any new and innovative features, you can send a personal message. Eagerly waiting for the projects you have implemented following this tutorials series.

Conclusion

This is the final chapter of our tutorial series on creating a simple POS system using React. For this final chapter, we learned to configure and integrate different types of charts in our dashboard screen. We also learned how to handle the chart rendering by using the data from the server. These charts definitely implant new life to the overall UI making overall UI elements much captivating and dynamic.

Now with a heavy heart, we have come to the end of this tutorial series. We learned a lot of new stuff while implementing this simple POS system in the React ecosystem. This will be a great addition to your portfolio as a React developer. We will come up with other interesting tutorial series.

also all code in the chapter available on Github for Frontend and Backend

So, Do stay tuned and keep coding! Peace out folks!

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

Create simple POS with React.js, Node.js, and MongoDB #16: Order Screen

In this chapter, we are going to create an order page. The order page displays the products and the calculator to help calculate the total price. ...

Create simple POS with React.js, Node.js, and MongoDB #15: Simple RBAC

In this chapter, we are going to continue from where we left off from the previous chapter intuitive with a plethora of ...

Create simple POS with React.js, Node.js, and MongoDB #14: Export PDF, Excel, CSV, Bulk Delete, Inline Editing

In this chapter, we are going to continue from where we left off from the previous chapter. We are about to add more features to our react table to ...

2 comments

Wamaitha Nyamu November 11, 2020 at 11:13 pm
0

Does this update data in realtime?

Rayan Abid January 25, 2023 at 11:14 pm
0

Hi! I’m facing a weird issue. When I run the app locally it works fine. But after deploying it to vercel the styles don’t render the app renders without styles. Do you know what might be causing this. I read online it might be related to material UI.

Any help will be appreciated Thanks.

and Thank you for building such great app. I learned a lot.

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy