fig = px.area(crimeTypeCountsDF, x="Month End", y="Count",
              line_group="Crime type",
              color="Crime type", 
              category_orders={"Crime type": crimesDF["Crime type"].value_counts().index},
              markers=True,
              color_discrete_sequence=COLOR_SCALE,
              template="seaborn",
              title="Count of Each Crime Type Per Month")

# NB: These labels have hard-coded positions and should be removed/amended if using different data
yScale = 26000
addLabel(fig, "Violence and<br>sexual offences",   yPos=0.200*yScale, ay=32)
addLabel(fig, "Anti-social<br>behaviour",          yPos=0.440*yScale, ay=38)
addLabel(fig, "Public order",                      yPos=0.590*yScale, ay=32)
addLabel(fig, "Criminal damage<br> and arson",         yPos=0.690*yScale, ay=32)
addLabel(fig, "Other theft",                       yPos=0.765*yScale, ay=32)
addLabel(fig, "Burglary",                          yPos=0.817*yScale, ay=28)
addLabel(fig, "Vehicle crime",                     yPos=0.864*yScale, ay=22)
addLabel(fig, "Shoplifting",                       yPos=0.905*yScale, ay=18)
addLabel(fig, "Drugs",                             yPos=0.932*yScale, ay=11)
addLabel(fig, "Other crime",                       yPos=0.959*yScale, ay= 7)
addLabel(fig, "Robbery",                           yPos=0.972*yScale, ay=-1)
addLabel(fig, "Possession of weapons",             yPos=0.985*yScale, ay=-10)
addLabel(fig, "Bicycle theft",                     yPos=0.990*yScale, ay=-22)
addLabel(fig, "Theft from the person",             yPos=1.000*yScale, ay=-33)

fig.update_layout(
    height=500,
   showlegend=False, # Hide the legend when using the hard-coded labels. Remove this for an auto generated legend.
    margin=dict(l=0, r=10, t=40, b=0),
)

fig.update_xaxes(title="Date", range=[pd.Timestamp('2020-04-20'), pd.Timestamp('2020-11-10')], tickformat="%d %B<br>%Y", ticks="outside", showgrid=False)
fig.update_yaxes(ticks="outside", col=1)

fig.layout.xaxis.fixedrange = True
fig.layout.yaxis.fixedrange = True

fig_html = to_html(fig, include_plotlyjs=False, full_html=False, div_id="countGraphCrimeTypesPlot")
# print(fig_html)
fig.show()

fig = px.area(crimeTypeCountsDF, x="Month End", y="Count",
              line_group="Crime type",
              color="Crime type", 
              category_orders={"Crime type": crimesDF["Crime type"].value_counts().index},
              markers=True,
              color_discrete_sequence=COLOR_SCALE,
              template="seaborn",
              title="Count of Each Crime Type Per Month")

# set showlegend property by name of trace
for trace in fig['data']: 
    if(trace['name'] != 'B'): trace['showlegend'] = False

# NB: These labels have hard-coded positions and should be removed/amended if using different data
yScale = 26000
addLabel(fig, "Violence and<br>sexual offences",   yPos=0.200*yScale, ay=32)
addLabel(fig, "Anti-social<br>behaviour",          yPos=0.440*yScale, ay=38)
addLabel(fig, "Public order",                      yPos=0.590*yScale, ay=32)
addLabel(fig, "Criminal damage<br> and arson",     yPos=0.690*yScale, ay=32)
addLabel(fig, "Other theft",                       yPos=0.765*yScale, ay=32)
addLabel(fig, "Burglary",                          yPos=0.817*yScale, ay=28)
addLabel(fig, "Vehicle crime",                     yPos=0.864*yScale, ay=22)
addLabel(fig, "Shoplifting",                       yPos=0.905*yScale, ay=18)
addLabel(fig, "Drugs",                             yPos=0.932*yScale, ay=11)
addLabel(fig, "Other crime",                       yPos=0.959*yScale, ay= 7)
addLabel(fig, "Robbery",                           yPos=0.972*yScale, ay=-1)
addLabel(fig, "Possession of weapons",             yPos=0.985*yScale, ay=-10)
addLabel(fig, "Bicycle theft",                     yPos=0.990*yScale, ay=-22)
addLabel(fig, "Theft from the person",             yPos=1.000*yScale, ay=-33)


# Add lines for covid rule dates
fig.add_vline(x=pd.Timestamp('2020-03-23'), line_color="#bd6f51", line_dash="dash", line_width=3, opacity=1.0, showlegend=True, label=dict(
        text="National<br>lockdown<br>begins",
        textposition="end",
        yanchor="top",
        textangle=0,
        padding=10,
        xanchor="right"
    ))

fig.add_vline(x=pd.Timestamp('2020-04-30'), line_color="#B13507", line_dash="dash", line_width=3, opacity=1.0, showlegend=True, label=dict(
        text="PM says<br>“we are past<br>the peak”<br>of the<br>pandemic",
        textposition="end",
        yanchor="top",
        textangle=0,
        padding=10,
        xanchor="right"
    ))

fig.add_vline(x=pd.Timestamp('2020-05-10'), line_color="#984976", line_dash="dash", line_width=3, opacity=1.0, showlegend=True, label=dict(
        text="PM calls<br>for return<br>to work",
        textposition="end",
        yanchor="top",
        textangle=0,
        padding=10,
        xanchor="left"
    ))

