해당 드라이버가 없습니다.
+
+ const order = hoveredId == null
+ ? items
+ : [...items.filter((d) => d.rowId !== hoveredId), items.find((d) => d.rowId === hoveredId)].filter(Boolean)
+ const hovered = items.find((d) => d.rowId === hoveredId)
+
+ const renderTooltip = (d) => {
+ const rows = [
+ { ic: 'dist', t: d.kmText || `${d.km} km` },
+ { ic: 'dur', t: d.minText },
+ { ic: 'time', t: d.endAt ? `${hm(d.startAt)} ~ ${hm(d.endAt)}` : `${hm(d.startAt)} ~ ${statusText(d.status)}` },
+ ]
+ const lineH = 16
+ const tw = 176, th = 24 + rows.length * lineH
+ const tx = Math.min(Math.max(d.mx - tw / 2, 6), W - tw - 6)
+ const ty = Math.max(6, CY - R - th - 8)
+ return (
+
+
+
드라이버 운행 현황
+
+ ●
+ 5분마다 자동 갱신
+ {updatedAt && ` · 업데이트 ${updatedAt.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit' })}`}
+ {ovLoading && rows.length > 0 && ' · 갱신 중…'}
+
+
+
+
+
+
+ setDate(e.target.value)} />
+
+
+
+
+
+
+
+ {error &&
불러오기 오류: {error}
}
+ {ovLoading && rows.length === 0 &&
불러오는 중…
}
+
+ {/* 전체 요약 */}
+ {rows.length > 0 && (
+
+
+
전체 예상량
+
{summary.plannedQty.toLocaleString()} L
+
+
+
전체 픽업량
+
{summary.totalQty.toLocaleString()} L
+ {summary.rate != null &&
예상 대비 {summary.rate}%
}
+
+
+
전체 방문 수
+
+ {summary.completed.toLocaleString()} / {summary.target.toLocaleString()}
+
+
+
+ )}
+
+ {/* 전체 개요 — 선택과 무관하게 항상 유지 */}
+ {(!ovLoading || rows.length > 0) && (
+
+
+ 전체 드라이버 — 거리 대비 픽업량
+
+
setDriverId(String(id))}
+ />
+
+
+ 운행 중
+
+
+ 운행 종료
+
+
채움 = 예상 대비 픽업량 · 마커 클릭 → 아래에 누적 차트
+
+ )}
+
+ {/* 기타 운행 (오일 픽업 없음) — 거리 스트립 */}
+ {zeroRows.length > 0 && (
+
+
+ 기타 운행 (오일 픽업 없음) — 이동거리
+
+
+
+ )}
+
+ {/* 단일 드라이버 드릴다운 — 아래에 추가로 등장 */}
+ {driverId && (
+
+
+
+ {selectedName} · 시간대별 누적{histLoading && ' · 불러오는 중…'}
+
+
+
+
+
+ )}
+
선택한 날짜에 픽업 이력이 없습니다.
+ }
+
+ const { pts, xOf, yOf, xTicks, yTicks, linePath, areaPath, last } = model
+
+ const renderTooltip = (p) => {
+ const lines = [
+ `+${Math.round(p.qty).toLocaleString()} L (이번 픽업)`,
+ `누적 ${Math.round(p.cum).toLocaleString()} L`,
+ ]
+ const tw = 188, th = 22 + lines.length * 14
+ const px = xOf(p.t), py = yOf(p.cum)
+ const tx = Math.min(Math.max(px + 12, 6), W - tw - 6)
+ const ty = Math.min(Math.max(py - th - 12, 6), H - th - 6)
+ return (
+ 픽업이 기록된 드라이버가 없습니다.
+ }
+
+ // 호버된 마커를 맨 마지막에 그려서 위로 올림 (행 단위 식별)
+ const order = hoveredId == null
+ ? items
+ : [...items.filter((d) => d.rowId !== hoveredId), items.find((d) => d.rowId === hoveredId)].filter(Boolean)
+
+ const hovered = items.find((d) => d.rowId === hoveredId)
+
+ const renderMarker = (d) => {
+ const isHover = d.rowId === hoveredId
+ const isSel = selectedId != null && String(d.driverId) === String(selectedId)
+ const k = isHover ? 1.18 : 1
+ const r = R * k
+ const cx = d.mx, cy = d.my
+ const empty = d.oil <= 0 // 픽업 없음 (산점도엔 거의 안 옴, 안전장치)
+ const f = d.plannedQty > 0 ? Math.min(1, d.oil / d.plannedQty) : 1 // 픽업량 / 예상량 (예상 없으면 가득)
+ const clipId = `dstatLiq${d.rowId}`
+
+ // 액체 표면 (가벼운 물결) + 바닥. f=0/1 이면 평평.
+ const yTop = cy + r - 2 * r * f
+ const amp = f > 0 && f < 1 ? Math.max(1, r * 0.13) : 0
+ const liquid = `M ${(cx - r).toFixed(1)} ${yTop.toFixed(1)}`
+ + ` C ${(cx - r * 0.5).toFixed(1)} ${(yTop - amp).toFixed(1)}, ${(cx - r * 0.5).toFixed(1)} ${(yTop + amp).toFixed(1)}, ${cx.toFixed(1)} ${yTop.toFixed(1)}`
+ + ` S ${(cx + r * 0.5).toFixed(1)} ${(yTop + amp).toFixed(1)}, ${(cx + r).toFixed(1)} ${yTop.toFixed(1)}`
+ + ` L ${(cx + r).toFixed(1)} ${(cy + r).toFixed(1)} L ${(cx - r).toFixed(1)} ${(cy + r).toFixed(1)} Z`
+
+ return (
+