Comment nommer le menu déroulant dans Dash / Plotly

Question

Je suis assez nouveau dans le dash et j'essaie de comprendre comment placer des noms au-dessus de mes menus déroulants et curseurs et créer un espace entre eux. J'obtiens ces noms "Dataset", "types de modèles" sur le côté au lieu d'en haut des listes déroulantes. C'est le code que j'ai utilisé:

    html.Div(className='row', children=[
        html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),

 
        html.Div(className='three columns', children=dcc.Dropdown(
            id='dropdown-dataset',
            options=[
                {'label': 'Diabetes', 'value': 'diabetes'},
                {'label': 'Boston Housing', 'value': 'boston'},
                {'label': 'Sine Curve', 'value': 'sin'}

            ],
            value='diabetes',
            searchable=False,
            clearable=False,

        ), style=dict(width='33%')),

        html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
        html.Div(className='three columns', children=dcc.Dropdown(
            id='dropdown-select-model',
            options=[
                {'label': 'Linear Regression', 'value': 'linear'},
                {'label': 'Lasso', 'value': 'lasso'},
                {'label': 'Ridge', 'value': 'ridge'},
                {'label': 'Polynomial', 'value': 'polynomial'},
                {'label': 'elastic-net', 'value': 'elastic-net'},

            ],
            value='linear',
            searchable=False,
            clearable=False
        ),style=dict(width='33%')),

        html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
        html.Div(className='three columns', children=dcc.Dropdown(
            id='dropdown-custom-selection',
            options=[
                {'label': 'Add Training Data', 'value': 'training'},
                {'label': 'Add Test Data', 'value': 'test'},
                {'label': 'Remove Data point', 'value': 'remove'},
            ],
            value='training',
            clearable=False,
            searchable=False
        ),style=dict(width='33%')),
    ],style=dict(display='flex')),

Quelqu'un peut-il indiquer où je me trompe?

Éditer :

J'ai ajouté le morceau de code suivant avant ma première liste déroulante et supprimé chaque html.Label avant chaque div et cela fonctionne. Je ne sais pas si c'est la bonne approche:

html.Div(className='row', children=[
      html.Div([
        html.Label(['Select Dataset'], style={'font-weight': 'bold', "text-align": "right","offset":1}),
    ], style=dict(width='33%')),

        html.Div([
                    html.Label(['Select Model'], style={'font-weight': 'bold', "text-align": "center"}),
            ], style=dict(width='33%')),
        html.Div([
                    html.Label(['Add Custom Data'], style={'font-weight': 'bold',"text-align": "left"}),
            ], style=dict(width='33%')),
            ],style=dict(display='flex',justifyContent='center')),

Answer 1

Vous définissez

# row
Div([
   Label(),
   Div([Dropdown()], width='33%')  # column
   Label(),
   Div([Dropdown()], width='33%')  # column
   Label(),
   Div([Dropdown()], width='33%')  # column
])

# row
Div([
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
])

Mais je propose

# row
Div([
   Div([Label(),Dropdown(),Label(),Slide()], width='33%')  # column
   Div([Label(),Dropdown(),Label(),Slide()], width='33%')  # column
   Div([Label(),Dropdown(),Label(),Slide()], width='33%')  # column
])

ou au moins

# row
Div([
   Div([Label(),Dropdown()], width='33%')  # column
   Div([Label(),Dropdown()], width='33%')  # column
   Div([Label(),Dropdown()], width='33%')  # column
])

# row
Div([
   Div([Label(),Slide()], width='33%')  # column
   Div([Label(),Slide()], width='33%')  # column
   Div([Label(),Slide()], width='33%')  # column
])

---

Code de travail minimal.

