From 7b35db64221b15d8c2b6bf41131e35ba40b99a71 Mon Sep 17 00:00:00 2001 From: Jaco Date: Mon, 19 Dec 2022 14:26:37 +0200 Subject: [PATCH] Add crosshairs for referendum charts (#8577) --- .../src/Referenda/Referendum.tsx | 30 ++++++++++++++++--- packages/react-components/package.json | 2 ++ packages/react-components/src/Chart/index.ts | 3 +- yarn.lock | 22 +++++++++++++- 4 files changed, 51 insertions(+), 6 deletions(-) diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx index c1d0bcfaea..e4b3ae7487 100644 --- a/packages/page-referenda/src/Referenda/Referendum.tsx +++ b/packages/page-referenda/src/Referenda/Referendum.tsx @@ -48,6 +48,9 @@ const OPTIONS: ChartOptions = { radius: 0 } }, + hover: { + intersect: false + }, interaction: { intersect: false, mode: 'index' @@ -163,7 +166,7 @@ function getChartResult (totalEligible: BN, isConvictionVote: boolean, info: Pal return null; } -function getChartProps (bestNumber: BN, blockInterval: BN, chartProps: ChartResultExt[], track: PalletReferendaTrackInfo, { x }: CurveGraph, t: TFunction): ChartProps[] { +function getChartProps (bestNumber: BN, blockInterval: BN, chartProps: ChartResultExt[], refId: BN, track: PalletReferendaTrackInfo, { x }: CurveGraph, t: TFunction): ChartProps[] { const changeXMax = chartProps.reduce((max, { changeX }) => max === -1 || changeX === -1 ? -1 @@ -267,10 +270,29 @@ function getChartProps (bestNumber: BN, blockInterval: BN, chartProps: ChartResu : {} ) }, + crosshair: { + line: { + color: '#ff8c00', + dashPattern: [5, 5], + width: 2 + }, + snapping: { + enabled: true + }, + sync: { + group: refId.toNumber() + }, + // this would be nice, but atm just doesn't quite + // seem or feel intuitive... + zoom: { + enabled: false + } + }, tooltip: { callbacks: { title - } + }, + intersect: false } } }, OPTIONS), @@ -300,8 +322,8 @@ function Referendum (props: Props): React.ReactElement { const chartProps = useMemo( () => bestNumber && chartResult && isExpanded && track && trackGraph && - getChartProps(bestNumber, blockInterval, chartResult, track, trackGraph, t), - [bestNumber, blockInterval, chartResult, isExpanded, t, track, trackGraph] + getChartProps(bestNumber, blockInterval, chartResult, id, track, trackGraph, t), + [bestNumber, blockInterval, chartResult, id, isExpanded, t, track, trackGraph] ); const chartLegend = useMemo( diff --git a/packages/react-components/package.json b/packages/react-components/package.json index 5db143ef4a..986f3d3110 100644 --- a/packages/react-components/package.json +++ b/packages/react-components/package.json @@ -26,8 +26,10 @@ "@polkadot/ui-settings": "^2.9.14", "@polkadot/util": "^10.2.1", "@polkadot/util-crypto": "^10.2.1", + "@types/chartjs-plugin-crosshair": "^1.1.1", "chart.js": "^3.9.1", "chartjs-plugin-annotation": "^2.1.0", + "chartjs-plugin-crosshair": "^1.2.0", "codeflask": "^1.4.1", "i18next": "^21.10.0", "i18next-browser-languagedetector": "^6.1.8", diff --git a/packages/react-components/src/Chart/index.ts b/packages/react-components/src/Chart/index.ts index b32bbe977a..f2c80542ef 100644 --- a/packages/react-components/src/Chart/index.ts +++ b/packages/react-components/src/Chart/index.ts @@ -3,12 +3,13 @@ import { CategoryScale, Chart, LinearScale, LineElement, PointElement, Title, Tooltip } from 'chart.js'; import annotationPlugin from 'chartjs-plugin-annotation'; +import crosshairPlugin from 'chartjs-plugin-crosshair'; import Doughnut from './Doughnut'; import HorizBar from './HorizBar'; import Line from './Line'; -Chart.register(CategoryScale, LinearScale, LineElement, PointElement, Title, Tooltip, annotationPlugin); +Chart.register(CategoryScale, LinearScale, LineElement, PointElement, Title, Tooltip, annotationPlugin, crosshairPlugin); export default { Doughnut, diff --git a/yarn.lock b/yarn.lock index 48c3b486e9..9ab2324569 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3519,10 +3519,12 @@ __metadata: "@polkadot/ui-settings": ^2.9.14 "@polkadot/util": ^10.2.1 "@polkadot/util-crypto": ^10.2.1 + "@types/chartjs-plugin-crosshair": ^1.1.1 "@types/codeflask": ^1.4.3 "@types/owasp-password-strength-test": ^1.3.0 chart.js: ^3.9.1 chartjs-plugin-annotation: ^2.1.0 + chartjs-plugin-crosshair: ^1.2.0 codeflask: ^1.4.1 i18next: ^21.10.0 i18next-browser-languagedetector: ^6.1.8 @@ -4477,7 +4479,7 @@ __metadata: languageName: node linkType: hard -"@types/chart.js@npm:^2.9.37": +"@types/chart.js@npm:*, @types/chart.js@npm:^2.9.37": version: 2.9.37 resolution: "@types/chart.js@npm:2.9.37" dependencies: @@ -4486,6 +4488,15 @@ __metadata: languageName: node linkType: hard +"@types/chartjs-plugin-crosshair@npm:^1.1.1": + version: 1.1.1 + resolution: "@types/chartjs-plugin-crosshair@npm:1.1.1" + dependencies: + "@types/chart.js": "*" + checksum: 3574680b395f01b5979c52758d57e2c5ed19a5a88e1e17497c005c4b1991933e78b5c1d7c749af0fc38c4fcd5cb501e05054b04ad531f45d54e12ed3ba48b499 + languageName: node + linkType: hard + "@types/codeflask@npm:^1.4.3": version: 1.4.3 resolution: "@types/codeflask@npm:1.4.3" @@ -7368,6 +7379,15 @@ __metadata: languageName: node linkType: hard +"chartjs-plugin-crosshair@npm:^1.2.0": + version: 1.2.0 + resolution: "chartjs-plugin-crosshair@npm:1.2.0" + peerDependencies: + chart.js: ^3.4.0 + checksum: f5cd3171d479d012f40915ae3d3baa35b7c726d1a67f99f0d55c6042c45e7adc807f832a73a3d0924d91035d9198f6ef388f05a95ba05a2e0dbe479a350515ba + languageName: node + linkType: hard + "chokidar@npm:^3.4.0, chokidar@npm:^3.5.3": version: 3.5.3 resolution: "chokidar@npm:3.5.3"