From 7a5ebe831ebda82317a7ed2a33a2044b59c56a89 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 9 Jul 2026 22:30:55 +0000 Subject: [PATCH] feat(recharts): add Layer and Rectangle wrappers Wrap the Recharts Layer (SVG grouping) and Rectangle (SVG shape) components, which are used as building blocks for constructing custom node elements. Exposed as rx.recharts.layer and rx.recharts.rectangle. Co-Authored-By: Claude Fable 5 Claude-Session: https://claude.ai/code/session_01XqtAPUo84EBNq6c8Ext3mC --- .../news/+layer_rectangle.feature.md | 1 + .../reflex_components_recharts/__init__.py | 4 ++ .../src/reflex_components_recharts/general.py | 68 +++++++++++++++++++ pyi_hashes.json | 4 +- .../units/components/recharts/test_general.py | 43 ++++++++++++ 5 files changed, 118 insertions(+), 2 deletions(-) create mode 100644 packages/reflex-components-recharts/news/+layer_rectangle.feature.md create mode 100644 tests/units/components/recharts/test_general.py diff --git a/packages/reflex-components-recharts/news/+layer_rectangle.feature.md b/packages/reflex-components-recharts/news/+layer_rectangle.feature.md new file mode 100644 index 00000000000..d746d5a26da --- /dev/null +++ b/packages/reflex-components-recharts/news/+layer_rectangle.feature.md @@ -0,0 +1 @@ +Added `rx.recharts.layer` and `rx.recharts.rectangle`, wrapping the Recharts `Layer` and `Rectangle` components used for constructing custom node elements. diff --git a/packages/reflex-components-recharts/src/reflex_components_recharts/__init__.py b/packages/reflex-components-recharts/src/reflex_components_recharts/__init__.py index bb327bbb54d..2149214affe 100644 --- a/packages/reflex-components-recharts/src/reflex_components_recharts/__init__.py +++ b/packages/reflex-components-recharts/src/reflex_components_recharts/__init__.py @@ -73,6 +73,10 @@ "LabelList", "cell", "Cell", + "layer", + "Layer", + "rectangle", + "Rectangle", ], "polar": [ "pie", diff --git a/packages/reflex-components-recharts/src/reflex_components_recharts/general.py b/packages/reflex-components-recharts/src/reflex_components_recharts/general.py index d3dcaa97926..d660bfda32b 100644 --- a/packages/reflex-components-recharts/src/reflex_components_recharts/general.py +++ b/packages/reflex-components-recharts/src/reflex_components_recharts/general.py @@ -299,9 +299,77 @@ class Cell(Recharts): ) +class Layer(Recharts): + """A Layer component in Recharts. Renders an SVG element that groups + other SVG elements, e.g. when constructing custom node elements. + """ + + tag = "Layer" + + alias = "RechartsLayer" + + +class Rectangle(Recharts): + """A Rectangle shape component in Recharts, e.g. used as a building block + for custom node elements. + """ + + tag = "Rectangle" + + alias = "RechartsRectangle" + + x: Var[int | float] = field( + doc="The x-coordinate of the top left corner of the rectangle. Default: 0" + ) + + y: Var[int | float] = field( + doc="The y-coordinate of the top left corner of the rectangle. Default: 0" + ) + + width: Var[int | float] = field(doc="The width of the rectangle. Default: 0") + + height: Var[int | float] = field(doc="The height of the rectangle. Default: 0") + + radius: Var[int | float | Sequence[int | float]] = field( + doc="The radius of the rectangle's corners. When a number, sets all four corners; when a sequence of four numbers, sets the radii of the top-left, top-right, bottom-right and bottom-left corners. Default: 0" + ) + + fill: Var[str | Color] = field(doc="The fill color of the rectangle.") + + fill_opacity: Var[float] = field(doc="The opacity of the rectangle fill.") + + stroke: Var[str | Color] = field(doc="The stroke color of the rectangle.") + + stroke_width: Var[str | int | float] = field( + doc="The width of the rectangle stroke." + ) + + is_animation_active: Var[bool] = field( + doc="If set false, animation of the rectangle will be disabled. Default: False" + ) + + is_update_animation_active: Var[bool] = field( + doc="If set false, the animation of the rectangle when its coordinates or size update will be disabled. Default: False" + ) + + animation_begin: Var[int] = field( + doc="Specifies when the animation should begin, the unit of this option is ms. Default: 0" + ) + + animation_duration: Var[int] = field( + doc="Specifies the duration of animation, the unit of this option is ms. Default: 1500" + ) + + animation_easing: Var[LiteralAnimationEasing] = field( + doc='The type of easing function. Default: "ease"' + ) + + responsive_container = ResponsiveContainer.create legend = Legend.create graphing_tooltip = tooltip = GraphingTooltip.create label = Label.create label_list = LabelList.create cell = Cell.create +layer = Layer.create +rectangle = Rectangle.create diff --git a/pyi_hashes.json b/pyi_hashes.json index f5b97d72d2b..761cafb1089 100644 --- a/pyi_hashes.json +++ b/pyi_hashes.json @@ -111,10 +111,10 @@ "packages/reflex-components-react-player/src/reflex_components_react_player/audio.pyi": "39e4144cef066bbff8c27b36a205a54b", "packages/reflex-components-react-player/src/reflex_components_react_player/react_player.pyi": "86fc106181638c6a0a2a199332be817f", "packages/reflex-components-react-player/src/reflex_components_react_player/video.pyi": "2682dc6e825d25307d8390d01e2bd653", - "packages/reflex-components-recharts/src/reflex_components_recharts/__init__.pyi": "359e123d9a046557ce05a96ce10313f5", + "packages/reflex-components-recharts/src/reflex_components_recharts/__init__.pyi": "8a8c59c2751ba91455d4b75c00940ae1", "packages/reflex-components-recharts/src/reflex_components_recharts/cartesian.pyi": "3485aaabbfd3ca89908ae19425c7297e", "packages/reflex-components-recharts/src/reflex_components_recharts/charts.pyi": "280a7cd51298ee676f3d076104133f44", - "packages/reflex-components-recharts/src/reflex_components_recharts/general.pyi": "f5e3491c4e1f69ba89085682888888a9", + "packages/reflex-components-recharts/src/reflex_components_recharts/general.pyi": "9485d89e4612fddd1e9b42c7c82327e8", "packages/reflex-components-recharts/src/reflex_components_recharts/polar.pyi": "99ebcfc07868061bdc3c2010d85a153f", "packages/reflex-components-recharts/src/reflex_components_recharts/recharts.pyi": "4f6c26f8c76543cc41e2b9dc400ece8a", "packages/reflex-components-sonner/src/reflex_components_sonner/toast.pyi": "58521fcd1b514804f534d97624e82c9a", diff --git a/tests/units/components/recharts/test_general.py b/tests/units/components/recharts/test_general.py new file mode 100644 index 00000000000..7460ecc3e50 --- /dev/null +++ b/tests/units/components/recharts/test_general.py @@ -0,0 +1,43 @@ +from reflex_components_recharts import Layer, Rectangle + + +def test_layer(): + layer = Layer.create().render() + assert layer["name"] == "RechartsLayer" + + +def test_layer_with_children(): + layer = Layer.create(Rectangle.create()).render() + assert layer["name"] == "RechartsLayer" + assert layer["children"][0]["name"] == "RechartsRectangle" + + +def test_rectangle(): + rectangle = Rectangle.create().render() + assert rectangle["name"] == "RechartsRectangle" + + +def test_rectangle_props(): + rectangle = Rectangle.create( + x=10, + y=20.5, + width=100, + height=50, + radius=[4, 4, 0, 0], + fill="#5192ca", + fill_opacity=0.8, + stroke="none", + stroke_width=2, + is_animation_active=False, + ).render() + props = rectangle["props"] + assert "x:10" in props + assert "y:20.5" in props + assert "width:100" in props + assert "height:50" in props + assert "radius:[4, 4, 0, 0]" in props + assert 'fill:"#5192ca"' in props + assert "fillOpacity:0.8" in props + assert 'stroke:"none"' in props + assert "strokeWidth:2" in props + assert "isAnimationActive:false" in props