Integrate dash in flask Applicatie

maak virtuele omgeving

cd dashapps
python -m venv venv_dash
source venv_dash/bin/activate

installeer flask en dash in virtuele omgeving

pip install flask
pip install dash
pip install dash-daq

uit virtuele omgeving 

deactivate

Integreer Dash in Flask

(https://hackersandslackers.com/gaining-full-control-over-plotly-dash/)

directorystructuur simpel

dashapps(dir)
    -- mydashapp(dir)
             -- __init__.py
             -- routes.py
             -- dash_application (dir)
                    --exampledash.py
    -- wsgi.py

wsgi.py

from mydashapp import create_app
app = create_app()
if __name__ == "__main__":
    app.run(host='0.0.0.0', debug=True)

__init__.py

"""Initialize app."""
from flask import Flask

def create_app():
    """Construct the core application."""
    app = Flask(__name__,  instance_relative_config=False)
    #app.config.from_object('config.Config')

    with app.app_context():
        # Import main Blueprint
        #from . import routes
        from mydashapp import routes
        # Import Dash application
        from .dash_application import exampledash
        app = exampledash.Add_Dash(app)
        return app

Uitleg:
het gaat hier om de volgende 2 regels

# Import Dash application
from .dash_application import dash_example
app = dash_example.Add_Dash(app)

dash_example is actually a Python file ( ./dash_application/dash_example.py ) which contains our Dash app! Dash typically likes to have a single .py file per view, which turns out to work great for us. Let's look at why this works by checking dash_example.py:

routes.py

import os
from flask import Blueprint, render_template
from flask import current_app as app


@app.route('/')
@app.route('/index')
def index():
    return "Hello, World Lets make a party!"

exampledash.py

from dash import Dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd


def Add_Dash(server):
    """Create Dash app."""
    external_stylesheets = ['/static/dist/css/style.css']
    external_scripts = ['/static/dist/js/includes/jquery.min.js',
                    '/static/dist/js/main.js']
                   
    dash_app = Dash(server=server,
                    external_stylesheets=external_stylesheets,
                    external_scripts=external_scripts,
                    routes_pathname_prefix='/commands/')

    # Create Dash Layout
    dash_app.layout = html.Div(children=[
    html.H1(children='Hello Dash'),

    html.Div(children='''
        Dash: A web application framework for Python.
    '''),

    dcc.Graph(
        id='example-graph',
        figure={
            'data': [
                {'x': [1, 2, 3], 'y': [4, 1, 2], 'type': 'bar', 'name': 'SF'},
                {'x': [1, 2, 3], 'y': [2, 4, 5], 'type': 'bar', 'name': u'Montréal'},
            ],
            'layout': {
                'title': 'Dash Data Visualization'
            }
        }
    )
])

    return dash_app.server

Uitleg.
Het gaat hier de volgende code

dash_app = Dash(server=server,
                external_stylesheets=external_stylesheets,
                external_scripts=external_scripts,
                routes_pathname_prefix='/commands/')

 
We pass our Flask instance to Add_Dash as a parameter called server. Unlike the previous examples, 

its actually server running the show this time, with Dash piggybacking as a module. 

Instead of creating our dash_app object as a global variable (as is suggested), we stuck in a 

function called Add_Dash(). This allows us to pass our top-level Flask app into Dash as server,

hence dash_app = Dash(server=server). 

This effectively spins up a Dash instance using our Flask app at its core, as opposed 

to its own!

start flaskapp

python wsgi.py

Deel2 : Meerdere dashboards in een Flask

dit doe je als volgt :

__init__.py

"""Initialize app."""
from flask import Flask


def create_app():
    """Construct the core application."""
    server = Flask(__name__,
                instance_relative_config=False)
    #app.config.from_object('config.Config')

    with server.app_context():
        from mydashapp2 import routes
        from .dash_application import mydash1
        app = mydash1.Add_Dash(server)
        from .dash_application import mydash2
        app = mydash2.Add_Dash(server)
        return app


In  je subdirectory dash_application  zitten je 2 dashboards  mydash1.py en mydash2.py

mydash1.py

from dash import Dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd


def Add_Dash(server):
    """Create Dash app."""
    external_stylesheets = ['/static/dist/css/style.css']
    external_scripts = ['/static/dist/js/includes/jquery.min.js',
                    '/static/dist/js/main.js']
                   
    dash_app = Dash(server=server,
                    external_stylesheets=external_stylesheets,
                    external_scripts=external_scripts,
                    url_base_pathname=f'/mydash1/')

    # Create Dash Layout
    dash_app.layout = html.Div(children=[
    html.H1(children='Hello Dash 1'),

    html.Div(children='''
        Dash: Dashboard 1.
    '''),
])

    return dash_app.server

mydash2

from dash import Dash
import dash_table
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd


def Add_Dash(server):
    """Create Dash app."""
    external_stylesheets = ['/static/dist/css/style.css']
    external_scripts = ['/static/dist/js/includes/jquery.min.js',
                    '/static/dist/js/main.js']
                   
    dash_app = Dash(server=server,
                    external_stylesheets=external_stylesheets,
                    external_scripts=external_scripts,
                    url_base_pathname=f'/mydash2/')

    # Create Dash Layout
    dash_app.layout = html.Div(children=[
    html.H1(children='Hello Dash 2'),

    html.Div(children='''
        Dash: Dashboard 2.
    '''),
])

    return dash_app.server