Skip to main content

Dash Yada, an interactive dashboard assistant

Project description

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.

yada-demo



More Examples


See more examples in the /examples folder



Quickstart


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

yada-quickstart

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)

The default yada image is from Flaticon.com. If you use this image, please include an attribution.



Customizing the Yada image


Use the following props to change the yada image and the hover message:

  • yada_src (string; optional): Location src of the yada image.

  • hover_message_dict (dict; optional): Props to display for the message when yada is not clicked and not playing a script.

    • The hover_message_dict has keys:
    • name (string; optional) The default name is "yada". If name is "" a header is not displayed.
    • greeting (string; optional) If greeting is "" the default greeting is not displayed.
    • style (dict; optional) Sets the style of the hover message card.
  • Set the initial position and size with CSS:

The default CSS for the Yada image when the app starts is:

.yada.sleeping {
    right: 30px;
    top: 5px;
    height: 50px;
    width: 35px;
}
yada_img = "https://user-images.githubusercontent.com/72614349/236646464-1471e596-b234-490d-bf84-e2ef7a63b233.png"
hover_message_dict = {
    "name": "Hedwig",
    "greeting": "Let's explore! Just pick a tour and we'll get started",
    "style": {"backgroundColor": "lightgreen"}
}

yada = YadaAIO(yada_id="my_yada", yada_src=yada_img, hover_message_dict=hover_message_dict)


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 prop like this: "#component_id". You can use a CSS 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

yada_quickstart_script

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)


Styling the tour steps


The steps in the script are displayed in a dbc.Offcanvas component. You can change the style using the steps_offcanvas_style prop.

Note that in the scripts prop you can also use Markdown in the convo

This example shows how to style the dbc.Offcanvas component like in the live demo.

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])


steps_offcanvas_style = {
    "boxShadow": "0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)",
    "margin": "8px auto",
    "padding": "0px 24px 5px",
    "backgroundColor": "var(--bs-gray-500)",
    "color": "white",
    "borderRadius": 12,
    "maxWidth": 800,
}


yada = YadaAIO(
    yada_id="yada",
    steps_offcanvas_style=steps_offcanvas_style,
    scripts={
        "Intro": [
            {
                "target": "#title",
                "convo": """
                ### Welcome to My Dashboard tour!  
                The tour steps are are displayed in an offcanvas component and can be styled with the `steps_offcanvas_style` prop. 
                 
                Note that you can use Markdown in the "convo" prop.
                """,
            },
        ]
    },
)


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_dict (dict; optional {name, greeting, style}):
        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), style (dict; 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.

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

    - steps_offcanvas_style (dict; optional):
        Style to control the offcanvas style while playing a script.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

dash_yada-0.0.1.tar.gz (1.8 MB view details)

Uploaded Source

Built Distribution

dash_yada-0.0.1-py3-none-any.whl (1.8 MB view details)

Uploaded Python 3

File details

Details for the file dash_yada-0.0.1.tar.gz.

File metadata

  • Download URL: dash_yada-0.0.1.tar.gz
  • Upload date:
  • Size: 1.8 MB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.2 CPython/3.11.0

File hashes

Hashes for dash_yada-0.0.1.tar.gz
Algorithm Hash digest
SHA256 57438f2ebd041201b83a78b93363e0d76fb5225339ee66571a004c175324c1b5
MD5 675aa064c8837f610d84f826201110cf
BLAKE2b-256 a5d437f92d5c1152f756b35776207aa18a66b56c3efb4379ec2505a7e571968f

See more details on using hashes here.

File details

Details for the file dash_yada-0.0.1-py3-none-any.whl.

File metadata

  • Download URL: dash_yada-0.0.1-py3-none-any.whl
  • Upload date:
  • Size: 1.8 MB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/4.0.2 CPython/3.11.0

File hashes

Hashes for dash_yada-0.0.1-py3-none-any.whl
Algorithm Hash digest
SHA256 b832f673b7f511415e0aca0273b08cf0c8140d8dcfac8839b37739f009d3b19d
MD5 962525f2419d09412a509697936dbd70
BLAKE2b-256 79baa2d92821f59f50d93805ffecc41808a3229cdc29e018c9ebecdc468d4274

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page