Skip to content

fix: 사료 섭취 차트를 제공/섭취 스택 바로 바꿈 - #44

Merged
eigger merged 1 commit into
masterfrom
fix/meal-chart-stacked-bars
Sep 4, 2026
Merged

fix: 사료 섭취 차트를 제공/섭취 스택 바로 바꿈#44
eigger merged 1 commit into
masterfrom
fix/meal-chart-stacked-bars

Conversation

@eigger

@eigger eigger commented Sep 4, 2026

Copy link
Copy Markdown
Owner

Summary

  • 사료 섭취 차트의 offered/consumed 막대가 같은 색 계열(명도만 다름)이라 눈으로 구분이 안 됐다 (사용자 지적).
  • 같은 x 위치에 쌓는 방식으로 바꿔서, 섭취(진한 색)를 바닥에서 채우고 제공에서 못 먹은 만큼만 위에 옅은 색으로 얹는다. offered가 사실상 목표선처럼 읽힌다.
  • 다 먹었을 때(섭취=제공)와 남았을 때 모두 스택 맨 위 세그먼트만 둥글게 처리되도록 shape 콜백으로 처리했고, 두 세그먼트 사이엔 2px surface-color 스트로크로 경계를 준다.
  • 툴팁은 세그먼트 자체 값이 아니라 실제 제공/섭취 값을 그대로 보여준다.

Test plan

  • npm run --workspace apps/web build (타입체크 포함)
  • npm run --workspace apps/web test (112 tests)
  • esbuild로 실제 recharts를 번들해 브라우저에서 직접 렌더링 — 비율·색상·라운드 코너 로직 확인 (스크래치 파일은 커밋에 없음)

🤖 Generated with Claude Code

offered·consumed를 옆으로 나란히 그리면 --color-primary와
--chart-secondary가 같은 색 계열(명도만 다름)이라 구분이 잘 안 됐다.
같은 x 위치에 쌓아서 섭취(진한 색)를 바닥에서 채우고, 제공에서 못 먹은
만큼만 위에 옅은 색으로 얹는다 — offered가 목표선처럼 읽힌다.

- 섭취=제공(다 먹음)이면 위쪽만 둥글게, 남았으면 위 세그먼트만 둥글게
  (shape 콜백으로 스택 맨 위인 쪽만 라운드 처리)
- 두 세그먼트 사이 2px surface-color 스트로크로 구분
- 툴팁은 세그먼트 값이 아니라 실제 제공/섭취 값을 그대로 보여준다

Recharts를 실제로 esbuild 번들해 브라우저에서 렌더링까지 확인했다
(비율·색상·라운드 로직).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@eigger
eigger merged commit 76afdd3 into master Sep 4, 2026
6 checks passed
@eigger
eigger deleted the fix/meal-chart-stacked-bars branch September 4, 2026 00:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant