diff --git a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx index 99395267a..3dd14e5b7 100644 --- a/packages/common/business_components/src/ui/chart/DoughnutChart.tsx +++ b/packages/common/business_components/src/ui/chart/DoughnutChart.tsx @@ -6,22 +6,13 @@ import { Card, CardContent } from "./lib/card"; -import { ChartContainer, ChartTooltip } from "./lib/chart"; +import { ChartContainer, ChartTooltip, type ChartConfig } from "./lib/chart"; type ChartDataItem = { label: string; val: number; }; -type ChartConfigItem = { - label: string; - fill: string; -}; - -type ChartConfig = { - [key: string]: ChartConfigItem; -}; - type TooltipPayloadItem = { name: string; value: number; @@ -47,20 +38,6 @@ type LegendProps = { payload?: LegendEntry[]; }; -/** 차트 기본 스타일 */ -/* -const customStyles = { - legendContainer: { - display: "flex", - justifyContent: "center", - gap: "20px", - fontSize: "9px", - fontWeight: "bold", - marginTop: "10px", - } as CSSProperties, -}; -*/ - /** 차트 기본 스타일 (라인차트와 동일하게) */ const customStyles = { legendContainer: { @@ -99,25 +76,6 @@ const CustomTooltip = ({ active, payload, label }: { return null; }; -// 커스텀 범례 -/* -const CustomLegend = (props: LegendProps) => { - const { payload } = props; - if (!payload) return null; - - return ( -
- {payload.map((entry: LegendEntry, index: number) => ( -
-
- {entry.value} -
- ))} -
- ); -}; -*/ - const CustomLegend = (props: LegendProps) => { const { payload } = props; if (!payload) return null; @@ -154,14 +112,20 @@ const CustomLegend = (props: LegendProps) => { }; export default function DoughnutChart(props: { - chartConfig: any; + chartConfig: ChartConfig; chartData: ChartDataItem[] | undefined; chartTitle: string }) { const legendData = props.chartData?.map(item => ({ value: item.label, - fill: props.chartConfig?.[item.label]?.fill || 'blue', + fill: props.chartConfig?.[item.label]?.color || 'blue', + payload: { + label: item.label, + val: item.val, + fill: props.chartConfig?.[item.label]?.color || 'blue' + } })) ?? []; + return ( @@ -183,7 +147,7 @@ export default function DoughnutChart(props: { ({ ...item, - fill: props.chartConfig[item.label]?.fill || 'blue' + fill: props.chartConfig[item.label]?.color || 'blue' }))} dataKey="val" nameKey="label" diff --git a/packages/common/business_components/src/ui/chart/LineBarChart.tsx b/packages/common/business_components/src/ui/chart/LineBarChart.tsx index 8c7202104..64a7d5bce 100644 --- a/packages/common/business_components/src/ui/chart/LineBarChart.tsx +++ b/packages/common/business_components/src/ui/chart/LineBarChart.tsx @@ -128,7 +128,7 @@ export default function LineBarchart({ tickCount={6} orientation="left" domain={[0, Math.ceil(lineMaxValue * 1)]} - label={{ value: yFieldText, angle: -90, position: 'insideLeft' }} + label={{ value: yFieldText, angle: -90, position: 'insideLeft', offset: -8 }} />} {/* 오른쪽 Y축: barVal */} {yFieldText2 && , 'dir'> { defaultValue?: string; tabList: TabItem[]; - children: React.ReactNode; + children?: React.ReactNode; onValueChange?: (value: string) => void; } diff --git a/packages/common/business_components/src/ui/table/index.tsx b/packages/common/business_components/src/ui/table/index.tsx index 01bb18ba2..095092a43 100644 --- a/packages/common/business_components/src/ui/table/index.tsx +++ b/packages/common/business_components/src/ui/table/index.tsx @@ -1,11 +1,10 @@ "use client" import { Checkbox, Table, TableBody, TableCell, TableHeader, TableRow } from "@common/components"; -import { useEffect, useState } from "react"; +import { useEffect, useState, useRef } from "react"; import { HeadMakeColSpan } from "./HeadMakeColSpan"; import UiPageNations from "./uiPageNations"; -import { AlignVerticalDistributeCenterIcon, Check } from "lucide-react"; -import { boolean } from "zod"; +import { Check } from "lucide-react"; type UiTableProps = { headName: React.ReactNode | undefined; @@ -33,7 +32,8 @@ type UiHeadProps = { export function UiTable({ tableData, headlist, pageSize, total, headName, children, cellClick, onPageChange, className = '', resetPageNo = false, boldArray = [], resetSelection = false, index = -1 }: UiTableProps) { const [cur, setCur] = useState(1); const [idx, setIdx] = useState(index); - const [isCheck, seIsCheck] = useState(false); + const [headerHeight, setHeaderHeight] = useState(0); + const headerRef = useRef(null); useEffect(() => { @@ -55,6 +55,12 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr setIdx(-1); }, [tableData]); + useEffect(() => { + if (headerRef.current) { + setHeaderHeight(headerRef.current.offsetHeight-5); + } + }, [tableData, headlist]); + const handlePageChange = (page: number) => { setCur(page); onPageChange(page); @@ -75,11 +81,11 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr : <>}
- + {children ? children : } - {tableData.length > 0 ? tableData?.map((el: { [key: string]: any }, index) => ( + {tableData.length > 0 ? tableData?.map((el: Record, index) => ( {headlist .filter((item) => item.visible != false) @@ -90,7 +96,8 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr handleCellClick(index, head.id)} key={`cell-${head.id}-${index}`} > @@ -104,7 +111,7 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr handleCellClick(index, head.id)} key={`cell-${head.id}-${index}`} > @@ -130,7 +137,13 @@ export function UiTable({ tableData, headlist, pageSize, total, headName, childr ) ))} - )) : <>} + )) : ( + + item.visible != false).length} className="h-24 text-center text-gray-500"> + 조회된 결과가 없습니다. + + + )}
{total <= 0 ? <> : }