Ejemplo n.º 1
0
def __get_control_tabs():
    tabs = []
    for car in myp.vehicles_list:
        if car.label is None:
            label = car.vin
        else:
            label = car.label
        # pylint: disable=not-callable
        tabs.append(
            dbc.Tab(label=label,
                    id="tab-" + car.vin,
                    children=[
                        daq.ToggleSwitch(id={
                            'role': ABRP_SWITCH,
                            'vin': car.vin
                        },
                                         value=car.vin
                                         in myp.abrp.abrp_enable_vin,
                                         label="Send data to ABRP"),
                        html.Div(id={
                            'role': ABRP_SWITCH + RESPONSE,
                            'vin': car.vin
                        })
                    ]))
    return tabs
Ejemplo n.º 2
0
def serve_layout():
    section1, section2, section3, section4 = build_content(datetime.now(), ASSETS_PATH, display_terms_file, weekly_csv, multi_row_json)
    content_dict = get_content_dict_for_store(section1, section2, section3, section4)
    try:
        page_layout = html.Div(id='page_layout')#build_page_layout(section1, section2, section3, section4)
    except:
        page_layout = html.Div(['There has been a problem accessing the data for this Report.'])

    s_layout = html.Div([
        dcc.Store(id='store_sections', data = [content_dict]),
        Download(id="download-dataframe-xlxs"),
        Download(id="download-dataframe-html"),
        html.Div([
            html.Div([
                # html.Button("Download Report as HTML",n_clicks=0, id="btn_html",style =EXCEL_EXPORT_STYLE ),
                html.Button("Download Report as Excel",n_clicks=0, id="btn_xlxs",style =EXCEL_EXPORT_STYLE ),
                daq.ToggleSwitch(
                    id='toggle-view',
                    label=['Tabs','Single Page'],
                    value=False,
                    style =EXCEL_EXPORT_STYLE
                ),
            ],id='print-hide', className='print-hide'),
            html.H2(['A2CPS Weekly Report']),
            html.Div(id='download-msg'),
            page_layout,
        ]
        , style =CONTENT_STYLE)
    ],style=TACC_IFRAME_SIZE)
    return s_layout
Ejemplo n.º 3
0
def panel():
    return \
        html.Div(className='panel', children=[
            html.Div(className='panelContent', children=[
                html.H4(children="Control Panel"),
                dcc.DatePickerRange(
                    id='datepickerrange',
                    start_date=str(BaseDados.index.min()),
                    end_date=str(BaseDados.index.max()),
                    min_date_allowed=str(BaseDados.index.min()),
                    max_date_allowed=str(BaseDados.index.max()),
                    display_format='DD MM YYYY', style={'padding': '5px'}
                ),
                html.Div(className="switchs", children=
                [
                    html.Div(className="switch",
                             children=[
                                 html.Div(className="switchText", children=item),
                                 daq.ToggleSwitch(id=item, value=False),

                             ]) for item in
                    ["Lampada Frente", "Lampada Fundo", "Projetor", "Computador", "ventilador", 'automatico']

                ]),
            ])])
Ejemplo n.º 4
0
def update_filter_notes(rows):
    # When the table is first rendered, `derived_virtual_data` and
    # `derived_virtual_selected_rows` will be `None`. This is due to an
    # idiosyncrasy in Dash (unsupplied properties are always None and Dash
    # calls the dependent callbacks when the component is first rendered).
    # So, if `rows` is `None`, then the component was just rendered
    # and its value will be the same as the component's dataframe.
    # Instead of setting `None` in here, you could also set
    # `derived_virtual_data=df.to_rows('dict')` when you initialize
    # the component.
    if rows:
        return [
            'Enable the below switch to view filter notes',
            daq.ToggleSwitch(
                id='my-toggle-switch',
                value=False,
                #label='Notes for filtering',
                #labelPosition='bottom',
                color='blue',
                size=25,
                #style={'justify':'left'}
            )
        ]
    else:
        return None
