Merge pull request #158 from Ryo-Kgym/One-for-All-149

セレクトボックスでチャートを切り替えて表示する

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

@@ -1,5 +1,5 @@
-import { ShowPieChartServer } from "@app/(appListNavigation)/app/chart/[id]/ShowPieChartServer";
+import { ShowChart } from "@pageComponents/showChart";
 
-const Page = () => <ShowPieChartServer />;
+const Page = () => <ShowChart />;
 
 export default Page;

apps/web/src/features/chart/components/BarChart.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import React from "react";
+import {
+  Bar,
+  CartesianGrid,
+  Legend,
+  BarChart as ReChartBarChart,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+const BarChart = ({
+  data,
+  colors,
+  width,
+  height,
+}: {
+  data: { name: string; value: number }[];
+  colors: string[];
+  width: string;
+  height: number;
+}) => {
+  return (
+    <ResponsiveContainer width={width} height={height}>
+      <ReChartBarChart
+        data={data}
+        margin={{ top: 30, right: 15, left: 15, bottom: 5 }}
+      >
+        <CartesianGrid strokeDasharray="2 2" stroke={colors[0]} />
+        <XAxis dataKey="name" />
+        <YAxis />
+        <Tooltip />
+        <Legend />
+        <Bar
+          dataKey="value"
+          barSize={20}
+          stroke="rgba(34, 80, 162, 0.2)"
+          fill={colors[1]}
+        />
+      </ReChartBarChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default BarChart;

apps/web/src/features/chart/components/LineChart.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  CartesianGrid,
+  Legend,
+  Line,
+  LineChart as ReChartLineChart,
+  Tooltip,
+  XAxis,
+  YAxis,
+} from "recharts";
+
+const LineChart = ({
+  data,
+  colors,
+  width,
+  height,
+}: {
+  data: { name: string; value: number }[];
+  colors: string[];
+  width: number;
+  height: number;
+}) => {
+  return (
+    <ReChartLineChart
+      data={data}
+      width={width}
+      height={height}
+      margin={{ top: 30, right: 15, left: 15, bottom: 5 }}
+    >
+      <CartesianGrid strokeDasharray="3 3" />
+      <XAxis dataKey="name" />
+      <YAxis />
+      <Tooltip />
+      <Legend />
+      <Line type="monotone" dataKey="value" stroke={colors[3]} />
+    </ReChartLineChart>
+  );
+};
+
+export default LineChart;

apps/web/src/app/(appListNavigation)/app/chart/[id]/PieChart.tsx → apps/web/src/features/chart/components/PieChart.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { Cell, Pie, PieChart as ReChartPieChart } from "recharts";
+import { Cell, Pie, PieChart as ReChartPieChart, Tooltip } from "recharts";
 
 const PieChart = ({
   data,
@@ -22,15 +22,17 @@ const PieChart = ({
         data={data}
         cx={200}
         cy={200}
-        labelLine={false}
+        labelLine={true}
         outerRadius={outerRadius}
         fill="#8884d8"
         dataKey="value"
+        label
       >
         {data.map((entry, index) => (
           <Cell key={`cell - ${index}`} fill={colors[index % colors.length]} />
         ))}
       </Pie>
+      <Tooltip />
     </ReChartPieChart>
   );
 };

apps/web/src/features/chart/components/RadarChart.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import {
+  PolarAngleAxis,
+  PolarGrid,
+  PolarRadiusAxis,
+  Radar,
+  RadarChart as ReChartRadarChart,
+  ResponsiveContainer,
+} from "recharts";
+
+const RadarChart = ({ data }: { data: { name: string; value: number }[] }) => {
+  return (
+    <ResponsiveContainer width={500} height={500}>
+      <ReChartRadarChart cx={250} cy={250} outerRadius={150} data={data}>
+        <PolarGrid />
+        <PolarAngleAxis dataKey="name" />
+        <PolarRadiusAxis />
+        <Radar
+          name="test"
+          dataKey="value"
+          stroke="#8884d8"
+          fill="#8884d8"
+          fillOpacity={0.6}
+        />
+      </ReChartRadarChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default RadarChart;

apps/web/src/features/chart/types/chartKind.ts

@@ -0,0 +1 @@
+export type ChartKind = "pieChart" | "barChart" | "lineChart" | "radarChart";

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

@@ -0,0 +1,20 @@
+"use client";
+
+import React, { ComponentProps } from "react";
+import { Title } from "@components/ui/v4/frame/Title";
+
+import { SwitchingCharts } from "./SwitchingCharts";
+
+const ShowChartClient = ({
+  data,
+  colors,
+}: ComponentProps<typeof SwitchingCharts>) => {
+  return (
+    <div className={"space-y-4"}>
+      <Title title={"グラフ表示"} />
+      <SwitchingCharts data={data} colors={colors} />
+    </div>
+  );
+};
+
+export default ShowChartClient;

apps/web/src/app/(appListNavigation)/app/chart/[id]/ShowPieChartServer.tsx → apps/web/src/pageComponents/showChart/components/ShowChartServer.tsx

@@ -1,6 +1,6 @@
-import ShowPieChartClient from "@app/(appListNavigation)/app/chart/[id]/ShowPieChartClient";
+import ShowChartClient from "@pageComponents/showChart/components/ShowChartClient";
 
-export const ShowPieChartServer = async () => {
+export const ShowChartServer = async () => {
   const data = [
     { name: "Group A", value: 400 },
     { name: "Group B", value: 300 },
@@ -12,5 +12,5 @@ export const ShowPieChartServer = async () => {
 
   const colors = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
 
-  return <ShowPieChartClient data={data} colors={colors} />;
+  return <ShowChartClient data={data} colors={colors} />;
 };

apps/web/src/pageComponents/showChart/components/SwitchingCharts/ChartFactoryClient.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from "react";
+import BarChart from "@features/chart/components/BarChart";
+import LineChart from "@features/chart/components/LineChart";
+import PieChart from "@features/chart/components/PieChart";
+import RadarChart from "@features/chart/components/RadarChart";
+import { ChartKind } from "@features/chart/types/chartKind";
+
+/**
+ * @package
+ */
+export type FactoryComponentProps = {
+  data: { name: string; value: number }[];
+  colors: string[];
+};
+
+/**
+ * @package
+ */
+export const chartRecord: Record<
+  ChartKind,
+  { name: string; FactoryComponent: FC<FactoryComponentProps> }
+> = {
+  pieChart: {
+    name: "円グラフ",
+    FactoryComponent: ({ data, colors }) => (
+      <PieChart
+        data={data}
+        colors={colors}
+        outerRadius={150}
+        width={400}
+        height={400}
+      />
+    ),
+  },
+  barChart: {
+    name: "棒グラフ",
+    FactoryComponent: ({ data, colors }) => (
+      <BarChart data={data} colors={colors} width={"30%"} height={400} />
+    ),
+  },
+  lineChart: {
+    name: "曲線グラフ",
+    FactoryComponent: ({ data, colors }) => (
+      <LineChart data={data} colors={colors} width={600} height={400} />
+    ),
+  },
+  radarChart: {
+    name: "レーダーチャート",
+    FactoryComponent: ({ data }) => <RadarChart data={data} />,
+  },
+};

apps/web/src/pageComponents/showChart/components/SwitchingCharts/SwitchingChartsClient.tsx

@@ -0,0 +1,34 @@
+import React, { useState } from "react";
+import { Select } from "@components/ui/v4/select";
+import { ChartKind } from "@features/chart/types/chartKind";
+
+import { chartRecord, FactoryComponentProps } from "./ChartFactoryClient";
+
+/**
+ * @package
+ */
+export const SwitchingChartsClient = ({
+  data,
+  colors,
+}: FactoryComponentProps) => {
+  const [selectedOption, setSelectedOption] = useState<ChartKind>("pieChart");
+
+  const { FactoryComponent } = chartRecord[selectedOption];
+
+  return (
+    <>
+      <Select
+        data={Object.entries(chartRecord).map(([charKind, value]) => ({
+          value: charKind as ChartKind,
+          label: value.name,
+        }))}
+        label={"表示したいグラフ"}
+        value={selectedOption}
+        setValue={setSelectedOption}
+      />
+      <div>
+        <FactoryComponent data={data} colors={colors} />
+      </div>
+    </>
+  );
+};

apps/web/src/pageComponents/showChart/components/SwitchingCharts/index.ts

@@ -0,0 +1 @@
+export { SwitchingChartsClient as SwitchingCharts } from "./SwitchingChartsClient";

apps/web/src/pageComponents/showChart/index.ts

@@ -0,0 +1 @@
+export { ShowChartServer as ShowChart } from "./components/ShowChartServer";