"""Dev app to try things out."""
import pandas as pd
import vizro.models as vm
from custom_charts import (
custom_box_chart,
custom_heatmap,
custom_map_chart,
custom_pie_chart_concern,
custom_pie_chart_upsale,
custom_polar,
custom_scatter_chart,
custom_donut_chart_concerns,
custom_bar_chart_concerns,
custom_donut_chart_upsales,
custom_bar_chart_upsales,
custom_radar_chart,
custom_bar_chart,
custom_box_plot
)
from vizro import Vizro
from vizro.figures._kpi_cards import kpi_card
from fake_data import data as df
def count_unique_agents(data_frame):
unique_agents = data_frame["Agent ID"].drop_duplicates()
return pd.DataFrame(unique_agents)
def count_unique_callers(data_frame):
unique_callers = data_frame["Caller ID"].drop_duplicates()
return pd.DataFrame(unique_callers)
def get_percent_upsales(data_frame):
data = data_frame.loc[df["Upsale Attempted"] == True]
return data
page = vm.Page(
title="Call Center Dashboard",
layout=vm.Layout(
grid=[
[0, 0, 0, 0],
[1, 1, 1, 1],
[1, 1, 1, 1],
[1, 1, 1, 1],
[2, 2, 2, 2],
[2, 2, 2, 2],
[2, 2, 2, 2],
[3, 3, 3, 3],
[3, 3, 3, 3],
[3, 3, 3, 3],
[4, 4, 4, 4],
[4, 4, 4, 4],
[4, 4, 4, 4],
# [5, 5, 5, 5],
# [5, 5, 5, 5],
# [5, 5, 5, 5],
],
row_min_height="120px",
row_gap = "12px"
),
components=[
vm.Container(
title="",
layout=vm.Layout(grid=[[0, 1, 2, 3, 4]], col_gap="20px"),
components=[
vm.Figure(
figure=kpi_card(
data_frame=df,
agg_func="count",
value_column="Caller ID",
title="Number of Calls",
icon="call",
)
),
vm.Figure(
figure=kpi_card(
data_frame=count_unique_agents(data_frame=df),
agg_func="count",
value_column="Agent ID",
title="Number of Agents",
icon="support_agent",
)
),
vm.Figure(
figure=kpi_card(
data_frame=count_unique_callers(data_frame=df),
agg_func="count",
value_column="Caller ID",
title="Number of Callers",
icon="person",
)
),
vm.Figure(
figure=kpi_card(
data_frame=df,
value_column="Concern Addressed",
title="Concerns Addressed",
value_format="{value:.0%}",
agg_func="mean",
icon="recommend",
)
),
vm.Figure(
figure=kpi_card(
data_frame=get_percent_upsales(df),
value_column="Upsale Success",
title="Upsale Success",
value_format="{value:.0%}",
icon="more_up",
agg_func="mean",
)
),
],
),
vm.Container(
title="Concerns",
components=[
vm.Tabs(
tabs=[
vm.Container(
title="Donuts",
layout=vm.Layout(
grid=[
[0, 0, 1, 1],
],
),
components=[
vm.Graph(
figure=custom_donut_chart_concerns(
data_frame=df,
group_column="Agent ID",
count_column="Concern Addressed",
label_names=[
"Concerns Not Addressed",
"Concerns Addressed",
],
mode="average",
),
title="Average Across Agents",
),
vm.Graph(
figure=custom_donut_chart_concerns(
data_frame=df,
group_column="Agent ID",
count_column="Concern Addressed",
label_names=[
"Concerns Not Addressed",
"Concerns Addressed",
],
mode="comparison",
),
title="Per Agent",
),
],
),
vm.Container(
title="Bars",
layout=vm.Layout(
grid=[
[0, 0, 1, 1],
],
),
components=[
vm.Graph(
figure=custom_bar_chart_concerns(
data_frame=df,
group_column="Agent ID",
count_column="Concern Addressed",
label_names=[
"Concerns Not Addressed",
"Concerns Addressed",
],
mode="average",
),
title="Average Across Agents",
),
vm.Graph(
figure=custom_bar_chart_concerns(
data_frame=df,
group_column="Agent ID",
count_column="Concern Addressed",
label_names=[
"Concerns Not Addressed",
"Concerns Addressed",
],
mode="comparison",
),
title="Per Agent",
),
],
),
]
),
],
),
vm.Container(
title="Upsales",
components=[
vm.Tabs(
tabs=[
vm.Container(
title="Donuts",
layout=vm.Layout(
grid=[
[0, 0, 1, 1],
],
),
components=[
vm.Graph(
figure=custom_donut_chart_upsales(
data_frame=df,
group_column="Agent ID",
count_column="Concern Addressed",
label_names=[
"Concerns Not Addressed",
"Concerns Addressed",
],
mode="average",
),
title="Average Across Agents",
),
vm.Graph(
figure=custom_donut_chart_upsales(
data_frame=df,
group_column="Agent ID",
count_column="Concern Addressed",
label_names=[
"Concerns Not Addressed",
"Concerns Addressed",
],
mode="comparison",
),
title="Per Agent",
),
],
),
vm.Container(
title="Bars",
layout=vm.Layout(
grid=[
[0, 0, 1, 1],
],
),
components=[
vm.Graph(
figure=custom_bar_chart_upsales(
data_frame=df,
group_column="Agent ID",
count_column="Concern Addressed",
label_names=[
"Concerns Not Addressed",
"Concerns Addressed",
],
mode="average",
),
title="Average Across Agents",
),
vm.Graph(
figure=custom_bar_chart_upsales(
data_frame=df,
group_column="Agent ID",
count_column="Concern Addressed",
label_names=[
"Concerns Not Addressed",
"Concerns Addressed",
],
mode="comparison",
),
title="Per Agent",
),
],
),
]
),
],
),
vm.Container(
title="Quality Scores",
components=[
vm.Tabs(
tabs=[
vm.Container(
title="Rose",
layout=vm.Layout(
grid=[
[0, 0, 1, 1],
],
),
components=[
vm.Graph(
figure=custom_radar_chart(df,"average"),
title="Average Across Agents",
),
vm.Graph(
figure=custom_radar_chart(df,"comparison"),
title="Per Agent"
),
],
),
vm.Container(
title="Bars",
layout=vm.Layout(
grid=[
[0, 0, 1, 1],
],
),
components=[
vm.Graph(
figure=custom_bar_chart(df,"average"),
title="Average Across Agents",
),
vm.Graph(
figure=custom_bar_chart(df,"comparison"), title="Per Agent"
),
],
),
]
),
],
),
vm.Container(
title="Effective Communication",
components=[
vm.Tabs(
tabs=[
vm.Container(
title="Box Plot",
layout=vm.Layout(
grid=[
[0, 0, 1, 1],
],
),
components=[
vm.Graph(
figure=custom_box_plot(data_frame=df, mode='average'),
title="Average Across Agents",
),
vm.Graph(
figure=custom_box_plot(data_frame=df, mode='comparison'),
title="Per Agent"
),
],
),
]
),
],
),
# vm.Container(
# title="Agents",
# layout=vm.Layout(
# grid=[
# [0, 0, 1, 1],
# ]
# ),
# components=[
# vm.Graph(figure=custom_scatter_chart(df), title="% Concerns Addressed by Tone"),
# vm.Graph(figure=custom_polar(df), title="Average Agent Quality Scores"),
# ],
# ),
# vm.Graph(figure=custom_box_chart(df), title="Agent Effective Communication Score Distribution"),
# vm.Graph(figure=custom_heatmap(df), title="% Concerns Addressed Over Time"),
# vm.Graph(figure=custom_map_chart(df), title="Number of Calls per City"),
],
controls=[
vm.Filter(column="Agent ID", selector=vm.Dropdown(title="Agent ID")),
vm.Filter(column="Caller ID", selector=vm.Dropdown(title="Customer ID")),
],
)
dashboard = vm.Dashboard(pages=[page])
app = Vizro().build(dashboard)