From 8bd6d9b7b7b76478ae7dc6a102c2729e9438df77 Mon Sep 17 00:00:00 2001 From: Andrew Anderson Date: Mon, 23 Sep 2024 13:56:24 -0700 Subject: [PATCH 1/4] Displacement Chart Settings Icon (gear) in place --- .../timeseries-results-menu.component.scss | 3 +++ .../chart-modal/chart-modal.component.html | 13 +++++++----- .../chart-modal/chart-modal.component.scss | 20 ++++++++++++++----- .../timeseries-chart.component.scss | 6 +++--- 4 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss index f786c40b2..2802227c0 100644 --- a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss +++ b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.scss @@ -6,6 +6,9 @@ display: flex; flex-direction: row; height: calc(100%); + margin-top: 12px; + margin-right: 12px; + position: relative; } .ts-chart-card { diff --git a/src/app/components/shared/chart-modal/chart-modal.component.html b/src/app/components/shared/chart-modal/chart-modal.component.html index f5beef897..8a073ff77 100644 --- a/src/app/components/shared/chart-modal/chart-modal.component.html +++ b/src/app/components/shared/chart-modal/chart-modal.component.html @@ -1,12 +1,15 @@
- - chart configshape_line - +
- \ No newline at end of file + diff --git a/src/app/components/shared/chart-modal/chart-modal.component.scss b/src/app/components/shared/chart-modal/chart-modal.component.scss index 9289b8893..56f6c18b9 100644 --- a/src/app/components/shared/chart-modal/chart-modal.component.scss +++ b/src/app/components/shared/chart-modal/chart-modal.component.scss @@ -1,5 +1,4 @@ @use "@angular/material" as mat; - @import "asf-theme"; $config: mat.define-legacy-typography-config(); @@ -27,9 +26,20 @@ $config: mat.define-legacy-typography-config(); font-size: 14px; } -.more-horiz { - font-size: 16px !important; - margin-left: 0; +.mdc-fab--mini { + width: 20px; + height: 20px; + text-align: center; + padding-top: 8px; + border-radius: 4px !important; +} + +.settings-icon { + @include themify($themes) { + color: themed('dark-primary-text') !important; + } + font-size: 16px !important; + margin-left: 0; } .toggle-group-wrapper--layout { @@ -41,6 +51,6 @@ $config: mat.define-legacy-typography-config(); } .chart-config-menu-panel { - padding-left: 15px; + padding-left: 15px; padding-right: 15px; } diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss index 52868bad2..63ff5fe70 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.scss +++ b/src/app/components/timeseries-chart/timeseries-chart.component.scss @@ -1,6 +1,5 @@ @import "asf-theme"; - #timeseriesChart { height: 100%; width: 100%; @@ -34,6 +33,7 @@ .ts-chart-config-button { - margin-right: 15px; - margin-top: 10px; + position: absolute; + top: 18px; + right: 20px; } From 2feb2cb5d59e6df7dfc36ea3c7125f6f9975dc77 Mon Sep 17 00:00:00 2001 From: Andrew Anderson Date: Wed, 25 Sep 2024 11:09:05 -0700 Subject: [PATCH 2/4] WIP Looks good. Zooming isn't working. --- .../timeseries-results-menu.component.html | 56 ++++++++++--------- .../timeseries-chart-zoom.component.html | 22 ++++++++ .../timeseries-chart-zoom.component.scss | 15 +++++ .../timeseries-chart-zoom.component.ts | 40 +++++++++++++ .../timeseries-chart.component.html | 1 + .../timeseries-chart.component.scss | 7 +++ .../timeseries-chart.module.ts | 24 ++++---- src/index.html | 1 + 8 files changed, 129 insertions(+), 37 deletions(-) create mode 100644 src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.html create mode 100644 src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.scss create mode 100644 src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.ts diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html index 96e0bfb0a..f73b40e87 100644 --- a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html +++ b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html @@ -74,31 +74,31 @@ -
-
- -
-
-
- - - add - - - - aspect_ratio - - - - remove - - -
-
-
+ + + + + + + + + + + + + + + + + + + + + + + + +
@@ -110,7 +110,11 @@
- {{ 'DISPLACEMENT_FILTERS' | translate }}more_horiz + + filter_alt + + +
diff --git a/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.html b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.html new file mode 100644 index 000000000..7232920b9 --- /dev/null +++ b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.html @@ -0,0 +1,22 @@ +
+
+
+ + + add + + + + aspect_ratio + + + + remove + + +
+
+
diff --git a/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.scss b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.scss new file mode 100644 index 000000000..60b9079df --- /dev/null +++ b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.scss @@ -0,0 +1,15 @@ +@use "@angular/material" as mat; +@import "asf-theme"; + +.ts-toggle-group { + height: 20px !important; + box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px +} + +.control-icon { + font-size: 16px; +} + +::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content { + padding: 0 5px !important; +} diff --git a/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.ts b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.ts new file mode 100644 index 000000000..83c64d37d --- /dev/null +++ b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.ts @@ -0,0 +1,40 @@ +import { Component } from '@angular/core'; +import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle'; +import {MatIcon} from '@angular/material/icon'; +import {MatTooltip} from '@angular/material/tooltip'; +import {TranslateModule} from '@ngx-translate/core'; +import {Subject} from 'rxjs'; + +@Component({ + selector: 'app-timeseries-chart-zoom', + standalone: true, + imports: [ + MatButtonToggle, + MatButtonToggleGroup, + MatIcon, + MatTooltip, + TranslateModule + ], + templateUrl: './timeseries-chart-zoom.component.html', + styleUrl: './timeseries-chart-zoom.component.scss' +}) +export class TimeseriesChartZoomComponent { + + public zoomInChart$ = new Subject(); + public zoomOutChart$ = new Subject(); + public zoomToFitChart$ = new Subject(); + + public zoomIn(): void { + this.zoomInChart$.next(); + } + + public zoomOut(): void { + this.zoomOutChart$.next(); + } + + public zoomToFit(): void { + this.zoomToFitChart$.next(); + } + + +} diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html index ed0a35759..e9213b4fd 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.html +++ b/src/app/components/timeseries-chart/timeseries-chart.component.html @@ -2,4 +2,5 @@
+
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss index 63ff5fe70..46da33ef9 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.scss +++ b/src/app/components/timeseries-chart/timeseries-chart.component.scss @@ -37,3 +37,10 @@ top: 18px; right: 20px; } + +.ts-chart-zoom { + position: absolute; + top: 17px; + right: 50px; + +} diff --git a/src/app/components/timeseries-chart/timeseries-chart.module.ts b/src/app/components/timeseries-chart/timeseries-chart.module.ts index 3b66f656e..117aa4292 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.module.ts +++ b/src/app/components/timeseries-chart/timeseries-chart.module.ts @@ -10,19 +10,21 @@ import { MatTableModule } from '@angular/material/table'; import { ResizedEventModule } from '@directives/resized.directive'; import { TimeseriesChartConfigComponent } from './timeseries-chart-config' import { ChartModalComponent } from '@components/shared/chart-modal/chart-modal.component' +import {TimeseriesChartZoomComponent} from '@components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component'; @NgModule({ declarations: [TimeseriesChartComponent], - imports: [ - CommonModule, - MatSharedModule, - TranslateModule, - MatTableModule, - MatIconModule, - ResizedEventModule, - MatSharedModule, - ChartModalComponent, - TimeseriesChartConfigComponent - ], + imports: [ + CommonModule, + MatSharedModule, + TranslateModule, + MatTableModule, + MatIconModule, + ResizedEventModule, + MatSharedModule, + ChartModalComponent, + TimeseriesChartConfigComponent, + TimeseriesChartZoomComponent + ], exports: [ TimeseriesChartComponent, ] diff --git a/src/index.html b/src/index.html index 84eed27cd..cf9adce63 100644 --- a/src/index.html +++ b/src/index.html @@ -30,6 +30,7 @@ + From 812bd61080cea8d257264429ba4d69d9f09f1042 Mon Sep 17 00:00:00 2001 From: Andrew Anderson Date: Wed, 25 Sep 2024 11:30:46 -0700 Subject: [PATCH 3/4] WIP - Component stub for slider --- .../timeseries-results-menu.component.html | 10 +++-- .../timeseries-results-menu.module.ts | 40 ++++++++++--------- ...eries-chart-temporal-slider.component.html | 1 + ...eries-chart-temporal-slider.component.scss | 0 ...eseries-chart-temporal-slider.component.ts | 12 ++++++ .../timeseries-chart.component.scss | 2 +- 6 files changed, 42 insertions(+), 23 deletions(-) create mode 100644 src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.html create mode 100644 src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.scss create mode 100644 src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.ts diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html index f73b40e87..b31136d8e 100644 --- a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html +++ b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html @@ -127,10 +127,12 @@
+ [zoomIn$]="zoomInChart$" + [zoomToFit$]="zoomToFitChart$" + [zoomOut$]="zoomOutChart$" + [chartData]="chartData"> + +
diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.module.ts b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.module.ts index f11a8f30f..8d7451db3 100644 --- a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.module.ts +++ b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.module.ts @@ -17,30 +17,34 @@ import { ResizableModule } from 'angular-resizable-element'; import { MatRadioModule } from '@angular/material/radio'; import { PipesModule } from '@pipes'; import {MatTab, MatTabGroup} from '@angular/material/tabs'; +import { + TimeseriesChartTemporalSliderComponent +} from '@components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component'; @NgModule({ declarations: [ TimeseriesResultsMenuComponent ], - imports: [ - CommonModule, - MatMenuModule, - MatIconModule, - MatSharedModule, - MatButtonToggleModule, - FontAwesomeModule, - SharedModule, - ScenesListModule, - ScenesListHeaderModule, - SceneMetadataModule, - TimeseriesChartModule, - ResizableModule, - MatRadioModule, - PipesModule, - MatTabGroup, - MatTab - ], + imports: [ + CommonModule, + MatMenuModule, + MatIconModule, + MatSharedModule, + MatButtonToggleModule, + FontAwesomeModule, + SharedModule, + ScenesListModule, + ScenesListHeaderModule, + SceneMetadataModule, + TimeseriesChartModule, + ResizableModule, + MatRadioModule, + PipesModule, + MatTabGroup, + MatTab, + TimeseriesChartTemporalSliderComponent + ], exports: [ TimeseriesResultsMenuComponent ] diff --git a/src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.html b/src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.html new file mode 100644 index 000000000..cad77d868 --- /dev/null +++ b/src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.html @@ -0,0 +1 @@ +

timeseries-chart-temporal-slider works!

diff --git a/src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.scss b/src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.ts b/src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.ts new file mode 100644 index 000000000..7eaebdbc3 --- /dev/null +++ b/src/app/components/timeseries-chart/timeseries-chart-temporal-slider/timeseries-chart-temporal-slider.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-timeseries-chart-temporal-slider', + standalone: true, + imports: [], + templateUrl: './timeseries-chart-temporal-slider.component.html', + styleUrl: './timeseries-chart-temporal-slider.component.scss' +}) +export class TimeseriesChartTemporalSliderComponent { + +} diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.scss b/src/app/components/timeseries-chart/timeseries-chart.component.scss index 46da33ef9..b4b63551b 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.scss +++ b/src/app/components/timeseries-chart/timeseries-chart.component.scss @@ -6,7 +6,7 @@ } .chart-wrapper { - height: 100%; + height: 90%; width: 100%; display: flex; } From a3351704f9380db47b1a562acd297938deb2c2af Mon Sep 17 00:00:00 2001 From: Andrew Anderson Date: Thu, 26 Sep 2024 14:14:09 -0700 Subject: [PATCH 4/4] WIP - New zoom buttons working --- .../timeseries-results-menu.component.html | 3 --- .../timeseries-results-menu.component.ts | 22 +++---------------- .../timeseries-chart-zoom.component.scss | 4 +++- .../timeseries-chart-zoom.component.ts | 21 +++++++++++------- .../timeseries-chart.component.html | 6 ++++- .../timeseries-chart.component.ts | 18 +++++++++++++-- 6 files changed, 40 insertions(+), 34 deletions(-) diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html index b31136d8e..2198653cb 100644 --- a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html +++ b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.html @@ -127,9 +127,6 @@
diff --git a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts index f94fe0d4a..8091b4d39 100644 --- a/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts +++ b/src/app/components/results-menu/timeseries-results-menu/timeseries-results-menu.component.ts @@ -8,16 +8,16 @@ import * as uiStore from '@store/ui'; import * as searchStore from '@store/search'; import * as mapStore from '@store/map'; -import { Breakpoints, SearchType, MapInteractionModeType, MapDrawModeType } from '@models'; +import { Breakpoints, SearchType, MapInteractionModeType, MapDrawModeType } from '@models'; import { DrawService, MapService, NetcdfService, PointHistoryService, ScreenSizeService } from '@services'; import { SubSink } from 'subsink'; -import { Point} from 'ol/geom'; +import { Point } from 'ol/geom'; import { WKT } from 'ol/format'; import moment2 from 'moment'; import { SetScenes } from '@store/scenes'; -import {getPathRange} from '@store/filters'; +import { getPathRange } from '@store/filters'; @Component({ @@ -47,10 +47,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy { public breakpoints = Breakpoints; private subs = new SubSink(); - public zoomInChart$ = new Subject(); - public zoomOutChart$ = new Subject(); - public zoomToFitChart$ = new Subject(); - public pointHistory = []; public chartData = new Subject; @@ -126,18 +122,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy { this.store$.dispatch(new uiStore.OpenFiltersMenu()); } - public zoomIn(): void { - this.zoomInChart$.next(); - } - - public zoomOut(): void { - this.zoomOutChart$.next(); - } - - public zoomToFit(): void { - this.zoomToFitChart$.next(); - } - public onOpenHelp(url: string): void { window.open(url); } diff --git a/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.scss b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.scss index 60b9079df..4a2f8cdd7 100644 --- a/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.scss +++ b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.scss @@ -3,7 +3,9 @@ .ts-toggle-group { height: 20px !important; - box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, rgba(0, 0, 0, 0.12) 0px 1px 18px 0px + box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, + rgba(0, 0, 0, 0.14) 0px 6px 10px 0px, + rgba(0, 0, 0, 0.12) 0px 1px 18px 0px; } .control-icon { diff --git a/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.ts b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.ts index 83c64d37d..05a88085d 100644 --- a/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.ts +++ b/src/app/components/timeseries-chart/timeseries-chart-zoom/timeseries-chart-zoom.component.ts @@ -1,9 +1,8 @@ -import { Component } from '@angular/core'; +import {Component, EventEmitter, Output} from '@angular/core'; import {MatButtonToggle, MatButtonToggleGroup} from '@angular/material/button-toggle'; import {MatIcon} from '@angular/material/icon'; import {MatTooltip} from '@angular/material/tooltip'; import {TranslateModule} from '@ngx-translate/core'; -import {Subject} from 'rxjs'; @Component({ selector: 'app-timeseries-chart-zoom', @@ -19,21 +18,27 @@ import {Subject} from 'rxjs'; styleUrl: './timeseries-chart-zoom.component.scss' }) export class TimeseriesChartZoomComponent { + // @Output('zoomIn$') zoomIn$: Subject = new Subject(); + // @Output('zoomInChart$') zoomInChart$: EventEmitter = new EventEmitter(); + @Output() zoomInEvent = new EventEmitter(); + @Output() zoomOutEvent = new EventEmitter(); + @Output() zoomToFitEvent = new EventEmitter(); - public zoomInChart$ = new Subject(); - public zoomOutChart$ = new Subject(); - public zoomToFitChart$ = new Subject(); + // public zoomInChart$ = new Subject(); + // public zoomOutChart$ = new Subject(); + // public zoomToFitChart$ = new Subject(); public zoomIn(): void { - this.zoomInChart$.next(); + console.log('zoomIn'); + this.zoomInEvent.emit(); } public zoomOut(): void { - this.zoomOutChart$.next(); + this.zoomOutEvent.emit(); } public zoomToFit(): void { - this.zoomToFitChart$.next(); + this.zoomToFitEvent.emit(); } diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.html b/src/app/components/timeseries-chart/timeseries-chart.component.html index e9213b4fd..a31ae62c5 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.html +++ b/src/app/components/timeseries-chart/timeseries-chart.component.html @@ -2,5 +2,9 @@
- +
diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts index 63bd85cc2..06026f113 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.ts +++ b/src/app/components/timeseries-chart/timeseries-chart.component.ts @@ -50,6 +50,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { private showLines = true; private subs = new SubSink(); + constructor( private store$: Store, ) { @@ -66,6 +67,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { this.thing.transition().call(this.zoom.scaleBy, .5); }); this.zoomIn$.subscribe(_ => { + console.log('zooming in'); this.thing.transition().call(this.zoom.scaleBy, 2); }); this.subs.add( @@ -93,6 +95,18 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { this.subs.unsubscribe(); } + public onZoomIn(): void { + this.thing.transition().call(this.zoom.scaleBy, 2); + } + + public onZoomOut(): void { + this.thing.transition().call(this.zoom.scaleBy, .5); + } + + public onZoomToFit(): void { + this.thing.transition().call(this.zoom.transform, d3.zoomIdentity); + } + public initChart(data): void { this.dataSource = [] for (let key of Object.keys(data).filter(x => x !== 'mean')) { @@ -114,7 +128,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { this.drawChart(); } - private drawChart() { const marginBottom = 40; const unwrapped_phases = this.dataSource.map(p => p['unwrapped_phase'] as number) @@ -309,4 +322,5 @@ interface TimeSeriesChartPoint { date: string temporal_baseline: number id: string -}; +} +