streamlit-react-components 1.0.0__py3-none-any.whl → 1.0.2__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- streamlit_react_components/_frontend/index.css +1 -1
- streamlit_react_components/_frontend/index.js +36 -36
- streamlit_react_components/common/plotly_chart.py +69 -1
- streamlit_react_components/form/checkbox_group.py +11 -0
- {streamlit_react_components-1.0.0.dist-info → streamlit_react_components-1.0.2.dist-info}/METADATA +24 -1
- {streamlit_react_components-1.0.0.dist-info → streamlit_react_components-1.0.2.dist-info}/RECORD +8 -8
- {streamlit_react_components-1.0.0.dist-info → streamlit_react_components-1.0.2.dist-info}/WHEEL +1 -1
- {streamlit_react_components-1.0.0.dist-info → streamlit_react_components-1.0.2.dist-info}/top_level.txt +0 -0
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"""PlotlyChart component - Render Plotly charts with full interactivity."""
|
|
2
2
|
|
|
3
|
+
import streamlit as st
|
|
3
4
|
import streamlit.components.v1 as components
|
|
4
5
|
from pathlib import Path
|
|
5
6
|
from typing import Dict, Any, Optional, List, Union
|
|
@@ -12,6 +13,36 @@ _component = components.declare_component(
|
|
|
12
13
|
)
|
|
13
14
|
|
|
14
15
|
|
|
16
|
+
# Global key for expanded chart dialog - only ONE dialog can be open at a time
|
|
17
|
+
_EXPANDED_DIALOG_KEY = "_plotly_expanded_chart_dialog"
|
|
18
|
+
_PROCESSED_EXPAND_KEY = "_plotly_processed_expand_ts"
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
def _maybe_render_expanded_dialog() -> None:
|
|
22
|
+
"""Check if an expanded chart dialog should be rendered. Call at start of plotly_chart()."""
|
|
23
|
+
import plotly.graph_objects as go
|
|
24
|
+
|
|
25
|
+
if _EXPANDED_DIALOG_KEY not in st.session_state:
|
|
26
|
+
return
|
|
27
|
+
|
|
28
|
+
dialog_data = st.session_state[_EXPANDED_DIALOG_KEY]
|
|
29
|
+
if not dialog_data.get("open"):
|
|
30
|
+
return
|
|
31
|
+
|
|
32
|
+
# Clear the flag IMMEDIATELY to prevent re-rendering on subsequent plotly_chart calls
|
|
33
|
+
st.session_state[_EXPANDED_DIALOG_KEY] = {"open": False}
|
|
34
|
+
|
|
35
|
+
figure_dict = dialog_data["figure"]
|
|
36
|
+
title = dialog_data.get("title", "")
|
|
37
|
+
|
|
38
|
+
@st.dialog(title or "Chart View", width="large")
|
|
39
|
+
def _expanded_dialog():
|
|
40
|
+
fig = go.Figure(figure_dict)
|
|
41
|
+
st.plotly_chart(fig, width="stretch", key="_expanded_plotly_chart")
|
|
42
|
+
|
|
43
|
+
_expanded_dialog()
|
|
44
|
+
|
|
45
|
+
|
|
15
46
|
def _dataframe_to_figure(
|
|
16
47
|
data: Any,
|
|
17
48
|
x: Optional[str],
|
|
@@ -99,6 +130,8 @@ def plotly_chart(
|
|
|
99
130
|
on_select: bool = False,
|
|
100
131
|
on_hover: bool = False,
|
|
101
132
|
on_relayout: bool = False,
|
|
133
|
+
expandable: bool = False,
|
|
134
|
+
modal_title: str = "",
|
|
102
135
|
style: Optional[Dict[str, Any]] = None,
|
|
103
136
|
class_name: str = "",
|
|
104
137
|
key: Optional[str] = None,
|
|
@@ -125,6 +158,8 @@ def plotly_chart(
|
|
|
125
158
|
on_select: Enable selection events (box/lasso selection)
|
|
126
159
|
on_hover: Enable hover events (returns hovered points)
|
|
127
160
|
on_relayout: Enable relayout events (zoom/pan state)
|
|
161
|
+
expandable: Show expand button to open chart in full-page dialog
|
|
162
|
+
modal_title: Title displayed in dialog header when expanded
|
|
128
163
|
style: Inline CSS styles as a dictionary
|
|
129
164
|
class_name: Tailwind CSS classes
|
|
130
165
|
key: Unique key for the component
|
|
@@ -187,7 +222,20 @@ def plotly_chart(
|
|
|
187
222
|
color='month',
|
|
188
223
|
chart_type='scatter'
|
|
189
224
|
)
|
|
225
|
+
|
|
226
|
+
Example with expandable modal:
|
|
227
|
+
event = plotly_chart(
|
|
228
|
+
figure=fig,
|
|
229
|
+
expandable=True,
|
|
230
|
+
modal_title="Sales Dashboard",
|
|
231
|
+
style={"height": "300px"}
|
|
232
|
+
)
|
|
233
|
+
# Click the expand button to open chart in full-page dialog
|
|
190
234
|
"""
|
|
235
|
+
# Check if we should render an expanded dialog (from previous expand click)
|
|
236
|
+
# This MUST be called first, before any other plotly_chart processing
|
|
237
|
+
_maybe_render_expanded_dialog()
|
|
238
|
+
|
|
191
239
|
# Determine figure dict
|
|
192
240
|
if figure is not None:
|
|
193
241
|
# Convert Plotly figure to dict if needed
|
|
@@ -201,7 +249,8 @@ def plotly_chart(
|
|
|
201
249
|
else:
|
|
202
250
|
raise ValueError("Either 'figure' or 'data' parameter is required")
|
|
203
251
|
|
|
204
|
-
|
|
252
|
+
# Render the component
|
|
253
|
+
result = _component(
|
|
205
254
|
component="plotly_chart",
|
|
206
255
|
figure=figure_dict,
|
|
207
256
|
config=config,
|
|
@@ -209,8 +258,27 @@ def plotly_chart(
|
|
|
209
258
|
onSelectEnabled=on_select,
|
|
210
259
|
onHoverEnabled=on_hover,
|
|
211
260
|
onRelayoutEnabled=on_relayout,
|
|
261
|
+
expandable=expandable,
|
|
262
|
+
modalTitle=modal_title,
|
|
212
263
|
style=style,
|
|
213
264
|
className=class_name,
|
|
214
265
|
key=key,
|
|
215
266
|
default=None,
|
|
216
267
|
)
|
|
268
|
+
|
|
269
|
+
# Handle expand event - store in session state and trigger rerun
|
|
270
|
+
if result and isinstance(result, dict) and result.get("type") == "expand":
|
|
271
|
+
event_ts = result.get("timestamp", 0)
|
|
272
|
+
last_processed = st.session_state.get(_PROCESSED_EXPAND_KEY, 0)
|
|
273
|
+
|
|
274
|
+
# Only process if this is a NEW expand click (different timestamp)
|
|
275
|
+
if event_ts > last_processed:
|
|
276
|
+
st.session_state[_PROCESSED_EXPAND_KEY] = event_ts
|
|
277
|
+
st.session_state[_EXPANDED_DIALOG_KEY] = {
|
|
278
|
+
"open": True,
|
|
279
|
+
"figure": result.get("figure", figure_dict),
|
|
280
|
+
"title": result.get("modalTitle", modal_title)
|
|
281
|
+
}
|
|
282
|
+
st.rerun()
|
|
283
|
+
|
|
284
|
+
return result
|
|
@@ -15,6 +15,7 @@ _component = components.declare_component(
|
|
|
15
15
|
def checkbox_group(
|
|
16
16
|
items: List[Dict[str, Any]],
|
|
17
17
|
label: str = "",
|
|
18
|
+
layout: str = "vertical",
|
|
18
19
|
style: Optional[Dict[str, Any]] = None,
|
|
19
20
|
class_name: str = "",
|
|
20
21
|
key: Optional[str] = None,
|
|
@@ -28,6 +29,7 @@ def checkbox_group(
|
|
|
28
29
|
- label: Display label
|
|
29
30
|
- checked: Initial checked state (optional, default False)
|
|
30
31
|
label: Optional group label
|
|
32
|
+
layout: Layout direction - "vertical" (default) or "horizontal"
|
|
31
33
|
style: Inline CSS styles as a dictionary
|
|
32
34
|
class_name: Tailwind CSS classes
|
|
33
35
|
key: Unique key for the component
|
|
@@ -36,6 +38,7 @@ def checkbox_group(
|
|
|
36
38
|
List of checked item IDs
|
|
37
39
|
|
|
38
40
|
Example:
|
|
41
|
+
# Vertical layout (default)
|
|
39
42
|
selected = checkbox_group(
|
|
40
43
|
label="Parameters",
|
|
41
44
|
items=[
|
|
@@ -45,6 +48,13 @@ def checkbox_group(
|
|
|
45
48
|
]
|
|
46
49
|
)
|
|
47
50
|
# Returns: ["vphp", "lot_co"] if those are checked
|
|
51
|
+
|
|
52
|
+
# Horizontal layout
|
|
53
|
+
selected = checkbox_group(
|
|
54
|
+
label="Options",
|
|
55
|
+
items=[...],
|
|
56
|
+
layout="horizontal"
|
|
57
|
+
)
|
|
48
58
|
"""
|
|
49
59
|
# Get default checked items
|
|
50
60
|
default_checked = [item["id"] for item in items if item.get("checked", False)]
|
|
@@ -53,6 +63,7 @@ def checkbox_group(
|
|
|
53
63
|
component="checkbox_group",
|
|
54
64
|
label=label,
|
|
55
65
|
items=items,
|
|
66
|
+
layout=layout,
|
|
56
67
|
style=style,
|
|
57
68
|
className=class_name,
|
|
58
69
|
key=key,
|
{streamlit_react_components-1.0.0.dist-info → streamlit_react_components-1.0.2.dist-info}/METADATA
RENAMED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Metadata-Version: 2.4
|
|
2
2
|
Name: streamlit-react-components
|
|
3
|
-
Version: 1.0.
|
|
3
|
+
Version: 1.0.2
|
|
4
4
|
Summary: Reusable React-based Streamlit components with Tailwind CSS styling
|
|
5
5
|
License: MIT
|
|
6
6
|
Project-URL: Homepage, https://github.com/your-org/streamlit-react-components
|
|
@@ -498,6 +498,10 @@ plotly_chart(
|
|
|
498
498
|
on_hover: bool = False, # Enable hover events
|
|
499
499
|
on_relayout: bool = False, # Enable zoom/pan events
|
|
500
500
|
|
|
501
|
+
# Expandable dialog
|
|
502
|
+
expandable: bool = False, # Show expand button
|
|
503
|
+
modal_title: str = "", # Dialog header title
|
|
504
|
+
|
|
501
505
|
# Styling
|
|
502
506
|
style: dict = None,
|
|
503
507
|
class_name: str = "",
|
|
@@ -603,6 +607,25 @@ Each point in the `points` array contains:
|
|
|
603
607
|
}
|
|
604
608
|
```
|
|
605
609
|
|
|
610
|
+
#### Expandable Dialog
|
|
611
|
+
|
|
612
|
+
Charts can be expanded into a full-page dialog using Streamlit's native `st.dialog()`:
|
|
613
|
+
|
|
614
|
+
```python
|
|
615
|
+
event = plotly_chart(
|
|
616
|
+
figure=fig,
|
|
617
|
+
expandable=True, # Show expand button in corner
|
|
618
|
+
modal_title="Sales Dashboard", # Title in dialog header
|
|
619
|
+
style={"height": "300px"}
|
|
620
|
+
)
|
|
621
|
+
```
|
|
622
|
+
|
|
623
|
+
**Dialog Features:**
|
|
624
|
+
- Click the expand icon (⛶) in the top-right corner to open
|
|
625
|
+
- Dialog uses Streamlit's native full-width dialog overlay
|
|
626
|
+
- Click outside the dialog or press Escape to close
|
|
627
|
+
- Chart renders at full dialog width for better visibility
|
|
628
|
+
|
|
606
629
|
---
|
|
607
630
|
|
|
608
631
|
### 10. Form Select
|
{streamlit_react_components-1.0.0.dist-info → streamlit_react_components-1.0.2.dist-info}/RECORD
RENAMED
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
streamlit_react_components/__init__.py,sha256=-m5OJx0vsfzD6k2m_2X8eMQXi9pgkreAuDZJoVWbdJ0,673
|
|
2
|
-
streamlit_react_components/_frontend/index.css,sha256=
|
|
2
|
+
streamlit_react_components/_frontend/index.css,sha256=vW-yXHEFGLJUbWgkRewomPA8R3Um6h8kADSJqzEHxIc,26376
|
|
3
3
|
streamlit_react_components/_frontend/index.html,sha256=CjBEtVYlgT_q06BE16EHFrUrJZ6z0MCprrTg7qgAWzw,381
|
|
4
|
-
streamlit_react_components/_frontend/index.js,sha256=
|
|
4
|
+
streamlit_react_components/_frontend/index.js,sha256=PxuSp_m4S-N4YTOJj3kEIWHCBcW_L3PPmJN44HHvzOo,5215566
|
|
5
5
|
streamlit_react_components/common/__init__.py,sha256=xUKaw_X2B2xd6AqW8oLzHupGp-TX3Fij0FjhMNwd-vs,550
|
|
6
6
|
streamlit_react_components/common/button_group.py,sha256=g38gpR62dQ8KLd3JyANvGonT6tf-tyooIjC6t3O4iH0,2225
|
|
7
7
|
streamlit_react_components/common/chart_legend.py,sha256=So703OO-sI6SWrSVGKH0OTiI-smr4luqgBtXQ9GwIlI,1377
|
|
8
8
|
streamlit_react_components/common/data_table.py,sha256=dEvRxCBejvoye7jsqGcdsh_Ox-VeRpWMHgaAi-qv5HM,2142
|
|
9
9
|
streamlit_react_components/common/metric_row.py,sha256=abDfSrLvZO8MK2gglvE98L5U0Fx2NfNHGF5bBnfqR5I,1257
|
|
10
10
|
streamlit_react_components/common/panel.py,sha256=O4URjnK8u9_byFzDO9RAFdpXjzNdxpXY1CX8gEEK1pY,1094
|
|
11
|
-
streamlit_react_components/common/plotly_chart.py,sha256=
|
|
11
|
+
streamlit_react_components/common/plotly_chart.py,sha256=px1pITa8GSYl_TTg4KzX81nQy_F-9XwUV_91fR7d0po,9368
|
|
12
12
|
streamlit_react_components/common/section_header.py,sha256=2sVLWHjHx2WdhbVVLBgs5shwUUbw6lbAKbsAwiwIWpg,2983
|
|
13
13
|
streamlit_react_components/common/stat_card.py,sha256=PimCX6Dd18DyfJn6tk0YmrA1zKvAiqeKXdHAKXhxiRQ,1674
|
|
14
14
|
streamlit_react_components/common/step_indicator.py,sha256=araovSL_c5h66PawZBf5IlQbVoxXwE9kD0H10ZopVoU,1370
|
|
15
15
|
streamlit_react_components/form/__init__.py,sha256=XP9oBEHSwLTNqu88sYm0F_n828yzPStDJl3N62HxVvc,222
|
|
16
|
-
streamlit_react_components/form/checkbox_group.py,sha256=
|
|
16
|
+
streamlit_react_components/form/checkbox_group.py,sha256=LbwfyIRKjTnWOB-a4OL2-vJXAJ9QpXhbrbdUz5bBdW4,2100
|
|
17
17
|
streamlit_react_components/form/form_select.py,sha256=KILKVUO-Elb0nqbTEImxyoGQQrnZ_jft30iJSbY5ksk,1946
|
|
18
18
|
streamlit_react_components/form/form_slider.py,sha256=4w9h-d-9yAHg3ZqUHCZGzsfUG3lP5OTwVrDo5sZAnfQ,2032
|
|
19
|
-
streamlit_react_components-1.0.
|
|
20
|
-
streamlit_react_components-1.0.
|
|
21
|
-
streamlit_react_components-1.0.
|
|
22
|
-
streamlit_react_components-1.0.
|
|
19
|
+
streamlit_react_components-1.0.2.dist-info/METADATA,sha256=lNS5Fsxaii6LY3RlmkRGj-2W-fqQGBUXTpJnRgKY1go,21677
|
|
20
|
+
streamlit_react_components-1.0.2.dist-info/WHEEL,sha256=qELbo2s1Yzl39ZmrAibXA2jjPLUYfnVhUNTlyF1rq0Y,92
|
|
21
|
+
streamlit_react_components-1.0.2.dist-info/top_level.txt,sha256=3JFrl15-Uewx3BFMSzqrBufF9GmTS1LDKfShmg0R9VE,27
|
|
22
|
+
streamlit_react_components-1.0.2.dist-info/RECORD,,
|
|
File without changes
|