(WIP) recharts fixes batch #3 (#3496)

* remove stroke and fill from label as they are unsupported by recharts

* refacted legend

* added props to reference line

* updated type for stroke_width, added stroke, updated type for x y

* added x y to reference dot

* updated reference area

* regenerated pyi

* new pyis

* regenerated pyi

---------

Co-authored-by: Hongyu Yao <hongyuyao@Hongyus-MacBook-Pro-3.local>
Co-authored-by: Hongyu Yao <hongyuyao@hongyus-mbp-3.lan>

reflex/components/recharts/cartesian.py

@@ -581,15 +581,12 @@ class Reference(Recharts):
     # The id of y-axis which is corresponding to the data.
     y_axis_id: Var[Union[str, int]]
 
-    # If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
-    x: Var[str]
-
-    # If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
-    y: Var[str]
-
     # Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
     if_overflow: Var[LiteralIfOverflow]
 
+    # If set a string or a number, default label will be drawn, and the option is content.
+    label: Var[Union[str, int]]
+
     # If set true, the line will be rendered in front of bars in BarChart, etc.
     is_front: Var[bool]
 
@@ -601,12 +598,24 @@ class ReferenceLine(Reference):
 
     alias = "RechartsReferenceLine"
 
+    # If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
+    x: Var[Union[str, int]]
+
+    # If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
+    y: Var[Union[str, int]]
+
+    # The color of the reference line.
+    stroke: Var[Union[str, Color]]
+
     # The width of the stroke.
-    stroke_width: Var[int]
+    stroke_width: Var[Union[str, int]]
 
     # Valid children components
     _valid_children: List[str] = ["Label"]
 
+    # Array of endpoints in { x, y } format. These endpoints would be used to draw the ReferenceLine.
+    segment: List[Any] = []
+
 
 class ReferenceDot(Reference):
     """A ReferenceDot component in Recharts."""
@@ -615,6 +624,21 @@ class ReferenceDot(Reference):
 
     alias = "RechartsReferenceDot"
 
+    # If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
+    x: Var[Union[str, int]]
+
+    # If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
+    y: Var[Union[str, int]]
+
+    # The radius of dot.
+    r: Var[int]
+
+    # The color of the area fill.
+    fill: Var[Union[str, Color]]
+
+    # The color of the line stroke.
+    stroke: Var[Union[str, Color]]
+
     # Valid children components
     _valid_children: List[str] = ["Label"]
 

reflex/components/recharts/cartesian.pyi

@@ -1743,14 +1743,13 @@ class Reference(Recharts):
         *children,
         x_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         y_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        x: Optional[Union[Var[str], str]] = None,
-        y: Optional[Union[Var[str], str]] = None,
         if_overflow: Optional[
             Union[
                 Var[Literal["discard", "hidden", "visible", "extendDomain"]],
                 Literal["discard", "hidden", "visible", "extendDomain"],
             ]
         ] = None,
+        label: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         is_front: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1811,9 +1810,8 @@ class Reference(Recharts):
             *children: The children of the component.
             x_axis_id: The id of x-axis which is corresponding to the data.
             y_axis_id: The id of y-axis which is corresponding to the data.
-            x: If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
-            y: If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
             if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+            label: If set a string or a number, default label will be drawn, and the option is content.
             is_front: If set true, the line will be rendered in front of bars in BarChart, etc.
             style: The style of the component.
             key: A unique key for the component.