Ejemplo n.º 5
0
def build_chart():
    """Build a diagram of who purchased what."""
    card = dbc.Card(children=[
        dbc.CardHeader(
            dbc.Row(children=[
                dbc.Col(html.H2("Wer trinkt wie viel und was?"), width=7),
                dbc.Col(dbc.Row(children=[
                    dbc.Col(html.H4("Wie viel?"),
                            width=5,
                            style={'text-align': 'right'}),
                    dbc.Col(
                        daq.ToggleSwitch(
                            id="stats_switch", value=False, color='#222299'),
                        width=4,
                    ),
                    dbc.Col(html.H4("Was?"),
                            width=3,
                            style={'text-align': 'left'}),
                ],
                                style={'margin-top': '5px'}),
                        width=5),
            ])),
        dbc.CardBody(children=[dcc.Graph(
            id="statistics",
            figure={},
        )])
    ])
    return card
Ejemplo n.º 6
0
def _get_toggle_switch(name, name_style, color_style, ID):

    _html_toggle    = html.P(children=[html.Div(name, style=name_style),
                                       daq.ToggleSwitch(color=color_style, size=30, value=True,  
                                                        label=['No', 'Yes'], style={"font-size":9, "font-family": "Noto Sans JP", "color":GRAY}, id=ID)], 
                                                        style={"width": "100px", "font-size":9})

    return _html_toggle
Ejemplo n.º 7
0
def get_toggle(toggle_id, default_Value=True):
    return html.Div([
        html.Div('Switch Stack/Group Mode',
                 id=toggle_id + '_display',
                 style={'display': 'inline-block'}),
        html.Div([daq.ToggleSwitch(id=toggle_id, value=default_Value)],
                 style={'display': 'inline-block'})
    ])
Ejemplo n.º 8
0
def getAllClear():
    return html.Div([
        daq.ToggleSwitch(size=20,
                         id='allClear',
                         value=True,
                         style=getStyle(20)),
        html.Div(id='allClearLabel', style=getStyle(80))
    ])
Ejemplo n.º 9
0
 def get_html(self):
     return dbc.Col([
         daq.ToggleSwitch(  # pylint: disable=not-callable
             id=self.get_button_id(),
             value=self.value,
             label=self.label),
         html.Div(id=self.get_response_id())
     ])
Ejemplo n.º 10
0
def fire_map():

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

    page_layout = html.Div(
        id='full_page_container',
        children=[
            html.Div([
                html.Div(className='plume-header',
                         children=[],
                         style={
                             'width': '100%',
                             'height': '70px',
                             'justify-content': 'center',
                             'positon': 'relative'
                         }),
            ]),
            html.Div(
                className='page-body',
                children=[
                    html.H2('Fires Spotted over Ukraine',
                            style={'textAlign': 'center'}),
                    dcc.Markdown('''
         Fires spotted since the 24th of Feb over Ukraine from the [FIMRS satellite products](https://firms.modaps.eosdis.nasa.gov).
         These fires could be related to recent military activity in the area.
        ''',
                                 dangerously_allow_html=True),
                    dcc.Markdown('''
         It is important to note that this satellite product does not capture all fires and will have some false detections. Also many of these fires will not be related to military activity.
        ''',
                                 dangerously_allow_html=True),
                    html.Hr(),
                    dcc.Loading(id='loading_plume_map',
                                children=[
                                    html.Div(id='fire_map_holder',
                                             style={
                                                 'width': '90%',
                                                 'height': '90vh'
                                             })
                                ],
                                type="graph"),
                    html.Br(),
                    daq.ToggleSwitch(id='fire_map_toggle',
                                     value=True,
                                     label='Switch to map view',
                                     labelPosition='bottom'),
                    html.Hr(),
                    # html.Button('Map View',id = 'map_view'),
                ],
                style={
                    'display': 'inline-block',
                    'padding': '8px',
                    'width': '100%',
                    'height': '100hv'
                })
        ])

    return page_layout
