Dash og dashboard

Hvis en ønsker å lage ett dashbord som et brukergrensesnitt, så kan pakken Dash være et godt alternativ. Dash er ett rammeverk hvor man selv kan bygge opp applikasjoner i form av dashbord på en enklere måte, og det bygges oppå javascript pakker som plotly.js og react.js. Det er et produkt ved siden av og helintegrert med plotly, som også er en annen pakke i Python som gir oss interaktive grafer. Dash er et godt verktøy hvis en ønsker et dashbord som brukergrensesnitt for interaktiv visualisering av data. Dash kan kodes i Python og R, men også Julia og F#.

I SSB kan man lage dashbord i virtuelle miljøer satt opp med ssb-project. For mer om håndtering av pakker i ett virtuelt miljø satt opp med ssb-project kan man se nærmere her.

Eksempel kode i DaplaLab

I DaplaLab kan du starte opp ett dashbord ved hjelp av dash pakken enten i vscode-python tjenesten, eller i en notebook i jupyter tjenesten. Det fungerer best å kjøre Dash-apper i en egen fane i nettleseren.

Her er et eksempel på hvordan man lager en Dash-app i DaplaLab i en vscode tjeneste:

  1. Installer pandas og dash i et ssb-project.
  2. Opprett et python-script i prosjektet som f.eks. heter app.py.
  3. Kjør scriptet ved å kjøre følgende kommando fra terminalen: poetry run python ./app.py
  4. Deretter kommer det opp et dialog-vinduet hvor du velger Open in browser.

Her er et eksempel på script som fungerer i Vscode-python:

app.py
from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd

# Creating a sample dataset similar to the Gapminder dataset
data = {
    'country': ['Afghanistan', 'Afghanistan', 'Afghanistan', 'Brazil', 'Brazil', 'Brazil', 'China', 'China', 'China'],
    'continent': ['Asia', 'Asia', 'Asia', 'South America', 'South America', 'South America', 'Asia', 'Asia', 'Asia'],
    'year': [1952, 1977, 2007, 1952, 1977, 2007, 1952, 1977, 2007],
    'lifeExp': [28.801, 39.877, 43.828, 50.917, 59.504, 72.390, 44.000, 63.739, 72.961],
    'pop': [8425333, 12412311, 31889923, 56602560, 80461570, 190010647, 556263527, 862030000, 1318683096],
    'gdpPercap': [779.4453145, 786.11336, 974.5803384, 2108.944355, 5718.766744, 9065.800825, 400.448611, 1488.041713, 4959.114854]
}

# Creating DataFrame
df = pd.DataFrame(data)

# Creating the app
port = 8050 # must be between 1024 and 9999, default is 8050
app = Dash(
    __name__,
    requests_pathname_prefix=f'/proxy/{port}/', 
    serve_locally=True
)

app.layout = [
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
]

@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

if __name__ == '__main__':
    app.run(port=port, debug=True)

For å stoppe dashbordet fra å kjøre, trykker du i terminalen ctrl + c.

Her er et eksempel på hvordan man lager en Dash-app i DaplaLab i en jupyter tjeneste:

  1. Installer pandas og dash i et ssb-project.
  2. Opprett en notebook i prosjektet som f.eks. heter app.ipynb.
  3. Åpne notebooken og kjør kodecellene på vanlig måte.

Her er et eksempel på kode i notebook som fungerer i jupyter:

app.ipynb
# %%
# Notebook cell 1
from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd
import os

# %%
# Notebook cell 2
# Creating a sample dataset similar to the Gapminder dataset
data = {
    'country': ['Afghanistan', 'Afghanistan', 'Afghanistan', 'Brazil', 'Brazil', 'Brazil', 'China', 'China', 'China'],
    'continent': ['Asia', 'Asia', 'Asia', 'South America', 'South America', 'South America', 'Asia', 'Asia', 'Asia'],
    'year': [1952, 1977, 2007, 1952, 1977, 2007, 1952, 1977, 2007],
    'lifeExp': [28.801, 39.877, 43.828, 50.917, 59.504, 72.390, 44.000, 63.739, 72.961],
    'pop': [8425333, 12412311, 31889923, 56602560, 80461570, 190010647, 556263527, 862030000, 1318683096],
    'gdpPercap': [779.4453145, 786.11336, 974.5803384, 2108.944355, 5718.766744, 9065.800825, 400.448611, 1488.041713, 4959.114854]
}

# Creating DataFrame
df = pd.DataFrame(data)

