Skip to content

Commit

Permalink
dashboard page: fine-tuning
Browse files Browse the repository at this point in the history
  • Loading branch information
@nobohan
nobohan committed Nov 28, 2023
1 parent 6a65d41 commit 1bdfc71
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 53 deletions.
4 changes: 2 additions & 2 deletions frontend/src/app/dashboard/dashboard.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ div.dashboard-map-switch {

div.dashboard-map-legend {
position: absolute;
bottom: 40px;
left: 20px;
bottom: 0px;
right: 60px;
font-size: 0.9em;
z-index: 500;
background-color: white;
Expand Down
96 changes: 48 additions & 48 deletions frontend/src/app/dashboard/dashboard.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<div class="container">
<div class="row">
<div class="col-lg-12 dashboard-header">
<h1 class="mt-4">{{ dashboardData?.base.name }}</h1>
<h1 class="mt-4">Tableau de bord</h1>
<div class='dashboard-print'>
<button
type="button"
Expand All @@ -16,58 +16,23 @@ <h1 class="mt-4">{{ dashboardData?.base.name }}</h1>
</div>
</div>

<div class="row">
<div class="col-lg-12 dashboard-section">
<h2 class="mt-4">Données de base</h2>
<div class="row dashboard-base">
<div class="col-lg-4 border-right">Superficie: <span>{{ dashboardData?.base.area }}</span> km²</div>
<div class="col-lg-4 border-right">Habitants: <span>{{ dashboardData?.base.population }}</span> hab.</div>
<div class="col-lg-4">Densité de population: <span>{{ (dashboardData?.base.population / dashboardData?.base.area).toFixed(2) }}</span> hab/km²</div>
</div>
</div>

<div class="col-lg-12 dashboard-section">
<h2 class="mt-4">Occupation du sol</h2>
<div class="row dashboard-occsol">
<div class="dashboard-occsol-occsol col-lg-6">
<h3>Les groupes d'occupation du sol</h3>
<table class="dashboard-table table table-striped">
<tr *ngFor="let l of dashboardData?.landuse">
<td>{{ l.name }}</td>
<td>{{ l.area }} ha</td>
<td>{{ (l.area / 100 / dashboardData?.base.area * 100).toFixed(0) }} %</td>
</tr>
</table>
</div>
<div class="dashboard-occsol-cultures col-lg-6">
<h3>Les principales cultures</h3>
<table class="dashboard-table table table-striped">
<tr *ngFor="let l of dashboardData?.production">
<td>{{ l.name }}</td>
<td>{{ l.area }} ha</td>
</tr>
</table>
</div>
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12">
<h2 class="mt-4">Les programmes</h2>
<p>Attention, les données présentées ici sont des données brutes, non vérifiées, qui peuvent mener à de mauvaises interprétations.</p>
</div>

<div *ngFor="let p of sites" class="col-lg-12 mt-5">
<div *ngFor="let p of sites" class="col-lg-12">

<div class="row">
<h3>{{ p.title }}</h3>
<div class="mt-5">
<h3><a href="programs/{{p.programId}}/sites">#{{p.programId}} {{ p.title }}</a></h3>
</div>

<div class="row">
<div class="col-lg-6 dashboard-program-info">
<div class="col-lg-6 mt-3 dashboard-program-info">

<div class="">{{ p.count }} sites répertoriés</div>
<div class="">dont {{ p.countImport }} importés</div>
<div class="font-weight-bold">{{ p.count }} sites répertoriés</div>
<div class="font-weight-bold">dont {{ p.countImport }} importés</div>

<div *ngIf="p.geometryType === 'ligne'">
<div class="">Longueur cartographiée: {{ p.sumLineLength.toFixed(2) }} km</div>
Expand All @@ -78,7 +43,7 @@ <h3>{{ p.title }}</h3>
</div>

<div *ngFor="let k of p.keys">
<div id="countByKey-{{k}}" >
<div *ngIf="p.formKey[k].type === 'string'" id="countByKey-{{k}}" >
<h4 class="mt-4">{{ p.formKey[k].title }}</h4>
<table class="table table-striped">
<tbody>
Expand All @@ -92,7 +57,7 @@ <h4 class="mt-4">{{ p.formKey[k].title }}</h4>
</div>
</div>

<div class="col-lg-6 dashboard-program-graph">
<div class="col-lg-6 mt-5 dashboard-program-graph">
<!-- <div class="dashboard-toggle-graph p-2">
<button
type="button"
Expand All @@ -110,9 +75,9 @@ <h4 class="mt-4">{{ p.formKey[k].title }}</h4>
</div>
</div>

<div class="row">
<div class="row d-flex justify-content-center">
<div [ngClass]="col-lg-12" class="dashboard-map" >
<div class="col-lg-12 dashboard-map-container mt-4" id="dashboardMap-{{p.programId}}"></div>
<div class="col-lg-12 dashboard-map-container mt-4 mb-5" id="dashboardMap-{{p.programId}}"></div>
<!-- <div class="dashboard-map-switch">
<button
type="button"
Expand All @@ -130,9 +95,44 @@ <h4 class="mt-4">{{ p.formKey[k].title }}</h4>
</div>
</div>
</div>

</div>

<!-- <div class="row">
<div class="col-lg-12 dashboard-section">
<h2 class="mt-4">Données de base</h2>
<div class="row dashboard-base">
<div class="col-lg-4 border-right">Superficie: <span>{{ dashboardData?.base.area }}</span> km²</div>
<div class="col-lg-4 border-right">Habitants: <span>{{ dashboardData?.base.population }}</span> hab.</div>
<div class="col-lg-4">Densité de population: <span>{{ (dashboardData?.base.population / dashboardData?.base.area).toFixed(2) }}</span> hab/km²</div>
</div>
</div>
<div class="col-lg-12 dashboard-section">
<h2 class="mt-4">Occupation du sol</h2>
<div class="row dashboard-occsol">
<div class="dashboard-occsol-occsol col-lg-6">
<h3>Les groupes d'occupation du sol</h3>
<table class="dashboard-table table table-striped">
<tr *ngFor="let l of dashboardData?.landuse">
<td>{{ l.name }}</td>
<td>{{ l.area }} ha</td>
<td>{{ (l.area / 100 / dashboardData?.base.area * 100).toFixed(0) }} %</td>
</tr>
</table>
</div>
<div class="dashboard-occsol-cultures col-lg-6">
<h3>Les principales cultures</h3>
<table class="dashboard-table table table-striped">
<tr *ngFor="let l of dashboardData?.production">
<td>{{ l.name }}</td>
<td>{{ l.area }} ha</td>
</tr>
</table>
</div>
</div>
</div>
</div> -->

<!-- <div class="col-lg-12 dashboard-section">
<h2 class="mt-4">Biomasse</h2>
<div class="row dashboard-biomasse">
Expand Down
3 changes: 0 additions & 3 deletions frontend/src/app/dashboard/dashboard.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -318,7 +318,6 @@ export class DashboardComponent implements AfterViewInit {
*/
computeTotalArea(featureCollection: FeatureCollection): number {
let total = 0;
console.log(featureCollection.features);

featureCollection.features.forEach((f) => {
const geom = f.geometry as Polygon;
Expand Down Expand Up @@ -426,7 +425,6 @@ export class DashboardComponent implements AfterViewInit {
.get(`${MainConfig.API_ENDPOINT}/programs/${programId}`)
.subscribe((result) => {
const programFeature = result as FeatureCollection;
console.log('program', result);
this.addProgramLayer(programFeature, dashboardMap);
});

Expand All @@ -449,7 +447,6 @@ export class DashboardComponent implements AfterViewInit {
const mapContainer = document.getElementById(
`dashboardMap-${programId}`
);
console.log('mapcontainer in addlayertomap', mapContainer, programId);
this.initMap(conf, programId);

const layerOptions = {
Expand Down

0 comments on commit 1bdfc71

Please sign in to comment.