Skip to content

Commit

Permalink
update aggregate card with callbacks and remove unnecessary data loading
Browse files Browse the repository at this point in the history
  • Loading branch information
@danieltsoukup
danieltsoukup committed Aug 2, 2024
1 parent 036c92e commit de51fa3
Show file tree
Hide file tree
Showing 3 changed files with 79 additions and 38 deletions.
29 changes: 28 additions & 1 deletion app/assets/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,33 @@ body {
background-color: #FFF9F0;
}

.card-title {
color: black;
}

.indicator_subtitle {
font-size: 10
}
}

.icon {
color: #2C7BB2
}

.button {
background-color: #2C9384;
border: none;
border-radius: 6px;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-weight: bold;
transition-duration: 0.4s;
}

.button:hover {
background-color: #2c9383c2;
color: white;
}
32 changes: 11 additions & 21 deletions app/pages/locations.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@
from datetime import date, timedelta
from dash import dcc, html
import numpy as np
import plotly.graph_objects as go


logger = Logging.get_console_logger(__name__)

Expand Down Expand Up @@ -72,13 +74,6 @@ def layout(device_id: str = None, **kwargs):
layout = dbc.Container([redirect])

else:
data_manager.load_and_format_location_noise(
location_id=device_id, granularity=Granularity.hourly
)
data_manager.load_and_format_location_noise(
location_id=device_id, granularity=Granularity.raw
)

label = data_manager.get_label(location_id=device_id)
radius = data_manager.get_radius(location_id=device_id)
active = data_manager.get_active_status(location_id=device_id)
Expand Down Expand Up @@ -108,23 +103,17 @@ def layout(device_id: str = None, **kwargs):

level_card = location_component_manager.get_level_card(
"Current Noise Trend",
data_manager.location_noise[Granularity.hourly],
style={"height": "395px", "margin-bottom": "20px"},
)

