Skip to content

Commit

Permalink
feat: add in avg line to apy charts (#1836)
Browse files Browse the repository at this point in the history
  • Loading branch information
@grothem
grothem authored Nov 9, 2023
1 parent 521a159 commit 5f74827
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 2 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@
"@mui/material": "^5.10.9",
"@paraswap/sdk": "6.2.4",
"@tanstack/react-query": "^4.28.0",
"@visx/annotation": "^3.3.0",
"@visx/axis": "^2.14.0",
"@visx/curve": "^2.1.0",
"@visx/event": "^2.6.0",
Expand Down
60 changes: 58 additions & 2 deletions src/modules/reserve-overview/graphs/ApyGraph.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Box, Typography, useMediaQuery, useTheme } from '@mui/material';
import { Box, Stack, Typography, useMediaQuery, useTheme } from '@mui/material';
import { Annotation, HtmlLabel } from '@visx/annotation';
import { AxisBottom, AxisLeft } from '@visx/axis';
import { curveMonotoneX } from '@visx/curve';
import { localPoint } from '@visx/event';
Expand All @@ -10,7 +11,7 @@ import { defaultStyles, TooltipWithBounds, withTooltip } from '@visx/tooltip';
import { WithTooltipProvidedProps } from '@visx/tooltip/lib/enhancers/withTooltip';
import { bisector, extent, max } from 'd3-array';
import { timeFormat } from 'd3-time-format';
import React, { Fragment, useCallback, useMemo } from 'react';
import React, { Fragment, ReactNode, useCallback, useMemo } from 'react';
import { FormattedReserveHistoryItem, ReserveRateTimeRange } from 'src/hooks/useReservesHistory';

type TooltipData = FormattedReserveHistoryItem;
Expand Down Expand Up @@ -59,6 +60,7 @@ export type AreaProps = {
data: FormattedReserveHistoryItem[];
fields: { name: Field; color: string; text: string }[];
selectedTimeRange: ReserveRateTimeRange;
avgFieldName?: Field;
};

export const ApyGraph = withTooltip<AreaProps, TooltipData>(
Expand All @@ -73,6 +75,7 @@ export const ApyGraph = withTooltip<AreaProps, TooltipData>(
data,
fields,
selectedTimeRange,
avgFieldName,
}: AreaProps & WithTooltipProvidedProps<TooltipData>) => {
if (width < 10) return null;
const theme = useTheme();
Expand Down Expand Up @@ -140,6 +143,57 @@ export const ApyGraph = withTooltip<AreaProps, TooltipData>(
[showTooltip, dateScale, data, margin]
);

let avgLine: ReactNode = null;
if (avgFieldName) {
const avg = data.reduce((acc, cur) => acc + cur[avgFieldName], 0) / data.length;
if (avg > 0) {
const avgFormatted = (avg * 100).toFixed(2);
const avgArray = data.map((d) => {
return {
...d,
[avgFieldName]: avg,
};
});

const annotationX = (dateScale(getDate(avgArray[0])) ?? 0) + 70;
const annotationY = (yValueScale(getData(avgArray[0], avgFieldName)) ?? 0) - 8;

avgLine = (
<>
<LinePath
key="avg"
data={avgArray}
strokeDasharray="3,5"
stroke="#D2D4DC"
strokeWidth={2}
x={(d) => dateScale(getDate(d)) ?? 0}
y={(d) => yValueScale(getData(d, avgFieldName)) ?? 0}
/>
<Annotation x={annotationX} y={annotationY}>
<HtmlLabel showAnchorLine={false}>
<Stack
alignItems="center"
direction="row"
justifyContent="center"
sx={{
mx: 2,
my: 0.5,
fontSize: 12,
background: theme.palette.divider,
borderRadius: '99px',
}}
>
<Typography sx={{ m: 1 }} noWrap variant="secondary12">
Avg {avgFormatted}%
</Typography>
</Stack>
</HtmlLabel>
</Annotation>
</>
);
}
}

return (
<>
<svg width={width} height={height}>
Expand Down Expand Up @@ -167,6 +221,8 @@ export const ApyGraph = withTooltip<AreaProps, TooltipData>(
/>
))}

{avgLine}

{/* X Axis */}
<AxisBottom
top={innerHeight - margin.bottom / 4}
Expand Down
1 change: 1 addition & 0 deletions src/modules/reserve-overview/graphs/ApyGraphContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -146,6 +146,7 @@ export const ApyGraphContainer = ({
data={data}
fields={fields}
selectedTimeRange={selectedTimeRange}
avgFieldName={graphKey === 'supply' ? 'liquidityRate' : 'variableBorrowRate'}
/>
)}
</ParentSize>
Expand Down
57 changes: 57 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3767,6 +3767,19 @@
"@typescript-eslint/types" "5.46.0"
eslint-visitor-keys "^3.3.0"

