Pertama, inisialisasi kerangka data dan dasbor. Tanpa menginisialisasi dasbor, tidak ada dasbor yang akan muncul di UI.

df = pd.DataFrame({

"Count": [0,0],

"Time": [0,0]

})

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

Kemudian, bangun tab pertama. Ini adalah kombinasi dari callback aplikasi (untuk memeriksa tab mana yang sedang digunakan) dan fungsi kondisional untuk memeriksa tab mana yang saat ini terpilih. Kode di bawah ini hanya membangun dasbor kosong dan elemen UI (kami akan membahas tab peristiwa nanti). Elemen dcc adalah Dash Core Components dan HTML Components memungkinkan HTML digunakan di UI.

html.H2('Analytics Dashboard'),

#Dropdown multi-pilih

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="Pilih metrik"),

#Pemilih Tanggal (tanggal maksimum yang diizinkan adalah tanggal hari ini) 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), ),

#Grafik objek dcc.Graph( id='Emails', figure=fig )

Catatan dengan dash seberapa sederhana membuat UI dasbor dengan dropdown multi-pilih, pencarian. Untuk menonaktifkan pilih-pilih atau pencarian, parameter untuk membuat dropdown dapat dengan mudah dimodifikasi. Saya menemukan bagian paling kompleks dari proyek ini adalah membangun kerangka data nyata dari masukan, serta mendapatkan HTML + CSS berfungsi dengan benar di UI.

Time Series Metrics API memungkinkan 33 metrik individu ditarik berdasarkan rentang tanggal/waktu. Anda dapat memfilter lebih dalam berdasarkan Domain, Kampanye, IP Pools, Sending Domains, Subaccounts, dan menentukan Precision dari data deret waktu. Filter tambahan ini bersama dengan analitik deliverability dapat menjadi peningkatan di masa depan untuk proyek ini (penanganan kesalahan perlu diterapkan untuk klien yang tidak memiliki akses ke analitik deliverability).

Menggunakan dan memanggil Metrics API, saya membangun dasbor dengan parameter yang dipilih pengguna dan jangka waktu yang ditentukan. Dasbor yang diinisialisasi kemudian diperbarui.

#Buat panggilan API menggunakan parameter yang disediakan 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(",") #Buat dasbor baru menggunakan metrik dan tanggal baru dari panggilan API yang diperbarui 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

Berikut ini adalah contoh beberapa metrik yang dipilih dan jangka waktu yang diperluas.

Catatan: ada banyak elemen yang terbangun dalam grafik dash secara otomatis (hover, zoom, autoscale).