Передача приборной панели Dash из размещенного на Django приложения на внешнюю веб-страницу

В настоящее время я размещаю свою приборную панель на следующем url: https://xxx.herokuapp.com/dashboard/ExternalDashboard, используя Django и обслуживая HTML-страницу со следующим содержимым:

<!DOCTYPE html>
<html>
<head>
    <title>External Dashboard</title>
    <style>
        body, html {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #plotly-app-container {
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="plotly-app-container">
        {% load plotly_dash %}
        {% plotly_app name="ExternalDashboard" ratio=1 %}
    </div>
</body>
</html>

Это работает очень хорошо, и моя приборная панель взаимодействует и все хорошо.

Теперь я хочу обслужить эту панель на другом сайте, скажем https://YYY.herokuapp.com/FetchDashBoard, здесь я также хочу отправить обратно некоторую информацию, такую как токен аутентификации, который я буду использовать в своей панели для проверки того, какие участки нужно отображать.

Из официальной документации по dash (https://dash.plotly.com/integrating-dash) по интеграции dash я почерпнул ноль полезной информации. Я не фронтенд-разработчик, и простое создание html-страницы на https://YYY.herokuapp.com/FetchDashBoard со следующим содержимым приводит к появлению пустой страницы:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Dashboard</title>
</head>
<body>
    <div id="dash-app"></div>
    <script>
        var setter = window.dash_embedded_component.renderDash(
                   { url_base_pathname: "https://xxx.herokuapp.com/dashboard/ExternalDashboard"},
            'dash-app',
            sharedData
        );
    </script>
</body>
</html>

Имейте в виду, что для начала я не отправляю никаких данных, я просто хочу посмотреть, смогу ли я получить приборную панель без общего состояния, а затем перейти к реализации общего состояния, когда базовый вариант будет работать.

Итак, как мне показать внешнюю приборную панель на сайте YYY и, далее, как мне разделить состояние между двумя сайтами?

Для справки, мой views.py в django, на котором размещено приложение dash, выглядит следующим образом:

from datetime import datetime
from .models import *
import dash
from dash import dcc, html, dash_table, dcc, callback, Output, Input
from django_plotly_dash import DjangoDash
import pandas as pd
import plotly.express as px
import dash_mantine_components as dmc
import plotly.graph_objects as go
from datetime import datetime
import dash_bootstrap_components as dbc
from dash_bootstrap_templates import load_figure_template, ThemeSwitchAIO
import numpy as np
from django.db import connections
import warnings
warnings.filterwarnings("ignore")

load_figure_template("darkly")
app = DjangoDash("ExternalDashboard", external_stylesheets=[dbc.themes.DARKLY])

app.layout = dbc.Container(
    children=[
        dmc.Title("External Dashboard", size="h3"),
        dcc.DatePickerSingle(id="Report-Thru", date=datetime.now().date()),
        dcc.Graph(id="usersession-per-week"),
        dcc.Graph(id="usersession-per-month"),
        html.Div([
            dbc.Row([
                dbc.Col([
                    html.H3("Average Sessions per Day", style={"fontFamily": "Arial", "fontSize": "24px", "fontWeight": "bold", "color": "#FFFFFF"}),
                    dcc.Graph(id="Ave-sessions-per-day"),
                ], width=6),
                dbc.Col([
                    html.H3("Gross Utilization", style={"fontFamily": "Arial", "fontSize": "24px", "fontWeight": "bold", "color": "#FFFFFF"}),
                    dcc.Graph(id="Gross-utilization"),
                ], width=6),
            ])
        ]),
        dcc.Graph(id="route-arrivals")
    ],
    className="darkly"
)
Вернуться на верх