6일차 대시보드 Chart UI 개선

🎯 오늘의 목표

• 대시보드에서 시각적으로 어색했던 부분 개선, 동작 오류 해결

✅ 주요 개선 내용

1. 도넛 그래프 크기 제한 및 중앙 정렬

• Chart.js는 기본적으로 부모 요소 최대 크기로 렌더링되기 때문에, max-width만으로는 조정이 어렵다.
• 해결책: .canvas에 명시적으로 width, height를 부여

.doughnut-wrapper canvas {
  width: 250px !important;
  height: 250px !important;
}

• .doughnut-wrapper는 flex로 가운데 정렬 처리

---

2. 작업지시 차트에 삭제된 제품까지 표시되던 문제 해결

• 원인: API 응답이 배열인데 기존 코드에서 Object.keys(data)를 사용함
• 응답 형태:

  [
  { "productName": "제품-1", "orderCount": 27 },
  { "productName": "제품-2", "orderCount": 21 }
  ]
  

• 수정 코드:

  const labels = data.map(item => item.productName)
  const values = data.map(item => item.orderCount)
  

---

3. 제품 수가 많을 경우 세로 스크롤 적용

• .chart-scroll-box에 overflow-y: auto 적용
• 최대 높이 지정으로 카드 내부에서만 스크롤되도록 처리

.chart-scroll-box {
  flex: 1;
  overflow-y: auto;
  max-height: 300px;
  padding-right: 10px;
}

---

4. 실제 DB 데이터와 실시간 연동 테스트 완료

• MySQL → Spring Boot → REST API → Vue 컴포넌트까지 전체 연동
• 더미 데이터가 아닌 실시간 생산실적 및 설비 데이터를 기반으로 차트 동작 확인

---

5. 각 지표별 로딩 처리 적용

• loaded boolean 값으로 차트 렌더링 여부를 제어
• 데이터 조회 완료 전 : 로딩중 텍스트 표시 / 데이터 조회 완료 후 : 차트 그리기 ```vue

<Bar v-if="loaded" :data="chartData" :options="chartOptions" />

로딩 중...

```js
onMounted(async () => {
    try {
        const response = await fetch('/api/dashboard/work-order-count')
        const data = await response.json()

        const labels = data.map(item => item.productName)
        const values = data.map(item => item.orderCount)

        chartData.value = {
            labels,
            datasets: [{
                label: '작업지시 건수',
                data: values,
                backgroundColor: '#64B5F6',
                borderRadius: 4
            }]
        }

        loaded.value = true
    } catch (err) {
        console.error('작업지시 건수 API 오류:', err)
    }
})

---

🧠 개선 결과

• 레이아웃, 차트 디자인 적용
• 실제 DB 데이터 UI 연동 완료
• 차트별 데이터값 설정

---

🔚 마무리

이번 개선을 통해 실시간 대시보드의 완성도를 높일 수 있었고, Chart.js와 Vue 컴포넌트 간 연동 구조를 더 명확히 학습할 수 있었다. 앞으로는 API도 UI도 기본틀을 완성했으니 내부적으로 완성도를 올려보자.

Frontend Repository : GitHub