refactor(chart): migrate batch request chart to recharts#1161
Merged
mengxi-ream merged 4 commits intomainfrom Mar 19, 2026
Merged
refactor(chart): migrate batch request chart to recharts#1161mengxi-ream merged 4 commits intomainfrom
mengxi-ream merged 4 commits intomainfrom
Conversation
Replace the batch request statistics chart with a Recharts implementation, remove the old VChart theme provider, and update the dependency lockfile for the charting change.
π¦ Changeset detectedLatest commit: 70b0932 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
dosubot
bot
added
the
size:XL
|
Documentation Updates 1 document(s) were updated by changes in this PR: Build and Development Environment SetupView Changes@@ -390,8 +390,9 @@
## Dependency Management
- **Pinned Versions:** All `@read-frog/*` dependencies are now pinned to specific versions (e.g., `@read-frog/[email protected]`) instead of using `latest`.
- **Icon Strategy:** The extension uses bundled React icon components from `@remixicon/react` and `@tabler/icons-react` to avoid Content Security Policy (CSP) restrictions on dynamically loaded SVGs. For cases requiring dynamic icon loading via Iconify, the extension provides a background fetch proxy (see [Background Fetch Infrastructure](#background-fetch-infrastructure)).
-- **New Dependencies:** `tw-animate-css` is included for Tailwind animation utilities. `@remixicon/react` is included for Remix icon components.
-- **Removed:** `eslint-plugin-turbo` and related configuration have been removed. The `agentation` dev dependency has also been removed and replaced with a custom HelpButton component.
+- **Charting Library:** The project uses `recharts` (^3.8.0), a composable charting library built on React components, for rendering statistics charts such as the batch request chart.
+- **New Dependencies:** `tw-animate-css` is included for Tailwind animation utilities. `@remixicon/react` is included for Remix icon components. `recharts` is included for data visualization.
+- **Removed:** `eslint-plugin-turbo` and related configuration have been removed. The `agentation` dev dependency has also been removed and replaced with a custom HelpButton component. `@visactor/react-vchart` and `@visactor/vchart` have been removed in favor of `recharts`. The `effect` dependency has been removed.
- **Syncpack:** Ensures consistent dependency versions. Use `pnpm syncpack:lint` to check and `pnpm syncpack:fix` to resolve mismatches.
- **Changesets:** Handles versioning and changelogs.
@@ -405,7 +406,7 @@
@source "../**/*.{ts,tsx}";
```
-- **Tailwind CSS version:** `4.2.1`
+- **Tailwind CSS version:** `4.2.2`
## Linting and Formatting
- ESLint is managed centrally via the `@repo/eslint-config` workspace package. Each package or app extends this config as needed.
@@ -445,10 +446,10 @@
- **Node.js version:** `>=22.0.0`
- **pnpm version:** `10.32.1`
- **TypeScript version:** `^5.9.3`
-- **Tailwind CSS version:** `4.2.1`
-- **ESLint version:** `^9.38.0`
-- **Vite version:** `^7.1.11` (where relevant)
-- **shadcn version:** `^3.8.5` (for UI component management)
+- **Tailwind CSS version:** `4.2.2`
+- **ESLint version:** `^10.0.3`
+- **Vite version:** `^8.0.0`
+- **shadcn version:** `^4.0.8` (for UI component management)
- **Fumadocs, Next.js, and other major dependencies** are kept up to date. See individual `package.json` files for details.
## Internationalization (i18n)How did I do? Any feedback?Β Β |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
1 issue found across 9 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid β if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="src/components/ui/base-ui/chart.tsx">
<violation number="1" location="src/components/ui/base-ui/chart.tsx:230">
P2: Use an explicit null/undefined check when rendering tooltip values; the current truthiness check hides valid `0` values.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.
| {itemConfig?.label || item.name} | ||
| </span> | ||
| </div> | ||
| {item.value && ( |
Contributor
There was a problem hiding this comment.
P2: Use an explicit null/undefined check when rendering tooltip values; the current truthiness check hides valid 0 values.
Prompt for AI agents
Check if this issue is valid β if so, understand the root cause and fix it. At src/components/ui/base-ui/chart.tsx, line 230:
<comment>Use an explicit null/undefined check when rendering tooltip values; the current truthiness check hides valid `0` values.</comment>
<file context>
@@ -0,0 +1,349 @@
+ {itemConfig?.label || item.name}
+ </span>
+ </div>
+ {item.value && (
+ <span className="font-mono font-medium text-foreground tabular-nums">
+ {valueFormatter
</file context>
This was referenced Mar 19, 2026
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.
Type of Changes
Description
@visactor/react-vcharttorechartsRelated Issue
How Has This Been Tested?
SKIP_FREE_API=true pnpm lintSKIP_FREE_API=true pnpm type-checkSKIP_FREE_API=true pnpm testScreenshots
Checklist
Additional Information
Summary by cubic
Migrate the batch request statistics chart from
@visactor/react-vcharttorecharts, and introduce shared chart UI primitives for consistent legend/tooltip styling. Removes the old VChart theme provider and simplifies theming.Refactors
recharts(AreaChart, gradients, monotone lines, responsive layout).ChartContainer,ChartTooltip(Content),ChartLegend(Content), andChartStyleusing CSS variables for light/dark themes.ChartThemeProviderand the VChart theme config; cleaned up options entrypoint.originalRequest,batchRequest), sorted by day; tooltip uses thousands separators; dots show when only one point.Dependencies
recharts@^3.8.0; removed@visactor/react-vchartand@visactor/vchart.@json-render/*,@openrouter/ai-sdk-provider,@orpc/client,@tanstack/react-query,shadcn,vite,eslint,wxt).@read-frog/extension.Written for commit 70b0932. Summary will update on new commits.