def financial_template(client):
datum = api.get("/Graphs?id=update_date_baan_realisation")
datum_baan = datum[0]["date"][0:-10].replace(
"T", " ") if datum else "[Niet beschikbaar]"
explain_barchart_1 = f"""
Deze barchart geeft de financiele status weer op {datum_baan}. We zien hier wat er is begroot, hoeveel hiervan
is gerealiseerd, en wat er operationeel is gedaan."""
explain_barchart_2 = """
De operationele voortgang is berekend door het aantal aangesloten huizen te vermenigvuldigen
met de gemiddelde kosten voor het aansluiten van een huis in een bepaalde categorie / sub-categorie.
"""
return [
html.Div(
className="container-display ml-3",
id=f"finance-warnings-{client}",
children=[],
),
html.Div(
className="container-display",
children=[
figure(
figure=no_graph(),
container_id=f"budget-bar-category-{client}-container",
graph_id=f"budget-bar-category-{client}",
title="Begroting/Realisatie/Operationeel",
),
dbc.Tooltip(
children=[
html.P(explain_barchart_1),
html.Br(),
html.P(explain_barchart_2),
],
id=f"{client}-hover-finance-main-barchart",
target=f"budget-bar-category-{client}-container-title",
placement="below",
style={"font-size": 12},
),
],
),
html.Div(
className="container-display",
children=[
figure(
figure=no_graph(text="Geen selectie"),
container_id=f"budget-bar-sub-category-{client}-container",
graph_id=f"budget-bar-sub-category-{client}",
title="Begroting/Realisatie/Operationeel",
),
figure(
figure=no_graph(text="Geen selectie"),
container_id=f"progress-over-time-{client}-container",
graph_id=f"progress-over-time-{client}",
title="Verloop",
),
],
),
]
def get_html(client):
return [
dcc.Store(id="aggregate_data", data=None),
dcc.Store(id="aggregate_data2", data=None),
dcc.Store(id=f"status-count-filter-{client}", data={}),
html.Div(children=html.Div(id=f"activatie-indicators-{client}",
className="container-display")),
html.Div(
[
figure(
figure=no_graph(title="Gerealiseerde aansluitingen",
text="Loading..."),
container_id=
f"realised-connections-activatie-dif-{client}-container",
graph_id=f"realised-connections-activatie-dif-{client}",
),
figure(
figure=no_graph(
title="Gerealiseerde aansluitingen cumulatief",
text="Loading...",
),
container_id=
f"realised-connections-activatie-{client}-container",
graph_id=f"realised-connections-activatie-{client}",
),
html.Div(
[
figure(
figure=no_graph(title="ActualConnection types",
text="Loading..."),
graph_id=
f"graph-actual-connection-type-activatie-{client}",
className=None),
dcc.DatePickerRange(
id=
f'date-picker-actual-connection-type-activatie-{client}',
initial_visible_month=date(date.today().year,
date.today().month,
date.today().day),
clearable=True,
)
],
className='pretty_container column',
)
],
id="main_graphs",
className="container-display",
),
]
def get_html(client):
return [
html.Div(children=html.Div(id=f"info-container-year-{client}",
className="container-display")),
html.Div(children=html.Div(id=f"info-container2-year-{client}",
className="container-display")),
html.Div(
className="container-display",
children=[
figure(
graph_id=f"month-overview-year-{client}",
figure=no_graph(title="Jaaroverzicht", text="Loading..."),
),
figure(
graph_id=f"week-overview-year-{client}",
figure=no_graph(title="Maandoverzicht", text="Loading..."),
),
figure(
container_id=f"pie_chart_overview_{client}_container",
graph_id=f"pie_chart_overview-year_{client}",
figure=no_graph(title="Opgegeven reden na",
text="Loading..."),
),
],
),
html.Div(
className="container-display",
children=[
figure(
graph_id=f"project-performance-year-{client}",
figure=no_graph(title="Jaaroverzicht", text="Loading..."),
)
],
),
html.Div(
className="container-display",
children=[
table(
table_id=f"FTU_table_c_{client}",
table=dummy_table(),
)
],
),
]
def get_html(client):
return [
dcc.Store(id="aggregate_data", data=None),
dcc.Store(id="aggregate_data2", data=None),
dcc.Store(id=f"status-count-filter-{client}", data={}),
html.Div(
id=f"indicators-{client}",
className="container-display",
),
html.Div(
[
figure(
figure=no_graph(
title="Progress of HPend over time", text="Loading..."
),
graph_id=f"graph_prog-{client}",
),
figure(
figure=no_graph(
title="Status oplevering per fase (LB)", text="Loading..."
),
container_id=f"status-counts-laagbouw-{client}-container",
graph_id=f"status-counts-laagbouw-{client}",
),
figure(
figure=no_graph(
title="Status oplevering per fase (HB)", text="Loading..."
),
container_id=f"status-counts-hoogbouw-{client}-container",
graph_id=f"status-counts-hoogbouw-{client}",
),
figure(
figure=no_graph(title="Opgegeven reden na", text="Loading..."),
container_id=f"redenna_project_{client}_container",
graph_id=f"redenna_project_{client}",
),
],
id="main_graphs",
className="container-display",
),
]
def update_indicators(dropdown_selection):
if dropdown_selection is None:
raise PreventUpdate
data1, data2 = fetch_data_for_indicator_boxes_tmobile(
project=dropdown_selection, client=client)
out = [
html.Div(children=project_indicator_list(data1),
className="container-display"),
html.Div(children=project_indicator_list(data2),
className="container-display"),
]
out = out + [
dbc.Modal(
[
dbc.ModalBody(
figure(
graph_id=f"indicator-modal-{client}",
className="",
figure={
"data": None,
"layout": None
},
)),
dbc.ModalFooter(children=[
html.A(
dbc.Button(
"Download",
id="download-indicator",
className="ml-auto",
),
id=f"indicator-download-{client}",
href="/dash/urlToDownload",
),
dbc.Button("Close", id="close-sm", className="ml-auto"),
]),
],
id="modal-sm",
size="lg",
centered=True,
)
]
return [out]
def indicator(
value,
value2=0,
previous_value=None,
title="",
sub_title="",
font_color=None,
id="",
invert_delta=False,
percentage=False,
suffix=None,
gauge=None,
gauge_type=None,
**kwargs,
):
fig = go.Figure(
layout={
"height": 200,
"font": {
"color": font_color
},
"margin": dict(l=10, r=10, t=40, b=20),
"plot_bgcolor": colors["plot_bgcolor"],
"paper_bgcolor": colors["paper_bgcolor"],
})
indicator_args = dict(
value=value,
number=dict(valueformat=".2%") if percentage else dict(
valueformat=":"),
mode="number",
)
if suffix:
indicator_args["number"]["suffix"] = suffix
if previous_value is not None:
indicator_args["delta"] = {
"reference": previous_value,
"valueformat": ":"
}
if invert_delta:
indicator_args["delta"].update({
"increasing.color": "red",
"decreasing.color": "green"
})
indicator_args["mode"] += "+delta"
figure_kwargs = {}
if kwargs.get("gauge"):
indicator_args["gauge"] = kwargs.get("gauge")
indicator_args["mode"] += "+gauge"
elif gauge_type == "bullet":
max_value = int(max(value, value2, 1) * 1.1)
indicator_args["gauge"] = {
"shape":
"bullet",
"axis": {
"range": [0, max_value]
},
"threshold": {
"line": {
"color": "red",
"width": 2
},
"thickness": 0.3,
"value": max(value2, 0.01),
},
"steps": [
{
"range": [0, int(value2 * 0.9)],
"color": "yellow"
},
{
"range": [int(value2 * 0.9), max_value],
"color": "lightgreen"
},
],
}
indicator_args["mode"] += "+gauge"
fig.update_layout(height=150)
figure_kwargs.update(
dict(title=title, subtitle=sub_title + str(value2)))
elif gauge_type == "speedo":
indicator_args["gauge"] = {
"axis": {
"range": [None, 1],
"tickwidth": 1,
"tickcolor": "green"
},
"bar": {
"color": "darkgreen"
},
"bgcolor":
"white",
"borderwidth":
2,
"bordercolor":
"gray",
"steps": [
{
"range": [0, 0.6],
"color": "yellow"
},
{
"range": [0.6, 1],
"color": "lightgreen"
},
],
"threshold": {
"line": {
"color": "red",
"width": 4
},
"thickness": 0.75,
"value": 0.9,
},
}
indicator_args["mode"] += "+gauge"
indicator_args["title"] = {
"text":
f"{title}<br><span style='font-size:0.8em; font-color:light-gray'>{sub_title + str(value2)}</span>"
}
fig.update_layout(height=280)
elif gauge_type == "standard":
indicator_args["title"] = {
"text":
f"{title}<br><span style='font-size:0.8em; font-color:light-gray'>{sub_title}</span>"
}
fig.add_trace(go.Indicator(**indicator_args))
return figure(figure=fig, container_id=id, **figure_kwargs)
def capacity_template(client):
"""
The template for the capacity view.
The phase selector is shown at the top, followed by the summarized data that answers the most important questions.
Lastly there is a button that lets you open the more information panel.
Args:
client:
Returns:
html.Div: The capacity view.
"""
return html.Div(
id=f"cookie-factory-{client}",
children=[
dcc.Store(id=f"memory_phase_{client}", data="geulen"),
dbc.Row(
id=f"selection-menu-{client}",
children=[
html.Div(
className=f"container-display-{client}",
id=f"capacity-phase-{client}",
children=dbc.ButtonGroup([
dbc.Button(
phase_data.get("name"),
id=f"capacity-phase-{phase}-{client}",
) for phase, phase_data in
config.capacity_phases.items()
]),
),
html.Div(
className="container-display",
children=dcc.Dropdown(
id=f"frequency-selector-{client}",
options=[
{
"label": "Week",
"value": "week"
},
{
"label": "Maand",
"value": "month"
},
],
value="week",
clearable=False,
style={
"color": config.colors_vwt.get("darkgray"),
"margin-left": "10px",
"width": "150%",
},
),
),
],
),
html.Div(id=f"capacity-indicators-{client}", ),
dbc.Row(
id=f"capacity-info-{client}",
children=dbc.Col(
[
dbc.Button(
"Meer informatie",
id=f"collapse-button-{client}",
className="mb-3",
style={
"background-color":
config.colors_vwt["vwt_blue"]
},
),
dbc.Collapse(
[
dcc.Dropdown(
id=f"unit-selector-{client}",
options=[
{
"label": "Percentage",
"value": ""
},
{
"label": "Units",
"value": "_units"
},
],
value="_units",
clearable=False,
style={
"color":
config.colors_vwt.get("darkgray"),
"margin-left": "4px",
"width": "100px",
},
),
figure(
graph_id=f"more-info-graph-{client}",
figure=no_graph(
title="Verdieping Capaciteit",
text="Geen data...",
),
),
],
id=f"more-info-collapse-{client}",
),
],
width=12,
),
),
],
)
