laipeng/reflex
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tom/recharts missing props (#3645)

Browse Source 
* 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>
This commit is contained in:
Tom Gotsman 2024-07-09 18:10:51 -07:00 committed by GitHub
parent 690b719437
commit 4c61838608
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 35 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
reflex/components/recharts/cartesian.py
View File

@ -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: []]

26
reflex/components/recharts/cartesian.pyi
View File

@ -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[

12
reflex/components/recharts/charts.py
View File

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

20
reflex/components/recharts/charts.pyi
View File

@ -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.