diff --git a/src/app/core/data-services/environment.service.ts b/src/app/core/data-services/environment.service.ts index 161066caa..36ab5da02 100644 --- a/src/app/core/data-services/environment.service.ts +++ b/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'); } diff --git a/src/app/pages/dashboard/dashboard-chart-options.ts b/src/app/pages/dashboard/dashboard-chart-options.ts index 646f81cd0..501e34aaa 100644 --- a/src/app/pages/dashboard/dashboard-chart-options.ts +++ b/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 = { - 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; diff --git a/src/app/pages/dashboard/dashboard.component.html b/src/app/pages/dashboard/dashboard.component.html index f44bad702..20026f0c0 100644 --- a/src/app/pages/dashboard/dashboard.component.html +++ b/src/app/pages/dashboard/dashboard.component.html @@ -2,13 +2,10 @@
- - - - Random first slide + + + + Random first slide @@ -237,13 +234,10 @@
- - - - Random first slide + + + + Random first slide diff --git a/src/app/pages/dashboard/dashboard.component.ts b/src/app/pages/dashboard/dashboard.component.ts index eb8a8bd6c..cbb9433a5 100644 --- a/src/app/pages/dashboard/dashboard.component.ts +++ b/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; diff --git a/src/app/pages/statistics/chart-detail/chart-detail.component.ts b/src/app/pages/statistics/chart-detail/chart-detail.component.ts index 8b0e54856..350b766b0 100644 --- a/src/app/pages/statistics/chart-detail/chart-detail.component.ts +++ b/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'); diff --git a/src/app/pages/statistics/chart-stats/chart-stats.component.ts b/src/app/pages/statistics/chart-stats/chart-stats.component.ts index cd996b67b..7dbc27c86 100644 --- a/src/app/pages/statistics/chart-stats/chart-stats.component.ts +++ b/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'); diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png index 80c6c906b..833945e4a 100644 Binary files a/src/assets/images/logo.png and b/src/assets/images/logo.png differ