-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #158 from Ryo-Kgym/One-for-All-149
セレクトボックスでチャートを切り替えて表示する
- Loading branch information
Showing
15 changed files
with
1,831 additions
and
1,581 deletions.
There are no files selected for viewing
30 changes: 0 additions & 30 deletions
30
apps/web/src/app/(appListNavigation)/app/chart/[id]/ShowPieChartClient.tsx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export type ChartKind = "pieChart" | "barChart" | "lineChart" | "radarChart"; |
20 changes: 20 additions & 0 deletions
20
apps/web/src/pageComponents/showChart/components/ShowChartClient.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
51 changes: 51 additions & 0 deletions
51
apps/web/src/pageComponents/showChart/components/SwitchingCharts/ChartFactoryClient.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} />, | ||
}, | ||
}; |
34 changes: 34 additions & 0 deletions
34
apps/web/src/pageComponents/showChart/components/SwitchingCharts/SwitchingChartsClient.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> | ||
</> | ||
); | ||
}; |
1 change: 1 addition & 0 deletions
1
apps/web/src/pageComponents/showChart/components/SwitchingCharts/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { SwitchingChartsClient as SwitchingCharts } from "./SwitchingChartsClient"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { ShowChartServer as ShowChart } from "./components/ShowChartServer"; |
Oops, something went wrong.