Ejemplo n.º 11
0
def get_layout(data):
    layout = html.Div([
        html.Div([
            card_container(children=[
                dcc.Markdown('''
#### These are **your results**.

To share them with friends, generate [your personal link](http://TODO).

Below, you can find a selection of figures and graphs representing
different aspects of your Tinder usage. To produce an even more
comprehensive picture, you can provide the site with additional data! 
''')
            ]),
            html.Div([four_cards(data)], id="four_cards"),
            card_container("Sankey diagram", [
                sankey_graph(data, id='sankey-graph'),
                dcc.Input(id='numbers',
                          type='number',
                          value=None,
                          min=0,
                          placeholder="Numbers"),
                dcc.Input(id='dates',
                          type='number',
                          value=None,
                          min=0,
                          placeholder="Dates"),
                dcc.Input(id='hookups',
                          type='number',
                          value=None,
                          min=0,
                          placeholder="Hookups"),
                dcc.Input(id='f+s',
                          type='number',
                          value=None,
                          min=0,
                          placeholder="F+"),
                dcc.Input(id='relationships',
                          type='number',
                          value=None,
                          min=0,
                          placeholder="Relationships"),
                dcc.Input(id='nothing',
                          type='number',
                          value=None,
                          min=0,
                          placeholder="Nothing"),
                html.Button('Submit', id='button'),
                daq.ToggleSwitch(id='toggle-zoom', value=False)
            ]),
            card_container("Development over time", [tabs(data)]),
        ],
                 className="container")
    ],
                      className="bg-light-grey")
    return layout
Ejemplo n.º 12
0
def build_banner():
    return html.Div([
        html.Div(id="banner",
                 children=[
                     html.Div(
                         id="banner-text",
                         children=[
                             html.Div([
                                 html.Img(
                                     src=app.get_asset_url("Logo.png"),
                                     id="plotly-image1",
                                     style={
                                         "height": "100px",
                                     },
                                 ),
                             ],
                                      className="eight columns"),
                         ],
                     ),
                     html.Div(
                         [
                             daq.ToggleSwitch(id="tabs",
                                              label=['Live', 'Upload'],
                                              style={
                                                  'width': '250px',
                                                  'margin': 'auto'
                                              },
                                              value=False),
                         ],
                         style={
                             'justify-content': 'center',
                             'border': '5px solid #110e2c',
                             'padding': '10px',
                         },
                         className="four columns",
                     ),
                     html.Div(
                         html.Br(),
                         style={
                             "height": "10px",
                             'background-color': '#201a52',
                         },
                         className="twelve columns",
                     )
                 ],
                 style={
                     "height": "100px",
                     "width": "100%",
                     'background-color': '#110e2c',
                     'color': '#FFFFFF',
                     "margin-bottom": "5px",
                 }),
    ])
    def run(self):
        dash_app = dash.Dash(__name__)

        dash_app.layout = html.Div([daq.ToggleSwitch(id="my-toggle-switch", value=False), html.Div(id="output")])

        @dash_app.callback(Output("output", "children"), [Input("my-toggle-switch", "value")])
        def display_output(value):
            if value:
                state = AppState()
                state._request_state()
                return dash_renderjson.DashRenderjson(id="input", data=state._state, max_depth=-1, invert_theme=True)

        dash_app.run_server(host=self.host, port=self.port)
Ejemplo n.º 14
0
 def render_tab_one():
     return [
         html.Label([
             "Select a stock from the portfolio",
             dcc.Dropdown(
                 id="ticker-dropdown",
                 options=[{
                     'label': ticker,
                     'value': ticker
                 } for ticker in portfolio_stocks],
                 placeholder="enter ticker here",
                 value='AC',
             )
         ], ),
         html.Label([
             "Select a trading strategy",
             dcc.Dropdown(
                 id="strategy-dropdown",
                 options=[{
                     'label': 'Covered Call',
                     'value': 'Covered Call'
                 }],
                 placeholder="enter strategy name here",
                 value='Covered Call',
             )
         ], ),
         html.Div(
             id='toggles-div',
             children=[
                 daq.ToggleSwitch(
                     id='forgone-upside-toggle',
                     value=False,
                     size=settings.SIZES['toggles'],
                     color=settings.COLORS['toggles'],
                     label='Show forgone upside from assignment',
                     labelPosition='left',
                     #style={
                     #    'color': self.colors['text']
                     #}
                 ),
             ]),
         dcc.Graph(
             id='all-subplots',
             figure={},
             config={
                 "displayModeBar": True,
                 "scrollZoom": True
             },
         ),
     ]
