Repository navigation
Widget lab + heatmap layout fix - #37
Merged
Merged
Conversation
Adds an internal `/widget-lab` route that renders every custom-dashboard widget against hand-crafted fixtures (loading, error, empty, threshold, edge-case data) so we can polish layout, typography, and error UX without standing up a real dashboard. Reworks the heatmap chart layout math so cells fill the card instead of hugging the top-left: - Separate cellW/cellH budgets (was one square cellSize) — cells expand independently in each axis. Max raised from 36 to 96 wide / 64 tall. - Y-label width is content-derived (clamp 36-96) so 100-200ms no longer gets truncated to 56px. - New stride-based pickXTicks guarantees adjacent x-labels can't overlap (replacing pickEvenTicks which produced clumps like [0,2,4,5,7]). - Grid centers horizontally when cell width is capped. - Legend bar spans full grid width with a hairline outline. - Hover desaturates non-hovered cells; hover ring is 2-layer for depth. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
|
This run croaked 😵 The workflow encountered an error before any progress could be reported. Please check the link below for details. |
Adds a tiny `gen:types` script that writes apps/mobile/uniwind-types.d.ts with the same content uniwind's metro transformer writes at `expo start`. The d.ts is gitignored (uniwind regenerates it on every metro start), but tsc needs it to exist before it runs — otherwise every `<View className=…>` in apps/mobile is a TS2769 error. Wires the script into `bun typecheck` as a prerun step so both local and turbo CI runs materialise it. Also rewrites the pie/donut chart (packages/ui/.../query-builder-pie-chart) as a custom SVG implementation, replacing Recharts. The Recharts version let the side legend eat ~50% of the card width, then computed outerRadius=80% of whatever scraps were left — pies with 8+ slices rendered as a dot or not at all. New implementation: - Container measured via ResizeObserver; pie diameter = min(W, H-legendH) - Bottom legend, flex-wraps, capped at 2 rows with overflow hidden - Donut centre shows the total (only when inner radius >= 18px) - In-slice labels for slices >= 6%, white text with paint-order stroke - Slice hover: scale 1.035 + others fade to 55% opacity - Soft drop shadow under the pie via feGaussianBlur Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This branch was previously deployed
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
1 participant
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.
Summary
/widget-lab— an internal page that renders every custom-dashboard widget (stat, chart, table, list, pie, histogram, heatmap, markdown) against hand-crafted fixtures covering ready / loading / error (runtime + decode) / empty / edge-case data. No live queries — fixtures are pure data so we can polish layout, thresholds, and error UX without touching Tinybird or time ranges.Heatmap before → after
Before: cells capped at 36px sat in the top-left of the card, Y label "100-300ms" truncated to "100-30…", and 5 x-ticks picked across 8 values collapsed into [0, 2, 4, 5, 7] so labels collided as "006:128:…".
After: cells expand independently in W and H (max 96 wide / 64 tall), Y-label width is content-derived (clamp 36–96px), grid centers horizontally when capped, and a stride-based picker guarantees adjacent x-labels can't overlap. Legend bar spans the full grid width; hover desaturates non-hovered cells.
Verified across all 8 widget-lab heatmap scenarios (5 OKLCH color scales + sparse + log + loading/empty).
Test plan
🤖 Generated with Claude Code
Need help on this PR? Tag
@codesmithwith what you need.