Nathan/ Add personal chart

package.json

@@ -37,6 +37,7 @@
     "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "^4.0.0",
     "@swimlane/ngx-datatable": "^19.0.0",
+    "@types/d3": "^7.4.3",
     "ajv": "^6.12.0",
     "bootstrap": "^4.5.3",
     "chart.js": "^2.9.3",
@@ -46,6 +47,7 @@
     "chartjs-plugin-zoom": "^0.7.5",
     "class-transformer": "^0.3.1",
     "core-js": "^3.6.4",
+    "d3": "^7.9.0",
     "dexie": "^3.0.3",
     "dexie-export-import": "^1.0.0",
     "file-saver": "^2.0.2",

src/app/app-routing.module.ts

@@ -11,6 +11,7 @@ import { HomeNavLayoutComponent } from "@components/nav-layouts/home-nav-layout/
 import { AuthGuard } from "@guards/auth.guard";
 import { DataLoadingGuard } from "@guards/data-loading.guard";
 import { DataProvidedGuard } from "@guards/data-provided.guard";
+import { PersonalComponent } from "./components/graphs/personal/personal.component";
 
 const HOME_ROUTES: Routes = [
   { path: "home", component: HomeComponent },
@@ -34,6 +35,11 @@ const APP_ROUTES: Routes = [
     canActivate: [AuthGuard, DataProvidedGuard],
     component: QuestionsCompletionComponent,
   },
+  {
+    path: "personal",
+    canActivate: [AuthGuard, DataProvidedGuard],
+    component: PersonalComponent,
+  },
   { path: "", redirectTo: "/home", pathMatch: "full" },
 ];
 

src/app/app.module.ts

@@ -49,6 +49,7 @@ import { HelpNavItemComponent } from "./components/nav-items/help-nav-item/help-
 import { AppNavLayoutComponent } from "./components/nav-layouts/app-nav-layout/app-nav-layout.component";
 import { HomeNavLayoutComponent } from "./components/nav-layouts/home-nav-layout/home-nav-layout.component";
 import { OverviewGraphContextualMenuComponent } from "./components/overview-graph-contextual-menu/overview-graph-contextual-menu.component";
+import { PersonalComponent } from "./components/graphs/personal/personal.component";
 
 /**
  * Firebase configuration file
@@ -112,6 +113,7 @@ export function appInitializerFactory(
     OverviewComponent,
     StudentsCommitsComponent,
     QuestionsCompletionComponent,
+    PersonalComponent,
     MetadataComponent,
     EditRepositoriesComponent,
     ConfigurationComponent,

src/app/components/graphs/overview/chart.scss

@@ -0,0 +1,104 @@
+.hidden {
+  display: none;
+}
+
+text.repo_name {
+  font-size: 18px;
+  pointer-events: all;
+  cursor: pointer;
+}
+
+text.repo_name:hover {
+  font-size: 16px;
+}
+
+.repository {
+  clip-path: url(#clip);
+}
+
+.tick_line {
+  stroke-width: 1px;
+  stroke: #e5e5e5;
+}
+
+.tick > line {
+  stroke-width: 1px;
+  stroke: #e5e5e5;
+}
+
+.axis > line {
+  stroke-width: 1px;
+  stroke: #e5e5e5;
+}
+
+.commit {
+  stroke: #fff;
+  stroke-width: 2px;
+}
+
+.commit-cloture {
+  r: 7px;
+}
+
+.commit-normal {
+  width: 12px;
+  height: 12px;
+  transform-box: fill-box;
+  transform-origin: center;
+  transform: translate(-6px, -6px) rotate(45deg);
+}
+
+.commit-normal:hover {
+  fill: white;
+  stroke: black;
+}
+
+.commit_line {
+  stroke: #999;
+  stroke-width: 2px;
+}
+
+.session {
+  stroke-width: 2px;
+  stroke: rgba(79, 195, 247, 1);
+  fill: rgba(33, 150, 243, 0.15);
+}
+
+.review {
+  stroke: blue;
+  fill: blue;
+  background-color: blue;
+}
+
+.correction {
+  stroke: red;
+  fill: red;
+  background-color: red;
+}
+
+.other {
+  stroke: black;
+  fill: black;
+  background-color: black;
+}
+
+.milestone {
+  pointer-events: auto;
+}
+
+.milestone > .milestone_label {
+  border-radius: 10;
+}
+
+.milestone > rect {
+  rx: 5px;
+  ry: 5px;
+}
+
+.milestone > text {
+  padding: 5px;
+  color: white;
+  fill: white;
+  stroke: white;
+  user-select: none;
+}