Ejemplo n.º 15
0
def create_slider():
    return html.Div([
        html.P('COVID-19 Term Timeline', className="card-header"),
        html.Div([], id='interval-holder'),
        dcc.Slider(
            id='date-slider',
            min=0,
            max=len(covid_dates),
            value=0,
            marks=map_covid_dates,
            step=None
        ),
        daq.ToggleSwitch(id = 'play', value = False)
    ],
    style = { 'backgroundColor': '#39485A'})
Ejemplo n.º 16
0
def get_layout():
    return html.Div([
        html.Div([
            html.H2('COLORADO CANNABIS',
                    className='twelve columns',
                    style={'text-align': 'center'}),
        ],
                 className='row'),
        html.Div([
            html.Div([html.H6('Revenue Data', style={'text-align': 'right'})],
                     className='five columns'),
            html.Div([daq.ToggleSwitch(id='rev-biz-switch', value=True)],
                     className='two columns'),
            html.Div([html.H6('Business Data', style={'text-align': 'left'})],
                     className='five columns'),
        ],
                 className='row'),
        html.Div([
            html.Div([
                html.Div(id='map'),
            ], className='seven columns'),
            html.Div([
                html.Div(id='rev-bar-and-markdown'),
            ],
                     className='five columns'),
        ],
                 className='row'),
        html.Div([
            html.Div([
                html.Div(id='biz-selector'),
            ],
                     className='twelve columns'),
        ],
                 className='row'),
        html.Div([
            html.Div([
                html.Div(id='rev-radio'),
            ], className='twelve columns'),
            html.Div([
                html.Div(id='rev-year'),
            ], className='twelve columns'),
        ],
                 className='row'),
        html.Div([
            html.Div([html.Div(id='biz-bar-out')], className='twelve columns'),
        ],
                 className='row'),
    ])
Ejemplo n.º 17
0
def create_slider():
    return html.Div([
        html.Div([], id='interval-holder'),
        daq.ToggleSwitch(
            id='play', value=False, style={
                'marginBottom': 5,
                'marginTop': 15
            }),
        dcc.Slider(id='date-slider',
                   min=0,
                   max=len(covid_dates),
                   value=0,
                   marks=map_covid_dates,
                   step=None)
    ],
                    #style = { 'backgroundColor': '#FFFFFF'}
                    )
Ejemplo n.º 18
0
def _get_toggle_switch(name, name_style, color_style, ID, label=None):
    if label is None:
        label = ['No', 'Yes']

    _html_toggle = html.P(children=[
        html.Div(name, style=name_style),
        daq.ToggleSwitch(color=color_style,
                         size=30,
                         value=False,
                         label=label,
                         style={"font-size": 11},
                         id=ID)
    ],
                          style={
                              "width": "100px",
                              "font-size": 11
                          })

    return _html_toggle
Ejemplo n.º 19
0
def get_layout():
    if not get_django_user():
        return html.H1("Unauthorized")
    return html.Div([
        html.Div([
            dcc.Store(id='store_historical'),
            html.Div(['version: 040721 17:15'],id="version",style={'display':'none'}),
            html.Div(id='div_test'),
            dbc.Row([
                dbc.Col([
                    html.H1('CONSORT Report'),
                ],md = 9),
                dbc.Col([
                    daq.ToggleSwitch(
                        id='toggle-datasource',
                        label=['Live','Historical'],
                        value=False
                    ),
                ],id='dd_datasource',md=3)
            ]),
            dbc.Row([
                dbc.Col([
                    html.Div(id="report_msg"),
                ],md = 9),
                dbc.Col([
                    html.Div([dcc.Dropdown(id="dropdown_dates")],id="div_dropdown_dates"),
                ],md = 3),
            ]),
            dcc.Loading(
                id="loading-1",
                type="default",
                children=html.Div(id="loading-output-1")
            ),
            dcc.Loading(
                id="loading-2",
                type="default",
                children=html.Div(id="loading-output-2")
            ),
            html.Div(id = 'dash_content'),

        ], style =CONTENT_STYLE)
    ],style=TACC_IFRAME_SIZE)
