Tom/recharts missing props (#3645)

* fix axis orientation prop

* add margin prop explanation

* active bar and on animation start

* remove data key from y-axis

* precommit and pyi generator

---------

Co-authored-by: Tom Gotsman <tomgotsman@Toms-MacBook-Pro.local>
Co-authored-by: Tom Gotsman <tomgotsman@toms-mbp.lan>

reflex/components/recharts/cartesian.py

@@ -31,7 +31,7 @@ from .recharts import (
 class Axis(Recharts):
     """A base class for axes in Recharts."""
 
-    # The key of a group of data which should be unique in an area chart.
+    # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
 
     # If set true, the axis do not display in the chart.
@@ -43,9 +43,6 @@ class Axis(Recharts):
     # The height of axis, which can be setted by user.
     height: Var[Union[str, int]]
 
-    # The orientation of axis 'top' | 'bottom'
-    orientation: Var[LiteralOrientationTopBottom]
-
     # The type of axis 'number' | 'category'
     type_: Var[LiteralPolarRadiusType]
 
@@ -132,6 +129,9 @@ class XAxis(Axis):
 
     alias = "RechartsXAxis"
 
+    # The orientation of axis 'top' | 'bottom'
+    orientation: Var[LiteralOrientationTopBottom]
+
     # The id of x-axis which is corresponding to the data.
     x_axis_id: Var[Union[str, int]]
 
@@ -149,9 +149,6 @@ class YAxis(Axis):
     # The orientation of axis 'left' | 'right'
     orientation: Var[LiteralOrientationLeftRight]
 
-    # The key of data displayed in the axis.
-    data_key: Var[Union[str, int]]
-
     # The id of y-axis which is corresponding to the data.
     y_axis_id: Var[Union[str, int]]
 
@@ -357,6 +354,9 @@ class Bar(Cartesian):
     # Max size of the bar
     max_bar_size: Var[int]
 
+    # The active bar is shown when a user enters a bar chart and this chart has tooltip. If set to false, no active bar will be drawn. If set to true, active bar will be drawn with the props calculated internally. If passed an object, active bar will be drawn, and the internally calculated props will be merged with the key value pairs of the passed object.
+    # active_bar: Var[Union[bool, Dict[str, Any]]]
+
     # Valid children components
     _valid_children: List[str] = ["Cell", "LabelList", "ErrorBar"]
 
@@ -373,7 +373,7 @@ class Bar(Cartesian):
     animation_easing: Var[LiteralAnimationEasing]
 
     # The customized event handler of animation start
-    on_animation_begin: EventHandler[lambda: []]
+    on_animation_start: EventHandler[lambda: []]
 
     # The customized event handler of animation end
     on_animation_end: EventHandler[lambda: []]

reflex/components/recharts/cartesian.pyi

@@ -24,9 +24,6 @@ class Axis(Recharts):
         hide: Optional[Union[Var[bool], bool]] = None,
         width: Optional[Union[Var[Union[int, str]], str, int]] = None,
         height: Optional[Union[Var[Union[int, str]], str, int]] = None,
-        orientation: Optional[
-            Union[Var[Literal["top", "bottom"]], Literal["top", "bottom"]]
-        ] = None,
         type_: Optional[
             Union[Var[Literal["number", "category"]], Literal["number", "category"]]
         ] = None,
@@ -148,11 +145,10 @@ class Axis(Recharts):
 
         Args:
             *children: The children of the component.
-            data_key: The key of a group of data which should be unique in an area chart.
+            data_key: The key of data displayed in the axis.
             hide: If set true, the axis do not display in the chart.
             width: The width of axis which is usually calculated internally.
             height: The height of axis, which can be setted by user.
-            orientation: The orientation of axis 'top' | 'bottom'
             type_: The type of axis 'number' | 'category'
             allow_decimals: Allow the ticks of XAxis to be decimals or not.
             allow_data_overflow: When domain of the axis is specified and the type of the axis is 'number', if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value of data is smaller than domain[0] or the maximum value of data is greater than domain[1] so that the axis displays all data values. If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain.
@@ -191,15 +187,15 @@ class XAxis(Axis):
     def create(  # type: ignore
         cls,
         *children,
+        orientation: Optional[
+            Union[Var[Literal["top", "bottom"]], Literal["top", "bottom"]]
+        ] = None,
         x_axis_id: Optional[Union[Var[Union[int, str]], str, int]] = None,
         include_hidden: Optional[Union[Var[bool], bool]] = None,
         data_key: Optional[Union[Var[Union[int, str]], str, int]] = None,
         hide: Optional[Union[Var[bool], bool]] = None,
         width: Optional[Union[Var[Union[int, str]], str, int]] = None,
         height: Optional[Union[Var[Union[int, str]], str, int]] = None,
-        orientation: Optional[
-            Union[Var[Literal["top", "bottom"]], Literal["top", "bottom"]]
-        ] = None,
         type_: Optional[
             Union[Var[Literal["number", "category"]], Literal["number", "category"]]
         ] = None,
@@ -321,13 +317,13 @@ class XAxis(Axis):
 
         Args:
             *children: The children of the component.
+            orientation: The orientation of axis 'top' | 'bottom'
             x_axis_id: The id of x-axis which is corresponding to the data.
             include_hidden: Ensures that all datapoints within a chart contribute to its domain calculation, even when they are hidden
-            data_key: The key of a group of data which should be unique in an area chart.
+            data_key: The key of data displayed in the axis.
             hide: If set true, the axis do not display in the chart.
             width: The width of axis which is usually calculated internally.
             height: The height of axis, which can be setted by user.
-            orientation: The orientation of axis 'top' | 'bottom'
             type_: The type of axis 'number' | 'category'
             allow_decimals: Allow the ticks of XAxis to be decimals or not.
             allow_data_overflow: When domain of the axis is specified and the type of the axis is 'number', if allowDataOverflow is set to be false, the domain will be adjusted when the minimum value of data is smaller than domain[0] or the maximum value of data is greater than domain[1] so that the axis displays all data values. If set to true, graphic elements (line, area, bars) will be clipped to conform to the specified domain.
@@ -369,8 +365,8 @@ class YAxis(Axis):
         orientation: Optional[
             Union[Var[Literal["left", "right"]], Literal["left", "right"]]
         ] = None,
-        data_key: Optional[Union[Var[Union[int, str]], str, int]] = None,
         y_axis_id: Optional[Union[Var[Union[int, str]], str, int]] = None,
+        data_key: Optional[Union[Var[Union[int, str]], str, int]] = None,
         hide: Optional[Union[Var[bool], bool]] = None,
         width: Optional[Union[Var[Union[int, str]], str, int]] = None,
         height: Optional[Union[Var[Union[int, str]], str, int]] = None,
@@ -495,9 +491,9 @@ class YAxis(Axis):
 
         Args:
             *children: The children of the component.
-            orientation: The orientation of axis 'top' | 'bottom'
-            data_key: The key of a group of data which should be unique in an area chart.
+            orientation: The orientation of axis 'left' | 'right'
             y_axis_id: The id of y-axis which is corresponding to the data.
+            data_key: The key of data displayed in the axis.
             hide: If set true, the axis do not display in the chart.
             width: The width of axis which is usually calculated internally.
             height: The height of axis, which can be setted by user.
@@ -1093,10 +1089,10 @@ class Bar(Cartesian):
         class_name: Optional[Any] = None,
         autofocus: Optional[bool] = None,
         custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_animation_begin: Optional[
+        on_animation_end: Optional[
             Union[EventHandler, EventSpec, list, Callable, BaseVar]
         ] = None,
-        on_animation_end: Optional[
+        on_animation_start: Optional[
             Union[EventHandler, EventSpec, list, Callable, BaseVar]
         ] = None,
         on_blur: Optional[

reflex/components/recharts/charts.py

@@ -105,7 +105,7 @@ class CategoricalChartBase(ChartBase):
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
     # If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
@@ -255,7 +255,7 @@ class PieChart(ChartBase):
 
     alias = "RechartsPieChart"
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
     # Valid children components
@@ -291,7 +291,7 @@ class RadarChart(ChartBase):
     # The source data, in which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
     # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
@@ -345,7 +345,7 @@ class RadialBarChart(ChartBase):
     # The source data which each element is an object.
     data: Var[List[Dict[str, Any]]]
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
     # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
@@ -393,7 +393,7 @@ class ScatterChart(ChartBase):
 
     alias = "RechartsScatterChart"
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
     # Valid children components
@@ -439,7 +439,7 @@ class FunnelChart(ChartBase):
     # The layout of bars in the chart. centeric
     layout: Var[str]
 
-    # The sizes of whitespace around the chart.
+    # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
     # Valid children components

reflex/components/recharts/charts.pyi

@@ -177,7 +177,7 @@ class CategoricalChartBase(ChartBase):
         Args:
             *children: The children of the chart component.
             data: The source data, in which each element is an object.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
             layout: The layout of area in the chart. 'horizontal' | 'vertical'
@@ -289,7 +289,7 @@ class AreaChart(CategoricalChartBase):
             *children: The children of the chart component.
             base_value: The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
             data: The source data, in which each element is an object.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
             layout: The layout of area in the chart. 'horizontal' | 'vertical'
@@ -404,7 +404,7 @@ class BarChart(CategoricalChartBase):
             stack_offset: The type of offset function used to generate the lower and upper values in the series array. The four types are built-in offsets in d3-shape. 'expand' | 'none' | 'wiggle' | 'silhouette'
             reverse_stack_order: If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
             data: The source data, in which each element is an object.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
             layout: The layout of area in the chart. 'horizontal' | 'vertical'
@@ -507,7 +507,7 @@ class LineChart(CategoricalChartBase):
         Args:
             *children: The children of the chart component.
             data: The source data, in which each element is an object.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
             layout: The layout of area in the chart. 'horizontal' | 'vertical'
@@ -627,7 +627,7 @@ class ComposedChart(CategoricalChartBase):
             bar_size: The width of all the bars in the chart. Number
             reverse_stack_order: If false set, stacked items will be rendered left to right. If true set, stacked items will be rendered right to left. (Render direction affects SVG layering, not x position.)
             data: The source data, in which each element is an object.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             sync_id: If any two categorical charts(rx.line_chart, rx.area_chart, rx.bar_chart, rx.composed_chart) have the same sync_id, these two charts can sync the position GraphingTooltip, and the start_index, end_index of Brush.
             sync_method: When sync_id is provided, allows customisation of how the charts will synchronize GraphingTooltips and brushes. Using 'index' (default setting), other charts will reuse current datum's index within the data array. In cases where data does not have the same length, this might yield unexpected results. In that case use 'value' which will try to match other charts values, or a fully custom function which will receive tick, data as argument and should return an index. 'index' | 'value' | function
             layout: The layout of area in the chart. 'horizontal' | 'vertical'
@@ -713,7 +713,7 @@ class PieChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.
@@ -768,7 +768,7 @@ class RadarChart(ChartBase):
         Args:
             *children: The children of the chart component.
             data: The source data, in which each element is an object.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             cx: The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
             cy: The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
             start_angle: The angle of first radial direction line.
@@ -867,7 +867,7 @@ class RadialBarChart(ChartBase):
         Args:
             *children: The children of the chart component.
             data: The source data which each element is an object.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             cx: The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
             cy: The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
             start_angle: The angle of first radial direction line.
@@ -938,7 +938,7 @@ class ScatterChart(ChartBase):
 
         Args:
             *children: The children of the chart component.
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.
@@ -1022,7 +1022,7 @@ class FunnelChart(ChartBase):
         Args:
             *children: The children of the chart component.
             layout: The layout of bars in the chart. centeric
-            margin: The sizes of whitespace around the chart.
+            margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.