raw_noise_line_graph = (
location_component_manager.get_noise_line_graph(
data_manager.location_noise[Granularity.raw],
component_id=COMPONENT_ID.raw_noise_line_graph,
)
raw_noise_line_graph = dcc.Graph(
figure=go.Figure(),
id=COMPONENT_ID.raw_noise_line_graph,
)

hourly_noise_line_graph = (
location_component_manager.get_noise_line_graph(
data_manager.location_noise[Granularity.hourly],
component_id=COMPONENT_ID.hourly_noise_line_graph,
bold_line=True,
)
hourly_noise_line_graph = dcc.Graph(
figure=go.Figure(),
id=COMPONENT_ID.hourly_noise_line_graph,
)


Expand Down Expand Up @@ -154,7 +143,7 @@ def layout(device_id: str = None, **kwargs):
[
html.I(className="fa-solid fa-magnifying-glass-chart"),
html.Span(style={"display": "inline-block", "width": 25}),
"Noise Analyzer"
html.Span("Noise Analyzer")
],
className="card-title")),
dbc.CardBody(
Expand All @@ -170,6 +159,7 @@ def layout(device_id: str = None, **kwargs):
# define layout
layout = dbc.Container(
[
dcc.Store(id=COMPONENT_ID.aggregate_store),
location_component_manager.get_navbar(),
html.Br(),
dbc.Row(
Expand All @@ -179,7 +169,7 @@ def layout(device_id: str = None, **kwargs):
],
),
html.Br(),
line_graphs_card
dbc.Row([line_graphs_card])
],
fluid=True,
)
Expand Down
56 changes: 40 additions & 16 deletions app/src/app_components.py
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
from src.utils import COLUMN, load_config, get_last_time, DataFormatter,date_to_string
from src.utils import COLUMN, load_config, get_last_time, DataFormatter, date_to_string
from src.plotting import (
TimeseriesPlotter,
MeanIndicatorPlotter,
Expand All @@ -12,7 +12,7 @@
import dash_leaflet.express as dlx
from dash import dcc, html, get_asset_url
import dash_bootstrap_components as dbc
from typing import List, Tuple, Dict
from typing import List, Dict
from datetime import datetime, date, timedelta
from dash import (
callback,
Expand Down Expand Up @@ -42,6 +42,8 @@ class COMPONENT_ID(StrEnum):
date_picker = auto()
download_button = auto()
download_csv = auto()
aggregate_store = auto()
last_update_text = auto()


### Mapping ###
Expand Down Expand Up @@ -455,21 +457,20 @@ def get_noise_line_graph(

return noise_line_graph

def _get_mean_indicator(self, location_noise: pd.DataFrame) -> html.Div:
def _get_mean_indicator(self) -> html.Div:
"""
Create the indicator with tooltip.
"""

# noise indicator with toolip
plotter = MeanIndicatorPlotter(location_noise)
indicator_fig = plotter.plot()

indicator_graph = dcc.Graph(
figure=indicator_fig,
id=COMPONENT_ID.mean_indicator,
config={"displayModeBar": False},
style={'visibility': 'hidden'}
)

indicator_graph = dbc.Spinner(indicator_graph)

indicator_tooltip = dbc.Tooltip(
f"Average noise level in the past hour and relative change since the hour prior.",
target=COMPONENT_ID.mean_indicator,
Expand All @@ -482,11 +483,9 @@ def _get_mean_indicator(self, location_noise: pd.DataFrame) -> html.Div:
def get_level_card(
self,
label: str,
location_noise: pd.DataFrame,
style: dict = {"height": "100vh"},
) -> dbc.Card:

last_time = get_last_time(location_noise)

card = dbc.Card(
[
Expand All @@ -498,12 +497,9 @@ def get_level_card(
], className="card-title")),
dbc.CardBody(
[
# html.P(
# "The last hourly average received from the device and percentage change since the hour before."
# ),
html.H5([f"Last updated on {last_time}"]),
html.Span(id=COMPONENT_ID.last_update_text),
html.Br(),
self._get_mean_indicator(location_noise),
self._get_mean_indicator(),
]
),
],
Expand Down Expand Up @@ -540,7 +536,7 @@ def get_download_button(self) -> html.Div:
"""
button_component = html.Div(
[
html.Button("Download CSV", id=COMPONENT_ID.download_button),
html.Button("Download CSV", id=COMPONENT_ID.download_button, className="button"),
dcc.Download(id=COMPONENT_ID.download_csv),
]
)
Expand All @@ -555,6 +551,7 @@ class CallbackManager:

def __init__(self, data_manager: AppDataManager) -> None:
self.data_manager = data_manager
self.data_formatter = DataFormatter()

def initialize_callbacks(self):
def _update_fig_with_layout(relayout_data: dict, figure: dict) -> None:
Expand Down Expand Up @@ -597,11 +594,16 @@ def download_button_callback(n_clicks):
@callback(
Output(COMPONENT_ID.hourly_noise_line_graph, "figure", allow_duplicate=True),
Output(COMPONENT_ID.raw_noise_line_graph, "figure", allow_duplicate=True),
Output(COMPONENT_ID.aggregate_store, "data"),
Input(COMPONENT_ID.date_picker, "start_date"),
Input(COMPONENT_ID.date_picker, "end_date"),
prevent_initial_call='initial_duplicate'
)
def update_line_charts(start_date, end_date):
"""
Main callback responsible for loading data based on the date selector,
updating the line charts and storing aggregate noise data.
"""
device_id = self.data_manager.device_id

start_date = date.fromisoformat(start_date)
Expand All @@ -627,7 +629,29 @@ def update_line_charts(start_date, end_date):
plotter = TimeseriesPlotter(self.data_manager.location_noise[Granularity.hourly])
hourly_line_fig = plotter.plot(bold_line=True)

return hourly_line_fig, raw_line_fig
hourly_data = self.data_manager.location_noise[Granularity.hourly]
hourly_data = self.data_formatter._enum_col_names_to_string(hourly_data)
hourly_data = hourly_data.to_dict("records")

return hourly_line_fig, raw_line_fig, hourly_data

@callback(
Output(COMPONENT_ID.last_update_text, "children"),
Output(COMPONENT_ID.mean_indicator, "figure"),
Output(COMPONENT_ID.mean_indicator, "style"),
Input(COMPONENT_ID.aggregate_store, "data")
)
def update_indicator(data):
data = pd.DataFrame(data)
data = self.data_formatter._string_col_names_to_enum(data)

plotter = MeanIndicatorPlotter(data)
indicator_fig = plotter.plot()

last_time = get_last_time(data)
update_text = html.H5([f"Time: {last_time}"]),

return update_text, indicator_fig, {}

@callback(
Output(COMPONENT_ID.hourly_noise_line_graph, "figure"),
Expand Down

0 comments on commit de51fa3

Please sign in to comment.