feat: github history chart + embed#27
Open
legions-developer wants to merge 26 commits into
Open
Conversation
…prove code organization
…into feat/composible-charts
…r improved documentation structure
…tions and reveal effects
…effect on overlays
… bar reveal animations
…ar and Line components
…hildren prop for better content rendering
…d SVG export functionality
Contributor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a complete GitHub Star History tool: package/deps, shared types/errors, GitHub token pool and client, Zod query schema and URL builders, a Next.js API route producing SVG (including error-card fallbacks), a full SVG rendering pipeline (line/bar/pie/radial), client state and URL helpers, React UI components (repo input, config panel, preview/embed, color/date pickers), and app integration. ChangesStar History Tool Implementation
🎯 4 (Complex) | ⏱️ ~60 minutes ✨ Finishing Touches🧪 Generate unit tests (beta)
|
…into feat/history-feature
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (1)
src/app/docs/tools/star-history/_components/star-history-tool.tsx (1)
42-47: ⚡ Quick winMove theme synchronization out of render.
Updating state during render is fragile and causes extra render churn. Sync this in an effect with a guarded functional update.
Proposed refactor
-import { useCallback, useState, useSyncExternalStore } from "react"; +import { useCallback, useEffect, useState, useSyncExternalStore } from "react"; @@ - const { resolvedTheme } = useTheme(); - const [syncedSiteTheme, setSyncedSiteTheme] = useState<string | undefined>(undefined); - if (resolvedTheme && resolvedTheme !== syncedSiteTheme) { - setSyncedSiteTheme(resolvedTheme); - setConfig((prev) => ({ ...prev, theme: resolvedTheme === "dark" ? "dark" : "light" })); - } + const { resolvedTheme } = useTheme(); + useEffect(() => { + if (!resolvedTheme) return; + const nextTheme = resolvedTheme === "dark" ? "dark" : "light"; + setConfig((prev) => (prev.theme === nextTheme ? prev : { ...prev, theme: nextTheme })); + }, [resolvedTheme]);
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0f67b310-893f-4d0b-b3ad-5c29e08e53c5
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (42)
package.jsonsrc/app/api/star-history/route.tssrc/app/docs/tools/star-history/_components/actions-bar.tsxsrc/app/docs/tools/star-history/_components/config-panel.tsxsrc/app/docs/tools/star-history/_components/embed-snippets.tsxsrc/app/docs/tools/star-history/_components/preview-panel.tsxsrc/app/docs/tools/star-history/_components/repo-input-list.tsxsrc/app/docs/tools/star-history/_components/star-history-tool.tsxsrc/app/docs/tools/star-history/_lib/repo-input.tssrc/app/docs/tools/star-history/_lib/state.tssrc/app/docs/tools/star-history/_lib/url.tssrc/app/docs/tools/star-history/page.tsxsrc/app/globals.csssrc/app/layout.tsxsrc/components/docs/sidebar/index.tsxsrc/components/ui/badge.tsxsrc/components/ui/button.tsxsrc/components/ui/checkbox.tsxsrc/components/ui/color-picker.tsxsrc/components/ui/date-range-picker.tsxsrc/components/ui/input.tsxsrc/components/ui/item.tsxsrc/components/ui/popover.tsxsrc/components/ui/radio-group.tsxsrc/components/ui/select.tsxsrc/components/ui/switch.tsxsrc/components/ui/textarea.tsxsrc/components/ui/toggle.tsxsrc/globals/constants/docs-sidebar.tsxsrc/lib/star-history/github.tssrc/lib/star-history/parse-repo.tssrc/lib/star-history/query-schema.tssrc/lib/star-history/svg/draw.tssrc/lib/star-history/svg/el.tssrc/lib/star-history/svg/error-svg.tssrc/lib/star-history/svg/escape.tssrc/lib/star-history/svg/index.tssrc/lib/star-history/svg/scales.tssrc/lib/star-history/svg/theme.tssrc/lib/star-history/svg/wordmark.tssrc/lib/star-history/token-pool.tssrc/lib/star-history/types.ts
…G export features - Added support for background patterns and their opacity. - Introduced stroke variants for customizable line styles. - Implemented loop intervals for animation replay. - Updated configuration panel and related components to accommodate new options. - Removed obsolete ActionsBar component and integrated its functionality into EmbedSnippets and PreviewPanel. - Adjusted styles and improved documentation for better usability.
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a37265e7-6414-4af8-a7fb-b4a8b2f4c7ef
📒 Files selected for processing (17)
src/app/api/star-history/route.tssrc/app/docs/[[...slug]]/page.tsxsrc/app/docs/tools/star-history/_components/config-panel.tsxsrc/app/docs/tools/star-history/_components/embed-snippets.tsxsrc/app/docs/tools/star-history/_components/preview-panel.tsxsrc/app/docs/tools/star-history/_components/star-history-tool.tsxsrc/app/docs/tools/star-history/_components/svg-actions.tsxsrc/app/docs/tools/star-history/_lib/state.tssrc/app/docs/tools/star-history/_lib/url.tssrc/lib/star-history/query-schema.tssrc/lib/star-history/svg/backgrounds.tssrc/lib/star-history/svg/draw.tssrc/lib/star-history/svg/el.tssrc/lib/star-history/svg/index.tssrc/lib/star-history/svg/scales.tssrc/lib/star-history/svg/theme.tssrc/lib/star-history/types.ts
✅ Files skipped from review due to trivial changes (1)
- src/app/docs/[[...slug]]/page.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
- src/lib/star-history/svg/theme.ts
- src/lib/star-history/svg/index.ts
- src/app/docs/tools/star-history/_lib/url.ts
- src/lib/star-history/svg/scales.ts
- src/app/api/star-history/route.ts
- src/app/docs/tools/star-history/_components/star-history-tool.tsx
…ry tool - Introduced new chart types: line, bar, radial, radial-half, and pie. - Updated configuration panel to allow selection of chart type with corresponding icons. - Enhanced state management to include chart type and related properties like radial ring width and pie inner radius. - Modified URL handling to support new chart type parameters. - Improved SVG generation logic to dispatch to appropriate chart builders based on selected type.
There was a problem hiding this comment.
Actionable comments posted: 3
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 554bca5f-6018-4e8f-9d53-294f671d1cb9
📒 Files selected for processing (13)
src/app/api/star-history/route.tssrc/app/docs/tools/star-history/_components/config-panel.tsxsrc/app/docs/tools/star-history/_lib/state.tssrc/app/docs/tools/star-history/_lib/url.tssrc/lib/star-history/query-schema.tssrc/lib/star-history/svg/charts/bar.tssrc/lib/star-history/svg/charts/line.tssrc/lib/star-history/svg/charts/pie.tssrc/lib/star-history/svg/charts/radial.tssrc/lib/star-history/svg/draw.tssrc/lib/star-history/svg/index.tssrc/lib/star-history/svg/scales.tssrc/lib/star-history/types.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- src/app/api/star-history/route.ts
- src/lib/star-history/types.ts
- src/app/docs/tools/star-history/_lib/url.ts
- src/app/docs/tools/star-history/_lib/state.ts
- Added aria-describedby attribute to associate error messages with input field. - Updated error message rendering to include an id and role for better screen reader support.
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (2)
src/lib/star-history/svg/draw.ts (2)
75-82:⚠️ Potential issue | 🟠 Major | 🏗️ Heavy liftNamespace
<defs>IDs per render instance.IDs are still global (
sh-grad-*,sh-plot-clip), so multiple embedded charts can cross-reference the wrong defs/clip paths.Proposed direction
-function seriesFillDef( +function seriesFillDef( + idPrefix: string, pattern: FillPattern, index: number, color: string, opacity: number, ): { def: string; id: string } { - const id = `sh-grad-${index}`; + const id = `${idPrefix}-sh-grad-${index}`;-export function plotClip(layout: Layout): string { +export function plotClip(layout: Layout, idPrefix: string): string { ... - { id: "sh-plot-clip" }, + { id: `${idPrefix}-sh-plot-clip` },-fill: `url(`#sh-grad-`${index})`, +fill: `url(#${idPrefix}-sh-grad-${index})`,Also applies to: 170-176, 441-441
334-339:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winPrevent legend badges from rendering off-canvas.
A single long label can still produce a badge wider than row width, which makes right-aligned
xnegative.Proposed fix
- const items = series.map((s, i) => ({ - label: s.label, - color: seriesColor(colors, i), - width: - LEGEND.PAD_X * 2 + LEGEND.SWATCH + LEGEND.SWATCH_GAP + s.label.length * LEGEND_CHAR_W, - })); - - // Greedy wrap into rows that fit within the chart's inner width. - const maxRowWidth = width - LEGEND.EDGE * 2; + const maxRowWidth = Math.max(1, width - LEGEND.EDGE * 2); + const maxTextWidth = Math.max( + 0, + maxRowWidth - (LEGEND.PAD_X * 2 + LEGEND.SWATCH + LEGEND.SWATCH_GAP), + ); + const maxChars = Math.max(1, Math.floor(maxTextWidth / LEGEND_CHAR_W)); + const items = series.map((s, i) => { + const label = s.label.length > maxChars ? `${s.label.slice(0, maxChars - 1)}…` : s.label; + const width = + LEGEND.PAD_X * 2 + LEGEND.SWATCH + LEGEND.SWATCH_GAP + label.length * LEGEND_CHAR_W; + return { label, color: seriesColor(colors, i), width: Math.min(width, maxRowWidth) }; + });Also applies to: 341-367
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 7c4d51da-6098-4725-bf0a-638bcc43372c
📒 Files selected for processing (5)
src/app/docs/tools/star-history/_components/repo-input-list.tsxsrc/app/docs/tools/star-history/_lib/url.tssrc/components/ui/color-picker.tsxsrc/lib/star-history/github.tssrc/lib/star-history/svg/draw.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/app/docs/tools/star-history/_lib/url.ts
- src/app/docs/tools/star-history/_components/repo-input-list.tsx
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: a6e67c82-0c81-4092-b924-142518add316
📒 Files selected for processing (11)
src/app/docs/tools/star-history/_components/config-panel.tsxsrc/app/docs/tools/star-history/_components/embed-snippets.tsxsrc/app/docs/tools/star-history/_components/repo-input-list.tsxsrc/lib/star-history/github.tssrc/lib/star-history/svg/backgrounds.tssrc/lib/star-history/svg/charts/bar.tssrc/lib/star-history/svg/charts/line.tssrc/lib/star-history/svg/charts/pie.tssrc/lib/star-history/svg/charts/radial.tssrc/lib/star-history/svg/draw.tssrc/lib/star-history/svg/ids.ts
🚧 Files skipped from review as they are similar to previous changes (6)
- src/lib/star-history/svg/charts/radial.ts
- src/app/docs/tools/star-history/_components/repo-input-list.tsx
- src/lib/star-history/svg/charts/pie.ts
- src/app/docs/tools/star-history/_components/embed-snippets.tsx
- src/lib/star-history/svg/charts/bar.ts
- src/app/docs/tools/star-history/_components/config-panel.tsx
- Removed the transparent background option from the configuration and related components. - Updated the SVG generation logic to ensure the chart is always rendered with a transparent background. - Introduced a new fill fade feature for area fills, allowing for customizable opacity effects. - Adjusted the configuration panel to include sliders for fill opacity and fill fade settings. - Simplified URL handling for chart generation, merging preview and embed URLs into a single function. - Improved error handling in SVG generation to ensure consistent output across different scenarios.
…port options - Added the StarHistoryTool component to manage the star history visualization. - Introduced a ConfigPanel for customizing chart settings, including chart type and theme. - Implemented a PreviewPanel for displaying the generated SVG and embed snippets. - Created reusable components for handling repository inputs and SVG actions. - Enhanced state management for repository entries and chart configurations. - Developed URL handling for generating chart previews and embeds based on user input.
- Moved the star history tool from the /docs path to a dedicated /tools route. - Updated sitemap to include the new URL for the star history tool. - Refactored the DocsLayout component to utilize the AppShell for improved layout management. - Adjusted sidebar links to reflect the new routing structure.
- Added a new entry for the NPM downloads tool in the sitemap for better navigation. - Updated the star history API to utilize a new chart generation method, improving SVG output. - Refactored the state management in the star history tool to streamline data handling. - Introduced new chart options and improved error handling for better user experience.
- Updated the title in the HTML shell and metadata to use consistent casing. - Adjusted embed snippets and preview panel comments to reflect the new title casing.
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.
Description
Type of Change
Screenshots
Checklist
yarn dev)yarn build)yarn gen-cli)