This project is about creating a Dashboard representing the Statistics of Zone01's talents within the 01-edu System Platform.
The program should log the Talent in the platform to get a JSON Web Token (JWT).
That token will be used to send subsequent requests with GraphQL queries to Get specific Data from the API.
Finally, the program will graphically represent the Data in the page using Scalar Vector Graphics (SVG).
Click on badges to get to the code...
Click on badges to get to the code...
$ git clone http://learn.zone01dakar.sn/git/jefaye/graphql
$ cd graphql/|
+ -- src/
| |
| + -- assets/
| | |
| | + -- bg-dark.webp
| |
| + -- components/
| | |
| | + -- charts/
| | | |
| | | + -- area.js
| | | |
| | | + -- bar.js
| | | |
| | | + -- donut.js
| | | |
| | | + -- pie.js
| | | |
| | | + -- radar.js
| | |
| | + -- aside.js
| | |
| | + -- form.js
| | |
| | + -- nav.js
| | |
| | + -- section.js
| |
| + -- graphql/
| | |
| | + -- charts.gql.js
| | |
| | + -- profile.gql.js
| |
| + -- services/
| | |
| | + -- services.js
| |
| + -- styles/
| | |
| | + -- components/
| | | |
| | | + -- aside.css
| | | |
| | | + -- form.css
| | | |
| | | + -- nav.css
| | | |
| | | + -- section.css
| | |
| | + -- global.css
| | |
| | + -- variables.css
| |
| + -- templates/
| | |
| | + -- aside.html.js
| | |
| | + -- form.html.js
| | |
| | + -- nav.html.js
| | |
| | + -- section.html.js
| |
| + -- utils/
| | |
| | + -- elements.js
| | |
| | + -- extract.js
| | |
| | + -- format.js
| |
| + -- app.js
| |
| + -- index.html
|
+ -- .gitignore
|
+ -- gitify.sh
|
+ -- LICENSE
|
+ -- README.md
The first step is to get to Graph01 in your browser. The address will automatically send to the Login page.
The login form should be filled with the user GIT pseudo (for ex. jefaye) and the corresponding password. This should send the homepage data suffice it the user is a Talent of the Zone 01 of Dakar.
sequenceDiagram
participant Talent
participant API
Talent ->> API: POST Credentials
API ->> API: CHECK Credentials
alt Invalid Credentials
API -->> Talent: Unathorized (401)
else
API -->> Talent: GET Token
Talent ->> Talent: SAVE Token
end
The fetched data from the Graph queries are then displayed in the Dashboard as such:
-
Profile Section:
- Git pseudo, Complete Name and Avatar depending on the Gender
- XP with the amount and suitable unit from conversion depending on the amount
- Rank Denomination depending on the Level
- Audit Ratio with a representation of the proportion of received audits and audits done
-
Graph Section:
- XP Progression in an year interval from the current date
- Top 5 Projects with the largest amount of XP
- Top 10 Skills with the highest percentage
- XP amount per month in a year interval from the current date
sequenceDiagram
participant Talent
participant API
Talent ->> API: POST Request + Query + Token
API ->> API: CHECK Token
API ->> API: GENERATE Response
API -->> Talent: GET Data
