ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

차트 레이아웃 수정(크기 및 여백)

Browse Source
This commit is contained in:
YangJinSoo94
2025-03-12 14:46:56 +09:00
parent 42647d6ce3
commit 25566be2c6
5 changed files with 68 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/business_components/src/ui/chart/BarChart.tsx
+14 -12
View File
@@ -14,27 +14,29 @@ import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
export default function Chart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle: string}) {
return (
<Card>
<Card className="h-full">
<CardContent className="h-full">
{props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
<div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
{props.chartTitle}
</div>): null}
<CardContent>
<ChartContainer config={props.chartConfig}>
<BarChart accessibilityLayer data={props.chartData}>
<CartesianGrid vertical={false} />
<XAxis
<div className="h-[calc(100%-42px)] flex justify-center">
<ChartContainer config={props.chartConfig} className="h-full w-full">
<BarChart accessibilityLayer data={props.chartData} className="h-full">
<CartesianGrid vertical={false} />
<XAxis
dataKey="label"
tickLine={false}
tickMargin={10}
axisLine={false}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />}/>
<Bar dataKey="val" radius={10} />
</BarChart>
</ChartContainer>
</CardContent>
/>
<ChartTooltip cursor={false} content={<ChartTooltipContent indicator="dashed" />}/>
<Bar dataKey="val" radius={10} />
</BarChart>
</ChartContainer>
</div>
</CardContent>
</Card>
)
}
packages/common/business_components/src/ui/chart/DoughnutChart.tsx
-1
View File
@@ -12,7 +12,6 @@ import {
ChartTooltipContent,
type ChartConfig
} from "./lib/chart";
import type { CSSProperties } from "react";
// eslint-disable-next-line react-refresh/only-export-components
export default (props: { chartConfig: ChartConfig; chartData: never[] | undefined; chartTitle:string}) =>{
packages/common/business_components/src/ui/chart/LineBarChart.tsx
+20 -18
View File
@@ -77,28 +77,30 @@ const CustomLegend = (props: any) => {
export default function LineBarchart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string }) {
return (
<Card>
<CardContent>
<Card className="h-full">
<CardContent className="h-full">
{props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
<div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
{props.chartTitle}
</div>): null}
<ChartContainer config={props.chartConfig}>
<ComposedChart data={props.chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="label" />
{/* 왼쪽 Y축: lineVal (정상) */}
<YAxis yAxisId="left" orientation="left" />
{/* 오른쪽 Y축: barVal (위에서 아래로 반전) */}
<YAxis yAxisId="right" orientation="right" reversed />
<Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
<Legend content={CustomLegend}/>
{/* 바 차트 (오른쪽 Y축 사용, 위에서 아래로) */}
<Bar yAxisId="right" dataKey="barVal" fill="#8884d8" name="강수량(mm/일)"/>
{/* 라인 차트 (왼쪽 Y축 사용) */}
<Line yAxisId="left" type="monotone" dataKey="lineVal" stroke="orange" strokeWidth={2} dot={{r: 0}} name="BOD(mg/L)"/>
</ComposedChart>
</ChartContainer>
<div className="h-[calc(100%-42px)] flex justify-center">
<ChartContainer config={props.chartConfig} className="h-full w-full" >
<ComposedChart data={props.chartData} className="h-full ">
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="label" />
{/* 왼쪽 Y축: lineVal (정상) */}
<YAxis yAxisId="left" orientation="left" />
{/* 오른쪽 Y축: barVal (위에서 아래로 반전) */}
<YAxis yAxisId="right" orientation="right" reversed />
<Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
<Legend content={CustomLegend}/>
{/* 바 차트 (오른쪽 Y축 사용, 위에서 아래로) */}
<Bar yAxisId="right" dataKey="barVal" fill="#8884d8" name="강수량(mm/일)"/>
{/* 라인 차트 (왼쪽 Y축 사용) */}
<Line yAxisId="left" type="monotone" dataKey="lineVal" stroke="orange" strokeWidth={2} dot={{r: 0}} name="BOD(mg/L)"/>
</ComposedChart>
</ChartContainer>
</div>
</CardContent>
</Card>
)
packages/common/business_components/src/ui/chart/LineChart.tsx
+26 -31
View File
@@ -14,41 +14,36 @@ import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
export default function Linechart(props: { chartConfig: ChartConfig; chartData: any[] | undefined; chartTitle:string}) {
return (
<Card>
<Card className="h-full">
<CardContent className="h-full">
{props.chartTitle && props.chartTitle !== "" && props.chartTitle !== "undefined" ? (
<div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
{props.chartTitle}
</div>): null}
<CardContent>
<ChartContainer config={props.chartConfig}>
<LineChart
accessibilityLayer
data={props.chartData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<Line
dataKey="val"
type="linear"
strokeWidth={2}
dot={false}
/>
</LineChart>
</ChartContainer>
<div className="h-[calc(100%-42px)] flex justify-center">
<ChartContainer config={props.chartConfig} className="h-full w-full">
<LineChart data={props.chartData} className="h-full">
<CartesianGrid vertical={false} />
<XAxis
dataKey="month"
tickLine={false}
axisLine={false}
tickMargin={8}
tickFormatter={(value) => value.slice(0, 3)}
/>
<ChartTooltip
cursor={false}
content={<ChartTooltipContent hideLabel />}
/>
<Line
dataKey="val"
type="linear"
strokeWidth={2}
dot={false}
/>
</LineChart>
</ChartContainer>
</div>
</CardContent>
</Card>
)
packages/common/business_components/src/ui/chart/index.tsx
+8 -16
View File
@@ -21,31 +21,23 @@ const CHART_FORM = {
function MainChart(props: { chartForm: string; chartConfig: any; chartData: any; chartTitle:string; }) {
if( props.chartForm == CHART_FORM.BAR ){
return (
<div>
<BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
</BarChart>
</div>
<BarChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
</BarChart>
);
} else if( props.chartForm == CHART_FORM.LINE ){
return (
<div>
<LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
</LineChart>
</div>
<LineChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
</LineChart>
);
} else if( props.chartForm == CHART_FORM.DN ){
return (
<div>
<DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
</DoughnutChart>
</div>
<DoughnutChart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
</DoughnutChart>
);
} else if (props.chartForm == CHART_FORM.LINEBAR){
return (
<div className='w-100'>
<LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
</LineBarchart>
</div>
<LineBarchart chartConfig={props.chartConfig} chartData={props.chartData} chartTitle={props.chartTitle}>
</LineBarchart>
);
}
}