Most viewed products (with chart)

[EsraZengn]

User Story
User story: As an admin, I want to have a dashboard so that I can view top viewed 10 products and top viewed 3 products of each category with charts.
Plan for technical implementation

• Frontend

1. Create admin dashboard with steps:
   a. Create a dashboard menu item which can only be seen by admin and root users in header component.
   b. Create dashboard page (/dashboard) which includes:
   -Get top 10 products and top 3 products of each category with function getInitialProps() of dashboard page.
   -Create a tab and within panels
   . show top 10 products with bar chart
   . show top 3 products of each category with doughnut charts.
2. In /product page create a new function to increment number of views of the product.

• Backend

1. Update Product Schema to add field numberOfViews (type: Number)
2. Create api/view
   a. to increment number of views of a product(via handlePostRequest() )
   b. to get number of views of top 10 products and top 3 products of each category after successful authorization (via handleGetRequest())

[EsraZengn]

• Implemented Frontend: 2 and Backend: 1 and 2/a. (which means when the user visits a products page, the numberOfViews of related product is incremented by 1)

• I implemented 2/b but had some issues with mongoose query. I couldn't manage to get top three viewed elements of each product category with a single query , so in the end I decided to first get categories with related products from db by grouping by category and then since the returning result would be array of category objects with sub products array, use related array methods (map the result -> sort sub array products -> get only top three viewed products) to get the data that I want which is in a format like this:

[
   {
     _id: "table",   // category name
     producst: [
        {1. product},
        {2. product}
        {3. product}
     ]
   },
   {
     _id: "bed",
     producst: [
        {1. product},
        {2. product}
        {3. product}
     ]
   }
....
]

[ahmthsrvsmz]

Day 1

• Created dashboard button on header.

  • User cannot see this button, just available for root and admin

• Created dashboard page file.

  • Admins and root can see this page. There is a chart that consider 3 most viewed product in every category.
  • There is a one issue that chart doesn’t allow grouped this products.

[EsraZengn]

I revised /api/view.js to get top viewed ten products in addition to top three products of each category. Helped Ahmet with the charts and added tabs to show bar chart of top viewed ten products and doughnut charts of each category's top three products in different tab panels and finally added some styling.