dash-yada 0.0.1a2

Dash Yada, an interactive dashboard assistant

dash-yada

dash-yada lets you easily create interactive tutorials for your Dash app.

Installation

---

$ pip install dash-yada

Live Demo

---

Check out the Live Demo to see dash-yada in action!

See the code for this demo in the /docs folder.

Quickstart

---

To get started, simply add the Yada() component to the app's layout. You will see the Yada icon, a helpdesk, in the top right corner. On hover, it displays a default welcome message.

import dash
from dash import html
import dash_bootstrap_components as dbc
from dash_yada import YadaAIO

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        YadaAIO(yada_id="yada"),
        html.H4("My Dashboard", className="p-3 bg-primary text-white text center"),
    ],
    fluid=True,
)

if __name__ == "__main__":
    app.run_server(debug=True)

Customizing the Yada Icon

---

Use the following props to change the icon and the hover message:

• yada_src (string; optional): Location src of the image that you want to display for yada.

• hover_message_props (dict; optional): Props to display for the message when yada is not clicked and not playing a script. If not defined, the default name is "yada". Set name to "" to not display a header. Set message to "" to not display a greeting {name (string; optional), greeting (string; optional)}

• Set the position and size with CSS:

For this example, place the following in the .css file in the /assets folder

.yada .sleeping {
    left: 75px;
    top: auto;
    bottom: 5px;
    height: 60px;
}

yada_icon = "https://user-images.githubusercontent.com/72614349/236646464-1471e596-b234-490d-bf84-e2ef7a63b233.png"
hover_message_props = {
    "name": "Hedwig",
    "greeting": "Let's explore! Just pick a tour and we'll get started"
}

yada = YadaAIO(yada_id="my_yada", yada_src=yada_icon, hover_message_props=hover_message_props)

Adding scripts

---

You can add one or more scripts for the user to select the tour.

Yada navigates by CSS selector, so it can go to any element on a page. Learn more about selectors at Mozilla web-docs For example you could use a component's id like this: "#component_id". You can use a class selector like this: ".close-btn"

• scripts (dict of list of dicts; optional): Dictionary of keys to scripts:
  • each key will have an array of: {target (string; required), convo (string; required), action (string; optional), action_args (string; optional)}

Here is a simple example of one script with one step. You can find more script examples in the demo app: yada_scripts.py file

import dash
from dash import html
import dash_bootstrap_components as dbc
from dash_yada import YadaAIO

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

yada = YadaAIO(
    yada_id="yada",
    scripts={
        "Intro": [
            {
                "target": "#title",
                "convo": "Welcome to My Dashboard tour!",
            },
        ]
    },
)

app.layout = dbc.Container(
    [
        yada,
        html.H4(
            "My Dashboard",
            className="p-3 bg-primary text-white text center",
            id="title",
        ),
    ],
    fluid=True,
)

if __name__ == "__main__":
    app.run_server(debug=True)

Reference

---

dash-yada.YadaAIO is an All-In-One component. Learn more about AIO components in the Dash documentation.

    Keyword arguments:

    - yada_id (string; optional):
        The ID used to identify this component in Dash callbacks.

    - hover_message_props (dict; optional):
        Props to display for the message when yada is not clicked and not playing a script.
        If not defined, the default name is "yada".  Set name to "" to not display a header.  Set message to "" to not display a greeting
        If greeting or name is a component, it must be wrapped in [ ], for example {"greeting": [html.Div("Hi")]
        {name (string; optional), greeting (string; optional)}

    - script_message (dict; optional):
        String to display for the message when yada is clicked and not playing a script.

    - play_script_props (dict; optional):
        Props to control the options for the play button to run the scripts. dbc.Button props.

    - yada_src (string; optional):
        Location src of the image that you want to display for yada.

    - scripts (dict of list of dicts; optional):
        Dictionary of keys to scripts:
            - each key will have an array of a directory:
            {target (string; required), convo (string; required), action (string; optional),
            action_args (string; optional)}

    - next_button_props (dict; optional):
        Props to control the options for the next button. dbc.Button props.

    - prev_button_props (dict; optional):
        Props to control the options for the previous button. dbc.Button props.