Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update #177

Merged
merged 5 commits into from
Jul 12, 2024
Merged

Update #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
29bc269
Fixed the count when filtering
TomasTubertSFC Jul 12, 2024
3f95172
Merge branch 'develop' into frontend/#142
TomasTubertSFC Jul 12, 2024
0b83b04
Merge pull request #175 from ScienceForChange/frontend/#142
TomasTubertSFC Jul 12, 2024
b66ab6c
Cambianda diseño etiqueta ejes x y
Almenara Jul 12, 2024
8ec322d
Merge pull request #176 from ScienceForChange/front/fix/charts
almenarasfc Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 14 additions & 41 deletions src/app/modules/overview/components/bar-chart/bar-chart.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ 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 { FormControl, FormGroup } from '@angular/forms';
Expand Down Expand Up @@ -68,7 +67,6 @@ export class BarChartComponent implements OnInit, AfterViewInit {

ngOnInit(): void {
echarts.use([GridComponent, BarChart, CanvasRenderer]);
// console.log('this.daysOfWeek', this.daysOfWeek)
this.filtersForm.valueChanges.subscribe(
(values: { daysFilter: [Date, Date | null] }) => {
const haveTwoDaysSelected = values.daysFilter[1] !== null;
Expand Down Expand Up @@ -106,12 +104,8 @@ export class BarChartComponent implements OnInit, AfterViewInit {
}

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;
const day = new Intl.DateTimeFormat('ca', { weekday: 'long' }).format(date);
return day;
// return Math.ceil(dayOfYear / 7);
}

public timeFilter(filter: string) {
Expand All @@ -133,13 +127,14 @@ export class BarChartComponent implements OnInit, AfterViewInit {
return [...acc, this.currentWeek(curr.completeDay)];
}, []);
const series = daysOfWeekSelected.map((day) => {
return obsFiltered.filter(
const groupOfDaySelected = obsFiltered.filter(
(obs) => this.currentWeek(obs.completeDay) === day
).length;
);
return groupOfDaySelected.reduce((acc, curr) => acc + curr.count, 0);
});
dataXaxis = this.daysOfWeek;
dataSerie = this.daysOfWeek.map((count) => {
const index = dataXaxis.indexOf(count);
const index = daysOfWeekSelected.indexOf(count);
return series[index];
});
}
Expand All @@ -155,10 +150,11 @@ export class BarChartComponent implements OnInit, AfterViewInit {
)
);
dataSerie = months.map((month) => {
return obsFiltered.filter((obs) => {
const groupOfMonthsSelected = obsFiltered.filter((obs) => {
const obsMonth = obs.completeDay.getMonth();
return obsMonth === month;
}).length;
})
return groupOfMonthsSelected.reduce((acc, curr) => acc + curr.count, 0);
});
}
if (filter === this.timesFilter.YEAR) {
Expand All @@ -168,17 +164,17 @@ export class BarChartComponent implements OnInit, AfterViewInit {
return [...acc, year];
}, []);
dataSerie = dataXaxis.map((year) => {
return obsFiltered.filter((obs) => {
const groupOfYearsSelected = obsFiltered.filter((obs) => {
const obsMonth = obs.completeDay.getFullYear();
return obsMonth === +year;
}).length;
})
return groupOfYearsSelected.reduce((acc, curr) => acc + curr.count, 0);
});
}
} else {
dataXaxis = filteredObsByTime.map((obs) => obs.date);
dataSerie = filteredObsByTime.map((obs) => obs.count);
}

this.obsFiltered = filteredObsByTime;
this.updateChart(dataXaxis, dataSerie);
this.timeFilterSelected = filter;
Expand All @@ -197,21 +193,6 @@ export class BarChartComponent implements OnInit, AfterViewInit {
return false;
});
this.obsFiltered = arr30DaysBefore;
// Generate labels for months
// let lastMonth: number | null = null;
// const months: string[] = arr30DaysBefore
// .map((obs) => {
// const month = obs.completeDay.toLocaleDateString(
// this.translate.currentLang,
// { month: 'long' }
// )
// const year = obs.completeDay.getFullYear()
// const monthLabel = `${month.charAt(0).toUpperCase()+month.slice(1)} / ${year}`;
// return monthLabel
// })


