Update app.py

app.py

@@ -3,20 +3,38 @@ import dash_bootstrap_components as dbc
 import pandas as pd
 import plotly.express as px
 
+# -----------------------------
+# Dados de exemplo
+# -----------------------------
 df = pd.DataFrame({
     "Categoria": ["A", "B", "C", "D", "E"],
     "Vendas": [120, 200, 150, 80, 220],
     "Lucro": [30, 70, 40, 20, 90]
 })
 
+# -----------------------------
+# Criar app
+# -----------------------------
 app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
+server = app.server
 
+# -----------------------------
+# Layout
+# -----------------------------
 app.layout = dbc.Container([
-    html.H1("Dashboard em Dash", className="my-4"),
+    dbc.Row([
+        dbc.Col([
+            html.H1("Dashboard em Dash", className="text-center my-4"),
+            html.P(
+                "Exemplo simples de dashboard com Dash + Bootstrap + Plotly.",
+                className="text-center text-muted"
+            )
+        ])
+    ]),
 
     dbc.Row([
         dbc.Col([
-            html.Label("Escolhe a métrica:"),
+            html.Label("Escolhe a métrica:", className="fw-bold"),
             dcc.Dropdown(
                 id="coluna-dropdown",
                 options=[
@@ -30,26 +48,33 @@ app.layout = dbc.Container([
     ], className="mb-4"),
 
     dbc.Row([
-        dbc.Col(dbc.Card([
-            dbc.CardBody([
-                html.H4("Total", className="card-title"),
-                html.H2(id="total-card")
-            ])
-        ]), md=4),
-
-        dbc.Col(dbc.Card([
-            dbc.CardBody([
-                html.H4("Média", className="card-title"),
-                html.H2(id="media-card")
-            ])
-        ]), md=4),
-
-        dbc.Col(dbc.Card([
-            dbc.CardBody([
-                html.H4("Máximo", className="card-title"),
-                html.H2(id="max-card")
-            ])
-        ]), md=4),
+        dbc.Col(
+            dbc.Card(
+                dbc.CardBody([
+                    html.H5("Total", className="card-title"),
+                    html.H2(id="total-card", className="text-primary")
+                ])
+            ),
+            md=4
+        ),
+        dbc.Col(
+            dbc.Card(
+                dbc.CardBody([
+                    html.H5("Média", className="card-title"),
+                    html.H2(id="media-card", className="text-success")
+                ])
+            ),
+            md=4
+        ),
+        dbc.Col(
+            dbc.Card(
+                dbc.CardBody([
+                    html.H5("Máximo", className="card-title"),
+                    html.H2(id="max-card", className="text-danger")
+                ])
+            ),
+            md=4
+        ),
     ], className="mb-4"),
 
     dbc.Row([
@@ -63,14 +88,23 @@ app.layout = dbc.Container([
                 columns=[{"name": i, "id": i} for i in df.columns],
                 data=df.to_dict("records"),
                 style_table={"overflowX": "auto"},
-                style_cell={"textAlign": "center"},
+                style_cell={
+                    "textAlign": "center",
+                    "padding": "10px"
+                },
+                style_header={
+                    "backgroundColor": "#f8f9fa",
+                    "fontWeight": "bold"
+                },
                 page_size=5
             )
         ], md=4)
     ])
 ], fluid=True)
 
-
+# -----------------------------
+# Callback
+# -----------------------------
 @app.callback(
     Output("grafico-barras", "figure"),
     Output("total-card", "children"),
@@ -93,6 +127,8 @@ def atualizar_dashboard(coluna_escolhida):
 
     return fig, total, media, maximo
 
-
-if __name__ == "__app__":
-    app.run_server(host="0.0.0.0", port=7860, debug=False)
+# -----------------------------
+# Run app
+# -----------------------------
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860, debug=False)