neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix API stats graph (#8856)

Browse Source
This commit is contained in:
Jaco 2023-01-21 10:26:37 +02:00 committed by GitHub
parent 2651e73f93
commit 43d4ba2a05
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 29 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/page-explorer/src/Api/index.tsx
View File

@ -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<Props> {
<Chart
colors={COLORS_REQUESTS}
legends={requestsLegend}
options={OPTIONS}
title={t<string>('requests')}
value={requestsChart}
/>
<Chart
colors={COLORS_BYTES}
legends={bytesLegend}
options={OPTIONS}
title={t<string>('transfer')}
value={bytesChart}
/>

8
packages/page-explorer/src/Latency/Chart.tsx
View File

@ -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<Props> {
function ChartDisplay ({ className, colors, legends, options, title, value: { labels, values } }: Props): React.ReactElement<Props> {
return (
<StyledDiv className={className}>
<h1>{title}</h1>
@ -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}
/>
</StyledDiv>

26
packages/react-hooks/src/ctx/ApiStats.tsx
View File

@ -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;
}
}