This project displays a dashboard for a Quality Department whose workforce are different genders, skills and length of service. The term ‘Piles’ relates to an audit which is carried out daily. It measures the number of units which require problem solving at different departments in the workplace. The audit itself is carried out by the Quality Assurance Department at the earliest time after midnight, the details of the audit can then be commented on by department managers, where, they can action their team to reduce the problems if required.

Table of Contents

1. UX
2. FEATURES
   1. Home Page
   2. Shift Selector
   3. Gender Percentage Display
   4. Direct Labour - Counter Graph
   5. Indirect Labour - Auditor Graph
   6. Indirect Labour - Researcher Graph
   7. Combined Labour - Stacked Graph
   8. Correlation Gender - Linear Graph
3. FEATURES LEFT TO IMPLEMENT
4. TECHNOLOGIES USED
5. TESTING
6. DEPLOYMENT
7. CREDITS

UX

The data collected in the .csv file relates to real time personnel; this is the department I currently manage.

This project can assist managers with decision making regarding future training of personnel to obtain higher skills.

It will also assist managers (when checking the holiday tracker) to be able to utilise the personnel to cover daily bin checks (direct counting), auditing of department processes and deep dive research processes.

The ‘Select all’ will give the user the option to either select all or to specify day or night shift personnel.

The ‘Select all’ selector automatically updates the percentage of ‘Gender in the department’ display and the three graphics which are related.

All graphics are equally spaced out in different rows to give an uncluttered feel to the dashboard.

Features

1. Home Page

   A single page application with responsive chart containers but best viewed on large screen.

2. Shift Selector

   A ‘Select’ button which gives the user an option of shift personnel (Day & Night) or combined.

3. Gender Percentage Display

   The display of the percentage of gender which adjusts to either selection of shift or to what process is selected or both.

4. Direct Labour - Counter Graph

   The first graphic relates to the direct (productivity based) process – this is a compulsory and prerequisite process all personnel must achieve before attaining a higher skillset. Again, it responds to gender and shift selection.

5. Indirect Labour - Auditor Graph

   The second graphic relates to the indirect (off task based) process – this is the next step for personnel looking to advance in the department. Again, it responds to gender and shift selection.

6. Indirect Labour - Researcher Graph

   The third graphic relates to the indirect (off task based) process – this is the final step for personnel looking to advance in the department. Again, it responds to gender and shift selection.

7. Combined Labour - Stacked Graph

   The fourth graphic relates to the combined three processes mentioned above – this illustrates the distribution of gender and processes (direct & indirect). This again is responsive to the higher skillset (auditor & researcher).

8. Correlation Gender - Linear Graph

   The fifth and final graphic relates to the correlation of time of service against years since qualification (training of higher skillset). It shows an upturn to points which indicate generally as personnel are employed at this department, their skillset increases. There are a few outliers but that is down to the choice of the individual personnel. (Training to learn a higher skillset is not compulsory).

Features Left To Implement

Cross Training, this department is part of the support service within the workplace. Personnel are encouraged to learn other processes at different departments. This gives the company flexibility to manpower where high volume of order, holiday cover, and peak demand from customers. Therefore, a further few graphics would be required depicting the level and quantity of personnel who, when required, can be guested out to other departments.

Technologies Used

The framework used was bootstrap (see link https://getbootstrap.com/) which also gave me the CSS stylesheets that was required. These gave me the structure that I required.

I was impressed by one of the tutorials demonstrating different fonts and therefore I included fontawesome (see link https://fontawesome.com/).

All data is stored into a .csv file – originally this data were compiled using Excel.

To produce all the visualizations, JavaScript became an important feature. This included the following:

D3.min.js

Crossfilter.min.js

DC.min.js

Queue.min.js

Graph.js

Testing

Changing of data to test functionality of graphs

Changing of size of graphs, ticks,(elastic)

Testing the shift selector for functionality

Using Chrome as my default browser I used its development tools to check for errors or warnings – none present.

I have run the CSS through a validation site (see link https://jigsaw.w3.org/css-validator/)

Please use the following link http://jigsaw.w3.org/css-validator/check/referer (for HTML/XML document only)

Deployment

This site is hosted using GitHub pages, deployed directly from the master branch. The deployed site will update automatically upon new commits to the master branch. In order for the site to deploy correctly on GitHub pages, the landing page must be named index.html.

To run locally, you can clone this repository directly into the editor of your choice by pasting git clone https://amzn1963.github.io/piles_dashboard/ into your terminal. To cut ties with this GitHub repository, type git remote rm origin into the terminal.

Credits

Content/Structure

The data content is taken from department headcount

The styling of project uses the https://codeinstitute.net/ training module