[OFA] ビューのサマリを表示する

apps/web/src/app/(appListNavigation)/app/chart/[id]/page.tsx

@@ -1,5 +1,7 @@
 import { ShowChart } from "@pageComponents/showChart";
 
-const Page = () => <ShowChart />;
+const Page = ({ params: { id } }: { params: { id: string } }) => (
+  <ShowChart appId={id} />
+);
 
 export default Page;

apps/web/src/pageComponents/showChart/components/ShowChartServer.tsx

@@ -1,16 +1,41 @@
+import { SummaryCriteria } from "@oneforall/domain/schema/summary/sumRecordsSchema";
+import { createDataArray } from "@pageComponents/showChart/components/createDataArray";
 import ShowChartClient from "@pageComponents/showChart/components/ShowChartClient";
+import { fetchQuery } from "@persistence/database/server/fetchQuery";
+import { parseToRecords } from "@v3/graphql/public/convert/parseToRecords";
+import { GetAppDocument } from "@v3/graphql/public/type";
 
-export const ShowChartServer = async () => {
-  const data = [
-    { name: "Group A", value: 400 },
-    { name: "Group B", value: 300 },
-    { name: "Group C", value: 300 },
-    { name: "Group D", value: 200 },
-    { name: "Group E", value: 278 },
-    { name: "Group F", value: 189 },
-  ];
+export const ShowChartServer = async ({ appId }: { appId: string }) => {
+  const { data } = await fetchQuery(GetAppDocument, { appId });
+  const records = parseToRecords(data?.app?.records ?? []);
+
+  const criteria: SummaryCriteria = {
+    groupingFields: {
+      "1718289203212": {
+        id: "1718289203212",
+        fieldName: "値",
+        fieldKind: "text",
+        fieldIndex: 1,
+        options: {},
+      },
+    },
+    summaryFields: {
+      "1718289203213": {
+        id: "1718289203213",
+        fieldName: "数値",
+        fieldKind: "numeric",
+        fieldIndex: 2,
+        options: {
+          thousandsSeparatorPosition: 3,
+        },
+      },
+    },
+  };
+  criteria;
+
+  const dataArray = createDataArray({ records, criteria });
 
   const colors = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
 
-  return <ShowChartClient data={data} colors={colors} />;
+  return <ShowChartClient data={dataArray} colors={colors} />;
 };

apps/web/src/pageComponents/showChart/components/createDataArray.test.ts

@@ -0,0 +1,104 @@
+import { Records } from "@oneforall/domain/schema/recordSchema";
+import { SummaryCriteria } from "@oneforall/domain/schema/summary/sumRecordsSchema";
+import { createDataArray } from "@pageComponents/showChart/components/createDataArray";
+
+describe("createDataArray", () => {
+  it("", () => {
+    const criteria: SummaryCriteria = {
+      groupingFields: {
+        f1: {
+          id: "f1",
+          fieldName: "値",
+          fieldKind: "text",
+          fieldIndex: 1,
+          options: {},
+        },
+      },
+      summaryFields: {
+        f2: {
+          id: "f2",
+          fieldName: "数値",
+          fieldKind: "numeric",
+          fieldIndex: 2,
+          options: {
+            thousandsSeparatorPosition: 3,
+          },
+        },
+      },
+    };
+
+    const records: Records = {
+      r1: {
+        recordId: "1718289218434",
+        isEditing: false,
+        columns: {
+          f1: {
+            fieldKind: "text",
+            value: "あああ",
+          },
+          f2: {
+            fieldKind: "numeric",
+            value: "100",
+          },
+        },
+      },
+      r2: {
+        recordId: "1718289227545",
+        isEditing: false,
+        columns: {
+          f1: {
+            fieldKind: "text",
+            value: "あああ",
+          },
+          f2: {
+            fieldKind: "numeric",
+            value: "200",
+          },
+        },
+      },
+      r3: {
+        recordId: "1718289236639",
+        isEditing: false,
+        columns: {
+          f1: {
+            fieldKind: "text",
+            value: "いいい",
+          },
+          f2: {
+            fieldKind: "numeric",
+            value: "200",
+          },
+        },
+      },
+      r4: {
+        recordId: "1718895572486",
+        isEditing: false,
+        columns: {
+          f1: {
+            fieldKind: "text",
+            value: "ううう",
+          },
+          f2: {
+            fieldKind: "numeric",
+            value: "500",
+          },
+        },
+      },
+    };
+
+    expect(createDataArray({ records, criteria })).toEqual([
+      {
+        name: "あああ",
+        value: 300,
+      },
+      {
+        name: "いいい",
+        value: 200,
+      },
+      {
+        name: "ううう",
+        value: 500,
+      },
+    ]);
+  });
+});

apps/web/src/pageComponents/showChart/components/createDataArray.ts

@@ -0,0 +1,18 @@
+import { sumRecords } from "@oneforall/domain/convert/summary/sumRecords";
+import { Records } from "@oneforall/domain/schema/recordSchema";
+import { SummaryCriteria } from "@oneforall/domain/schema/summary/sumRecordsSchema";
+
+export const createDataArray = ({
+  records,
+  criteria,
+}: {
+  records: Records;
+  criteria: SummaryCriteria;
+}) => {
+  return Object.values(sumRecords(records, criteria)).map((record) => {
+    const name: string = Object.values(record.columns)[0]?.value ?? "";
+    const value: number = record.sum;
+
+    return { name, value };
+  });
+};

apps/web/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "@acme/tsconfig/base.json",
   "compilerOptions": {
-    "target": "es5",
+    "target": "es2015",
+    "downlevelIteration": true,
     "lib": [
       "dom",
       "dom.iterable",

packages/domain/convert/summary/sumRecords.test.ts

@@ -0,0 +1,123 @@
+import { Records } from "../../schema/recordSchema";
+import {
+  SummaryCriteria,
+  SumRecords,
+} from "../../schema/summary/sumRecordsSchema";
+import { sumRecords } from "./sumRecords";
+
+describe("sumRecords", () => {
+  it("", () => {
+    const records: Records = {
+      r1: {
+        recordId: "r1",
+        isEditing: false,
+        columns: {
+          c1: {
+            value: "grouping1",
+            fieldKind: "text",
+          },
+          c2: {
+            value: "100",
+            fieldKind: "numeric",
+          },
+          c3: {
+            value: "r1c3",
+            fieldKind: "text",
+          },
+        },
+      },
+      r2: {
+        recordId: "r2",
+        isEditing: false,
+        columns: {
+          c1: {
+            value: "grouping1",
+            fieldKind: "text",
+          },
+          c2: {
+            value: "200",
+            fieldKind: "numeric",
+          },
+          c3: {
+            value: "r2c3",
+            fieldKind: "text",
+          },
+        },
+      },
+      r3: {
+        recordId: "r3",
+        isEditing: false,
+        columns: {
+          c1: {
+            value: "grouping2",
+            fieldKind: "text",
+          },
+          c2: {
+            value: "300",
+            fieldKind: "numeric",
+          },
+          c3: {
+            value: "r3c3",
+            fieldKind: "text",
+          },
+        },
+      },
+    };
+
+    const criteria: SummaryCriteria = {
+      groupingFields: {
+        c1: {
+          id: "c1",
+          fieldName: "c1",
+          fieldKind: "text",
+          fieldIndex: 1,
+          options: {},
+        },
+      },
+      summaryFields: {
+        c2: {
+          id: "c2",
+          fieldName: "c2",
+          fieldKind: "numeric",
+          fieldIndex: 2,
+          options: {
+            thousandsSeparatorPosition: 3,
+          },
+        },
+      },
+    };
+
+    expect(sumRecords(records, criteria)).toEqual<SumRecords>({
+      0: {
+        columns: {
+          c1: {
+            value: "grouping1",
+            fieldKind: "text",
+          },
+          c2: {
+            value: "300",
+            fieldKind: "numeric",
+          },
+        },
+        sum: 300,
+        average: 150,
+        count: 2,
+      },
+      1: {
+        columns: {
+          c1: {
+            value: "grouping2",
+            fieldKind: "text",
+          },
+          c2: {
+            value: "300",
+            fieldKind: "numeric",
+          },
+        },
+        sum: 300,
+        average: 300,
+        count: 1,
+      },
+    });
+  });
+});

packages/domain/convert/summary/sumRecords.ts

@@ -0,0 +1,68 @@
+import { Records } from "../../schema/recordSchema";
+import {
+  SummaryCriteria,
+  SumRecords,
+} from "../../schema/summary/sumRecordsSchema";
+
+export const sumRecords = (
+  records: Records,
+  criteria: SummaryCriteria,
+): SumRecords => {
+  if (
+    Object.keys(criteria.groupingFields).length < 1 ||
+    Object.keys(criteria.summaryFields).length < 1
+  ) {
+    throw new Error("groupingFields is empty");
+  }
+
+  const groupingFieldId = Object.values(criteria.groupingFields)[0]!.id;
+  const sumFieldId = Object.values(criteria.summaryFields)[0]!.id;
+
+  const uniqueGroupingValues = [
+    ...new Set(
+      Object.values(records).map((r) => r.columns[groupingFieldId]?.value),
+    ),
+  ];
+
+  const result = uniqueGroupingValues
+    .map((groupingValue) => ({
+      groupingFieldId,
+      groupingValue,
+      sumFieldId,
+    }))
+    .flatMap((field) => {
+      const motherRecords = Object.values(records).filter(
+        (record) =>
+          record.columns[field.groupingFieldId]?.value === field.groupingValue,
+      );
+
+      const sum = motherRecords.reduce(
+        (acc, record) => acc + Number(record.columns[field.sumFieldId]?.value),
+        0,
+      );
+
+      return [
+        {
+          columns: {
+            [field.groupingFieldId]: {
+              value: field.groupingValue ?? "",
+              fieldKind:
+                criteria.groupingFields[field.groupingFieldId]?.fieldKind ??
+                "text",
+            },
+            [field.sumFieldId]: {
+              value: sum.toString(),
+              fieldKind:
+                criteria.summaryFields[field.sumFieldId]?.fieldKind ??
+                "numeric",
+            },
+          },
+          sum,
+          count: motherRecords.length,
+          average: sum / motherRecords.length,
+        },
+      ];
+    });
+
+  return Object.fromEntries(result.map((res, index) => [index, res]));
+};