Merge pull request #57 from ScienceForChange/develop

Polylines

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "i18n-ally.localesPaths": ["src/assets/i18n"]
+}

src/app/models/observations.ts

@@ -9,6 +9,7 @@ export interface ObservationsDataChart {
     date: string;
     obs: Observations[];
     count: number;
+    completeDay: Date;
   }
 
 export interface ObservationsAttributes {
@@ -40,6 +41,8 @@ export interface ObservationsAttributes {
     created_at:             string;
     updated_at:             Date;
     roughtness_R?:          string;
+    segments?:              segment[];
+    path?:                  number[][];
 }
 
 export interface ObservationsRelationships {
@@ -70,4 +73,15 @@ interface UserAttributes {
 interface Profile {
     gender:    string;
     birthYear: number | string;
-}
+}
+
+interface segment {
+  latitude:               string;
+  longitude:              string;
+  Leq:                    string;
+  LAeqT:                  string[] | string;
+  LAmax:                  string;
+  LAmin:                  string;
+  L90:                    string;
+  L10:                    string;
+}

src/app/modules/map/components/map-layers/map-layers.component.ts

@@ -14,7 +14,6 @@ export class MapLayersComponent {
 
 
   toggleLayerVisibility(layerId: string) {
-    console.log('layerId', layerId)
     this.mapService.map.setStyle('mapbox://styles/mapbox/' + layerId);
   }
 }

src/app/modules/overview/components/bar-chart/bar-chart.component.html

@@ -1,14 +1,20 @@
 <section class="card">
-  <form [formGroup]="filtersForm" class="flex flex-column p-1 pt-4 gap-2">
-    <p-calendar
-      formControlName="daysFilter"
-      [showIcon]="true"
-      dateFormat="dd-mm-yy"
-      [panelStyleClass]="'card p-0'"
-      [selectionMode]="'range'"
-      [maxDate]="today"
-    />
-  </form>
+  <div class="flex gap-3 align-items-center p-1 pt-4">
+    <form [formGroup]="filtersForm" class="flex flex-column gap-2">
+      <p-calendar
+        formControlName="daysFilter"
+        [showIcon]="true"
+        dateFormat="dd-mm-yy"
+        [panelStyleClass]="'card p-0'"
+        [selectionMode]="'range'"
+        [maxDate]="today"
+      />
+    </form>
+    <p-button label="Setmanes" [disabled]="timeFilterSelected === timesFilter.WEEK" (onClick)="timeFilter(timesFilter.WEEK)" />
+    <p-button label="Mesos" [disabled]="timeFilterSelected === timesFilter.MONTH" (onClick)="timeFilter(timesFilter.MONTH)" />
+    <p-button label="Anys" [disabled]="timeFilterSelected === timesFilter.YEAR" (onClick)="timeFilter(timesFilter.YEAR)" />
+    <p-button icon="pi pi-times" [disabled]="timeFilterSelected === timesFilter.DELETE" (onClick)="timeFilter(timesFilter.DELETE)" />
+  </div>
 
   <div id="bar-chart-container"></div>
 </section>

src/app/modules/overview/components/bar-chart/bar-chart.component.ts

@@ -10,7 +10,10 @@ import { GridComponent, GridComponentOption } from 'echarts/components';
 import { BarChart, BarSeriesOption } from 'echarts/charts';
 import { CanvasRenderer } from 'echarts/renderers';
 import { ObservationsService } from '../../../../services/observations/observations.service';
-import { Observations, ObservationsDataChart } from '../../../../models/observations';
+import {
+  Observations,
+  ObservationsDataChart,
+} from '../../../../models/observations';
 import { FormControl, FormGroup } from '@angular/forms';
 
 type EChartsOption = echarts.ComposeOption<
@@ -24,33 +27,33 @@ type EChartsOption = echarts.ComposeOption<
 })
 export class BarChartComponent implements OnInit, AfterViewInit {
   private myChart!: echarts.ECharts;
+  @HostListener('window:resize', ['$event'])
+  onResize(event: any) {
+    this.myChart.resize();
+  }
   private options: EChartsOption;
+  public timesFilter = {
+    DELETE: 'delete',
+    WEEK: 'week',
+    MONTH: 'month',
+    YEAR: 'year',
+  }
   private observations: ObservationsDataChart[] = [];
   private obsFiltered: ObservationsDataChart[] = [];
   public today: Date = new Date();
+  public timeFilterSelected: string = this.timesFilter.DELETE;
   private lastDay30: Date = new Date(
     new Date().setDate(this.today.getDate() - 30)
   );
-  private dateOptions: Intl.DateTimeFormatOptions = {
-    day: '2-digit',
-    month: '2-digit',
-    year: 'numeric',
-  };
   private loadingOptions = {
     text: 'Carregant...',
     color: '#FF7A1F',
   };
-
   private observationService: ObservationsService = inject(ObservationsService);
-
   public filtersForm: FormGroup = new FormGroup({
     daysFilter: new FormControl([this.lastDay30, new Date()], []),
   });
 
-  @HostListener('window:resize', ['$event'])
-  onResize(event: any) {
-    this.myChart.resize();
-  }
 
   ngOnInit(): void {
     echarts.use([GridComponent, BarChart, CanvasRenderer]);
@@ -59,48 +62,101 @@ export class BarChartComponent implements OnInit, AfterViewInit {
         const haveTwoDaysSelected = values.daysFilter[1] !== null;
         if (haveTwoDaysSelected) {
           this.obsFiltered = this.observations.filter((obs) => {
-            const isBeforeToday = new Date (obs.date) <= values.daysFilter[1];
+            const isBeforeToday = new Date(obs.date) <= values.daysFilter[1];
             const isAfterLastDay30 = new Date(obs.date) >= values.daysFilter[0];
             if (isBeforeToday && isAfterLastDay30) return true;
             return false;
           });
-          this.options = {
-            xAxis: {
-              type: 'category',
-              data: this.obsFiltered.map((obs) =>
-                obs.date
-              ),
-            },
-            yAxis: {
-              type: 'value',
-            },
-            series: [
-              {
-                data: this.obsFiltered.map((obs) => obs.count),
-                type: 'bar',
-              },
-            ],
-          };
-          this.options && this.myChart.setOption(this.options);
+          this.updateChart(this.obsFiltered);
+          this.timeFilterSelected = this.timesFilter.DELETE;
         }
       }
     );
   }
 
