Reformatting the table for better visuals (#89)

* Modified .gitignore so that now it ignores pycache and rhistory

* The table now highlights the rows corresopnding to the selected countries yellow. If no country is selected, the first row (highest rank) is highlighted

* The table now shows enough rows to have the same height as the map. By default, it shows 13 rows, and if there is no enough rows after filtering, random rows will be selected to make up

* The highlighted countries on the table now no longer are bolded. The header of the table showing the columns are now bolded, and have a blue background color matching the overall color scheme

* Fixed code with country names with spaces, fixed filler countries

* Removed unnecessary files

---------

Close #90 

Co-authored-by: Jerry Yu <jyu565@gmail.com>

Author: alexzhang0825

.gitignore

@@ -3,7 +3,7 @@
 import plotly.graph_objects as go
 from data import happiness_data
 from utils import FACTORS, COLORS
-
+from random import sample
 
 @callback(
     Output("world-map", "figure"),
@@ -30,43 +30,96 @@ def update_table(country1, country2, year):
     output_df = happiness_data.loc[happiness_data["Year"] == year]
     top_3 = output_df.head(3)['Country'].tolist()
     bottom_3 = output_df.tail(3)['Country'].tolist()
+    highlight_color = COLORS[1]
+    maximum_num_rows = 13
+    
     if country1 and country2:
         countries_list = top_3 + bottom_3 + [country1, country2]
+        placeholders_num = maximum_num_rows - len(set(countries_list))
+
+        full_countries = output_df['Country'].to_list()
+        filtered = [item for item in full_countries if item not in countries_list]
+
+        if placeholders_num % 2:
+            add_top = filtered[:placeholders_num//2+1]
+            add_bottom = filtered[-placeholders_num//2:]
+        else:
+            add_top = filtered[:placeholders_num//2]
+            add_bottom = filtered[-placeholders_num//2:]
+        
+        countries_list = countries_list + add_top + add_bottom
+        
         output_df = output_df[["Overall rank", "Country", "Score"]].query("Country in @countries_list")
+        rank_country_1 = output_df.loc[output_df["Country"] == country1, "Overall rank"].tolist()[0]
+        rank_country_2 = output_df.loc[output_df["Country"] == country2, "Overall rank"].tolist()[0]
         style = [
             {
-                "if": {"filter_query": "{{Overall rank}} = {}".format(output_df["Overall rank"].min())},
-                "font-weight": "bold",
+                "if": {"filter_query": f"{{Overall rank}} = {rank_country_1} || {{Overall rank}} = {rank_country_2}"},
+                'backgroundColor': highlight_color,
+                'color': 'white'
             }
         ]
     elif country1:
         countries_list = top_3 + bottom_3 + [country1]
+
+        placeholders_num = maximum_num_rows - len(set(countries_list))
+
+        full_countries = output_df['Country'].to_list()
+        filtered = [item for item in full_countries if item not in countries_list]
+
+        if placeholders_num % 2:
+            add_top = filtered[:placeholders_num//2+1]
+            add_bottom = filtered[-placeholders_num//2:]
+        else:
+            add_top = filtered[:placeholders_num//2]
+            add_bottom = filtered[-placeholders_num//2:]
+        
+        countries_list = countries_list + add_top + add_bottom
+        
         country_rank = output_df.loc[output_df["Country"] == country1, "Overall rank"].tolist()[0]
         output_df = output_df.query("Country in @countries_list")
         output_df = output_df[["Overall rank", "Country", "Score"]]
         style = [
             {
                 "if": {"filter_query": "{{Overall rank}} = {}".format(country_rank)},
-                "font-weight": "bold"
+                'backgroundColor': highlight_color,
+                'color': 'white'
             }
         ]
     elif country2:
         countries_list = top_3 + bottom_3 + [country2]
+
+        placeholders_num = maximum_num_rows - len(set(countries_list))
+
+        full_countries = output_df['Country'].to_list()
+        filtered = [item for item in full_countries if item not in countries_list]
+
+        if placeholders_num % 2:
+            add_top = filtered[:placeholders_num//2+1]
+            add_bottom = filtered[-placeholders_num//2:]
+        else:
+            add_top = filtered[:placeholders_num//2]
+            add_bottom = filtered[-placeholders_num//2:]
+        
+        countries_list = countries_list + add_top + add_bottom
+        
         country_rank = output_df.loc[output_df["Country"] == country2, "Overall rank"].tolist()[0]
         output_df = output_df.query("Country in @countries_list")
         output_df = output_df[["Overall rank", "Country", "Score"]]
         style = [
             {
                 "if": {"filter_query": "{{Overall rank}} = {}".format(country_rank)},
-                "font-weight": "bold"
+                'backgroundColor': highlight_color,
+                'color': 'white'
             }
         ]
     else:
-        output_df = output_df[["Overall rank", "Country", "Score"]].head(10)
+        output_df = output_df[["Overall rank", "Country", "Score"]].head(maximum_num_rows)
         style = [
             {
                 "if": {"filter_query": "{{Overall rank}} = {}".format(output_df["Overall rank"].min())},
-                "font-weight": "bold"
+                'backgroundColor': highlight_color,
+                'color': 'white'
             }
         ]
 

src/callbacks/charts.py

@@ -1,13 +1,19 @@
 from dash import dash_table, html, dcc
 import dash_bootstrap_components as dbc
+from utils import COLORS
 
 
 world_map = dbc.Card(children=[html.H5("World Map of Happiness Scores"),
                                dcc.Graph(id="world-map")],
                      body=True)
 rank_table = dbc.Card(children=[html.H5("Country Rankings"),
                                 html.Br(),
-                                dash_table.DataTable(id="rank-table")],
+                                dash_table.DataTable(id="rank-table",
+                                                     style_header={'backgroundColor': COLORS[0],
+                                                                   'color': 'white',
+                                                                   'textAlign': 'center',
+                                                                   "font-weight": "bold"},
+                                                     style_data={'textAlign': 'center'})],
                       body=True,
                       style={"height":"100%"})
 line_chart = dbc.Card(children=[html.H5("World Map of Happiness Scores"),

src/components/charts.py

@@ -1,3 +1,3 @@
 FACTORS = ["GDP per capita", "Social support", "Healthy life expectancy",
            "Freedom to make life choices", "Generosity", "Perceptions of corruption"]
-COLORS = ['#1289ce', '#f2c201', '#AB63FA', '#FFA15A', '#19D3F3', '#FF6692', '#B6E880', '#FF97FF', '#FECB52']
+COLORS = ['#1289ce', '#f2c201', '#AB63FA', '#FFA15A', '#19D3F3', '#FF6692', '#B6E880', '#FF97FF', '#FECB52']