trace_top5 = go.Bar(
x=departments,
y=y1,
name='TOP5のみ'
)
data = [trace_all34, trace_top5]
return data
unique_users = set(df_top5.index)
header_contents = html.Div(
[
html.H5('診断済み社員数：{}名'.format(len(unique_users)),
style=dict(padding="10px", borderLeft="5px #b31b1b solid")),
html.Br()
]
)
title_contents = html.Div(
[
html.H5('資質ランキング',
style=dict(padding="10px", borderLeft="5px #b31b1b solid")
),
html.Br()
]
)
# 部署別の登録ユーザー数のグラフオブジェクトを作成
graph_registered_user_cnt_data = create_graph_registered_user_cnt(df_top5, df_all34)
import dash_bootstrap_components as dbc
from dash import html
cards = html.Div([
dbc.Card(
dbc.CardBody([
html.H5("75% width card", className="card-title"),
html.P(
[
"This card uses the ",
html.Code("w-75"),
" class to set the width to 75%",
],
className="card-text",
),
]),
className="w-75 mb-3",
),
dbc.Card(
dbc.CardBody([
html.H5("50% width card", className="card-title"),
html.P(
[
"This card uses the ",
html.Code("w-50"),
" class to set the width to 50%",
],
className="card-text",
),
]),
className="w-50",
import yaml
from dash import html
# settings.yaml の読み込み
with open('settings.yaml') as f:
config = yaml.load(f, Loader=yaml.SafeLoader)
contact_address = config['contact']
algorithm_contents = html.Div([
html.H5('各機能のアルゴリズム詳細',
style=dict(padding="10px", borderLeft="5px #b31b1b solid")),
html.Br()
])
contact_contents = html.Div([
html.H5('問い合わせ先',
style=dict(padding="10px", borderLeft="5px #b31b1b solid")),
html.P(contact_address)
])
layout = html.Div([
algorithm_contents,
html.P('作成中'),
contact_contents,
])
"White", color="secondary", text_color="white",
className="border"),
],
className="mb-2",
)
badge_sizes = html.Div([
html.H1(["Example heading",
dbc.Badge("New", className="ms-1")]),
html.H2(["Example heading",
dbc.Badge("New", className="ms-1")]),
html.H3(["Example heading",
dbc.Badge("New", className="ms-1")]),
html.H4(["Example heading",
dbc.Badge("New", className="ms-1")]),
html.H5(["Example heading",
dbc.Badge("New", className="ms-1")]),
html.H6(["Example heading",
dbc.Badge("New", className="ms-1")]),
])
badges = html.Div(
[
make_subheading("Badge", "badge"),
badge,
badge_pills,
badge_text,
badge_sizes,
],
className="mb-4",
)
import dash_bootstrap_components as dbc
from dash import html
list_group = dbc.ListGroup([
dbc.ListGroupItem([
html.Div(
[
html.H5("This item has a heading", className="mb-1"),
html.Small("Yay!", className="text-success"),
],
className="d-flex w-100 justify-content-between",
),
html.P("And some text underneath", className="mb-1"),
html.Small("Plus some small print.", className="text-muted"),
]),
dbc.ListGroupItem([
html.Div(
[
html.H5("This item also has a heading", className="mb-1"),
html.Small("Ok!", className="text-warning"),
],
className="d-flex w-100 justify-content-between",
),
html.P("And some more text underneath too", className="mb-1"),
html.Small("Plus even more small print.", className="text-muted"),
]),
])
style=CONTENT_STYLE,
children=[
html.H4("Bot Config Generator", style={"textAlign": "left"}),
html.B(),
html.Div(id="save-change-message"),
html.Div(
dbc.Button(
"Save Changes",
id="save-changes",
value="saved",
n_clicks=0,
disabled=False,
),
className="d-grid gap-2",
),
html.H5("Exchanges"),
html.Div(
dbc.Card(
dbc.CardBody(
dbc.RadioItems(
options=[
{
"label": "Coinbase Pro",
"value": "coinbasepro"
},
{
"label": "Binance",
"value": "binance"
},
{
"label": "Kucoin",
"#F1C232": [-20, 20],
"#3D9970": [20, 100],
},
},
value=0,
max=100,
min=-100,
size=160,
)
]),
]),
dbc.Row(
[
dbc.Col(
[
html.H5("Margin", style={"textAlign": "center"}),
html.Div(id="margin-graph"),
],
lg=5,
xl=5,
),
# df high graph
dbc.Col(
[
html.H5("From DF High", style={"textAlign": "center"}),
html.Div(id="from-df-high"),
],
lg=5,
xl=5,
),
],
id='LSTMToggle',
on=False,
color='lightcoral',
),
daq.BooleanSwitch(
label='Prophet',
className='one columns',
id='ProphetToggle',
on=False,
color='lightblue',
),
html.P(id='textual_gain'),
dcc.DatePickerRange(
id='date_picker_range',
display_format='DD MMM YYYY',
max_date_allowed=date.today(),
end_date=date.today(),
calendar_orientation='vertical',
),
]
),
html.Br(),
html.H5(id='graphTitle', children=''),
dcc.Graph(id='stockGraph', config={'scrollZoom':True}),
dcc.ConfirmDialog(
id='noDataFound',
message='No Data Found, check Stock Name',
),
])
def components_plot(ingested_data: DataFrame) -> html.Div:
"""
Create and return the plots of all the components of the time series: level, trend, residual.
It uses both an additive and multiplicative model, with a subplot.
Parameters
----------
ingested_data : DataFrame
Original time series values.
Returns
-------
g : dcc.Graph
Examples
--------
Get the `figure` attribute if you want to display this in a Jupyter notebook.
>>> comp_plot = components_plot(timeseries_container.timeseries_data)[0].figure
>>> comp_plot.show()
"""
modes = ["additive", "multiplicative"]
fig = make_subplots(
rows=3,
cols=1,
subplot_titles=[_("Trend"),
_("Seasonality"),
_("Residual")],
shared_xaxes=True,
vertical_spacing=0.05,
specs=[[{
"secondary_y": True
}], [{
"secondary_y": True
}], [{
"secondary_y": True
}]])
interpolated = ingested_data.interpolate()
interpolated = interpolated.fillna(0)
for mode in modes:
try:
result = seasonal_decompose(interpolated, model=mode)
trend = result.trend
seasonal = result.seasonal
residual = result.resid
secondary_y = False if mode == "additive" else True
fig.add_trace(go.Scatter(x=trend.index,
y=trend,
mode='lines+markers',
name=_(mode.capitalize()),
legendgroup=_(mode.capitalize()),
line=dict(color=ColorHash(mode).hex)),
row=1,
col=1,
secondary_y=secondary_y)
fig.add_trace(go.Scatter(x=seasonal.index,
y=seasonal,
mode='lines+markers',
showlegend=False,
name=_(mode.capitalize()),
legendgroup=_(mode.capitalize()),
line=dict(color=ColorHash(mode).hex)),
row=2,
col=1,
secondary_y=secondary_y)
fig.add_trace(go.Scatter(x=residual.index,
y=residual,
mode='lines+markers',
showlegend=False,
name=_(mode.capitalize()),
legendgroup=_(mode.capitalize()),
line=dict(color=ColorHash(mode).hex)),
row=3,
col=1,
secondary_y=secondary_y)
except ValueError:
log.warning(
f"Multiplicative decomposition not available for {ingested_data.columns[0]}"
)
fig.update_layout(title=_("Components decomposition"),
height=1000,
legend_title_text=_('Decomposition model'))
fig.update_yaxes(title_text="<b>" + _('Additive') + "</b>",
secondary_y=False)
fig.update_yaxes(title_text="<b>" + _('Multiplicative') + "</b>",
secondary_y=True)
g = dcc.Graph(figure=fig)
warning = html.H5(
_("Multiplicative model is not available for series which contain zero or negative values."
))
return html.Div([g, warning])
html.Div(
[
fac.AntdAnchor(
linkDict=[
{'title': '示例2-1', 'href': '#示例2-1'},
{'title': '示例2-1-1', 'href': '#示例2-1-1'},
{'title': '示例2-1-2', 'href': '#示例2-1-2'},
{'title': '示例2-2', 'href': '#示例2-2'},
],
align='right',
containerId='anchor-container-demo',
targetOffset=100
),
html.Div(
[
html.H5('示例2-1', id='示例2-1', style={'marginBottom': '800px'}),
html.H5('示例2-1-1', id='示例2-1-1', style={'marginBottom': '800px'}),
html.H5('示例2-1-2', id='示例2-1-2', style={'marginBottom': '800px'}),
html.H5('示例2-2', id='示例2-2', style={'marginBottom': '800px'}),
]
)
],
id='anchor-container-demo',
style={
'maxHeight': '500px',
'overflowY': 'auto',
'position': 'relative',
'backgroundColor': 'rgba(240, 240, 240, 0.2)',
'padding': '20px'
}
),
from dash import html
# configuring a navbar
navbar = dbc.NavbarSimple(
children=[
dbc.NavItem(dbc.NavLink("Start IPDD", href="/apps/app_manage_files")),
],
brand="IPDD Framework - Interactive Process Drift Detection Framework",
color="primary",
dark=True,
)
info_ipdd = [
dbc.CardBody([
html.H5(
"The Interactive Process Drift Detection (IPDD) Framework is a tool for process drift visual "
"analysis.",
className="card-text"),
html.H5(dbc.CardLink(children='Start IPDD here',
href="/apps/app_manage_files"),
className="card-text mt-3"),
html.H5(
"A process drift, also named concept drift, indicates the process changed while being "
"analyzed (Process Mining Manifesto, 2011). ",
className="card-text mt-4"),
html.H5(
"IPDD allows the detection of process drifts in the control-flow perspective of the process by "
"applying similarity metrics between process models mined over time. ",
className="card-text mt-3"),
html.H5([
'Source code available at: ',
dbc.CardLink(
# ),
# dcc.Loading(id="loading-icon",
# children=dcc.Graph(children=fig,
# config={'displaylogo': False}),
# type="graph"),
#
# html.Br(),
# # html.H3(children='Information about data'),
# # html.Div(id='output-data-upload')
# ]
# )
graph_bottom = html.Div(
[
html.H5("State of Health", className="display-5"),
dbc.Tabs(id="tabs-styled-with-inline",
children=[
dbc.Tab(label='Map', tab_id='map'),
dbc.Tab(label='State of Health', tab_id='soh'),
dbc.Tab(label='Alarms in progress', tab_id='alarms_in_progress'),
dbc.Tab(label='Alarms completed', tab_id='alarms_completed'),
],
active_tab='soh'),
html.Div(id='tabs-content-inline')
],
# style=CHILD
)
@app.callback(Output({'type': 'btn-alarm', 'id_alarm': MATCH}, 'children'),
import dash_bootstrap_components as dbc
from dash import html
cards = dbc.Card(
dbc.CardBody(
[
html.H5("Custom CSS", className="card-title"),
html.P(
"This card has inline styles applied controlling the width. "
"You could also apply the same styles with a custom CSS class."
),
]
),
style={"width": "18rem"},
)
)
])
piechart['layout']['paper_bgcolor'] = 'rgba(0,0,0,0)'
piechart['layout']['title'] = dict(
text='Hover for details -- select boxes on right to compare',
x=0.5,
xanchor='center',
y=0.95,
yanchor='top')
app.layout = html.Div(
[
# Header
html.Div([
html.H1('The Finglonger \n', style={'text-align': 'center'}),
html.H5('Good News Everyone!!', style={'text-align': 'center'}),
html.Div(
'Drag and select any part of the graph to zoom in and inspect. Double click graph to reset.'
)
],
className="row"),
# Charts/Graphs
html.Div(
[
html.Div([
dcc.Graph(id='bar_chart',
style={'height': '650px'},
figure=bargraph)
]), # , className = "fourteen columns"
],
className="row"),
),
dbc.NavLink([html.I(className="bi bi-house-fill me-2 text-white")],
href="https://diogenet.ucsd.edu/",
style=STYLE_A_ITEM,
target="blank")
],
color="#ffffff",
className="d-flex justify-content-between",
style={
'color': '#ffffff',
'border-bottom': '1px black solid'
},
id='navbar-map')
sidebar_content = [
html.H5('Dataset selection', className="mt-3 mb-3"),
dcc.Dropdown(id='dataset_selection_map',
options=[{
'label': key,
'value': value
} for key, value in dict_of_datasets.items()],
searchable=False,
placeholder="Select a dataset",
value='diogenes'),
html.H5('traveler', className="mt-5 mb-3"),
html.Div(id='dropdown_container_traveler', children=[]),
html.H5('Centrality type', className="mt-5 mb-3"),
dcc.Dropdown(
id='centrality_type_map',
options=[
{
import pandas as pd
from dash import html
header_contents = html.Div([
html.H5('アップロードが完了しました',
style=dict(padding="10px", borderLeft="5px #b31b1b solid")),
html.P('マッチング機能のみ、反映に5分程かかります。')
])
layout = html.Div([header_contents])
"value": i,
} for i in range(3)],
value=[1, 2],
)),
dbc.Col(
dbc.Checklist(
id="gallery_checklist2",
options=[{
"label": "Option {}".format(i),
"value": i,
} for i in range(3)],
value=[1, 2],
switch=True,
)),
]),
html.H5("Inline checklist", className="mt-3"),
dbc.Checklist(
id="gallery_checklist3",
options=[{
"label": f"Option {i + 1}",
"value": i
} for i in range(5)],
value=[0, 4],
inline=True,
),
],
className="mb-4",
)
radio_items = html.Div([
make_subheading("RadioItems", "input"),
from dash import html
import dash_bootstrap_components as dbc
from models.telegram import Wrapper
# from models.exchange import Granularity
tg_wrapper = Wrapper("config.json", "webgui")
tg_wrapper.helper.read_config()
tg_token = tg_wrapper.helper.config["telegram"]["token"]
tg_userid = tg_wrapper.helper.config["telegram"]["user_id"]
tg_clientid = tg_wrapper.helper.config["telegram"]["client_id"]
layout = html.Div([
html.H4("Telegram Config", style={"textAlign": "left"}),
html.B(),
html.H5("Options"),
html.Div(
dbc.Card(
dbc.CardBody([
html.Div([
dbc.Label("Telegram Token"),
dbc.Input(
value=tg_token,
id="input",
placeholder="Enter Token ... ",
type="password",
),
dbc.FormText(
"Token Format: nnnnnnnnnn:XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
),
]),
import dash_bootstrap_components as dbc
from dash import html
cards = dbc.CardGroup(
[
dbc.Card(
dbc.CardBody(
[
html.H5("Card 1", className="card-title"),
html.P(
"This card has some text content, which is a little "
"bit longer than the second card.",
className="card-text",
),
dbc.Button(
"Click here", color="success", className="mt-auto"
),
]
)
),
dbc.Card(
dbc.CardBody(
[
html.H5("Card 2", className="card-title"),
html.P(
"This card has some text content.",
className="card-text",
),
dbc.Button(
"Click here", color="warning", className="mt-auto"
),
import dash_bootstrap_components as dbc
from dash import html
card_content = [
dbc.CardHeader("Card header"),
dbc.CardBody([
html.H5("Card title", className="card-title"),
html.P(
"This is some card content that we'll reuse",
className="card-text",
),
]),
]
row_1 = dbc.Row(
[
dbc.Col(dbc.Card(card_content, color="primary", outline=True)),
dbc.Col(dbc.Card(card_content, color="secondary", outline=True)),
dbc.Col(dbc.Card(card_content, color="info", outline=True)),
],
className="mb-4",
)
row_2 = dbc.Row(
[
dbc.Col(dbc.Card(card_content, color="success", outline=True)),
dbc.Col(dbc.Card(card_content, color="warning", outline=True)),
dbc.Col(dbc.Card(card_content, color="danger", outline=True)),
],
className="mb-4",
)
def get_exemplary_equivalents():
return html.Div([
html.Br(),
html.Br(),
html.Br(),
html.Br(),
html.Div(
[
html.H2("Exemplary Equivalents",
style={"textAlign": "center"}),
html.Br(),
html.P(
[
html.Div(
[
html.Img(
id="house_icon",
style={
"height": "20%",
"width": "50%"
},
),
html.Div([
html.Strong(
id="household_fraction",
style={
"color": "green",
"fontSize": 20,
"paddingLeft": "4%",
},
),
html.H5(
"of weekly",
style={"paddingLeft": "3.5%"},
),
html.H5(
"American",
style={"paddingLeft": "2.8%"},
),
html.H5("household"),
html.H5(
"emissions",
style={"paddingLeft": "1.4%"},
),
]),
],
style={
"float": "left",
"width": "25%"
},
),
html.Div(
[
html.Img(
id="car_icon",
style={
"height": "43%",
"width": "28.5%",
# "paddingLeft": "2%",
},
),
html.Div([
html.Strong(
id="car_miles",
style={
"color": "green",
"fontWeight": "bold",
"fontSize": 20,
},
),
html.H5(
"driven",
style={"paddingLeft": "5.5%"},
),
]),
],
style={
"float": "left",
"width": "50%",
"paddingLeft": 90,
},
),
html.Div(
[
html.Img(
id="tv_icon",
style={
"height": "35%",
"width": "53%",
"paddingLeft": "5%",
},
),
html.Div([
html.Strong(
id="tv_time",
style={
"color": "green",
"fontSize": 20,
"paddingLeft": "8%",
},
),
html.H5(
"of 32-inch",
style={"paddingLeft": "5%"},
),
html.H5(
"LCD TV",
style={"paddingLeft": "10%"},
),
html.H5(
"watched",
style={"paddingLeft": "6.4%"},
),
]),
],
style={
"float": "right",
"width": "25%"
},
),
],
style={
"paddingLeft": "20%",
"paddingRight": "15%"
},
),
],
style={"display": "inline-block"},
),
])
children=[
dbc.NavItem(
dbc.NavLink("Process Drift Analysis", id='drift-analysis-link')),
dbc.NavItem(dbc.NavLink("Manage Files",
href="/apps/app_manage_files")),
dbc.NavItem(dbc.NavLink("About IPDD", href="/")),
],
brand="IPDD Framework - Preview Selected File",
color="primary",
dark=True,
)
main_panel = html.Div([
html.H5([
'If the file is ok click on ',
dbc.CardLink(
children='Process Drift Analysis', id='link-analyze', href='#')
],
className='mt-2'),
dbc.Spinner(html.Div(id='preview-event-data', className='mt-3'))
])
def get_layout():
# main layout of the page
layout = [
dbc.Row([dbc.Col(navbar, width=12)]),
dbc.Row([dbc.Col(main_panel, className='mt-2', width=12)])
]
return layout
Args:
contents (str): ユーザーから送られてきたファイル
save_path (str): 保存先のパス
"""
# str -> bytes
bytes_base64 = contents.encode("utf8").split(b";base64,")[1]
# Base64をデコード
decoded_data = base64.decodebytes(bytes_base64)
with open(save_path, "wb") as fp:
fp.write(decoded_data)
# layout に追加するコンポーネントの作成
header_contents = html.Div([
html.H5('ストレングスファインダーの結果をアップロード',
style=dict(padding="10px", borderLeft="5px #b31b1b solid")),
html.Br()
])
user_name_input_form = dbc.FormGroup(
[
dbc.Label("氏名", className="mr-2"),
dcc.Input(id='user-name', type='text', value=' '),
],
className="mr-3",
)
department_input_form = dbc.FormGroup(
[
dbc.Label("所属", className="mr-2"),
dcc.Input(id='department', type='text', value=' '),
style={
"height": "80px",
"width": "150px",
# "margin-bottom": "25px",
},
),
href="/"),
],
width=2),
dbc.Col([
html.Div([
html.H1(
APP_TITLE_NAME,
style={"margin-bottom": "0px"},
),
html.H5(SUB_TITLE_NAME, style={"margin-top": "0px"}),
])
],
width=8),
dbc.Col(
[
# html.Div(
# [
# html.A(
# html.Button("Contact Us", id="learn-more-button"),
# href="#",
# target="_blank",
# )
# ],
# className="float-right"
# )
xlabel = figures_labels[k][1]
else:
title = k.replace('_', ' ')
title = title[0].upper() + title[1:].lower()
ylabel = title
xlabel = title
figures_hist[k] = [
ylabel + ' (per utterance)',
plot_histogram(data, k, xlabel)
]
if metrics_available:
figure_word_acc = plot_word_accuracy(vocabulary)
stats_layout = [
dbc.Row(dbc.Col(html.H5(children='Global Statistics'),
class_name='text-secondary'),
class_name='mt-3'),
dbc.Row(
[
dbc.Col(html.Div('Number of hours', className='text-secondary'),
width=3,
class_name='border-end'),
dbc.Col(html.Div('Number of utterances',
className='text-secondary'),
width=3,
class_name='border-end'),
dbc.Col(html.Div('Vocabulary size', className='text-secondary'),
width=3,
class_name='border-end'),
dbc.Col(html.Div('Alphabet size', className='text-secondary'),
break
return female_keep_set
# settings
with open('settings.yaml') as f:
config = yaml.load(f, Loader=yaml.SafeLoader)
strengths_path = config['base_dir'] + config['strengths_path']
top5_path = config['base_dir'] + config['top5_path']
# load data
df_top5 = pd.read_csv(top5_path, index_col='user_name')
df_strength = pd.read_csv(strengths_path)
header_contents = html.Div([
html.H5('マッチング',
style=dict(padding="10px", borderLeft="5px #b31b1b solid")),
html.P('2つの入力ボックスに対象の方の氏名を入力してください')
])
groupA_drop_down_list = dcc.Dropdown(
id='group_usersA',
options=[{
'label': i,
'value': i
} for i in np.unique(df_top5.index)],
multi=True,
style=dict(
backgroundColor='#FFE4E1',
# marginLeft='10px',
# width='60%',
# backgroundPaddingLeft="50px",
# パスを設定
base_dir = config['base_dir']
all34_exsits_null_path = base_dir + config['all34_exsits_null_path']
colors_strengths_path = base_dir + config['colors_strengths_path']
strengths_desc_path = base_dir + config['strengths_desc_path']
# GCS のバケットからファイルを読み込む
df_all = pd.read_csv(all34_exsits_null_path, index_col='user_name')
df_all = df_all.fillna('nan')
dict_colors_strengths = pd.read_pickle(colors_strengths_path)
dict_strengths_desc = pd.read_pickle(strengths_desc_path)
# レイアウトに追加するコンポーネントの作成
header_contents = html.Div([
html.H5('受診済みの方の資質ランキング表示',
style=dict(padding="10px", borderLeft="5px #b31b1b solid")),
html.P('参照したい方の氏名を入力してください（複数可）')
])
unique_users = np.unique(df_all.index)
users_drop_down_list = dcc.Dropdown(
id='input_id',
options=[{
'label': i,
'value': i
} for i in unique_users],
multi=True,
)
layout = html.Div([
from app import app
from apps import (download, matching, overview, person, qa, team, top, upload,
upload_done)
from navigation_menu import nav_menu
server = app.server
app.layout = html.Div([
nav_menu,
dcc.Location(id='url', refresh=False),
html.Div(id='page-content')
],
style=dict(margin="50px"))
welcome_message = html.H5('ストレングスファインダーWebAppへようこそ',
style=dict(padding="10px",
borderLeft="5px #b31b1b solid"))
header_contents = html.Div([welcome_message, html.Br()])
route_layout = html.Div([
header_contents,
])
@app.callback(Output('page-content', 'children'), Input('url', 'pathname'))
def display_page(pathname):
if pathname == '/':
return route_layout
elif pathname == '/top':
return top.layout
if y_type not in ['attenuation', 'transmission']:
plotly_fig['layout']['xaxis']['type'] = 'log'
plotly_fig['layout']['yaxis']['type'] = 'log'
else:
plotly_fig['layout']['xaxis']['type'] = 'linear'
plotly_fig['layout']['yaxis']['type'] = 'linear'
plotly_fig['layout']['yaxis']['range'] = [-0.05, 1.05]
return plotly_fig
# Plot control buttons
plot_option_div = html.Div(
[
html.Hr(),
html.H3('Result'),
html.H5('Plot:'),
dbc.Row(
[
dbc.Col(
[
html.Div([
html.P('X options: '),
dcc.RadioItems(
id='x_type',
options=[
{
'label': ' Energy (eV)',
'value': 'energy'
},
{
'label': ' Wavelength (\u212B)',
def input_section_title():
return html.H5('Ingrese símbolo, fecha de inicio y fin:',
style=inputSectionTitle)
