diff --git a/apps/web/src/app/(appListNavigation)/app/chart/[id]/ShowPieChartClient.tsx b/apps/web/src/app/(appListNavigation)/app/chart/[id]/ShowPieChartClient.tsx
deleted file mode 100644
index 6eb01264..00000000
--- a/apps/web/src/app/(appListNavigation)/app/chart/[id]/ShowPieChartClient.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client";
-
-import React from "react";
-import PieChart from "@app/(appListNavigation)/app/chart/[id]/PieChart";
-import { Title } from "@components/ui/v4/frame/Title";
-
-const ShowPieChartClient = ({
- data,
- colors,
-}: {
- data: { name: string; value: number }[];
- colors: string[];
-}) => {
- return (
-
- );
-};
-
-export default ShowPieChartClient;
diff --git a/apps/web/src/app/(appListNavigation)/app/chart/[id]/page.tsx b/apps/web/src/app/(appListNavigation)/app/chart/[id]/page.tsx
index 467b80c2..64e65532 100644
--- a/apps/web/src/app/(appListNavigation)/app/chart/[id]/page.tsx
+++ b/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 = () => ;
+const Page = () => ;
export default Page;
diff --git a/apps/web/src/features/chart/components/BarChart.tsx b/apps/web/src/features/chart/components/BarChart.tsx
new file mode 100644
index 00000000..b5b4742d
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default BarChart;
diff --git a/apps/web/src/features/chart/components/LineChart.tsx b/apps/web/src/features/chart/components/LineChart.tsx
new file mode 100644
index 00000000..a2a53e60
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default LineChart;
diff --git a/apps/web/src/app/(appListNavigation)/app/chart/[id]/PieChart.tsx b/apps/web/src/features/chart/components/PieChart.tsx
similarity index 83%
rename from apps/web/src/app/(appListNavigation)/app/chart/[id]/PieChart.tsx
rename to apps/web/src/features/chart/components/PieChart.tsx
index 0a4cca22..87130246 100644
--- a/apps/web/src/app/(appListNavigation)/app/chart/[id]/PieChart.tsx
+++ b/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) => (
|
))}
+
);
};
diff --git a/apps/web/src/features/chart/components/RadarChart.tsx b/apps/web/src/features/chart/components/RadarChart.tsx
new file mode 100644
index 00000000..5a187b86
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+
+ );
+};
+
+export default RadarChart;
diff --git a/apps/web/src/features/chart/types/chartKind.ts b/apps/web/src/features/chart/types/chartKind.ts
new file mode 100644
index 00000000..d1d37e4e
--- /dev/null
+++ b/apps/web/src/features/chart/types/chartKind.ts
@@ -0,0 +1 @@
+export type ChartKind = "pieChart" | "barChart" | "lineChart" | "radarChart";
diff --git a/apps/web/src/pageComponents/showChart/components/ShowChartClient.tsx b/apps/web/src/pageComponents/showChart/components/ShowChartClient.tsx
new file mode 100644
index 00000000..17127e06
--- /dev/null
+++ b/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) => {
+ return (
+
+
+
+
+ );
+};
+
+export default ShowChartClient;
diff --git a/apps/web/src/app/(appListNavigation)/app/chart/[id]/ShowPieChartServer.tsx b/apps/web/src/pageComponents/showChart/components/ShowChartServer.tsx
similarity index 60%
rename from apps/web/src/app/(appListNavigation)/app/chart/[id]/ShowPieChartServer.tsx
rename to apps/web/src/pageComponents/showChart/components/ShowChartServer.tsx
index 850f95b5..854bb3f9 100644
--- a/apps/web/src/app/(appListNavigation)/app/chart/[id]/ShowPieChartServer.tsx
+++ b/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 ;
+ return ;
};
diff --git a/apps/web/src/pageComponents/showChart/components/SwitchingCharts/ChartFactoryClient.tsx b/apps/web/src/pageComponents/showChart/components/SwitchingCharts/ChartFactoryClient.tsx
new file mode 100644
index 00000000..9982de25
--- /dev/null
+++ b/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 }
+> = {
+ pieChart: {
+ name: "円グラフ",
+ FactoryComponent: ({ data, colors }) => (
+
+ ),
+ },
+ barChart: {
+ name: "棒グラフ",
+ FactoryComponent: ({ data, colors }) => (
+
+ ),
+ },
+ lineChart: {
+ name: "曲線グラフ",
+ FactoryComponent: ({ data, colors }) => (
+
+ ),
+ },
+ radarChart: {
+ name: "レーダーチャート",
+ FactoryComponent: ({ data }) => ,
+ },
+};
diff --git a/apps/web/src/pageComponents/showChart/components/SwitchingCharts/SwitchingChartsClient.tsx b/apps/web/src/pageComponents/showChart/components/SwitchingCharts/SwitchingChartsClient.tsx
new file mode 100644
index 00000000..6222cd11
--- /dev/null
+++ b/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("pieChart");
+
+ const { FactoryComponent } = chartRecord[selectedOption];
+
+ return (
+ <>
+