diff --git a/packages/page-explorer/src/Api/index.tsx b/packages/page-explorer/src/Api/index.tsx index 20bd50f643..94ed576913 100644 --- a/packages/page-explorer/src/Api/index.tsx +++ b/packages/page-explorer/src/Api/index.tsx @@ -1,6 +1,7 @@ // Copyright 2017-2023 @polkadot/app-explorer authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { ChartOptions } from 'chart.js'; import type { ApiStats } from '@polkadot/react-hooks/ctx/types'; import React, { useMemo } from 'react'; @@ -28,6 +29,16 @@ interface ChartInfo { requestsChart: ChartContents; } +const OPTIONS: ChartOptions = { + aspectRatio: 6, + maintainAspectRatio: true, + scales: { + y: { + beginAtZero: true + } + } +}; + // const COLORS_ERRORS = ['#8c0044', '#acacac']; const COLORS_BYTES = ['#00448c', '#008c44', '#acacac']; @@ -53,7 +64,6 @@ function getPoints (all: ApiStats[]): ChartInfo { for (let i = 1; i < all.length; i++) { const { stats: { active: { requests: aReq, subscriptions: aSub }, total: { bytesRecv, bytesSent, errors } }, when } = all[i]; - const time = new Date(when).toLocaleTimeString(); bytesChart.labels.push(time); @@ -122,12 +132,14 @@ function Api ({ className }: Props): React.ReactElement { ('requests')} value={requestsChart} /> ('transfer')} value={bytesChart} /> diff --git a/packages/page-explorer/src/Latency/Chart.tsx b/packages/page-explorer/src/Latency/Chart.tsx index f7ea6a5035..a3b099dd69 100644 --- a/packages/page-explorer/src/Latency/Chart.tsx +++ b/packages/page-explorer/src/Latency/Chart.tsx @@ -1,6 +1,7 @@ // Copyright 2017-2023 @polkadot/app-explorer authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { ChartOptions } from 'chart.js'; import type { ChartContents } from './types'; import React from 'react'; @@ -12,16 +13,17 @@ interface Props { className?: string; colors: string[]; legends: string[]; + options?: ChartOptions; title: string; value: ChartContents; } -const OPTIONS = { +const OPTIONS: ChartOptions = { aspectRatio: 6, maintainAspectRatio: true }; -function ChartDisplay ({ className, colors, legends, title, value: { labels, values } }: Props): React.ReactElement { +function ChartDisplay ({ className, colors, legends, options, title, value: { labels, values } }: Props): React.ReactElement { return (

{title}

@@ -29,7 +31,7 @@ function ChartDisplay ({ className, colors, legends, title, value: { labels, val colors={colors} labels={labels} legends={legends} - options={OPTIONS} + options={options || OPTIONS} values={values} />
diff --git a/packages/react-hooks/src/ctx/ApiStats.tsx b/packages/react-hooks/src/ctx/ApiStats.tsx index 7e7e436dd5..2438b9237c 100644 --- a/packages/react-hooks/src/ctx/ApiStats.tsx +++ b/packages/react-hooks/src/ctx/ApiStats.tsx @@ -37,25 +37,21 @@ function getStats (...apis: ApiPromise[]): { stats: ProviderStats, when: number if (apis.length === 0) { return { stats, when: Date.now() }; - } else if (apis.length === 1) { - return { stats: apis[0].stats || stats, when: Date.now() }; } for (let i = 0; i < apis.length; i++) { - if (apis[i]) { - const s = apis[i].stats; + const s = apis[i].stats; - if (s) { - stats.active.requests += s.active.requests; - stats.active.subscriptions += s.active.subscriptions; - stats.total.bytesRecv += s.total.bytesRecv; - stats.total.bytesSent += s.total.bytesSent; - stats.total.cached += s.total.cached; - stats.total.errors += s.total.errors; - stats.total.requests += s.total.requests; - stats.total.subscriptions += s.total.subscriptions; - stats.total.timeout += s.total.timeout; - } + if (s) { + stats.active.requests += s.active.requests; + stats.active.subscriptions += s.active.subscriptions; + stats.total.bytesRecv += s.total.bytesRecv; + stats.total.bytesSent += s.total.bytesSent; + stats.total.cached += s.total.cached; + stats.total.errors += s.total.errors; + stats.total.requests += s.total.requests; + stats.total.subscriptions += s.total.subscriptions; + stats.total.timeout += s.total.timeout; } }