@@ -1834,17 +1832,20 @@ class ReferenceLine(Reference):
     def create(  # type: ignore
         cls,
         *children,
-        stroke_width: Optional[Union[Var[int], int]] = None,
+        x: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        y: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        stroke: Optional[Union[Var[Union[str, Color]], Union[str, Color]]] = None,
+        stroke_width: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        segment: Optional[List[Any]] = None,
         x_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         y_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        x: Optional[Union[Var[str], str]] = None,
-        y: Optional[Union[Var[str], str]] = None,
         if_overflow: Optional[
             Union[
                 Var[Literal["discard", "hidden", "visible", "extendDomain"]],
                 Literal["discard", "hidden", "visible", "extendDomain"],
             ]
         ] = None,
+        label: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         is_front: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1903,12 +1904,15 @@ class ReferenceLine(Reference):
 
         Args:
             *children: The children of the component.
+            x: If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
+            y: If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
+            stroke: The color of the reference line.
             stroke_width: The width of the stroke.
+            segment: Array of endpoints in { x, y } format. These endpoints would be used to draw the ReferenceLine.
             x_axis_id: The id of x-axis which is corresponding to the data.
             y_axis_id: The id of y-axis which is corresponding to the data.
-            x: If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
-            y: If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
             if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+            label: If set a string or a number, default label will be drawn, and the option is content.
             is_front: If set true, the line will be rendered in front of bars in BarChart, etc.
             style: The style of the component.
             key: A unique key for the component.
@@ -1929,16 +1933,20 @@ class ReferenceDot(Reference):
     def create(  # type: ignore
         cls,
         *children,
+        x: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        y: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
+        r: Optional[Union[Var[int], int]] = None,
+        fill: Optional[Union[Var[Union[str, Color]], Union[str, Color]]] = None,
+        stroke: Optional[Union[Var[Union[str, Color]], Union[str, Color]]] = None,
         x_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         y_axis_id: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
-        x: Optional[Union[Var[str], str]] = None,
-        y: Optional[Union[Var[str], str]] = None,
         if_overflow: Optional[
             Union[
                 Var[Literal["discard", "hidden", "visible", "extendDomain"]],
                 Literal["discard", "hidden", "visible", "extendDomain"],
             ]
         ] = None,
+        label: Optional[Union[Var[Union[str, int]], Union[str, int]]] = None,
         is_front: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
@@ -1997,11 +2005,15 @@ class ReferenceDot(Reference):
 
         Args:
             *children: The children of the component.
-            x_axis_id: The id of x-axis which is corresponding to the data.
-            y_axis_id: The id of y-axis which is corresponding to the data.
             x: If set a string or a number, a vertical line perpendicular to the x-axis specified by xAxisId will be drawn. If the specified x-axis is a number axis, the type of x must be Number. If the specified x-axis is a category axis, the value of x must be one of the categorys, otherwise no line will be drawn.
             y: If set a string or a number, a horizontal line perpendicular to the y-axis specified by yAxisId will be drawn. If the specified y-axis is a number axis, the type of y must be Number. If the specified y-axis is a category axis, the value of y must be one of the categorys, otherwise no line will be drawn.
+            r: The radius of dot.
+            fill: The color of the area fill.
+            stroke: The color of the line stroke.
+            x_axis_id: The id of x-axis which is corresponding to the data.
+            y_axis_id: The id of y-axis which is corresponding to the data.
             if_overflow: Defines how to draw the reference line if it falls partly outside the canvas. If set to 'discard', the reference line will not be drawn at all. If set to 'hidden', the reference line will be clipped to the canvas. If set to 'visible', the reference line will be drawn completely. If set to 'extendDomain', the domain of the overflown axis will be extended such that the reference line fits into the canvas.
+            label: If set a string or a number, default label will be drawn, and the option is content.
             is_front: If set true, the line will be rendered in front of bars in BarChart, etc.
             style: The style of the component.
             key: A unique key for the component.

reflex/components/recharts/general.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 from typing import Any, Dict, List, Union
 
 from reflex.components.component import MemoizationLeaf
-from reflex.constants import EventTriggers
+from reflex.event import EventHandler
 from reflex.vars import Var
 
 from .recharts import (
@@ -94,20 +94,29 @@ class Legend(Recharts):
     # The margin of chart container, usually calculated internally.
     margin: Var[Dict[str, Any]]
 
-    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
-        """Get the event triggers that pass the component's value to the handler.
+    # The customized event handler of click on the items in this group
+    on_click: EventHandler[lambda: []]
 
-        Returns:
-            A dict mapping the event trigger to the var that is passed to the handler.
-        """
-        return {
-            EventTriggers.ON_CLICK: lambda: [],
-            EventTriggers.ON_MOUSE_MOVE: lambda: [],
-            EventTriggers.ON_MOUSE_OVER: lambda: [],
-            EventTriggers.ON_MOUSE_OUT: lambda: [],
-            EventTriggers.ON_MOUSE_ENTER: lambda: [],
-            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
-        }
+    # The customized event handler of mousedown on the items in this group
+    on_mouse_down: EventHandler[lambda: []]
+
+    # The customized event handler of mouseup on the items in this group
+    on_mouse_up: EventHandler[lambda: []]
+
+    # The customized event handler of mousemove on the items in this group
+    on_mouse_move: EventHandler[lambda: []]
+
+    # The customized event handler of mouseover on the items in this group
+    on_mouse_over: EventHandler[lambda: []]
+
+    # The customized event handler of mouseout on the items in this group
+    on_mouse_out: EventHandler[lambda: []]
+
+    # The customized event handler of mouseenter on the items in this group
+    on_mouse_enter: EventHandler[lambda: []]
+
+    # The customized event handler of mouseleave on the items in this group
+    on_mouse_leave: EventHandler[lambda: []]
 
 
 class GraphingTooltip(Recharts):
@@ -178,12 +187,6 @@ class LabelList(Recharts):
     # The offset to the specified "position"
     offset: Var[int]
 
-    # Color of the fill
-    fill: Var[str]
-
-    # Color of the stroke
-    stroke: Var[str]
-
 
 responsive_container = ResponsiveContainer.create
 legend = Legend.create

reflex/components/recharts/general.pyi

@@ -9,7 +9,7 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, List, Union
 from reflex.components.component import MemoizationLeaf
-from reflex.constants import EventTriggers
+from reflex.event import EventHandler
 from reflex.vars import Var
 from .recharts import (
     LiteralIconType,
@@ -109,7 +109,6 @@ class ResponsiveContainer(Recharts, MemoizationLeaf):
         ...
 
 class Legend(Recharts):
-    def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -175,9 +174,27 @@ class Legend(Recharts):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_mouse_enter: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -193,6 +210,15 @@ class Legend(Recharts):
         on_mouse_over: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         **props
     ) -> "Legend":
         """Create the component.
@@ -497,8 +523,6 @@ class LabelList(Recharts):
             ]
         ] = None,
         offset: Optional[Union[Var[int], int]] = None,
-        fill: Optional[Union[Var[str], str]] = None,
-        stroke: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -559,8 +583,6 @@ class LabelList(Recharts):
             data_key: The key of a group of label values in data.
             position: The position of each label relative to it view box。"Top" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
             offset: The offset to the specified "position"
-            fill: Color of the fill
-            stroke: Color of the stroke
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.