Ejemplo n.º 20
0
def redefine_app(app, df):
    app.layout = html.Div(children=[
        html.Div(
            className='row',
            children=[
                html.Div(
                    className='four columns div-user-controls',
                    children=[
                        html.
                        H1('COVID19 County Nearest Neighbors & Visualization'),
                        html.P('Visualizing time series of multiple counties.',
                               style={'font-style': 'italic'}),
                        html.Br(),
                        html.P('Nearest Neighbors or Manual Selection',
                               style={'text-align': 'center'}),
                        html.Div(
                            daq.ToggleSwitch(id='my-toggle-switch',
                                             size=60,
                                             color='red',
                                             value=False)),
                        html.Br(),
                        html.Div(id='toggle-switch-output'),
                        html.Br(),
                        html.
                        P('Use the toggle button above to switch between dashboards: nearest neighbors or manually choosing counties to visualize.',
                          style={
                              'font-style': 'italic',
                              'text-align': 'center'
                          }),
                    ]),
                html.Div(className='eight columns div-for-charts bg-grey',
                         children=[
                             dcc.Graph(id='timeseries',
                                       config={'displayModeBar': True})
                         ])
            ],
            style={
                'display': 'inline-block',
                'width': '100%',
                'height': '200%'
            }),
    ])
Ejemplo n.º 21
0
def create_summary(algorithm_name):
    return dbc.Card(
        id=f"summary-section-{algorithm_name}",
        children=[
            dbc.CardBody([
                dbc.CardGroup(
                    [],
                    id=f"summary-cards-{algorithm_name}",
                    className="col-sm-12 col-md-12 col-lg-12 col-xl-12 d-flex",
                    style={"margin-top": "15px"}),
                dbc.Row([
                    dbc.Col(daq.ToggleSwitch(
                        id=f"table-toggle-{algorithm_name}", value=False),
                            width=1),
                    dbc.Col(html.Div("Show Anomaly Table"), width=3)
                ],
                        style={'margin-bottom': '15px'})
            ]),
        ],
    )
Ejemplo n.º 22
0
def serve_layout():
    session_id = str(uuid.uuid4())
    return html.Div(
        children=[
            html.Div(session_id, id='session-id', style={'display': 'none'}),
            html.H1(children="Precipitation Map",style={'margin-bottom':'10px'}),
            html.Div(id="update_time"),
            html.Div(id="data_time"),
            html.Br(),
            html.Div(
                [dcc.Graph(id ='precipitation', selectedData={'points': [{'customdata': 44132}]})],
                style={'width':'80%', 'display': 'inline-block'}
            ),
            html.Div(
                [html.Button('select reset',id='reset_button', n_clicks=0,
                    style={'margin': '0px 10px 0px 0px', 'padding': '0px 10px',
                        'display': 'inline-block', 'vertical-align':'baseline'}
                ),
                html.Div([
                    html.Div(['multiple mode'], style={'font-size':'9pt'}),
                    daq.ToggleSwitch(id='force', value=False, size=35)
                ], style={'display': 'inline-block', 'vertical-align':'baseline'})
                ], style={'padding':'0px 0px 10px 0px'}
            ),
            html.Div(
                [dcc.Graph(id ='precipitation_24h')],
                style={'width':'80%', 'display': 'inline-block'}
            ),
            dcc.Interval(
                id='interval-component',
                interval=600*1000, # in milliseconds
                n_intervals=0
            ),
            html.Div(['© 2019 ', dcc.Link('kinosi', href='https://github.com/catdance124')],
                style={'padding':'20px 0px 0px 0px', 'font-size':'9pt'}
            ),
            dcc.Location(id='url', refresh=False),
            html.Div(id='update')
        ],
        style={'height':'100%', 'margin':'0', 'padding':'0', 'text-align': 'center'}
    )
