Wrap Recharts Sankey chart

[harsh21234i]

Closes #6558

Summary

• Add rx.recharts.SankeyChart / rx.recharts.sankey_chart
• Export Sankey through the Recharts package API
• Add docs with simple, stateful, and custom typed/styled node examples
• Add unit coverage for responsive-container wrapping and render alias

Tests

• uv run pytest tests/units/components/graphing/test_recharts.py -q
• uv run ruff check ...
• uv run ruff format --check ...
• uv run pyright ...

[greptile-apps]

Greptile Summary

This PR wraps Recharts' Sankey chart as rx.recharts.sankey_chart, adds rx.vars.use_hook_var() / rx.vars.use_id() for binding React hook return values to Reflex Vars, and exposes rx.recharts.use_chart_width() as a convenience wrapper. All major issues flagged in prior review rounds — SankeyNode required fields, SankeyLinkPayload source/target types, and deferred-annotation handling in the decorators — have been addressed.

• SankeyChart inherits event handlers from ChartBase and is properly registered as a valid ResponsiveContainer child; SankeyNamespace exposes typed TypedDicts as class attributes so user code can write rx.recharts.sankey_chart.SankeyNodeProps.
• use_hook_var aliases each hook import per unique var name to prevent JS import collisions when the same hook name appears from different libraries.
• The _sankey_renderer helper now uses get_type_hints to resolve deferred annotations before validating the parameter type, with a test exercising the from __future__ import annotations path.

Confidence Score: 5/5

• Safe to merge; the new Sankey wrapper and hook-var infrastructure are well-tested and all previously flagged correctness issues have been resolved.
• The implementation is complete and correct: TypedDict shapes match the Recharts runtime payload, the decorator annotation validation handles deferred annotations, and the hook aliasing prevents import collisions. The two remaining observations are about error-message clarity and an unguarded get_type_hints exception path — both edge cases that don't affect the happy path.
• No files require special attention.

Important Files Changed

Filename	Overview
packages/reflex-components-recharts/src/reflex_components_recharts/charts.py	Adds SankeyChart, SankeyNamespace, and all associated TypedDicts and decorators. All previously flagged issues (SankeyNode total=False, SankeyLinkPayload source/target types, deferred annotation handling) have been resolved. Minor: error message in _sankey_renderer says "type SankeyNodeProps" instead of "Var[SankeyNodeProps]", and get_type_hints exceptions propagate uncaught.
packages/reflex-base/src/reflex_base/vars/special.py	New module adding use_hook_var() and use_id(). Hook aliasing prevents import collisions between same-named hooks from different libraries. guess_type() correctly specialises the returned Var. Overloads provide good type narrowing.
packages/reflex-components-recharts/src/reflex_components_recharts/general.py	Adds use_chart_width() and registers SankeyChart as a valid child of ResponsiveContainer. Recharts.library is "recharts@3.8.1", so the or "" fallback is never reached but harmless.
tests/units/components/graphing/test_recharts.py	Good coverage: ResponsiveContainer wrapping, alias render name, namespace style-key usage, unannotated State data, SankeyLinkPayload runtime shape, deferred-annotation decorators, positional-only parameter rejection, and use_chart_width hook data.
tests/units/reflex_base/vars/test_special.py	Comprehensive tests for use_hook_var: VarData contents, type specialisation, name uniqueness, aliasing across libraries, use_id, and hook hoisting into a component's rendered output.
packages/reflex-components-recharts/pyproject.toml	Adds reflex-components-core as a runtime and build-time dependency; reflex-base version floor bumped to 0.9.7 for the new use_hook_var API.
docs/library/graphing/charts/sankeychart.md	New docs page with simple, stateful, and fully custom-rendered examples. The to(dict) pattern for accessing out-of-schema node fields is correctly documented with an inline comment.

_{Reviews (13): Last reviewed commit: "Merge branch 'main' into fix/wrap-rechar..." | Re-trigger Greptile}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e94c1102db

ℹ️ 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".

[codspeed-hq]

Merging this PR will not alter performance

✅ 26 untouched benchmarks
⏩ 8 skipped benchmarks¹

---

_{Comparing harsh21234i:fix/wrap-recharts-sankey-6558 (d9af11f) with main (333b78b)}

Footnotes

1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

[masenf]

needs a changelog entry.

doesn't build

