Ten eerste, initialiseer het data frame en het dashboard. Zonder het dashboard te initialiseren, zal er geen dashboard in de gebruikersinterface verschijnen.

df = pd.DataFrame({

"Count": [0,0],

"Time": [0,0]

})

fig = px.line(df,x="Time",y="Count")

Bouw vervolgens de eerste tab uit. Dit is een combinatie van een app callback (om te controleren welke tab wordt gebruikt); samen met een conditionele functie om te controleren welke tab momenteel is geselecteerd. De onderstaande code bouwt alleen het lege dashboard en de UI-elementen op (we komen later bij de gebeurtenissen-tab). De dcc-elementen zijn de Dash Core Components en de HTML Components maken gemakkelijk gebruik van HTML in de gebruikersinterface mogelijk.

html.H2('Analytics Dashboard'),

#Multi-select dropdown

dcc.Dropdown(['Count Accepted','Count Admin Bounce','Count Block Bounce','Count Bounce','Count Clicked','Count Delayed', 'Count Delayed First','Count Delivered','Count Delivered First','Count Delivered Subsequent','Count Generation Failed', 'Count Generation Rejection','Count Hard Bounce','Count Inband Bounce','Count Initial Rendered','Count Injected', 'Count Out of Band Bounce', 'Count Policy Rejection','Count Rejected','Count Rendered','Count Sent','Count Soft Bounce', 'Count Spam Complaint','Count Targeted','Count Undetermined Bounce','Count Unique Clicked','Count Unique Confirmed Opened', 'Count Unique Initial Rendered','Count Unique Rendered','Count Unsubscribe','Total Delivery Time First','Total Delivery Time Subsequent', 'Total Message Volume'], id="y-axis", multi=True, searchable=True, placeholder="Select metrics(s)"),

#Datum selector (maximaal toegestane datum is ingesteld op de datum van vandaag) dcc.DatePickerRange( id='date-picker-range', start_date=date(2022,1,1), end_date=date(2022, 2, 1), max_date_allowed=date(datetime.today().year,datetime.today().month,datetime.today().day), ),

#Grafiek object dcc.Graph( id='Emails', figure=fig )

Let op hoe eenvoudig het is om een dashboard gebruikersinterface te creëren met een multi-select, doorzoekbare dropdown in dash. Om multi-select of zoeken uit te schakelen, kunnen de parameters voor het creëren van een dropdown gemakkelijk worden aangepast. Ik vond dat het meest complexe deel van dit project het opzetten van het daadwerkelijke data frame was op basis van inputs, evenals het correct laten werken van de HTML + CSS in de gebruikersinterface.

De Time Series Metrics API maakt het mogelijk om 33 individuele metrieken op te halen op basis van een datum/tijd bereik. Je kunt dieper filteren op Domeinen, Campagnes, IP Pools, Verzenden Domeinen, Subaccounts en de Nauwkeurigheid van tijdreeksgegevens specificeren. Deze extra filters samen met deliverability-analyses zouden een toekomstige verbetering van dit project kunnen zijn (foutafhandeling zou moeten worden geïmplementeerd voor klanten die geen toegang hebben tot deliverability-analyses).

Door het gebruik en het aanroepen van de Metrics API, bouw ik een dashboard met de door de gebruiker geselecteerde parameters en de gespecificeerde tijdsperiode. Het geïnitialiseerde dashboard wordt vervolgens bijgewerkt.

#Bouw de API-oproep met de verstrekte parameters params = { "from" : start_date + "T00:00", "to" : end_date + "T00:00", "delimiter" : ",", "precision" : "day", "metrics" : joined_values } api_url = BASE_URL + "/metrics/deliverability/time-series" response_API = requests.get(api_url, headers = {"Authorization" : API_KEY}, params=params) response_info = json.loads(response_API.text) new_df = pd.json_normalize(response_info, record_path=['results']) value_array = joined_values.split(",") #Bouw een nieuw dashboard op met de nieuwe metrieken en datums van de bijgewerkte API-oproep fig = px.line(new_df, x=new_df['ts'], y=value_array, labels={"value": "Count", "variable": "Metric","ts":"Date"}) fig.update_xaxes(title_text="Time") fig.update_yaxes(title_text="Count") return fig

Het volgende is een voorbeeld van meerdere geselecteerde metrieken en een uitgebreide tijdsperiode.

Opmerking: er zijn veel items automatisch ingebouwd in de dash grafiek (hoveren, zoomen, automatische schaal).