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