Ejemplo n.º 23
0
def get_layout():
    return html.Div([
        html.Div([
            html.H2('COLORADO CANNABIS',
                    className='twelve columns',
                    style={'text-align': 'center'}),
        ],
                 className='row'),
        html.Div([
            html.Div([html.H6('Business Data', style={'text-align': 'right'})],
                     className='five columns'),
            html.Div([daq.ToggleSwitch(id='rev-biz-switch', value=True)],
                     className='two columns'),
            html.Div([html.H6('Revenue Data', style={'text-align': 'left'})],
                     className='five columns'),
        ],
                 className='row'),
        html.Div(id='revenue'),
        html.Div(id='biz'),
        html.Div(id='crat', style={'display': 'none'}),
    ])
Ejemplo n.º 24
0
 def vaccination_progress(self):
     """
     Returns a chart that visually represents the vaccination progress with a map or line chart.
     """
     fig = self.map_fig()
     return html.Div(
         className="pred-full-vacc-container-container",
         children=[
             html.Div(
                 className="pred-full-vacc-container card",
                 children=[
                     html.Div(
                         className="header-cont",
                         children=[
                             html.H3(className="header",
                                     children="Vaccination Progress"),
                             html.Div(
                                 className="toggle-cont",
                                 id="toggle-cont",
                                 children=[
                                     daq.ToggleSwitch(
                                         className="change-axis",
                                         id="change-axis",
                                         value=False,
                                     ),
                                     html.P("Zoom out"),
                                 ],
                             ),
                         ],
                     ),
                     dcc.Graph(
                         className="pred-full-vacc-graph",
                         id="pred-full-vacc",
                         figure=fig,
                         config=dict(scrollZoom=True),
                     ),
                 ],
             )
         ],
     )
