Skip to content

Your First Dashboard#

Creating a dashboard with our tool is as simple as running:

engineai dashboard init

This command asks for a project name (default is new_dashboard) and generates a simple dashboard that contains a timeseries widget within a main.py file, an example.json file within a data folder. These files will be useful to organizing the data from the next steps and a default configuration file.

    new_dashboard
    ├── .env
    ├── data/
    |   └── example.json
    └── main.py

Now, navigate to your project folder new_dashboard and run the publish command:

cd new_dashboard
engineai dashboard publish
First time publishing

When you use the SDK for the first time, a new browser tab will open to facilitate the login process and token retrieval.

login.png

Follow the authenticator's instructions to generate a new token. The token will be automatically added to your system.

Once you have published your Dashboard, a link will be displayed in your terminal.

To compare the result, you can click in the following Result link.

Result

Review Dashboard#

Let's go through the generated code and learn about the Platform SDK and its components.

The code generated by the previous command will look like the following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import pandas as pd
from engineai.sdk.dashboard import dashboard
from engineai.sdk.dashboard.widgets import timeseries

timeseries_widget = timeseries.Timeseries(
    date_column="date",
    data=pd.read_json("data/example.json", orient="records"),
)

dashboard.Dashboard(
    slug="new_dashboard",
    app_slug="<app-slug>",
    workspace_slug="<workspace-slug>",
    content=[
        timeseries_widget,
    ],
)

  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
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
[
  { "date": 1580428800000, "values": 0.73 },
  { "date": 1580428800000, "values": 0.73 },
  { "date": 1582934400000, "values": 0.705 },
  { "date": 1582934400000, "values": 0.705 },
  { "date": 1585612800000, "values": 0.6 },
  { "date": 1585612800000, "values": 0.6 },
  { "date": 1588204800000, "values": 0.815 },
  { "date": 1588204800000, "values": 0.815 },
  { "date": 1590883200000, "values": 0.235 },
  { "date": 1590883200000, "values": 0.235 },
  { "date": 1593475200000, "values": 0.765 },
  { "date": 1593475200000, "values": 0.765 },
  { "date": 1596153600000, "values": 0.35 },
  { "date": 1596153600000, "values": 0.35 },
  { "date": 1598832000000, "values": 0.73 },
  { "date": 1598832000000, "values": 0.73 },
  { "date": 1601424000000, "values": 0.3 },
  { "date": 1601424000000, "values": 0.3 },
  { "date": 1604102400000, "values": 0.655 },
  { "date": 1604102400000, "values": 0.655 },
  { "date": 1606694400000, "values": 0.31 },
  { "date": 1606694400000, "values": 0.31 },
  { "date": 1609372800000, "values": 0.235 },
  { "date": 1609372800000, "values": 0.235 },
  { "date": 1612051200000, "values": 0.545 },
  { "date": 1612051200000, "values": 0.545 },
  { "date": 1614470400000, "values": 0.945 },
  { "date": 1614470400000, "values": 0.945 },
  { "date": 1617148800000, "values": 0.385 },
  { "date": 1617148800000, "values": 0.385 },
  { "date": 1619740800000, "values": 0.44 },
  { "date": 1619740800000, "values": 0.44 },
  { "date": 1622419200000, "values": 0.35 },
  { "date": 1622419200000, "values": 0.35 },
  { "date": 1625011200000, "values": 0.2 },
  { "date": 1625011200000, "values": 0.2 },
  { "date": 1627689600000, "values": 0.55 },
  { "date": 1627689600000, "values": 0.55 },
  { "date": 1630368000000, "values": 0.5 },
  { "date": 1630368000000, "values": 0.5 },
  { "date": 1632960000000, "values": 0.685 },
  { "date": 1632960000000, "values": 0.685 },
  { "date": 1635638400000, "values": 0.615 },
  { "date": 1635638400000, "values": 0.615 },
  { "date": 1638230400000, "values": 0.405 },
  { "date": 1638230400000, "values": 0.405 },
  { "date": 1640908800000, "values": 0.595 },
  { "date": 1640908800000, "values": 0.595 },
  { "date": 1643587200000, "values": 0.86 },
  { "date": 1643587200000, "values": 0.86 },
  { "date": 1646006400000, "values": 0.645 },
  { "date": 1646006400000, "values": 0.645 },
  { "date": 1648684800000, "values": 0.535 },
  { "date": 1648684800000, "values": 0.535 },
  { "date": 1651276800000, "values": 0.215 },
  { "date": 1651276800000, "values": 0.215 },
  { "date": 1653955200000, "values": 0.325 },
  { "date": 1653955200000, "values": 0.325 },
  { "date": 1656547200000, "values": 0.655 },
  { "date": 1656547200000, "values": 0.655 },
  { "date": 1659225600000, "values": 0.5 },
  { "date": 1659225600000, "values": 0.5 },
  { "date": 1661904000000, "values": 0.62 },
  { "date": 1661904000000, "values": 0.62 },
  { "date": 1664496000000, "values": 0.69 },
  { "date": 1664496000000, "values": 0.69 },
  { "date": 1667174400000, "values": 0.345 },
  { "date": 1667174400000, "values": 0.345 },
  { "date": 1669766400000, "values": 0.56 },
  { "date": 1669766400000, "values": 0.56 },
  { "date": 1672444800000, "values": 0.86 },
  { "date": 1672444800000, "values": 0.86 },
  { "date": 1675123200000, "values": 0.11 },
  { "date": 1675123200000, "values": 0.11 },
  { "date": 1677542400000, "values": 0.905 },
  { "date": 1677542400000, "values": 0.905 },
  { "date": 1680220800000, "values": 0.165 },
  { "date": 1680220800000, "values": 0.165 },
  { "date": 1682812800000, "values": 0.445 },
  { "date": 1682812800000, "values": 0.445 },
  { "date": 1685491200000, "values": 0.52 },
  { "date": 1685491200000, "values": 0.52 },
  { "date": 1688083200000, "values": 0.54 },
  { "date": 1688083200000, "values": 0.54 },
  { "date": 1690761600000, "values": 0.895 },
  { "date": 1690761600000, "values": 0.895 },
  { "date": 1693440000000, "values": 0.19 },
  { "date": 1693440000000, "values": 0.19 },
  { "date": 1696032000000, "values": 0.605 },
  { "date": 1696032000000, "values": 0.605 },
  { "date": 1698710400000, "values": 0.59 },
  { "date": 1698710400000, "values": 0.59 },
  { "date": 1701302400000, "values": 0.635 },
  { "date": 1701302400000, "values": 0.635 },
  { "date": 1703980800000, "values": 0.28 },
  { "date": 1703980800000, "values": 0.28 },
  { "date": 1706659200000, "values": 0.245 },
  { "date": 1706659200000, "values": 0.245 },
  { "date": 1709164800000, "values": 0.455 },
  { "date": 1709164800000, "values": 0.455 },
  { "date": 1711843200000, "values": 0.47 },
  { "date": 1711843200000, "values": 0.47 },
  { "date": 1714435200000, "values": 0.585 },
  { "date": 1714435200000, "values": 0.585 },
  { "date": 1717113600000, "values": 0.525 },
  { "date": 1717113600000, "values": 0.525 },
  { "date": 1719705600000, "values": 0.955 },
  { "date": 1719705600000, "values": 0.955 },
  { "date": 1722384000000, "values": 0.31 },
  { "date": 1722384000000, "values": 0.31 },
  { "date": 1725062400000, "values": 0.315 },
  { "date": 1725062400000, "values": 0.315 },
  { "date": 1727654400000, "values": 0.635 },
  { "date": 1727654400000, "values": 0.635 },
  { "date": 1730332800000, "values": 0.1 },
  { "date": 1730332800000, "values": 0.1 },
  { "date": 1732924800000, "values": 0.455 },
  { "date": 1732924800000, "values": 0.455 },
  { "date": 1735603200000, "values": 0.25 },
  { "date": 1735603200000, "values": 0.25 }
]

