Skip to content

Commit 549268a

Browse files
Angular2GuyAngular2Guy
committed
feat: use signals
1 parent 8af1623 commit 549268a

12 files changed

Lines changed: 103 additions & 108 deletions

File tree

‎frontend/src/angular/src/app/common/detail-base.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
See the License for the specific language governing permissions and
1111
limitations under the License.
1212
*/
13+
import { signal } from "@angular/core";
1314
import { CommonUtils } from "./common-utils";
1415
import { ChartPoint, ChartPoints } from "ngx-simple-charts/line";
1516

@@ -30,9 +31,9 @@ export class Tuple<A, B> {
3031
}
3132

3233
export abstract class DetailBase {
33-
chartPoints: ChartPoints[] = [];
34+
chartPoints = signal<ChartPoints[]>([]);
3435
utils = new CommonUtils();
35-
currPair = "";
36+
currPair = signal("");
3637
timeframe = this.utils.MyTimeFrames.Day;
3738
addLinReg = false;
3839
readonly yScaleWidth = 50;
@@ -56,20 +57,20 @@ export abstract class DetailBase {
5657
//console.log(slope, intercept);
5758
const linReg = myChartPoint.map((myPoint,i) => ({x: myPoint.x, y: slope * i + intercept}) as ChartPoint);
5859
//console.log(linReg);
59-
this.chartPoints = [
60+
this.chartPoints.set([
6061
{
61-
name: this.currPair,
62+
name: this.currPair(),
6263
chartPointList: myChartPoint,
6364
yScaleWidth: this.yScaleWidth,
6465
xScaleHeight: this.xScaleHeight,
6566
} as ChartPoints
66-
];
67+
]);
6768
if(this.addLinReg) {
68-
this.chartPoints.push({name: this.utils.LINEAR_REGRESSION,
69+
this.chartPoints.update(points => [...points, {name: this.utils.LINEAR_REGRESSION,
6970
chartPointList: linReg,
7071
yScaleWidth: this.yScaleWidth,
7172
xScaleHeight: this.xScaleHeight
72-
} as ChartPoints);
73+
} as ChartPoints]);
7374
}
7475
//console.log(this.chartPoints);
7576
}

‎frontend/src/angular/src/app/details/bfdetail/bfdetail.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div>
22
<mat-toolbar color="primary">
33
<span i18n="@@bitfinex">Bitfinex</span>
4-
<span class="currPair">{{ currPair }}</span>
4+
<span class="currPair">{{ currPair() }}</span>
55
<span class="example-fill-remaining-space"></span>
66
<span class="back-button"
77
><button mat-flat-button color="primary" (click)="back()" i18n="@@back">
@@ -44,7 +44,7 @@
4444
</tr>
4545
<tr>
4646
<td i18n="@@pair">Pair:</td>
47-
<td id="currPair">{{ currPair }}</td>
47+
<td id="currPair">{{ currPair() }}</td>
4848
<td i18n="@@timestamp">Timestamp:</td>
4949
<td id="createdAt">
5050
{{
@@ -97,13 +97,13 @@
9797
<div
9898
#chartContainer
9999
class="chart-container"
100-
[@showChart]="chartShow | async"
100+
[@showChart]="chartShow()"
101101
>
102102
<sc-line-chart
103-
[chartPoints]="chartPoints"
103+
[chartPoints]="chartPoints()"
104104
class="line-chart"
105105
></sc-line-chart>
106106
</div>
107-
<div>{{ todayQuotes?.length }} {{ chartShow | async }}</div>
107+
<div>{{ todayQuotes?.length }} {{ chartShow() }}</div>
108108
</div>
109109
</div>

‎frontend/src/angular/src/app/details/bfdetail/bfdetail.component.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
LOCALE_ID,
2121
DestroyRef,
2222
inject,
23+
signal,
2324
ChangeDetectionStrategy,
2425
} from "@angular/core";
2526
import { ActivatedRoute, Router } from "@angular/router";
@@ -32,7 +33,7 @@ import {
3233
} from "@angular/animations";
3334
import { BitfinexService } from "../../services/bitfinex.service";
3435
import { QuoteBf } from "../../common/quote-bf";
35-
import { BehaviorSubject, Observable, repeat } from "rxjs";
36+
import { Observable, repeat } from "rxjs";
3637
import { DetailBase, Tuple } from "../../common/detail-base";
3738
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
3839
import { NgxLineChartsModule } from "ngx-simple-charts/line";
@@ -69,7 +70,7 @@ import { MatToolbarModule } from "@angular/material/toolbar";
6970
})
7071
export class BfdetailComponent extends DetailBase implements OnInit {
7172
public currQuote: QuoteBf | null = null;
72-
protected chartShow = new BehaviorSubject(false);
73+
protected chartShow = signal(false);
7374
protected todayQuotes: QuoteBf[] = [];
7475
private readonly destroy: DestroyRef = inject(DestroyRef);
7576

@@ -83,14 +84,14 @@ export class BfdetailComponent extends DetailBase implements OnInit {
8384
}
8485

8586
ngOnInit() {
86-
this.chartShow.next(false);
87+
this.chartShow.set(false);
8788
this.route.params.subscribe((params) => {
8889
this.serviceBf
8990
.getCurrentQuote(params.currpair)
9091
.pipe(repeat({ delay: 10000 }), takeUntilDestroyed(this.destroy))
9192
.subscribe((quote) => {
9293
this.currQuote = quote;
93-
this.currPair = this.utils.getCurrpairName(this.currQuote.pair) ?? "";
94+
this.currPair.set(this.utils.getCurrpairName(this.currQuote.pair) ?? "");
9495
});
9596
this.serviceBf
9697
.getTodayQuotes(this.route.snapshot.paramMap.get("currpair") ?? "")
@@ -103,7 +104,7 @@ export class BfdetailComponent extends DetailBase implements OnInit {
103104
new Tuple<string, number>(quote.createdAt, quote.last_price),
104105
),
105106
);
106-
this.chartShow.next(true);
107+
this.chartShow.set(true);
107108
});
108109
});
109110
}
@@ -113,7 +114,7 @@ export class BfdetailComponent extends DetailBase implements OnInit {
113114
}
114115

