feat: inprogress chart

src/components/Charts/InprogressChart/index.tsx

@@ -0,0 +1,44 @@
+import { ChartCard } from "@/components/Cards/ChartCard";
+import { formatNumber, formatWei } from "@/utils";
+import { buildTimeSeriesOptions } from "@/utils/charts";
+import type { EChartOption } from "echarts";
+import { FC } from "react";
+
+export type DailyAmountChartProps = {
+  days: string[];
+  data: string[] | undefined;
+  compact: boolean;
+  opts?: EChartOption<EChartOption.SeriesBar | EChartOption.SeriesLine>;
+};
+
+const InprogressChart: FC<Partial<DailyAmountChartProps>> = ({
+  days,
+  data,
+  compact = false,
+  opts = {},
+}) => {
+  const options: EChartOption<
+    EChartOption.SeriesBar | EChartOption.SeriesLine
+  > = {
+    ...buildTimeSeriesOptions({
+      dates: days,
+      axisFormatters: {
+        yAxisTooltip: (value) => formatWei(value),
+        yAxisLabel: (value) => formatWei(value, { toUnit: "ether" }),
+      },
+      yUnit: "ethereum",
+    }),
+    series: [
+      {
+        name: "Total Credits",
+        data: data,
+        type: compact ? "line" : "bar",
+        smooth: true,
+      },
+    ],
+    ...opts,
+  };
+  return <ChartCard title="Bond Inprogress" size="sm" options={options} />;
+};
+
+export default InprogressChart;

src/pages/index.tsx

@@ -18,6 +18,7 @@ import { useBoundProgress } from "@/hooks/useBoundProgress";
 import DailyAmountChart from "@/components/Charts/DailyAmountChart";
 import { useAmountPerDay } from "@/hooks/useAmoutPerDay";
 import { EventCard } from "@/components/Cards/SurfaceCards/EventCard";
+import InprogressChart from "@/components/Charts/InprogressChart";
 
 const LATEST_ITEMS_LENGTH = 5;
 const CARD_HEIGHT = "sm:h-28";
@@ -131,6 +132,13 @@ export default function Page() {
               compact
             />
           </div>
+          <div className="col-span-2 sm:col-span-4">
+            <InprogressChart
+              days={boundData?.data?.map((item) => item.date)}
+              data={boundData?.data?.map((item) => item.amount)}
+              compact={false}
+            />
+          </div>
         </div>
         <div className="grid grid-cols-1 items-stretch justify-stretch gap-6 lg:grid-cols-3">
           <Card
@@ -178,7 +186,7 @@ export default function Page() {
                 <Button
                   variant="outline"
                   label="View All Credits"
-                  onClick={() => void router.push("/")}
+                  onClick={() => void router.push("/rank")}
                 />
               </div>
             }
@@ -218,7 +226,7 @@ export default function Page() {
                 <Button
                   variant="outline"
                   label="View All Events"
-                  onClick={() => void router.push("/")}
+                  onClick={() => void router.push("/events")}
                 />
               </div>
             }