pages/page_1.py

import streamlit as st
import numpy as np
import plotly.figure_factory as ff
import plotly.express as px
import pandas as pd
import plotly.graph_objects as go
import os
import argparse
from st_aggrid import GridOptionsBuilder, AgGrid, GridUpdateMode, DataReturnMode
from PIL import Image
from streamlit_extras.stylable_container import stylable_container 
from streamlit_extras.metric_cards import style_metric_cards
import pickle

# Implement AND condition when downloading data
st.set_page_config(layout="wide")
color = {'Black or African American': '#2993A3', 'White':'#666766', 'Native American':'#f4b780', 'Hispanic':'#a0cd7c', 'Pacific Islander':'#a680ba', 'Unknown/Other':'#3a393a','Asian':'#f37e85'}

file = open("login_state.pkl",'rb')
st.session_state['logged_in'] = pickle.load(file)
file.close()
#print(st.session_state.get("logged_in"))


#----------------------------NavBar-------------------------#
hide_menu_style = """
        <style>
        #MainMenu {visibility: hidden;}
        header {visibility: hidden;}
        </style>
        """
st.markdown(hide_menu_style, unsafe_allow_html=True)
# print(st.session_state.get("logged_in"))

if st.session_state.get("logged_in") == False or st.session_state.get("logged_in") == None:
    st.switch_page("app.py")



st.markdown('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">', unsafe_allow_html=True)

st.markdown("""
<nav class="navbar fixed-top navbar-expand-lg navbar-dark" style="background-color: #3498DB;background-image:url('/Users/shaashwatagrawal/Documents/SF County/dashboard/Background.jpeg');">
  <a class="navbar-brand" href="https://www.ipr.northwestern.edu/who-we-are/faculty-experts/redbird.html" target="_blank">RJA Dashboard</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link disabled" href="https://sanbernardinorja.streamlit.app/page_0" target="_self">Arrest Summary</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="https://sanbernardinorja.streamlit.app/page_1" target="_self">Charge By Race<span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="https://sanbernardinorja.streamlit.app/page_2" target="_self">Download Data</a>
      </li>
    </ul>
                  <ul class="navbar-nav ml-auto">
        <li class="nav-item mr-auto" style="padding-left:5px;padding-right:5px;outline-color:#f0f2f5;border: 2px solid white;border-radius:10px;"> 
            <a class="nav-link" href="https://sanbernardinorja.streamlit.app/" target="_self" >Logout</a>
     </li>
    </ul>
  </div>
</nav>
""", unsafe_allow_html=True)


#---------------------------- Page 2 ----------------------------#
cols = st.columns(2)

Page2 = stylable_container(key="Page2", css_styles=""" {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 15px;}""")
cols = Page2.columns([4,3,3])
cols[1].header("Charges By Race", anchor = 'section-2', help = 'Understanding Disparity at different stages of a criminal proceeding (i.e. Arrest, Charging and Sentencing).')
# parser = argparse.ArgumentParser()
# parser.add_argument('--charge', type=str, default='187A')
# args = parser.parse_args()

with open("list_of_charges.pkl", "rb") as fp:   # Unpickling
  charges = pickle.load(fp)

col = Page2.columns([0.5, 9, 0.5])
PC = col[1].multiselect('Select Type of Charge', tuple(charges), default='459')#index=list(charges).index(args.charge))

# Reading and Processing Data
pop = pd.read_csv("Population.csv")

df = pd.read_csv("Arrest_page1.csv")
#df = df[df['Charges'].str.contains('|'.join(PC))]

dfr = pd.read_csv("Court_page1.csv")
#print(PC)
#dfr = dfr[dfr['Charges'].str.contains('|'.join(PC))]
#print(dfr)

dfd = pd.read_csv("Sentence_page1.csv")
#dfd = dfd[dfd['Charges'].str.contains('|'.join(PC))]

cols = Page2.columns([0.5,2.25,2.25,0.5,2.5,1.5,0.5])
#cols[1].subheader("Offence by Race")

st.markdown("""
    <style>
    .stSlider [data-baseweb=slider]{
        width: 100%;
    }
    </style>
    """,unsafe_allow_html=True)
timeline = cols[2].slider('Select Timeline for Cases', 1990, 2024, (2015,2023))
perCap = cols[1].selectbox("Display Graph Per Capita", ("No", "Yes"), index=1)
cols[4].subheader("Charge Percentage Ratio")

