streamlit-react-components 0.1.1__py3-none-any.whl → 1.0.1__py3-none-any.whl

streamlit_react_components/common/__init__.py

@@ -8,6 +8,7 @@ from .data_table import data_table
 from .step_indicator import step_indicator
 from .button_group import button_group
 from .chart_legend import chart_legend
+from .plotly_chart import plotly_chart
 
 __all__ = [
     "panel",
@@ -18,4 +19,5 @@ __all__ = [
     "step_indicator",
     "button_group",
     "chart_legend",
+    "plotly_chart",
 ]

streamlit_react_components/common/button_group.py

@@ -26,8 +26,11 @@ def button_group(
                  - id: Unique identifier
                  - label: Button text (optional)
                  - icon: Button icon/emoji (optional)
-                 - color: Button color: "blue", "green", "red", "yellow" (optional)
+                 - color: Preset name ("blue", "green", "red", "yellow", "purple",
+                   "slate") or hex value like "#94a3b8" (optional)
                  - disabled: Whether button is disabled (optional)
+                 - style: Inline CSS styles dict for this button (optional)
+                 - className: Tailwind CSS classes for this button (optional)
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
         key: Unique key for the component
@@ -36,6 +39,7 @@ def button_group(
         The ID of the clicked button, or None if no click
 
     Example:
+        # Using preset colors
         clicked = button_group(
             buttons=[
                 {"id": "view", "icon": "👁️"},
@@ -44,6 +48,14 @@ def button_group(
                 {"id": "reject", "icon": "✕", "color": "red"}
             ]
         )
+
+        # Using hex colors and custom styling
+        clicked = button_group(
+            buttons=[
+                {"id": "custom", "icon": "🎨", "color": "#ff5733"},
+                {"id": "styled", "label": "Styled", "style": {"padding": "12px"}}
+            ]
+        )
         if clicked == "approve":
             approve_item()
     """

streamlit_react_components/common/plotly_chart.py

@@ -0,0 +1,284 @@
+"""PlotlyChart component - Render Plotly charts with full interactivity."""
+
+import streamlit as st
+import streamlit.components.v1 as components
+from pathlib import Path
+from typing import Dict, Any, Optional, List, Union
+
+_FRONTEND_DIR = Path(__file__).parent.parent / "_frontend"
+
+_component = components.declare_component(
+    "streamlit_react_components",
+    path=str(_FRONTEND_DIR),
+)
+
+
+# Global key for expanded chart dialog - only ONE dialog can be open at a time
+_EXPANDED_DIALOG_KEY = "_plotly_expanded_chart_dialog"
+_PROCESSED_EXPAND_KEY = "_plotly_processed_expand_ts"
+
+
+def _maybe_render_expanded_dialog() -> None:
+    """Check if an expanded chart dialog should be rendered. Call at start of plotly_chart()."""
+    import plotly.graph_objects as go
+
+    if _EXPANDED_DIALOG_KEY not in st.session_state:
+        return
+
+    dialog_data = st.session_state[_EXPANDED_DIALOG_KEY]
+    if not dialog_data.get("open"):
+        return
+
+    # Clear the flag IMMEDIATELY to prevent re-rendering on subsequent plotly_chart calls
+    st.session_state[_EXPANDED_DIALOG_KEY] = {"open": False}
+
+    figure_dict = dialog_data["figure"]
+    title = dialog_data.get("title", "")
+
+    @st.dialog(title or "Chart View", width="large")
+    def _expanded_dialog():
+        fig = go.Figure(figure_dict)
+        st.plotly_chart(fig, width="stretch", key="_expanded_plotly_chart")
+
+    _expanded_dialog()
+
+
+def _dataframe_to_figure(
+    data: Any,
+    x: Optional[str],
+    y: Optional[Union[str, List[str]]],
+    color: Optional[str],
+    chart_type: str,
+    title: Optional[str],
+) -> Dict[str, Any]:
+    """Convert a DataFrame to a Plotly figure dict."""
+    traces = []
+    layout: Dict[str, Any] = {}
+
+    if title:
+        layout["title"] = title
+
+    # Determine y columns
+    y_cols = [y] if isinstance(y, str) else (y or [])
+
+    # Color grouping
+    if color and color in data.columns:
+        groups = data[color].unique()
+        for group in groups:
+            group_data = data[data[color] == group]
+            for y_col in y_cols:
+                trace = _create_trace(
+                    chart_type,
+                    group_data[x].tolist() if x else list(range(len(group_data))),
+                    group_data[y_col].tolist(),
+                    f"{group}" if len(y_cols) == 1 else f"{group} - {y_col}",
+                )
+                traces.append(trace)
+    else:
+        # No color grouping
+        x_data = data[x].tolist() if x else list(range(len(data)))
+        for y_col in y_cols:
+            trace = _create_trace(
+                chart_type,
+                x_data,
+                data[y_col].tolist(),
+                y_col if len(y_cols) > 1 else None,
+            )
+            traces.append(trace)
+
+    return {"data": traces, "layout": layout}
+
+
+def _create_trace(
+    chart_type: str,
+    x_data: List[Any],
+    y_data: List[Any],
+    name: Optional[str],
+) -> Dict[str, Any]:
+    """Create a single Plotly trace based on chart type."""
+    base: Dict[str, Any] = {"x": x_data, "y": y_data}
+    if name:
+        base["name"] = name
+
+    if chart_type == "line":
+        return {"type": "scatter", "mode": "lines", **base}
+    elif chart_type == "scatter":
+        return {"type": "scatter", "mode": "markers", **base}
+    elif chart_type == "bar":
+        return {"type": "bar", **base}
+    elif chart_type == "area":
+        return {"type": "scatter", "mode": "lines", "fill": "tozeroy", **base}
+    elif chart_type == "histogram":
+        return {"type": "histogram", "x": x_data}
+    elif chart_type == "pie":
+        return {"type": "pie", "labels": x_data, "values": y_data}
+    else:
+        # Default to scatter with lines
+        return {"type": "scatter", "mode": "lines", **base}
+
+
+def plotly_chart(
+    figure: Optional[Any] = None,
+    data: Optional[Any] = None,
+    x: Optional[str] = None,
+    y: Optional[Union[str, List[str]]] = None,
+    color: Optional[str] = None,
+    chart_type: str = "line",
+    title: Optional[str] = None,
+    config: Optional[Dict[str, Any]] = None,
+    on_click: bool = False,
+    on_select: bool = False,
+    on_hover: bool = False,
+    on_relayout: bool = False,
+    expandable: bool = False,
+    modal_title: str = "",
+    style: Optional[Dict[str, Any]] = None,
+    class_name: str = "",
+    key: Optional[str] = None,
+) -> Optional[Dict[str, Any]]:
+    """
+    Render a Plotly chart with full interactivity and custom styling.
+
+    Supports two modes:
+    1. Pass a Plotly figure object directly
+    2. Pass a pandas DataFrame with chart configuration
+
+    Args:
+        figure: Plotly figure object (go.Figure) or dict with 'data' and 'layout'.
+                Takes precedence over `data` parameter.
+        data: pandas DataFrame for quick chart creation
+        x: Column name for x-axis (when using DataFrame)
+        y: Column name(s) for y-axis - string or list of strings (when using DataFrame)
+        color: Column name for color grouping (when using DataFrame)
+        chart_type: Chart type when using DataFrame - "line", "bar", "scatter",
+                   "area", "pie", or "histogram" (default "line")
+        title: Chart title (when using DataFrame)
+        config: Plotly config options (displayModeBar, scrollZoom, etc.)
+        on_click: Enable click events (returns clicked points)
+        on_select: Enable selection events (box/lasso selection)
+        on_hover: Enable hover events (returns hovered points)
+        on_relayout: Enable relayout events (zoom/pan state)
+        expandable: Show expand button to open chart in full-page dialog
+        modal_title: Title displayed in dialog header when expanded
+        style: Inline CSS styles as a dictionary
+        class_name: Tailwind CSS classes
+        key: Unique key for the component
+
+    Returns:
+        Event dict with 'type' and event data, or None if no event.
+        Event types: 'click', 'select', 'hover', 'relayout'
+
+    Example using Plotly figure:
+        import plotly.graph_objects as go
+
+        fig = go.Figure(
+            data=[go.Scatter(x=[1,2,3], y=[4,5,6], mode='lines+markers')],
+            layout=go.Layout(title='My Chart')
+        )
+
+        event = plotly_chart(
+            figure=fig,
+            on_click=True,
+            on_select=True,
+            style={"height": "400px"}
+        )
+
+        if event and event['type'] == 'click':
+            st.write(f"Clicked: {event['points']}")
+
+    Example using DataFrame:
+        import pandas as pd
+
+        df = pd.DataFrame({
+            'month': ['Jan', 'Feb', 'Mar', 'Apr'],
+            'sales': [100, 150, 120, 180],
+            'orders': [50, 75, 60, 90]
+        })
+
+        # Simple line chart
+        event = plotly_chart(
+            data=df,
+            x='month',
+            y='sales',
+            chart_type='line',
+            title='Monthly Sales',
+            on_click=True
+        )
+
+        # Multiple y columns as bar chart
+        event = plotly_chart(
+            data=df,
+            x='month',
+            y=['sales', 'orders'],
+            chart_type='bar',
+            title='Sales vs Orders'
+        )
+
+        # Scatter with color grouping
+        event = plotly_chart(
+            data=df,
+            x='sales',
+            y='orders',
+            color='month',
+            chart_type='scatter'
+        )
+
+    Example with expandable modal:
+        event = plotly_chart(
+            figure=fig,
+            expandable=True,
+            modal_title="Sales Dashboard",
+            style={"height": "300px"}
+        )
+        # Click the expand button to open chart in full-page dialog
+    """
+    # Check if we should render an expanded dialog (from previous expand click)
+    # This MUST be called first, before any other plotly_chart processing
+    _maybe_render_expanded_dialog()
+
+    # Determine figure dict
+    if figure is not None:
+        # Convert Plotly figure to dict if needed
+        if hasattr(figure, "to_dict"):
+            figure_dict = figure.to_dict()
+        else:
+            figure_dict = figure
+    elif data is not None:
+        # Create figure from DataFrame
+        figure_dict = _dataframe_to_figure(data, x, y, color, chart_type, title)
+    else:
+        raise ValueError("Either 'figure' or 'data' parameter is required")
+
+    # Render the component
+    result = _component(
+        component="plotly_chart",
+        figure=figure_dict,
+        config=config,
+        onClickEnabled=on_click,
+        onSelectEnabled=on_select,
+        onHoverEnabled=on_hover,
+        onRelayoutEnabled=on_relayout,
+        expandable=expandable,
+        modalTitle=modal_title,
+        style=style,
+        className=class_name,
+        key=key,
+        default=None,
+    )
+
+    # Handle expand event - store in session state and trigger rerun
+    if result and isinstance(result, dict) and result.get("type") == "expand":
+        event_ts = result.get("timestamp", 0)
+        last_processed = st.session_state.get(_PROCESSED_EXPAND_KEY, 0)
+
+        # Only process if this is a NEW expand click (different timestamp)
+        if event_ts > last_processed:
+            st.session_state[_PROCESSED_EXPAND_KEY] = event_ts
+            st.session_state[_EXPANDED_DIALOG_KEY] = {
+                "open": True,
+                "figure": result.get("figure", figure_dict),
+                "title": result.get("modalTitle", modal_title)
+            }
+            st.rerun()
+
+    return result

streamlit_react_components/common/section_header.py

@@ -30,7 +30,13 @@ def section_header(
                  - id: Unique identifier for the action
                  - label: Button text (optional)
                  - icon: Button icon (optional)
-                 - color: Button color: "blue", "green", "red", "yellow" (optional)
+                 - color: Preset name ("blue", "green", "red", "yellow", "purple",
+                   "slate") or hex value like "#94a3b8" (optional)
+                 - style: Inline CSS styles dict for this button (optional)
+                 - className: Tailwind CSS classes for this button (optional)
+                 - href: URL for link actions. External URLs (http/https) open
+                   in a new tab. Internal paths return the ID for use with
+                   st.switch_page() (optional)
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
         key: Unique key for the component
@@ -39,13 +45,37 @@ def section_header(
         The ID of the clicked action button, or None if no click
 
     Example:
+        # Using preset colors
         clicked = section_header(
             title="Dashboard",
             icon="📊",
             actions=[{"id": "refresh", "label": "Refresh", "color": "blue"}]
         )
-        if clicked == "refresh":
-            st.rerun()
+
+        # Using hex colors and custom styling
+        clicked = section_header(
+            title="Dashboard",
+            actions=[
+                {"id": "custom", "label": "Custom", "color": "#94a3b8"},
+                {"id": "styled", "label": "Styled", "style": {"padding": "12px"}}
+            ]
+        )
+
+        # External link (opens in new tab)
+        clicked = section_header(
+            title="Resources",
+            actions=[
+                {"id": "docs", "label": "Documentation", "href": "https://docs.example.com", "icon": "📚"}
+            ]
+        )
+
+        # Internal navigation
+        clicked = section_header(
+            title="Settings",
+            actions=[{"id": "home", "label": "Home", "icon": "🏠"}]
+        )
+        if clicked == "home":
+            st.switch_page("pages/home.py")
     """
     return _component(
         component="section_header",

streamlit_react_components/common/stat_card.py

@@ -27,19 +27,28 @@ def stat_card(
     Args:
         label: The description label (e.g., "Total Users")
         value: The statistic value to display
-        color: Accent color: "blue", "green", "red", "yellow", "purple"
+        color: Accent color - preset name ("blue", "green", "red", "yellow",
+               "purple", "slate") or hex value (e.g., "#94a3b8")
         icon: Optional emoji or icon to display with the label
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
         key: Unique key for the component
 
     Example:
+        # Using preset color
         stat_card(
             label="Within Threshold",
             value="4",
             color="green",
             style={"minWidth": "150px"}
         )
+
+        # Using hex color
+        stat_card(
+            label="Custom Color",
+            value="42",
+            color="#ff5733"
+        )
     """
     _component(
         component="stat_card",

streamlit_react_components/form/form_slider.py

@@ -34,7 +34,8 @@ def form_slider(
         max_val: Maximum value
         step: Step increment (default 1)
         unit: Unit suffix to display (e.g., "%", "hrs")
-        color: Accent color: "blue", "green", "red", "yellow", "purple"
+        color: Accent color - preset name ("blue", "green", "red", "yellow",
+               "purple", "slate") or hex value (e.g., "#94a3b8")
         style: Inline CSS styles as a dictionary
         class_name: Tailwind CSS classes
         key: Unique key for the component
@@ -43,6 +44,7 @@ def form_slider(
         The current slider value
 
     Example:
+        # Using preset color
         threshold = form_slider(
             label="Upper Threshold",
             value=90,
@@ -51,6 +53,15 @@ def form_slider(
             unit="%",
             color="red"
         )
+
+        # Using hex color
+        threshold = form_slider(
+            label="Custom Slider",
+            value=50,
+            min_val=0,
+            max_val=100,
+            color="#ff5733"
+        )
     """
     result = _component(
         component="form_slider",