How to incorporate external JS and local JS files to my Dash

Dash Python
1

My goal is to incorporate a GitHub heatmap written in JS into my test.py Dash framework.

assets–>google.js
–>index.js
–>main.css
css–>main.css
index.html
test.py
my heatmap(index.html) is written as follows,

<!DOCTYPE html>
<html>
  <head>
    <title>Github contribution graph</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Libraries -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/index.js"></script>

    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-68576141-1', 'auto');
    ga('send', 'pageview');

    </script>
  </head>
  <body>

    <div class="results">
      <div class="js-heatmap"></div>
      <div class="js-months"></div>
      <div class="js-legend"></div>
      <div class="js-empty  hidden  center">
        <h4>Oops!</h4>
        <img src="assets/404.gif" style="width:400px;height:300px"></img>
      </div>
      <div class="js-spinner  loader  hidden"></div>
    </div>
  </body>
  </html>

and I am trying to translate that to my dash framework(test.py),

from datetime import date
import dash
import dash_html_components as html
import dash_core_components as dcc
import re

# external JavaScript files
external_scripts = [
    {'src': 'https://cdn.polyfill.io/v2/polyfill.min.js'},
    {'src': 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'},
    {'src': 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js'},
    {'src': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'},
    {'src':'assets/index.js'},
    {'src':'assets/google.js'}


 
]

# external CSS stylesheets
external_stylesheets = [
    'https://codepen.io/chriddyp/pen/bWLwgP.css',
    {'rel':"stylesheet",'src':'assets/main.css'},
    {'rel':"stylesheet",'href':'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'},
    {'https://codepen.io/chriddyp/pen/bWLwgP.css'}

]


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

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

app.layout = html.Div([
    html.Div(
        'Plotly Dash5',
        className ="results",
        ),
    html.Div(
        className='js-heatmap'),
    html.Div(
        className='js-months'),
    html.Div(
        className='js-legend'),
    html.Div(
        className='js-spinner  loader  hidden'),
    dcc.DatePickerRange(
        id='my-date-picker-range',
        min_date_allowed=date(1995, 8, 5),
        max_date_allowed=date(2017, 9, 19),
        initial_visible_month=date(2017, 8, 5),
        end_date=date(2017, 8, 25)
    ),
    html.Div(id='output-container-date-picker-range')
])


@app.callback(
    dash.dependencies.Output('output-container-date-picker-range', 'children'),
    [dash.dependencies.Input('my-date-picker-range', 'start_date'),
     dash.dependencies.Input('my-date-picker-range', 'end_date')])
def update_output(start_date, end_date):
    string_prefix = 'You have selected: '
    if start_date is not None:
        start_date_object = date.fromisoformat(start_date)
        start_date_string = start_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'Start Date: ' + start_date_string + ' | '
    if end_date is not None:
        end_date_object = date.fromisoformat(end_date)
        end_date_string = end_date_object.strftime('%B %d, %Y')
        string_prefix = string_prefix + 'End Date: ' + end_date_string
    if len(string_prefix) == len('You have selected: '):
        return 'Select a date to see it displayed here'
    else:
        return string_prefix

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

Right now, there’s no error showing, neither is the heatmap.