Improve graphing asethetic (#3611)

* Improve graphing asthetic

* Few more updates

* More style updates

* Update reflex/components/recharts/polar.py

Co-authored-by: Masen Furer <m_github@0x26.net>

* Address pr comments

* fix precommit

* Fix types

* PYI

* PYI update

---------

Co-authored-by: Alek Petuskey <alekpetuskey@Aleks-MacBook-Pro.local>
Co-authored-by: Masen Furer <m_github@0x26.net>

reflex/components/recharts/cartesian.py

@@ -86,7 +86,7 @@ class Axis(Recharts):
     tick_count: Var[int]
 
     # If set false, no axis tick lines will be drawn.
-    tick_line: Var[bool]
+    tick_line: Var[bool] = Var.create_safe(False)
 
     # The length of tick line.
     tick_size: Var[int]
@@ -95,7 +95,7 @@ class Axis(Recharts):
     min_tick_gap: Var[int]
 
     # The stroke color of axis
-    stroke: Var[Union[str, Color]]
+    stroke: Var[Union[str, Color]] = Var.create_safe(Color("gray", 9))
 
     # The text anchor of axis
     text_anchor: Var[str]  # 'start', 'middle', 'end'
@@ -186,6 +186,12 @@ class Brush(Recharts):
 
     alias = "RechartsBrush"
 
+    # Stroke color
+    stroke: Var[Union[str, Color]] = Var.create_safe(Color("gray", 9))
+
+    # The fill color of brush.
+    fill: Var[Union[str, Color]] = Var.create_safe(Color("gray", 2))
+
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]
 
@@ -284,22 +290,27 @@ class Area(Cartesian):
     alias = "RechartsArea"
 
     # The color of the line stroke.
-    stroke: Var[Union[str, Color]]
+    stroke: Var[Union[str, Color]] = Var.create_safe(Color("accent", 9))
 
     # The width of the line stroke.
-    stroke_width: Var[int]
+    stroke_width: Var[int] = Var.create_safe(1)
 
     # The color of the area fill.
-    fill: Var[Union[str, Color]]
+    fill: Var[Union[str, Color]] = Var.create_safe(Color("accent", 5))
 
     # The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' |
-    type_: Var[LiteralAreaType]
+    type_: Var[LiteralAreaType] = Var.create_safe("monotone")
 
-    # If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.
-    dot: Var[bool]
+    # If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.
+    dot: Var[Union[bool, Dict[str, Any]]]
 
-    # The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will have the props calculated internally.
-    active_dot: Var[bool]
+    # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
+    active_dot: Var[Union[bool, Dict[str, Any]]] = Var.create_safe(
+        {
+            "stroke": Color("accent", 2),
+            "fill": Color("accent", 10),
+        }
+    )
 
     # If set false, labels will not be drawn. If set true, labels will be drawn which have the props calculated internally.
     label: Var[bool]
@@ -331,8 +342,7 @@ class Bar(Cartesian):
     stroke_width: Var[int]
 
     # The width of the line stroke.
-    fill: Var[Union[str, Color]]
-
+    fill: Var[Union[str, Color]] = Var.create_safe(Color("accent", 9))
     # If false set, background of bars will not be drawn. If true set, background of bars will be drawn which have the props calculated internally.
     background: Var[bool]
 
@@ -393,16 +403,26 @@ class Line(Cartesian):
     type_: Var[LiteralAreaType]
 
     # The color of the line stroke.
-    stroke: Var[Union[str, Color]]
+    stroke: Var[Union[str, Color]] = Var.create_safe(Color("accent", 9))
 
     # The width of the line stroke.
     stoke_width: Var[int]
 
-    # If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.
-    dot: Var[bool]
+    # The dot is shown when mouse enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
+    dot: Var[Union[bool, Dict[str, Any]]] = Var.create_safe(
+        {
+            "stroke": Color("accent", 10),
+            "fill": Color("accent", 4),
+        }
+    )
 
-    # The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will have the props calculated internally.
-    active_dot: Var[bool]
+    # The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
+    active_dot: Var[Union[bool, Dict[str, Any]]] = Var.create_safe(
+        {
+            "stroke": Color("accent", 2),
+            "fill": Color("accent", 10),
+        }
+    )
 
     # If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
     label: Var[bool]
