graphs.py new file + some changes in homepage.py layout ! (#7)

app/graphs.py

@@ -0,0 +1,52 @@
+"""The following file is dedicated to storing graphs functions.
+
+These graphs will be called from homepage.py
+in order to plot them right under the homepage map
+"""
+
+import plotly.graph_objects as go
+import numpy as np
+
+
+def generate_meteo_fig():
+    np.random.seed(1)
+
+    N = 100
+    random_x = np.linspace(0, 1, N)
+    random_y0 = np.random.randn(N) + 5
+    random_y1 = np.random.randn(N)
+    random_y2 = np.random.randn(N) - 5
+
+    # Create traces
+    fig = go.Figure()
+    fig.add_trace(go.Scatter(x=random_x, y=random_y0,
+                             mode='lines',
+                             name='lines'))
+    fig.add_trace(go.Scatter(x=random_x, y=random_y1,
+                             mode='lines+markers',
+                             name='lines+markers'))
+    fig.add_trace(go.Scatter(x=random_x, y=random_y2,
+                             mode='markers', name='markers'))
+
+    # updating layout to get small margins and reposition legend
+    fig.update_layout(margin=dict(l=20,
+                                  r=20,
+                                  b=20,
+                                  t=20),
+                      legend=dict(yanchor="top",
+                                  y=0.99,
+                                  xanchor="left",
+                                  x=0.01)
+                      )
+
+    return fig
+
+
+def generate_second_indicator_fig():
+    fig = go.Figure()
+    return fig
+
+
+def generate_third_indicator_fig():
+    fig = go.Figure()
+    return fig

app/homepage.py

@@ -14,27 +14,68 @@
 # From navbar.py to add the navigation bar at the top of the page
 from navbar import Navbar
 
+# Didn't know what to put as a basic map here, so I just implemented the alert map
+from alerts import build_alerts_map
+
+# importing plotly fig objects from graphs.py
+from graphs import generate_meteo_fig
+
 
 # ------------------------------------------------------------------------------
 # Content (NB: not modified from the tutorial)
 
+# instantiating the map object from alerts.py: to be modified depending on
+# what we expect the user to view first on homepage
+map_object = build_alerts_map()
+
+# instantiating fig objects from graphs.py functions
+meteo_fig = generate_meteo_fig()
+
 nav = Navbar()
 
 body = dbc.Container(
     [dbc.Row(
+        [dbc.Col(html.H1('Bienvenue sur Pyronear')),
+         dbc.Col(dcc.Dropdown(id='user_department_input',
+                              options=[{'label': 'Ardèche', 'value': 'Ardèche'},
+                                       {'label': 'Gard', 'value': 'Gard'},
+                                       {'label': 'Landes', 'value': 'Landes'}
+                                       ]))
+         ]),
+     dbc.Row(
+        [dbc.Col(
+            [html.H2('Description du projet'),
+             html.P(("Cette application a pour but de fournir un outil facilitant l'action"
+                     "des pompiers dans leur lutte contre les incendies."
+                     "L'outil repose sur des images vidéos prises depuis des tours de guêt."
+                     "En plus des alertes incendies, cette application s'appuie également sur un"
+                     "ensemble de données météorologiques, topographiques, géographiques, pour"
+                     "fournir une évaluation du niveau de risque associé"
+                     " à une zone géographique pour un temps donné.")),
+             ],
+            md=12)]),
+     dbc.Row(
         [dbc.Col(
-            [html.H2('Heading'),
-             html.P(("Donec id elit non mi porta gravida at eget metus.Fusce dapibus, "
-                     "tellus ac cursus commodo, tortor mauris condimentumnibh, "
-                     "ut fermentum massa justo sit amet risus. "
-                     "Etiam porta semmalesuada magna mollis euismod. Donec sed odio dui. "
-                     "Donec id elit nonmi porta gravida at eget metus. Fusce dapibus, tellus ac cursuscommodo, "
-                     "tortor mauris condimentum nibh, ut fermentum massa justo sitamet risus. "
-                     "Etiam porta sem malesuada magna mollis euismod. Donec sedodio dui.")),
-             dbc.Button('View details', color='secondary')],
+            # add the slider + map options here
+            html.P(("Ici vient s'ajouter le slider et les options pour reliefs, vue sat, ...")),
             md=4),
-         dbc.Col([html.H2("Graph"),
-                  dcc.Graph(figure={"data": [{"x": [1, 2, 3], "y": [1, 4, 9]}]})]),
+         dbc.Col(
+            # add the map here
+            html.Div(map_object),
+            md=8)]),
+     dbc.Row(
+        [dbc.Col([html.H2("Données météorologiques"),
+                  dcc.Graph(figure=meteo_fig)
+                  ],
+                 md=4),
+         dbc.Col([html.H2("another indicator"),
+                  dcc.Graph(figure={"data": [{"x": [1, 2, 3], "y": [1, 4, 9]}]})
+                  ],
+                 md=4),
+         dbc.Col([html.H2("a third indicator"),
+                  dcc.Graph(figure={"data": [{"x": [1, 2, 3], "y": [1, 4, 9]}]})
+                  ],
+                 md=4)
          ])
      ],
     className="mt-4")