Merge pull request #3061 from aura-nw/baseline/main_20240228

Baseline/main 20240228

src/app/core/data-services/environment.service.ts

@@ -44,6 +44,10 @@ export interface IConfiguration {
   image: {
     validator: string;
     assets: string;
+    banner: {
+      src: string;
+      url: string;
+    }[];
   };
   api: {
     backend: string;
@@ -117,6 +121,10 @@ export class EnvironmentService {
     return _.get(this.configValue, 'image.assets');
   }
 
+  get banner() {
+    return _.get(this.configValue, 'image.banner');
+  }
+
   get ipfsDomain() {
     return _.get(this.configValue, 'api.ipfsDomain');
   }

src/app/pages/dashboard/dashboard-chart-options.ts

@@ -46,48 +46,6 @@ export const DASHBOARD_AREA_SERIES_CHART_OPTIONS: SeriesPartialOptionsMap['Area'
   },
 };
 
-export const STATISTIC_CHART_DETAIL_OPTIONS: DeepPartial<ChartOptions> = {
-  height: 300,
-  crosshair: {
-    horzLine: {
-      visible: false,
-    },
-  },
-  layout: {
-    backgroundColor: '#24262e',
-    textColor: '#868a97',
-  },
-  grid: {
-    vertLines: {
-      color: '#363843',
-    },
-    horzLines: {
-      color: '#363843',
-    },
-  },
-  leftPriceScale: {
-    visible: true,
-  },
-  rightPriceScale: {
-    visible: false,
-  },
-  timeScale: {
-    timeVisible: true,
-    secondsVisible: true,
-    minBarSpacing: 0,
-  },
-};
-
-export const STATISTIC_AREA_SERIES_CHART_OPTIONS: SeriesPartialOptionsMap['Area'] = {
-  lineColor: '#2CB1F5',
-  topColor: 'rgba(44, 177, 245, 0.2)',
-  bottomColor: 'rgba(44, 177, 245, 0.08)',
-  priceFormat: {
-    precision: 0,
-    minMove: 1,
-  },
-};
-
 export const CHART_CONFIG: {
   [key: string]: {
     initRange: number;

src/app/pages/dashboard/dashboard.component.html

@@ -2,13 +2,10 @@
   <div class="row d-lg-none mb-4">
     <div class="col">
       <div class="carousel">
-        <ngb-carousel [showNavigationArrows]="false">
-          <ng-template ngbSlide>
-            <a class="picsum-img-wrapper" target="_blank" href="https://lixi.aura.network/">
-              <img
-                [src]="'assets/images/pages/banner_aurascan.png' | imageS3"
-                alt="Random first slide"
-                class="carousel__img" />
+        <ngb-carousel [showNavigationArrows]="bannerList.length > 1" [showNavigationIndicators]="bannerList.length > 1">
+          <ng-template ngbSlide *ngFor="let item of bannerList">
+            <a class="picsum-img-wrapper" target="_blank" [href]="item.url">
+              <img [src]="item.src | imageS3" alt="Random first slide" class="carousel__img" />
             </a>
           </ng-template>
         </ngb-carousel>
@@ -237,13 +234,10 @@
   <div class="row">
     <div class="col-12 col-lg-8 d-none d-lg-block">
       <div class="mb-4 mb-lg-6 carousel">
-        <ngb-carousel [showNavigationArrows]="false" [showNavigationIndicators]="false">
-          <ng-template ngbSlide>
-            <a class="picsum-img-wrapper" target="_blank" href="https://lixi.aura.network/">
-              <img
-                [src]="'assets/images/pages/banner_aurascan.png' | imageS3"
-                alt="Random first slide"
-                class="carousel__img" />
+        <ngb-carousel [showNavigationArrows]="bannerList.length > 1" [showNavigationIndicators]="bannerList.length > 1">
+          <ng-template ngbSlide *ngFor="let item of bannerList">
+            <a class="picsum-img-wrapper" target="_blank" [href]="item.url">
+              <img [src]="item.src | imageS3" alt="Random first slide" class="carousel__img" />
             </a>
           </ng-template>
         </ngb-carousel>

src/app/pages/dashboard/dashboard.component.ts

@@ -1,12 +1,12 @@
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { formatNumber } from '@angular/common';
-import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { Router } from '@angular/router';
-import { IChartApi, ISeriesApi, createChart } from 'lightweight-charts';
+import { createChart, IChartApi, ISeriesApi } from 'lightweight-charts';
 import * as _ from 'lodash';
 import * as moment from 'moment';
-import { Subject, Subscription, timer } from 'rxjs';
+import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { VOTING_STATUS } from 'src/app/core/constants/proposal.constant';
 import { CoingeckoService } from 'src/app/core/data-services/coingecko.service';
@@ -23,9 +23,9 @@ import {
   NUMBER_6_DIGIT,
   PAGE_EVENT,
   TIMEOUT_ERROR,
-  TITLE_LOGO,
+  TITLE_LOGO
 } from '../../core/constants/common.constant';
-import { Globals, convertDataBlock, convertDataTransactionSimple } from '../../global/global';
+import { convertDataBlock, convertDataTransactionSimple, Globals } from '../../global/global';
 import { CHART_CONFIG, DASHBOARD_AREA_SERIES_CHART_OPTIONS, DASHBOARD_CHART_OPTIONS } from './dashboard-chart-options';
 import { TokenService } from 'src/app/core/services/token.service';
 
@@ -61,6 +61,7 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy {
 
   denom = this.environmentService.chainInfo.currencies[0].coinDenom;
   coinInfo = this.environmentService.chainInfo.currencies[0];
+  bannerList = this.environmentService.banner;
   coingeckoCoinId = this.environmentService.coingecko.ids[0];
   chainLogo = TITLE_LOGO;
   nativeName = this.environmentService.environment.nativeName;

src/app/pages/statistics/chart-detail/chart-detail.component.ts

@@ -12,11 +12,7 @@ import { EnvironmentService } from 'src/app/core/data-services/environment.servi
 import { timeToUnix } from 'src/app/core/helpers/date';
 import { exportStatisticChart } from 'src/app/core/helpers/export';
 import { StatisticService } from 'src/app/core/services/statistic.service';
-import {
-  CHART_CONFIG,
-  STATISTIC_AREA_SERIES_CHART_OPTIONS,
-  STATISTIC_CHART_DETAIL_OPTIONS,
-} from 'src/app/pages/dashboard/dashboard-chart-options';
+import { CHART_CONFIG } from 'src/app/pages/dashboard/dashboard-chart-options';
 
 @Component({
   selector: 'app-chart-detail',
@@ -48,6 +44,8 @@ export class ChartDetailComponent implements OnInit, OnDestroy {
   toolTipMargin = 15;
 
   chainName = this.env.chainName;
+  minValue = 0;
+  maxValue = 0;
 
   constructor(
     private route: ActivatedRoute,
@@ -96,8 +94,58 @@ export class ChartDetailComponent implements OnInit, OnDestroy {
 
   // config chart
   initChart() {
-    this.chart = createChart(document.getElementById('dailyChart'), STATISTIC_CHART_DETAIL_OPTIONS);
-    this.areaSeries = this.chart.addAreaSeries(STATISTIC_AREA_SERIES_CHART_OPTIONS);
+    this.chart = createChart(document.getElementById('dailyChart'), {
+      height: 300,
+      crosshair: {
+        horzLine: {
+          visible: false,
+        },
+      },
+      layout: {
+        backgroundColor: '#24262e',
+        textColor: '#868a97',
+      },
+      grid: {
+        vertLines: {
+          color: '#363843',
+        },
+        horzLines: {
+          color: '#363843',
+        },
+      },
+      leftPriceScale: {
+        visible: true,
+        mode: 1,
+        autoScale: true,
+        scaleMargins: {
+          top: 0.3,
+          bottom: 0.3,
+        },
+      },
+      rightPriceScale: {
+        visible: false,
+      },
+      timeScale: {
+        timeVisible: true,
+        secondsVisible: true,
+        minBarSpacing: 0,
+      },
+    });
+    this.areaSeries = this.chart.addAreaSeries({
+      lineColor: '#2CB1F5',
+      topColor: 'rgba(44, 177, 245, 0.2)',
+      bottomColor: 'rgba(44, 177, 245, 0.08)',
+      priceFormat: {
+        precision: 0,
+        minMove: 1,
+      },
+      autoscaleInfoProvider: () => ({
+        priceRange: {
+          minValue: this.minValue,
+          maxValue: this.maxValue,
+        },
+      }),
+    });
     if (this.chartType !== 'unique-addresses')
       this.areaSeries.applyOptions({
         topColor: 'rgba(136,198,203,0)',
@@ -209,6 +257,9 @@ export class ChartDetailComponent implements OnInit, OnDestroy {
             default:
               break;
           }
+          this.maxValue = Math.max(...dataX);
+          this.minValue = Math.min(...dataX);
+
           dataY = res.daily_statistics.map((data) => data.date);
           this.maxAmountDate = formatDate(dayMax, 'dd/MM/yyyy', 'en-US');
           this.minAmountDate = formatDate(dayMin, 'dd/MM/yyyy', 'en-US');

src/app/pages/statistics/chart-stats/chart-stats.component.ts

@@ -34,7 +34,9 @@ export class ChartStatsComponent implements OnInit {
   isLoading = true;
   errTxt: string;
   maxValueDailyAddress = 0;
+  minValueDailyAddress = 0;
   maxValueDailyTx = 0;
+  minValueDailyTx = 0;
 
   chainName = this.env.chainName;
 
@@ -77,9 +79,11 @@ export class ChartStatsComponent implements OnInit {
         visible: true,
         borderColor: '#494C58',
         scaleMargins: {
-          top: 0.4,
-          bottom: 0.05,
+          top: 0.3,
+          bottom: 0.3,
         },
+        mode: 1,
+        autoScale: true,
       },
       rightPriceScale: {
         visible: false,
@@ -96,7 +100,7 @@ export class ChartStatsComponent implements OnInit {
     this.dailyTransactionChartSeries = this.dailyTransactionChart.addAreaSeries({
       autoscaleInfoProvider: () => ({
         priceRange: {
-          minValue: 0,
+          minValue: this.minValueDailyTx,
           maxValue: this.maxValueDailyTx,
         },
       }),
@@ -112,10 +116,6 @@ export class ChartStatsComponent implements OnInit {
         minMove: 1,
       },
     });
-
-    this.dailyTransactionChart.priceScale().applyOptions({
-      autoScale: true,
-    });
   }
 
   uniqueAddressChartInit() {
@@ -143,6 +143,12 @@ export class ChartStatsComponent implements OnInit {
       leftPriceScale: {
         visible: true,
         borderColor: '#494C58',
+        scaleMargins: {
+          top: 0.3,
+          bottom: 0.05,
+        },
+        mode: 1,
+        autoScale: true,
       },
       rightPriceScale: {
         visible: false,
@@ -167,9 +173,6 @@ export class ChartStatsComponent implements OnInit {
         minMove: 1,
       },
     });
-    this.uniqueAddressChart.priceScale().applyOptions({
-      autoScale: true,
-    });
   }
 
   dailyAddressChartInit() {
@@ -199,8 +202,10 @@ export class ChartStatsComponent implements OnInit {
         borderColor: '#494C58',
         scaleMargins: {
           top: 0.3,
-          bottom: 0.01,
+          bottom: 0.3,
         },
+        mode: 1,
+        autoScale: true,
       },
       rightPriceScale: {
         visible: false,
@@ -217,7 +222,7 @@ export class ChartStatsComponent implements OnInit {
     this.dailyAddressChartSeries = this.dailyAddressChart.addAreaSeries({
       autoscaleInfoProvider: () => ({
         priceRange: {
-          minValue: 0,
+          minValue: this.minValueDailyAddress,
           maxValue: this.maxValueDailyAddress,
         },
       }),
@@ -232,9 +237,6 @@ export class ChartStatsComponent implements OnInit {
         minMove: 1,
       },
     });
-    this.dailyAddressChart.priceScale().applyOptions({
-      autoScale: true,
-    });
   }
 
   drawChart(data, dateTime, type: 'dailyTrans' | 'dailyAddress' | 'uniqueAddress') {
@@ -283,7 +285,9 @@ export class ChartStatsComponent implements OnInit {
             timeArr.push(data.date);
           });
           this.maxValueDailyAddress = Math.max(...valueArrActive);
+          this.minValueDailyAddress = Math.min(...valueArrActive);
           this.maxValueDailyTx = Math.max(...valueArrDaily);
+          this.minValueDailyTx = Math.min(...valueArrDaily);
           this.drawChart(valueArrDaily, timeArr, 'dailyTrans');
           this.drawChart(valueArrUnique, timeArr, 'uniqueAddress');
           this.drawChart(valueArrActive, timeArr, 'dailyAddress');