[Feature/#308] 플랫폼 실시간 트래픽 이상 클릭 마커/버블 UI - #315
Merged
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthrough플랫폼 트래픽 차트가 클릭스트림의 이상 징후 정보를 받아 시계열 위치에 annotation과 마커를 표시하고, hover/focus 시 상세 버블을 보여주도록 확장되었습니다. 관련 타입과 화면 전달 경로도 함께 변경되었습니다. Changes플랫폼 이상 클릭 UI
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant SinglePlatformView
participant useClickStream
participant PlatformTrafficChart
participant ApexChart
participant useAnomalyMarkerPos
participant AnomalyBubble
SinglePlatformView->>useClickStream: suspectDetail 수신
SinglePlatformView->>PlatformTrafficChart: suspectDetail 전달
PlatformTrafficChart->>PlatformTrafficChart: timestamp와 minute 매칭
PlatformTrafficChart->>ApexChart: anomaly annotation 렌더링
PlatformTrafficChart->>useAnomalyMarkerPos: 마커 DOM 좌표 조회
useAnomalyMarkerPos-->>PlatformTrafficChart: 좌표 또는 null 반환
PlatformTrafficChart->>AnomalyBubble: hover/focus 시 상세 정보 전달
Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
📚 Storybook 배포 완료
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
src/components/dashboard/platform/PlatformTrafficChart.tsx (2)
175-180: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win차트 색상도 토큰 해석 경로로 전달해주세요.
var(--color-info-red)를 Apex 옵션에 직접 넣는 방식은 금지된 inlinevar(--*)사용입니다. 프로젝트의 차트용 토큰 resolver/adapter를 통해info-red토큰 값을 전달해주세요. As per coding guidelines, “Forbidden:var(--*)inline hex, arbitrarybg-[#...]” 규칙을 적용해야 합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/dashboard/platform/PlatformTrafficChart.tsx` around lines 175 - 180, Update the marker styling in PlatformTrafficChart so fillColor and strokeColor use the project’s chart token resolver/adapter with the info-red token, rather than passing var(--color-info-red) directly to Apex options. Preserve the existing marker size and stroke width.Source: Coding guidelines
35-41: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value버블 props 타입을 명명된 타입으로 분리해주세요.
익명 객체 대신 파일 상단에
IAnomalyBubbleProps를 선언해 컴포넌트 props 규칙을 맞춰주세요. As per coding guidelines, “component props useI*Props” 규칙을 적용해야 합니다.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/dashboard/platform/PlatformTrafficChart.tsx` around lines 35 - 41, PlatformTrafficChart의 버블 컴포넌트 props에 사용된 익명 객체 타입을 파일 상단의 명명된 IAnomalyBubbleProps 인터페이스로 분리하세요. x, y, message, campaignName, adName 필드를 동일하게 정의하고 해당 컴포넌트 선언에서 새 타입을 참조하세요.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/dashboard/platform/PlatformTrafficChart.tsx`:
- Around line 298-315: Update the anomaly detail button and AnomalyBubble in
PlatformTrafficChart so the button references the bubble through
aria-describedby, and the bubble exposes a unique matching id with
role="tooltip". Preserve the existing campaignName, adName, and message content
while ensuring the id is unique for each rendered anomaly.
- Around line 288-318: Update useAnomalyMarkerPos to call setMarkerPos(null)
when no current anomaly marker is found, clearing stale coordinates after
hasSuspect becomes false. In PlatformTrafficChart, require the current anomaly
state and valid markerPos before rendering the ping indicators, focus button,
and AnomalyBubble.
- Around line 117-127: Update the timestamp-to-minute matching logic in
PlatformTrafficChart and the corresponding TrafficChart implementation to use
the same explicit timezone basis as the server-provided timeSeriesData.minute
keys. Prefer UTC accessors such as getUTCFullYear, getUTCMonth, getUTCDate,
getUTCHours, and getUTCMinutes, or reuse a server-provided minute key, ensuring
both charts produce identical keys for values such as ISO timestamps with a Z
suffix.
---
Nitpick comments:
In `@src/components/dashboard/platform/PlatformTrafficChart.tsx`:
- Around line 175-180: Update the marker styling in PlatformTrafficChart so
fillColor and strokeColor use the project’s chart token resolver/adapter with
the info-red token, rather than passing var(--color-info-red) directly to Apex
options. Preserve the existing marker size and stroke width.
- Around line 35-41: PlatformTrafficChart의 버블 컴포넌트 props에 사용된 익명 객체 타입을 파일 상단의
명명된 IAnomalyBubbleProps 인터페이스로 분리하세요. x, y, message, campaignName, adName 필드를
동일하게 정의하고 해당 컴포넌트 선언에서 새 타입을 참조하세요.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: e455d547-2531-4f18-be23-948ca554168d
📒 Files selected for processing (3)
src/components/dashboard/platform/PlatformTrafficChart.tsxsrc/components/dashboard/platform/SinglePlatformView.tsxsrc/types/dashboard/overview.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🚨 관련 이슈
close #308
✨ 변경사항
✏️ 작업 내용
단일 플랫폼 「실시간 트래픽 변화」 차트에 이상 클릭 탐지 UI를 연동했습니다.
useClickStream의suspectDetail을PlatformTrafficChart에 전달hasSuspect일 때 빨간 마커 표시timestamp가 있으면 해당 분에 매칭campaignName/adName/message표시suspectDetail.timestamp를 optional로 수정😅 미완성 작업
📢 논의 사항 및 참고 사항
timestamp가 없는 것 같아 클릭수 최대 지점에 대략 표시하였습니다.Summary by CodeRabbit