KDE 차트 겹침 현상 해결하기

// 그룹 A의 x 좌표
[0, 0.1, 0.2, 0.3, ..., 10.0]

// 그룹 B의 x 좌표
[0, 0.09999, 0.19999, 0.29999, ..., 9.99999]

export const calculateKDE = (
  data: number[],
  bandwidth?: number,
  samplePoints: number = 150,
): KDEPoint[] => {
  const h = bandwidth ?? calculateBandwidth(data);

  // 각 그룹마다 독립적으로 x 범위 계산
  const minVal = Math.min(...data);
  const maxVal = Math.max(...data);
  const padding = h * 3;
  const xMin = Math.max(0, minVal - padding);
  const xMax = maxVal + padding;

  // x 좌표 생성
  const step = (xMax - xMin) / samplePoints;
  for (let i = 0; i <= samplePoints; i++) {
    const x = xMin + i * step; // 이 부분이 문제
    // ...
  }
};

// 모든 x 값의 합집합 생성
const allXValues = new Set<number>();
kdeResults.forEach(({ kdePoints }) => {
  kdePoints.forEach(point => {
    allXValues.add(point.x);
  });
});

const sortedXValues = Array.from(allXValues).sort((a, b) => a - b);

// 각 x 값에 대해 각 그룹의 density 매핑
const chartData = sortedXValues.map(x => {
  const dataPoint: Record<string, number> = { x };
  kdeResults.forEach(({ groupKey, kdePoints }) => {
    const point = kdePoints.find(p => p.x === x); // 여기가 문제
    dataPoint[groupKey] = point ? point.density : 0;
  });
  return dataPoint;
});

export const calculateKDE = (
  data: number[],
  bandwidth?: number,
  samplePoints: number = 150,
  xPoints?: number[], // 공통 x 축 배열
): KDEPoint[] => {
  if (data.length === 0) return [];

  const h = bandwidth ?? calculateBandwidth(data);
  const n = data.length;

  // xPoints가 제공된 경우 해당 포인트들에 대해서만 밀도 계산
  if (xPoints && xPoints.length > 0) {
    return xPoints.map(x => {
      let density = 0;
      for (const dataPoint of data) {
        const u = (x - dataPoint) / h;
        density += gaussianKernel(u);
      }
      density /= n * h;
      return { x, density };
    });
  }

  // xPoints가 없으면 기존 방식대로 동작
  // ...
};

// 1단계: 모든 그룹의 데이터를 수집하여 전체 범위 계산
const allDataPoints: number[] = [];
groupDataMap.forEach(dataPoints => {
  allDataPoints.push(...dataPoints);
});

const globalMin = Math.min(...allDataPoints);
const globalMax = Math.max(...allDataPoints);

// 평균 bandwidth 계산 (더 나은 padding을 위해)
const bandwidths = Array.from(groupDataMap.values()).map(data =>
  calculateBandwidth(data),
);
const avgBandwidth =
  bandwidths.reduce((sum, bw) => sum + bw, 0) / bandwidths.length;

// 2단계: 공통 x 축 생성
const padding = avgBandwidth * 3;
const xMin = Math.max(0, globalMin - padding);
const xMax = globalMax + padding;
const samplePoints = 150;
const step = (xMax - xMin) / samplePoints;

const commonXPoints: number[] = [];
for (let i = 0; i <= samplePoints; i++) {
  commonXPoints.push(xMin + i * step);
}

// 3단계: 각 그룹별로 공통 x축을 사용하여 KDE 계산
const kdeResults = Array.from(groupDataMap.entries()).map(
  ([groupKey, dataPoints], index) => {
    const kdePoints = calculateKDE(
      dataPoints,
      undefined,
      samplePoints,
      commonXPoints, // 공통 x 축 전달
    );
    const boxStats = calculateBoxPlotStats(dataPoints);
    const color = MACHINE_BAR_COLOR[index % MACHINE_BAR_COLOR.length];
    return {
      groupKey,
      kdePoints,
      color,
      boxStats,
    };
  },
);

// 4단계: Recharts용 데이터 포맷 (모든 그룹이 동일한 x 값 사용)
const chartData = commonXPoints.map(x => {
  const dataPoint: Record<string, number> = { x };
  kdeResults.forEach(({ groupKey, kdePoints }) => {
    const point = kdePoints.find(p => p.x === x);
    dataPoint[groupKey] = point ? point.density : 0;
  });
  return dataPoint;
});

const chartData = commonXPoints.map((x, index) => {
  const dataPoint: Record<string, number> = { x };
  kdeResults.forEach(({ groupKey, kdePoints }) => {
    dataPoint[groupKey] = kdePoints[index].density;
  });
  return dataPoint;
});

// 나쁜 예
if (a === b) { ... }

// 좋은 예 (허용 오차 사용)
const EPSILON = 0.0001;
if (Math.abs(a - b) < EPSILON) { ... }

// 기존 코드는 그대로 동작
const kde = calculateKDE(data);

// 새로운 기능도 사용 가능
const kde = calculateKDE(data, undefined, 150, commonXPoints);