So entwerfen Sie ein interaktives Armaturenbrett und ein Plotly -Dashboard mit Rückrufmechanismen für die lokale und On-line -Bereitstellung?

app = sprint.Sprint(__name__, external_stylesheets=(dbc.themes.BOOTSTRAP))


app.format = dbc.Container((
   dbc.Row((
       dbc.Col((
           html.H1("📊 Superior Monetary Dashboard", className="text-center mb-4"),
           html.P(f"Interactive dashboard with {len(df)} information factors throughout {len(stock_names)} shares",
                  className="text-center text-muted"),
           html.Hr()
       ))
   )),
  
   dbc.Row((
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H5("🎛️ Dashboard Controls", className="card-title"),
                  
                   html.Label("Choose Shares:", className="fw-bold mt-3"),
                   dcc.Dropdown(
                       id='stock-dropdown',
                       choices=({'label': f'{inventory} ({base_prices(inventory)})', 'worth': inventory}
                               for inventory in stock_names),
                       worth=('AAPL', 'GOOGL'), 
                       multi=True,
                       placeholder="Select shares to research..."
                   ),
                  
                   html.Label("Date Vary:", className="fw-bold mt-3"),
                   dcc.DatePickerRange(
                       id='date-picker-range',
                       start_date="2023-06-01",
                       end_date="2024-06-01",
                       display_format="YYYY-MM-DD",
                       fashion={'width': '100%'}
                   ),
                  
                   html.Label("Chart Type:", className="fw-bold mt-3"),
                   dcc.RadioItems(
                       id='chart-type',
                       choices=(
                           {'label': ' Line Chart', 'worth': 'line'},
                           {'label': ' Space Chart', 'worth': 'space'},
                           {'label': ' Scatter Plot', 'worth': 'scatter'}
                       ),
                       worth="line",
                       labelStyle={'show': 'block', 'margin': '5px'}
                   ),
                  
                   dbc.Guidelines(
                       id='show-ma',
                       choices=({'label': ' Present Shifting Common', 'worth': 'present'}),
                       worth=(),
                       fashion={'margin': '10px 0'}
                   ),
               ))
           ), className="h-100")
       ), width=3),
      
       dbc.Col((
           dbc.Card((
               dbc.CardHeader("📈 Inventory Value Evaluation"),
               dbc.CardBody((
                   dcc.Graph(id='main-chart', fashion={'top': '450px'})
               ))
           ))
       ), width=9)
   ), className="mb-4"),
  
   dbc.Row((
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H4(id="avg-price", className="text-primary mb-0"),
                   html.Small("Common Value", className="text-muted")
               ))
           ))
       ), width=3),
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H4(id="total-volume", className="text-success mb-0"),
                   html.Small("Complete Quantity", className="text-muted")
               ))
           ))
       ), width=3),
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H4(id="price-range", className="text-info mb-0"),
                   html.Small("Value Vary", className="text-muted")
               ))
           ))
       ), width=3),
       dbc.Col((
           dbc.Card((
               dbc.CardBody((
                   html.H4(id="data-points", className="text-warning mb-0"),
                   html.Small("Information Factors", className="text-muted")
               ))
           ))
       ), width=3)
   ), className="mb-4"),
  
   dbc.Row((
       dbc.Col((
           dbc.Card((
               dbc.CardHeader("📊 Buying and selling Quantity"),
               dbc.CardBody((
                   dcc.Graph(id='volume-chart', fashion={'top': '300px'})
               ))
           ))
       ), width=6),
       dbc.Col((
           dbc.Card((
               dbc.CardHeader("📉 Returns Distribution"),
               dbc.CardBody((
                   dcc.Graph(id='returns-chart', fashion={'top': '300px'})
               ))
           ))
       ), width=6)
   ), className="mb-4"),
  
   dbc.Row((
       dbc.Col((
           dbc.Card((
               dbc.CardHeader("📋 Newest Inventory Information"),
               dbc.CardBody((
                   dash_table.DataTable(
                       id='data-table',
                       columns=(
                           {'title': 'Inventory', 'id': 'Inventory'},
                           {'title': 'Date', 'id': 'Date'},
                           {'title': 'Value ($)', 'id': 'Value', 'kind': 'numeric',
                            'format': {'specifier': '.2f'}},
                           {'title': 'Quantity', 'id': 'Quantity', 'kind': 'numeric',
                            'format': {'specifier': ',.0f'}},
                           {'title': 'Every day Return (%)', 'id': 'Returns', 'kind': 'numeric',
                            'format': {'specifier': '.2%'}}
                       ),
                       style_cell={'textAlign': 'middle', 'fontSize': '14px', 'padding': '10px'},
                       style_header={'backgroundColor': 'rgb(230, 230, 230)', 'fontWeight': 'daring'},
                       style_data_conditional=(
                           {
                               'if': {'filter_query': '{Returns} > 0'},
                               'backgroundColor': '#d4edda'
                           },
                           {
                               'if': {'filter_query': '{Returns} < 0'},
                               'backgroundColor': '#f8d7da'
                           }
                       ),
                       page_size=15,
                       sort_action="native",
                       filter_action="native"
                   )
               ))
           ))
       ))
   ))
), fluid=True)