converting nba app to radix

nba_radix/.gitignore

@@ -0,0 +1,4 @@
+*.db
+*.py[cod]
+.web
+__pycache__/

nba_radix/nba_radix/helpers.py

@@ -0,0 +1,39 @@
+import reflex as rx
+import reflex.components.radix.themes as rdxt
+
+def navbar():
+    return rdxt.box(
+        rx.hstack(
+            rx.hstack(
+                rx.image(src="/nba.png", width="50px"),
+                rdxt.heading("NBA Data", size="8"),
+                rdxt.flex(
+                    rdxt.badge("2015-2016 Season"),
+                ),
+            ),
+            rdxt.dropdownmenu_root(
+                rdxt.dropdownmenu_trigger(
+                    rdxt.button("Menu", color="white", size="3", radius="medium", px=4, py=2),
+                ),
+                rdxt.dropdownmenu_content(
+                    rdxt.link(rdxt.dropdownmenu_item("Graph"), href="/"),
+                    rdxt.dropdownmenu_separator(),
+                    rdxt.link(
+                        rdxt.dropdownmenu_item(
+                            rx.hstack(rdxt.text("20Dataset"), rdxt.icon(tag="download"))
+                        ),
+                        href="https://media.geeksforgeeks.org/wp-content/uploads/nba.csv",
+                    ),
+                ),
+            ),
+            justify="space-between",
+            border_bottom="0.2em solid #F0F0F0",
+            padding_x="2em",
+            padding_y="1em",
+            bg="rgba(255,255,255, 0.97)",
+        ),
+        position="fixed",
+        width="100%",
+        top="0px",
+        z_index="500",
+    )

nba_radix/nba_radix/nba_radix.py

@@ -0,0 +1,150 @@
+"""Welcome to Reflex! This file outlines the steps to create a basic app."""
+import reflex as rx
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+from .helpers import navbar
+from reflex.components.radix.themes import theme
+import reflex.components.radix.themes as rdxt
+
+nba_overview = "https://media.geeksforgeeks.org/wp-content/uploads/nba.csv"
+nba_data = pd.read_csv(nba_overview)
+college = sorted(nba_data["College"].unique().astype(str))
+
+
+class State(rx.State):
+    """The app state."""
+
+    # Filters to apply to the data.
+    position: str
+    college: str
+    age: tuple[int, int] = (18, 50)
+    salary: tuple[int, int] = (0, 25000000)
+
+    @rx.var
+    def df(self) -> pd.DataFrame:
+        """The data."""
+        nba = nba_data[
+            (nba_data["Age"] > int(self.age[0]))
+            & (nba_data["Age"] < int(self.age[1]))
+            & (nba_data["Salary"] > int(self.salary[0]))
+            & (nba_data["Salary"] < int(self.salary[1]))
+        ]
+
+        if self.college and self.college != "All":
+            nba = nba[nba["College"] == self.college]
+
+        if self.position and self.position != "All":
+            nba = nba[nba["Position"] == self.position]
+
+        if nba.empty:
+            return pd.DataFrame()
+        else:
+            return nba.fillna("")
+
+    @rx.var
+    def scat_fig(self) -> go.Figure:
+        """The scatter figure."""
+        nba = self.df
+
+        if nba.empty:
+            return go.Figure()
+        else:
+            return px.scatter(
+                nba,
+                x="Age",
+                y="Salary",
+                title="NBA Age/Salary plot",
+                color=nba["Position"],
+                hover_data=["Name"],
+                symbol=nba["Position"],
+                trendline="lowess",
+                trendline_scope="overall",
+            )
+
+    @rx.var
+    def hist_fig(self) -> go.Figure:
+        """The histogram figure."""
+        nba = self.df
+
+        if nba.empty:
+            return go.Figure()
+        else:
+            return px.histogram(
+                nba, x="Age", y="Salary", title="Age/Salary Distribution"
+            )
+
+
+def selection():
+    return rx.vstack(
+        rx.hstack(
+            rx.vstack(
+                rdxt.select(
+                    ["C", "PF", "SF", "PG", "SG"],
+                    placeholder="Select a position. (All)",
+                    on_value_change=State.set_position,
+                    size="3",
+                ),
+                rdxt.select(
+                    college,
+                    placeholder="Select a college. (All)",
+                    on_value_change=State.set_college,
+                    size="3",
+                ),
+            ),
+            rx.vstack(
+                rx.vstack(
+                    rx.hstack(
+                        rdxt.badge("Min Age: ", State.age[0]),
+                        rdxt.separator(orientation="vertical"),
+                        rdxt.badge("Max Age: ", State.age[1]),
+                    ),
+                    rdxt.slider(default_value=[18, 50], min=18, max=50, on_value_commit=State.set_age,),
+                    align_items="left",
+                    width="100%",
+                ),
+                rx.vstack(
+                    rx.hstack(
+                        rdxt.badge("Min Sal: ", State.salary[0] // 1000000, "M"),
+                        rdxt.separator(orientation="vertical"),
+                        rdxt.badge("Max Sal: ", State.salary[1] // 1000000, "M"),
+                    ),
+                    rdxt.slider(
+                        default_value=[0, 25000000], min=0, max=25000000, on_value_commit=State.set_salary,
+                    ),
+                    align_items="left",
+                    width="100%",
+                ),
+            ),
+            spacing="1em",
+        ),
+        width="100%",
+    )
+
+
+def index():
+    """The main view."""
+    return rx.center(
+        rx.vstack(
+            navbar(),
+            selection(),
+            rdxt.separator(width="100%"),
+            rx.plotly(data=State.scat_fig, layout={"width": "1000", "height": "600"}),
+            rx.plotly(data=State.hist_fig, layout={"width": "1000", "height": "600"}),
+            rx.data_table(
+                data=nba_data,
+                pagination=True,
+                search=True,
+                sort=True,
+                resizable=True,
+            ),
+            rdxt.separator(width="100%"),
+            padding_top="6em",
+            width="100%",
+        )
+    )
+
+
+
+app = rx.App(theme=theme(appearance="light", has_background=True, radius="large", accent_color="amber", gray_color="sand",))
+app.add_page(index, title="NBA App")

nba_radix/requirements.txt

@@ -0,0 +1 @@
+reflex==0.3.7

nba_radix/rxconfig.py

@@ -0,0 +1,5 @@
+import reflex as rx
+
+config = rx.Config(
+    app_name="nba_radix",
+)