115116
changeTf() {
116-
this.chartShow.next(false);
117+
this.chartShow.set(false);
117118
const currpair = this.route.snapshot.paramMap.get("currpair");
118119
let quoteObserv: Observable<QuoteBf[]>;
119120
if (this.timeframe === this.utils.MyTimeFrames.Day7) {
@@ -138,7 +139,7 @@ export class BfdetailComponent extends DetailBase implements OnInit {
138139
new Tuple<string, number>(quote.createdAt, quote.last_price),
139140
),
140141
);
141-
this.chartShow.next(true);
142+
this.chartShow.set(true);
142143
});
143144
}
144145

‎frontend/src/angular/src/app/details/bsdetail/bsdetail.component.html‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<div>
22
<mat-toolbar color="primary">
33
<span i18n="@@bitstamp">Bitstamp</span>
4-
<span class="currPair">{{ currPair }}</span>
4+
<span class="currPair">{{ currPair() }}</span>
55
<span class="example-fill-remaining-space"></span>
66
<span class="back-button"
77
><button mat-flat-button color="primary" (click)="back()" i18n="@@back">
@@ -46,7 +46,7 @@
4646
{{ $safeNavigationMigration(currQuote?.vwap) | number: "1.2" }}
4747
</td>
4848
<td i18n="@@pair">Pair:</td>
49-
<td id="currPair">{{ currPair }}</td>
49+
<td id="currPair">{{ currPair() }}</td>
5050
<td i18n="@@timestamp">Timestamp:</td>
5151
<td id="createdAt">
5252
{{
@@ -101,10 +101,10 @@
101101
<div
102102
#chartContainer
103103
class="chart-container"
104-
[@showChart]="chartShow | async"
104+
[@showChart]="chartShow()"
105105
>
106-
<sc-line-chart [chartPoints]="chartPoints"></sc-line-chart>
106+
<sc-line-chart [chartPoints]="chartPoints()"></sc-line-chart>
107107
</div>
108-
<div>{{ todayQuotes?.length }} {{ chartShow | async }}</div>
108+
<div>{{ todayQuotes?.length }} {{ chartShow() }}</div>
109109
</div>
110110
</div>

‎frontend/src/angular/src/app/details/bsdetail/bsdetail.component.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
Inject,
2121
DestroyRef,
2222
inject,
23+
signal,
2324
ChangeDetectionStrategy,
2425
} from "@angular/core";
2526
import { ActivatedRoute, Router } from "@angular/router";
@@ -30,7 +31,7 @@ import {
3031
transition,
3132
style,
3233
} from "@angular/animations";
33-
import { BehaviorSubject, Observable, repeat } from "rxjs";
34+
import { Observable, repeat } from "rxjs";
3435
import { BitstampService } from "../../services/bitstamp.service";
3536
import { QuoteBs } from "../../common/quote-bs";
3637
import { DetailBase, Tuple } from "../../common/detail-base";
@@ -69,7 +70,7 @@ import { NgxLineChartsModule } from "ngx-simple-charts/line";
6970
})
7071
export class BsdetailComponent extends DetailBase implements OnInit {
7172
public currQuote: QuoteBs = {} as QuoteBs;
72-
protected chartShow = new BehaviorSubject(false);
73+
protected chartShow = signal(false);
7374
protected todayQuotes: QuoteBs[] = [];
7475
private readonly destroy: DestroyRef = inject(DestroyRef);
7576

@@ -83,14 +84,14 @@ export class BsdetailComponent extends DetailBase implements OnInit {
8384
}
8485

8586
ngOnInit() {
86-
this.chartShow.next(false);
87+
this.chartShow.set(false);
8788
this.route.params.subscribe((params) => {
8889
this.serviceBs
8990
.getCurrentQuote(params.currpair)
9091
.pipe(repeat({ delay: 10000 }), takeUntilDestroyed(this.destroy))
9192
.subscribe((quote) => {
9293
this.currQuote = quote;
93-
this.currPair = this.utils.getCurrpairName(this.currQuote.pair) ?? "";
94+
this.currPair.set(this.utils.getCurrpairName(this.currQuote.pair) ?? "");
9495
});
9596
this.serviceBs
9697
.getTodayQuotes(this.route.snapshot.paramMap.get("currpair") ?? "")
@@ -102,7 +103,7 @@ export class BsdetailComponent extends DetailBase implements OnInit {
102103
(quote) => new Tuple<string, number>(quote.createdAt, quote.last),
103104
),
104105
);
105-
this.chartShow.next(true);
106+
this.chartShow.set(true);
106107
});
107108
});
108109
}
@@ -112,7 +113,7 @@ export class BsdetailComponent extends DetailBase implements OnInit {
112113
}
113114