# Creating the app
port = 8050 # must be between 1024 and 9999
service_prefix = os.getenv('JUPYTERHUB_SERVICE_PREFIX', '/')
domain = os.getenv('JUPYTERHUB_HTTP_REFERER', None)

app = Dash(
    __name__,
    requests_pathname_prefix=f"{service_prefix}proxy/{port}/", 
    serve_locally=True
)

app.layout = [
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
]

@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

if __name__ == '__main__':
    # For jupyter_mode, choose between 'external' or 'inline'.
    # 'jupyterlab' should also be poosible, but doesn't seem to work...
    app.run(debug=True, jupyter_mode="external", jupyter_server_url=domain, port=port)

For å stoppe dashbordet fra å kjøre, restarter du kernelen i jupyterlab: Kernel -> Restart Kernel and Clear Outputs of All Cells...

Her er et eksempel på hvordan man lager en Dash-app i DaplaLab i en jupyter tjeneste:

  1. Installer pandas og dash i et ssb-project.
  2. Opprett et python-script i prosjektet som f.eks. heter app.py.
  3. Kjør scriptet ved å kjøre følgende kommando fra terminalen: poetry run python app.py
  4. Deretter dukker det opp en link i terminalen etter teksten ‘Dash is running on’ som du kan trykke på for å få opp dashbordet.

Her er et eksempel på script som fungerer i jupyter:

app.py
from dash import Dash, html, dcc, callback, Output, Input
import plotly.express as px
import pandas as pd
import os

# Creating a sample dataset similar to the Gapminder dataset
data = {
    'country': ['Afghanistan', 'Afghanistan', 'Afghanistan', 'Brazil', 'Brazil', 'Brazil', 'China', 'China', 'China'],
    'continent': ['Asia', 'Asia', 'Asia', 'South America', 'South America', 'South America', 'Asia', 'Asia', 'Asia'],
    'year': [1952, 1977, 2007, 1952, 1977, 2007, 1952, 1977, 2007],
    'lifeExp': [28.801, 39.877, 43.828, 50.917, 59.504, 72.390, 44.000, 63.739, 72.961],
    'pop': [8425333, 12412311, 31889923, 56602560, 80461570, 190010647, 556263527, 862030000, 1318683096],
    'gdpPercap': [779.4453145, 786.11336, 974.5803384, 2108.944355, 5718.766744, 9065.800825, 400.448611, 1488.041713, 4959.114854]
}

# Creating DataFrame
df = pd.DataFrame(data)

# Creating the app
port = 8050 # must be between 1024 and 9999, default is 8050
service_prefix = os.getenv('JUPYTERHUB_SERVICE_PREFIX', '/')
domain = os.getenv('JUPYTERHUB_HTTP_REFERER', None)
service = f"{service_prefix}proxy/{port}/"
url = f"{domain}{service[1:]}"
default_host = f"http://127.0.0.1:{port}{service}"

app = Dash(
    __name__,
    requests_pathname_prefix=service,
    serve_locally=True
)

app.layout = [
    html.H1(children='Title of Dash App', style={'textAlign':'center'}),
    dcc.Dropdown(df.country.unique(), 'Canada', id='dropdown-selection'),
    dcc.Graph(id='graph-content')
]

@callback(
    Output('graph-content', 'figure'),
    Input('dropdown-selection', 'value')
)
def update_graph(value):
    dff = df[df.country==value]
    return px.line(dff, x='year', y='pop')

if __name__ == '__main__':
    app.run(proxy = default_host + "::" + url, port=port, debug=True)

For å stoppe dashbordet fra å kjøre, trykker du i terminalen ctrl + c.

Aktuell dokumentasjon

Diverse som er verdt å se nærmere på når en bygger dashbord applikasjon med Dash. Det følger med mange gode eksempler for bruk av diverse komponenter i dokumentasjonene under her.

  • Startsiden til Dash
  • Lage interaktive grafer i Python med Plotly
  • Dash Core Components
  • Dash HTML Components
  • Dash Bootstrap Components
    • Vel og merke henter denne diverse materialer fra internett, og vil ikke fungere uten tilgang. Det er heller anbefalt å ha de nødvendige filene lagret lokalt for bruk av denne pakken.
    • Pakken i seg selv har en fordel i at det er lettere å bygge opp utseende(layout) i dashbordet ditt, samt andre komponenter som ikke ligger i standard dash pakken.
  • Dash SSB Components
    • Team Metadata lager SSB komponenter i Dash, noe Datadoc er lagd med. Dette gir deg muligheten til å bruke SSB komponentene i dine egne dashbord. Vel og merke er denne pakken fortsatt under utvikling, og ikke alle komponenter er på plass.