// console.log(months);
this.options = {
tooltip: {
trigger: 'axis',
Expand All @@ -232,24 +213,16 @@ export class BarChartComponent implements OnInit, AfterViewInit {
},
position: 'bottom',
},
// {
// type: 'category',
// data: months,
// position: 'bottom',
// offset: 30,
// axisLine: {
// show: false, // This will not show the xAxis line
// },
// axisTick: {
// show: false, // This will not show the tick marks
// },
// },
],
yAxis: {
name: this.translate.instant('overview.barChart.yAxis'),
nameLocation: 'middle',
nameGap: 35,
type: 'value',
nameTextStyle:{
fontSize: 15,
fontWeight:600
}
},
series: [
{
Expand Down
12 changes: 10 additions & 2 deletions src/app/modules/soundscape/components/pressure-chart/pressure-chart.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,21 @@ export class PressureChartComponent implements OnInit, OnDestroy{
nameLocation: 'middle',
nameGap: 35,
type: 'category',
data: this.dBLevels
data: this.dBLevels,
nameTextStyle:{
fontSize: 15,
fontWeight:600
}
},
yAxis: {
name: this.translate.instant('soundscape.pressure.obsNumber'),
nameLocation: 'middle',
nameGap: 35,
type: 'value'
type: 'value',
nameTextStyle:{
fontSize: 15,
fontWeight:600
}
},
tooltip: {
color: true,
Expand Down
8 changes: 8 additions & 0 deletions .../modules/soundscape/components/qualitative-data-chart/qualitative-data-chart.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,13 +113,21 @@ export class QualitativeDataChartComponent implements AfterViewInit {
name: this.translate.instant('soundscape.quas.activityLevel'),
nameLocation: 'middle',
nameGap: 35,
nameTextStyle:{
fontSize: 15,
fontWeight:600
}
},
yAxis: {
min: -1,
max: 1,
name: this.translate.instant('soundscape.quas.pleasantnessLevel'),
nameLocation: 'middle',
nameGap: 35,
nameTextStyle:{
fontSize: 15,
fontWeight:600
}
},
tooltip: {
position: 'top'
Expand Down
10 changes: 9 additions & 1 deletion src/app/modules/soundscape/components/quas-chart/quas-chart.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,21 @@ export class QuasChartComponent implements OnInit, OnDestroy{
nameLocation: 'middle',
nameGap: 35,
type: 'category',
nameTextStyle:{
fontSize: 15,
fontWeight:600
},
data: this.dBLevels
},
yAxis: {
name: this.translations.instant('soundscape.quas.obsNumber'),
nameLocation: 'middle',
nameGap: 35,
type: 'value'
type: 'value',
nameTextStyle:{
fontSize: 15,
fontWeight:600
}
},
tooltip: {
color: true,
Expand Down
6 changes: 5 additions & 1 deletion src/app/modules/soundscape/components/sound-types-chart/sound-types-chart.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,11 @@ export class SoundTypesChartComponent implements OnInit, OnDestroy{
name: this.translations.instant('soundscape.soundTypes.axisY'),
nameLocation: 'middle',
nameGap: 35,
type: 'value'
type: 'value',
nameTextStyle:{
fontSize: 15,
fontWeight:600
}
},
xAxis: {
type: 'category',
Expand Down
8 changes: 8 additions & 0 deletions ...ts/temporal-evolution-sound-level-chart/temporal-evolution-sound-level-chart.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -512,13 +512,21 @@ export class TemporalEvolutionSoundLevelChartComponent
name: this.translations.instant('soundscape.temporalEvolution.hours'),
nameGap: 35,
nameLocation: 'middle',
nameTextStyle:{
fontSize: 15,
fontWeight:600
}
},
yAxis: {
name: this.translations.instant(
'soundscape.temporalEvolution.pressureLevel'
),
nameLocation: 'middle',
nameGap: 35,
nameTextStyle:{
fontSize: 15,
fontWeight:600
}
},
series: [
{
Expand Down
12 changes: 11 additions & 1 deletion ...pp/modules/soundscape/components/tonal-frequency-chart/tonal-frequency-chart.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ export class TonalFrequencyChartComponent {
name: name,
nameLocation: 'middle',
nameGap: 35,
type: 'value'
type: 'value',
//cambiamos el tamaño de la letra
},
}
// Apply the updated options to the chart
Expand Down Expand Up @@ -99,14 +100,23 @@ export class TonalFrequencyChartComponent {
xAxis: {
name: this.translate.instant('soundscape.tonalFrequency.frequency'),
nameLocation: 'middle',
nameTextStyle:{
fontSize: 15,
fontWeight:600
},
nameGap: 55,
type: 'category',
data: this.hertzLevels,
axisLabel: { interval: 0, rotate: 45, fontSize: 10 , margin: 10 }

},
yAxis: {
name: this.translate.instant('soundscape.tonalFrequency.presure'),
nameLocation: 'middle',
nameTextStyle:{
fontSize: 15,
fontWeight:600
},
nameGap: 35,
type: 'value'
},
Expand Down
Loading