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

wr: 하수재이용실적 등록1

Browse Source
This commit is contained in:
mind-one005
2026-06-30 18:14:19 +09:00
parent ff33565513
commit 06f5a3cde0
14 changed files with 953 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/common/business_components/src/ui/chart/BarChart.tsx
+6 -6
View File
@@ -53,13 +53,13 @@ const CustomTooltip = ({
}) => {
if (active && payload && payload.length) {
return (
<div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="text-[12px] font-bold m-3">{label}</p>
<div className="w-[180px] rounded border border-border bg-accent p-2.5 text-accent-foreground shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="m-3 text-[12px] font-bold text-accent-foreground">{label}</p>
{payload.map((item, index) => (
<div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
{/* 색상 박스 추가 (범례 색상과 동일) */}
<div style={{ width: "10px", height: "10px", backgroundColor: item.color, borderRadius: "50%" }}></div>
<span className="text-[11px] font-bold">{` ${item.name} : ${fncNumberFormet(item.value)}`}</span>
<span className="text-[11px] font-bold text-accent-foreground">{` ${item.name} : ${fncNumberFormet(item.value)}`}</span>
</div>
))}
</div>
@@ -76,7 +76,7 @@ const CustomLegend = (props: any) => {
{payload.map((entry: unknown, index: number) => (
<div key={`legend-${index}`} className="flex items-center gap-2">
<div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: (entry as {color: string}).color }}></div>
<span className="text-[12px]">{(entry as {value: string}).value}</span>
<span className="text-[12px] text-card-foreground">{(entry as {value: string}).value}</span>
</div>
))}
</div>
@@ -141,7 +141,7 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
radius={5}
key={key}
barSize={graphSize}
fill={colors[idx % colors.length]}
fill={colors[idx % colors.length] || "var(--foreground)"}
/>
))
)}
@@ -151,4 +151,4 @@ export default function Chart({chartConfig=undefined, chartData=[], chartTitle='
</div>
</>
)
}
}
packages/common/business_components/src/ui/chart/DoubleBar.tsx
+6 -6
View File
@@ -44,13 +44,13 @@ const CustomTooltip = ({
}) => {
if (active && payload && payload.length) {
return (
<div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="text-[12px] font-bold m-3">{label}</p>
<div className="w-[180px] rounded border border-border bg-accent p-2.5 text-accent-foreground shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="m-3 text-[12px] font-bold text-accent-foreground">{label}</p>
{payload.map((item, index) => (
<div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
{/* 색상 박스 추가 (범례 색상과 동일) */}
<div style={{ width: "10px", height: "10px", backgroundColor: item.color, borderRadius: "50%" }}></div>
<span className="text-[11px] font-bold">{` ${item.name} : ${item.value}`}</span>
<span className="text-[11px] font-bold text-accent-foreground">{` ${item.name} : ${item.value}`}</span>
</div>
))}
</div>
@@ -67,7 +67,7 @@ const CustomLegend = (props: any) => {
{payload.map((entry: unknown, index: number) => (
<div key={`legend-${index}`} className="flex items-center gap-2">
<div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: (entry as {color: string}).color }}></div>
<span className="text-[12px]">{(entry as {value: string}).value}</span>
<span className="text-[12px] text-card-foreground">{(entry as {value: string}).value}</span>
</div>
))}
</div>
@@ -123,7 +123,7 @@ export default function DoubleBarChart({chartConfig=undefined, chartData=[], cha
key={key}
stackId="a"
barSize={graphSize}
fill={colors[idx]}
fill={colors[idx] || "var(--foreground)"}
/>
))
)}
@@ -133,4 +133,4 @@ export default function DoubleBarChart({chartConfig=undefined, chartData=[], cha
</div>
</>
)
}
}
packages/common/business_components/src/ui/chart/DoughnutChart.tsx
+5 -5
View File
@@ -69,7 +69,7 @@ const renderCustomizedLabel = ({
<text
x={x}
y={y}
fill="#333"
fill="var(--muted-foreground)"
fontSize={11}
textAnchor={x > cx ? "start" : "end"}
dominantBaseline="central"
@@ -87,12 +87,12 @@ const CustomTooltip = ({ active, payload, label }: {
}) => {
if (active && payload && payload.length) {
return (
<div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="text-[12px] font-bold m-3">{label}</p>
<div className="w-[180px] rounded border border-border bg-accent p-2.5 text-accent-foreground shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="m-3 text-[12px] font-bold text-accent-foreground">{label}</p>
{payload.map((item, index) => (
<div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
<div style={{ width: "10px", height: "10px", backgroundColor: item.payload.fill, borderRadius: "50%" }}></div>
<span className="text-[11px] font-bold">{` ${item.name} : ${item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</span>
<span className="text-[11px] font-bold text-accent-foreground">{` ${item.name} : ${item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</span>
</div>
))}
</div>
@@ -126,7 +126,7 @@ const CustomLegend = (props: LegendProps) => {
minHeight: "14px",
}}
></div>
<span style={{ fontSize: "13px", whiteSpace: "nowrap" }}>
<span className="text-card-foreground" style={{ fontSize: "13px", whiteSpace: "nowrap" }}>
{entry.payload?.label || entry.value}
</span>
</div>
packages/common/business_components/src/ui/chart/LineBarChart.tsx
+15 -13
View File
@@ -49,13 +49,13 @@ type LegendProps = {
const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: Array<{ name: string; value: number; color: string }>; label?: string }) => {
if (active && payload && payload.length) {
return (
<div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="text-[12px] font-bold m-3">{label}</p>
<div className="w-[180px] rounded border border-border bg-accent p-2.5 text-accent-foreground shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="m-3 text-[12px] font-bold text-accent-foreground">{label}</p>
{payload.map((item, index) => (
<div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
{/* 색상 박스 추가 (범례 색상과 동일) */}
<div style={{ width: "10px", height: "10px", backgroundColor: item.color, borderRadius: "50%" }}></div>
<span className="text-[11px] font-bold">{` ${item.name} : ${item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</span>
<span className="text-[11px] font-bold text-accent-foreground">{` ${item.name} : ${item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</span>
</div>
))}
</div>
@@ -74,7 +74,7 @@ const CustomLegend = (props: LegendProps) => {
{payload.map((entry: LegendEntry, index: number) => (
<div key={`legend-${index}`} className="flex items-center gap-2">
<div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: entry.color }}></div>
<span className="text-[12px]">{entry.value}</span>
<span className="text-[12px] text-card-foreground">{entry.value}</span>
</div>
))}
</div>
@@ -172,9 +172,10 @@ export default function LineBarchart({
x={x - padding} // 맨 좌측 바깥
y={y + height / 2 - 12} // 수직 중앙
textAnchor="middle"
transform={`rotate(-90, ${x - padding}, ${y + height / 2})`}
className="text-[12px] font-bold"
>
transform={`rotate(-90, ${x - padding}, ${y + height / 2})`}
className="text-[12px] font-bold"
fill="var(--muted-foreground)"
>
{fieldText}
</text>
);
@@ -184,9 +185,10 @@ export default function LineBarchart({
x={x + height / 2 } // 맨 좌측 바깥
y={y - width + padding } // 수직 중앙
textAnchor="middle"
transform={`rotate(90, ${x}, ${y})`}
className="text-[12px] font-bold"
>
transform={`rotate(90, ${x}, ${y})`}
className="text-[12px] font-bold"
fill="var(--muted-foreground)"
>
{fieldText}
</text>
);
@@ -249,7 +251,7 @@ export default function LineBarchart({
key={`bar-${key}-${index}`}
yAxisId="right"
dataKey={key}
fill={config?.color || "black"}
fill={config?.color || "var(--foreground)"}
name={String(config?.label || "Y축")}
maxBarSize={80}
/>
@@ -267,7 +269,7 @@ export default function LineBarchart({
yAxisId="left"
type="linear"
dataKey={key}
stroke={config?.color || "black"}
stroke={config?.color || "var(--foreground)"}
strokeWidth={2}
dot={{r: 0}}
name={String(config?.label || "X축")}
@@ -281,4 +283,4 @@ export default function LineBarchart({
</div>
</div>
);
}
}
packages/common/business_components/src/ui/chart/LineBarChart2.tsx
+7 -7
View File
@@ -46,13 +46,13 @@ type LegendProps = {
const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: Array<{ name: string; value: number; color: string }>; label?: string }) => {
if (active && payload && payload.length) {
return (
<div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="text-[12px] font-bold m-3">{label}</p>
<div className="w-[180px] rounded border border-border bg-accent p-2.5 text-accent-foreground shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="m-3 text-[12px] font-bold text-accent-foreground">{label}</p>
{payload.map((item, index) => (
<div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
{/* 색상 박스 추가 (범례 색상과 동일) */}
<div style={{ width: "10px", height: "10px", backgroundColor: item.color, borderRadius: "50%" }}></div>
<span className="text-[11px] font-bold">{` ${item.name} : ${item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</span>
<span className="text-[11px] font-bold text-accent-foreground">{` ${item.name} : ${item.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")}`}</span>
</div>
))}
</div>
@@ -71,7 +71,7 @@ const CustomLegend = (props: LegendProps) => {
{payload.map((entry: LegendEntry, index: number) => (
<div key={`legend-${index}`} className="flex items-center gap-2">
<div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: entry.color }}></div>
<span className="text-[12px]">{entry.value}</span>
<span className="text-[12px] text-card-foreground">{entry.value}</span>
</div>
))}
</div>
@@ -151,7 +151,7 @@ export default function LineBarchart2({
key={`bar-${key}-${index}`}
yAxisId="right"
dataKey={key}
fill={config?.color || "black"}
fill={config?.color || "var(--foreground)"}
name={String(config?.label || "Y축")}
maxBarSize={80}
/>
@@ -169,7 +169,7 @@ export default function LineBarchart2({
yAxisId="left"
type="linear"
dataKey={key}
stroke={config?.color || "black"}
stroke={config?.color || "var(--foreground)"}
strokeWidth={2}
dot={{r: 0}}
name={String(config?.label || "X축")}
@@ -183,4 +183,4 @@ export default function LineBarchart2({
</div>
</div>
);
}
}
packages/common/business_components/src/ui/chart/LineChart.tsx
+7 -5
View File
@@ -63,13 +63,13 @@ type LegendProps = {
const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: Array<{ name: string; value: number; color: string }>; label?: string }) => {
if (active && payload && payload.length) {
return (
<div className="w-[180px] rounded bg-white p-2.5 shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="text-[12px] font-bold m-3">{label}</p>
<div className="w-[180px] rounded border border-border bg-accent p-2.5 text-accent-foreground shadow-[0px_2px_10px_rgba(0,0,0,0.2)]">
<p className="m-3 text-[12px] font-bold text-accent-foreground">{label}</p>
{payload.filter(item => item.value != null && String(item.value) != 'NaN' && item.value != undefined).map((item, index) => (
<div key={index} style={{ marginTop: "10px", display: "flex", alignItems: "center", gap: "8px" }}>
{/* 색상 박스 추가 (범례 색상과 동일) */}
<div style={{ width: "10px", height: "10px", backgroundColor: item.color, borderRadius: "50%" }}></div>
<span className="text-[11px] font-bold">{` ${item.name} : ${item.value.toString().replace(',','')}`}</span>
<span className="text-[11px] font-bold text-accent-foreground">{` ${item.name} : ${item.value.toString().replace(',','')}`}</span>
</div>
))}
</div>
@@ -122,7 +122,7 @@ const CustomLegend = (props: LegendProps) => {
minHeight: "14px",
}}
></div>
<span style={{ fontSize: "13px", whiteSpace: "nowrap" }}>{entry.value}</span>
<span className="text-card-foreground" style={{ fontSize: "13px", whiteSpace: "nowrap" }}>{entry.value}</span>
</div>
))}
</div>
@@ -141,6 +141,7 @@ const CustomAxisText : React.FC<{ viewBox: any, fieldText: string, position:stri
textAnchor="middle"
transform={`rotate(-90, ${x - padding}, ${y + height / 2})`}
className="text-[12px] font-bold"
fill="var(--muted-foreground)"
>
{fieldText}
</text>
@@ -153,6 +154,7 @@ const CustomAxisText : React.FC<{ viewBox: any, fieldText: string, position:stri
textAnchor="middle"
transform={`rotate(90, ${x}, ${y})`}
className="text-[12px] font-bold"
fill="var(--muted-foreground)"
>
{fieldText}
</text>
@@ -277,4 +279,4 @@ export default function Linechart({
</div>
</div>
);
}
}