import streamlit as st
import pandas as pd
import altair as alt

data = pd.read_csv('https://raw.githubusercontent.com/UIUC-iSchool-DataViz/is445_data/main/licenses_fall2022.csv')

st.title("Licenses Dataset Analysis")
st.header("Vizualization 1: License Type")

viz1 = (
    alt.Chart(data)
    .mark_bar()
    .encode(
        x = alt.X("count():Q", title="Number of Licenses"),
        y = alt.Y("License Type:N", sort='-x', title="License Type"),
        color = alt.Color("License Type:N", legend=None)
    )
    .properties(width=900, height=500)
)

st.altair_chart(viz1, use_container_width=False)
st.subheader("Vizualization 1 Write Up")
st.text(
    """
    First, I choose to analyze the distribution of different license type. I used a bar graph and
    sort the values to make the graph looks more clean. The graph did not use the container width 
    because it was too small to see the distribution of small numbers. The color just represents 
    different license type for a more clear view of the graph.
    """
)

st.header("Visualization 2: Issued Time")
data["Original Issue Date"] = pd.to_datetime(data["Original Issue Date"], errors="coerce")

viz2 = (
    alt.Chart(data)
    .mark_line(point=True)
    .encode(
        x=alt.X("yearmonth(Original Issue Date):T", title = "Issue Date(Year Month)"),
        y = alt.Y("count():Q", title="Number of License"),
        color = alt.Color("License Type:N", legend=None)
    )
    .properties(width = 900, height=500)
)
st.altair_chart(viz2, use_container_width=False)
st.subheader("Vizualization 2 Write Up")
st.text(
    """
    The line chart shows the number of license issued over the time. The color looks messy 
    but I think a way to seperate different license type is essential. I also did the same 
    for the use_container_width because I think a bigger graph could show the distribution better.
     I used a line graph this time to show the trend of month. It is cool to see that there is a
      straight line on Jan 1998.
    """
)