TypeError: Invalid var passed for prop SankeyChart.data, expected type <class 
'reflex_components_recharts.charts.SankeyData'>, got value 
reflex___state____state___docgen_exec___docs_library_graphing_charts_sankeychart_md____sankey_state
.data_rx_state_ of type collections.abc.Mapping[str, 
collections.abc.Sequence[collections.abc.Mapping[str, int]] | 
collections.abc.Sequence[collections.abc.Mapping[str, str]]].
While rendering demo block in docs/library/graphing/charts/sankeychart.md:
class SankeyState(rx.State):
    data = {
        "nodes": [
            {"name": "Marketing"},
            {"name": "Trial"},
            {"name": "Sales"},
            {"name": "Support"},
         
Happened while evaluating page 'library/graphing/charts/sankeychart'

[harsh21234i]

Removed link_width because Recharts does not expose a top-level Sankey prop for link width. Link width is
computed from link values and exposed only to custom link renderers.
Widened SankeyChart.data to accept mapping-shaped state vars as well as the explicit SankeyData TypedDict, so
the stateful docs example with unannotated state data works at component construction.
Added regression coverage for both the removed dead prop and unannotated state data.

The earlier SankeyNode.name and SankeyLink optional styling comments were already addressed in the current branch.

[harsh21234i]

hey @masenf @FarhanAliRaza can someone look into this ?

[cubic-dev-ai]

6 issues found across 15 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="docs/library/graphing/charts/sankeychart.md">

<violation number="1" location="docs/library/graphing/charts/sankeychart.md:155">
P2: Custom node labels keep SVG's default black fill and only add a gray outline, so they become hard to read in dark mode. Use `fill` to set the intended text color instead of `stroke`.</violation>
</file>

<file name="packages/reflex-base/src/reflex_base/vars/special.py">

<violation number="1" location="packages/reflex-base/src/reflex_base/vars/special.py:9">
P3: Direct `use_hook_var(..., _var_type=int)` calls lose their static result type because the return annotation is bare `Var`, despite returning a type-specific var at runtime. A generic/overloaded signature that links `_var_type` to `Var[T]` would preserve editor and Pyright type checking for this public helper.</violation>
</file>

<file name="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py">

<violation number="1" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:621">
P3: Minor dead-code/robustness note: `sig.parameters[next(...)] is None` can never be true (a `Parameter` object is never `None`), so this clause is dead. The empty-signature case is already excluded by the preceding `len(sig.parameters) != 1` check. It also uses index-style `next(iter(...))` into the mapping unnecessarily; iterating the values directly is clearer.</violation>

<violation number="2" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:622">
P2: The decorator's runtime validation compares the decorated function's raw parameter annotation with `get_origin(...) is not Var`. When the caller's module uses `from __future__ import annotations` (common in Reflex apps, and where this is enforced on many user modules), `inspect.signature` returns the annotation as an unevaluated string, so `get_origin` returns `None` and the check always fails — the decorator raises `TypeError` at import time for a fully valid `node: rx.Var[SankeyNodeProps]` function, breaking the documented custom-renderer API with a confusing error. Consider resolving annotations (e.g. `typing.get_type_hints(fn, include_extras=True)`) before validating, or skipping the eager check and letting the memo machinery handle typing, so both evaluated and string-lazy annotations are accepted. The same issue exists in `sankey_link`.</violation>

<violation number="3" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:630">
P3: A valid single positional-only renderer parameter passes validation but then fails during memo creation with an unexpected-keyword `TypeError`. Either reject unsupported parameter kinds during validation or invoke positional-only callbacks positionally in both decorators.</violation>

<violation number="4" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:637">
P3: The newly added `sankey_link` decorator duplicates nearly all of `sankey_node`, including validation that already needs identical fixes in two places. A shared renderer-decorator helper parameterized by props type/name would prevent these paths from drifting.</violation>
</file>

<sub>Tip: instead of fixing issues one by one fix them all with cubic

Re-trigger cubic</sub>

[harsh21234i]

Pushed ad5de4fa with two fixes:

• Added the missing reflex-components-core dependency for reflex-components-recharts and its pyi build hook dependencies, which fixes the package build failure caused by reflex_base.components.memo importing reflex_components_core.
• Updated the Sankey custom link payload types to match the Recharts runtime shape: payload.source / payload.target are resolved node payloads, link height uses dy, and index remains on the outer link props. Added a regression test for this shape.

[cubic-dev-ai]

5 issues found across 15 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="docs/library/graphing/charts/sankeychart.md">

<violation number="1" location="docs/library/graphing/charts/sankeychart.md:57">
P2: In the "Stateful Example", `SankeyState.data` is declared without a type annotation, so it is not a reactive Var (Reflex builds state vars from annotated fields). The `Randomize flows` button mutates that plain dict in place, which produces no backend state delta, so the chart will not update when clicked. Annotate `data` (e.g. `data: dict[str, Any]` or a `SankeyData`) so the mutation triggers a re-render and the example actually demonstrates the stateful behavior it claims.</violation>

<violation number="2" location="docs/library/graphing/charts/sankeychart.md:165">
P3: Link value labels retain the SVG default black fill, so they can become unreadable on dark backgrounds and render as outlined text elsewhere. This likely should use `fill=rx.color("gray", 12)` like the node labels.</violation>
</file>

<file name="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py">

<violation number="1" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:11">
P3: Importing `_MemoComponentWrapper` makes the Recharts package depend on a private `reflex-base` implementation detail, so an internal memo refactor can break this package at import time. A public callable/protocol return type would avoid exposing that coupling in the Sankey decorator API.</violation>

<violation number="2" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:527">
P3: Custom `name_key`/`data_key` datasets are rejected by the new `SankeyData` type because `name` and `value` remain required default-key fields. Marking those two fields `NotRequired` would let the TypedDict model the alternate-key props exposed by `SankeyChart`.</violation>

<violation number="3" location="packages/reflex-components-recharts/src/reflex_components_recharts/charts.py:739">
P2: Using `rx.recharts.sankey_chart` as a component-style key raises `TypeError: unhashable type: 'SankeyNamespace'`, and it is not normalized by `evaluate_style_namespaces`. Inheriting from `ComponentNamespace` would preserve the standard callable-namespace styling behavior.</violation>
</file>

<sub>Tip: instead of fixing issues one by one fix them all with cubic

Re-trigger cubic</sub>

[cubic-dev-ai]

All reported issues were addressed across 15 files

<sub>Reply with feedback, questions, or to request a fix.

Fix all with cubic | Re-trigger cubic</sub>