コード例 #1
0
layout = dbc.Container(
    style={'background-image': 'url(/assets/img/fondo4.png)'},
    fluid=True,
    children=[
        dbc.Row([dbc.Col()], style={'height': "90px"}),
        dbc.Row([
            dbc.Col(
                [
                    html.Div(
                        [
                            html.H2("Filter by"),
                        ],
                        style={
                            'marginBottom': 50,
                            'marginTop': 30,
                            "color": "white",
                            "text-align": "center"
                        }),
                    html.Div(
                        [
                            html.H2("Date Picker",
                                    style={
                                        "color": "white",
                                        'marginBottom': 25,
                                        'marginTop': 25,
                                        "text-align": "center"
                                    }),
                            dcc.DatePickerRange(
                                id="range-picker",
                                min_date_allowed=date(2019, 9, 1),
                                start_date=date(2019, 9, 1),
                                end_date=date(2019, 12, 31),
                                display_format='YYYY-MM-DD',
                                clearable=True,
                                calendar_orientation="horizontal",  #vertical
                                start_date_placeholder_text='Start Date',
                                with_portal=False,
                                number_of_months_shown=2,
                                updatemode="bothdates",
                                minimum_nights=1,
                                reopen_calendar_on_clear=True,
                            ),
                        ],
                        style={
                            'marginBottom': 50,
                            'marginTop': 25
                        }),
                    html.Div(id='predicted-data',
                             style={'display': 'none'},
                             children=predicted_data),
                    html.Div(id='time-data',
                             style={'display': 'none'},
                             children=time_data),
                ],
                width={"size": 2},
                style={"background-color": "#42456f"},
                className="col-md-2"),
            dbc.Col(
                className="col-md-10",
                children=[
                    html.Header(
                        className="section-header",
                        children=[
                            html.H3('Predict de Traffic Incidents on Bogotá '),
                            #html.P('Check out the main roads between August and October')
                        ]),
                    dbc.Row([
                        dbc.Col([
                            html.Div(
                                dcc.Graph(id="time-plot",
                                          figure=fig_init,
                                          animate=True))
                        ])
                    ]),
                    dbc.Row([
                        dbc.Col([
                            dbc.Alert([
                                "Take into account that the higher the prediction range, the lower the accuracy of predictions",
                            ])
                        ])
                    ]),
                    dbc.Row([
                        dbc.Col([
                            kpi_component(
                                header="Average of Traffic Incidents predicted",
                                body=average_sinisters,
                                id_header="header-sinister",
                                id_body="mean-sinister",
                                color="primary"),
                        ],
                                style={
                                    'marginBottom': 25,
                                    'marginTop': 25
                                }),
                        dbc.Col([
                            kpi_component(
                                header=
                                "The day with least Traffic Incidents predicted is...",
                                body="{}\nwith {} Traffic Incidents".format(
                                    day_least_sinisters, num_least_sinisters),
                                id_header="header-sinister2",
                                id_body="min-sinister",
                                color="secondary"),
                        ],
                                style={
                                    'marginBottom': 25,
                                    'marginTop': 25
                                }),
                        dbc.Col([
                            kpi_component(
                                header=
                                "Day with most Traffic Incidents predicted",
                                body="{}\nwith {} Traffic Incidents".format(
                                    day_most_sinisters, num_most_sinisters),
                                id_header="header-sinister3",
                                id_body="max-sinister",
                                color="info"),
                        ],
                                style={
                                    'marginBottom': 25,
                                    'marginTop': 25
                                })
                    ]),
                ])
        ])
    ])
コード例 #2
0
#Create navigation bar
navbar = dbc.Navbar(
    dbc.Container(
        [
            html.A(
                # Use row and col to control vertical alignment of logo / brand
                dbc.Row(
                    [
                        dbc.Col(html.Img(src="/assets/ds4A-logo.png", height="25px")),
                        dbc.Col(dbc.NavbarBrand("", className="ml-2")),
                    ],
                    align="center",
                    no_gutters=True,
                ),
                href="/home",
            ),
            dbc.NavbarToggler(id="navbar-toggler2"),
            dbc.Collapse(
                dbc.Nav(
                    # right align dropdown menu with ml-auto className
                    [dropdown], className="ml-auto", navbar=True
                ),
                id="navbar-collapse2",
                navbar=True,
            ),
        ]
    ),
    color="#395CA3", #Company color
    dark=True,
    className="mb-4",
コード例 #3
0
app.layout = dbc.Container(
    [
        dbc.Container(
            [
                html.H1(
                    "Sunny Streets Dashboard",
                    style={"textAlign": "center"},
                    className="display-3",
                )
            ],
            className="p-5 bg-light rounded-1 mt-3 mb-5",
        ),
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.H3("For Funders:"),
                        html.
                        P("Change dropdown and button values to see how your contribution can impact our work."
                          ),
                        dcc.Dropdown(
                            id="bar-data",
                            clearable=False,
                            value="Activity",
                            options=[
                                {
                                    "label": "Activity Center",
                                    "value": "Activity"
                                },
                                {
                                    "label": "Region",
                                    "value": "Program"
                                },
                            ],
                        ),
                    ],
                    width=5,
                ),
                dbc.Col(
                    [html.P("")],
                    style={
                        "borderLeft": "6px solid red",
                        "height": "1100px",
                        "position": "absolute",
                        "left": "49.75%",
                    },
                ),
                dbc.Col(
                    [
                        html.H3("For Volunteers:"),
                        html.
                        P("Use Maps for exploring services and shifts to choose a volunteer Activity Center best for you."
                          ),
                        dcc.Dropdown(
                            id="map1-conslt-data",
                            clearable=False,
                            value="Medical Consults",
                            options=[
                                {
                                    "label": "Medical Consults",
                                    "value": "Medical Consults",
                                },
                                {
                                    "label": "Patient Conversations",
                                    "value": "Patient Conversations",
                                },
                                {
                                    "label": "Referrals",
                                    "value": "Referrals (Formal and informal)",
                                },
                                {
                                    "label": "Substance use",
                                    "value": "Substance use"
                                },
                            ],
                        ),
                    ],
                    width=5,
                ),
            ],
            justify="around",
        ),
        dbc.Row(
            [
                dbc.Col(id="bar-col", children=[], width=5),
                dbc.Col(id="map-conslt-col", children=[], width=5),
            ],
            justify="around",
            className="mb-3",
        ),
        dbc.Row(
            [
                dbc.Col(
                    [
                        dcc.Dropdown(
                            id="hist-data",
                            clearable=False,
                            value="avg",
                            options=[
                                {
                                    "label": "Average shift time",
                                    "value": "avg"
                                },
                                {
                                    "label": "Sum of shifts",
                                    "value": "sum"
                                },
                            ],
                        ),
                        dcc.RadioItems(
                            id="checklist",
                            value="$10,000",
                            className="mt-1",
                            options=[{
                                "label": x,
                                "value": x
                            } for x in ("$0k", "$10,000", "$25,000", "$50,000")
                                     ],
                        ),
                        html.Div(
                            id="thediv",
                            children=dcc.Dropdown(
                                id="activity-data",
                                clearable=False,
                                value="Beddown Event Brisbane CBD",
                                options=[{
                                    "label": x,
                                    "value": x
                                } for x in sorted(dfc.Activity.unique())],
                            ),
                        ),
                    ],
                    width=5,
                ),
                dbc.Col(width=5),
            ],
            justify="around",
        ),
        dbc.Row(
            [
                dbc.Col(id="hist-col", children=[], width=5),
                dbc.Col(
                    [
                        dcc.Graph(
                            id="map2",
                            config={"displayModeBar": False},
                            figure=px.scatter_mapbox(
                                dfc_shift,
                                lat="Latitude",
                                lon="Longitude",
                                hover_data={
                                    "Activity": True,
                                    "Longitude": False,
                                    "Latitude": False,
                                },
                                color="shift_start",
                                zoom=6,
                                labels={
                                    "shift_start": "Shift Start Time"
                                },
                            ).update_layout(
                                mapbox_style="carto-darkmatter",
                                margin={
                                    "r": 0,
                                    "t": 0,
                                    "l": 0,
                                    "b": 0
                                },
                            ).update_traces(marker_size=20),
                        )
                    ],
                    width=5,
                ),
            ],
            justify="around",
        ),
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.Img(
                            src="/assets/image3.jpg",
                            style={
                                "maxHeight": "500px",
                                "maxWidth": "200px"
                            },
                        )
                    ],
                    width=2,
                ),
                dbc.Col(
                    [
                        html.Br(),
                        html.Br(),
                        html.Br(),
                        html.
                        H5("We are also always on the lookout for donations of medical equipment and supplies. If you can help in this area please contact us at [email protected]"
                           ),
                    ],
                    width=7,
                ),
            ],
            justify="center",
            className="mt-5 mb-2",
        ),
    ],
    fluid=True,
)
コード例 #4
0
ファイル: page2.py プロジェクト: bhernan2/final-project
US_country_df['Deaths'] = US_country_df['Deaths'].astype(int).apply(
    lambda x: "{:,}".format(x))