J'ai supprimé className="three columns"pour supprimer les espaces entre les colonnes et j'avais l'habitude width="33.33%"de mieux utiliser la largeur.

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    
    html.Div(className='row', children=[
        
        html.Div(children=[
                html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-dataset',
                    options=[
                        {'label': 'Diabetes', 'value': 'diabetes'},
                        {'label': 'Boston Housing', 'value': 'boston'},
                        {'label': 'Sine Curve', 'value': 'sin'}

                    ],
                    value='diabetes',
                    searchable=False,
                    clearable=False,
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ], style=dict(width='33.33%')),

        
        html.Div(children=[
                html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-select-model',
                    options=[
                        {'label': 'Linear Regression', 'value': 'linear'},
                        {'label': 'Lasso', 'value': 'lasso'},
                        {'label': 'Ridge', 'value': 'ridge'},
                        {'label': 'Polynomial', 'value': 'polynomial'},
                        {'label': 'elastic-net', 'value': 'elastic-net'},

                    ],
                    value='linear',
                    searchable=False,
                    clearable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ],style=dict(width='33.33%')),

        html.Div(children=[
                html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-custom-selection',
                    options=[
                        {'label': 'Add Training Data', 'value': 'training'},
                        {'label': 'Add Test Data', 'value': 'test'},
                        {'label': 'Remove Data point', 'value': 'remove'},
                    ],
                    value='training',
                    clearable=False,
                    searchable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ],style=dict(width='33.33%')),
    ],style=dict(display='flex')),
)

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

---

Fichier CSS utilisé dans les fils de code pleine largeur en tant que 12 colonnes (similaire à d'autres frameworks CSS - c'est-à-dire. Bootstrap) Donc si vous voulez créer 3 colonnes avec des espaces, vous devez utiliser nameClass="four columns"ce qui signifie «quatre des 12 colonnes» et 4/12donne la largeur 1/3- et ensuite vous pas besoin d'utiliserstyle=dict(width='33.33%')

import dash
import dash_core_components as dcc
import dash_html_components as html
import plotly.express as px
import pandas as pd

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)

app.layout = html.Div(
    
    html.Div(className='row', children=[
        
        html.Div(className="four columns", children=[
                html.Label(['Dataset:'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-dataset',
                    options=[
                        {'label': 'Diabetes', 'value': 'diabetes'},
                        {'label': 'Boston Housing', 'value': 'boston'},
                        {'label': 'Sine Curve', 'value': 'sin'}

                    ],
                    value='diabetes',
                    searchable=False,
                    clearable=False,
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ]),

        
        html.Div(className="four columns", children=[
                html.Label(['Model Type'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-select-model',
                    options=[
                        {'label': 'Linear Regression', 'value': 'linear'},
                        {'label': 'Lasso', 'value': 'lasso'},
                        {'label': 'Ridge', 'value': 'ridge'},
                        {'label': 'Polynomial', 'value': 'polynomial'},
                        {'label': 'elastic-net', 'value': 'elastic-net'},

                    ],
                    value='linear',
                    searchable=False,
                    clearable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ]),

        html.Div(className="four columns", children=[
                html.Label(['Add data'], style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Dropdown(
                    id='dropdown-custom-selection',
                    options=[
                        {'label': 'Add Training Data', 'value': 'training'},
                        {'label': 'Add Test Data', 'value': 'test'},
                        {'label': 'Remove Data point', 'value': 'remove'},
                    ],
                    value='training',
                    clearable=False,
                    searchable=False
                ),
                html.Label('Slider', style={'font-weight': 'bold', "text-align": "center"}),
                dcc.Slider(
                    min=0,
                    max=9,
                    marks={i: 'Label {}'.format(i) if i == 1 else str(i) for i in range(1, 6)},
                    value=5,
                ),
            ]),
    ],style=dict(display='flex')),
)

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

---

ÉDITER:

Bien sûr, vous pouvez également l'organiser en lignes séparées (si cela vous aide)

# row
Div([
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
])

# row
Div([
   Div([Dropdown()], width='33%')  # column
   Div([Dropdown()], width='33%')  # column
   Div([Dropdown()], width='33%')  # column
])

# row
Div([
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
   Div([Label()], width='33%')  # column
])

# row
Div([
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
   Div([Slide()], width='33%')  # column
])