diff --git a/src/app/components/map/displacement-layers/displacement-layers.component.html b/src/app/components/map/displacement-layers/displacement-layers.component.html index 81f69c580..b7a7c3bf3 100644 --- a/src/app/components/map/displacement-layers/displacement-layers.component.html +++ b/src/app/components/map/displacement-layers/displacement-layers.component.html @@ -24,7 +24,7 @@
What are these? + url="https://docs.asf.alaska.edu/vertex/displacement/#map-layers">
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 a1f5b9bfc..67d7f51dc 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 @@ -33,8 +33,7 @@ {{'SERIES' | translate}} {{point.seriesNumber}} - - + } 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 4d0fd6c45..a484766c1 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 @@ -265,13 +265,6 @@ export class TimeseriesResultsMenuComponent implements OnInit, OnDestroy { public deletePoint(index: number) { this.pointHistoryService.removePoint(index); } - public setLinearFitLine(index: number) { - const wkt = this.chartStates[index]?.wkt; - - const isLinearFitEnabled = !(this.chartStates[index]?.linearFit ?? false); - - this.store$.dispatch(chartStore.setLinearFit({wkt, 'linearFit': isLinearFitEnabled})) - } ngOnDestroy() { this.pointHistoryService.clearPoints(); diff --git a/src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.html b/src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.html index 23727db47..385da0765 100644 --- a/src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.html +++ b/src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.html @@ -1,4 +1,5 @@
Show Lines + Show Linear Fit
\ No newline at end of file diff --git a/src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.ts b/src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.ts index 634fd7970..baac777b1 100644 --- a/src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.ts +++ b/src/app/components/timeseries-chart/timeseries-chart-config/timeseries-chart-config.component.ts @@ -18,6 +18,7 @@ import * as chartsStore from '@store/charts' export class TimeseriesChartConfigComponent implements OnInit, OnDestroy { private subs = new SubSink() public showLines: boolean = true + public showLinearFit = false; @Output() public resetReferenceEvent = new EventEmitter(); constructor(private store$: Store) { } @@ -28,12 +29,22 @@ export class TimeseriesChartConfigComponent implements OnInit, OnDestroy { this.store$.dispatch(chartsStore.hideGraphLines()) } } + public onToggleLinearFit(event: MatCheckboxChange) { + if(event.checked) { + this.store$.dispatch(chartsStore.showLinearFit()); + } else { + this.store$.dispatch(chartsStore.hideLinearFit()); + } + } ngOnInit(): void { this.subs.add(this.store$.select(chartsStore.getShowLines).subscribe( showLines => this.showLines = showLines ) ); + this.subs.add(this.store$.select(chartsStore.getShowLinearFit).subscribe( + showLinearFit => this.showLinearFit = showLinearFit + )) } public resetReference() { diff --git a/src/app/components/timeseries-chart/timeseries-chart.component.ts b/src/app/components/timeseries-chart/timeseries-chart.component.ts index a9ad32e20..b272dacfa 100644 --- a/src/app/components/timeseries-chart/timeseries-chart.component.ts +++ b/src/app/components/timeseries-chart/timeseries-chart.component.ts @@ -39,7 +39,6 @@ interface DataReady { values: TimeSeriesData[], opacity: number, color: string, - linearFit: boolean } const unSelectedColor = '#9F9F9F9F'; @@ -109,6 +108,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { ]; private linearFitLine; + private showLinearFit = false; public exportableData: { [index:string]: {}[]} = {} @@ -121,7 +121,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { private subs = new SubSink(); // private allGroup: string[]; - private linearFitLineIndex = []; private baseData: TimeSeriesData; constructor( private store$: Store, @@ -170,6 +169,14 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { } ) ); + this.subs.add( + this.store$.select(chartsStore.getShowLinearFit).subscribe( + showLinearFit => { + this.showLinearFit = showLinearFit; + this.initChart(this.data); + } + ) + ) this.subs.add( this.language.translate.onLangChange.subscribe(() => { @@ -204,16 +211,6 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { } ) ); - this.subs.add( - this.store$.select(chartsStore.getLinearFitTimeseries).subscribe( - things => { - - this.linearFitLineIndex = things; - - this.initChart(this.data); - } - ) - ) } @@ -346,13 +343,11 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { return 1 } }) - let isLinearFitEnabled = this.linearFitLineIndex.findIndex((a) => a === aoi) >= 0 this.dataReadyForChart.push({ name: aoi, values: this.timeSeriesData, color: result.state.color, opacity: result.state.checked ? 1.0 : 0.2, - linearFit: isLinearFitEnabled, }); } } @@ -528,13 +523,11 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { }) .attr('r', 5); this.bestFitItems = []; - if(this.dataReadyForChart.length > 0 && this.linearFitLineIndex.length > 0) { + if(this.dataReadyForChart.length > 0 && this.showLinearFit) { this.linearFitLine = this.svg.append('g') .attr('id', 'linesParent2') .attr('clip-path', 'url(#clip)') - - let filteredData: DataReady[] = this.dataReadyForChart.filter(x => x.linearFit) - for(let linearFitData of filteredData) { + for(let linearFitData of this.dataReadyForChart) { let regression = linearRegression(linearFitData.values.map((x,i) => [i, x.short_wavelength_displacement])); this.bestFitItems.push({ @@ -651,7 +644,7 @@ export class TimeseriesChartComponent implements OnInit, OnDestroy { }) .style('opacity', (d: DataReady) => d.opacity) - if(this.linearFitLine && this.linearFitLineIndex.length > 0) { + if(this.linearFitLine && this.showLinearFit) { let line2 = d3.line() .x( (d) => { return newX(d[0]) }) .y( (d) => { return newY(d[1]) }); diff --git a/src/app/store/charts/charts.action.ts b/src/app/store/charts/charts.action.ts index 0044b90c7..b9ff76abc 100644 --- a/src/app/store/charts/charts.action.ts +++ b/src/app/store/charts/charts.action.ts @@ -12,4 +12,5 @@ export const setAllTimeseriesChecked = createAction('[Chart] set all timeseries export const setTimeseriesColor = createAction('[Chart] set the color of a single timeseries', props<{'wkt': string, 'color': string}>()) export const setChartOutOfDate = createAction('[Chart] mark chart as out of date') export const setChartUpToDate = createAction('[Chart], mark chart as up to date') -export const setLinearFit = createAction('[Chart] set best fit line visibility',props<{'wkt': string, 'linearFit': boolean}>()) \ No newline at end of file +export const showLinearFit = createAction('[Chart] show all linear fit lines') +export const hideLinearFit = createAction('[Chart] hide all linear fit lines') \ No newline at end of file diff --git a/src/app/store/charts/charts.reducer.ts b/src/app/store/charts/charts.reducer.ts index e980da642..2ddde7858 100644 --- a/src/app/store/charts/charts.reducer.ts +++ b/src/app/store/charts/charts.reducer.ts @@ -4,12 +4,14 @@ import * as models from '@models'; export interface ChartsState { showLines: boolean; + showLinearFit: boolean; seriesStates: { [key: string]: models.timeseriesChartItemState }; outOfDate: boolean; } export const initialState: ChartsState = { showLines: true, + showLinearFit: false, seriesStates: {}, outOfDate: false, }; @@ -60,11 +62,11 @@ export const chartsReducer = createReducer( return { ...state, seriesStates }; }), - on(chartActions.setLinearFit, (state, {wkt, linearFit}) => { - const seriesStates = { ...state.seriesStates }; - seriesStates[wkt] = { ...seriesStates[wkt], linearFit }; - - return { ...state, seriesStates }; + on(chartActions.showLinearFit, (state) => { + return {...state, showLinearFit: true} + }), + on(chartActions.hideLinearFit, (state) => { + return {...state, showLinearFit: false} }), on(chartActions.reset, (_) => initialState) ); diff --git a/src/app/store/charts/charts.selectors.ts b/src/app/store/charts/charts.selectors.ts index 2da446c44..e8a9bb6ac 100644 --- a/src/app/store/charts/charts.selectors.ts +++ b/src/app/store/charts/charts.selectors.ts @@ -7,6 +7,10 @@ export const getShowLines = createSelector( getChartsState, (state: ChartsState) => state.showLines ); +export const getShowLinearFit = createSelector( + getChartsState, + (state: ChartsState) => state.showLinearFit +) export const getTimeseriesChartStates = createSelector( getChartsState, @@ -26,19 +30,7 @@ export const getCheckedTimeseries = createSelector( return output; } ); -export const getLinearFitTimeseries = createSelector( - getTimeseriesChartStates, - (chartStates) => { - const output = []; - for (const key of Object.keys(chartStates)) { - if (chartStates[key].linearFit) { - output.push(key); - } - } - return output; - } -) export const getAreAllTimeseriesChecked = createSelector( getTimeseriesChartStates, getCheckedTimeseries,