"@visx/annotation@^3.3.0":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@visx/annotation/-/annotation-3.3.0.tgz#2297ed3ea30ec334ced586cff014a69ec7e843b9"
integrity sha512-v0htpd/sT1kdU1N7frqmj078UByJXUwPQJT9LENv0ypssjGyRgvZERjkgSUuMKMjZquOBs/f6XOzxF4mLV57sA==
dependencies:
"@types/react" "*"
"@visx/drag" "3.3.0"
"@visx/group" "3.3.0"
"@visx/text" "3.3.0"
classnames "^2.3.1"
prop-types "^15.5.10"
react-use-measure "^2.0.4"

"@visx/axis@^2.14.0":
version "2.14.0"
resolved "https://registry.yarnpkg.com/@visx/axis/-/axis-2.14.0.tgz#4fe3bf42c20aae599dc94ef5387dfcb1ba3a85ea"
Expand Down Expand Up @@ -3798,6 +3811,24 @@
"@types/d3-shape" "^1.3.1"
d3-shape "^1.0.6"

"@visx/[email protected]":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@visx/drag/-/drag-3.3.0.tgz#d44a9f7409c9da468ae37ef9bf30899144da7720"
integrity sha512-fLNsorq6GyANCqAE/dToG0q7YoGVxihGC9FZQUp0MCV1wMJIJ45ximhrl5NDng2ytbpWnBmXu8M8hdsdFuvIXw==
dependencies:
"@types/react" "*"
"@visx/event" "3.3.0"
"@visx/point" "3.3.0"
prop-types "^15.5.10"

"@visx/[email protected]":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@visx/event/-/event-3.3.0.tgz#30bb7f02857800749219e4ba76fce53df4d47353"
integrity sha512-fKalbNgNz2ooVOTXhvcOx5IlEQDgVfX66rI7bgZhBxI2/scy+5rWcXJXpwkheRF68SMx9R93SjKW6tmiD0h+jA==
dependencies:
"@types/react" "*"
"@visx/point" "3.3.0"

"@visx/event@^2.6.0":
version "2.6.0"
resolved "https://registry.npmjs.org/@visx/event/-/event-2.6.0.tgz"
Expand Down Expand Up @@ -3837,6 +3868,15 @@
classnames "^2.3.1"
prop-types "^15.6.2"

"@visx/[email protected]":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@visx/group/-/group-3.3.0.tgz#20c1b75c1ab31798c3c702b6f58c412c688a6373"
integrity sha512-yKepDKwJqlzvnvPS0yDuW13XNrYJE4xzT6xM7J++441nu6IybWWwextyap8ey+kU651cYDb+q1Oi6aHvQwyEyw==
dependencies:
"@types/react" "*"
classnames "^2.3.1"
prop-types "^15.6.2"

"@visx/legend@^2.10.0":
version "2.10.0"
resolved "https://registry.yarnpkg.com/@visx/legend/-/legend-2.10.0.tgz#d561f86e4bc536f9d50e21d607e65f05640f73d5"
Expand All @@ -3853,6 +3893,11 @@
resolved "https://registry.npmjs.org/@visx/point/-/point-2.6.0.tgz"
integrity sha512-amBi7yMz4S2VSchlPdliznN41TuES64506ySI22DeKQ+mc1s1+BudlpnY90sM1EIw4xnqbKmrghTTGfy6SVqvQ==

"@visx/[email protected]":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@visx/point/-/point-3.3.0.tgz#7a705e09892ae45b4c9cf3155e9be3a3845460d8"
integrity sha512-03eBBIJarkmX79WbeEGTUZwmS5/MUuabbiM9KfkGS9pETBTWkp1DZtEHZdp5z34x5TDQVLSi0rk1Plg3/8RtDg==

"@visx/responsive@^2.10.0":
version "2.10.0"
resolved "https://registry.yarnpkg.com/@visx/responsive/-/responsive-2.10.0.tgz#3e5c5853c7b2b33481e99a64678063cef717de0b"
Expand Down Expand Up @@ -3906,6 +3951,18 @@
prop-types "^15.7.2"
reduce-css-calc "^1.3.0"

"@visx/[email protected]":
version "3.3.0"
resolved "https://registry.yarnpkg.com/@visx/text/-/text-3.3.0.tgz#f53366a9c18bc448c6b8869527c0f75c9591e7a7"
integrity sha512-fOimcsf0GtQE9whM5MdA/xIkHMaV29z7qNqNXysUDE8znSMKsN+ott7kSg2ljAEE89CQo3WKHkPNettoVsa84w==
dependencies:
"@types/lodash" "^4.14.172"
"@types/react" "*"
classnames "^2.3.1"
lodash "^4.17.21"
prop-types "^15.7.2"
reduce-css-calc "^1.3.0"

"@visx/tooltip@^2.16.0":
version "2.16.0"
resolved "https://registry.yarnpkg.com/@visx/tooltip/-/tooltip-2.16.0.tgz#b88caf9cd91c50c98b6ed60e59323060b77a28a2"
Expand Down

1 comment on commit 5f74827

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This commit was deployed on ipfs

Please sign in to comment.