@@ -455,7 +475,7 @@ class Scatter(Recharts):
     line_type: Var[LiteralLineType]
 
     # The fill
-    fill: Var[Union[str, Color]]
+    fill: Var[Union[str, Color]] = Var.create_safe(Color("accent", 9))
 
     # the name
     name: Var[Union[str, int]]
@@ -531,6 +551,9 @@ class Funnel(Recharts):
     # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
     animation_easing: Var[LiteralAnimationEasing]
 
+    # stroke color
+    stroke: Var[Union[str, Color]] = Var.create_safe(Color("gray", 3))
+
     # Valid children components
     _valid_children: List[str] = ["LabelList", "Cell"]
 
@@ -582,7 +605,7 @@ class ErrorBar(Recharts):
     width: Var[int]
 
     # The stroke color of error bar.
-    stroke: Var[Union[str, Color]]
+    stroke: Var[Union[str, Color]] = Var.create_safe(Color("gray", 8))
 
     # The stroke width of error bar.
     stroke_width: Var[int]
@@ -771,6 +794,9 @@ class CartesianGrid(Grid):
     # The pattern of dashes and gaps used to paint the lines of the grid
     stroke_dasharray: Var[str]
 
+    # the stroke color of grid
+    stroke: Var[Union[str, Color]] = Var.create_safe(Color("gray", 7))
+
 
 class CartesianAxis(Grid):
     """A CartesianAxis component in Recharts."""

reflex/components/recharts/cartesian.pyi

@@ -663,6 +663,8 @@ class Brush(Recharts):
     def create(  # type: ignore
         cls,
         *children,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
+        fill: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         data_key: Optional[Union[Var[Union[int, str]], str, int]] = None,
         x: Optional[Union[Var[int], int]] = None,
         y: Optional[Union[Var[int], int]] = None,
@@ -673,8 +675,6 @@ class Brush(Recharts):
         gap: Optional[Union[Var[int], int]] = None,
         start_index: Optional[Union[Var[int], int]] = None,
         end_index: Optional[Union[Var[int], int]] = None,
-        fill: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
-        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -690,6 +690,8 @@ class Brush(Recharts):
 
         Args:
             *children: The children of the component.
+            stroke: The stroke color of brush
+            fill: The fill color of brush
             data_key: The key of data displayed in the axis.
             x: The x-coordinate of brush.
             y: The y-coordinate of brush.
@@ -700,8 +702,6 @@ class Brush(Recharts):
             gap: The data with gap of refreshing chart. If the option is not set, the chart will be refreshed every time
             start_index: The default start index of brush. If the option is not set, the start index will be 0.
             end_index: The default end index of brush. If the option is not set, the end index will be 1.
-            fill: The fill color of brush
-            stroke: The stroke color of brush
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -886,8 +886,12 @@ class Area(Cartesian):
                 ],
             ]
         ] = None,
-        dot: Optional[Union[Var[bool], bool]] = None,
-        active_dot: Optional[Union[Var[bool], bool]] = None,
+        dot: Optional[
+            Union[Var[Union[Dict[str, Any], bool]], bool, Dict[str, Any]]
+        ] = None,
+        active_dot: Optional[
+            Union[Var[Union[Dict[str, Any], bool]], bool, Dict[str, Any]]
+        ] = None,
         label: Optional[Union[Var[bool], bool]] = None,
         stack_id: Optional[Union[Var[Union[int, str]], str, int]] = None,
         unit: Optional[Union[Var[Union[int, str]], str, int]] = None,
@@ -994,8 +998,8 @@ class Area(Cartesian):
             stroke_width: The width of the line stroke.
             fill: The color of the area fill.
             type_: The interpolation type of area. And customized interpolation function can be set to type. 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter' |
-            dot: If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.
-            active_dot: The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will have the props calculated internally.
+            dot: If false set, dots will not be drawn. If true set, dots will be drawn which have the props calculated internally.
+            active_dot: The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
             label: If set false, labels will not be drawn. If set true, labels will be drawn which have the props calculated internally.
             stack_id: The stack id of area, when two areas have the same value axis and same stack_id, then the two areas are stacked in order.
             unit: The unit of data. This option will be used in tooltip.