US_country_df['Recovered'] = US_country_df['Recovered'].astype(int).apply(
    lambda x: "{:,}".format(x))
US_country_df['Active'] = US_country_df['Active'].astype(int).apply(
    lambda x: "{:,}".format(x))
US_country_df['Confirmed'] = US_country_df['Confirmed'].astype(
    np.int64).apply(lambda x: "{:,}".format(x))

#title and contributors
US_title_contributors = dbc.Card([
    dbc.CardBody([
        dbc.Container([
            html.H1(children='Remotely monitoring the COVID-19 pandemic: US',
                    className='mt-5 py-4 pb-3 text-center'),
            html.
            P("Dashboard contributors: Bianca A. Hernandez, Ningning Du, Neil Hsu, Youngjung Choi",
              style={'font-weight': 'bold'},
              className='mt-3 py-2 pb-1 text-center'),
        ])
    ])
])

#cards for tally us
US_first_card = dbc.Card([
    dbc.CardBody(children=[
        html.H4('Confirmed',
                style={
                    'padding-top': '5px',
                    'font-weight': 'bold',
                    'color': '#5e4fa2'
                }),
コード例 #5
0
indicators = dbc.Container(
    [
        dbc.Row([
            dbc.Col(
                [
                    html.H2("Filters"),
                    html.Div(id='intermediate-value',
                             style={'display': 'none'},
                             children='indicators'),
                    dbc.Form([
                        dbc.FormGroup([
                            dbc.Label("Country", html_for="country"),
                            dcc.Dropdown(id="country",
                                         options=[{
                                             'label': item,
                                             'value': item
                                         } for item in [
                                             x.country
                                             for x in Country.query.all()
                                         ]],
                                         value='United States'),
                            dbc.Label("Indicator",
                                      html_for="indicator",
                                      id='indicator_type'),
                            dcc.Dropdown(id="indicator",
                                         options=[{
                                             'label': item,
                                             'value': item
                                         } for item in [
                                             x.indicator
                                             for x in default_query.all()
                                         ]],
                                         value='Real GDP'),
                            dbc.Label("Type", html_for="type"),
                            dcc.Dropdown(
                                id="type",
                                options=[{
                                    'label': i,
                                    'value': i
                                } for i in ("Candlesticks", "Line Chart",
                                            "Area Chart")],
                            ),
                            dcc.Graph(id="chart2", style={'height': 300})
                        ],
                                      className="mt-4")
                    ])
                ],
                lg=4,
            ),
            html.Hr(className="my-2"),
            dbc.Col([
                html.H2("Economic Data"),
                dcc.Graph(id="chart1", style={'height': 600}),
            ]),
        ])
    ],
    className="mt-4",
)
コード例 #6
0
ファイル: app.py プロジェクト: FriendlyUser/finance-dashboard
        dbc.Tab(gains_losses, label="Gains/Losses", tab_id='gains-losses'),
        dbc.Tab(partial_stats, label="Partial Stats", tab_id='part-stats'),
        dbc.Tab(basic_stats, label="Full Stats", tab_id='full-stats')
        # dbc.Tab(
        #     html.Iframe(src=f'https://www.rbcgam.com/en/ca/products/mutual-funds/RBF900/detail',
        #     className='full-width'),
        #     label="Iframe", tab_id='iframe'
        # )
    ],
    id="tabs",
    active_tab="gains-losses",
)

page_1 = dbc.Row([
    dbc.Col(
        [
            report_title,
            html.Br(),
            html.Br(), metadata_cards,
            html.Br(), page_1_tabs,
            html.Br(),
            html.Br()
            # only here for demo purposes
        ],
        className='shadow-page')
])

page_2 = gen_p2()

app.layout = dbc.Container([page_1, page_2])
コード例 #7
0
app.layout = dbc.Container(
    [
        #1st ROW
        dbc.Row([
            dbc.Col(html.Div(Time_LED),
                    width={
                        "size": 6,
                        "offset": 3
                    },
                    style={'text-align': 'center'}),
        ]),
        #2nd ROW
        dbc.Row([html.P()]),

        #3rd ROW
        dbc.Row([
            dbc.Col(
                calendar,
                width={'size': 3},
            ),
            dbc.Col(
                weather,
                width={
                    'size': 3,
                    'offset': 6
                },
                #style={'backgroundColor':'white'}
            ),
        ]),
        dbc.Row(),
        dcc.Interval(
            id='interval-component',
            interval=1 * 1000,  # in milliseconds
            n_intervals=0),
        #4th ROW
        dbc.Row([
            dbc.Col(Temp_Graph, width=4),
            dbc.Col(
                #maps,
                News,
                width={
                    'size': 3,
                    'offset': 5
                },
                align="center"
                #style={'backgroundColor':'white'}
            )
        ]),

        #5th Row
        dbc.Row([
            dbc.Col(
                #News,
                width={'size': 5},
                #style={'backgroundColor':'white'}
            ),
        ])
    ],
    fluid=True)
コード例 #8
0
ファイル: app2.py プロジェクト: codeStack82/Dash_Template
body = dbc.Container(
    [
        dbc.Row(
            [
                dbc.Col(
                    [
                        html.H2("Heading 2"),
                        html.P(
                            """Donec id elit non mi porta gravida at eget metus.
                                Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
                                nibh, ut fermentum massa justo sit amet risus. Etiam porta sem
                                malesuada magna mollis euismod. Donec sed odio dui. Donec id elit non
                                mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus
                                commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
                                amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed
                                odio dui."""
                        ),
                        dbc.Button("View details", color="secondary"),
                    ],
                    md=4,
                ),
                dbc.Col(
                    [
                        html.H2("Graph"),
                        dcc.Graph(
                            figure={"data": [{"x": [1, 2, 3], "y": [1, 4, 9]}]}
                        ),
                    ]
                ),
            ]
        )
    ],
    className="mt-4",
)
コード例 #9
0
ファイル: run.py プロジェクト: dakotagporter/bw2_app
                          dark=False)

# Footer docs:
# dbc.Container, dbc.Row, dbc.Col: https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout
# html.P: https://dash.plot.ly/dash-html-components
# fa (font awesome) : https://fontawesome.com/icons/github-square?style=brands
# mr (margin right) : https://getbootstrap.com/docs/4.3/utilities/spacing/
# className='lead' : https://getbootstrap.com/docs/4.3/content/typography/#lead
footer = dbc.Container(
    dbc.Row(
        dbc.Col(
            html.P(
                [
                    html.Span('Your Name', className='mr-2'),
                    html.A(html.I(className='fas fa-envelope-square mr-1'),
                           href='*****@*****.**'),
                    html.A(html.I(className='fab fa-github-square mr-1'),
                           href='https://github.com/dakotagporter'),
                    html.A(html.I(className='fab fa-linkedin mr-1'),
                           href='https://www.linkedin.com/in/dakotagporter'),
                    #html.A(html.I(className='fab fa-twitter-square mr-1'), href='https://twitter.com/<you>'),
                ],
                className='lead'))))

# Layout docs:
# html.Div: https://dash.plot.ly/getting-started
# dcc.Location: https://dash.plot.ly/dash-core-components/location
# dbc.Container: https://dash-bootstrap-components.opensource.faculty.ai/l/components/layout
app.layout = html.Div([
    dcc.Location(id='url', refresh=False), navbar,
    dbc.Container(id='page-content', className='mt-4'),
コード例 #10
0
body = dbc.Container(
    [
        dbc.Row([
            html.
            P("Projections for infections and deaths in Indian States and  for overall India are based in part on the model described in the following paper: ",
              style={
                  "color": "#151516",
                  "font-size": "20px"
              }),
        ]),
        dbc.Row([
            html.P(
                dcc.Link(
                    "Hidden Parameters Impacting Resurgence of SARS-CoV-2 Pandemic",
                    href=
                    "https://www.medrxiv.org/content/10.1101/2021.01.15.20248217v1",
                    target="_blank",
                    style={
                        "color": "#6211FF",
                        "font-size": "20px"
                    }))
        ]),
        dbc.Row([
            html.Label([
                'Projections on removal of lockdown can be found on this link ---> ',
                html.A(
                    'here',
                    href=
                    'https://sars-covid-tracker-india.herokuapp.com/lockdown',
                    style={
                        "color": "#E60B1F",
                        'font-size': '20px'
                    })
            ],
                       style={
                           "color": "#151516",
                           'font-size': '20px'
                       })
        ]),
        dbc.Row([
            html.
            P("Computing is provided by Chameleon Cloud, sponsored by NSF-USA",
              style={"font-size": "10px"})
        ]),
        dbc.Row([
            html.
            P("This data on confirmed cases and deaths has been updated on 9th June, 2021",
              style={
                  "color": "#151516",
                  'font-size': '20px'
              }),
        ]),
        dbc.Row([html.Br()]),
        dbc.Row([
            dbc.Col([
                html.H3(id="sim_ic", style={'display': 'inline-block'}),
                html.Br(),
                html.P("Cummulative", style={'display': 'inline-block'}),
                daq.BooleanSwitch(id='sim_cum-ic',
                                  on=False,
                                  style={
                                      'display': 'inline-block',
                                      'size': '20%'
                                  }),
                html.Br(),

                # html.P(id = "sim_ind_title", style = {'color':'green','display': 'inline-block'}),
                dcc.Graph(id='sim_i_fig', figure=plot_total_cases(True))
            ]),
            dbc.Col([
                # html.H3(id = "sim_i_d", style = {'display': 'inline-block'}),
                html.Br(),
                html.P("Cummulative", style={'display': 'inline-block'}),
                daq.BooleanSwitch(id='sim_cum-i_d',
                                  on=False,
                                  style={
                                      'display': 'inline-block',
                                      'size': '20%'
                                  }),
                html.Br(),

                #html.P(id = "sim_ind_title2", style = {'color':'red','display': 'inline-block'}),
                dcc.Graph(id='sim_i_fig2', figure=plot_total_deaths(True))
            ]),
        ]),
        dbc.Row([
            dcc.Dropdown(id='sim_st',
                         options=[
                             {
                                 'label': 'Andaman and Nicobar',
                                 'value': 'an'
                             },
                             {
                                 'label': 'Andhra Pradesh',
                                 'value': 'ap'
                             },
                             {
                                 'label': 'Arunachal Pradesh',
                                 'value': 'ar'
                             },
                             {
                                 'label': 'Assam',
                                 'value': 'as'
                             },
                             {
                                 'label': 'Bihar',
                                 'value': 'br'
                             },
                             {
                                 'label': 'Chandigarh',
                                 'value': 'ch'
                             },
                             {
                                 'label': 'Chattisgarh',
                                 'value': 'ct'
                             },
                             {
                                 'label': 'Daman and Diu',
                                 'value': 'dn_dd'
                             },
                             {
                                 'label': 'Delhi',
                                 'value': 'dl'
                             },
                             {
                                 'label': 'Goa',
                                 'value': 'ga'
                             },
                             {
                                 'label': 'Gujarat',
                                 'value': 'gj'
                             },
                             {
                                 'label': 'Haryana',
                                 'value': 'hr'
                             },
                             {
                                 'label': 'Himachal Pradesh',
                                 'value': 'hp'
                             },
                             {
                                 'label': 'Jammu and Kashmir',
                                 'value': 'jk'
                             },
                             {
                                 'label': 'Jharkhand',
                                 'value': 'jh'
                             },
                             {
                                 'label': 'Karnataka',
                                 'value': 'ka'
                             },
                             {
                                 'label': 'Kerala',
                                 'value': 'kl'
                             },
                             {
                                 'label': 'Ladakh',
                                 'value': 'ld'
                             },
                             {
                                 'label': 'Lakshdweep',
                                 'value': 'la'
                             },
                             {
                                 'label': 'Madhya Pradesh',
                                 'value': 'mp'
                             },
                             {
                                 'label': 'Maharastra',
                                 'value': 'mh'
                             },
                             {
                                 'label': 'Manipur',
                                 'value': 'mn'
                             },
                             {
                                 'label': 'Meghalaya',
                                 'value': 'ml'
                             },
                             {
                                 'label': 'Mizoram',
                                 'value': 'mz'
                             },
                             {
                                 'label': 'Nagaland',
                                 'value': 'nl'
                             },
                             {
                                 'label': 'Odisha',
                                 'value': 'or'
                             },
                             {
                                 'label': 'Puducherry',
                                 'value': 'py'
                             },
                             {
                                 'label': 'Punjab',
                                 'value': 'pb'
                             },
                             {
                                 'label': 'Rajesthan',
                                 'value': 'rj'
                             },
                             {
                                 'label': 'Sikkim',
                                 'value': 'sk'
                             },
                             {
                                 'label': 'Tamil Nadu',
                                 'value': 'tn'
                             },
                             {
                                 'label': 'Telangana',
                                 'value': 'tg'
                             },
                             {
                                 'label': 'Tripura',
                                 'value': 'tr'
                             },
                             {
                                 'label': 'Uttarakhand',
                                 'value': 'ut'
                             },
                             {
                                 'label': 'Uttar Pradesh',
                                 'value': 'up'
                             },
                             {
                                 'label': 'West Bengal',
                                 'value': 'wb'
                             },
                         ],
                         value='dl',
                         style={
                             'color': 'black',
                             'width': '50%',
                             'display': 'inline-block',
                             'margin-left': '0.8%'
                         }),
        ]),
        dbc.Row([
            dbc.Col([
                html.H3(id="sim_tc", style={'display': 'inline-block'}),
                html.Br(),
                html.P("Cummulative", style={'display': 'inline-block'}),
                daq.BooleanSwitch(id='sim_cum-c',
                                  on=False,
                                  style={
                                      'display': 'inline-block',
                                      'size': '20%'
                                  }),
                html.Br(),
                html.P(id="sim_title1",
                       style={
                           'color': 'green',
                           'display': 'inline-block'
                       }),
                dcc.Graph(id='sim_fig', figure=plot_cases('dl', True))
            ]),
            dbc.Col([
                html.H3(id="sim_td", style={'display': 'inline-block'}),
                html.Br(),
                html.P("Cummulative", style={'display': 'inline-block'}),
                daq.BooleanSwitch(id='sim_cum-d',
                                  on=False,
                                  style={
                                      'display': 'inline-block',
                                      'size': '20%'
                                  }),
                html.Br(),
                html.P(id="sim_title2",
                       style={
                           'color': 'red',
                           'display': 'inline-block'
                       }),
                dcc.Graph(id='sim_fig2', figure=plot_deaths('dl', True))
            ]),
        ]),
    ],
    style={"height": "100vh"})
コード例 #11
0
app.layout = dbc.Container(
    [
        ## Navbar and Header
        navbar,
        html.Br(),
        html.Div(style={'textAlign': 'center'},
                 children=[
                     html.H1([html.Strong('Crime Rates By State and Race')])
                 ]),
        html.Hr(style={'border': '2px solid white'}),
        html.Br(),

        ## First two Graphs and jumbotron
        dbc.Row([
            dbc.Col(jumbotron, md=4),
            dbc.Col([
                dbc.Row([
                    dbc.Col(html.Div([
                        html.H3('Sum of Incidents'),
                        dcc.Graph(id='sum_indcident'),
                        html.Br()
                    ],
                                     style={'textAlign': 'center'}),
                            md=12),
                ]),
                dbc.Row([
                    dbc.Col(html.Div([
                        html.H3('Average of Incident %'),
                        dcc.Graph(id='avg_%')
                    ],
                                     style={'textAlign': 'center'}),
                            md=12)
                ])
            ],
                    md=8)
        ],
                align="center"),
        html.Br(),
        html.Br(),

        ## Total crimes % by race
        dbc.Row([
            dbc.Col(
                html.Div([
                    html.H3('% of Race by All Crimes'),
                    dcc.Graph(id='total_crime',
                              figure=make_plotly_total_sums())
                ],
                         style={'textAlign': 'center'}))
        ]),

        ## US map of Crimes
        dbc.Row([
            dbc.Col(html.Div(
                style={'textAlign': 'center'
                       },
                children=[
                    dcc.Dropdown(
                        id='race',
                        options=[{
                            'label':
                            i + ' ',
                            'value': i
                        } for i in np.append(['All'], data['Race'].unique())],
                        value='All'),
                    html.Div(children=[html.Br()]),
                    dcc.Dropdown(id='crime',
                                 options=[{
                                     'label': i + ' ',
                                     'value': i
                                 } for i in data['Crime'].unique()],
                                 value='Aggravated Assault'),
                    html.Div(children=[html.Br()]),
                    dcc.RadioItems(
                        id='rates',
                        options=[{
                            'label': 'Crime Rate by Racial Population  ',
                            'value': 'race_pop'
                        }, {
                            'label': 'Crime Rate by Total Population  ',
                            'value': 'total_pop'
                        }],
                        value='Crime Rate by Total Population  ')
                ]),
                    md=5),
            dbc.Col(html.Div(
                [html.H3('Crime as % of Population'),
                 dcc.Graph(id='us_map')],
                style={'textAlign': 'center'}),
                    md=7),
        ],
                align="center"),

        ## Footer with Citation
        html.Br(),
        html.Br(),
        html.Footer(
            'United States Department of Health and Human Services (US DHHS), Centers for Disease Control and Prevention (CDC),'
            'National Center for Health Statistics (NCHS), Bridged-Race Population Estimates, United States July 1st resident '
            'population by state, county, age, sex, bridged-race, and Hispanic origin. Compiled from 1990-1999 bridged-race intercensal '
            'population estimates (released by NCHS on 7/26/2004); revised bridged-race 2000-2009 intercensal population estimates (released by NCHS on 10/26/2012);'
            ' and bridged-race Vintage 2018 (2010-2018) postcensal population estimates (released by NCHS on 6/25/2019). Available on CDC WONDER Online Database.'
            ' Accessed at http://wonder.cdc.gov/bridged-race-v2018.html on Jun 9, 2020 5:27:20 PM'
        )
    ],
    fluid=True)
コード例 #12
0
ファイル: app3.py プロジェクト: tonybutzer/npset
app.layout = dbc.Container(
    [
        html.H1('Phenology Library'),
        html.P('Interactive mapping of NDVI signatures by land cover class.'),
        # html.Hr(), #adds lines above and below the H1 and P
        dbc.Row(
            [
                dbc.Col(
                    dcc.Graph(
                        id='map-graph',
                        # hoverData= {'points': [{'customdata': customdata}]}
                        # animate=True,
                    ),
                    md=12),
            ],
            align='center',
        ),
        controls,
        dbc.Row(
            [
                dbc.Col(dbc.Tabs(
                    [
                        dbc.Tab(label='Scatter', tab_id='scatter'),
                        dbc.Tab(label='BoxPlot', tab_id='boxplot'),
                    ],
                    id='tabs',
                ),
                        html.Div(id='tab-content', className='p-4'),
                        md=6),

                #     ],
                # ),
                # dcc.Graph(
                #     id='all-lc-scatter'
                # ),
                # md=6),
                dbc.Col(
                    dcc.Graph(
                        # TODO: Fix y axis range
                        id='ndvi-by-doy-scatter'),
                    md=6),
            ],
            align='right',
        ),
    ],
    fluid=True,
)
コード例 #13
0
index_layout = dbc.Container([
    navbar,
    dbc.Row([
        dbc.Col([
            html.H3("explainerdashboard"),
            dcc.Markdown(
                "`explainerdashboard` is a python package that makes it easy"
                " to quickly build an interactive dashboard that explains the inner "
                "workings of a fitted machine learning model. This allows you to "
                "open up the 'black box' and show customers, managers, "
                "stakeholders, regulators (and yourself) exactly how "
                "the machine learning algorithm generates its predictions."),
            dcc.Markdown(
                "You can explore model performance, feature importances, "
                "feature contributions (SHAP values), what-if scenarios, "
                "(partial) dependences, feature interactions, individual predictions, "
                "permutation importances and even individual decision trees. "
                "All interactively. All with a minimum amount of code."),
            dcc.Markdown(
                "Works with all scikit-learn compatible models, including XGBoost, Catboost and LightGBM."
            ),
            dcc.Markdown(
                "Due to the modular design, it is also really easy to design your "
                "own custom dashboards, such as the custom example below."),
        ])
    ],
            justify="center"),
    dbc.Row([
        dbc.Col([
            html.H3("Installation"),
            dcc.Markdown("""
You can install the library with:

```
    pip install explainerdashboard
```

or:

```
    conda install -c conda-forge explainerdashboard
```

""")
        ])
    ],
            justify="center"),
    dbc.Row([
        dbc.Col([
            dcc.Markdown("""
More information can be found in the [github repo](http://github.com/oegedijk/explainerdashboard) 
and the documentation on [explainerdashboard.readthedocs.io](http://explainerdashboard.readthedocs.io).
""")
        ])
    ],
            justify="center"),
    dbc.Row([
        dbc.Col([
            html.H3("Examples"),
            dcc.Markdown("""
Below you can find demonstrations of the three default dashboards for classification, 
regression and multi class classification problems, plus one demonstration of 
a custom dashboard.
"""),
        ])
    ],
            justify="center"),
    dbc.Row([
        dbc.Col([
            default_cards,
        ]),
    ]),
    dbc.Row([dbc.Col([custom_cards])], justify="start")
])
コード例 #14
0
        dbc.NavItem(dcc.Link('Insights', href='/insights', className='nav-link')), 
        dbc.NavItem(dcc.Link('Process', href='/process', className='nav-link')), 
    ],
    sticky='top',
    color='light', 
    dark=False
)

footer = dbc.Container(
    dbc.Row(
        dbc.Col(
            html.P(
                [
                    html.Span('Your Name', className='mr-2'), 
                    html.A(html.I(className='fas fa-envelope-square mr-1'), href='mailto:<you>@<provider>.com'), 
                    html.A(html.I(className='fab fa-github-square mr-1'), href='https://github.com/<you>/<repo>'), 
                    html.A(html.I(className='fab fa-linkedin mr-1'), href='https://www.linkedin.com/in/<you>/'), 
                    html.A(html.I(className='fab fa-twitter-square mr-1'), href='https://twitter.com/<you>'), 
                ], 
                className='lead'
            )
        )
    )
)

# For more explanation, see: 
# Plotly Dash User Guide, URL Routing and Multiple Apps
# https://dash.plot.ly/urls

app.layout = html.Div([
    dcc.Location(id='url', refresh=False), 
    navbar, 
コード例 #15
0
app = Dash(__name__, external_stylesheets=[dbc.themes.LUMEN])

df = pd.read_csv('https://raw.githubusercontent.com/Coding-with-Adam/Dash-by-Plotly/master/Dash_Interactive_Graphs/Candle_OHLC/oil_prices.csv')
df.Date = pd.to_datetime(df.Date)

app.layout = dbc.Container([
    html.H1('Candlestick vs OHLC Charts', style={'textAlign': 'center'}),

    dbc.Row([
        dbc.Col([html.Label('Volume of oil over:'),
                 dcc.Input(id='oil-volume', type='number', min=80000,
                           max=700000, step=10000, value=80000)
        ], width=4),
    ]),

    dbc.Row([
        dbc.Col([html.Label('CandleStick Chart')], width=dict(size=4, offset=2)),
        dbc.Col([html.Label('OHLC Chart')], width=dict(size=4, offset=2))
    ]),

    dbc.Row([
        dbc.Col([dcc.Graph(id='candle', figure={}, style={'height': '80vh'})], width=6),
        dbc.Col([dcc.Graph(id='ohlc', figure={}, style={'height': '80vh'})], width=6)
    ]),
], fluid=True)


@callback(
    Output(component_id='candle', component_property='figure'),
    Output(component_id='ohlc', component_property='figure'),
    Input(component_id='oil-volume', component_property='value')
コード例 #16
0
def create_dashboard2(server):
    external_stylesheets = [dbc.themes.BOOTSTRAP]
    app = dash.Dash(__name__,
                    server=server,
                    url_base_pathname='/dashboard2/',
                    external_stylesheets=external_stylesheets)
    selected = []
    atc_list = get_atc()
    app.layout = html.Div(
        className='total-container',
        children=[
            dbc.Container(
                fluid=True,
                children=[
                    html.Div(className='header',
                             children=[
                                 html.H3(className='title',
                                         children="연관 약품 분석 (빈도/관련도)")
                             ]),
                    dbc.Row([
                        dbc.Col([
                            dbc.Card([
                                dbc.Label('단일/복합처방 선택'),
                                dcc.Dropdown(id='select1',
                                             className='select',
                                             options=[{
                                                 'label': '단일',
                                                 'value': 'single'
                                             }, {
                                                 'label': '복수',
                                                 'value': 'multi'
                                             }],
                                             placeholder='성분 개수',
                                             searchable=False),
                                dbc.Label('AND/OR 조건선택'),
                                dcc.Dropdown(id='select2',
                                             className='select',
                                             searchable=False),
                                dbc.Label('품목선택'),
                                dcc.Dropdown(
                                    id='elements',
                                    className='select',
                                    options=[{
                                        'label': str(a) + ' : ' + str(b),
                                        'value': str(a)
                                    } for a, b in zip(atc_list[0], atc_list[1])
                                             ],
                                    placeholder='원하는 성분 선택',
                                    disabled=False,
                                    multi=True,
                                    value=None,
                                    optionHeight=80,
                                ),
                                dbc.Label('지지도 설정'),
                                dcc.Slider(id='num',
                                           min=0.01,
                                           max=40,
                                           step=0.01,
                                           value=10,
                                           included=False,
                                           marks={
                                               i: str(i) + '%'
                                               for i in range(10, 41, 10)
                                           }),
                                html.Br(),
                                dbc.Button("연관 품목 조회",
                                           id="submit_button",
                                           n_clicks=0,
                                           color="primary",
                                           outline=True,
                                           block=True,
                                           loading_state={'is_loading': True}),
                                html.Br(),
                                dbc.Spinner(html.Div(id="alert-msg"))
                            ],
                                     body=True),
                        ],
                                md=3),
                        dbc.Col(
                            [
                                dbc.Row([
                                    dbc.Card([
                                        dbc.CardBody([
                                            dbc.Label('병용처방항목 필터링'),
                                            dcc.Dropdown(
                                                id='filter-freq-elements',
                                                options=[{
                                                    'label':
                                                    str(a) + ' : ' + str(b),
                                                    'value':
                                                    str(a)
                                                } for a, b in zip(
                                                    atc_list[0], atc_list[1])],
                                                placeholder='필터링할 성분 선택',
                                                disabled=False,
                                                multi=True)
                                        ])
                                    ],
                                             style={
                                                 'margin-bottom': '10px',
                                                 'width': '100%'
                                             }),
                                    dbc.Card(
                                        [
                                            dbc.CardBody([
                                                html.Div(
                                                    id='freq-download-button',
                                                    children=[
                                                        html.
                                                        A(html.
                                                          Button(
                                                              '다운로드',
                                                              n_clicks=0),
                                                          id='freq_csv_link',
                                                          href=
                                                          "/dashboard2/download_freq_csv"
                                                          ),
                                                        html.Span(
                                                            id='freq_len',
                                                            className=
                                                            'size_explain')
                                                    ]),
                                                dt.DataTable(
                                                    id='datatable-paging-freq',
                                                    columns=[{
                                                        'name': i,
                                                        'id': i,
                                                        'deletable': True
                                                    } for i in sorted(
                                                        df_freq.columns) if
                                                             i != 'total_set'],
                                                    page_current=0,
                                                    page_size=PAGE_SIZE,
                                                    page_action='custom',
                                                    sort_action='custom',
                                                    sort_mode='multi',
                                                    filter_action='custom',
                                                    filter_query='',
                                                    sort_by=[],
                                                    style_cell={
                                                        'whiteSpace': 'normal',
                                                        'height': 'auto'
                                                    },
                                                    style_table={
                                                        'minWidth': '100%',
                                                        'overflowX': 'auto'
                                                    })
                                            ])
                                        ],
                                        style={
                                            'width': '100%',
                                            'minHeight': '500px',
                                            'padding': '15px'
                                        })
                                ],
                                        style={'margin-bottom': '40px'
                                               }),  #,md=4
                                dbc.Row([
                                    dbc.Card([
                                        dbc.CardBody([
                                            dbc.Label('병용처방항목 필터링'),
                                            dcc.Dropdown(
                                                id='filter-asso-elements',
                                                options=[{
                                                    'label':
                                                    str(a) + ' : ' + str(b),
                                                    'value':
                                                    str(a)
                                                } for a, b in zip(
                                                    atc_list[0], atc_list[1])],
                                                placeholder='필터링할 성분 선택',
                                                disabled=False,
                                                multi=True)
                                        ])
                                    ],
                                             style={
                                                 'margin-bottom': '10px',
                                                 'width': '100%'
                                             }),
                                    dbc.Card(
                                        [
                                            dbc.CardBody([
                                                html.Div(
                                                    id='asso-download-button',
                                                    children=[
                                                        html.
                                                        A(html.
                                                          Button(
                                                              '다운로드',
                                                              n_clicks=0),
                                                          id='asso_csv_link',
                                                          href=
                                                          "/dashboard2/download_asso_csv"
                                                          ),
                                                        html.Span(
                                                            id='asso_len',
                                                            className=
                                                            'size_explain')
                                                    ]),
                                                dt.DataTable(
                                                    id='datatable-paging-asso',
                                                    columns=[
                                                        {
                                                            'name': i,
                                                            'id': i,
                                                            'deletable': True
                                                        } for i in sorted(
                                                            df_asso.columns)
                                                        if i != 'total_set'
                                                    ],
                                                    page_current=0,
                                                    page_size=PAGE_SIZE,
                                                    page_action='custom',
                                                    sort_action='custom',
                                                    sort_mode='multi',
                                                    filter_action='custom',
                                                    filter_query='',
                                                    sort_by=[],
                                                    style_cell={
                                                        'whiteSpace': 'normal',
                                                        'height': 'auto'
                                                    },
                                                    style_table={
                                                        'minWidth': '100%',
                                                        'overflowX': 'auto'
                                                    })
                                            ])
                                        ],
                                        style={
                                            'width': '100%',
                                            'minHeight': '500px',
                                            'padding': '15px'
                                        })
                                ])
                            ],
                            md=9)  #,md=5
                    ]),
                    html.Div(id='intermediate_freq', style={'display':
                                                            'none'}),
                    html.Div(id='intermediate_asso', style={'display': 'none'})
                ],
                style={"margin": "auto"})
        ])
    init_callback(app, atc_list)
    return app
コード例 #17
0
ファイル: app.py プロジェクト: fpdcc/parkinglots_dashboard
body = dbc.Container([
    html.Div(dcc.Dropdown(id='yaxis',
                          options=[{
                              'label': i.title(),
                              'value': i
                          } for i in zones],
                          value='All'),
             style={
                 'width': '48%',
                 'float': 'left',
                 'display': 'inline-block',
                 'padding-bottom': '5px'
             }),
    html.Button(id='submit-button',
                n_clicks=0,
                children='Submit',
                style={
                    'fontSize': 18,
                    'display': 'inline-block'
                }),
    html.Div(dcc.Graph(id='map', figure=gen_map(df))),
    html.Div(dcc.Graph(id='graph-lots'),
             style={
                 'margin': 0,
                 'height': 900,
                 'height': '33%'
             }),
    html.Div([
        dbc.Row([
            dt.DataTable(
                id='datatable-lots',
                data=df.to_dict("records"),
                columns=[{
                    "name": i,
                    "id": i,
                    "type": "text"
                } for i in sorted(df.columns.difference(['geom']))],
                row_selectable="multi",
                sorting=True,
                filtering=True,
                selected_rows=[],
            ),
            #style={'margin': 0, 'width':'100%', 'height': '33%', 'verticalAlign':'top'}
        ]),
        html.Div(id='selected-indexes'),
    ])
])
コード例 #18
0
body = dbc.Container(
    [
        html.Br(),
        dbc.Row(
            [
                dbc.Col(
                    html.Div([
                        html.Br([]),
                        html.H5("Bienvenue!",
                                style={
                                    'color': 'red',
                                    'backgroundColor': 'white'
                                }),
                        html.Br([]),
                        html.P(
                            "\
                            Vous êtes sur la page d'acceuil du tutoriel de développement de dashbord en python avec Dash. \
                            Je vous présente ici les données du trafic web d'un site internet. Ce sont notamment les accès avec  \
                            differents appareils (mac, android, iphone_ipad, autre_pc) que vous pouvez visualiser ici sur\
                            2 mois (Octobre - novembre) grâce à un sélecteur de date dans la table ci-dessous.",
                            style={"color": "#000406"},
                        ),
                        html.P(
                            "\
                            Ces données ont par la suite été transformées pour interagir dynamiquement avec des graphiques. \
                            On y affiche des informations telles que: le nombre total d'accès à la plateform par appareil ,  \
                        les graphiques d'évolution des accès par appareil , par type d'appareil et par système d'exploitation sur plusieurs mois et années.\
                        Vous pouvez accéder au dashboard via la barre de navigation ou en cliquant directement ci-dessous.",
                            style={"color": "#000406"},
                        ),
                        dbc.Row([
                            #Navlink dashbord
                            dbc.NavLink("Accès Dashbsoard",
                                        href="/dashboard",
                                        style={'color': 'blue'})
                        ])
                    ]),
                    style={
                        'color': 'red',
                        'backgroundColor': 'white'
                    })
            ],
            justify="center",
            align="center"),
        html.Br(),
        dbc.Row([dbc.Col(date_picker, lg=4),
                 dbc.Col(table, lg=8)]),
    ],
    style={"height": "100vh"})
コード例 #19
0
ファイル: gallery.py プロジェクト: rafameg/tfm_ucm
tab_1_layout = dbc.Container([
    html.Br(),
    # Se Crea la PRIMERA FILA:
    dbc.Row([
        # La primera fila solo incluye UNA COLUMNA, esta columna
        # contiene el titulo de esta seccion:
        html.Div([
            html.H2('Featured Virtual Tours'),
        ],
                 style={'text-align': 'left'})
    ]),
    html.Hr(),  # Añade un linea horizontal

    # Se Crea la SEGUNDA FILA:
    dbc.Row([
        # Solo contiene un columna que incluye un elemento
        # MARKDOWN, que sera una pequeña descripcion de la seccion:
        dbc.Col(
            html.Div([
                dcc.Markdown(id='markdown',
                             children='''
                        Immerse yourself in the city of your dreams. Click on any of the following virtual tours of properties currently available for sale in the most emblematic areas of Miami. Find the house or condo right for you and contact us to coordinate an appointment.
                    ''')
            ]), ),
    ]),
    dbc.Row([
        dbc.Col(
            html.Div([
                html.Iframe(
                    src='https://player.vimeo.com/video/254172349?autoplay=1',
                    style={
                        'width': 525,
                        'height': 300,
                        'horizontal-align': 'center'
                    })
            ],
                     style={'text-align': 'left'}), ),
        dbc.Col(
            html.Div([
                html.Iframe(
                    src='https://player.vimeo.com/video/245191755?autoplay=1',
                    style={
                        'width': 525,
                        'height': 300,
                        'horizontal-align': 'center'
                    })
            ],
                     style={'text-align': 'left'}), )
    ]),
    html.Hr(),  # Añade un linea horizontal
    html.H2("Featured Properties"),
    html.Hr(),
    dbc.Row([
        html.
        P("Get yourself a little tour of your own through some of the most exclusive neighborhoods in Miami. Choose the key attributes of your ideal home or condo and get acquainted with the best buying opportunities available today."
          )
    ]),
    html.Hr(),
    # Se Crea la TERCERA FILA:
    dbc.Row([
        # PRIMERA COLUMNA de la tercera fila, esta columna contiene el elemento de alarma
        # que lo usamos para resaltar el texto de encabezado del RadioItem de ciudades:
        dbc.Col(html.Div([dbc.Alert([
            "Select city:",
        ], color='dark')]),
                width={
                    'size': 2,
                    'offset': 2
                },
                align='center'),
        # SEGUNDA COLUMNA de la tercera fila, esta columna contiene el elemento de alarma
        # que lo usamos para resaltar el texto de encabezado del RadioItem de caracteristicas:
        dbc.Col(html.Div([dbc.Alert([
            "Select features:",
        ], color='dark')]),
                width={
                    'size': 2,
                    'offset': 4
                },
                align='center')
    ]),

    # Se Crea la CUARTA FILA:
    dbc.Row(
        [
            # PRIMERA COLUMNA de la cuarta fila, esta columna contiene
            # el elemento RadioItem para seleccionar una ciudad:
            dbc.Col(html.Div([
                dcc.RadioItems(id='city',
                               options=[{
                                   'label': i,
                                   'value': i
                               } for i in df_chalets['city'].unique()],
                               value='Coconut Grove',
                               labelStyle={'display': 'block'}),
            ],
                             style={
                                 'fontFamily': 'arial',
                                 'fontSize': 20,
                             }),
                    width={
                        'size': 2,
                        'offset': 2
                    }),
            # SEGUNDA COLUMNA de la cuarta fila, esta columna contiene
            # el elemento RadioItem para seleccionar una caracterisca:
            dbc.Col(html.Div([
                dcc.RadioItems(
                    id='characteristics',
                    options=[{
                        'label': i,
                        'value': i
                    } for i in df_chalets['characteristics'].unique()],
                    value='Garden',
                    labelStyle={'display': 'block'}),
            ],
                             style={
                                 'fontFamily': 'arial',
                                 'fontSize': 20
                             }),
                    width={
                        'size': 2,
                        'offset': 4
                    })
        ],
        justify='start'),
    html.Hr(),  # Añade un linea horizontal
    html.Br(),

    # Se Crea la QUINTA FILA:
    dbc.Row([
        # Solo tiene una columna que va a incluir la imagen:
        dbc.Col(html.Div([
            html.Img(id='display-image',
                     src='children',
                     height=300,
                     style={'align': 'center'})
        ],
                         style={'text-align': 'left'}),
                width={'offset': 3})
    ]),
])
コード例 #20
0
body = dbc.Container([
    dbc.Row([
        dbc.Col(
            html.Div(className='app-header',
                     children=[
                         html.Div('DENVER TEMPERATURE RECORD',
                                  className="app-header--title"),
                     ]), ),
    ]),
    dbc.Row([
        dbc.Col(html.Div('Select Product'), width=4),
        dbc.Col(html.Div('Options')),
    ]),
    dbc.Row([
        dbc.Col(dcc.RadioItems(id='product',
                               options=[
                                   {
                                       'label': 'Daily data for a month',
                                       'value': 'daily-data-month'
                                   },
                                   {
                                       'label': 'Temperature graphs',
                                       'value': 'temp-graph'
                                   },
                                   {
                                       'label': 'Calendar day summaries',
                                       'value': 'cal-day-summary'
                                   },
                               ],
                               value='daily_data_month'),
                width={'size': 3}
                # justify='around',
                ),
        dbc.Col(html.Div(id='time-param'), width={'size': 1}),
        dbc.Col(html.Div(id='year-picker'), width={'size': 1})
    ]),
    dbc.Row([
        dbc.Col(html.Div(id='graph-info-row')),
    ]),
    dbc.Row([
        dbc.Col(html.Div(id='period-picker'), width={'size': 3}),
        dbc.Col(html.Div(id='graph-stuff'), width={'size': 8}),
    ]),
    dbc.Row([
        dbc.Col(html.H5('SELECT YEAR', style={'text-align': 'center'})),
    ]),
])
コード例 #21
0
# -*- coding: utf-8 -*-
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from app import app
from apps.apputil import ANALYSIS_FINISHED_CONTAINER, get_graph

from metrics.ucecomparison import modelmetrics

layout = dbc.Container(
    [
        modelmetrics.ModelNodesNumber.ui_element(),
        modelmetrics.ModelEdgesNumber.ui_element(),
        # modelmetrics.ModelIndegree.ui_element(),
        # modelmetrics.ModelOutdegree.ui_element(),
        modelmetrics.ModelNodeConnectivity.ui_element(),
        modelmetrics.ModelEdgeConnectivity.ui_element(),
        modelmetrics.ModelAvgGraphDepth.ui_element(),
        # modelmetrics.ModelMaxGraphDepth.ui_element(),
        modelmetrics.ModelDensity.ui_element(),
    ],
    className="tab_div tab-div-custom")


@app.callback(
    Output(modelmetrics.ModelNodesNumber.get_ui_loading_id(), 'children'),
    [Input(ANALYSIS_FINISHED_CONTAINER, 'children')])
def model_nodes_number_ctr(_):
    return get_graph(modelmetrics.ModelNodesNumber.get_id())


@app.callback(
コード例 #22
0
            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.''')),
            id="collapse",className='nt-3 mb-3'
        ),
    ]
)


app.layout = html.Div([
    dcc.Location(id="url", refresh=False), 
    navbar, 
    dbc.Jumbotron([
        dbc.Container([
            collapse,
            html.Div(id="page-content"),
        ])
    ])
])

@app.callback(
    dash.dependencies.Output("page-content", "children"),
    [dash.dependencies.Input("url", "pathname")],
)
def display_page(pathname):

    if pathname == "/":
        return page_home

    if pathname == "/page_1":
        return page_1
コード例 #23
0
ファイル: main.py プロジェクト: ty-perbole/bitcoindash
app.layout = dbc.Container(
    [
        dcc.Location(id='url-input', refresh=False),
        dcc.Location(id='url-output', refresh=False),
        html.H1("Bitcoin KPIs"),
        dbc.Container(
            [
                dbc.Row([
                    dbc.Col(html.H4("Date Range"), width=4),
                    dbc.Col(html.H4("Date Granularity"), width=3),
                    dbc.Col(html.H4("Log/Linear"), width=3)
                ],
                        justify="center"),
                dbc.Row([
                    dbc.Col(dcc.DatePickerRange(
                        id='date-picker-range',
                        min_date_allowed=datetime.date(2009, 1, 3),
                        max_date_allowed=datetime.datetime.now() -
                        datetime.timedelta(1),
                        start_date=datetime.datetime.now() -
                        datetime.timedelta(365 * 4),
                        end_date=datetime.datetime.now()),
                            width={"size": 4}),
                    dbc.Col(dcc.Dropdown(id='date-granularity-picker',
                                         options=[{
                                             'label': 'Daily',
                                             'value': 'day'
                                         }, {
                                             'label': 'Weekly',
                                             'value': 'week'
                                         }, {
                                             'label':
                                             'RHR Mode (Weekly Thurs-Weds)',
                                             'value': 'rhr_week'
                                         }, {
                                             'label': 'Monthly',
                                             'value': 'month'
                                         }, {
                                             'label': 'Yearly',
                                             'value': 'year'
                                         }, {
                                             'label': 'Halving Era',
                                             'value': 'halving_era'
                                         }, {
                                             'label': 'Market Cycle',
                                             'value': 'market_cycle'
                                         }],
                                         value='week'),
                            width={"size": 3}),
                    dbc.Col(dcc.Dropdown(id='log-linear-picker',
                                         options=[{
                                             'label': 'Log Scale',
                                             'value': 'log'
                                         }, {
                                             'label': 'Linear Scale',
                                             'value': 'linear'
                                         }],
                                         value='linear'),
                            width={"size": 3})
                ],
                        justify="center"),
                dbc.Row([dbc.Col([html.H4(" ")])], justify="center"),
                dbc.Row(
                    [

                        # dbc.Col(
                        #     html.H4("KPI Snapshot as of {}".format('do this')),
                        #     width={"size": 2}
                        # ),
                        dbc.Col([
                            dbc.Tabs(
                                [
                                    dbc.Tab(label='🔒 Security',
                                            tab_id='security'),
                                    dbc.Tab(label='📈 Block Space Economics',
                                            tab_id='blockspace'),
                                    dbc.Tab(label='💰 Value & Uptake',
                                            tab_id='value'),
                                    dbc.Tab(label='😎 Privacy & Fungibility',
                                            tab_id='privacy'),
                                    dbc.Tab(label='⚡ Layer 2',
                                            tab_id='layer2'),
                                    dbc.Tab(label='🔄 Cycles Comparison',
                                            tab_id='cycles'),
                                    dbc.Tab(label='✏️ Stack Stats️',
                                            tab_id='stack-stats',
                                            tab_style={
                                                "color": 'rgb(242, 169, 0)'
                                            },
                                            label_style={
                                                "color": 'rgb(242, 169, 0)'
                                            }),
                                    dbc.Tab(
                                        label='🤔 About',
                                        tab_id='about',
                                        # tab_style={"color": 'rgb(0, 128, 0)'},
                                        # label_style={"color": 'rgb(0, 128, 0)'}
                                    ),
                                    dbc.Tab(
                                        label='🤲 Donate',
                                        tab_id='donate',
                                        # tab_style={"color": 'rgb(242, 169, 0)'},
                                        # label_style={"color": 'rgb(242, 169, 0)'}
                                    ),
                                ],
                                id='tabs'),
                            dbc.Container(id='tabs-content', fluid=True)
                        ])  #, width={"size": 10}
                    ],
                    justify="center")
            ],
            fluid=True)
    ],
    fluid=True)
コード例 #24
0
# -*- coding: utf-8 -*-
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
from app import app
from apps.apputil import ANALYSIS_FINISHED_CONTAINER, get_graph

from analysis.playstorecorrelations import PlayStoreCorrelationsMetricAppAL

layout = dbc.Container([
    dbc.Container([
        PlayStoreCorrelationsMetricAppAL.ui_element(),
    ]),
],
                       className="tab_div tab-div-custom")


@app.callback(
    Output(PlayStoreCorrelationsMetricAppAL.get_ui_loading_id(), 'children'),
    [Input(ANALYSIS_FINISHED_CONTAINER, 'children')])
def correlations_metric_app_level_ctr(_):
    return get_graph(PlayStoreCorrelationsMetricAppAL.get_id())
コード例 #25
0
import dash_html_components as html
import dash_core_components as dcc

from layouts import heatmap, list_view

# Top level layout
layout = dbc.Container(
    [
        dbc.Container(html.H1("Spotify Trend Explorer"), fluid=True),
        html.Hr(),  # Horizontal line
        dbc.Row(
            [
                dbc.Col(
                    heatmap.layout,
                    width=7,
                ),  # className='column_left'
                dbc.Col(
                    list_view.layout,
                    width=5,
                )
            ],
            no_gutters=True),
        html.Hr(),  # Horizontal line
        dcc.Store(id='current_region', data=""),
        dcc.Store(id='selected_countries', data=""),
        dcc.Store(id='current_feature', data=""),
        dcc.Store(id='current_date'),
        dcc.Store(id='test'),
    ],
    fluid=True)
コード例 #26
0
about_layout = html.Div([
    nav,
    html.Div(
        dbc.Container(
            dbc.Row(
                dcc.Markdown('''
# Uganda Covid-19 Dashboard
### Foreword
Hello and welcome, this is my second dashboard so far and I am borrowing implementations from my first dashboard to help speed things along which you can check out [here](https://african-covid19-dashboard.herokuapp.com/). The prime focus of this dashboard is as stated in the title to mainly visualize an overview of the 2019 Novel Coronavirus COVID-19 (2019-nCoV) epidemic as it relates to the Ugandan context.

This dashboard was built with Python using [Dash](https://dash.plotly.com/), with charts made in [Plotly](https://plotly.com/) and the Darkly theme of the app provided by [Bootswatch](https://bootswatch.com/darkly/).
 The code behind the dashboard  is available [here](https://github.com/TJMusiitwa/UG-Covid19-Dashboard).  I welcome any suggestions and pull requests to help add more features or improve upon the dashboard.

### Data
The data used in this dashboard is provided by the [Johns Hopkins Center for Systems Science and Engineering](https://github.com/CSSEGISandData/COVID-19) Coronavirus repository.

Further information was provided by the   [Ministry of Health](https://health.go.ug) & [Covid-19 Information Portal](https://covid19.gou.go.ug/)

### Inspiration
I would not have been able to create my this dashboard without some inspiration from the following sources, and I am highly grateful to them.

 - [COVID-19 Tracker](https://github.com/ncov19-us/front-end) 

### Contact
If you wish to contact me, I am available at this [email](mailto:[email protected])          
            '''),
                justify="center",
            ), ))
])
コード例 #27
0
]

home_layout = dbc.Container(
    fluid=True,
    children=[
        html.H1('SBA Loan Data: 2000-2014'),
        html.Hr(),
        dbc.Row([
            dbc.Col([
                dash_table.DataTable(
                    id='datatable-home',
                    columns=[{'name': i, "id": i, 'type': table_type(df[i]) } for i in df.columns],
                    data=df.sample(10000).to_dict('records'),
                    sort_action='native',
                    fixed_rows={'headers': True, 'data': 0},
                    editable=False,
                    page_action='native',
                    filter_action='native',
                )
            ])
        ]),
        dbc.Row([
            dbc.Col([
                html.Div(id='app-2-display-value'),
                dcc.Link('Go to Prediction Tool', href='/loan_prediction_tool/')
            ])
        ])
    ]
)
# input loan information, predict outcome, get k nearest loans from dataset
predictions_layout = dbc.Container(
コード例 #28
0
 dbc.Container(
     [
         html.Br(),
         html.H1('一级标题', id='demo1'),
         html.H2('二级标题'),
         html.H3('三级标题'),
         html.H4('四级标题'),
         html.H5('五级标题'),
         html.H6('六级标题'),
         html.Br(),  # 换行
         html.Hr(),  # 水平分割线
         html.P('这是一段文字。' * 20),
         html.P('这是另一段带有首行缩进的文字。' * 10, style={'text-indent': '3rem'}),
         html.A('跳转到费弗里的Github仓库',
                target='_blank',
                href='https://github.com/CNFeffery/DataScienceStudyNotes'
                ),  # 跳转到外部链接
         html.Br(),
         html.A('跳转到六级标题', href='#demo2'),
         html.P([
             '一段文字中出现了',
             html.I('斜体'), ',以及代码片段',
             html.Code('import dash'), ',还有一段',
             html.U('带下划线的文字'), ',一段',
             html.Mark('高亮标注文字'), ',以及另一段',
             html.Mark('不同颜色的高亮标注文字。',
                       style={'background-color': 'lightblue'})
         ])
     ] + [html.Br()] * 50 +
     [html.A('回到顶端一级标题', href='#demo1'),
      html.H1('页内元素跳转示例标题', id='demo2')]))
コード例 #29
0
            ]
        ),
        dbc.FormGroup(
            [
                dbc.Label("Cluster count"),
                dbc.Input(id="cluster-count", type="number", value=3),
            ]
        ),
    ],
    body=True,
)

layout = dbc.Container(
    [
        html.H1("Iris k-means clustering"),
        html.Hr(),
        dbc.Row(
            [
                dbc.Col(controls, md=4),
                dbc.Col(dcc.Graph(id="cluster-graph"), md=8),
            ],
            align="center",
        ),
        html.Hr(),
        dbc.Row(
            dbc.Col(make_dash_table(dataframe()), width={"size": 8, "offset": 3}),
            align="center",
        )
    ],
    fluid=True,
)
コード例 #30
0
ファイル: homepage.py プロジェクト: allezalex/pyro-platform
def Homepage():
    """
    The following function is used in the main.py file to build the layout of the web application.

    It builds upon methods defined above or in alerts.py or navbar.py files to instantiate the various components.
    """

    # Body container
    body = dbc.Container(
        [
            # Markdown separator below the navigation bar
            dbc.Row(dcc.Markdown('---')),

            # Optional radio button to simulate alert events in debugging mode
            dbc.Row(dbc.Col(id='live_alert_header_btn')),

            # Main part of the page layout
            dbc.Row([
                # Left column containing the user selection area
                dbc.Col(build_user_selection_area(),
                        id='user_selection_column',
                        md=3),

                # Right column containing the map and various hidden components
                dbc.Col(
                    [
                        # Map object added here
                        html.Div(build_alerts_map(), id='hp_map'),

                        # Interval object triggering api calls every 10 seconds
                        dcc.Interval(
                            id='interval-component',
                            interval=10 * 1000,  # Timestep in milliseconds
                            n_intervals=0),

                        # Two placeholders updated by callbacks in main.py to trigger a change in map style
                        html.Div(
                            id='map_style_btn_switch_view'
                        ),  # Associated with the main map style button
                        html.Div(
                            id='alert_btn_switch_view'
                        ),  # Associated with the alert banner in risks mode

                        # Simple placeholder - Source of truth for the map style being viewed
                        html.Div(id='current_map_style', children='alerts'),

                        # Hidden html.Div storing the URL address of the detection frame of the latest alert
                        html.Div(id='img_url', style={'display': 'none'})
                    ],
                    md=9),
            ]),

            # Meteo graphs added here
            display_meteo_graphs(display=False)
        ],
        fluid=True,
    )

    # Instantiating navbar object from navbar.py
    layout = html.Div([Navbar(), body])

    return layout