From 7386a452a5a5d1af2aa48b41ef9ab1651f3240bc Mon Sep 17 00:00:00 2001
From: JohannThapa <rupakmagar182013.rm@gmail.com>
Date: Thu, 22 Aug 2024 23:20:56 +0200
Subject: [PATCH] style: rate highlight

---
 .../bitcoin-chart-card.component.html         |  8 +++----
 .../bitcoin-chart-card.component.ts           | 21 ++++++++-----------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/src/app/modules/dashboard/components/crypto/bitcoin-chart-card/bitcoin-chart-card.component.html b/src/app/modules/dashboard/components/crypto/bitcoin-chart-card/bitcoin-chart-card.component.html
index e953a0d..0d52f78 100644
--- a/src/app/modules/dashboard/components/crypto/bitcoin-chart-card/bitcoin-chart-card.component.html
+++ b/src/app/modules/dashboard/components/crypto/bitcoin-chart-card/bitcoin-chart-card.component.html
@@ -7,7 +7,7 @@
         <span class="text-4xl font-semibold text-foreground">{{ transactions[0]?.amount }}</span>
         <div class="flex items-center rounded-md bg-green-500/25 py-1 pr-2 pl-1 text-xs font-semibold text-green-500">
           <svg-icon src="assets/icons/heroicons/outline/arrow-sm-up.svg" [svgClass]="'h-4 w-4'"></svg-icon>
-          {{ calculatePercentageChange()| number:'1.2-2' }}%
+          {{ calculatePercentageChange() | number : '1.2-2' }}%
         </div>
       </div>
       <span class="text-sm text-muted-foreground">Bitcoin rate</span>
@@ -67,13 +67,11 @@
         </td>
         <td class="py-2 text-right">
           <span class="text-sm font-semibold text-foreground">
-
-            {{formatAmount(transaction.amount)}}
-            <!-- {{ transaction.amount | currency:'USD' }} -->
+            {{ formatAmount(transaction.amount) }}
           </span>
         </td>
         <td class="py-2 text-right">
-          <span class="text-sm font-semibold text-foreground">{{ transaction.change | number:'1.2-2' }}%</span>
+          <span class="text-sm font-semibold text-foreground" *ngIf="transaction.change" [ngClass]="transaction.change <= 0 ? 'text-rose-600' : 'text-green-500'">{{ transaction.change | number : '1.2-2' }}%</span>
         </td>
       </tr>
     </tbody>
diff --git a/src/app/modules/dashboard/components/crypto/bitcoin-chart-card/bitcoin-chart-card.component.ts b/src/app/modules/dashboard/components/crypto/bitcoin-chart-card/bitcoin-chart-card.component.ts
index 14e9739..7f219e4 100644
--- a/src/app/modules/dashboard/components/crypto/bitcoin-chart-card/bitcoin-chart-card.component.ts
+++ b/src/app/modules/dashboard/components/crypto/bitcoin-chart-card/bitcoin-chart-card.component.ts
@@ -4,26 +4,26 @@ import { AngularSvgIconModule } from 'angular-svg-icon';
 import { NgApexchartsModule } from 'ng-apexcharts';
 import { ChartOptions } from '../../../../../shared/models/chart-options';
 import { ThemeService } from 'src/app/core/services/theme.service';
-import { CommonModule, CurrencyPipe, NgFor } from '@angular/common';
+import { CommonModule, CurrencyPipe, NgClass, NgFor } from '@angular/common';
 import { BitqueryService } from 'src/app/core/services/bitquery.service';
 import { Observable } from 'rxjs';
 
 @Component({
   selector: '[tmr-bitcoin-chart-card]',
   standalone: true,
-  imports: [CommonModule, AngularSvgIconModule, NgApexchartsModule, NgFor, CurrencyPipe],
+  imports: [CommonModule, AngularSvgIconModule, NgApexchartsModule, NgFor, CurrencyPipe, NgClass],
   templateUrl: './bitcoin-chart-card.component.html',
   styleUrl: './bitcoin-chart-card.component.scss',
 })
 export class BitcoinChartCardComponent implements OnInit {
   transactions$!: Observable<any[]>;
   public chartOptions!: Partial<ChartOptions>;
-  public transactions: any[] = []; // Store transactions
+  public transactions: any[] = [];
   public formattedTransactions: { time: string; amount: number; change: number }[] = [];
 
   constructor(
     private themeService: ThemeService,
-    private bitcoinService: BitqueryService, // Inject the service
+    private bitcoinService: BitqueryService,
   ) {}
 
   ngOnInit(): void {
@@ -129,34 +129,32 @@ export class BitcoinChartCardComponent implements OnInit {
   }
   private calculateChange(index: number): number {
     if (index === 0 || this.transactions.length < 2) {
-      return 0; // No change for the first transaction or if there's not enough data
+      return 0;
     }
 
     const previousTransaction = this.transactions[index - 1];
     const currentTransaction = this.transactions[index];
 
     if (!previousTransaction.input_value_usd || !currentTransaction.input_value_usd) {
-      return 0; // Handle cases where value might be missing
+      return 0;
     }
 
     const previousValue = previousTransaction.input_value_usd;
     const currentValue = currentTransaction.input_value_usd;
 
-    return ((currentValue - previousValue) / previousValue) * 100; // Rate of change percentage
+    return ((currentValue - previousValue) / previousValue) * 100;
   }
 
   calculatePercentageChange(): number {
     if (this.transactions.length < 2) {
-      return 0; // Not enough data to calculate change
+      return 0;
     }
 
-    // Ensure amounts are available and are numbers
     const initialAmount = this.transactions[0].input_value_usd;
     const latestAmount = this.transactions[this.transactions.length - 1].input_value_usd;
 
-    // Check for valid amounts
     if (initialAmount == null || latestAmount == null || initialAmount === 0) {
-      return 0; // Avoid division by zero and handle null values
+      return 0;
     }
 
     return ((latestAmount - initialAmount) / initialAmount) * 100;
@@ -179,7 +177,6 @@ export class BitcoinChartCardComponent implements OnInit {
       const k = (n + h / 30) % 12;
       const color = hDecimal - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
 
-      // Convert to Hex and prefix with "0" if required
       return Math.round(255 * color)
         .toString(16)
         .padStart(2, '0');