feat: add chart

apps/loan/src/components/PageCrvUsdStaking/Statistics/ChartTooltip.tsx

@@ -0,0 +1,52 @@
+import type { NameType, ValueType } from 'recharts/types/component/DefaultTooltipContent'
+import { TooltipProps } from 'recharts'
+import { t } from '@lingui/macro'
+import { Paper, Stack, Typography } from '@mui/material'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { formatDateFromTimestamp, formatNumber } from '@/ui/utils/utilsFormat'
+
+const { Spacing } = SizesAndSpaces
+
+const DataSet = ({ label, value }: { label: string; value: string }) => (
+  <Stack direction="row" justifyContent="space-between">
+    <Typography variant="bodySRegular">{label}</Typography>
+    <Typography variant="bodySBold">{value}</Typography>
+  </Stack>
+)
+
+const CustomTooltip = ({ active, payload }: TooltipProps<ValueType, NameType>) => {
+  if (active && payload && payload.length) {
+    const { timestamp, proj_apy, proj_apy_7d_avg, proj_apy_total_avg } = payload[0].payload
+
+    return (
+      <Paper
+        sx={{
+          backgroundColor: (theme) => theme.design.Layer[3].Fill,
+          padding: Spacing.md,
+          width: '20.5rem',
+          maxWidth: '100vw',
+        }}
+        elevation={2}
+      >
+        <Typography variant="bodyMBold">{formatDateFromTimestamp(timestamp)}</Typography>
+        <Stack
+          direction="column"
+          sx={{
+            marginTop: Spacing.sm,
+            padding: Spacing.sm,
+            gap: 0,
+            backgroundColor: (theme) => theme.design.Layer[2].Fill,
+          }}
+        >
+          <DataSet label={t`Historical APR`} value={proj_apy.toFixed(2) + '%'} />
+          <DataSet label={t`7-day Average APR`} value={proj_apy_7d_avg.toFixed(2) + '%'} />
+          <DataSet label={t`Average APR`} value={proj_apy_total_avg.toFixed(2) + '%'} />
+        </Stack>
+      </Paper>
+    )
+  }
+
+  return null
+}
+
+export default CustomTooltip

apps/loan/src/components/PageCrvUsdStaking/Statistics/LineChart.tsx

@@ -0,0 +1,115 @@
+import type { ScrvUsdYieldWithAverages } from '@/entities/scrvusdYield'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import { useTheme } from '@mui/material/styles'
+import { t } from '@lingui/macro'
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'
+import CustomTooltip from './ChartTooltip'
+
+import { formatDateFromTimestamp } from '@/ui/utils/utilsFormat'
+
+// import LineChartCustomTooltip from './LineChartCustomTooltip'
+const { FontSize } = SizesAndSpaces
+
+type Props = {
+  data: ScrvUsdYieldWithAverages[]
+  height?: number
+}
+
+const LineChartComponent = ({ data, height = 400 }: Props) => {
+  const yAxisWidth = 24
+  const {
+    design: { Color, Text },
+  } = useTheme()
+  const gridLineColor = Color.Neutral[300]
+  const gridTextColor = Text.TextColors.Tertiary
+  const averageLineColor = Color.Tertiary[400]
+  const sevenDayAverageLineColor = Color.Secondary[500]
+  const mainLineColor = Color.Primary[500]
+
+  // const maxValue = Math.max(...data.map((item) => item.gauge_relative_weight))
+
+  console.log(data)
+
+  const labels = {
+    proj_apy: { text: t`Historical APR`, dash: 'none' },
+    proj_apy_7d_avg: { text: t`7-day Average APR`, dash: '2 2' },
+    proj_apy_total_avg: { text: t`Average APR`, dash: '4 4' },
+  } as const
+
+  return (
+    <ResponsiveContainer width="100%" height={height}>
+      <LineChart
+        width={500}
+        height={300}
+        data={data}
+        margin={{
+          top: 16,
+          right: 16,
+          left: 24,
+          bottom: 16,
+        }}
+      >
+        <CartesianGrid stroke={gridLineColor} strokeWidth={0.3} vertical={true} />
+        <XAxis
+          dataKey="timestamp"
+          tick={{ fill: gridTextColor, fontSize: FontSize.xs.desktop }}
+          tickLine={{ fill: gridLineColor, strokeWidth: 0.5 }}
+          axisLine={false}
+          minTickGap={20}
+          tickMargin={4}
+          tickFormatter={(unixTime) => formatDateFromTimestamp(unixTime)}
+        />
+        <YAxis
+          tick={{ fill: gridTextColor, fontSize: FontSize.xs.desktop }}
+          tickFormatter={(value) => `${value}%`}
+          tickLine={{ fill: gridLineColor, strokeWidth: 0.5 }}
+          axisLine={false}
+          width={yAxisWidth}
+          // domain={[0, Math.ceil(maxValue)]}
+        />
+        <Tooltip content={CustomTooltip} cursor={{ opacity: 0.3 }} />
+        <Line
+          type="monotone"
+          dataKey="proj_apy"
+          stroke={mainLineColor}
+          strokeWidth={2}
+          activeDot={{ r: 4 }}
+          dot={false}
+        />
+        <Line
+          type="monotone"
+          dataKey="proj_apy_7d_avg"
+          stroke={sevenDayAverageLineColor}
+          strokeWidth={2}
+          strokeDasharray={labels['proj_apy_7d_avg'].dash}
+          activeDot={{ r: 4 }}
+          dot={false}
+        />
+        <Line
+          type="monotone"
+          dataKey="proj_apy_total_avg"
+          stroke={averageLineColor}
+          strokeWidth={2}
+          strokeDasharray={labels['proj_apy_total_avg'].dash}
+          activeDot={{ r: 4 }}
+          dot={false}
+        />
+        <Legend
+          margin={{ top: 16, bottom: 16 }}
+          verticalAlign="bottom"
+          iconType="line"
+          iconSize={20}
+          height={32}
+          formatter={(value: keyof typeof labels) => labels[value].text}
+          wrapperStyle={{
+            fontWeight: 'bold',
+            fontSize: 'var(--font-size-1)',
+            color: 'var(--page--text-color)',
+          }}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  )
+}
+
+export default LineChartComponent

