-
Notifications
You must be signed in to change notification settings - Fork 81
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add amendment summary page (#855)
## High Level Overview of Change <!-- Please include a summary/list of the changes. If too broad, please consider splitting into multiple PRs. --> The page would include: - Information about the amendment - List of voted Yes and No validators (for amendments in voting) - A graph showing distribution of votes broken down by UNL and non-UNL validators (for amendments in voting) This PR would also include search by Amendment Id/Name ### Type of Change <!-- Please check relevant options, delete irrelevant ones. --> - [x] New feature (non-breaking change which adds functionality) ## Before / After <!-- If just refactoring / back-end changes, this can be just an in-English description of the change at a technical level. If a UI change, screenshots should be included. --> ### Amendment in voting (Desktop)  ### Amendment in voting (Mobile)  ### Amendment enabled  ### Chart legend <img width="1294" alt="Screenshot 2023-10-04 at 11 49 39 AM" src="https://github.com/ripple/explorer/assets/71317875/819d8a40-11a2-49f2-8784-e1d0568a965b"> ### Footnote <img width="1298" alt="Screenshot 2023-10-04 at 4 36 09 PM" src="https://github.com/ripple/explorer/assets/71317875/4437b640-90d0-486e-8251-3241bab171d2">
- Loading branch information
Showing
20 changed files
with
1,129 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| import { useState } from 'react' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { | ||
| BarChart, | ||
| Bar, | ||
| XAxis, | ||
| YAxis, | ||
| Tooltip, | ||
| TooltipProps, | ||
| Label, | ||
| ResponsiveContainer, | ||
| // Text, | ||
| // Cell, | ||
| } from 'recharts' | ||
| import { | ||
| BLACK_600, | ||
| GREEN_400, | ||
| GREY_0, | ||
| GREY_600, | ||
| GREY_800, | ||
| MAGENTA_500, | ||
| } from '../shared/utils' | ||
|
|
||
| interface Props { | ||
| data: any | ||
| } | ||
|
|
||
| type ValueType = number | string | Array<number | string> | ||
| type NameType = number | string | ||
|
|
||
| const CustomTooltip = ({ | ||
| active, | ||
| payload, | ||
| label, | ||
| }: TooltipProps<ValueType, NameType>) => { | ||
| const { t } = useTranslation() | ||
| if (active) { | ||
| return ( | ||
| <div className="custom-tooltip"> | ||
| <p className="label">{label}</p> | ||
| <p className="value"> | ||
| {t('yeas_count', { | ||
| yeas_count: payload ? payload[0].payload.yeas : 0, | ||
| })} | ||
| </p> | ||
| <p className="value"> | ||
| {t('nays_count', { | ||
| nays_count: payload ? payload[0].payload.nays : 0, | ||
| })} | ||
| </p> | ||
| </div> | ||
| ) | ||
| } | ||
| return null | ||
| } | ||
|
|
||
| const CustomLegend = () => { | ||
| const { t } = useTranslation() | ||
| return ( | ||
| <div className="custom-legend"> | ||
| <div className="legend-color"> | ||
| <div className="segment"> | ||
| <span className="icon yea" /> | ||
| <span className="text">{t('yeas')}</span> | ||
| </div> | ||
| <div className="segment"> | ||
| <span className="icon nay" /> | ||
| <span className="text">{t('nays')}</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| export const BarChartVoting = ({ data }: Props) => { | ||
| const { t } = useTranslation() | ||
| const [showTooltips, setShowTooltips] = useState(false) | ||
|
|
||
| return ( | ||
| <div className="barchart"> | ||
| <CustomLegend /> | ||
| <ResponsiveContainer height={532} width="100%"> | ||
| <BarChart | ||
| data={data} | ||
| margin={{ top: 5, right: 20, bottom: 5, left: 0 }} | ||
| > | ||
| <XAxis | ||
| dataKey="label" | ||
| dy={12} | ||
| height={90} | ||
| tickLine={false} | ||
| minTickGap={-1} | ||
| stroke={BLACK_600} | ||
| interval={0} | ||
| tick={{ fill: GREY_0 }} | ||
| /> | ||
| <YAxis | ||
| className="yAxis" | ||
| tickLine={false} | ||
| stroke={BLACK_600} | ||
| tick={{ fill: GREY_0 }} | ||
| > | ||
| <Label | ||
| className="y-label" | ||
| value={t('no_of_validators')} | ||
| angle={-90} | ||
| position="insideTop" | ||
| dx={45} | ||
| dy={55} | ||
| style={{ fill: GREY_0 }} | ||
| /> | ||
| </YAxis> | ||
| <Bar | ||
| dataKey="yeas" | ||
| barSize={30} | ||
| fill={GREEN_400} | ||
| radius={[4, 4, 0, 0]} | ||
| isAnimationActive={false} | ||
| onMouseOver={() => setShowTooltips(true)} | ||
| onMouseLeave={() => setShowTooltips(false)} | ||
| /> | ||
| <Bar | ||
| dataKey="nays" | ||
| barSize={30} | ||
| fill={MAGENTA_500} | ||
| radius={[4, 4, 0, 0]} | ||
| isAnimationActive={false} | ||
| onMouseOver={() => setShowTooltips(true)} | ||
| onMouseLeave={() => setShowTooltips(false)} | ||
| /> | ||
| <Tooltip | ||
| content={CustomTooltip} | ||
| cursor={false} | ||
| offset={-10} | ||
| wrapperStyle={{ | ||
| backgroundColor: GREY_600, | ||
| borderRadius: 8, | ||
| border: `1px solid ${GREY_800}`, | ||
| opacity: showTooltips ? '100%' : '0', | ||
| }} | ||
| /> | ||
| </BarChart> | ||
| </ResponsiveContainer> | ||
| </div> | ||
| ) | ||
| } |
Oops, something went wrong.