Add Layer and Rectangle components to Recharts

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.

packages/reflex-components-recharts/src/reflex_components_recharts/__init__.py

@@ -73,6 +73,10 @@
         "LabelList",
         "cell",
         "Cell",
+        "layer",
+        "Layer",
+        "rectangle",
+        "Rectangle",
     ],
     "polar": [
         "pie",

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 <g> 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

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",

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