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

Align Line chart titles (#8874)

Browse Source
This commit is contained in:
Jaco 2023-01-24 08:46:59 +02:00 committed by GitHub
parent 690e799883
commit 61cde148b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 40 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -133,14 +133,14 @@ function Api ({ className }: Props): React.ReactElement<Props> {
colors={COLORS_REQUESTS}
legends={requestsLegend}
options={OPTIONS}
title={t<string>('requests')}
title={t<string>('requests made')}
value={requestsChart}
/>
<Chart
colors={COLORS_BYTES}
legends={bytesLegend}
options={OPTIONS}
title={t<string>('transfer')}
title={t<string>('bytes transferred')}
value={bytesChart}
/>
</StyledDiv>

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

@ -26,12 +26,12 @@ const OPTIONS: ChartOptions = {
function ChartDisplay ({ className, colors, legends, options, title, value: { labels, values } }: Props): React.ReactElement<Props> {
return (
<StyledDiv className={className}>
<h1>{title}</h1>
<Chart.Line
colors={colors}
labels={labels}
legends={legends}
options={options || OPTIONS}
title={title}
values={values}
/>
</StyledDiv>

16
packages/page-referenda/src/Referenda/Referendum.tsx
View File

@ -406,17 +406,17 @@ function Referendum (props: Props): React.ReactElement<Props> {
>
{chartProps && (
<Columar>
<Columar.Column className='chartColumn'>
<h1>{t<string>('approval / {{percent}}%', { replace: { percent: chartProps[0].progress.percent.toFixed(1) } })}</h1>
<Columar.Column>
<Chart.Line
legends={chartLegend[0]}
title={t<string>('approval / {{percent}}%', { replace: { percent: chartProps[0].progress.percent.toFixed(1) } })}
{...chartProps[0]}
/>
</Columar.Column>
<Columar.Column className='chartColumn'>
<h1>{t<string>('support / {{percent}}%', { replace: { percent: chartProps[1].progress.percent.toFixed(1) } })}</h1>
<Columar.Column>
<Chart.Line
legends={chartLegend[1]}
title={t<string>('support / {{percent}}%', { replace: { percent: chartProps[1].progress.percent.toFixed(1) } })}
{...chartProps[1]}
/>
</Columar.Column>
@ -478,14 +478,6 @@ function Referendum (props: Props): React.ReactElement<Props> {
}
const StyledTr = styled.tr`
.chartColumn {
h1 {
margin-bottom: 0;
margin-top: 1rem;
padding-left: 3rem;
}
}
.shortHash {
max-width: var(--width-shorthash);
min-width: 3em;

6
packages/page-staking/src/Query/Chart.tsx
View File

@ -11,13 +11,13 @@ import { Chart, Spinner } from '@polkadot/react-components';
interface Props {
className?: string;
colors: (string | undefined)[];
header: string;
labels: string[];
legends: string[];
title: string;
values: LineData;
}
function ChartDisplay ({ className = '', colors, header, labels, legends, values }: Props): React.ReactElement<Props> {
function ChartDisplay ({ className = '', colors, labels, legends, title, values }: Props): React.ReactElement<Props> {
const isLoading = useMemo(
() => !labels || labels.length === 0 || !values || values.length === 0 || !values[0] || !values[0].length,
[labels, values]
@ -25,11 +25,11 @@ function ChartDisplay ({ className = '', colors, header, labels, legends, values
return (
<StyledDiv className={`${className} staking--Chart ${isLoading ? 'isLoading' : ''}`}>
<h1>{header}</h1>
<Chart.Line
colors={colors}
labels={labels}
legends={legends}
title={title}
values={values}
/>
{isLoading && (

2
packages/page-staking/src/Query/ChartPoints.tsx
View File

@ -65,9 +65,9 @@ function ChartPoints ({ labels, validatorId }: Props): React.ReactElement<Props>
return (
<Chart
colors={COLORS_POINTS}
header={t<string>('era points')}
labels={labels}
legends={legendsRef.current}
title={t<string>('era points')}
values={values}
/>
);

2
packages/page-staking/src/Query/ChartPrefs.tsx
View File

@ -70,9 +70,9 @@ function ChartPrefs ({ labels, validatorId }: Props): React.ReactElement<Props>
return (
<Chart
colors={COLORS_POINTS}
header={t<string>('commission')}
labels={labels}
legends={legendsRef.current}
title={t<string>('commission')}
values={values}
/>
);

2
packages/page-staking/src/Query/ChartRewards.tsx
View File

@ -93,9 +93,9 @@ function ChartRewards ({ labels, validatorId }: Props): React.ReactElement<Props
return (
<Chart
colors={COLORS_REWARD}
header={t<string>('rewards & slashes')}
labels={labels}
legends={legends}
title={t<string>('rewards & slashes')}
values={values}
/>
);

2
packages/page-staking/src/Query/ChartStake.tsx
View File

@ -83,9 +83,9 @@ function ChartStake ({ labels, validatorId }: Props): React.ReactElement<Props>
return (
<Chart
colors={COLORS_STAKE}
header={t<string>('elected stake')}
labels={labels}
legends={legends}
title={t<string>('elected stake')}
values={values}
/>
);

26
packages/react-components/src/Chart/Line.tsx
View File

@ -6,6 +6,7 @@ import type { BN } from '@polkadot/util';
import React, { useMemo } from 'react';
import * as Chart from 'react-chartjs-2';
import styled from 'styled-components';
import { isBn, objectSpread } from '@polkadot/util';
@ -19,6 +20,7 @@ export interface Props {
legends: string[];
options?: ChartOptions;
values: (number | BN)[][];
title?: React.ReactNode;
}
interface Dataset {
@ -84,7 +86,10 @@ const BASE_OPTS: ChartOptions = {
},
scales: {
x: {
beginAtZero: true
ticks: {
maxRotation: 60,
minRotation: 60
}
}
}
};
@ -97,6 +102,10 @@ function getOptions (options: ChartOptions = {}): ChartOptions {
annotation: objectSpread({}, BASE_OPTS.plugins?.annotation, options.plugins?.annotation),
crosshair: objectSpread({}, BASE_OPTS.plugins?.crosshair, options.plugins?.crosshair),
tooltip: objectSpread({}, BASE_OPTS.plugins?.tooltip, options.plugins?.tooltip)
}),
scales: objectSpread({}, BASE_OPTS.scales, options.scales, {
x: objectSpread({}, BASE_OPTS.scales?.x, options.scales?.x),
y: objectSpread({}, BASE_OPTS.scales?.y, options.scales?.y)
})
});
}
@ -121,7 +130,7 @@ function getData (colors: (string | undefined)[] = [], legends: string[], labels
}, { datasets: [] as Dataset[], labels });
}
function LineChart ({ className = '', colors, labels, legends, options, values }: Props): React.ReactElement<Props> | null {
function LineChart ({ className = '', colors, labels, legends, options, title, values }: Props): React.ReactElement<Props> | null {
const chartOptions = useMemo(
() => getOptions(options),
[options]
@ -133,7 +142,8 @@ function LineChart ({ className = '', colors, labels, legends, options, values }
);
return (
<div className={`${className} ui--Chart-Line`}>
<StyledDiv className={`${className} ui--Chart-Line`}>
{title && <h1 className='ui--Chart-Header'>{title}</h1>}
<ErrorBoundary>
<Chart.Line
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
@ -142,8 +152,16 @@ function LineChart ({ className = '', colors, labels, legends, options, values }
options={chartOptions as any}
/>
</ErrorBoundary>
</div>
</StyledDiv>
);
}
const StyledDiv = styled.div`
h1.ui--Chart-Header {
margin-bottom: 0.25rem;
margin-top: 1rem;
padding-left: 0.25rem;
}
`;
export default React.memo(LineChart);

4
packages/react-components/src/Table/index.tsx
View File

@ -375,6 +375,10 @@ const StyledDiv = styled.div`
* + h5 {
margin-top: 1rem;
}
.ui--Chart-Line {
padding: 0 0.5rem;
}
}
}