fig.add_vline(x=pd.Timestamp('2020-06-01'), line_color="#5e6c8e", line_dash="dash", line_width=3, opacity=1.0, showlegend=True, label=dict(
        text="Phased<br>school<br>return",
        textposition="end",
        yanchor="top",
        textangle=0,
        padding=10,
        xanchor="left"
    ))

fig.add_vline(x=pd.Timestamp('2020-06-15'), line_color="#764c9d", line_dash="dash", line_width=3, opacity=1.0, showlegend=True, label=dict(
        text="Retail<br>reopens",
        textposition="end",
        yanchor="top",
        textangle=0,
        padding=10,
        xanchor="left"
    ))

fig.add_vline(x=pd.Timestamp('2020-09-14'), line_color="#00295B", line_dash="dash", line_width=3, opacity=1.0, showlegend=True, label=dict(
        text="Gatherings<br>above six<br>banned",
        textposition="end",
        yanchor="top",
        textangle=0,
        padding=10,
        xanchor="right"
    ))

fig.add_vline(x=pd.Timestamp('2020-09-22'), line_color="#883039", line_dash="dash", line_width=3, opacity=1.0, showlegend=True, label=dict(
        text="PM announces<br>return to working<br>from home",
        textposition="end",
        yanchor="top",
        textangle=0,
        padding=10,
        xanchor="left"
    ))


fig.update_layout(
    showlegend=False,
    height=500,
    margin=dict(l=0, r=0, t=40, b=0),
    legend_title="Lockdown<br>Regulation Changes"
)

fig.update_xaxes(title="Date", range=[pd.Timestamp('2020-03-01'), pd.Timestamp('2020-11-20')], tickformat="%d %B<br>%Y", ticks="outside", showgrid=False)
fig.update_yaxes(range=[0, 35e3], ticks="outside", col=1)

fig.layout.xaxis.fixedrange = True
fig.layout.yaxis.fixedrange = True

fig_html = to_html(fig, include_plotlyjs=False, full_html=False, div_id="countGraphWithCovidData")
# print(fig_html)

fig.show()

# Plot the month-on-month changes in crime counts 

fig = px.line(crimeTypeCountsDF, x="Month End", y="Change Proportion",
              line_group="Crime type",
              color="Crime type", 
              category_orders={"Crime type": crimesDF["Crime type"].value_counts().index},
              markers=True,
              color_discrete_sequence=COLOR_SCALE,
              template="seaborn",
              title="Absolute Change in Crime Counts Over Time; Grouped by Crime Type")

fig.update_layout(
    height=500,
    margin=dict(l=0, r=10, t=40, b=0),
    yaxis_title="Change in crime count<br>relative to previous month"
)

fig.add_hline(
    y=0,
    line_color="black",
    line_width=1,
    line_dash="solid",
    opacity=0.5
)

fig.update_xaxes(ticks="outside", showgrid=False)
fig.update_yaxes(tickformat=".0%", dtick=0.05, ticks="outside", col=1)

fig.update_traces(opacity=1.0, selector=dict(type='scatter'))

# Set crime types to be shown initially
visible_traces = {"Violence and sexual offences", "Anti-social behaviour", "Public order", "Criminal damage and arson"}
for trace in fig.data:
    trace.visible = True if trace.name in visible_traces else "legendonly"

# When you click on a trace in the legend, show/hide it
fig.update_layout(legend_itemclick="toggle", legend_itemdoubleclick="toggleothers")

# Prevent cropping/moving figure when clicking on the plot
fig.layout.xaxis.fixedrange = True
fig.layout.yaxis.fixedrange = True

fig_html = to_html(fig, include_plotlyjs=False, full_html=False, div_id="absoluteChangeCrimeGraph")
# print(fig_html)

fig.show()

# Plot the proportional month-on-month changes in crime counts 

fig = px.line(crimeTypeCountsDF, x="Month End", y="Change Proportion",
              line_group="Crime type",
              color="Crime type", 
              category_orders={"Crime type": crimesDF["Crime type"].value_counts().index},
              markers=True,
              color_discrete_sequence=COLOR_SCALE,
              template="seaborn",
              title="Proportional Change in Crime Counts Over Time; Grouped by Crime Type")

fig.update_layout(
    height=500,
    margin=dict(l=0, r=10, t=40, b=0),
    yaxis_title="Percentage change in crime count<br>relative to previous month"
)

fig.add_hline(
    y=0,
    line_color="black",
    line_width=1,
    line_dash="solid",
    opacity=0.5
)

fig.update_xaxes(ticks="outside", showgrid=False)
fig.update_yaxes(tickformat=".0%", dtick=0.05, ticks="outside", col=1)

fig.update_traces(opacity=1.0, selector=dict(type='scatter'))

# Set crime types to be shown initially
visible_traces = {"Shoplifting", "Anti-social behaviour", "Public order", "Theft from the person"}
for trace in fig.data:
    trace.visible = True if trace.name in visible_traces else "legendonly"

# When you click on a trace in the legend, show/hide it
fig.update_layout(legend_itemclick="toggle", legend_itemdoubleclick="toggleothers")

# Prevent cropping/moving figure when clicking on the plot
fig.layout.xaxis.fixedrange = True
fig.layout.yaxis.fixedrange = True

fig_html = to_html(fig, include_plotlyjs=False, full_html=False, div_id="proportionalChangeCrimeGraph")
# print(fig_html)

fig.show()