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,