Merge pull request #179 from Ericlee0128/main

#123 fix: add "Apply month and hour" filter for the descriptive statistic table
CenterForTheBuiltEnvironment · Apr 25, 2023 · 4aebe83 · 4aebe83
2 parents 2481b02 + cae9636
commit 4aebe83
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 5 deletions.
diff --git a/docs/version/changelog.md b/docs/version/changelog.md
@@ -5,6 +5,7 @@
 Feat:
 
 * Added stacked bar chart Outdoor Comfort
+* Added filter for the descriptive statistics table in the Data Explorer tab
 
 Fix:
 * Fixed issues 154, 156: Update the option list 

diff --git a/my_project/tab_data_explorer/app_data_explorer.py b/my_project/tab_data_explorer/app_data_explorer.py
@@ -106,6 +106,67 @@ def section_one():
                     id_button="table-explore",
                 ),
             ),
+            html.Div(
+                className="container-row justify-content-center",
+                children=[
+                    html.Div(
+                        className=container_col_center_one_of_three,
+                        children=[
+                            dbc.Button(
+                                "Apply month and hour filter",
+                                color="primary",
+                                id="sec1-time-filter-input",
+                                className="mb-2",
+                                n_clicks=0,
+                            ),
+                            html.Div(
+                                className="container-row full-width justify-center mt-2",
+                                children=[
+                                    html.H6("Month Range", style={"flex": "20%"}),
+                                    html.Div(
+                                        dcc.RangeSlider(
+                                            id="sec1-month-slider",
+                                            min=1,
+                                            max=12,
+                                            step=1,
+                                            value=[1, 12],
+                                            marks={1: "1", 12: "12"},
+                                            tooltip={
+                                                "always_visible": False,
+                                                "placement": "top",
+                                            },
+                                            allowCross=False,
+                                        ),
+                                        style={"flex": "50%"},
+                                    ),
+                                ],
+                            ),
+                            html.Div(
+                                className="container-row justify-center",
+                                children=[
+                                    html.H6("Hour Range", style={"flex": "20%"}),
+                                    html.Div(
+                                        dcc.RangeSlider(
+                                            id="sec1-hour-slider",
+                                            min=1,
+                                            max=24,
+                                            step=1,
+                                            value=[1, 24],
+                                            marks={1: "1", 24: "24"},
+                                            tooltip={
+                                                "always_visible": False,
+                                                "placement": "topLeft",
+                                            },
+                                            allowCross=False,
+                                        ),
+                                        style={"flex": "50%"},
+                                    ),
+                                ],
+                            ),
+                        ],
+                    ),
+                ],
+            ),
             html.Div(
                 id="table-data-explorer",
             ),
@@ -833,11 +894,22 @@ def update_more_charts(
 
 @app.callback(
     Output("table-data-explorer", "children"),
-    [Input("df-store", "modified_timestamp"), Input("sec1-var-dropdown", "value")],
-    [State("df-store", "data"), State("si-ip-unit-store", "data")],
+    [
+        Input("df-store", "modified_timestamp"),
+        Input("sec1-var-dropdown", "value"),
+        Input("sec1-time-filter-input", "n_clicks"),
+    ],
+    [
+        State("df-store", "data"),
+        State("si-ip-unit-store", "data"),
+        State("sec1-month-slider", "value"),
+        State("sec1-hour-slider", "value"),
+    ],
 )
-def update_table(ts, dd_value, df, si_ip):
-    """Update the contents of tab three. Passing in general info (df, meta)."""
+def update_table(ts, dd_value, n_clicks, df, si_ip, month_range, hour_range):
+    start_month, end_month = month_range
+    start_hour, end_hour = hour_range
+    filtered_df = df[(df["month"] >= start_month) & (df["month"] <= end_month) & (df["hour"] >= start_hour) & (df["hour"] <= end_hour)]
     return summary_table_tmp_rh_tab(
-        df[["month", "hour", dd_value, "month_names"]], dd_value, si_ip
+        filtered_df[["month", "hour", dd_value, "month_names"]], dd_value, si_ip
     )