차트 수정 반영
This commit is contained in:
@@ -346,34 +346,32 @@ export function NormalDistributionChart({
|
|||||||
|
|
||||||
// 히스토그램 데이터 생성 (내 개체 중심, 정규분포 곡선)
|
// 히스토그램 데이터 생성 (내 개체 중심, 정규분포 곡선)
|
||||||
const histogramData = useMemo(() => {
|
const histogramData = useMemo(() => {
|
||||||
// X축 범위에 맞게 표준편차 조정 (범위의 약 1/3)
|
// X축 범위에 맞게 표준편차 조정 (범위의 약 1/4)
|
||||||
const range = xAxisConfig.max - xAxisConfig.min
|
const range = xAxisConfig.max - xAxisConfig.min
|
||||||
const std = range / 4 // 범위에 비례한 표준편차
|
const std = range / 4
|
||||||
|
|
||||||
// 정규분포 PDF 계산 함수
|
// 정규분포 PDF 계산 함수 (0~1 범위로 정규화)
|
||||||
const normalPDF = (x: number, mean: number = 0) => {
|
const normalPDF = (x: number, mean: number = 0) => {
|
||||||
const coefficient = 1 / (std * Math.sqrt(2 * Math.PI))
|
|
||||||
const exponent = -Math.pow(x - mean, 2) / (2 * Math.pow(std, 2))
|
const exponent = -Math.pow(x - mean, 2) / (2 * Math.pow(std, 2))
|
||||||
return coefficient * Math.exp(exponent) * 100 // % 단위로 스케일
|
return Math.exp(exponent) // 0~1 범위
|
||||||
}
|
}
|
||||||
|
|
||||||
const bins = []
|
const bins = []
|
||||||
const step = 0.05
|
const stepSize = range / 100 // 100개의 점으로 부드러운 곡선
|
||||||
for (let x = xAxisConfig.min; x <= xAxisConfig.max; x += step) {
|
for (let x = xAxisConfig.min; x <= xAxisConfig.max; x += stepSize) {
|
||||||
|
const pdfValue = normalPDF(x) * 40 // 최대 40%로 스케일링
|
||||||
bins.push({
|
bins.push({
|
||||||
midPoint: x,
|
midPoint: x,
|
||||||
regionPercent: normalPDF(x),
|
regionPercent: pdfValue,
|
||||||
percent: normalPDF(x)
|
percent: pdfValue
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return bins
|
return bins
|
||||||
}, [xAxisConfig])
|
}, [xAxisConfig])
|
||||||
|
|
||||||
// 최대 % (Y축 범위용)
|
// 최대 % (Y축 범위용) - 항상 40으로 고정
|
||||||
const maxPercent = useMemo(() => {
|
const maxPercent = 40
|
||||||
return Math.max(...histogramData.map(d => d.regionPercent))
|
|
||||||
}, [histogramData])
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -716,7 +714,8 @@ export function NormalDistributionChart({
|
|||||||
axisLine={{ stroke: '#cbd5e1', strokeWidth: 1 }}
|
axisLine={{ stroke: '#cbd5e1', strokeWidth: 1 }}
|
||||||
tickLine={false}
|
tickLine={false}
|
||||||
tick={{ fontSize: isMobileView ? 10 : 11, fill: '#64748b' }}
|
tick={{ fontSize: isMobileView ? 10 : 11, fill: '#64748b' }}
|
||||||
width={isMobileView ? 30 : 40}
|
width={isMobileView ? 35 : 45}
|
||||||
|
domain={[0, Math.ceil(maxPercent)]}
|
||||||
tickFormatter={(value) => `${Math.round(value)}%`}
|
tickFormatter={(value) => `${Math.round(value)}%`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
@@ -669,7 +669,7 @@ export default function DashboardPage() {
|
|||||||
filter="drop-shadow(0 4px 6px rgba(31, 58, 143, 0.3))"
|
filter="drop-shadow(0 4px 6px rgba(31, 58, 143, 0.3))"
|
||||||
/>
|
/>
|
||||||
<text x={clampedFarmX} y={chartTop - 18} textAnchor="middle" fill="white" fontSize={11} fontWeight={500}>
|
<text x={clampedFarmX} y={chartTop - 18} textAnchor="middle" fill="white" fontSize={11} fontWeight={500}>
|
||||||
우리농가
|
우리농가평균
|
||||||
</text>
|
</text>
|
||||||
<text x={clampedFarmX} y={chartTop - 2} textAnchor="middle" fill="white" fontSize={16} fontWeight={800}>
|
<text x={clampedFarmX} y={chartTop - 2} textAnchor="middle" fill="white" fontSize={16} fontWeight={800}>
|
||||||
{originalFarmScore >= 0 ? '+' : ''}{originalFarmScore.toFixed(2)}
|
{originalFarmScore >= 0 ? '+' : ''}{originalFarmScore.toFixed(2)}
|
||||||
@@ -678,9 +678,9 @@ export default function DashboardPage() {
|
|||||||
<line x1={clampedFarmX} y1={chartTop + 4} x2={farmX} y2={chartTop + 20} stroke="#1F3A8F" strokeWidth={2} />
|
<line x1={clampedFarmX} y1={chartTop + 4} x2={farmX} y2={chartTop + 20} stroke="#1F3A8F" strokeWidth={2} />
|
||||||
|
|
||||||
{/* 보은군 평균 라벨 */}
|
{/* 보은군 평균 라벨 */}
|
||||||
<rect x={regionX - 45} y={chartBottom - 50} width={90} height={28} rx={6} fill="#64748b" />
|
<rect x={regionX - 50} y={chartBottom - 50} width={100} height={28} rx={6} fill="#64748b" />
|
||||||
<text x={regionX} y={chartBottom - 32} textAnchor="middle" fill="white" fontSize={13} fontWeight={700}>
|
<text x={regionX} y={chartBottom - 32} textAnchor="middle" fill="white" fontSize={13} fontWeight={700}>
|
||||||
보은군 {originalRegionScore >= 0 ? '+' : ''}{originalRegionScore.toFixed(2)}
|
보은군평균 {originalRegionScore >= 0 ? '+' : ''}{originalRegionScore.toFixed(2)}
|
||||||
</text>
|
</text>
|
||||||
|
|
||||||
{/* 차이 화살표 또는 동일 표시 */}
|
{/* 차이 화살표 또는 동일 표시 */}
|
||||||
|
|||||||
Reference in New Issue
Block a user