Ejemplo n.º 25
0
def plume_map():

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

    page_layout = html.Div(
        id='full_page_container',
        children=[
            html.Div([
                html.Div(
                    className='plume-header',
                    children=[
                        html.Div(id='home-logo-holder',
                                 children=[html.A(id='home-logo', href="/")]),
                        html.Div(
                            id='imgs',
                            children=[
                                html.Img(
                                    src=
                                    'https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/plume_assets/plume_0008.png?raw=true',
                                    style={
                                        'height': '60px',
                                        'width': '60px',
                                        'padding': '1px',
                                        'display': 'inline-block'
                                    }),
                                html.Img(
                                    src=
                                    'https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/plume_assets/plume_0141.png?raw=true',
                                    style={
                                        'height': '60px',
                                        'width': '60px',
                                        'padding': '1px',
                                        'display': 'inline-block'
                                    }),
                                html.Img(
                                    src=
                                    'https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/plume_assets/plume_0165.png?raw=true',
                                    style={
                                        'height': '60px',
                                        'width': '60px',
                                        'padding': '1px',
                                        'display': 'inline-block'
                                    }),
                                html.Img(
                                    src=
                                    'https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/plume_assets/plume_0299.png?raw=true',
                                    style={
                                        'height': '60px',
                                        'width': '60px',
                                        'padding': '1px',
                                        'display': 'inline-block'
                                    }),
                                html.Img(
                                    src=
                                    'https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/plume_assets/plume_0330.png?raw=true',
                                    style={
                                        'height': '60px',
                                        'width': '60px',
                                        'padding': '1px',
                                        'display': 'inline-block'
                                    }),
                                html.Img(
                                    src=
                                    'https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/plume_assets/plume_0367.png?raw=true',
                                    style={
                                        'height': '60px',
                                        'width': '60px',
                                        'padding': '1px',
                                        'display': 'inline-block'
                                    }),
                            ],
                            style={
                                'margin-left': '33%',
                                'width': '372px',
                                'display': 'inline-block'
                            }),
                        html.Div(
                            id='logos',
                            children=[
                                html.
                                A(href='http://www.tropomi.eu',
                                  children=[
                                      html.
                                      Img(src=
                                          'https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/TROPOMI_logo.jpg?raw=true',
                                          style={
                                              'height': '50px',
                                              'margin': '10px',
                                          })
                                  ]),
                                html.
                                A(href='https://nerc.ukri.org',
                                  children=[
                                      html.
                                      Img(src=
                                          'https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/nerc_logo.png?raw=true',
                                          style={
                                              'height': '40px',
                                              'margin': '10px',
                                          })
                                  ]),
                                html.
                                A(href='https://www.nceo.ac.uk',
                                  children=[
                                      html.
                                      Img(src=
                                          'https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/nceo_logo.png?raw=true',
                                          style={
                                              'height': '40px',
                                              'margin': '10px'
                                          })
                                  ]),
                            ],
                            style={
                                'float': 'right',
                                'margin-right': '5px',
                                'display': 'inline-block'
                            }),
                    ],
                    style={
                        'width': '100%',
                        'height': '70px',
                        'justify-content': 'center',
                        'positon': 'relative'
                    }),
            ]),
            html.Div(
                className='page-body',
                children=[
                    html.
                    H2('Satellites reveal anthropogenic combustion hotspots across the globe',
                       style={'textAlign': 'center'}),
                    dcc.Markdown('''
        The map shows the location of nitrogen dioxide (NO<sub>2</sub>) plumes that have been detected automatically
         by a deep learning model from observations collected by the [TROPOMI](http://www.tropomi.eu)
         instrument on board the Sentinel 5P satellite.
         Nitrogen dioxide is a proxy for combustion so the location of the plumes tell us about combustion hotspots,
         e.g. urban centres, power stations, biomass burning.
        ''',
                                 dangerously_allow_html=True),
                    dcc.Markdown('''
        We are showing the results from analysing two years of satellite observations. We have attempted
        to remove the influence of biomass burning using thermal anomaly data collected by the
        [VIIRS](https://earthdata.nasa.gov/earth-observation-data/near-real-time/firms/viirs-i-band-active-fire-data) satellite,
        although some fires may have slipped through the filter. The remaining plumes we attribute
        to specific combustion sources using other information: locations of power stations are also
        shown in red (data from [Global Power Plant Database](https://datasets.wri.org/dataset/globalpowerplantdatabase))
         and areas of nighttime oil and gas flaring are
        shown in orange (data from [SkyTruth](https://skytruth.org/flaring/)). Check out the ship tracks,
        especially around Spain, across the
        Mediterranean, and along the Suez Canal.
        '''),
                    dcc.Markdown('''
        As you scroll inwards you’ll see the plumes have difference shapes - this is a result of overlapping plumes.
        '''),
                    dcc.Markdown('''
         It is also important to note that the NO<sub>2</sub> data are sensitive to cloud cover and therefore the
         cloudier a place is (e.g. tropical regions) the less likely there it is for there to be clear
         observations and therefore the fewer plumes can be observed. Nevertheless, there is no shortage
         of plumes over the tropics.
        ''',
                                 dangerously_allow_html=True),
                    dcc.Markdown('''
        More information, including methods and analysis can be found in our [paper](https://amt.copernicus.org/articles/15/721/2022/amt-15-721-2022.html).
        '''),
                    dcc.Markdown('''
        Contact: Doug Finch [email](mailto:[email protected]) & [Twitter](https://twitter.com/douglasfinch)
        [<img src="https://github.com/dpfinch/ukatmosphere/blob/master/dataplot/assets/twitter_logo.png?raw=true" width="20px"/>](https://twitter.com/douglasfinch)''',
                                 dangerously_allow_html=True),
                    html.Hr(),
                    dcc.Loading(id='loading_plume_map',
                                children=[
                                    html.Div(id='plume_map_holder',
                                             style={
                                                 'width': '100%',
                                                 'height': '90vh'
                                             })
                                ],
                                type="graph"),
                    html.Br(),
                    daq.ToggleSwitch(id='map_toggle',
                                     value=True,
                                     label='Switch to map view',
                                     labelPosition='bottom'),
                    html.Hr(),
                    # html.Button('Map View',id = 'map_view'),
                ],
                style={
                    'display': 'inline-block',
                    'padding': '8px',
                    'width': '100%',
                    'height': '100hv'
                })
        ])

    return page_layout
