From 3ce6e81a390fbe8a0c16693ac709106b0a22b055 Mon Sep 17 00:00:00 2001 From: nymkappa Date: Fri, 15 Apr 2022 00:21:38 +0900 Subject: [PATCH] Add block fee rate percentiles chart --- backend/src/repositories/BlocksRepository.ts | 12 +- backend/src/routes.ts | 4 +- frontend/src/app/app-routing.module.ts | 19 +- frontend/src/app/app.module.ts | 2 + frontend/src/app/bitcoin.utils.ts | 4 +- .../block-fee-rates-graph.component.html | 46 ++++ .../block-fee-rates-graph.component.scss | 135 +++++++++ .../block-fee-rates-graph.component.ts | 257 ++++++++++++++++++ .../block-fees-graph.component.html | 17 -- .../block-fees-graph.component.ts | 9 +- .../block-rewards-graph.component.html | 19 +- .../block-rewards-graph.component.ts | 8 +- .../components/graphs/graphs.component.html | 4 + .../hashrate-chart.component.ts | 8 +- .../statistics/statistics.component.ts | 2 +- frontend/src/app/services/api.service.ts | 7 + frontend/src/app/shared/graphs.utils.ts | 7 +- 17 files changed, 505 insertions(+), 55 deletions(-) create mode 100644 frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html create mode 100644 frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss create mode 100644 frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts diff --git a/backend/src/repositories/BlocksRepository.ts b/backend/src/repositories/BlocksRepository.ts index e495f1f94..6a2b85305 100644 --- a/backend/src/repositories/BlocksRepository.ts +++ b/backend/src/repositories/BlocksRepository.ts @@ -387,7 +387,9 @@ class BlocksRepository { */ public async $getHistoricalBlockFees(div: number, interval: string | null): Promise { try { - let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, + let query = `SELECT + CAST(AVG(height) as INT) as avg_height, + CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, CAST(AVG(fees) as INT) as avg_fees FROM blocks`; @@ -410,7 +412,9 @@ class BlocksRepository { */ public async $getHistoricalBlockRewards(div: number, interval: string | null): Promise { try { - let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, + let query = `SELECT + CAST(AVG(height) as INT) as avg_height, + CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, CAST(AVG(reward) as INT) as avg_rewards FROM blocks`; @@ -436,7 +440,9 @@ class BlocksRepository { try { connection = await DB.getConnection(); - let query = `SELECT CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, + let query = `SELECT + CAST(AVG(height) as INT) as avg_height, + CAST(AVG(UNIX_TIMESTAMP(blockTimestamp)) as INT) as timestamp, CAST(AVG(JSON_EXTRACT(fee_span, '$[0]')) as INT) as avg_fee_0, CAST(AVG(JSON_EXTRACT(fee_span, '$[1]')) as INT) as avg_fee_10, CAST(AVG(JSON_EXTRACT(fee_span, '$[2]')) as INT) as avg_fee_25, diff --git a/backend/src/routes.ts b/backend/src/routes.ts index 2b56fd8b3..3722a6c64 100644 --- a/backend/src/routes.ts +++ b/backend/src/routes.ts @@ -672,14 +672,14 @@ class Routes { public async $getHistoricalBlockFeeRates(req: Request, res: Response) { try { - const blockFees = await mining.$getHistoricalBlockFeeRates(req.params.interval ?? null); + const blockFeeRates = await mining.$getHistoricalBlockFeeRates(req.params.interval ?? null); const oldestIndexedBlockTimestamp = await BlocksRepository.$oldestBlockTimestamp(); res.header('Pragma', 'public'); res.header('Cache-control', 'public'); res.setHeader('Expires', new Date(Date.now() + 1000 * 300).toUTCString()); res.json({ oldestIndexedBlockTimestamp: oldestIndexedBlockTimestamp, - blockFees: blockFees, + blockFeeRates: blockFeeRates, }); } catch (e) { res.status(500).send(e instanceof Error ? e.message : e); diff --git a/frontend/src/app/app-routing.module.ts b/frontend/src/app/app-routing.module.ts index 64d906b77..a9485f823 100644 --- a/frontend/src/app/app-routing.module.ts +++ b/frontend/src/app/app-routing.module.ts @@ -35,6 +35,7 @@ import { GraphsComponent } from './components/graphs/graphs.component'; import { BlocksList } from './components/blocks-list/blocks-list.component'; import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component'; import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component'; +import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component'; let routes: Routes = [ { @@ -126,7 +127,11 @@ let routes: Routes = [ { path: 'mining/block-rewards', component: BlockRewardsGraphComponent, - } + }, + { + path: 'mining/block-fee-rates', + component: BlockFeeRatesGraphComponent, + }, ], }, { @@ -264,7 +269,11 @@ let routes: Routes = [ { path: 'mining/block-rewards', component: BlockRewardsGraphComponent, - } + }, + { + path: 'mining/block-fee-rates', + component: BlockFeeRatesGraphComponent, + }, ] }, { @@ -400,7 +409,11 @@ let routes: Routes = [ { path: 'mining/block-rewards', component: BlockRewardsGraphComponent, - } + }, + { + path: 'mining/block-fee-rates', + component: BlockFeeRatesGraphComponent, + }, ] }, { diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts index 8d7253fdf..27a637efc 100644 --- a/frontend/src/app/app.module.ts +++ b/frontend/src/app/app.module.ts @@ -83,6 +83,7 @@ import { RewardStatsComponent } from './components/reward-stats/reward-stats.com import { DataCyDirective } from './data-cy.directive'; import { BlockFeesGraphComponent } from './components/block-fees-graph/block-fees-graph.component'; import { BlockRewardsGraphComponent } from './components/block-rewards-graph/block-rewards-graph.component'; +import { BlockFeeRatesGraphComponent } from './components/block-fee-rates-graph/block-fee-rates-graph.component'; @NgModule({ declarations: [ @@ -147,6 +148,7 @@ import { BlockRewardsGraphComponent } from './components/block-rewards-graph/blo RewardStatsComponent, BlockFeesGraphComponent, BlockRewardsGraphComponent, + BlockFeeRatesGraphComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), diff --git a/frontend/src/app/bitcoin.utils.ts b/frontend/src/app/bitcoin.utils.ts index 72fde7471..82b929f93 100644 --- a/frontend/src/app/bitcoin.utils.ts +++ b/frontend/src/app/bitcoin.utils.ts @@ -143,8 +143,10 @@ export function selectPowerOfTen(val: number) { }; let selectedPowerOfTen; - if (val < powerOfTen.mega) { + if (val < powerOfTen.kilo) { selectedPowerOfTen = { divider: 1, unit: '' }; // no scaling + } else if (val < powerOfTen.mega) { + selectedPowerOfTen = { divider: powerOfTen.kilo, unit: 'k' }; } else if (val < powerOfTen.giga) { selectedPowerOfTen = { divider: powerOfTen.mega, unit: 'M' }; } else if (val < powerOfTen.terra) { diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html new file mode 100644 index 000000000..e262b32b8 --- /dev/null +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.html @@ -0,0 +1,46 @@ +
+
+ Block fee rates +
+
+ + + + + + + + + + +
+
+
+ +
+
+
+ +
+ +
\ No newline at end of file diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss new file mode 100644 index 000000000..54dbe5fad --- /dev/null +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.scss @@ -0,0 +1,135 @@ +.card-header { + border-bottom: 0; + font-size: 18px; + @media (min-width: 465px) { + font-size: 20px; + } +} + +.main-title { + position: relative; + color: #ffffff91; + margin-top: -13px; + font-size: 10px; + text-transform: uppercase; + font-weight: 500; + text-align: center; + padding-bottom: 3px; +} + +.full-container { + padding: 0px 15px; + width: 100%; + min-height: 500px; + height: calc(100% - 150px); + @media (max-width: 992px) { + height: 100%; + padding-bottom: 100px; + }; +} + +.chart { + width: 100%; + height: 100%; + padding-bottom: 20px; + padding-right: 10px; + @media (max-width: 992px) { + padding-bottom: 25px; + } + @media (max-width: 829px) { + padding-bottom: 50px; + } + @media (max-width: 767px) { + padding-bottom: 25px; + } + @media (max-width: 629px) { + padding-bottom: 55px; + } + @media (max-width: 567px) { + padding-bottom: 55px; + } +} +.chart-widget { + width: 100%; + height: 100%; + max-height: 270px; +} + +.formRadioGroup { + margin-top: 6px; + display: flex; + flex-direction: column; + @media (min-width: 1130px) { + position: relative; + top: -65px; + } + @media (min-width: 830px) and (max-width: 1130px) { + position: relative; + top: 0px; + } + @media (min-width: 830px) { + flex-direction: row; + float: right; + margin-top: 0px; + } + .btn-sm { + font-size: 9px; + @media (min-width: 830px) { + font-size: 14px; + } + } +} + +.pool-distribution { + min-height: 56px; + display: block; + @media (min-width: 485px) { + display: flex; + flex-direction: row; + } + h5 { + margin-bottom: 10px; + } + .item { + width: 50%; + display: inline-block; + margin: 0px auto 20px; + &:nth-child(2) { + order: 2; + @media (min-width: 485px) { + order: 3; + } + } + &:nth-child(3) { + order: 3; + @media (min-width: 485px) { + order: 2; + display: block; + } + @media (min-width: 768px) { + display: none; + } + @media (min-width: 992px) { + display: block; + } + } + .card-title { + font-size: 1rem; + color: #4a68b9; + } + .card-text { + font-size: 18px; + span { + color: #ffffff66; + font-size: 12px; + } + } + } +} + +.skeleton-loader { + width: 100%; + display: block; + max-width: 80px; + margin: 15px auto 3px; +} diff --git a/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts new file mode 100644 index 000000000..f9516dc30 --- /dev/null +++ b/frontend/src/app/components/block-fee-rates-graph/block-fee-rates-graph.component.ts @@ -0,0 +1,257 @@ +import { ChangeDetectionStrategy, Component, Inject, Input, LOCALE_ID, OnInit } from '@angular/core'; +import { EChartsOption } from 'echarts'; +import { Observable } from 'rxjs'; +import { map, share, startWith, switchMap, tap } from 'rxjs/operators'; +import { ApiService } from 'src/app/services/api.service'; +import { SeoService } from 'src/app/services/seo.service'; +import { formatNumber } from '@angular/common'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { formatterXAxis } from 'src/app/shared/graphs.utils'; +import { StorageService } from 'src/app/services/storage.service'; +import { MiningService } from 'src/app/services/mining.service'; +import { selectPowerOfTen } from 'src/app/bitcoin.utils'; + +@Component({ + selector: 'app-block-fee-rates-graph', + templateUrl: './block-fee-rates-graph.component.html', + styleUrls: ['./block-fee-rates-graph.component.scss'], + styles: [` + .loadingGraphs { + position: absolute; + top: 50%; + left: calc(50% - 15px); + z-index: 100; + } + `], + changeDetection: ChangeDetectionStrategy.OnPush, +}) +export class BlockFeeRatesGraphComponent implements OnInit { + @Input() right: number | string = 45; + @Input() left: number | string = 75; + + miningWindowPreference: string; + radioGroupForm: FormGroup; + + chartOptions: EChartsOption = {}; + chartInitOptions = { + renderer: 'svg', + }; + + statsObservable$: Observable; + isLoading = true; + formatNumber = formatNumber; + timespan = ''; + + constructor( + @Inject(LOCALE_ID) public locale: string, + private seoService: SeoService, + private apiService: ApiService, + private formBuilder: FormBuilder, + private storageService: StorageService, + private miningService: MiningService + ) { + this.radioGroupForm = this.formBuilder.group({ dateSpan: '1y' }); + this.radioGroupForm.controls.dateSpan.setValue('1y'); + } + + ngOnInit(): void { + this.seoService.setTitle($localize`:@@mining.block-fee-rates:Block Fee Rates`); + this.miningWindowPreference = this.miningService.getDefaultTimespan('24h'); + this.radioGroupForm = this.formBuilder.group({ dateSpan: this.miningWindowPreference }); + this.radioGroupForm.controls.dateSpan.setValue(this.miningWindowPreference); + + this.statsObservable$ = this.radioGroupForm.get('dateSpan').valueChanges + .pipe( + startWith(this.miningWindowPreference), + switchMap((timespan) => { + this.storageService.setValue('miningWindowPreference', timespan); + this.timespan = timespan; + this.isLoading = true; + return this.apiService.getHistoricalBlockFeeRates$(timespan) + .pipe( + tap((data: any) => { + // Group by percentile + const seriesData = { + 'Min': [], + '10th': [], + '25th': [], + 'Median': [], + '75th': [], + '90th': [], + 'Max': [] + }; + for (const rate of data.blockFeeRates) { + const timestamp = rate.timestamp * 1000; + seriesData['Min'].push([timestamp, rate.avg_fee_0, rate.avg_height]); + seriesData['10th'].push([timestamp, rate.avg_fee_10, rate.avg_height]); + seriesData['25th'].push([timestamp, rate.avg_fee_25, rate.avg_height]); + seriesData['Median'].push([timestamp, rate.avg_fee_50, rate.avg_height]); + seriesData['75th'].push([timestamp, rate.avg_fee_75, rate.avg_height]); + seriesData['90th'].push([timestamp, rate.avg_fee_90, rate.avg_height]); + seriesData['Max'].push([timestamp, rate.avg_fee_100, rate.avg_height]); + } + + // Prepare chart + const series = []; + const legends = []; + for (const percentile in seriesData) { + series.push({ + zlevel: 0, + stack: 'Total', + name: percentile, + data: seriesData[percentile], + type: 'bar', + barWidth: '100%', + large: true, + }); + + legends.push({ + name: percentile, + inactiveColor: 'rgb(110, 112, 121)', + textStyle: { + color: 'white', + }, + icon: 'roundRect', + enabled: false, + selected: false, + }); + } + + this.prepareChartOptions({ + legends: legends, + series: series, + }); + this.isLoading = false; + }), + map((data: any) => { + const availableTimespanDay = ( + (new Date().getTime() / 1000) - (data.oldestIndexedBlockTimestamp) + ) / 3600 / 24; + + return { + availableTimespanDay: availableTimespanDay, + }; + }), + ); + }), + share() + ); + } + + prepareChartOptions(data) { + this.chartOptions = { + color: ['#D81B60', '#8E24AA', '#1E88E5', '#7CB342', '#FDD835', '#6D4C41', '#546E7A'], + animation: false, + grid: { + right: this.right, + left: this.left, + bottom: 70, + top: this.isMobile() ? 10 : 50, + }, + tooltip: { + show: !this.isMobile(), + trigger: 'axis', + axisPointer: { + type: 'line' + }, + backgroundColor: 'rgba(17, 19, 31, 1)', + borderRadius: 4, + shadowColor: 'rgba(0, 0, 0, 0.5)', + textStyle: { + color: '#b1b1b1', + align: 'left', + }, + borderColor: '#000', + formatter: function (data) { + if (data.length <= 0) { + return ''; + } + let tooltip = ` + ${formatterXAxis(this.locale, this.timespan, parseInt(data[0].axisValue, 10))}
`; + + for (const pool of data.reverse()) { + tooltip += `${pool.marker} ${pool.seriesName}: ${pool.data[1]} sats/vByte
`; + } + + if (['24h', '3d'].includes(this.timespan)) { + tooltip += `At block: ${data[0].data[2]}`; + } else { + tooltip += `Around block ${data[0].data[2]}`; + } + + return tooltip; + }.bind(this) + }, + xAxis: data.series.length === 0 ? undefined : { + type: 'category', + splitNumber: this.isMobile() ? 5 : 10, + axisLabel: { + hideOverlap: true, + formatter: val => formatterXAxis(this.locale, this.timespan, parseInt(val, 10)), + }, + }, + legend: (data.series.length === 0) ? undefined : { + data: data.legends, + selected: { + 'Min': true, + '10th': true, + '25th': true, + 'Median': true, + '75th': true, + '90th': true, + 'Max': false, + } + }, + yAxis: data.series.length === 0 ? undefined : { + position: 'left', + axisLabel: { + color: 'rgb(110, 112, 121)', + formatter: (val) => { + const selectedPowerOfTen: any = selectPowerOfTen(val); + const newVal = Math.round(val / selectedPowerOfTen.divider); + return `${newVal}${selectedPowerOfTen.unit} sats/vB`; + }, + }, + splitLine: { + lineStyle: { + type: 'dotted', + color: '#ffffff66', + opacity: 0.25, + } + }, + type: 'value', + max: () => this.timespan === 'all' ? 5000 : undefined, + }, + series: data.series, + dataZoom: [{ + type: 'inside', + realtime: true, + zoomLock: true, + maxSpan: 100, + minSpan: 10, + moveOnMouseMove: false, + }, { + showDetail: false, + show: true, + type: 'slider', + brushSelect: false, + realtime: true, + left: 20, + right: 15, + selectedDataBackground: { + lineStyle: { + color: '#fff', + opacity: 0.45, + }, + areaStyle: { + opacity: 0, + } + }, + }], + }; + } + + isMobile() { + return (window.innerWidth <= 767.98); + } +} diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html index fc811c5ea..605004820 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.html @@ -44,20 +44,3 @@ - - -
-
-
Hashrate
-

- -

-
-
-
Difficulty
-

- -

-
-
- \ No newline at end of file diff --git a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts index 74de3c317..56744aaa4 100644 --- a/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts +++ b/frontend/src/app/components/block-fees-graph/block-fees-graph.component.ts @@ -25,7 +25,6 @@ import { MiningService } from 'src/app/services/mining.service'; changeDetection: ChangeDetectionStrategy.OnPush, }) export class BlockFeesGraphComponent implements OnInit { - @Input() tableOnly = false; @Input() right: number | string = 45; @Input() left: number | string = 75; @@ -150,8 +149,12 @@ export class BlockFeesGraphComponent implements OnInit { } }, splitLine: { - show: false, - } + lineStyle: { + type: 'dotted', + color: '#ffffff66', + opacity: 0.25, + } + }, }, ], series: [ diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html index c2a3bcf00..32baafc45 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.html @@ -44,21 +44,4 @@ - - - -
-
-
Hashrate
-

- -

-
-
-
Difficulty
-

- -

-
-
- \ No newline at end of file + \ No newline at end of file diff --git a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts index a22617922..f58204992 100644 --- a/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts +++ b/frontend/src/app/components/block-rewards-graph/block-rewards-graph.component.ts @@ -149,8 +149,12 @@ export class BlockRewardsGraphComponent implements OnInit { } }, splitLine: { - show: false, - } + lineStyle: { + type: 'dotted', + color: '#ffffff66', + opacity: 0.25, + } + }, }, ], series: [ diff --git a/frontend/src/app/components/graphs/graphs.component.html b/frontend/src/app/components/graphs/graphs.component.html index e3bdb0629..dce79ad97 100644 --- a/frontend/src/app/components/graphs/graphs.component.html +++ b/frontend/src/app/components/graphs/graphs.component.html @@ -16,6 +16,10 @@ [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="mining.hashrate-difficulty"> Hashrate & Difficulty + + Block Fee Rates + Block Fees diff --git a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts index 4cac95557..c5476df82 100644 --- a/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts +++ b/frontend/src/app/components/hashrate-chart/hashrate-chart.component.ts @@ -290,8 +290,12 @@ export class HashrateChartComponent implements OnInit { } }, splitLine: { - show: false, - } + lineStyle: { + type: 'dotted', + color: '#ffffff66', + opacity: 0.25, + } + }, } ], series: data.hashrates.length === 0 ? [] : [ diff --git a/frontend/src/app/components/statistics/statistics.component.ts b/frontend/src/app/components/statistics/statistics.component.ts index 1336339bc..252bb13af 100644 --- a/frontend/src/app/components/statistics/statistics.component.ts +++ b/frontend/src/app/components/statistics/statistics.component.ts @@ -179,7 +179,7 @@ export class StatisticsComponent implements OnInit { } // Find median value - const vBytes : number[] = []; + const vBytes: number[] = []; for (const stat of this.mempoolStats) { vBytes.push(stat.vbytes_per_second); } diff --git a/frontend/src/app/services/api.service.ts b/frontend/src/app/services/api.service.ts index 16a8d21d5..133292837 100644 --- a/frontend/src/app/services/api.service.ts +++ b/frontend/src/app/services/api.service.ts @@ -182,6 +182,13 @@ export class ApiService { ); } + getHistoricalBlockFeeRates$(interval: string | undefined) : Observable { + return this.httpClient.get( + this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/blocks/fee-rates` + + (interval !== undefined ? `/${interval}` : '') + ); + } + getRewardStats$(blockCount: number = 144): Observable { return this.httpClient.get(this.apiBaseUrl + this.apiBasePath + `/api/v1/mining/reward-stats/${blockCount}`); } diff --git a/frontend/src/app/shared/graphs.utils.ts b/frontend/src/app/shared/graphs.utils.ts index e0ffe841e..096a37bce 100644 --- a/frontend/src/app/shared/graphs.utils.ts +++ b/frontend/src/app/shared/graphs.utils.ts @@ -1,10 +1,9 @@ export const formatterXAxis = ( locale: string, windowPreference: string, - value: string + value: string | number ) => { - - if(value.length === 0){ + if (typeof value === 'string' && value.length === 0){ return null; } @@ -13,6 +12,7 @@ export const formatterXAxis = ( case '2h': return date.toLocaleTimeString(locale, { hour: 'numeric', minute: 'numeric' }); case '24h': + case '3d': return date.toLocaleTimeString(locale, { weekday: 'short', hour: 'numeric', minute: 'numeric' }); case '1w': case '1m': @@ -22,6 +22,7 @@ export const formatterXAxis = ( return date.toLocaleTimeString(locale, { month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric' }); case '2y': case '3y': + case 'all': return date.toLocaleDateString(locale, { year: 'numeric', month: 'short', day: 'numeric' }); } };