+  private updateChart(observations: ObservationsDataChart[]) {
+    this.options = {
+      xAxis: {
+        type: 'category',
+        data: observations.map((obs) => obs.date),
+      },
+      yAxis: {
+        type: 'value',
+      },
+      series: [
+        {
+          data: observations.map((obs) => obs.count),
+          type: 'bar',
+        },
+      ],
+    };
+    this.options && this.myChart.setOption(this.options);
+  }
+
+  private currentWeek(date: Date) {
+    let yearStart = new Date(date.getFullYear(), 0, 1);
+    let today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
+    let dayOfYear = (today.valueOf() - yearStart.valueOf() + 1) / 86400000;
+    return Math.ceil(dayOfYear / 7);
+  }
+
+  public timeFilter(filter: string) {
+    //Get obs filtered by the days selected
+    const values = this.filtersForm.value;
+    const obsFiltered = this.observations.filter((obs) => {
+      const isBeforeToday = new Date(obs.date) <= values.daysFilter[1];
+      const isAfterLastDay30 = new Date(obs.date) >= values.daysFilter[0];
+      if (isBeforeToday && isAfterLastDay30) return true;
+      return false;
+    });
+    let filteredObsByTime = obsFiltered;
+    if(filter !== this.timesFilter.DELETE){
+      //Group obs selected by the time selected
+      const groupByTime = obsFiltered.reduce(
+        (acc: { [key: number]: any[] }, obs) => {
+          const day = obs.completeDay;
+          const time =
+            filter === 'week'
+              ? this.currentWeek(day)
+              : filter === 'month'
+              ? day.getMonth()
+              : day.getFullYear();
+          if (!acc[time]) {
+            acc[time] = [obs];
+          }
+          acc[time].push(obs);
+          return acc;
+        },
+        {}
+      );
+      //Create an array with the grouped obs with the structured data needed
+      filteredObsByTime = Object.values(groupByTime).map((timeObs) => {
+        return {
+          date: timeObs[0].date,
+          obs: timeObs,
+          count: timeObs.length,
+          completeDay: timeObs[0].completeDay,
+        };
+      });
+    }
+    this.obsFiltered = filteredObsByTime;
+    this.updateChart(this.obsFiltered);
+    this.timeFilterSelected = filter;
+  }
+
   async ngAfterViewInit(): Promise<void> {
     const chartDom = document.getElementById('bar-chart-container');
     this.myChart = echarts.init(chartDom);
     this.myChart.showLoading('default', this.loadingOptions);
     this.observationService.getAllObservationsFormated().subscribe((data) => {
       this.observations = data;
-
       const arr30DaysBefore = data.filter((obs) => {
         const isBeforeToday = new Date(obs.date) <= this.today;
         const isAfterLastDay30 = new Date(obs.date) >= this.lastDay30;
         if (isBeforeToday && isAfterLastDay30) return true;
         return false;
       });
-
+      this.obsFiltered = arr30DaysBefore;
 
       this.options = {
         tooltip: {
@@ -114,9 +170,7 @@ export class BarChartComponent implements OnInit, AfterViewInit {
         },
         xAxis: {
           type: 'category',
-          data: arr30DaysBefore.map((obs) =>
-            obs.date
-          ),
+          data: arr30DaysBefore.map((obs) => obs.date),
           axisLabel: {
             interval: 0, // This forces displaying all labels
             rotate: 45, // Optional: you can rotate labels to prevent overlapping

src/app/modules/overview/components/observation-numbers/observation-numbers.component.html

@@ -2,18 +2,18 @@
   <div class="grid align-items-stretch gap-4">
     <div class="col card mb-0 flex flex-column justify-content-between">
       <h2 class="text-2xl text-center">Numero de registres total</h2>
-      <p class="text-4xl text-center">{{totalObs}}</p>
+      <p class="text-4xl text-center">{{ totalObs }}</p>
     </div>
     <div class="col card flex flex-column justify-content-between">
       <h2 class="text-2xl text-center">
         Numero de registres mitjans per mes per usuari
       </h2>
-      <p class="text-4xl text-center">{{averageObsPerUser}}</p>
+      <p class="text-4xl text-center">{{ averageObsPerUser }}</p>
     </div>
   </div>
   <div class="card flex flex-column justify-content-between">
     <h2 class="text-2xl text-center">Numero total de persones usuaries</h2>
-    <p class="text-4xl text-center">{{totalUsers}}</p>
+    <p class="text-4xl text-center">{{ totalUsers }}</p>
     <div class="flex w-full">
       <div class="w-6">
         <p-table [value]="dataGenre">
@@ -24,7 +24,9 @@ <h2 class="text-2xl text-center">Numero total de persones usuaries</h2>
           </ng-template>
           <ng-template pTemplate="body" let-data>
             <tr>
-              <td class="text-center">{{ data.value }} {{ data.genre | gender }}</td>
+              <td class="text-center">
+                {{ data.value }} {{ data.genre | gender }}
+              </td>
             </tr>
           </ng-template>
         </p-table>
@@ -44,5 +46,15 @@ <h2 class="text-2xl text-center">Numero total de persones usuaries</h2>
         </p-table>
       </div>
     </div>
+    <p class="text-center">
+      <a href="https://home.soundcollectapp.com/aviso-legal/" target="_blank"
+        >Termes i condicions</a
+      >
+      i
+      <a
+        href="https://home.soundcollectapp.com/politica-de-privacidad/"
+        target="_blank"
+      >Política de Privacitat</a>
+    </p>
   </div>
 </div>

src/app/modules/soundscape/page/soundscape.component.html

@@ -17,7 +17,7 @@
         <p-radioButton name="dateFilter" [(ngModel)]="timeFilter" value="morning" label="{{ 'soundscape.filter.morning' | translate}}"/>
         <p-radioButton name="dateFilter" [(ngModel)]="timeFilter" value="afternoon" label="{{ 'soundscape.filter.afternoon' | translate}}"/>
         <p-radioButton name="dateFilter" [(ngModel)]="timeFilter" value="night" label="{{ 'soundscape.filter.night' | translate}}"/>
-        <p-radioButton name="dateFilter" [(ngModel)]="timeFilter" value="allDay" label="{{ 'soundscape.filter.allDay' | translate}}"/>
+        <p-radioButton name="dateFilter" [(ngModel)]="timeFilter" value="wholeDay" label="{{ 'soundscape.filter.wholeDay' | translate}}"/>
       </div>
     }
     </div>