Preliminarily added SIC section pay gap visualization

4 files changed, 111 insertions, 11 deletions

diff --git a/app.py b/app.py
index 7fc3d6e..a4a3f0d 100644
--- a/app.py
+++ b/app.py
@@ -58,6 +58,20 @@ def api_get_years():
     with database.PayGapDatabase(host = host) as db:
         return flask.jsonify(db.get_pay_by_year(pay_type, sic_section_name = sic_type, employer_size = employer_size, employer_type = employer_type))
 
+@app.route("/api/sic_sec")
+def api_get_sic_section_pay():
+    pay_type = flask.request.args.get("Pay Type")
+    year = flask.request.args.get("year")
+    if pay_type is None or pay_type.lower() not in {'hourly', 'bonuses'}:
+        return flask.abort(400, "The key `pay type` must be equal to 'hourly' or 'bonuses'")
+    with database.PayGapDatabase(host = host) as db:
+        if year is not None:
+            if year not in db.get_years():
+                return flask.abort(400, "Unrecognised year '%s'. The year option must be in %s" % (year, ", ".join(db.get_years())))
+        
+        return flask.jsonify(db.get_pay_by_sic_section(pay_type, year))
+
+
 @app.route("/search")
 def search():
     with database.PayGapDatabase(host = host) as db:
@@ -93,6 +107,8 @@ def serve_large_plot(name):
                 filters[k] = {"options": db.get_company_types()}
             if v == "<CompanySize>":
                  filters[k] = {"options": db.get_company_sizes()}
+            if v == "<Years>":
+                filters[k] = {"options": db.get_years()}
 
     elem["url"] = flask.request.full_path
     # print("elem", elem)
diff --git a/charts.json b/charts.json
index 16da391..91f2ab7 100644
--- a/charts.json
+++ b/charts.json
@@ -33,12 +33,32 @@
             }
         },
         {
-            "title": "Pay Difference by SIC Section REallt LONNNNNNNNNNNNNNNNNNNNNNNGGGGGGGGGGGGG",
-            "url": "/plot/sic-section"
+            "title": "Median Hourly pay Difference by SIC Section",
+            "url": "/plot/sic_sec?Pay+Type=Hourly",
+            "filters": {
+                "Pay Type": {
+                    "options": [
+                        "Hourly",
+                        "Bonuses"
+                    ],
+                    "default": "Hourly"
+                },
+                "Year": "<Years>"
+            }
         },
         {
-            "title": "Pay Gay by Company Size",
-            "url": "/plot/company-size"   
+            "title": "Median Bonus pay Difference by SIC Section",
+            "url": "/plot/sic_sec?Pay+Type=Bonuses",
+            "filters": {
+                "Pay Type": {
+                    "options": [
+                        "Hourly",
+                        "Bonuses"
+                    ],
+                    "default": "Bonuses"
+                },
+                "Year": "<Years>"
+            }
         }
     ]
 }
\ No newline at end of file
diff --git a/database.py b/database.py
index 3e52016..80edd3c 100644
--- a/database.py
+++ b/database.py
@@ -332,7 +332,7 @@ class PayGapDatabase:
 
                 f = cursor.fetchone()[0]
                 if f is not None:
-                    pay.append((section_name, f))
+                    pay.append((section_name, float(f)))
         
         return sorted(pay, key = operator.itemgetter(1), reverse = True)
 
@@ -347,5 +347,6 @@ if __name__ == "__main__":
         host = "db"
 
     with PayGapDatabase(host = host) as db:
-        print(db.get_pay_by_sic_section("hourly", None))
+        print(db.get_years())
+        print(db.get_pay_by_sic_section("bonuses", None))
 
diff --git a/static/scripts.js b/static/scripts.js
index 261acfa..4a71e79 100644
--- a/static/scripts.js
+++ b/static/scripts.js
@@ -10,6 +10,7 @@ function collapseTogglePress(elem, a_elem, num_hidden) {
 
 const PLOT_FUNC_MAPPINGS = {
     "years": draw_plot_years,
+    "sic_sec": draw_plot_sic_sections,
 }
 
 $(document).ready(function() {
@@ -46,7 +47,7 @@ $(document).ready(function() {
 
                 CHARTS["index"].forEach(element => {
                     if (location.href.substr(location.href.indexOf(location.host)+location.host.length).startsWith(element["url"])) {
-                        console.log(location.href.substr(location.href.indexOf(location.host)+location.host.length), element["url"]);
+                        // console.log(location.href.substr(location.href.indexOf(location.host)+location.host.length), element["url"]);
                         filters = element["filters"];
                         // console.log(element);
                     }
@@ -59,8 +60,8 @@ $(document).ready(function() {
 });
 
 function form_api_url(containerName, filters) {
-    console.log(filters);
-    console.log(containerName);
+    // console.log(filters);
+    // console.log(containerName);
     var name = containerName.split("/")[containerName.split("/").length - 1];
     var url = new URL(window.location.origin + "/api/" + name);
     // for (const [filterName, value] of Object.entries(filters)) {
@@ -72,7 +73,7 @@ function form_api_url(containerName, filters) {
     //         }
     //     }       
     // }
-    console.log("fetching ", url.toString());
+    // console.log("fetching ", url.toString());
     return url.toString();
 }
 
@@ -147,7 +148,7 @@ function draw_plot_years(containerName, filters) {
                 series: [{
                     data: data,
                     lineWidth: 4,
-                    showInLegend: showLegend,
+                    showInLegend: false,
                     name: "Pay Gap",
                     color: 'Green',
                     threshold: 0,
@@ -156,4 +157,66 @@ function draw_plot_years(containerName, filters) {
             })
         })
     })
+}
+
+function draw_plot_sic_sections(containerName, filters) {
+    fetch(form_api_url(containerName, filters)).then(resp => {
+        resp.json().then(data => {
+            if (containerName.substring(1, 6) === "chart") {
+                var yAxisTitle = true;
+                var xAxisLabels = true;
+                var showLegend = true;
+            } else {
+                var yAxisTitle = false;
+                var xAxisLabels = false;
+                var showLegend = false;
+            }
+            
+            var categories = [];
+            var pays = [];
+            data.forEach(elem => {
+                categories.push(elem[0]);
+                pays.push(elem[1]);
+            });
+
+            Highcharts.chart(containerName, {
+                chart: {
+                    type: 'bar'
+                },
+
+                title: {
+                    text: null
+                },
+
+                xAxis: {
+                    categories: categories,
+                    labels: {
+                        enabled: xAxisLabels
+                    },
+                    title: {
+                        text: 'SIC Section',
+                        enabled: yAxisTitle
+                    },
+                    type: 'category'
+                },
+
+                yAxis: {
+                    title: {
+                        text: 'Median Pay',
+                        enabled: yAxisTitle
+                    },
+                    labels: {
+                        format: '{value}%'
+                    }
+                },
+
+                series: [{
+                    data: pays,
+                    showInLegend: false,
+                    negativeColor: 'Red',
+                    color: 'Green'
+                }]
+            })
+        })
+    })
 }
\ No newline at end of file