dcc.DatePickerRange will work locally, but does not allow for date selections to be made on the live instance

Dash Python
1

Hi there,

This code works great locally. Page loads, you choose a start and end date, the table then loads the data for that time range, and the total row at the bottom of the page shows the total cases and weight for whatever is displayed on the table.

I’ve deployed it to our live site, and there you’re unable to select any dates. The range picker calendar appears when you click on the start or end date portion, but all the day boxes are greyed out and do not do anything when you click them.

Now on both my local and live instance- I do see 2 errors when I load the web page. This I guess would be where the solution lays. Below is the dashboard itself and both errors. I see that the error stems from pinnedBottomRowData, but fail to understand why my local instance works fine while the live one is broken.

Thanks in advance!

import dash
import dash_ag_grid as ag
import pandas as pd
import pyodbc
import os
from django_plotly_dash import DjangoDash
from dash import html, Input, Output, dcc, State
from datetime import datetime, timedelta

app = DjangoDash(‘orderline_shipments’, add_bootstrap_links=True)

def get_data(startDate, endDate):
conn = pyodbc.connect(‘DRIVER={ODBC Driver 17 for SQL Server};’
________________________________________________
Connection info here
________________________________________________
________________________________________________

startDateFormatted = datetime.strptime(startDate, '%Y-%m-%d').strftime('%Y%m%d')
endDateFormatted = datetime.strptime(endDate, '%Y-%m-%d').strftime('%Y%m%d')

query = f"EXEC sp_cv_SelectOrderLineShipments @StartDate='{startDateFormatted}', @EndDate='{endDateFormatted}'"

df = pd.read_sql(query, conn)

df['oShipDate'] = pd.to_datetime(df['oShipDate']).dt.strftime('%m/%d/%Y')

conn.close()

return df

def calculate_totals(data):
sum_values = data[[“numPacks”, “packNominal”]].sum()
return {“productName”: “Total”,
“numPacks”: sum_values[“numPacks”],
“packNominal”: round(sum_values[“packNominal”])}

app.layout = html.Div(
children=[
html.H1(“Orderline Shipments”),
html.Hr(),
html.Div([
dcc.DatePickerRange(
id=‘date-range-picker’,
minimum_nights=0,
display_format=‘MM/DD/YYYY’
),
dcc.Store(id=“store-pinned-data”),
ag.AgGrid(
id=“os-grid”,
style={“height”: “80vh”},
enableEnterpriseModules=True,
defaultColDef={“resizable”: True, “sortable”: True, “filter”: True},
columnDefs=[
{“headerName”: “Ship Date”, “field”: “oShipDate”, “initialWidth”: 115},
{“headerName”: “Route #”, “field”: “Transporter”, “initialWidth”: “auto”},
{“headerName”: “Sell To”, “field”: “cName”},
{“headerName”: “Deliver To”, “field”: “description1”},
{“headerName”: “Order”, “field”: “orderNumber”, “initialWidth”: 115},
{“headerName”: “Line #”, “field”: “orderLine”, “initialWidth”: 115},
{“headerName”: “Lot”, “field”: “lotName”, “initialWidth”: 125},
{“headerName”: “Item”, “field”: “productName”},
{“headerName”: “Cases”, “field”: “numPacks”, “initialWidth”: 95},
{“headerName”: “Nominal Weight”, “field”: “packNominal”, “initialWidth”: 170}],
dashGridOptions={‘pinnedBottomRowData’: }
)
])
]
)

@app.callback(
[Output(“os-grid”, “rowData”),
Output(“store-pinned-data”, “data”)],
[Input(“date-range-picker”, “start_date”),
Input(“date-range-picker”, “end_date”)],
prevent_initial_call=True
)
def update_data(start_date, end_date):
df = get_data(start_date, end_date)
main_data = df.to_dict(‘records’)
store_data = {‘mainData’: main_data}

return main_data, store_data

@app.callback(
Output(“os-grid”, “pinnedBottomRowData”),
Input(“os-grid”, “virtualRowData”),
prevent_initial_call=True
)
def row_pinning_bottom(data):
dff = pd.DataFrame(data)
totals = calculate_totals(dff)
pinned_bottom_row_data = [totals]
return pinned_bottom_row_data

if name == ‘main’:
app.run_server(debug=True)

Error 1:

image
image2029×385 37.7 KB

Error 2:

image
image2018×105 13.8 KB

2

Also- on the live instance of this you can click in the date range box then manually type in the start and end date. That then loads data from that time range, as well as fixes the date picker calendar selectors. After the manual entry of the dates, the report has no issue using the calendar options to specify dates.

3

Believe the solution here was to change how my totals calculated. With the default of 0 if there’s no initial packNominal, we’re now loading successfully.

def calculate_totals(data):
if “packNominal” in data.columns:
sum_values = data[[“numPacks”, “packNominal”]].sum()
return {“productName”: “Total”,
“numPacks”: sum_values[“numPacks”],
“packNominal”: round(sum_values[“packNominal”])}
else:
return {“productName”: “Total”,
“numPacks”: 0,
“packNominal”: 0}