Nba app radix

chakra_apps/nba/README.md

@@ -1,3 +0,0 @@
-# The way to run nba
-pynecone==0.1.27 + The minimum version of node is 16.6.0.  
-If the node's version is smaller than 16.6.0, the code cannot run.  

chakra_apps/nba/requirements.txt

@@ -1,4 +1,3 @@
-reflex>=0.3.8
-plotly-express
-plotly
-pandas
+reflex>=0.4.0
+pandas>=2.2.0
+plotly>=5.18.0

chakra_apps/nba/rxconfig.py

@@ -2,6 +2,4 @@
 
 config = rx.Config(
     app_name="nba",
-    db_url="sqlite:///reflex.db",
-    env=rx.Env.DEV,
-)
+)

clock_radix/.gitignore

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

nba/.gitignore

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

nba/nba/helpers.py

@@ -0,0 +1,40 @@
+import reflex as rx
+
+def navbar():
+    return rx.box(
+        rx.hstack(
+            rx.hstack(
+                rx.image(src="/nba.png", width="50px"),
+                rx.heading("NBA Data", size="8"),
+                rx.flex(
+                    rx.badge("2015-2016 Season"),
+                ),
+            ),
+            rx.menu.root(
+                rx.menu.trigger(
+                    rx.button("Menu", color="white", size="3", radius="medium", px=4, py=2),
+                ),
+                rx.menu.content(
+                    rx.menu.item("Graph"),
+                    rx.menu.separator(),
+                    rx.menu.item(
+                        rx.link(
+                            rx.hstack(rx.text("20Dataset"), rx.icon(tag="download")),
+                            href="https://media.geeksforgeeks.org/wp-content/uploads/nba.csv",
+                        ),
+                    ),
+                ),
+            ),
+            justify="between",
+            border_bottom="0.2em solid #F0F0F0",
+            padding_inline_start="2em",
+            padding_inline_end="2em",
+            padding_top="1em",
+            padding_bottom="1em",
+            bg="rgba(255,255,255, 0.97)",
+        ),
+        position="fixed",
+        width="100%",
+        top="0px",
+        z_index="500",
+    )

nba/nba/nba.py

@@ -0,0 +1,149 @@
+"""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
+
+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(
+                rx.select(
+                    ["C", "PF", "SF", "PG", "SG"],
+                    placeholder="Select a position. (All)",
+                    on_change=State.set_position,
+                    size="3",
+                ),
+                rx.select(
+                    college,
+                    placeholder="Select a college. (All)",
+                    on_change=State.set_college,
+                    size="3",
+                ),
+            ),
+            rx.vstack(
+                rx.vstack(
+                    rx.hstack(
+                        rx.badge("Min Age: ", State.age[0]),
+                        rx.divider(orientation="vertical"),
+                        rx.badge("Max Age: ", State.age[1]),
+                    ),
+                    rx.slider(default_value=[18, 50], min=18, max=50, on_value_commit=State.set_age,),
+                    align_items="left",
+                    width="100%",
+                ),
+                rx.vstack(
+                    rx.hstack(
+                        rx.badge("Min Sal: ", State.salary[0] // 1000000, "M"),
+                        rx.divider(orientation="vertical"),
+                        rx.badge("Max Sal: ", State.salary[1] // 1000000, "M"),
+                    ),
+                    rx.slider(
+                        default_value=[0, 25000000], min=0, max=25000000, on_value_commit=State.set_salary,
+                    ),
+                    align_items="left",
+                    width="100%",
+                ),
+            ),
+            spacing="4",
+        ),
+        width="100%",
+    )
+
+
+def index():
+    """The main view."""
+    return rx.center(
+        rx.vstack(
+            navbar(),
+            selection(),
+            rx.divider(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,
+            ),
+            rx.divider(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/requirements.txt

@@ -0,0 +1,3 @@
+reflex>=0.4.0
+pandas>=2.2.0
+plotly>=5.18.0

nba/rxconfig.py

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