@@ -1229,8 +1233,12 @@ class Line(Cartesian):
         ] = None,
         stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         stoke_width: Optional[Union[Var[int], int]] = None,
-        dot: Optional[Union[Var[bool], bool]] = None,
-        active_dot: Optional[Union[Var[bool], bool]] = None,
+        dot: Optional[
+            Union[Var[Union[Dict[str, Any], bool]], bool, Dict[str, Any]]
+        ] = None,
+        active_dot: Optional[
+            Union[Var[Union[Dict[str, Any], bool]], bool, Dict[str, Any]]
+        ] = None,
         label: Optional[Union[Var[bool], bool]] = None,
         hide: Optional[Union[Var[bool], bool]] = None,
         connect_nulls: Optional[Union[Var[bool], bool]] = None,
@@ -1337,8 +1345,8 @@ class Line(Cartesian):
             type_: The interpolation type of line. And customized interpolation function can be set to type. It's the same as type in Area.
             stroke: The color of the line stroke.
             stoke_width: The width of the line stroke.
-            dot: If set false, dots will not be drawn. If set true, dots will be drawn which have the props calculated internally.
-            active_dot: The dot is shown when a user enters an area chart and this chart has a tooltip. If set false, no active dot will be drawn. If set true, an active dot will be drawn which will have the props calculated internally.
+            dot: The dot is shown when mouse enter a line chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
+            active_dot: The dot is shown when user enter an area chart and this chart has tooltip. If false set, no active dot will not be drawn. If true set, active dot will be drawn which have the props calculated internally.
             label: If false set, labels will not be drawn. If true set, labels will be drawn which have the props calculated internally.
             hide: Hides the line when true, useful when toggling visibility state via legend.
             connect_nulls: Whether to connect a graph line across null points.
@@ -1571,6 +1579,7 @@ class Funnel(Recharts):
                 Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"],
             ]
         ] = None,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -1642,6 +1651,7 @@ class Funnel(Recharts):
             animation_begin: Specifies when the animation should begin, the unit of this option is ms.
             animation_duration: Specifies the duration of animation, the unit of this option is ms.
             animation_easing: The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
+            stroke: stroke color
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.
@@ -2240,6 +2250,7 @@ class CartesianGrid(Grid):
         fill: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         fill_opacity: Optional[Union[Var[float], float]] = None,
         stroke_dasharray: Optional[Union[Var[str], str]] = None,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         x: Optional[Union[Var[int], int]] = None,
         y: Optional[Union[Var[int], int]] = None,
         width: Optional[Union[Var[int], int]] = None,
@@ -2308,6 +2319,7 @@ class CartesianGrid(Grid):
             fill: The background of grid.
             fill_opacity: The opacity of the background used to fill the space between grid lines
             stroke_dasharray: The pattern of dashes and gaps used to paint the lines of the grid
+            stroke: the stroke color of grid
             x: The x-coordinate of grid.
             y: The y-coordinate of grid.
             width: The width of grid.

reflex/components/recharts/charts.py

@@ -7,6 +7,7 @@
 from reflex.components.component import Component
 from reflex.components.recharts.general import ResponsiveContainer
 from reflex.constants import EventTriggers
+from reflex.constants.colors import Color
 from reflex.event import EventHandler
 from reflex.vars import Var
 
@@ -442,6 +443,9 @@ class FunnelChart(ChartBase):
     # The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
     margin: Var[Dict[str, Any]]
 
+    # The stroke color of each bar. String | Object
+    stroke: Var[Union[str, Color]]
+
     # Valid children components
     _valid_children: List[str] = ["Legend", "GraphingTooltip", "Funnel"]
 

reflex/components/recharts/charts.pyi

@@ -5,6 +5,7 @@
 # ------------------------------------------------------
 from typing import Any, Callable, Dict, List, Literal, Optional, Union, overload
 
+from reflex.constants.colors import Color
 from reflex.event import EventHandler, EventSpec
 from reflex.style import Style
 from reflex.vars import BaseVar, Var
