Pivot table component that allows user to view sales of various states. Displays subtotal ,total and grand total of sales for various states.
- Description
- Live Demo
- Screenshot
- Technologies
- Architectural Overview
- Setup
- Assumptions
- Recommendations
- App Info
A pivot table is a table of grouped values that aggregates the individual items of a more extensive table within one or more discrete categories. This summary might include sums, averages, or other statistics, which the pivot table groups together using a chosen aggregation function applied to the grouped values. When working with pivot tables, we generally speak of two types of fields:
- Dimensions - fields that represent the rows and / or columns of the table (e.g Product Category)
- Metrics - fields that are in the cells of the pivot table and can be aggregated (Sales, Quantity, Profit) The Pivot table component below displays subtotal of various subcategories for each state, total sales for all subcategories(sum of all subtotal for a given state) and grand total(sum of all totals for a given state). In this case “Category” and “Sub-category” are row dimensions, “State” is a column dimension and “Sales” is the metric value.
Here is a working live demo : live
- Technologies used for this application:
React
17.0 - for displaying UI componentsHTML5 & CSS3
17.0 - for markup and stylesheet languageRedux
4.1 - predictable state container for managing application stateTypescript
3.1 - typed superset of javascript that compiles to plain javascriptExpress
4.1 - middleware is used to handle requests, routesJest
20.0 - testing framework for Javascript codebase, specifically React for this application.Enzyme
2.9 - JavaScript Testing utility for React that makes it easier to test your React Components' output.
The application logic is contained in src
subfolder.
Within src
subfolder are the following sections:
actions
- contains all action objects dispatched to redux store
components
- contains all the components rendered for this application namely:
* Cell.tsx __displays metric and value received
* Header.tsx __displays the header of the pivot table.
renders titles and displays all states horizontally
* Row.tsx __loops through all categories and renders RowItem component for each loop
Displays grand-total for each state
* RowItem.tsx __ outputs category, subcategories, sutotal and total
* PivotTable.tsx __ parent component for this application
reducers
- defines application redux logic. The application state
is defined within this subfolder.
All sales data is stored in sales.ts reducer
selectors
- contains helper functions used for various computations namely:
* states.ts- includes:
selectStates() __given the sales as argument , it finds all distinct states and returns
states sorted alphabetically
* categories.ts- includes:
getCategories() __given sales as argument , returns all distinct categories sorted alphabetically
getSubCategories() __receives category and sales as argument, returns all subcategories belonging to a given category
sorted alphabetically
getSubTotal() __receives subcategory, state and sales, computes the subtotal of all sales for a given subcategory belonging to a
particular state
getTotal() __ receives state, category and sales, computes the total of all subtotal belonging to a given category and state and returns.
getGrandTotal() __ given state and sales , returns the SUM of all sales belonging to a particular state.
styles
- contains all the stylesheet for our components
tests
- contains the test suites for our application.
Snapshot rendering is done for components and all component snapshots are saved in _snapshots_
subfolder.
App.tsx
- Renders our application .Contains redux store configuration and dispatches action object to store sales data in redux.
data.json
- includes sales data . The sales data is embedded.
type.d.ts
- this file containes typescript types that are reused within application.
Allows one to reuse types without importing.
setUpTests.ts
- includes configuration for setting up test environment using jest and enzyme.
To clone and run this application, you'll need Git and Node.js (which comes with npm) installed on your computer.
Run the following scripts in the terminal to clone the repo
$ git clone git@github.com:jamesmogambi/pinhole-press-test.git
$ cd pinhole-press-test
This command will install all dependecies used by this application.
The dependecies are listed in package.json
file.
npm install
In the project directory, you can run:
npm run start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser
The page will reload if you make edits.
You will also see any lint errors in the console.
npm run test --watchAll
Launches the test runner in the interactive watch mode.
npm run build
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes. Your app is ready to be deployed!
See the section about deployment for more information.
While developing this application the following assumptions were made:
- The sales data is currently embedded within the application instead of fetching from a remote API.
To do list:
-
Add search function. This will allow user to retrieve data quickly based on search parameter.
-
Implement filter. Allow user to filter data based on filter parameters e.g category, subcategory Will allow user to retrieve data quickly since pivot table handles large data.
-
Implement dark mode ,this will allow user to switch between dark and light mode based on user like.
1.0.0