fix: Reverting Sparkline changes

pokt-foundation · Oct 11, 2023 · 62fca2f · 62fca2f
1 parent bad347c
commit 62fca2f
Showing 1 changed file with 15 additions and 31 deletions.
diff --git a/app/components/Sparkline/Sparkline.tsx b/app/components/Sparkline/Sparkline.tsx
@@ -2,13 +2,12 @@ import { Box, Text, useMantineTheme } from "@pokt-foundation/pocket-blocks"
 import React, { useMemo } from "react"
 import {
   CartesianGrid,
-  Area,
-  ComposedChart,
+  LineChart,
+  Line,
   ResponsiveContainer,
   Tooltip,
   XAxis,
   YAxis,
-  Line,
 } from "recharts"
 import { ChartData } from "~/types/global"
 import { formatNumberToSICompact } from "~/utils/formattingUtils"
@@ -42,7 +41,8 @@ const Sparkline = ({
         >
           <Text className="label">Date: {label}</Text>
           <Text className="desc">
-            {payload[0].value ? `${payload[0].value} ${valueLabel}` : "No Data"}
+            {payload[0].value}
+            {valueLabel}
           </Text>
         </Box>
       )
@@ -63,13 +63,7 @@ const Sparkline = ({
 
   return (
     <ResponsiveContainer height="100%" width="100%">
-      <ComposedChart data={data} height={height}>
-        <defs>
-          <linearGradient id="colorUv" x1="0" x2="0" y1="0" y2="1">
-            <stop offset="5%" stopColor="#389F58" stopOpacity={0.1} />
-            <stop offset="95%" stopColor="#27292F" stopOpacity={0.1} />
-          </linearGradient>
-        </defs>
+      <LineChart data={data} height={height}>
         <CartesianGrid
           strokeDasharray="3 3"
           strokeWidth={0.2}
@@ -80,7 +74,7 @@ const Sparkline = ({
           dataKey={xAxisDataKey}
           height={60}
           minTickGap={15}
-          padding={{ left: 10, right: 10 }}
+          padding={{ left: 30, right: 30 }}
           stroke={theme.colors.gray[8]}
           tick={{ fill: theme.colors.gray[6] }}
           tickLine={false}
@@ -96,29 +90,19 @@ const Sparkline = ({
           tickLine={false}
           width={maxCharactersWidth}
         />
-        <Tooltip content={<CustomTooltip valueLabel={label} />} filterNull={false} />
-        <Area
-          connectNulls
-          activeDot={{ stroke: theme.colors.green[5], strokeWidth: 1 }}
-          dataKey="val"
-          dot={false}
-          fill="url(#colorUv)"
-          fillOpacity={1}
-          stroke={theme.colors.green[7]}
-          strokeDasharray="4 4"
-          strokeWidth={2}
-          type="bumpX"
-        />
+        <Tooltip content={<CustomTooltip valueLabel={label} />} />
         <Line
-          activeDot={{ stroke: theme.colors.green[5], strokeWidth: 1 }}
-          connectNulls={false}
+          connectNulls
+          activeDot={{ stroke: theme.colors.blue[5], strokeWidth: 1 }}
           dataKey="val"
-          dot={false}
-          stroke={theme.colors.green[7]}
-          strokeWidth={2}
+          dot={{
+            fill: theme.colors.dark[9],
+            stroke: theme.colors.blue[7],
+          }}
+          stroke={theme.colors.blue[7]}
           type="bumpX"
         />
-      </ComposedChart>
+      </LineChart>
     </ResponsiveContainer>
   )
 }