@@ -962,6 +963,7 @@ class FunnelChart(ChartBase):
         *children,
         layout: Optional[Union[Var[str], str]] = None,
         margin: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         width: Optional[Union[Var[Union[int, str]], str, int]] = None,
         height: Optional[Union[Var[Union[int, str]], str, int]] = None,
         style: Optional[Style] = None,
@@ -1023,6 +1025,7 @@ class FunnelChart(ChartBase):
             *children: The children of the chart component.
             layout: The layout of bars in the chart. centeric
             margin: The sizes of whitespace around the chart, i.e. {"top": 50, "right": 30, "left": 20, "bottom": 5}.
+            stroke: The stroke color of each bar. String | Object
             width: The width of chart container. String or Integer
             height: The height of chart container.
             style: The style of the component.

reflex/components/recharts/general.py

@@ -139,22 +139,36 @@ class GraphingTooltip(Recharts):
     filter_null: Var[bool]
 
     # If set false, no cursor will be drawn when tooltip is active.
-    cursor: Var[bool]
+    cursor: Var[Union[Dict[str, Any], bool]] = Var.create_safe(
+        {
+            "strokeWidth": 1,
+            "fill": Color("gray", 3),
+        }
+    )
 
     # The box of viewing area, which has the shape of {x: someVal, y: someVal, width: someVal, height: someVal}, usually calculated internally.
     view_box: Var[Dict[str, Any]]
 
     # The style of default tooltip content item which is a li element. DEFAULT: {}
-    item_style: Var[Dict[str, Any]]
+    item_style: Var[Dict[str, Any]] = Var.create_safe(
+        {
+            "color": Color("gray", 12),
+        }
+    )
 
     # The style of tooltip wrapper which is a dom element. DEFAULT: {}
     wrapper_style: Var[Dict[str, Any]]
-
     # The style of tooltip content which is a dom element. DEFAULT: {}
-    content_style: Var[Dict[str, Any]]
+    content_style: Var[Dict[str, Any]] = Var.create_safe(
+        {
+            "background": Color("gray", 1),
+            "borderColor": Color("gray", 4),
+            "borderRadius": "8px",
+        }
+    )
 
     # The style of default tooltip label which is a p element. DEFAULT: {}
-    label_style: Var[Dict[str, Any]]
+    label_style: Var[Dict[str, Any]] = Var.create_safe({"color": Color("gray", 11)})
 
     # This option allows the tooltip to extend beyond the viewBox of the chart itself. DEFAULT: { x: false, y: false }
     allow_escape_view_box: Var[Dict[str, bool]] = Var.create_safe(
@@ -216,11 +230,11 @@ class LabelList(Recharts):
     # The offset to the specified "position"
     offset: Var[int]
 
-    # The color of the line stroke.
-    stroke: Var[Union[str, Color]]
+    # The fill color of each label
+    fill: Var[Union[str, Color]] = Var.create_safe(Color("gray", 10))
 
-    # The width of the line stroke.
-    fill: Var[Union[str, Color]]
+    # The stroke color of each label
+    stroke: Var[Union[str, Color]] = Var.create_safe("none")
 
 
 responsive_container = ResponsiveContainer.create

reflex/components/recharts/general.pyi

@@ -252,7 +252,9 @@ class GraphingTooltip(Recharts):
         separator: Optional[Union[Var[str], str]] = None,
         offset: Optional[Union[Var[int], int]] = None,
         filter_null: Optional[Union[Var[bool], bool]] = None,
-        cursor: Optional[Union[Var[bool], bool]] = None,
+        cursor: Optional[
+            Union[Var[Union[Dict[str, Any], bool]], Dict[str, Any], bool]
+        ] = None,
         view_box: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         item_style: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
         wrapper_style: Optional[Union[Var[Dict[str, Any]], Dict[str, Any]]] = None,
@@ -541,8 +543,8 @@ class LabelList(Recharts):
             ]
         ] = None,
         offset: Optional[Union[Var[int], int]] = None,
-        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         fill: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
+        stroke: Optional[Union[Var[Union[Color, str]], str, Color]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -603,8 +605,8 @@ 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"
-            stroke: The color of the line stroke.
-            fill: The width of the line stroke.
+            fill: The fill color of each label
+            stroke: The stroke color of each label
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.