-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1996 from asfadmin/andy/DS-5552-Multiline-ASF-2
Andy/ds 5552 multiline asf 2
- Loading branch information
Showing
8 changed files
with
251 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
9 changes: 8 additions & 1 deletion
9
...es-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,8 @@ | ||
| <p style="text-align: center">Timeseries Date Slider Goes Here</p> | ||
| <div #slider class="slider"></div> | ||
| <div class="slider-labels"> | ||
| <span>2000</span> | ||
| <span>2005</span> | ||
| <span>2010</span> | ||
| <span>2015</span> | ||
| <span>2023</span> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| /* Contenedor principal del slider */ | ||
| .slider { | ||
| margin: 0 auto; /* Centra el slider horizontalmente */ | ||
| width: 100%; /* Ocupa todo el ancho disponible */ | ||
| max-width: 95%; /* Opcional: Limita el ancho máximo para que no se extienda demasiado */ | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .noUi-connect { | ||
| background-color: #007BFF; /* Color principal */ | ||
| height: 6px; /* Ajusta el grosor de la barra conectada */ | ||
| } | ||
|
|
||
| .noUi-handle { | ||
| background-color: #FFFFFF; | ||
| border: 2px solid #007BFF; /* Borde que combine con el color principal */ | ||
| border-radius: 50%; /* Hace que el control sea redondo */ | ||
| height: 20px; | ||
| width: 20px; | ||
| } | ||
|
|
||
| .noUi-tooltip { | ||
| background-color: #333; | ||
| color: #fff; | ||
| border-radius: 4px; | ||
| font-size: 12px; | ||
| } | ||
|
|
||
| /* Estilos de las etiquetas debajo del slider */ | ||
| .slider-labels { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| width: 100%; /* Ocupa todo el ancho del slider */ | ||
| max-width: 95%; /* Limita el ancho para alinearse con el slider */ | ||
| margin: 10px auto 0; /* Centra y da espacio superior al slider */ | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| .slider-labels span { | ||
| font-size: 12px; | ||
| color: #666; /* Color de las etiquetas */ | ||
| } |
127 changes: 123 additions & 4 deletions
127
...ries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,12 +1,131 @@ | ||
| import { Component } from '@angular/core'; | ||
| import {Component, ElementRef, ViewChild, OnInit, Input, OnChanges, SimpleChanges} from '@angular/core'; | ||
| import * as noUiSlider from 'nouislider'; | ||
| import { Store } from "@ngrx/store"; | ||
| import { AppState } from "@store"; | ||
| import * as models from "@models"; | ||
| import {Observable, Subject} from 'rxjs'; | ||
| import {UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from "@angular/forms"; | ||
| import * as filtersStore from "@store/filters"; | ||
| import {SubSink} from "subsink"; | ||
| import {debounceTime, distinctUntilChanged} from "rxjs/operators"; | ||
|
|
||
| @Component({ | ||
| selector: 'app-timeseries-chart-temporal-slider', | ||
| standalone: true, | ||
| imports: [], | ||
| templateUrl: './timeseries-chart-temporal-slider.component.html', | ||
| styleUrl: './timeseries-chart-temporal-slider.component.scss' | ||
| styleUrls: ['./timeseries-chart-temporal-slider.component.scss'] | ||
| }) | ||
| export class TimeseriesChartTemporalSliderComponent { | ||
| export class TimeseriesChartTemporalSliderComponent implements OnInit, OnChanges { | ||
| @Input() maxRange: models.Range<number> = {start: 0, end: 0}; | ||
| @ViewChild('slider', { static: true }) sliderRef: ElementRef; | ||
|
|
||
| public daysRange: models.Range<number> = {start: 0, end: 0}; | ||
| public lastRange: models.Range<number> = {start: 0, end: 0}; | ||
| public daysValues$ = new Subject<number[]>(); | ||
| public slider; | ||
|
|
||
| options: UntypedFormGroup; | ||
|
|
||
| daysControl: UntypedFormControl; | ||
|
|
||
| private firstLoad = true; | ||
| private subs = new SubSink(); | ||
|
|
||
| constructor( | ||
| private store$: Store<AppState>, | ||
| fb: UntypedFormBuilder | ||
| ) { | ||
| this.daysControl = new UntypedFormControl(this.daysRange, Validators.min(0)); | ||
|
|
||
| this.options = fb.group({ | ||
| days: this.daysControl, | ||
| }); | ||
| } | ||
|
|
||
| ngOnInit() { | ||
| this.daysControl = new UntypedFormControl(this.daysRange, Validators.min(0)); | ||
| const daysSliderRef = this.makeDaysSlider(this.sliderRef); | ||
| const daysValues$ = daysSliderRef.daysValues; | ||
|
|
||
| // this.tempSlider = tempSlider; | ||
|
|
||
| this.subs.add( | ||
| daysValues$.subscribe( | ||
| range => { | ||
| console.log(range); | ||
| const action = new filtersStore.SetTemporalRange({ start: range[0], end: range[1] }); | ||
| this.store$.dispatch(action); | ||
| } | ||
| ) | ||
| ); | ||
|
|
||
| this.subs.add( | ||
| this.store$.select(filtersStore.getTemporalRange).subscribe( | ||
| temp => { | ||
| this.daysRange = {start: temp.start, end: temp.end}; | ||
| if (this.firstLoad) { | ||
| this.firstLoad = false; | ||
| this.slider.set([temp.start, temp.end]); | ||
| } | ||
| } | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| ngOnChanges(changes: SimpleChanges) { | ||
| if (changes.maxRange && changes.maxRange.currentValue) { | ||
| this.maxRange = changes.maxRange.currentValue; | ||
| console.log('changes start time:', this.maxRange.start.valueOf()); | ||
| console.log('changes end time:', this.maxRange.end.valueOf()); | ||
| this.daysRange = {start: this.maxRange.start.valueOf(), | ||
| end: this.maxRange.end.valueOf()}; | ||
| if (this.firstLoad) { | ||
| this.firstLoad = false; | ||
| this.slider.set([this.daysRange.start, this.daysRange.end]); | ||
| } | ||
| // this.slider.noUiSlider.updateOptions({ | ||
| // start: [this.maxRange.start.valueOf(), this.maxRange.end.valueOf()], | ||
| // range: { | ||
| // 'min': this.maxRange.start.valueOf(), | ||
| // 'max': this.maxRange.end.valueOf() | ||
| // } | ||
| } | ||
| } | ||
|
|
||
| public updateDaysOffset() { | ||
| this.options.controls.days.setValue(this.daysRange); | ||
| this.daysValues$.next([this.daysRange.start, this.daysRange.end] ); | ||
| } | ||
|
|
||
| public makeDaysSlider(filterRef: ElementRef): {slider: any, daysValues: Observable<number[]>} { | ||
| console.log('makeDaysSlider maxRange', this.maxRange); | ||
| this.slider = noUiSlider.create(filterRef.nativeElement, { | ||
| start: [2000, 2023], | ||
| behaviour: 'tap-drag', | ||
| tooltips: false, | ||
| connect: true, | ||
| step: 1, | ||
| range: { | ||
| 'min': 2000, | ||
| 'max': 2023 | ||
| } | ||
| }); | ||
|
|
||
| this.slider.on('update', (values, _) => { | ||
| this.daysValues$.next(values.map(v => +v)); | ||
| }); | ||
|
|
||
| return { | ||
| slider: this.slider, | ||
| daysValues: this.daysValues$.asObservable().pipe( | ||
| debounceTime(500), | ||
| distinctUntilChanged() | ||
| ) | ||
| }; | ||
|
|
||
| } | ||
|
|
||
| ngOnDestroy() { | ||
| this.subs.unsubscribe(); | ||
| } | ||
| } |
Oops, something went wrong.