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 and introduces two new general utilities: use_hook_var / use_id (for binding React hook return values to Reflex Vars) and use_chart_width (for reading the enclosing chart's pixel width inside a custom renderer). The Sankey implementation adds @sankey_node / @sankey_link decorator-based custom renderer support, complete TypedDict payload types that match the Recharts runtime shape, and a namespace that exposes all types as attributes.

• SankeyChart extends ChartBase (auto-wrapped in ResponsiveContainer) with typed SankeyData, SankeyNode, and SankeyLink TypedDicts; optional link styling fields are correctly marked NotRequired.
• _sankey_renderer uses get_type_hints(fn, include_extras=True) to resolve deferred annotations before validating the parameter type, addressing the from __future__ import annotations compatibility issue raised in prior review.
• use_hook_var aliases each hook import uniquely to prevent JS collision across multiple hook vars of the same name, and VarData wiring ensures the hook statement is hoisted into any component that uses the var.

Confidence Score: 5/5

• Safe to merge — new chart component and hook utilities with no interaction with existing state management or auth paths.
• The change is self-contained: a new Recharts chart wrapper, two new Var utilities, and associated docs/tests. The _sankey_renderer decorator handles deferred annotations correctly via get_type_hints, the TypedDict payload types match the Recharts runtime shape (source/target as node objects, dy not width, index on props not payload), and the test suite covers all major scenarios including the previously flagged edge cases. The only open items are non-blocking style/completeness notes.
• No files require special attention.

Important Files Changed

Filename	Overview
packages/reflex-components-recharts/src/reflex_components_recharts/charts.py	Adds SankeyChart, SankeyNamespace, typed TypedDicts, and @sankey_node/@sankey_link decorators. Core logic is sound; minor gaps in error handling and missing node-event props.
packages/reflex-base/src/reflex_base/vars/special.py	New use_hook_var / use_id utilities. Clean implementation: unique variable name, aliased import to avoid collisions, correct VarData wiring.
packages/reflex-components-recharts/src/reflex_components_recharts/general.py	Adds SankeyChart to ResponsiveContainer valid children and exports use_chart_width. Both additions are straightforward and correct.
tests/units/components/graphing/test_recharts.py	Thorough new tests: ResponsiveContainer wrapping, alias render, namespace style key, deferred-annotation compatibility, positional-only param rejection, and use_chart_width VarData shape.
docs/library/graphing/charts/sankeychart.md	Docs page with simple, stateful, and fully custom examples. F-string Var interpolation is valid via Reflex's format override; gradient linkage pattern matches documented use_id idiom.

_{Reviews (15): Last reviewed commit: "Fix Sankey docs renderer type" | 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 (43e4f1a) with main (f21eb16)}

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>

[harsh21234i]

The failing check is test_call_script[inline], where external4 is not loaded. This PR does not modify the call- script or integration harness code, and the external-script variant passes. Could this be rerun or compared against main to confirm whether it is a baseline/flaky CI failure?