fix(ui): center labels inside stacked bars by AysajanE · Pull Request #243 · goptics/vizb

AysajanE · 2026-07-20T11:31:16Z

Summary

center value labels inside each segment of stacked 2D bar charts
keep inside labels readable across light and dark series colors with the existing heatmap-style outline
preserve the existing top and right positions for non-stacked vertical and horizontal bars
cover both themes and stacked orientations, non-stacked placement, and the Show labels toggle with focused tests

Checks

mkdir -p /tmp/vite-temp && /workspace/node_modules/.bin/vitest run --root ui --no-color src/composables/charts/useBarChartOptions.test.ts — public PR head failed the amended contrast regression; corrected commit passed in the clean network-off verifier
pnpm test — 32 files and 487 UI tests passed
pnpm typecheck, pnpm format:check, and EMBED_UI=True pnpm build — passed
browser matrix — vertical and horizontal stacked bars passed in light and dark themes; labels remained centered and readable with the contrast outline

Fixes #209

AI assistance was used. This change was reviewed by Northset, and I accept responsibility for this submission.

Verification

Northset proof-of-pass receipt M-1027
This record covers Northset’s own contribution; it is not maintainer verification.
Maintainers can request a separate, private run for a PR already in their queue at [email protected].
For repositories already onboarded with Northset, adding northset-verify to a PR requests a run on that PR.

Summary by CodeRabbit

New Features
- Labels in stacked bar charts now appear centered inside their respective bars when enabled.
- Label positioning remains optimized for horizontal and vertical non-stacked charts.
Bug Fixes
- Corrected label placement for stacked bar charts across orientations.
- Labels remain hidden when chart label display is disabled.

Signed-off-by: Aysajan Eziz <[email protected]>

coderabbitai · 2026-07-20T11:31:42Z

📝 Walkthrough

Walkthrough

Changes

Stacked bar labels

Layer / File(s)	Summary
Stack-aware label positioning `ui/src/composables/charts/shared/chartConfig.ts`	`createLabelConfig` accepts `stacked` and uses `inside` for stacked labels, while retaining `right` or `top` for non-stacked bars.
Bar integration and tests `ui/src/composables/charts/useBarChartOptions.ts`, `ui/src/composables/charts/useBarChartOptions.test.ts`	Bar options pass stacking state into label configuration, with tests covering horizontal orientations, label positions, and hidden labels.

Estimated code review effort: 2 (Simple) | ~10 minutes

Sequence Diagram(s)

sequenceDiagram
  participant useBarChartOptions
  participant createLabelConfig
  participant BarSeriesOptions
  useBarChartOptions->>createLabelConfig: pass showLabels, styling, orientation, useStack
  createLabelConfig->>BarSeriesOptions: return label position
  BarSeriesOptions->>BarSeriesOptions: render stacked labels inside or non-stacked labels at top/right

Suggested reviewers: fahimfaisaal

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	The changes satisfy `#209` by making stacked 2D bar labels use inside positioning while preserving non-stacked placement and label toggling.
Out of Scope Changes check	✅ Passed	The PR only touches stacked label positioning, related tests, and passing stack state through bar options.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely summarizes the main change: centering labels inside stacked bars.

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

chatgpt-codex-connector

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: a276e79537

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

Open a pull request for review
Mark a draft as ready
Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

coderabbitai

🧹 Nitpick comments (1)

ui/src/composables/charts/shared/chartConfig.ts (1)
843-851: 📐 Maintainability & Code Quality | 🔵 Trivial

Run task build:ui after UI changes.

As per path instructions, after a fresh clone or any ui/ change, remember to run task build:ui before Go tests or CLI builds to ensure your changes are correctly integrated.
🤖 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 `@ui/src/composables/charts/shared/chartConfig.ts` around lines 843 - 851,
After updating the chart configuration around the label-position logic, run task
build:ui before running Go tests or CLI builds, as required for any ui/ change.
Source: Path instructions

🤖 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.

Nitpick comments:
In `@ui/src/composables/charts/shared/chartConfig.ts`:
- Around line 843-851: After updating the chart configuration around the
label-position logic, run task build:ui before running Go tests or CLI builds,
as required for any ui/ change.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 7d6df8e9-0cff-4344-aab7-d2829d4f8637

📥 Commits

Reviewing files that changed from the base of the PR and between fe6fe5a and a276e79.

📒 Files selected for processing (3)

ui/src/composables/charts/shared/chartConfig.ts
ui/src/composables/charts/useBarChartOptions.test.ts
ui/src/composables/charts/useBarChartOptions.ts

Signed-off-by: Aysajan Eziz <[email protected]>

fahimfaisaal

Thanks for the PR, LGTM so far

fix(ui): center labels inside stacked bars

a276e79

Signed-off-by: Aysajan Eziz <[email protected]>

AysajanE requested a review from fahimfaisaal as a code owner July 20, 2026 11:31

chatgpt-codex-connector Bot reviewed Jul 20, 2026

View reviewed changes

Comment thread ui/src/composables/charts/shared/chartConfig.ts

coderabbitai Bot reviewed Jul 20, 2026

View reviewed changes

fix(ui): improve stacked label contrast

dc0fd72

Signed-off-by: Aysajan Eziz <[email protected]>

fahimfaisaal approved these changes Jul 20, 2026

View reviewed changes

fahimfaisaal merged commit 4ecbdd7 into goptics:main Jul 20, 2026
4 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(ui): center labels inside stacked bars#243

fix(ui): center labels inside stacked bars#243
fahimfaisaal merged 2 commits into
goptics:mainfrom
AysajanE:northset/m-1027-r-a276e795378c

AysajanE commented Jul 20, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot commented Jul 20, 2026 •

edited

Loading

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

chatgpt-codex-connector Bot left a comment

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Uh oh!

fahimfaisaal left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

AysajanE commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checks

Verification

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jul 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

chatgpt-codex-connector Bot left a comment

Choose a reason for hiding this comment

💡 Codex Review

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

fahimfaisaal left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

AysajanE commented Jul 20, 2026 •

edited

Loading

coderabbitai Bot commented Jul 20, 2026 •

edited

Loading