frontend/packages/common/business_components/src/ui/chart/LineBarChart.tsx

"use client"
import type { CSSProperties } from "react";
import { Bar, CartesianGrid, ComposedChart, Legend, Line, Tooltip, XAxis, YAxis } from "recharts";
import {
  ChartContainer,
  type ChartConfig
} from "./lib/chart";
import type { ContentType } from "recharts/types/component/DefaultLegendContent";

// 툴크 커스텀 css
/** 차트 기본 스타일 */
const customStyles = {
  legendContainer: {
    display: "flex",
    justifyContent: "center",
    gap: "20px",
    fontSize: "9px",
    fontWeight : "bold",
    marginTop: "10px",
  } as CSSProperties,
};

type LineBarChartProps = {
  chartConfig: ChartConfig | undefined;
  chartData: any[] | undefined;
  chartTitle: string;
  chartClassName?: string;
  graphSize?: number;
  yFieldText?: string | undefined;
  yFieldText2?: string | undefined;
  showLegend?: boolean;
}

type LegendEntry = {
  value: string;
  color: string;
  type?: string;
  payload?: unknown;
};

type LegendProps = {
  payload?: LegendEntry[];
};

// 커스텀 툴팁
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>
        {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>
          </div>
        ))}
      </div>
    );
  }
  return null;
};

// 커스텀 범례 (글씨 크기 키우기 + 스타일 추가)
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 gap-2">
          <div className="w-[14px] h-[14px] ml-10" style={{ backgroundColor: entry.color }}></div>
          <span className="text-[12px]">{entry.value}</span>
        </div>
      ))}
    </div>
  );
};

export default function LineBarchart({
  chartConfig,
  chartData,
  chartTitle,
  chartClassName = 'w-full h-full',
  graphSize = 40,
  yFieldText,
  yFieldText2,
  showLegend = true
}: LineBarChartProps) {
  if (!chartData || chartData.length === 0) {
    return <div>데이터가 없습니다.</div>;
  }

  const barConfig = chartConfig?.barVal;
  const lineConfig = chartConfig?.lineVal;

  // 데이터의 최대값 계산
  const getMaxValue = (data: any[], keyPrefix: string) => {
    return Math.max(...data.map(item => 
      Object.keys(item)
        .filter(key => key.includes(keyPrefix))
        .map(key => item[key])
    ).flat());
  };

  const lineMaxValue = getMaxValue(chartData, 'lineVal');
  const barMaxValue = getMaxValue(chartData, 'barVal');

  return (
    <div className={chartClassName}>
      {chartTitle && chartTitle !== "" && chartTitle !== "undefined" ? (
        <div style={{ textAlign: "left", fontSize: "13px", fontWeight: "bold", marginTop:"13px", marginBottom: "10px" }}>
          {chartTitle}
        </div>
      ) : null}
      <div className="h-[calc(100%-42px)] flex justify-center">
        <ChartContainer config={chartConfig ?? {}} className="h-full w-full">
          <ComposedChart 
            data={chartData} 
            height={graphSize * 7.5}
            width={graphSize * 12.5}
            margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
          >
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis dataKey="label" fontSize="8px" fontWeight="bold"/>
            {/* 왼쪽 Y축: lineVal */}
            {yFieldText && <YAxis 
              yAxisId="left" 
              className="text-[12px] font-bold" 
              tickCount={6}
              orientation="left" 
              domain={[0, Math.ceil(lineMaxValue * 1.1)]}
              label={{ value: yFieldText, angle: -90, position: 'insideLeft' }} 
            />}
            {/* 오른쪽 Y축: barVal */}
            {yFieldText2 && <YAxis 
              yAxisId="right" 
              className="text-[12px] font-bold" 
              tickCount={6} 
              orientation="right" 
              domain={[0, Math.ceil(barMaxValue * 1.1)]}
              label={{ value: yFieldText2, angle: -90, position: 'insideRight' }} 
              reversed={true} 
            />}
            <Tooltip content={<CustomTooltip active={undefined} payload={undefined} label={undefined} />} />
            {showLegend && <Legend content={CustomLegend as ContentType}/>}
            {/* 바 차트 (오른쪽 Y축 사용) */}
            {Object.keys(chartData[0]).map((key, index) => {
              const config = chartConfig?.[key];
              if(key.includes("barVal")) {
                return (
                  <Bar 
                    key={`bar-${key}-${index}`}
                    yAxisId="right" 
                    dataKey={key}
                    fill={config?.color || "black"}
                    name={String(config?.label || "Y축")}
                    maxBarSize={80}
                  />
                );
              }
              return null;
            })}
            {/* 라인 차트 (왼쪽 Y축 사용) */}
            {Object.keys(chartData[0]).map((key, index) => {
              const config = chartConfig?.[key];
              if(key.includes("lineVal")) {
                return (
                  <Line
                    key={`line-${key}-${index}`}
                    yAxisId="left"
                    type="linear" 
                    dataKey={key} 
                    stroke={config?.color || "black"} 
                    strokeWidth={2} 
                    dot={{r: 0}} 
                    name={String(config?.label || "X축")}
                  />
                );
              }
              return null;
            })}
          </ComposedChart>
        </ChartContainer>
      </div>
    </div>
  );
}