PyCafe - Vizro - Performance Metrics Visualization

app.py
requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
# Vizro is an open-source toolkit for creating modular data visualization applications.
# check out https://github.com/mckinsey/vizro for more info about Vizro
# and checkout https://vizro.readthedocs.io/en/stable/ for documentation.

import vizro.plotly.express as px
from vizro import Vizro
import vizro.models as vm
from vizro.models.types import capture
import pandas as pd
import numpy as np

df1 = pd.DataFrame(
    {"request_type": ["filter"] * 6 + ["on_page_load"] * 6,
    "server_or_total": ["server", "total"] * 6,
    "time": np.random.rand(12),
    "length": 10,
    }
)
df2 = pd.DataFrame(
    {"request_type": ["filter"] * 6 + ["on_page_load"] * 6,
    "server_or_total": ["server", "total"] * 6,
    "time": np.random.rand(12),
    "length": 100}
)
df3 = pd.DataFrame(
    {"request_type": ["filter"] * 6 + ["on_page_load"] * 6,
    "server_or_total": ["server", "total"] * 6,
    "time": np.random.rand(12),
    "length": 1000}
)
df = pd.concat([df1, df2, df3])
print(df) # Data should be in long/tidy form, see: https://anvil.works/blog/tidy-data

"""
Step 1:

Output from a single run when push to main:
single dataframe with length:
   2 (server vs. total time) - recorded at same time
    * 3 (trials) - do however you like
    * 3 (number of requests in test, probably just on_page_load, filter, parameter) - steps of the test
    * m (number of different dataframe lengths, maybe 5 between 100 and 1e6 (or whatever seems sensible)) - new dashboard for each
+ one plotly figure png of this dataframe using px.scatter() and fig.write_image()
Then save dataframe and figure png to somewhere, label with date, branch and commit hash.

Step 2:
Dashboard configuration:
* one page
* 5 plots + 5 AgGrid 
* one filter, one parameter
* longest request should take maybe 5-10s or so?
* dynamic data that's artifically slowed down:

def slow_load_data():
    time.sleep(1)
    return px.data.iris().sample(n)

Step 3:
Go through all saved artifacts to compare over time.
"""

@capture("graph")
def x(data_frame):
    return px.scatter(df, log_x=True, x="length", y="time", color="server_or_total", facet_row="request_type")


page = vm.Page(
   components=[vm.Graph(figure=x(px.data.iris()))],
   title="asdf"
   
)

dashboard = vm.Dashboard(pages=[page])
Vizro().build(dashboard).run()
Py.Cafe

vizro-performance-metrics

Performance Metrics Visualization