Imports#

Imports bring in functionalities from other files or libraries into the current file so you an reuse code implemented elsewhere.

In the code snippet, imports are used to bring in specific functionalities from different modules:

  • import pandas as pd: Imports the entire Pandas library and assigns it the alias pd.
  • from engineai.sdk.dashboard import dashboard: Imports the dashboard module from the engineai.sdk.dashboard package.
  • from engineai.sdk.dashboard.widgets import timeseries: Imports the timeseries module from the engineai.sdk.dashboard.widgets package.

This is a simple Dashboard with the slug new_dashboard, which will display a single timeseries widget. The widget shows a line chart containing data from a JSON file that simulates values over a month.

Slugs#

Slugs are concise, URL-friendly representations of resources that serve as unique identifiers within a system, making it easier to reference and access those resources.

  • Here, a slug is used to uniquely identify a dashboard. By setting a slug for a dashboard, you can access it through a specific URL. For example, if the slug is new_dashboard, the dashboard might be accessible at a URL like this:

    • https://platform.engineai.com/<workspace-slug>/<app-slug>/dashboard/new-dashboard, where <workspace-slug> corresponds to the user's workspace and <app-slug> is the unique identifier for the application, that is created in the first publication.
Changing Slugs

The default Dashboard slug stands for new_dashboard, as described above. However, it is possible to programmatically set this slug. By changing it, the dashboard will be published at a different URL, based on the custom slug.

dashboard.Dashboard(
    app_slug=<app-slug>,
    workspace_slug=<workspace-slug>,
    slug=<custom-slug>,
    content=timeseries.Timeseries(data=pd.DataFrame(...)),
)

Next Steps#

Great! You have created a new project and published your first dashboard and now you are ready to continue developing!

In the next section, you'll learn about the core concepts of the Platform SDK and how to use them to create more complex dashboards.