114115
changeTf() {
115-
this.chartShow.next(false);
116+
this.chartShow.set(false);
116117
const currpair = this.route.snapshot.paramMap.get("currpair") ?? "";
117118
let quoteObserv: Observable<QuoteBs[]>;
118119
if (this.timeframe === this.utils.MyTimeFrames.Day7) {
@@ -136,7 +137,7 @@ export class BsdetailComponent extends DetailBase implements OnInit {
136137
(quote) => new Tuple<string, number>(quote.createdAt, quote.last),
137138
),
138139
);
139-
this.chartShow.next(true);
140+
this.chartShow.set(true);
140141
});
141142
}
142143

‎frontend/src/angular/src/app/details/cbdetail/cbdetail.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -153,10 +153,10 @@
153153
<div
154154
#chartContainer
155155
class="chart-container"
156-
[@showChart]="chartShow | async"
156+
[@showChart]="chartShow()"
157157
>
158-
<sc-line-chart [chartPoints]="chartPoints"></sc-line-chart>
158+
<sc-line-chart [chartPoints]="chartPoints()"></sc-line-chart>
159159
</div>
160-
<div>{{ todayQuotes?.length }} {{ chartShow | async }}</div>
160+
<div>{{ todayQuotes?.length }} {{ chartShow() }}</div>
161161
</div>
162162
</div>