Ejemplo n.º 26
0
             className="banner-logo-and-title",
             children=[
                 html.Img(
                     src=app.get_asset_url("dash-logo-white.png"),
                     className="logo",
                 ),
                 html.
                 H2("Dash DAQ: Function Generator & Oscilloscope Control Panel"
                    ),
             ],
         ),
         # Toggle
         html.Div(
             className="row toggleDiv",
             children=daq.ToggleSwitch(id="toggleTheme",
                                       size=40,
                                       value=False,
                                       color="#00418e"),
         ),
     ],
 ),
 html.Div(
     className="row",
     children=[
         # LEFT PANEL - SETTINGS
         html.Div(
             className="five columns",
             children=[
                 html.Div(
                     id="left-panel",
                     children=[
                         html.Div(
Ejemplo n.º 27
0
                 'value': 'pan-troglodytes',
             },
             {
                 'label': 'Macaca-fascicularis',
                 'value': 'macaca-fascicularis',
             },
         ],
         value='human',
     )
 ]),
 html.Div(className='app-controls-block', children=[
     html.Div(className='app-controls-name', children='Sex'),
     daq.ToggleSwitch(
         id='sex-switch',
         color='#230047',
         label=['m', 'f'],
         size=35,
         labelPosition='bottom',
         value=True
     )
 ]),
 html.Div(id='ideogram-resolution-option', children=[
     html.Div(className='app-controls-block', children=[
         html.Div(className='app-controls-name', children='Resolution'),
         dcc.Dropdown(
             className='ideogram-dropdown',
             id='resolution-select',
             options=[
                 {
                     'label': '550 bphs',
                     'value': 550,
                 },
                 html.Div(id='dark-theme-components',
                          children=[
                              daq.DarkThemeProvider(theme=theme,
                                                    children=rootLayout)
                          ],
                          style={
                              'border': 'solid 1px #A2B1C6',
                              'border-radius': '5px',
                              'padding': '20px',
                              'margin-top': '5px'
                          }),
                 html.Br(),
                 daq.ToggleSwitch(id='toggle-theme',
                                  label=['Light', 'Dark'],
                                  value=True,
                                  style={
                                      'width': '250px',
                                      'margin': 'auto'
                                  }),
             ],
             style={'padding': '50px'}))


#For first graph
@app.callback(Output('global-graph', 'figure'), [Input('graph-type', 'value')])
def update_graph(graph_type):
    fig_global = draw_global_graph(state_wise_daily_confirmed,
                                   state_wise_daily_deaths,
                                   state_wise_daily_recovered, graph_type)
    return fig_global
Ejemplo n.º 29
0
import serial

app = dash.Dash(__name__)

server = app.server

app.config["suppress_callback_exceptions"] = True

root_layout = html.Div(
    [
        dcc.Location(id="url", refresh=False),
        html.Div(
            [
                daq.ToggleSwitch(
                    id="toggleTheme",
                    style={"position": "absolute", "transform": "translate(-50%, 20%)"},
                    size=25,
                )
            ],
            id="toggleDiv",
            style={"width": "fit-content", "margin": "0 auto"},
        ),
        html.Div(id="page-content"),
    ]
)

base_layout = html.Div(
    [
        html.Div(
            id="container",
            style={"background-color": "#20304C"},
Ejemplo n.º 30
0
                },
                className='col-9',
            )
        ],
                 className='row'),

        # Selectors
        html.Div(
            [
                # Live-Saved Toggle switch
                html.Div([
                    daq.ToggleSwitch(
                        id='toggle_live_saved',
                        label=["Live", "Saved"],
                        style={
                            'width': '100px',
                            "padding-left": 30
                        },
                        value=False,
                    )
                ],
                         className="col-2"),

                # Dropdown to select saved data to display
                html.Div([
                    dcc.Dropdown(
                        id='dropdown_saved_files',
                        multi=True,
                        disabled=False,
                    )
                ],