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

Add crosshairs for referendum charts (#8577)

Browse Source
This commit is contained in:
Jaco 2022-12-19 14:26:37 +02:00 committed by GitHub
parent 8a20706ea9
commit 7b35db6422
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

2
packages/react-components/package.json
View File

@ -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",

3
packages/react-components/src/Chart/index.ts
View File

@ -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,

22
yarn.lock
View File

@ -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"