From 19b399ddb0777ab90a07ca9d45691317c2260bbd Mon Sep 17 00:00:00 2001 From: Jaco Date: Mon, 19 Dec 2022 19:21:32 +0200 Subject: [PATCH] Referenda graph overlaps (no explicit confirm) (#8581) * Referenda graph overlaps (no explicit confirm) * Crosshair for other charts * Align all --- packages/page-explorer/src/Latency/Chart.tsx | 26 ++++++++++++++++- .../src/Referenda/Referendum.tsx | 25 ++++------------- .../page-staking/src/Query/ChartPoints.tsx | 2 ++ .../page-staking/src/Query/ChartPrefs.tsx | 2 ++ .../page-staking/src/Query/ChartRewards.tsx | 3 +- .../page-staking/src/Query/ChartStake.tsx | 3 +- packages/page-staking/src/Query/util.ts | 28 +++++++++++++++++++ packages/react-components/src/Chart/Line.tsx | 16 +++++++++++ 8 files changed, 82 insertions(+), 23 deletions(-) diff --git a/packages/page-explorer/src/Latency/Chart.tsx b/packages/page-explorer/src/Latency/Chart.tsx index ae7131beff..03b73fc5ff 100644 --- a/packages/page-explorer/src/Latency/Chart.tsx +++ b/packages/page-explorer/src/Latency/Chart.tsx @@ -21,7 +21,31 @@ const OPTIONS = { duration: 0 }, aspectRatio: 6, - maintainAspectRatio: true + maintainAspectRatio: true, + plugins: { + crosshair: { + line: { + color: '#ff8c00', + dashPattern: [5, 5], + width: 2 + }, + snapping: { + enabled: true + }, + sync: { + enabled: true, + group: Date.now() + }, + // this would be nice, but atm just doesn't quite + // seem or feel intuitive... + zoom: { + enabled: false + } + }, + tooltip: { + intersect: false + } + } }; function ChartDisplay ({ className, colors, legends, title, value: { labels, values } }: Props): React.ReactElement { diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx index e4b3ae7487..1f88c5ea2b 100644 --- a/packages/page-referenda/src/Referenda/Referendum.tsx +++ b/packages/page-referenda/src/Referenda/Referendum.tsx @@ -13,7 +13,7 @@ import styled from 'styled-components'; import { Chart, Columar, ExpandButton, LinkExternal } from '@polkadot/react-components'; import { useBestNumber, useBlockInterval, useToggle } from '@polkadot/react-hooks'; import { calcBlockTime } from '@polkadot/react-hooks/useBlockTime'; -import { BN_MILLION, BN_THOUSAND, bnToBn, formatNumber, objectSpread } from '@polkadot/util'; +import { BN_MILLION, BN_THOUSAND, bnMax, bnToBn, formatNumber, objectSpread } from '@polkadot/util'; import { useTranslation } from '../translate'; import Killed from './RefKilled'; @@ -38,23 +38,7 @@ const PT_NEG = 1; const PT_POS = 2; const OPTIONS: ChartOptions = { - animation: { - duration: 0 - }, aspectRatio: 2.25, - elements: { - point: { - hoverRadius: 6, - radius: 0 - } - }, - hover: { - intersect: false - }, - interaction: { - intersect: false, - mode: 'index' - }, maintainAspectRatio: true, scales: { y: { @@ -187,11 +171,12 @@ function getChartProps (bestNumber: BN, blockInterval: BN, chartProps: ChartResu const swapX = changeX === -1 ? -1 : maxX * (changeX / x.length); + const enactX = changeXMax !== -1 && bnMax(bestNumber, x[changeXMax].add(since)); const confirmX = endConfirm ? [endConfirm.sub(track.confirmPeriod), endConfirm, endConfirm.add(track.minEnactmentPeriod)] - : changeXMax === -1 - ? null - : [x[changeXMax].add(since), x[changeXMax].add(since).add(track.confirmPeriod), x[changeXMax].add(since).add(track.confirmPeriod).add(track.minEnactmentPeriod)]; + : enactX + ? [enactX, enactX.add(track.confirmPeriod), enactX.add(track.confirmPeriod).add(track.minEnactmentPeriod)] + : null; const title = createTitleCallback(t, bestNumber, blockInterval, (blockNumber) => confirmX && blockNumber.gte(confirmX[0]) ? blockNumber.lte(confirmX[1]) diff --git a/packages/page-staking/src/Query/ChartPoints.tsx b/packages/page-staking/src/Query/ChartPoints.tsx index a65296120c..7b7e1585c7 100644 --- a/packages/page-staking/src/Query/ChartPoints.tsx +++ b/packages/page-staking/src/Query/ChartPoints.tsx @@ -10,6 +10,7 @@ import { Chart, Spinner } from '@polkadot/react-components'; import { useApi, useCall } from '@polkadot/react-hooks'; import { useTranslation } from '../translate'; +import { chartOptions } from './util'; const COLORS_POINTS = [undefined, '#acacac']; @@ -67,6 +68,7 @@ function ChartPoints ({ validatorId }: Props): React.ReactElement { colors={COLORS_POINTS} labels={labels} legends={legendsRef.current} + options={chartOptions} values={chart} /> ) diff --git a/packages/page-staking/src/Query/ChartPrefs.tsx b/packages/page-staking/src/Query/ChartPrefs.tsx index 01ea300032..ef91ae5a3c 100644 --- a/packages/page-staking/src/Query/ChartPrefs.tsx +++ b/packages/page-staking/src/Query/ChartPrefs.tsx @@ -11,6 +11,7 @@ import { useApi, useCall } from '@polkadot/react-hooks'; import { BN, BN_BILLION } from '@polkadot/util'; import { useTranslation } from '../translate'; +import { chartOptions } from './util'; const MULT = new BN(100 * 100); const COLORS_POINTS = [undefined, '#acacac']; @@ -72,6 +73,7 @@ function ChartPrefs ({ validatorId }: Props): React.ReactElement { colors={COLORS_POINTS} labels={labels} legends={legendsRef.current} + options={chartOptions} values={chart} /> ) diff --git a/packages/page-staking/src/Query/ChartRewards.tsx b/packages/page-staking/src/Query/ChartRewards.tsx index dd1a41c850..e419295eb7 100644 --- a/packages/page-staking/src/Query/ChartRewards.tsx +++ b/packages/page-staking/src/Query/ChartRewards.tsx @@ -11,7 +11,7 @@ import { useApi, useCall } from '@polkadot/react-hooks'; import { BN, formatBalance } from '@polkadot/util'; import { useTranslation } from '../translate'; -import { balanceToNumber } from './util'; +import { balanceToNumber, chartOptions } from './util'; const COLORS_REWARD = ['#8c2200', '#008c22', '#acacac']; @@ -92,6 +92,7 @@ function ChartRewards ({ validatorId }: Props): React.ReactElement { colors={COLORS_REWARD} labels={labels} legends={legends} + options={chartOptions} values={chart} /> ) diff --git a/packages/page-staking/src/Query/ChartStake.tsx b/packages/page-staking/src/Query/ChartStake.tsx index e0e9e01c7f..e7daad29b1 100644 --- a/packages/page-staking/src/Query/ChartStake.tsx +++ b/packages/page-staking/src/Query/ChartStake.tsx @@ -11,7 +11,7 @@ import { useApi, useCall } from '@polkadot/react-hooks'; import { BN, formatBalance } from '@polkadot/util'; import { useTranslation } from '../translate'; -import { balanceToNumber } from './util'; +import { balanceToNumber, chartOptions } from './util'; const COLORS_STAKE = [undefined, '#8c2200', '#acacac']; @@ -82,6 +82,7 @@ function ChartStake ({ validatorId }: Props): React.ReactElement { colors={COLORS_STAKE} labels={labels} legends={legends} + options={chartOptions} values={chart} /> ) diff --git a/packages/page-staking/src/Query/util.ts b/packages/page-staking/src/Query/util.ts index f6c38ce7cb..dfc584790c 100644 --- a/packages/page-staking/src/Query/util.ts +++ b/packages/page-staking/src/Query/util.ts @@ -1,6 +1,7 @@ // Copyright 2017-2022 @polkadot/app-staking authors & contributors // SPDX-License-Identifier: Apache-2.0 +import type { ChartOptions } from 'chart.js'; import type { BN } from '@polkadot/util'; import { BN_THOUSAND, BN_ZERO, isBn, isFunction } from '@polkadot/util'; @@ -9,6 +10,33 @@ interface ToBN { toBn: () => BN; } +export const chartOptions = { + plugins: { + crosshair: { + line: { + color: '#ff8c00', + dashPattern: [5, 5], + width: 2 + }, + snapping: { + enabled: true + }, + sync: { + enabled: true, + group: Date.now() + }, + // this would be nice, but atm just doesn't quite + // seem or feel intuitive... + zoom: { + enabled: false + } + }, + tooltip: { + intersect: false + } + } +} as unknown as ChartOptions; + export function balanceToNumber (amount: BN | ToBN = BN_ZERO, divisor: BN): number { const value = isBn(amount) ? amount diff --git a/packages/react-components/src/Chart/Line.tsx b/packages/react-components/src/Chart/Line.tsx index 40de8a673d..1296c07373 100644 --- a/packages/react-components/src/Chart/Line.tsx +++ b/packages/react-components/src/Chart/Line.tsx @@ -36,6 +36,22 @@ interface Config { const COLORS = ['#ff8c00', '#008c8c', '#8c008c']; const chartOptions: ChartOptions = { + animation: { + duration: 0 + }, + elements: { + point: { + hoverRadius: 6, + radius: 0 + } + }, + hover: { + intersect: false + }, + interaction: { + intersect: false, + mode: 'index' + }, plugins: { legend: { display: false