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

Merge branch 'iipbs/wr/dev' of https://www.onasys.co.kr:3000/ONAANDALL/frontend into iipbs/wr/dev
iipbs_wr / build (push) Waiting to run
Details

Browse Source
This commit is contained in:
yschoi
2025-07-07 16:58:59 +09:00
parent b7f345fdf7 37eb11f303
commit 2a16e7151f
10 changed files with 268 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/wr/app/ruseFcltMng/prfmncSttn/pbnstPrfmncSttn/page.tsx
+86 -62
View File
@@ -68,8 +68,6 @@ export default function PbnstPrfmncSttn() {
chartData5: lineChartDataProps[];
chartData6: lineChartDataProps[];
chartData7: lineChartDataProps[];
chartData8: lineChartDataProps[];
chartData9: lineChartDataProps[];
}>();
const [outLineData, setOutLineData] = useState<{
chartData1: lineChartDataProps[];
@@ -78,6 +76,8 @@ export default function PbnstPrfmncSttn() {
chartData4: lineChartDataProps[];
chartData5: lineChartDataProps[];
chartData6: lineChartDataProps[];
chartData7: lineChartDataProps[];
chartData8: lineChartDataProps[];
}>();
type dnChartForm = { label: string, val: number, fill?: string };
@@ -228,16 +228,18 @@ export default function PbnstPrfmncSttn() {
indstUswtr += element.indstUswtr;
// 월별 합계
inUsageSum = element.wshwtr
inUsageSum =
element.wshwtr
+ element.coolUswtr
+ element.cleanUswtr
+ element.drwtUswtr
+ element.dltnUswtr
+ element.ithlRswtr
+ element.ithlEtcUswtr
+ element.cleanToilUswtr
+ element.resn;
outUsageSum = element.lndwtr
outUsageSum =
element.cleanToilUswtr
+ element.resn
+ element.lndwtr
+ element.hydUswtr
+ element.ugwtChr
+ element.farmUswtr
@@ -258,9 +260,10 @@ export default function PbnstPrfmncSttn() {
dltnUswtrData.push({ label: `${month}월`, val: element.dltnUswtr, color: "purple" });
ithlRswtrData.push({ label: `${month}월`, val: element.ithlRswtr, color: "green" });
ithlEtcUswtrData.push({ label: `${month}월`, val: element.ithlEtcUswtr, color: "blue" });
cleanToilUswtrData.push({ label: `${month}월`, val: element.cleanToilUswtr, color: "magenta" });
resnData.push({ label: `${month}월`, val: element.resn, color: "skyblue" });
lndwtrData.push({ label: `${month}월`, val: element.lndwtr, color: "red" });
hydUswtrData.push({ label: `${month}월`, val: element.hydUswtr, color: "orange" });
ugwtChrData.push({ label: `${month}월`, val: element.ugwtChr, color: "yellow" });
@@ -271,22 +274,18 @@ export default function PbnstPrfmncSttn() {
}
});
let dnTotalIn = 0;
let dnTotalOut = 0;
inUsageArr.forEach((item) => {
dnTotalIn += item
})
outUsageArr.forEach((item) => {
dnTotalOut += item
})
// 도넛차트 데이터
dnData.push({ label: "세척수", val: wshwtr, fill: "#F7CFD8" });
dnData.push({ label: "냉각수", val: coolUswtr, fill: "#F4F8D3" });
dnData.push({ label: "청소수", val: cleanUswtr, fill: "#A6D6D6" });
dnData.push({ label: "식수대", val: drwtUswtr, fill: "#8E7DBE" });
dnData.push({ label: "희석용수", val: dltnUswtr, fill: "#FF8383" });
dnData.push({ label: "중수도", val: ithlRswtr, fill: "#FFF574" });
dnData.push({ label: "기타", val: ithlEtcUswtr, fill: "#A1D6CB" });
dnData.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "#A19AD3" });
dnData.push({ label: "세척살수용수", val: resn, fill: "#B1F0F7" });
dnData.push({ label: "조경용수", val: lndwtr, fill: "#81BFDA" });
dnData.push({ label: "친수용수", val: hydUswtr, fill: "#F5F0CD" });
dnData.push({ label: "지하수충전", val: ugwtChr, fill: "#FADA7A" });
dnData.push({ label: "농업용수", val: farmUswtr, fill: "#A6AEBF" });
dnData.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "#C5D3E8" });
dnData.push({ label: "공업용수", val: indstUswtr, fill: "#D0E8C5" });
dnData.push({ label: "장내용수", val: dnTotalIn, fill: "#8DD8FF" });
dnData.push({ label: "장외용수", val: dnTotalOut, fill: "#FFF085" });
// 장내용수 도넛
dnInData.push({ label: "세척수", val: wshwtr, fill: "#F7CFD8" });
@@ -296,10 +295,10 @@ export default function PbnstPrfmncSttn() {
dnInData.push({ label: "희석용수", val: dltnUswtr, fill: "#FF8383" });
dnInData.push({ label: "중수도", val: ithlRswtr, fill: "#FFF574" });
dnInData.push({ label: "기타", val: ithlEtcUswtr, fill: "#A1D6CB" });
dnInData.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "#A19AD3" });
dnInData.push({ label: "세척살수용수", val: resn, fill: "#B1F0F7" });
// 장외용수 도넛
dnOutData.push({ label: "청소화장실용수", val: cleanToilUswtr, fill: "#A19AD3" });
dnOutData.push({ label: "세척살수용수", val: resn, fill: "#B1F0F7" });
dnOutData.push({ label: "조경용수", val: lndwtr, fill: "#81BFDA" });
dnOutData.push({ label: "친수용수", val: hydUswtr, fill: "#F5F0CD" });
dnOutData.push({ label: "지하수충전", val: ugwtChr, fill: "#FADA7A" });
@@ -307,6 +306,24 @@ export default function PbnstPrfmncSttn() {
dnOutData.push({ label: "하천등유지용수", val: rvrKeepUswtr, fill: "#C5D3E8" });
dnOutData.push({ label: "공업용수", val: indstUswtr, fill: "#D0E8C5" });
// 라인차트 데이터 월별 오름차순 정렬
const sortFn = (a: { label: string }, b: { label: string }) => parseInt(a.label) - parseInt(b.label);
wshwtrData.sort(sortFn);
coolUswtrData.sort(sortFn);
cleanUswtrData.sort(sortFn);
drwtUswtrData.sort(sortFn);
dltnUswtrData.sort(sortFn);
ithlRswtrData.sort(sortFn);
ithlEtcUswtrData.sort(sortFn);
cleanToilUswtrData.sort(sortFn);
resnData.sort(sortFn);
lndwtrData.sort(sortFn);
hydUswtrData.sort(sortFn);
ugwtChrData.sort(sortFn);
farmUswtrData.sort(sortFn);
rvrKeepUswtrData.sort(sortFn);
indstUswtrData.sort(sortFn);
// 라인차트 데이터
setInLineData({
chartData1: wshwtrData,
@@ -315,18 +332,19 @@ export default function PbnstPrfmncSttn() {
chartData4: drwtUswtrData,
chartData5: dltnUswtrData,
chartData6: ithlRswtrData,
chartData7: ithlEtcUswtrData,
chartData8: cleanToilUswtrData,
chartData9: resnData
chartData7: ithlEtcUswtrData
});
setOutLineData({
chartData1: lndwtrData,
chartData2: hydUswtrData,
chartData3: ugwtChrData,
chartData4: farmUswtrData,
chartData5: rvrKeepUswtrData,
chartData6: indstUswtrData,
chartData1: cleanToilUswtrData,
chartData2: resnData,
chartData3: lndwtrData,
chartData4: hydUswtrData,
chartData5: ugwtChrData,
chartData6: farmUswtrData,
chartData7: rvrKeepUswtrData,
chartData8: indstUswtrData,
});
barData.sort((a, b) => parseInt(a.label) - parseInt(b.label));
setBarData(barData);
setChartData(dnData);
setDnInUsage(dnInData);
@@ -408,15 +426,7 @@ export default function PbnstPrfmncSttn() {
chartData7: {
label: '기타',
color: "blue",
},
chartData8: {
label: '청소화장실용수',
color: "magenta",
},
chartData9: {
label: '세척살수용수',
color: "skyblue",
},
}
} satisfies ChartConfig;
setLnInChartConfig(newChartConfig);
}
@@ -427,26 +437,34 @@ export default function PbnstPrfmncSttn() {
if (outLineData?.chartData1) {
const newChartConfig = {
chartData1: {
label: '조경용수',
label: '청소화장실용수',
color: "red",
},
chartData2: {
label: '세척살수용수',
color: "pink",
},
chartData3: {
label: '조경용수',
color: "gray",
},
chartData4: {
label: '친수용수',
color: "orange",
},
chartData3: {
chartData5: {
label: '지하수충전',
color: "yellow",
},
chartData4: {
chartData6: {
label: '농업용수',
color: "green",
},
chartData5: {
chartData7: {
label: '하천등유지용수',
color: "blue",
},
chartData6: {
chartData8: {
label: '공업용수',
color: "purple",
},
@@ -472,7 +490,13 @@ export default function PbnstPrfmncSttn() {
}, []);
useEffect(() => {
setbdstTable(prfmncRes);
setbdstTable(prfmncRes.map((e, idx) => {
return ({
...e,
number: String(idx + 1)
})
}))
if (prfmncRes?.[0]?.pbnstRuseFcltPk) setChartId(prfmncRes[0].pbnstRuseFcltPk)
}, [prfmncRes]);
@@ -615,7 +639,7 @@ export default function PbnstPrfmncSttn() {
<h1 className="">장내·외 월별 하수재이용실적 현황</h1>
<div className="flex">
<div className="w-1/3">
<MainChart chartConfig={barChartConfig} chartData={barData} chartTitle={"월별 장내·외 용수 총 실적"} chartForm={CHART_FORM.DOUBLEBAR} />
<MainChart chartConfig={barChartConfig} chartData={barData} chartTitle={"월별 장내·외 용수 총 실적"} chartForm={CHART_FORM.DOUBLEBAR} showLegend={true} />
</div>
<div className="w-1/3">
<MainChart chartConfig={lnInChartConfig} chartData={inLineData} chartTitle={"월별 장내 용수 실적"} chartForm={CHART_FORM.LINE} />
@@ -627,25 +651,25 @@ export default function PbnstPrfmncSttn() {
<h1 className="">하수재이용실적 현황</h1>
<ListDiv className="col-span-8 pr-6 ">
{/* <ScrollArea className="h-[60vh]"> */}
{/* <div className="card-header">
{/* <div className="card-header">
<h3 className="text-2xl font-medium text-label">
{"하수처리수재이용 실적(m3) 등록결과"}
</h3>
</div> */}
<UiTable
headName={undefined}
tableData={prfData || []}
headlist={monthHeadList}
pageSize={0}
total={0}
cellClick={undefined}
onPageChange={function (page: number): void {
throw new Error("Function not implemented.");
}}>
</UiTable>
<UiTable
headName={undefined}
tableData={prfData || []}
headlist={monthHeadList}
pageSize={0}
total={0}
cellClick={undefined}
onPageChange={function (page: number): void {
throw new Error("Function not implemented.");
}}>
</UiTable>
{/* <ListDiv className="col-span-8 pr-6 ">
{/* <ListDiv className="col-span-8 pr-6 ">
<ScrollArea className="h-[60vh]">
<div className="card-header">
<h3 className="text-2xl font-medium text-label">
apps/wr/app/store/prfmncSttn/pbnstPrfmncSttn/index.tsx
+17 -17
View File
@@ -148,7 +148,7 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
let usageSum = 0;
let year = "";
const yearsData = []
res.data.forEach((item) => {
if (item.prfList.length === 0) {
const year = ""; // 연도 정보가 없으면 빈 문자열, 필요시 item에서 추출
@@ -161,26 +161,26 @@ export const pbnstPrfmncSttnActionsExport: (set: any) => pbnstPrfmncSttnActions
item.prfList.forEach((acc) => {
year = acc.ym?.substring(0, 4) ?? "";
inUsageSum =
(acc.wshwtr ?? 0) +
(acc.coolUswtr ?? 0) +
(acc.cleanUswtr ?? 0) +
(acc.drwtUswtr ?? 0) +
(acc.dltnUswtr ?? 0) +
(acc.ithlRswtr ?? 0) +
(acc.ithlEtcUswtr ?? 0) +
(acc.cleanToilUswtr ?? 0) +
(acc.resn ?? 0);
(acc.wshwtr ?? 0) + //조경용수
(acc.coolUswtr ?? 0) + //냉각수
(acc.cleanUswtr ?? 0) + //청소수
(acc.drwtUswtr ?? 0) + //식수대
(acc.dltnUswtr ?? 0) + //희석용수
(acc.ithlRswtr ?? 0) + //중수도
(acc.ithlEtcUswtr ?? 0) //기타
outUsageSum =
(acc.lndwtr ?? 0) +
(acc.hydUswtr ?? 0) +
(acc.ugwtChr ?? 0) +
(acc.farmUswtr ?? 0) +
(acc.rvrKeepUswtr ?? 0) +
(acc.indstUswtr ?? 0);
(acc.cleanToilUswtr ?? 0) + //청소화장실용수
(acc.resn ?? 0)+ //세척살수용도
(acc.lndwtr ?? 0) + //조경용수
(acc.hydUswtr ?? 0) + //친수용수
(acc.ugwtChr ?? 0) + //지하수충전
(acc.farmUswtr ?? 0) + //농업용수
(acc.rvrKeepUswtr ?? 0) + //하천등유지용수
(acc.indstUswtr ?? 0); //공업용수
const yearData = yearsData.find(
(yearItem) =>
yearItem.year === year &&
yearItem.pbnstRuseFcltPk == acc.pbnstRuseFcltPk
yearItem.pbnstRuseFcltPk == acc.pbnstRuseFcltFk
);
if (yearData) {
apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/headList.tsx
+1 -1
View File
@@ -50,7 +50,7 @@ export const pbnstOrgwtHeadListRxport: TableUpperProps[] = [
{ id: "orgwtWtritQnt", title: "원수취수량" },
{ id: "tmsYn", title: "하수처리량TMS 전후" },
{ id: "dschgFmYn", title: "하수처리장 방류 유량계 전·후​" },
{ id: "dtlPstnExpln", title: "상세위치 설명" },
{ id: "dtlPstnExpln", title: "상세위치", edit: true },
];
export const fcOrgwtsHeadListExport: TableUpperProps[] = [
{ id: "choose", title: "선택", type: "checkbox" },
apps/wr/app/store/ruseFcltMng/fcltReg/pbnstReg/index.tsx
+2
View File
@@ -124,6 +124,7 @@ if(searchTxt){
const hasuList = rainRes.data.map((item: any) => {
return {
...item,
fctCpc: Number(item.fctCpc) || 0,
ruse: item.ruse === false ? "N" : "Y",
};
});
@@ -181,6 +182,7 @@ export const pubFacActionsExport: (set: any) => pubFacActions = (set: any) => {
const pbnstHasuRes = await hasuListFetch(page, sggOrCity);
return set((state: pubFacState) => ({
...state,
pbnst: {
apps/wr/components/ui/form/fcltReg/pbnstReg/mngReg/mngRegForm.tsx
+35 -34
View File
@@ -64,7 +64,7 @@ export function PbnstMngForm({
const {
fields: fcOpersField,
append,
prepend,
remove,
} = useFieldArray({
control: form.control,
@@ -77,7 +77,7 @@ export function PbnstMngForm({
});
const plusHist = () => {
append({
prepend({
choose: false,
pbnstRuseFcltFk:
form.getValues(`items.${indexMng}.pbnstRuseFcltPk`) ?? "",
@@ -310,42 +310,43 @@ export function PbnstMngForm({
</div>
<div>
{/* <div className="h-[200px] overflow-y-auto"> */}
<div className="flex justify-between items-center mx-3 mb-3">
<span className={formTableName}>재이용시설 운영정보</span>
{formType === "sttn" ? (
<></>
) : (
<div>
<Button
type="button"
size={commonButonSize}
className="!text-xl"
onClick={plusHist}
>
추가등록
</Button>
<Button
type="button"
size={commonButonSize}
className="!text-xl !bg-red-500 !text-white ml-1"
onClick={removeSelected}
>
삭제
</Button>
</div>
)}
</div>
<div className="h-[200px] overflow-y-auto">
<div className="flex justify-between items-center mx-3 mb-3">
<span className={formTableName}>재이용시설 운영정보</span>
{formType === "sttn" ? (
<></>
) : (
<div>
<Button
type="button"
size={commonButonSize}
className="!text-xl"
onClick={plusHist}
>
추가등록
</Button>
<Button
type="button"
size={commonButonSize}
className="!text-xl !bg-red-500 !text-white ml-1"
onClick={removeSelected}
>
삭제
</Button>
</div>
)}
</div>
<RuseMngTableForm
tableData={form.getValues(`items.${indexMng}.fcOpers`) || []}
tableData={fcOpersField}
headList={
formType === "sttn"
? pbnst.pbnstMngUpHeadList.map((item) => {
return {
...item,
readonly: true,
};
})
return {
...item,
readonly: true,
};
})
: pbnst.pbnstMngUpHeadList
}
upHeadList={pbnst.pbnstMngNm}
@@ -356,7 +357,7 @@ export function PbnstMngForm({
indexMng={indexMng}
form={form}
formNm={"fcOpers"}
// ref={ref}
// ref={ref}
></RuseMngTableForm>
</div>
</div>
apps/wr/components/ui/form/fcltReg/rainReg/rainRegForm.tsx
+3 -1
View File
@@ -13,7 +13,7 @@ import {
} from "@/components/lib/func/commom";
import { DatePicker, FormUi } from "@common/business_components";
import { Form, FormField, SelectBox } from "@common/business_components/ui";
import { Button, Checkbox, Input, Label } from "@common/components/ui";
import { Button, Checkbox, Input, Label, ScrollArea } from "@common/components/ui";
import { zodResolver } from "@hookform/resolvers/zod";
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
@@ -158,6 +158,7 @@ export default function RainRegForm({
)}
</div>
</div>
<ScrollArea className="h-[37vh]">
{isModal && rainForm != undefined ? <BdstReg form={form} /> : <></>}
{isModal ? (
<h1 className="pl-3 text-xl col-span-10 mt-4">
@@ -583,6 +584,7 @@ export default function RainRegForm({
/>
</div>
</div>
</ScrollArea>
</form>
</Form>
</div>
apps/wr/components/ui/modal/fcltReg/bdstRegModal/bdstRegModal.tsx
+3 -3
View File
@@ -114,7 +114,7 @@ export function BdstReg<T extends MoType>({ moType,setIsModal,isModal }: BdstReg
>
{" "}
</SelectBox>
<Label className="w-full text-xl text-gray-600 text-right">건축물명</Label>
<Label className="w-full text-xl text-gray-600 text-right">시설명</Label>
<Input className="w-full h-full !text-xl col-span-2 col-start-8" type="text" value={searchTxt || ''} onChange={(e) => setSearchTxt(e.target.value)}/>
<Button className="" size={"sm"} onClick={()=>{searchBdst(searchTxt)}}>조회</Button>
</div>
@@ -142,7 +142,7 @@ export function BdstReg<T extends MoType>({ moType,setIsModal,isModal }: BdstReg
</div>
</ScrollArea>
<div className="border-t border-gray-300 my-4"></div>
<ScrollArea className="h-[40vh]">
{/* <ScrollArea className="h-[40vh]"> */}
<div>
{ moType === 'RNB'?
<RainRegForm rainForm={rainBdstForm as customRainBdst} isModal={isModal} setIsModal={setIsModal} />
@@ -152,7 +152,7 @@ export function BdstReg<T extends MoType>({ moType,setIsModal,isModal }: BdstReg
}
</div>
</ScrollArea>
{/* </ScrollArea> */}
</div>
</>
);
apps/wr/components/ui/table/pbnstReg/ruseMngTableForm/ruseMngTableForm.tsx
+6 -6
View File
@@ -76,20 +76,20 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
<TableBody>
{tableData.map((item, i) => (
<TableRow key={i}>
<TableRow key={item.id}>
{headList.map((head, j) => (
<TableCell
key={`${head.id}-${j}`}
className="text-center whitespace-nowrap"
onClick={() => {}}
onClick={() => { }}
>
<FormField
control={form.control}
name={
typeof indexMng === "number" &&
indexMng >= 0 &&
typeof indexBiz === "number" &&
indexBiz >= 0
indexMng >= 0 &&
typeof indexBiz === "number" &&
indexBiz >= 0
? `items.${indexMng}.fcBizs.${indexBiz}.${formNm}.${i}.${head.id}`
: typeof indexMng === "number" && indexMng >= 0
? `items.${indexMng}.${formNm}.${i}.${head.id}`
@@ -134,7 +134,7 @@ const RuseMngTableForm = React.forwardRef<any, RuseMngTableProps>(
}
}}
readOnly={head.readonly ? true : false}
// Disabled prop removed as SelectBox does not support it
// Disabled prop removed as SelectBox does not support it
></SelectBox>
) : head.type === "date" ? (
<DatePicker
packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+60 -1
View File
@@ -48,6 +48,7 @@ type LegendProps = {
};
/** 차트 기본 스타일 */
/*
const customStyles = {
legendContainer: {
display: "flex",
@@ -58,6 +59,23 @@ const customStyles = {
marginTop: "10px",
} as CSSProperties,
};
*/
/** 차트 기본 스타일 (라인차트와 동일하게) */
const customStyles = {
legendContainer: {
display: "flex",
flexWrap: "wrap", // 여러 줄로 자동 줄바꿈
justifyContent: "center",
alignItems: "center",
gap: "12px", // 아이템 간 간격
fontSize: "13px",
fontWeight: "normal",
marginTop: "16px",
marginBottom: "8px",
minHeight: "32px", // 범례 영역 높이 통일
} as CSSProperties,
};
// 커스텀 툴팁
const CustomTooltip = ({ active, payload, label }: {
@@ -82,6 +100,7 @@ const CustomTooltip = ({ active, payload, label }: {
};
// 커스텀 범례
/*
const CustomLegend = (props: LegendProps) => {
const { payload } = props;
if (!payload) return null;
@@ -97,12 +116,52 @@ const CustomLegend = (props: LegendProps) => {
</div>
);
};
*/
const CustomLegend = (props: LegendProps) => {
const { payload } = props;
if (!payload) return null;
return (
<div style={customStyles.legendContainer}>
{payload.map((entry: LegendEntry, index: number) => (
<div
key={`legend-${index}`}
className="flex items-center"
style={{
minWidth: "90px",
margin: "2px 0",
}}
>
<div
style={{
width: "14px",
height: "14px",
backgroundColor: entry.fill,
borderRadius: "3px",
marginRight: "8px",
minWidth: "14px",
minHeight: "14px",
}}
></div>
<span style={{ fontSize: "13px", whiteSpace: "nowrap" }}>
{entry.payload?.label || entry.value}
</span>
</div>
))}
</div>
);
};
export default function DoughnutChart(props: {
chartConfig: any;
chartData: ChartDataItem[] | undefined;
chartTitle: string
}) {
const legendData = props.chartData?.map(item => ({
value: item.label,
fill: props.chartConfig?.[item.label]?.fill || 'blue',
})) ?? [];
return (
<Card className="flex flex-col">
<CardContent className="flex-1 pb-0">
@@ -130,9 +189,9 @@ export default function DoughnutChart(props: {
nameKey="label"
innerRadius={60}
/>
<CustomLegend />
</PieChart>
</ChartContainer>
<CustomLegend payload={legendData} />
</div>
</CardContent>
</Card>
packages/common/business_components/src/ui/chart/LineChart.tsx
+55 -3
View File
@@ -1,11 +1,11 @@
"use client"
import type { CSSProperties } from "react";
import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from "recharts";
import type { ContentType } from "recharts/types/component/DefaultLegendContent";
import {
ChartContainer,
type ChartConfig
} from "./lib/chart";
import type { ContentType } from "recharts/types/component/DefaultLegendContent";
type LineChartProps = {
chartConfig: ChartConfig | undefined;
@@ -18,6 +18,7 @@ type LineChartProps = {
}
/** 차트 기본 스타일 */
/*
const customStyles = {
legendContainer: {
display: "flex",
@@ -28,6 +29,23 @@ const customStyles = {
marginTop: "10px",
} as CSSProperties,
};
*/
/** 차트 기본 스타일 */
const customStyles = {
legendContainer: {
display: "flex",
flexWrap: "wrap",
justifyContent: "center",
alignItems: "center",
gap: "12px",
fontSize: "13px",
fontWeight: "normal",
marginTop: "16px",
marginBottom: "8px",
minHeight: "32px",
} as CSSProperties,
};
type LegendEntry = {
value: string;
@@ -60,7 +78,7 @@ const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?:
};
// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가)
const CustomLegend = (props: LegendProps) => {
/*const CustomLegend = (props: LegendProps) => {
const { payload } = props;
if (!payload) return null;
@@ -74,6 +92,40 @@ const CustomLegend = (props: LegendProps) => {
))}
</div>
);
};*/
// 커스텀 범례 (도넛차트와 동일하게)
const CustomLegend = (props: LegendProps) => {
const { payload } = props;
if (!payload) return null;
return (
<div style={customStyles.legendContainer}>
{payload.map((entry: LegendEntry, index: number) => (
<div
key={`legend-${index}`}
className="flex items-center"
style={{
minWidth: "90px",
margin: "2px 0",
}}
>
<div
style={{
width: "14px",
height: "14px",
backgroundColor: entry.color,
borderRadius: "3px",
marginRight: "8px",
minWidth: "14px",
minHeight: "14px",
}}
></div>
<span style={{ fontSize: "13px", whiteSpace: "nowrap" }}>{entry.value}</span>
</div>
))}
</div>
);
};
type DataType = {label: string; val: string};
@@ -141,7 +193,7 @@ export default function Linechart({
>
<CartesianGrid vertical={false} />
<XAxis dataKey="label" fontSize="8px" fontWeight="bold" />
<YAxis yAxisId="left" className="text-[12px] font-bold" domain={[0, Math.ceil(lineMaxValue * 1.1)]} tickCount={6} orientation="left" label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} />
<YAxis yAxisId="left" className="text-[12px] font-bold" tickFormatter={(value) => value.toLocaleString()} tickCount={6} orientation="left" label={{ value: yFieldText, className:"text-[12px] font-bold", angle: -90, position: 'insideLeft' }} />
<Tooltip content={<CustomTooltip />} />
{showLegend && <Legend content={CustomLegend as ContentType}/>}
{Object.keys(chartData).map((key) => {