c1, c2, c3, c4, c5 = Page2.columns([4.5, 0.5, 0.5, 4, 0.5])
with c1:
    df = pd.concat([dfd, dfr, df], ignore_index=True, axis=0)
    df = df[df['Charges'].str.fullmatch('|'.join(PC), na=False)]
    df = df[(df['year'] >= timeline[0]) & (df['year'] <= timeline[1])]
    df = df[df['Race'] != 'Unknown/Other']
    
    df = df[['Charge Type', 'Race', 'Charges', 'count', 'normalized_vals']].groupby(['Charge Type','Race']).agg({'count':'sum', 'normalized_vals':'sum'}).reset_index()
    custom_dict = {'Booking Charge': 0, 'Filed Charge': 1, 'Conviction Charge': 2} 
    
    df = df.sort_values(by=['Charge Type'], key=lambda x: x.map(custom_dict), ascending=False)
    xaxs = 'count' if perCap == "No" else "normalized_vals"
    fig = px.bar(df, y='Charge Type', x=xaxs,color_discrete_map=color, color='Race', orientation='h')
    fig.update_layout(width=700, height=600,)
    fig.update_layout(xaxis_title="Number of Cases", yaxis_title="")
    fig.update_layout(legend=dict(yanchor="bottom", y=1.0, xanchor="left", x=-0.17, orientation='h', entrywidth=150)) 
    fig.update_layout(font=dict(family="Myriad Pro",size=14))
    fig.update_yaxes(tickangle=270, automargin= True)
    st.plotly_chart(fig, theme=None)

with c4:
    sel_col = 'count' if perCap == "No" else "normalized_vals"
    cc1, cc2 = st.columns(2)
    with cc1:
        PCRace = st.selectbox('Select Race to Compare with', tuple(set(list(df['Race'].unique()) + list(dfr['Race'].unique()))))
    with cc2:
        st.header(" / White")
    r1 = df[(df['Race'] == PCRace) & (df['Charge Type'] == 'Booking Charge')][sel_col].sum()*(10000000)
    r2 = df[(df['Race'] == 'White') & (df['Charge Type'] == 'Booking Charge')][sel_col].sum()*(10000000)

    if r2 != 0:
        val = '%0.2f'%(r1/r2)+'/1'
    else:
        val = '%0.2f'%(r1)+'/'+str(r2)
    new_title = '<p style="font-family:Myriad Pro; color:Black; font-size: 20px;display: inline;vertical-align: top;">'+PCRace+' rate of arrests by the white rate of arrests:  '+val+'</p>'
    #st.markdown(new_title, unsafe_allow_html=True)
    #st.markdown('####')
    #st.markdown('####')
    st.metric(label= PCRace+' rate of arrests by the white rate of arrests:' , value=val, delta=None)
    style_metric_cards()


    r1 = df[(df['Race'] == PCRace) & (df['Charge Type'] == 'Filed Charge')][sel_col].sum()*(10000000)
    r2 = df[(df['Race'] == 'White') & (df['Charge Type'] == 'Filed Charge')][sel_col].sum()*(10000000) 

    if r2 != 0:
        val = '%0.2f'%(r1/r2)+'/1'
    else:
        val = '%0.2f'%(r1)+'/'+str(r2)
    new_title = '<p style="font-family:Myriad Pro; color:Black; font-size: 20px;display: inline;vertical-align: top;">'+PCRace+' rate of charging by the white rate of charging is:  '+val+'</p>'
    # st.markdown(new_title, unsafe_allow_html=True)
    # st.markdown('####')
    # st.markdown('####')
    st.metric(label=PCRace+' rate of charging by the white rate of charging is:  ', value=val, delta=None)
    style_metric_cards()

    r1 = (df[(df['Race'] == PCRace) & (df['Charge Type'] == 'Conviction Charge')][sel_col].sum()*(10000000))
    r2 = (df[(df['Race'] == 'White') & (df['Charge Type'] == 'Conviction Charge')][sel_col].sum()*(10000000))

    #st.text(PCRace3+" rate of being sentenced by the white rate of being sentenced")
    if r2 != 0:
        val = '%0.2f'%(r1/r2)+'/1'
    else:
        val = '%0.2f'%(r1)+'/'+str(r2)
    new_title = '<p style="font-family:Myriad Pro; color:Black; font-size: 20px;display: inline;vertical-align: top;">'+PCRace+' rate of being sentenced by the white rate of being sentenced is:  '+val+'</p>'
    # st.markdown(new_title, unsafe_allow_html=True)
    st.metric(label=PCRace+' rate of being sentenced by the white rate of being sentenced is:  ', value=val, delta=None)
    style_metric_cards()