[HH] ダッシュボード #176

.gitignore

@@ -52,3 +52,4 @@ yarn-error.log*
 /packages/graphql/**/hasura-graphql.schema.json
 /packages/graphql/**/schema.json
 /packages/graphql/public/schema/graphql.config.yml
+/packages/graphql/household/schema/schema.graphql

apps/web/package.json

@@ -58,14 +58,14 @@
     "immer": "^10.0.4",
     "js-cookie": "^3.0.5",
     "mantine-datatable": "^7.11.1",
-    "next": "^14.1.4",
+    "next": "^14.2.5",
     "next-intercept-stdout": "^1.0.1",
     "react": "18.2.0",
     "react-countup": "^6.5.3",
     "react-dom": "18.2.0",
     "react-hot-toast": "^2.4.1",
     "react-split": "^2.0.14",
-    "recharts": "^2.12.7",
+    "recharts": "2.13.0-alpha.1",
     "recoil": "^0.7.7",
     "recoil-persist": "^4.2.0",
     "sass": "^1.72.0",

apps/web/src/app/_layout/NavbarSection.tsx

@@ -20,7 +20,7 @@ export const NavbarSection = ({
     <AppShell
       header={{ height: 60 }}
       navbar={{
-        width: 200,
+        width: 150,
         breakpoint: "sm",
         collapsed: { desktop: !opened, mobile: !opened },
       }}
@@ -32,15 +32,15 @@ export const NavbarSection = ({
         </Group>
       </AppShell.Header>
 
-      <AppShell.Navbar bg={"rgba(255,173,27,0.5)"}>
+      <AppShell.Navbar bg={"blue"}>
         <AppShell.Section component={ScrollArea}>
           {naviArray
             .filter(({ visible = true }) => visible)
             .map((navi, index) => (
               <Link key={`menu-${index}`} href={navi.url}>
                 <button
                   className={
-                    "my-1 w-full bg-inherit p-3 hover:font-bold max-sm:text-center"
+                    "my-1 w-full bg-inherit p-3 text-left font-bold text-white hover:bg-blue-700 hover:font-bold hover:text-white"
                   }
                   onClick={() => {
                     // widthがsm以下の場合は、メニューを閉じる

apps/web/src/app/household/_layout/HouseholdLayout.tsx

@@ -24,6 +24,10 @@ const householdNavis: Navi[] = [
     label: "戻る",
     url: "/top",
   },
+  {
+    label: "ダッシュボード",
+    url: "/household/dashboard",
+  },
   {
     label: "アカウント",
     url: "/household/account",

apps/web/src/app/household/account/page.tsx

@@ -1,4 +1,4 @@
-import { AccountListServer } from "@pageComponents/household/account/components/AccountListServer";
+import { AccountListPage } from "@pageComponents/householdAccount";
 
 const Page = ({
   searchParams,
@@ -9,7 +9,7 @@ const Page = ({
     accountId: string | undefined;
   };
 }) => (
-  <AccountListServer
+  <AccountListPage
     fromDate={
       searchParams.fromDate ? new Date(searchParams.fromDate) : undefined
     }

apps/web/src/app/household/dashboard/@balanceChart/page.tsx

@@ -0,0 +1,21 @@
+import { BalanceChartPage } from "pageComponents/householdBalanceChart";
+
+const Page = ({
+  searchParams,
+}: {
+  searchParams: {
+    fromDate: string | undefined;
+    toDate: string | undefined;
+  };
+}) => {
+  return (
+    <BalanceChartPage
+      fromDate={
+        searchParams.fromDate ? new Date(searchParams.fromDate) : undefined
+      }
+      toDate={searchParams.toDate ? new Date(searchParams.toDate) : undefined}
+    />
+  );
+};
+
+export default Page;

apps/web/src/app/household/dashboard/@detailTable/page.tsx

@@ -0,0 +1,19 @@
+import { ChartDetailPage } from "pageComponents/householdChartDetailTable";
+
+const Page = ({
+  searchParams,
+}: {
+  searchParams: {
+    watch: string; // yyyy-mm
+  };
+}) => {
+  return (
+    <ChartDetailPage
+      watchFirstDate={
+        searchParams.watch ? new Date(`${searchParams.watch}-01`) : null
+      }
+    />
+  );
+};
+
+export default Page;

apps/web/src/app/household/dashboard/layout.tsx

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+
+const Layout = ({
+  balanceChart,
+  detailTable,
+}: {
+  balanceChart: ReactNode;
+  detailTable: ReactNode;
+}) => {
+  return (
+    <div className="space-y-10">
+      <div className="h-[40vh] rounded-lg bg-white p-4 shadow-md">
+        {balanceChart}
+      </div>
+      <div className="h-[40vh] rounded-lg bg-white p-4 shadow-md">
+        {detailTable}
+      </div>
+    </div>
+  );
+};
+
+export default Layout;

apps/web/src/components/ui/v4/table/MantineDataTable.tsx

@@ -3,51 +3,56 @@
 import { ReactNode, useEffect, useState } from "react";
 import { DataTable } from "mantine-datatable";
 
-const PAGE_SIZE = 30;
-
 type DataTableRowType<H extends string> = { id: string } & Record<
   H,
-  string | number
+  string | number | boolean
 >;
 
 type ColumnProps<H extends string> = {
   accessor: H;
   title?: string;
   width?: number | string;
   textAlign?: "left" | "center" | "right";
-  render?: (record: Record<H, string | number>) => ReactNode;
+  render?: (record: Record<H, string | number | boolean>) => ReactNode;
+  hidden?: boolean;
 };
 
 type DataTableProps<H extends string> = {
   columns: ColumnProps<H>[];
   records: DataTableRowType<H>[];
   onRowClick?: (record: DataTableRowType<H>) => void;
+  height?: string;
+  recordsPerPage?: number;
 };
 
 export const MantineDataTable = <H extends string>({
   columns,
   records: defaultRecords,
   onRowClick,
+  height = "85vh",
+  recordsPerPage = 30,
 }: DataTableProps<H>) => {
   const [page, setPage] = useState(1);
-  const [records, setRecords] = useState(defaultRecords.slice(0, PAGE_SIZE));
+  const [records, setRecords] = useState(
+    defaultRecords?.slice(0, recordsPerPage),
+  );
 
   useEffect(() => {
-    const from = (page - 1) * PAGE_SIZE;
-    const to = from + PAGE_SIZE;
-    setRecords(defaultRecords.slice(from, to));
+    const from = (page - 1) * recordsPerPage;
+    const to = from + recordsPerPage;
+    setRecords(defaultRecords?.slice(from, to));
   }, [defaultRecords, page]);
 
   return (
     <DataTable
-      height={"85vh"}
+      height={height}
       withTableBorder
       withColumnBorders
       striped
       records={records}
       columns={columns}
-      totalRecords={defaultRecords.length}
-      recordsPerPage={PAGE_SIZE}
+      totalRecords={defaultRecords?.length ?? 0}
+      recordsPerPage={recordsPerPage}
       page={page}
       onPageChange={(p) => setPage(p)}
       paginationSize="md"

apps/web/src/features/householdBalanceChart/components/BalanceChart.tsx

@@ -0,0 +1,90 @@
+import { ReactNode } from "react";
+import {
+  Area,
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  ReferenceLine,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+import { CategoricalChartState } from "recharts/types/chart/types";
+
+import { TooltipContent } from "./TooltipContent";
+
+type BarChartSetting = Record<
+  string,
+  {
+    color: string;
+    group: string;
+    label: string;
+  }
+>;
+
+type AreaChartSetting = Record<
+  string,
+  {
+    color: string;
+    group: string;
+    label: string;
+  }
+>;
+
+export const BalanceChart = <T extends string>({
+  barchartSetting,
+  areaChartSetting,
+  data,
+  onClick,
+}: {
+  barchartSetting: BarChartSetting;
+  areaChartSetting: AreaChartSetting;
+  data: Record<string, Record<T, number>>;
+  onClick?: (event: CategoricalChartState) => void;
+  tooltip?: ReactNode;
+}) => {
+  return (
+    <ResponsiveContainer>
+      <ComposedChart
+        data={Object.entries(data).map(([key, value]) => ({
+          name: key,
+          ...value,
+        }))}
+        margin={{
+          top: 5,
+          right: 30,
+          left: 20,
+          bottom: 5,
+        }}
+        onClick={onClick}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip content={TooltipContent} />
+        <Legend />
+        <ReferenceLine stroke="#000" />
+
+        {Object.entries(areaChartSetting).map(([key, { color, group }]) => (
+          <Area
+            key={key}
+            type="monotone"
+            dataKey={key}
+            fill={color}
+            stroke={color}
+            stackId={group}
+          />
+        ))}
+
+        {Object.entries<{
+          color: string;
+          group: string;
+        }>(barchartSetting).map(([key, { color, group }]) => (
+          <Bar key={key} dataKey={key} fill={color} stackId={group} />
+        ))}
+      </ComposedChart>
+    </ResponsiveContainer>
+  );
+};

apps/web/src/features/householdBalanceChart/components/BalanceChartContainer.tsx

@@ -0,0 +1,30 @@
+import { FC } from "react";
+import { BalanceChart } from "@features/householdBalanceChart/components/BalanceChart";
+import { useNavigation } from "@routing/client/useNavigation";
+
+type Props = Pick<
+  Parameters<typeof BalanceChart>[0],
+  "data" | "barchartSetting" | "areaChartSetting"
+>;
+
+export const BalanceChartContainer: FC<Props> = ({
+  data,
+  barchartSetting,
+  areaChartSetting,
+}) => {
+  const { prependParamAndPush } = useNavigation();
+
+  return (
+    <BalanceChart
+      data={data}
+      barchartSetting={barchartSetting}
+      areaChartSetting={areaChartSetting}
+      onClick={(event) => {
+        if (!event.activeLabel) {
+          return;
+        }
+        prependParamAndPush({ key: "watch", value: event.activeLabel });
+      }}
+    />
+  );
+};

apps/web/src/features/householdBalanceChart/components/TooltipContent.tsx

@@ -0,0 +1,29 @@
+import {
+  NameType,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent";
+import { TooltipProps } from "recharts/types/component/Tooltip";
+
+export const TooltipContent = ({
+  label,
+  payload,
+}: TooltipProps<ValueType, NameType>) => (
+  <div className={"space-y-3 bg-white p-3"}>
+    <span className={"font-bold"}>{label}</span>
+    {payload?.map((p) => (
+      <span
+        key={p.name}
+        className={`flex items-center justify-between space-x-5`}
+      >
+        <span>{p.name}</span>
+        <span
+          style={{
+            color: p.color,
+          }}
+        >
+          {p.value?.toLocaleString()}
+        </span>
+      </span>
+    ))}
+  </div>
+);