diff --git a/dash_power_room_n_customer.py b/dash_power_room_n_customer.py index af84c7e..93f58c8 100644 --- a/dash_power_room_n_customer.py +++ b/dash_power_room_n_customer.py @@ -141,14 +141,21 @@ def set_drill_down_value(options): return options[0]['value'] return None -# Callback to update the breakdown graph +# Callback to update the breakdown graph and handle zoom events @app.callback( Output('breakdown-graph', 'figure'), [Input('tabs', 'value'), Input('drill-down', 'value'), - Input('time-range', 'value')] + Input('time-range', 'value'), + Input('breakdown-graph', 'relayoutData')], + [dash.dependencies.State('breakdown-graph', 'figure')] ) -def update_breakdown_graph(tab, drill_down, time_range): +def update_breakdown_graph(tab, drill_down, time_range, relayoutData, figure): + ctx = callback_context + + if not ctx.triggered: + return dash.no_update + conn = get_db_connection() if tab == 'room-breakdown': query = f""" @@ -165,11 +172,25 @@ def update_breakdown_graph(tab, drill_down, time_range): df = pd.read_sql_query(query, conn) conn.close() df = calculate_breakdown_kwh(df) + + # Initialize fig fig = px.line(df, x=df.index, y=['current', 'power', 'kWh'], labels={'value': 'Value', 'variable': 'Metric'}, title=f'{tab.replace("-", " ").title()} Metrics') fig.update_layout(legend_title_text='Metrics', yaxis_type="log") # Use logarithmic scale + if 'time-range' in ctx.triggered[0]['prop_id'] or 'drill-down' in ctx.triggered[0]['prop_id']: + pass # fig is already initialized + + elif relayoutData and 'xaxis.range[0]' in relayoutData and 'xaxis.range[1]' in relayoutData: + start = pd.to_datetime(relayoutData['xaxis.range[0]']) + end = pd.to_datetime(relayoutData['xaxis.range[1]']) + df = df.loc[start:end] + fig = px.line(df, x=df.index, y=['current', 'power', 'kWh'], + labels={'value': 'Value', 'variable': 'Metric'}, + title=f'{tab.replace("-", " ").title()} Metrics') + fig.update_layout(legend_title_text='Metrics', yaxis_type="log") # Use logarithmic scale + # Update legend to show total values for trace in fig.data: if trace.name == 'kWh':