project/app/utils/visualizations/histogram.py
# Function to produce a histogram that shows the distribution of the scores
# from the student's grade level for the current week
# Plots a vertical line of the students most recent score for comparison
# Imports
import plotly.express as px
def histogram(grade_list, student_info):
"""
Plotly histogram of all of the submission scores for the student's grade
for the current week
Plots a vertical line for the student's most recent score so they can see
how it compares to the rest of the grade
Input: List of the current week's scores for the specific grade level
Student information in a list in this order:
[grade_number, student_name, student_score]
Output: Plotly JSON that can be passed to the web to display on the
parent dashboard
"""
# Dynamic variables to use for labels on the plot
grade_number, student_name, student_score = student_info
# Plot
fig = px.histogram(
x=grade_list, nbins=20, color_discrete_sequence=["#EB7E5B"]
)
fig.update_layout(
title={
"text": f"Distribution of This Week's Grade {grade_number} Stories",
"y": 0.95,
"x": 0.5,
"font": {"size": 25, "family": "PT Sans Narrow"},
},
shapes=[
dict(
type="line",
yref="paper",
y0=0,
y1=1,
xref="x",
x0=student_score,
x1=student_score,
)
],
annotations=[
dict(
x=student_score,
y=0.5,
xref="x",
yref="paper",
text=f"{student_name}'s submission",
arrowhead=5,
ax=200,
ay=-100,
showarrow=True,
font=dict(family="PT Sans Narrow", size=16, color="black"),
align="center",
arrowsize=1,
arrowwidth=2,
arrowcolor="#636363",
bordercolor="#c7c7c7",
borderwidth=2,
borderpad=4,
bgcolor="#B5D33D",
opacity=0.8,
),
],
plot_bgcolor="#6CEAE6",
)
fig.update_traces(hoverinfo="none", hovertemplate=None)
fig.update_xaxes(
title_text="Squad Score",
showticklabels=False,
title_font={"size": 20, "family": "PT Sans Narrow"},
)
fig.update_yaxes(title_text="", showticklabels=False, showgrid=False)
# Return as json for web
return fig.to_json()