Update contributor and maintainer column chart (#700)

onlydustxyz · Nov 25, 2024 · 3771e5c · 3771e5c
1 parent 728c21e
commit 3771e5c
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 91 deletions.
diff --git a/...s/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.en.json b/...s/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.en.json
@@ -1,8 +1,8 @@
 {
   "title": "Rewards Charts",
   "legends": {
-    "rewarded": "Rewarded",
-    "paid": "Paid"
+    "available": "Available",
+    "rewarded": "Rewarded"
   },
   "emptyState": {
     "title": "No data available",

diff --git a/...[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.hooks.tsx b/...[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.hooks.tsx
@@ -12,12 +12,11 @@ export function useFinancialColumnChart(stats?: GetBiStatsFinancialsModel["stats
   };
 
   const rewardedSeries = calculateSeries("totalRewarded");
-  // TODO @Mehdi update with totalPaid once backend ready
-  const paidSeries = calculateSeries("totalGranted");
+  const allocatedSeries = calculateSeries("totalAllocated");
 
   return {
     categories,
     rewardedSeries,
-    paidSeries,
+    allocatedSeries,
   };
 }
diff --git a/...jects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.tsx b/...jects/[projectSlug]/_features/financial/financial-column-chart/financial-column-chart.tsx
@@ -44,13 +44,13 @@ export function FinancialColumnChart() {
 
   const { stats } = data ?? {};
 
-  const { categories, rewardedSeries, paidSeries } = useFinancialColumnChart(stats);
+  const { categories, rewardedSeries, allocatedSeries } = useFinancialColumnChart(stats);
 
   const { options } = useColumnChartOptions({
     categories,
     series: [
+      { name: t("manageProjects:financialColumnChart.legends.available"), data: allocatedSeries },
       { name: t("manageProjects:financialColumnChart.legends.rewarded"), data: rewardedSeries },
-      { name: t("manageProjects:financialColumnChart.legends.paid"), data: paidSeries },
     ],
     legend: { enabled: false },
     tooltip: {
@@ -67,7 +67,7 @@ export function FinancialColumnChart() {
                 </div>`;
       },
     },
-    height: 120,
+    height: 100,
   });
 
   if (isLoading) {
@@ -80,7 +80,7 @@ export function FinancialColumnChart() {
     );
   }
 
-  if (!paidSeries.length && !rewardedSeries.length) {
+  if (!allocatedSeries.length && !rewardedSeries.length) {
     return (
       <EmptyState
         titleTranslate={{ token: "manageProjects:financialColumnChart.emptyState.title" }}

diff --git a/app/my-dashboard/_features/financial/budget-available-cards/budget-available-cards.tsx b/app/my-dashboard/_features/financial/budget-available-cards/budget-available-cards.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { FinancialColumnChart } from "@/app/my-dashboard/_features/financial/financial-column-chart/financial-column-chart";
 
 import { BiReactQueryAdapter } from "@/core/application/react-query-adapter/bi";
 import { DetailedTotalMoneyTotalPerCurrency } from "@/core/kernel/money/money.types";
@@ -25,37 +25,6 @@ export function BudgetAvailableCards() {
     },
   });
 
-  const rewardPendingAmount = useMemo(() => {
-    if (!data) {
-      return {
-        totalUsdEquivalent: 0,
-        totalPerCurrency: [],
-      };
-    }
-
-    return {
-      totalUsdEquivalent: data.totalRewarded.totalUsdEquivalent - data.totalPaid.totalUsdEquivalent,
-      totalPerCurrency: data.totalRewarded.totalPerCurrency
-        ?.map(rewarded => {
-          const paid = data.totalPaid.totalPerCurrency?.find(p => p.currency.id === rewarded.currency.id) || {
-            usdEquivalent: 0,
-          };
-
-          const pendingUsdEquivalent = (rewarded.usdEquivalent || 0) - (paid.usdEquivalent || 0);
-
-          if (pendingUsdEquivalent !== 0) {
-            return {
-              ...rewarded,
-              usdEquivalent: pendingUsdEquivalent,
-            };
-          }
-
-          return null;
-        })
-        .filter(item => item !== null),
-    };
-  }, [data]);
-
   if (isLoading) {
     return (
       <div className="grid min-h-[150px] grid-cols-1 gap-lg tablet:grid-cols-2 desktop:grid-cols-3">
@@ -91,19 +60,13 @@ export function BudgetAvailableCards() {
         onClick={() => openPanel("rewardedAmount", data.totalRewarded)}
       />
 
-      <FinancialCardItem
-        title="myDashboard:budgetAvailable.pending.title"
-        total={rewardPendingAmount}
-        color="grey"
-        onClick={() => openPanel("rewardPendingAmount", rewardPendingAmount)}
-      />
-
       <FinancialCardItem
         title="myDashboard:budgetAvailable.paid.title"
         total={data.totalPaid}
         color="grey"
         onClick={() => openPanel("rewardPaid", data.totalPaid)}
       />
+      <FinancialColumnChart />
     </div>
   );
 }
diff --git a/app/my-dashboard/_features/financial/budget-available-cards/budget-available.en.json b/app/my-dashboard/_features/financial/budget-available-cards/budget-available.en.json
@@ -2,9 +2,6 @@
   "rewarded": {
     "title": "Rewarded amount"
   },
-  "pending": {
-    "title": "Pending amount"
-  },
   "paid": {
     "title": "Paid"
   }

diff --git a/app/my-dashboard/_features/financial/financial-column-chart/financial-column-chart.tsx b/app/my-dashboard/_features/financial/financial-column-chart/financial-column-chart.tsx
@@ -1,5 +1,4 @@
-import { Calendar } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import { useFinancialColumnChart } from "@/app/my-dashboard/_features/financial/financial-column-chart/financial-column-chart.hooks";
@@ -8,38 +7,31 @@ import { BiReactQueryAdapter } from "@/core/application/react-query-adapter/bi";
 import { bootstrap } from "@/core/bootstrap";
 import { DateRangeType } from "@/core/kernel/date/date-facade-port";
 
-import { Button } from "@/design-system/atoms/button/variants/button-default";
-import { ChartLegend } from "@/design-system/atoms/chart-legend";
 import { Paper } from "@/design-system/atoms/paper";
 import { Skeleton } from "@/design-system/atoms/skeleton";
-import { Menu } from "@/design-system/molecules/menu";
+import { Typo } from "@/design-system/atoms/typo";
 
 import { useColumnChartOptions } from "@/shared/components/charts/highcharts/column-chart/column-chart.hooks";
 import { HighchartsDefault } from "@/shared/components/charts/highcharts/highcharts-default";
 import { EmptyState } from "@/shared/components/empty-state/empty-state";
 import { useAuthUser } from "@/shared/hooks/auth/use-auth-user";
-import { useRangeSelectOptions } from "@/shared/hooks/select/use-range-select-options";
-import { Translate } from "@/shared/translation/components/translate/translate";
 
 export function FinancialColumnChart() {
   const { t } = useTranslation();
 
-  const [rangeType, setRangeType] = useState<DateRangeType>(DateRangeType.LAST_YEAR);
-
-  const rangeMenu = useRangeSelectOptions();
   const { githubUserId } = useAuthUser();
 
   const dateKernelPort = bootstrap.getDateKernelPort();
   const moneyKernelPort = bootstrap.getMoneyKernelPort();
 
   const { fromDate, toDate } = useMemo(() => {
-    const { from, to } = dateKernelPort.getRangeOfDates(rangeType);
+    const { from, to } = dateKernelPort.getRangeOfDates(DateRangeType.LAST_YEAR);
 
     return {
       fromDate: from ? dateKernelPort.format(from, "yyyy-MM-dd") : undefined,
       toDate: to ? dateKernelPort.format(to, "yyyy-MM-dd") : undefined,
     };
-  }, [rangeType, dateKernelPort]);
+  }, [dateKernelPort]);
 
   const { data, isLoading } = BiReactQueryAdapter.client.useGetBiStatsFinancials({
     queryParams: {
@@ -71,20 +63,21 @@ export function FinancialColumnChart() {
           currency: moneyKernelPort.getCurrency("USD"),
         });
 
-        return `<div><span class='text-typography-secondary'>${this.series.name}</span> <span class='font-medium'>${amount} ${code}</span</div>`;
+        return `<div class='flex gap-sm items-center'>
+                  <div class='rounded h-3 min-h-3 w-3 min-w-3' style='background-color: ${this.color}'></div> 
+                  <div class='text-typography-secondary'>${this.series.name}</div> 
+                  <div class='font-medium'>${amount} ${code}</div>
+                </div>`;
       },
     },
+    height: 100,
   });
 
-  function onChangeRangeType(value: string) {
-    setRangeType(value as DateRangeType);
-  }
-
   if (isLoading) {
     return (
       <Skeleton
         classNames={{
-          base: "w-full min-h-[300px]",
+          base: "w-full max-h-[150px]",
         }}
       />
     );
@@ -100,28 +93,9 @@ export function FinancialColumnChart() {
   }
 
   return (
-    <div className="flex min-h-[300px] flex-col gap-4">
+    <Paper background={"secondary"} border={"none"} as={"div"} classNames={{ base: "h-full max-h-[150px] w-full" }}>
+      <Typo size="sm" translate={{ token: "manageProjects:financialColumnChart.title" }} color={"secondary"} />
       <HighchartsDefault options={options} />
-      <div className="flex items-center gap-4">
-        <Paper
-          size="lg"
-          classNames={{ base: "grid tablet:grid-cols-4 tablet:items-center gap-3 flex-1" }}
-          background="secondary"
-        >
-          <ChartLegend color="primary">
-            <Translate token="myDashboard:financialColumnChart.legends.rewarded" />
-          </ChartLegend>
-
-          <ChartLegend color="secondary">
-            <Translate token="myDashboard:financialColumnChart.legends.paid" />
-          </ChartLegend>
-        </Paper>
-        <Menu items={rangeMenu} selectedIds={[rangeType]} onAction={onChangeRangeType} isPopOver placement="bottom-end">
-          <Button variant="secondary" size="md" startIcon={{ component: Calendar }}>
-            <Translate token={`common:dateRangeType.${rangeType}`} />
-          </Button>
-        </Menu>
-      </div>
-    </div>
+    </Paper>
   );
 }