‎frontend/src/angular/src/app/details/cbdetail/cbdetail.component.ts‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
Inject,
2121
DestroyRef,
2222
inject,
23+
signal,
2324
ChangeDetectionStrategy,
2425
} from "@angular/core";
2526
import { ActivatedRoute, Router } from "@angular/router";
@@ -30,7 +31,7 @@ import {
3031
transition,
3132
style,
3233
} from "@angular/animations";
33-
import { BehaviorSubject, Observable, repeat } from "rxjs";
34+
import { Observable, repeat } from "rxjs";
3435
import { QuoteCb, QuoteCbSmall } from "../../common/quote-cb";
3536
import { CoinbaseCurrPairs, CoinbaseService } from "../../services/coinbase.service";
3637
import { DetailBase, Tuple } from "../../common/detail-base";
@@ -76,7 +77,7 @@ export class CbdetailComponent extends DetailBase implements OnInit {
7677
readonly ETHUSD: string;
7778
// eslint-disable-next-line @typescript-eslint/naming-convention
7879
readonly LTCUSD: string;
79-
protected chartShow = new BehaviorSubject(false);
80+
protected chartShow = signal(false);
8081
protected todayQuotes: QuoteCbSmall[] = [];
8182
protected myCurrPair = "";
8283
private readonly destroy: DestroyRef = inject(DestroyRef);
@@ -95,7 +96,7 @@ export class CbdetailComponent extends DetailBase implements OnInit {
9596
}
9697

9798
ngOnInit() {
98-
this.chartShow.next(false);
99+
this.chartShow.set(false);
99100
this.route.params.subscribe((params) => {
100101
this.currpair = params.currpair;
101102
this.myCurrPair = this.utils.getCurrpairName(this.currpair) ?? "";
@@ -136,7 +137,7 @@ export class CbdetailComponent extends DetailBase implements OnInit {
136137
),
137138
);
138139
}
139-
this.chartShow.next(true);
140+
this.chartShow.set(true);
140141
});
141142
});
142143
}
@@ -146,7 +147,7 @@ export class CbdetailComponent extends DetailBase implements OnInit {
146147
}
147148

148149
changeTf() {
149-
this.chartShow.next(false);
150+
this.chartShow.set(false);
150151
this.currpair = this.route.snapshot.paramMap.get("currpair") ?? "";
151152
let quoteObserv: Observable<QuoteCbSmall[]>;
152153
if (this.timeframe === this.utils.MyTimeFrames.Day7) {
@@ -187,7 +188,7 @@ export class CbdetailComponent extends DetailBase implements OnInit {
187188
),
188189
);
189190
}
190-
this.chartShow.next(true);
191+
this.chartShow.set(true);
191192
});
192193
}
193194
}

‎frontend/src/angular/src/app/orderbooks/orderbooks/orderbooks.component.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@
104104
>Amount</span
105105
></mat-list-item
106106
>
107-
@for (order of bsOrders; track order) {
107+
@for (order of bsOrders(); track order) {
108108
<mat-list-item role="listitem">
109109
<span [style.color]="order.color"
110110
>{{ order.price }} - {{ order.amount }}</span
@@ -125,7 +125,7 @@
125125
>Amount</span
126126
></mat-list-item
127127
>
128-
@for (order of ibOrders; track order) {
128+
@for (order of ibOrders(); track order) {
129129
<mat-list-item>
130130
<span [style.color]="order.color"
131131
>{{ order.price }} - {{ order.amount }}</span
@@ -146,7 +146,7 @@
146146
>Amount</span
147147
></mat-list-item
148148
>
149-
@for (order of bfOrders; track order) {
149+
@for (order of bfOrders(); track order) {
150150
<mat-list-item>
151151
<span [style.color]="order.color"
152152
>{{ order.price }} - {{ order.amount }}</span

0 commit comments

Comments
 (0)