apps/loan/src/components/PageCrvUsdStaking/Statistics/StatsStack.tsx

@@ -1,55 +1,30 @@
 import { Stack } from '@mui/material'
-import Typography from '@mui/material/Typography'
-import Skeleton from '@mui/material/Skeleton'
+import { Metric } from '@ui-kit/shared/ui/Metric'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
-import { formatNumber } from '@/ui/utils'
 
 import { useScrvUsdYield } from '@/entities/scrvusdYield'
 import { useScrvUsdRevenue } from '@/entities/scrvusdRevenue'
 
 const { Spacing } = SizesAndSpaces
-const metricSkeletonSize = { width: 90, height: 36 }
-
-const StatsColumn = ({
-  title,
-  value,
-  loading,
-  error,
-}: {
-  title: string
-  value: string
-  loading: boolean
-  error: boolean
-}) => (
-  <Stack>
-    <Typography variant="bodyXsRegular" sx={{ color: (t) => t.design.Text.TextColors.Tertiary }}>
-      {title}
-    </Typography>
-    {loading ? (
-      <Skeleton width={metricSkeletonSize.width} height={metricSkeletonSize.height} />
-    ) : (
-      <Typography variant="highlightXl">{error ? '-' : value}</Typography>
-    )}
-  </Stack>
-)
 
 const StatsStack = () => {
   const { data: yieldData, error: yieldError, isFetching: yieldIsFetching } = useScrvUsdYield({ timeFrame: '1d' })
   const { data: revenueData, error: revenueError, isFetching: revenueIsFetching } = useScrvUsdRevenue({})
 
   return (
     <Stack direction="row" gap={Spacing.md} sx={{ justifyContent: 'space-between', width: '100%' }}>
-      <StatsColumn
-        title="Total crvUSD Staked"
-        value={formatNumber(yieldData?.[yieldData.length - 1].supply ?? 0, { notation: 'compact' })}
+      <Metric
+        label="Total crvUSD Staked"
+        value={yieldData?.[yieldData.length - 1].supply ?? 0}
         loading={yieldIsFetching}
-        error={!!yieldError}
+        unit="dollar"
       />
-      <StatsColumn
-        title="Historical APY"
-        value={yieldData?.[yieldData.length - 1].proj_apy.toFixed(2) + '%'}
+      <Metric
+        label="Historical APY"
+        value={yieldData?.[yieldData.length - 1].proj_apy ?? 0}
         loading={yieldIsFetching}
-        error={!!yieldError}
+        decimals={2}
+        unit="percentage"
       />
       {/* <StatsColumn title="Total Revenue Distributed" value={data?.total_fees.toString() ?? ''} />
       <StatsColumn title="Weekly Accumulated Revenue" value={data?.protocol_fees.toString() ?? ''} /> */}

apps/loan/src/components/PageCrvUsdStaking/Statistics/index.tsx

@@ -1,25 +1,39 @@
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import { Card, CardHeader, Box } from '@mui/material'
 import StatsStack from './StatsStack'
+import ChartHeader, { ChartOption } from '@ui-kit/shared/ui/ChartHeader'
+import { useScrvUsdYield } from '@/entities/scrvusdYield'
+import LineChart from './LineChart'
 
 const { Spacing, MaxWidth } = SizesAndSpaces
 
-const Statistics = () => (
-  <Card
-    sx={{
-      backgroundColor: (t) => t.design.Layer[1].Fill,
-      width: '100%',
-      maxWidth: MaxWidth.statistics,
-    }}
-  >
-    <CardHeader
-      title="Statistics"
-      sx={{ padding: `0 ${Spacing.md.desktop} ${Spacing.sm.desktop}`, alignItems: 'end' }}
-    />
-    <Box sx={{ padding: Spacing.md }}>
-      <StatsStack />
-    </Box>
-  </Card>
-)
+const chartOptions: ChartOption[] = [
+  { activeTitle: 'Historical Rate', label: 'Interest Rate' },
+  { activeTitle: 'Historical Rewards', label: 'Rewards' },
+]
+
+const Statistics = () => {
+  const { data } = useScrvUsdYield({ timeFrame: '1d' })
+
+  return (
+    <Card
+      sx={{
+        backgroundColor: (t) => t.design.Layer[1].Fill,
+        width: '100%',
+        maxWidth: MaxWidth.statistics,
+      }}
+    >
+      <CardHeader
+        title="Statistics"
+        sx={{ padding: `0 ${Spacing.md.desktop} ${Spacing.sm.desktop}`, alignItems: 'end' }}
+      />
+      <Box sx={{ padding: Spacing.md }}>
+        <StatsStack />
+      </Box>
+      <ChartHeader chartOptions={chartOptions} />
+      <LineChart data={data ?? []} />
+    </Card>
+  )
+}
 
 export default Statistics

apps/loan/src/entities/scrvusdYield.ts

@@ -11,6 +11,11 @@ type ScrvUsdYieldFromApi = {
   price: number
 }
 
+export type ScrvUsdYieldWithAverages = ScrvUsdYieldFromApi & {
+  proj_apy_7d_avg: number
+  proj_apy_total_avg: number
+}
+
 type GetScrvUsdYieldResponse = {
   data?: ScrvUsdYieldFromApi[]
   detail?: string
@@ -35,7 +40,28 @@ export const _getScrvUsdYield = async (params: { timeFrame: TimeFrame }) => {
     throw new Error(`Failed to fetch scrvUSD historical yield data. ${detail}`)
   }
 
-  return data
+  if (!data) {
+    return []
+  }
+
+  const dataWithAverages: ScrvUsdYieldWithAverages[] = data?.map((item, index, array) => {
+    // Calculate overall average across all data points
+    const totalAverage = array.reduce((sum, curr) => sum + curr.proj_apy, 0) / array.length
+
+    // Calculate 7-day moving average (looking back 7 days)
+    const lookback = 7 * 24 * 12 // 7 days worth of 5-minute intervals
+    const startIdx = Math.max(0, index - lookback)
+    const relevantData = array.slice(startIdx, index + 1)
+    const movingAverage = relevantData.reduce((sum, curr) => sum + curr.proj_apy, 0) / relevantData.length
+
+    return {
+      ...item,
+      proj_apy_7d_avg: movingAverage,
+      proj_apy_total_avg: totalAverage,
+    }
+  })
+
+  return dataWithAverages
 }
 
 export const { useQuery: useScrvUsdYield } = queryFactory({

packages/curve-ui-kit/src/shared/ui/ChartHeader.tsx

@@ -0,0 +1,52 @@
+import { useState } from 'react'
+import { Stack, ToggleButtonGroup } from '@mui/material'
+import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
+import Typography from '@mui/material/Typography'
+import ToggleButton from '@mui/material/ToggleButton'
+import IconButton from '@mui/material/IconButton'
+import Icon from 'ui/src/Icon'
+
+const { Spacing } = SizesAndSpaces
+
+export type ChartOption = {
+  label: string
+  activeTitle: string
+}
+
+type TimeOption = {
+  label: '1d' | '7d' | '30d'
+}
+
+type ChartHeaderProps = {
+  chartOptions: ChartOption[]
+  timeOptions?: TimeOption[]
+}
+
+const ChartHeader = ({ chartOptions, timeOptions }: ChartHeaderProps) => {
+  const [activeChartOption, setActiveChartOption] = useState(chartOptions[0])
+
+  const handleChartOption = (event: React.MouseEvent<HTMLElement>, newChartOption: ChartOption) => {
+    // ensure that one option is always selected by checking null
+    if (newChartOption !== null) setActiveChartOption(newChartOption)
+  }
+
+  return (
+    <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ padding: Spacing.md }}>
+      <Typography variant="headingXsBold" color="textSecondary">
+        {activeChartOption.activeTitle}
+      </Typography>
+      <ToggleButtonGroup exclusive value={activeChartOption} onChange={handleChartOption}>
+        {chartOptions.map((option) => (
+          <ToggleButton value={option} key={option.label} size="small">
+            {option.label}
+          </ToggleButton>
+        ))}
+        <IconButton size="small">
+          <Icon name="Maximize" size={20} />
+        </IconButton>
+      </ToggleButtonGroup>
+    </Stack>
+  )
+}
+
+export default ChartHeader