Skip to content
GitLab
Commit 226731c5 authored by Thomas Mathieu's avatar Thomas Mathieu
Browse files

Add tab summary(not finished YET)

parent b9b89c8c
master
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 140 additions and 19 deletions
+140 -19
src/app/pages/home/home.component.css
+ 12
− 4
View file @ 226731c5
mat-grid-tile {
border-radius: 7px;
font-size: 22px;
border-radius: 4px;
font-size: 15px;
text-align: center;
}
mat-grid-tile:hover {
......@@ -11,12 +12,19 @@ z-index: 1;
mat-grid-list {
width: 100%;
height: 80%;
margin-left: 15px;
cursor: pointer;
margin-top: 200px;
margin-top: 50px;
}
a {
color: black;
}
h1 {
font-size: 15 px ;
text-align: center;
}
src/app/pages/home/home.component.html
+ 25
− 7
View file @ 226731c5
<body>
<p>Some text here?</p>
<p>Maybe some graphics also</p>
<!-- Dashboard -->
<mat-grid-list cols="4" rowHeight="120px">
<mat-grid-list cols="4" rowHeight="45px">
<nav>
<a><mat-grid-tile
*ngFor="let tile of tiles"
*ngFor="let tile of tilesTonaliteMed"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.color"
......@@ -13,11 +12,30 @@
[style.border]="tile.border"
(mouseenter)="setColorHover(tile)"
(mouseleave)="setColorHover(tile)"
[title]="tile.title"
[routerLink]="tile.route">
>
<strong>{{tile.text}}</strong>
</mat-grid-tile></a></nav>
</mat-grid-list>
<mat-grid-list cols="5" rowHeight="45px">
<nav>
<a><mat-grid-tile
*ngFor="let tile of tilesThemeRec"
[colspan]="tile.cols"
[rowspan]="tile.rows"
[style.background]="tile.color"
[style.color]="tile.textColor"
[style.border]="tile.border"
(mouseenter)="setColorHover(tile)"
(mouseleave)="setColorHover(tile)"
>
<strong>{{tile.text}}</strong>
</mat-grid-tile></a></nav>
</mat-grid-list>
</body>
......
src/app/pages/home/home.component.ts
+ 103
− 8
View file @ 226731c5
......@@ -8,8 +8,7 @@ export interface Tile {
rows: number;
text: string;
textColor: string;
title: string;
route: string;
}
@Component({
......@@ -24,12 +23,7 @@ export interface Tile {
*/
export class HomeComponent{
// Dashboard infos
tiles: Tile[] = [
{text: 'Saisie de donnée', cols: 4, rows: 1, textColor: "white", color: 'rgb(0,94,184)', border: "3px solid rgb(0,94,184)", title: "Saisir un nouvel article", route: "/data-entry"},
{text: 'Graphiques', cols: 2, rows: 1, textColor: "white", color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)", title: "Modéliser les données graphiquement", route: "/graphics"},
{text: "Recherche d'article", cols: 2, rows: 1, textColor: "white", color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)", title: "Rechercher un article dans la base de données",route: "/articles"},
];
/**
......@@ -43,5 +37,106 @@ export class HomeComponent{
tile.textColor = originalColor;
}
// Summary of Datas
tilesTonaliteMed : Tile[] = [
{text :'Tonalité des médias' , cols : 2 , rows : 1 , textColor : "white" , color: 'rgb(0,94,184)', border: "3px solid rgb(0,94,184)"},
{text :'Positif ' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(0,94,184)', border: "3px solid rgb(0,94,184)"},
{text :'Négatif' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(0,94,184)', border: "3px solid rgb(0,94,184)"},
{text :'Total' , cols : 2 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'71' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'6' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'Landes' , cols : 2 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'1' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'Hautes Pyrénées' , cols : 2 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'80' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'3' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'Pyrénées Atlantiques' , cols : 2 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'19' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'2' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
];
tilesThemeRec : Tile[] = [
{text :'Thèmes les plus récurents' , cols : 5 , rows : 1 , textColor : 'black', color: "white" , border: "none"},
{text :'Thème' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(0,94,184)', border: "3px solid rgb(0,94,184)"},
{text :'Total ' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(0,94,184)', border: "3px solid rgb(0,94,184)"},
{text :'Landes' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(0,94,184)', border: "3px solid rgb(0,94,184)"},
{text :'Hautes Pyrénées' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(0,94,184)', border: "3px solid rgb(0,94,184)"},
{text :'Pyrénées Atlantiques' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(0,94,184)', border: "3px solid rgb(0,94,184)"},
{text :'Partenariat' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'71' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'6' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'Sécurité' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'71' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'6' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'Transition énergétique' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'71' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'6' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'RH' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'71' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'6' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'Crise' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'71' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'6' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'Réseau' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'71' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'6' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'Linky∕Smartgrid' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'71' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'6' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'Envrionnement' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'71' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'6' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
{text :'17' , cols : 1 , rows : 1 , textColor : "white" , color: 'rgb(147,201,14)', border: "3px solid rgb(147,201,14)"},
]
public displayTonaliteMed(){
let arrayTonaliteMed = new Array(5);
for ( let i=0 ; i <5 ; i++){
arrayTonaliteMed[i]=new Array(3)
}
arrayTonaliteMed[0][0]= 'TONALITES DES MEDIAS';
arrayTonaliteMed[0][1]= 'POSITIF';
arrayTonaliteMed[0][2]= 'NEGATIF';
arrayTonaliteMed[1][0]= 'TOTAL';
arrayTonaliteMed[1][1]= arrayTonaliteMed[2][1]+ arrayTonaliteMed[3][1] + arrayTonaliteMed[4][1];
arrayTonaliteMed[1][2]= arrayTonaliteMed[2][2]+ arrayTonaliteMed[3][2] + arrayTonaliteMed[4][2];
arrayTonaliteMed[2][0]= 'LANDES';
arrayTonaliteMed[2][1]= 17 ;
arrayTonaliteMed[2][2]= 1;
arrayTonaliteMed[3][0]= 'HAUTES PYRENEES';
arrayTonaliteMed[3][1]= 80;
arrayTonaliteMed[3][2]= 3;
arrayTonaliteMed[4][0]= 'PYRENNES ATLANTIQUES';
arrayTonaliteMed[4][1]= 19;
arrayTonaliteMed[4][2]= 2;
return arrayTonaliteMed;
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment