I want to fiil the yellow space on the same color to the background color(Gray) which is “#e5e8e6”.
Right now, the background color that I set as “#e5e8e6” does not reflect on the below white space as shown below.
The python code which generates the above picture is shown below.
import pandas as pd
import plotly.graph_objs as go
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
app = dash.Dash(__name__)
# Get the dummy dataset
filepath = "df_visitor.csv"
df = pd.read_csv(filepath, parse_dates=["timestamp"]).set_index("timestamp")
x_date = df.index.tolist()
y1 = df["セッション数"]
y2 = df["新規"]
y3 = df["リピーター"]
labels = ["Organic Search", "Referral", "Display", "Direct", "Email", "Other Advertising"]
values = [17, 13, 20, 30, 10, 10]
# Define the interface
app.layout = html.Div([
html.Div([html.H1("Dashboard for Google Analytics")],
style={'padding': '20px', 'backgroundColor': '#2a3f5f',
"color": "white", "font-family": "Helvetica",
"font-weight": "bolder"}),
dcc.Tabs(
id="tabs-with-classes",
value='tab-2',
parent_className='custom-tabs',
className='custom-tabs-container',
style={"display": "flex", "font-size": "25px", "text-align": "center"},
children=[
dcc.Tab(
label='訪問者数',
value='tab-1',
className='custom-tab',
style={"flex": "1", "margin": "10px", "border": "solid 1px gray"},
selected_className='custom-tab--selected'
),
dcc.Tab(
label='ユーザー数',
value='tab-2',
className='custom-tab',
style={"flex": "1", "margin": "10px", "border": "solid 1px gray"},
selected_className='custom-tab--selected'
),
dcc.Tab(
label='流入元',
value='tab-3', className='custom-tab',
selected_className='custom-tab--selected',
style={"flex": "1", "margin": "10px", "border": "solid 1px gray"},
),
]),
html.Div(id='tabs-content-classes')
], style={"background-color": "#e5e8e6"})
@app.callback(Output('tabs-content-classes', 'children'),
[Input('tabs-with-classes', 'value')])
def render_content(tab):
if tab == 'tab-1':
return html.Div([
html.Div([
html.Div([
html.P("合計訪問者数"),
html.P(str(y1[-1]))],
className="session",
style={"flex": "1", "border": "solid 1px gray", "margin": "50px", "color": "#2a3f5f"}),
html.Div([
html.P("新規訪問数"),
html.P(str(y2[-1]))],
className="new",
style={"flex": "1", "border": "solid 1px gray", "margin": "50px", "color": "#2a3f5f"}),
html.Div([
html.P("リピート訪問数"),
html.P(str(142 - 21))],
className="repeat",
style={"flex": "1", "border": "solid 1px gray", "margin": "50px", "color": "#2a3f5f"})],
className="three_indicators",
style={"display": "flex", "font-size": "25px", "text-align": "center"}),
html.Div([
html.Div([
dcc.Graph(
id="visitor",
figure={
"data": [
go.Bar(
x=x_date,
y=y2,
name="新規"
),
go.Bar(
x=x_date,
y=y1 - y2,
name="リピーター"
)],
'layout': go.Layout(
title="訪問者数（セッション数）の推移",
barmode="stack",
font=dict(size=20)
)
}
)
], style={"flex": "1", "border": "solid 1px gray", "margin": "25px"}),
html.Div([
dcc.Graph(
figure={
"data": [
go.Pie(labels=labels, values=values,
hoverinfo='label+percent', textinfo='value',
textfont=dict(size=30),
marker=dict(line=dict(color='#000000', width=5)))],
'layout': go.Layout(
title="流入元",
barmode="stack",
font=dict(size=20)
)
}
)
], style={"flex": "1", "border": "solid 1px gray", "margin": "25px"})
], style={"display": "flex", "font-size": "25px", "text-align": "center", "height": "100%"}),
html.Div([
html.Div([
dcc.Graph(
figure={
"data": [
go.Bar(
x=x_date,
y=y2,
name="新規"
),
go.Bar(
x=x_date,
y=y1 - y2,
name="リピーター"
)],
'layout': go.Layout(
title="訪問者数（セッション数）の推移",
barmode="stack",
font=dict(size=20)
)
}
)
], style={"flex": "1", "border": "solid 1px gray", "margin": "25px"}),
html.Div([
dcc.Graph(
figure={
"data": [
go.Pie(labels=labels, values=values,
hoverinfo='label+percent', textinfo='value',
textfont=dict(size=30),
marker=dict(line=dict(color='#000000', width=5)))],
'layout': go.Layout(
title="流入元",
barmode="stack",
font=dict(size=20)
)
}
)
], style={"flex": "1", "border": "solid 1px gray", "margin": "25px"})
], style={"display": "flex", "font-size": "25px", "text-align": "center", "height": "100%"})
])
elif tab == 'tab-2':
return html.Div([
html.H3('Tab content 2'),
])
elif tab == 'tab-3':
return html.Div([
html.H3('Tab content 3')
])
if __name__ == '__main__':
app.run_server(debug=True, port=9000)