Skip to content

✨ [Feature] ApexCharts 연동 및 실시간 트래픽/예산 소진 차트 UI 구현 #74

@Seojegyeong

Description

@Seojegyeong

🛠️ Issue Description

ApexCharts 라이브러리를 프로젝트에 연동하고,
대시보드 내 실시간 트래픽 변화 차트와 예산 소진 현황 게이지 차트 UI를 구현합니다.

💭 Functional role

  • 실시간 트래픽 변화 (Line Chart): 시간대별 클릭수 추이를 시각화하며,
    클릭 이상 징후 발생 시 해당 지점에 마커와 툴팁을 표시해 부정 클릭 의심 구간 강조
  • 예산 소진 현황 (Radial/Gauge Chart): 총 예산 대비 현재 소진율을
    반원형 게이지로 표시하며, 소진율에 따라 안정/주의/위험 구간을 색상으로 구분
    하단에 총 예산, 현재 소진, 잔액 수치 노출

📝 check-lists

  • apexcharts, react-apexcharts 패키지 설치 및 프로젝트 연동
  • 실시간 트래픽 변화 Line Chart 컴포넌트 구현
  • 클릭 이상 징후 마커 및 툴팁 표시
  • 예산 소진 현황 Radial/Gauge Chart 컴포넌트 구현
  • 소진율에 따른 안정(초록) / 주의(노랑) / 위험(빨강) 색상 구간 처리

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions