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

@@ -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<Props> {

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])

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<Props> {
             colors={COLORS_POINTS}
             labels={labels}
             legends={legendsRef.current}
+            options={chartOptions}
             values={chart}
           />
         )

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<Props> {
             colors={COLORS_POINTS}
             labels={labels}
             legends={legendsRef.current}
+            options={chartOptions}
             values={chart}
           />
         )

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<Props> {
             colors={COLORS_REWARD}
             labels={labels}
             legends={legends}
+            options={chartOptions}
             values={chart}
           />
         )

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<Props> {
             colors={COLORS_STAKE}
             labels={labels}
             legends={legends}
+            options={chartOptions}
             values={chart}
           />
         )

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

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