reflex 0.2.9a2__py3-none-any.whl → 0.3.0a2__py3-none-any.whl

reflex/components/graphing/recharts/charts.py

@@ -0,0 +1,456 @@
+"""A module that defines the chart components in Recharts."""
+from __future__ import annotations
+
+from typing import Any, Dict, List, Union
+
+from reflex.components.component import Component
+from reflex.components.graphing.recharts.general import ResponsiveContainer
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+
+from .recharts import RechartsCharts
+
+
+class ChartBase(RechartsCharts):
+    """A component that wraps a Recharts charts."""
+
+    # The source data, in which each element is an object.
+    data: Var[List[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.
+    sync_id: Var[str]
+
+    # 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
+    sync_method: Var[str]
+
+    # The width of chart container. String or Integer
+    width: Var[Union[str, int]] = "100%"  # type: ignore
+
+    # The height of chart container.
+    height: Var[Union[str, int]] = "100%"  # type: ignore
+
+    # The layout of area in the chart. 'horizontal' | 'vertical'
+    layout: Var[str]
+
+    # The sizes of whitespace around the chart.
+    margin: Var[Dict[str, Any]]
+
+    # 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'
+    stack_offset: Var[str]
+
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            EventTriggers.ON_CLICK: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create a chart component.
+
+        Args:
+            *children: The children of the chart component.
+            **props: The properties of the chart component.
+
+        Returns:
+            The chart component wrapped in a responsive container.
+        """
+        return ResponsiveContainer.create(
+            super().create(*children, **props),
+            width=props.pop("width", "100%"),
+            height=props.pop("height", "100%"),
+        )
+
+
+class AreaChart(ChartBase):
+    """An Area chart component in Recharts."""
+
+    tag = "AreaChart"
+
+    # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
+    base_value: Var[Union[int, str]]
+
+    # 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.
+    stack_offset: Var[str]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Area",
+    ]
+
+
+class BarChart(ChartBase):
+    """A Bar chart component in Recharts."""
+
+    tag = "BarChart"
+
+    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
+    bar_category_gap: Var[Union[str, int]]  # type: ignore
+
+    # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
+    bar_gap: Var[Union[str, int]]  # type: ignore
+
+    # The width of all the bars in the chart. Number
+    bar_size: Var[int]
+
+    # The maximum width of all the bars in a horizontal BarChart, or maximum height in a vertical BarChart.
+    max_bar_size: Var[int]
+
+    # 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.
+    stack_offset: Var[str]
+
+    # 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.)
+    reverse_stack_order: Var[bool]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Bar",
+    ]
+
+
+class LineChart(ChartBase):
+    """A Line chart component in Recharts."""
+
+    tag = "LineChart"
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Line",
+    ]
+
+
+class ComposedChart(ChartBase):
+    """A Composed chart component in Recharts."""
+
+    tag = "ComposedChart"
+
+    # The base value of area. Number | 'dataMin' | 'dataMax' | 'auto'
+    base_value: Var[Union[int, str]]
+
+    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
+    bar_category_gap: Var[Union[str, int]]  # type: ignore
+
+    # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
+    bar_gap: Var[int]
+
+    # The width of all the bars in the chart. Number
+    bar_size: Var[int]
+
+    # 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.)
+    reverse_stack_order: Var[bool]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Area",
+        "Line",
+        "Bar",
+    ]
+
+
+class PieChart(ChartBase):
+    """A Pie chart component in Recharts."""
+
+    tag = "PieChart"
+
+    # Valid children components
+    valid_children: List[str] = [
+        "PolarAngleAxis",
+        "PolarRadiusAxis",
+        "PolarGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Pie",
+    ]
+
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            EventTriggers.ON_CLICK: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class RadarChart(ChartBase):
+    """A Radar chart component in Recharts."""
+
+    tag = "RadarChart"
+
+    # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
+    cx: Var[Union[int, str]]
+
+    # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
+    cy: Var[Union[int, str]]
+
+    # The angle of first radial direction line.
+    start_angle: Var[int]
+
+    # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.
+    end_angle: Var[int]
+
+    # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
+    inner_radius: Var[Union[int, str]]
+
+    # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
+    outer_radius: Var[Union[int, str]]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "PolarAngleAxis",
+        "PolarRadiusAxis",
+        "PolarGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Radar",
+    ]
+
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            EventTriggers.ON_CLICK: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class RadialBarChart(ChartBase):
+    """A RadialBar chart component in Recharts."""
+
+    tag = "RadialBarChart"
+
+    # The The x-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of width. Number | Percentage
+    cx: Var[Union[int, str]]
+
+    # The The y-coordinate of center. If set a percentage, the final value is obtained by multiplying the percentage of height. Number | Percentage
+    cy: Var[Union[int, str]]
+
+    # The angle of first radial direction line.
+    start_angle: Var[int]
+
+    # The angle of last point in the circle which should be startAngle - 360 or startAngle + 360. We'll calculate the direction of chart by 'startAngle' and 'endAngle'.
+    end_angle: Var[int]
+
+    # The inner radius of first circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
+    inner_radius: Var[Union[int, str]]
+
+    # The outer radius of last circle grid. If set a percentage, the final value is obtained by multiplying the percentage of maxRadius which is calculated by the width, height, cx, cy. Number | Percentage
+    outer_radius: Var[Union[int, str]]
+
+    # The gap between two bar categories, which can be a percent value or a fixed value. Percentage | Number
+    bar_category_gap: Var[Union[int, str]]
+
+    # The gap between two bars in the same category, which can be a percent value or a fixed value. Percentage | Number
+    bar_gap: Var[str]
+
+    # The size of each bar. If the barSize is not specified, the size of bar will be calculated by the barCategoryGap, barGap and the quantity of bar groups.
+    bar_size: Var[int]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "PolarAngleAxis",
+        "PolarRadiusAxis",
+        "PolarGrid",
+        "Legend",
+        "GraphingTooltip",
+        "RadialBar",
+    ]
+
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            EventTriggers.ON_CLICK: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class ScatterChart(ChartBase):
+    """A Scatter chart component in Recharts."""
+
+    tag = "ScatterChart"
+
+    # Valid children components
+    valid_children: List[str] = [
+        "XAxis",
+        "YAxis",
+        "ZAxis",
+        "ReferenceArea",
+        "ReferenceDot",
+        "ReferenceLine",
+        "Brush",
+        "CartesianGrid",
+        "Legend",
+        "GraphingTooltip",
+        "Scatter",
+    ]
+
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            EventTriggers.ON_CLICK: lambda: [],
+            EventTriggers.ON_MOUSE_OVER: lambda: [],
+            EventTriggers.ON_MOUSE_OUT: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class FunnelChart(RechartsCharts):
+    """A Funnel chart component in Recharts."""
+
+    tag = "FunnelChart"
+
+    # The source data, in which each element is an object.
+    data: Var[List[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.
+    sync_id: Var[str]
+
+    # 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
+    sync_method: Var[str]
+
+    # The width of chart container. String or Integer
+    width: Var[Union[str, int]] = "100%"  # type: ignore
+
+    # The height of chart container.
+    height: Var[Union[str, int]] = "100%"  # type: ignore
+
+    # The layout of area in the chart. 'horizontal' | 'vertical'
+    layout: Var[str]
+
+    # The sizes of whitespace around the chart.
+    margin: Var[Dict[str, Any]]
+
+    # 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'
+    stack_offset: Var[str]
+
+    # The layout of bars in the chart. centeric
+    layout: Var[str]
+
+    # Valid children components
+    valid_children: List[str] = ["Legend", "GraphingTooltip", "Funnel"]
+
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            EventTriggers.ON_CLICK: lambda: [],
+            EventTriggers.ON_MOUSE_ENTER: lambda: [],
+            EventTriggers.ON_MOUSE_MOVE: lambda: [],
+            EventTriggers.ON_MOUSE_LEAVE: lambda: [],
+        }
+
+
+class Treemap(RechartsCharts):
+    """A Treemap chart component in Recharts."""
+
+    tag = "Treemap"
+
+    # The width of chart container. String or Integer
+    width: Var[Union[str, int]] = "100%"  # type: ignore
+
+    # The height of chart container.
+    height: Var[Union[str, int]] = "100%"  # type: ignore
+
+    # data of treemap. Array
+    data: Var[List[Dict[str, Any]]]
+
+    # The key of a group of data which should be unique in a treemap. String | Number | Function
+    data_key: Var[Union[str, int]]
+
+    # The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given. Number
+    aspect_ratio: Var[int]
+
+    # If set false, animation of area will be disabled.
+    is_animation_active: Var[bool]
+
+    # Specifies when the animation should begin, the unit of this option is ms.
+    animation_begin: Var[int]
+
+    # Specifies the duration of animation, the unit of this option is ms.
+    animation_duration: Var[int]
+
+    # The type of easing function. 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'
+    animation_easing: Var[str]
+
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create a chart component.
+
+        Args:
+            *children: The children of the chart component.
+            **props: The properties of the chart component.
+
+        Returns:
+            The Treemap component wrapped in a responsive container.
+        """
+        return ResponsiveContainer.create(
+            super().create(*children, **props),
+            width=props.pop("width", "100%"),
+            height=props.pop("height", "100%"),
+        )

reflex/components/graphing/recharts/general.py

@@ -0,0 +1,166 @@
+"""General components for Recharts."""
+from __future__ import annotations
+
+from typing import Any, Dict, List, Union
+
+from reflex.constants import EventTriggers
+from reflex.vars import Var
+
+from .recharts import Recharts
+
+
+class ResponsiveContainer(Recharts):
+    """A base class for responsive containers in Recharts."""
+
+    tag = "ResponsiveContainer"
+
+    # The aspect ratio of the container. The final aspect ratio of the SVG element will be (width / height) * aspect. Number
+    aspect: Var[int]
+
+    # The width of chart container. Can be a number or string
+    width: Var[Union[int, str]]
+
+    # The height of chart container. Number
+    height: Var[Union[int, str]]
+
+    # The minimum width of chart container.
+    min_width: Var[int]
+
+    # The minimum height of chart container. Number
+    min_height: Var[int]
+
+    # If specified a positive number, debounced function will be used to handle the resize event.
+    debounce: Var[int]
+
+    # Valid children components
+    valid_children: List[str] = [
+        "AreaChart",
+        "BarChart",
+        "LineChart",
+        "PieChart",
+        "RadarChart",
+        "RadialBarChart",
+        "ScatterChart",
+        "Treemap",
+        "ComposedChart",
+    ]
+
+
+class Legend(Recharts):
+    """A Legend component in Recharts."""
+
+    tag = "Legend"
+
+    # The width of legend container. Number
+    width: Var[int]
+
+    # The height of legend container. Number
+    height: Var[int]
+
+    # The layout of legend items. 'horizontal' | 'vertical'
+    layout: Var[str]
+
+    # The alignment of legend items in 'horizontal' direction, which can be 'left', 'center', 'right'.
+    align: Var[str]
+
+    # The alignment of legend items in 'vertical' direction, which can be 'top', 'middle', 'bottom'.
+    vertical_align: Var[str]
+
+    # The size of icon in each legend item.
+    icon_size: Var[int]
+
+    # The type of icon in each legend item. 'line' | 'plainline' | 'square' | 'rect' | 'circle' | 'cross' | 'diamond' | 'star' | 'triangle' | 'wye'
+    icon_type: Var[str]
+
+    # The width of chart container, usually calculated internally.
+    chart_width: Var[int]
+
+    # The height of chart container, usually calculated internally.
+    chart_height: Var[int]
+
+    # 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.
+
+        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: [],
+        }
+
+
+class GraphingTooltip(Recharts):
+    """A Tooltip component in Recharts."""
+
+    tag = "Tooltip"
+
+    # The separator between name and value.
+    separator: Var[str]
+
+    # The offset size of tooltip. Number
+    offset: Var[int]
+
+    # When an item of the payload has value null or undefined, this item won't be displayed.
+    filter_null: Var[bool]
+
+    # If set false, no cursor will be drawn when tooltip is active.
+    cursor: Var[bool]
+
+    # 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]]
+
+    # If set true, the tooltip is displayed. If set false, the tooltip is hidden, usually calculated internally.
+    active: Var[bool]
+
+    # If this field is set, the tooltip position will be fixed and will not move anymore.
+    position: Var[Dict[str, Any]]
+
+    # The coordinate of tooltip which is usually calculated internally.
+    coordinate: Var[Dict[str, Any]]
+
+
+class Label(Recharts):
+    """A Label component in Recharts."""
+
+    tag = "Label"
+
+    # 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 value of label, which can be specified by this props or the children of <Label />
+    value: Var[str]
+
+    # The offset of label which can be specified by this props or the children of <Label />
+    offset: Var[int]
+
+    # The position of label which can be specified by this props or the children of <Label />
+    position: Var[str]
+
+
+class LabelList(Recharts):
+    """A LabelList component in Recharts."""
+
+    tag = "LabelList"
+
+    # The key of a group of label values in data.
+    data_key: Var[Union[str, int]]
+
+    # The position of each label relative to it view box。op" | "left" | "right" | "bottom" | "inside" | "outside" | "insideLeft" | "insideRight" | "insideTop" | "insideBottom" | "insideTopLeft" | "insideBottomLeft" | "insideTopRight" | "insideBottomRight" | "insideStart" | "insideEnd" | "end" | "center"
+    position: Var[str]
+
+    # The offset to the specified "position"
+    offset: Var[int]
+
+    # Color of the fill
+    fill: Var[str]
+
+    # Color of the stroke
+    stroke: Var[str]