Added some charts

2 files changed, 185 insertions, 4 deletions

diff --git a/static/scripts.js b/static/scripts.js
index dc43112..6fec221 100644
--- a/static/scripts.js
+++ b/static/scripts.js
@@ -1,3 +1,144 @@
+function collapseTogglePress(elem) {
+    console.log("elem");
+}
+
+const PLOT_FUNC_MAPPINGS = {
+    "years": draw_plot_years,
+}
+
 $(document).ready(function() {
-    console.log("ready!")
-});
\ No newline at end of file
+    console.log("ready!");
+
+    fetch("/api/charts.json").then((resp) => {
+        resp.json().then((body) => {
+            const CHARTS = body;
+
+            var minicharts = document.getElementsByClassName("minichart");
+            for (var i = 0; i < minicharts.length; i++) {
+                var theId = minicharts.item(i).id;
+                var u = new URL(window.location.origin + theId);
+                var theIdSplit = u.pathname.split("/");
+
+                CHARTS["index"].forEach(element => {
+                    if (theId === "/minichart" + element.url) {
+                        filters = element["filters"];
+                    }
+                });
+
+                PLOT_FUNC_MAPPINGS[theIdSplit[theIdSplit.length - 1]](theId, filters);
+            }
+
+            var charts = document.getElementsByClassName("chart");
+            for (var i = 0; i < charts.length; i++) {
+                var theId = charts.item(i).id;
+                var u = new URL(window.location.origin + theId);
+                var theIdSplit = u.pathname.split("/");
+
+                CHARTS["index"].forEach(element => {
+                    if (theId === "/chart" + element.url) {
+                        filters = element["filters"];
+                    }
+                });
+
+                PLOT_FUNC_MAPPINGS[theIdSplit[theIdSplit.length - 1]](theId, filters);
+            }
+        })
+    })
+});
+
+function form_api_url(containerName, filters) {
+    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)) {
+        
+        if (typeof value === 'object' && value !== null) {
+            if ("default" in value) {
+                // console.log(filterName, value["default"]);
+                url.searchParams.append(filterName, value["default"]);
+            }
+        }       
+    }
+    return url.toString();
+}
+
+function draw_plot_years(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;
+            }
+
+            Highcharts.chart(containerName, {
+                chart: {
+                    zoomType: 'x',
+                    type: 'area',
+                },
+
+                title: {
+                    text: null
+                },
+
+                yAxis: {
+                    title: {
+                        enabled: yAxisTitle,
+                        text: 'Percentage Pay Difference'
+                    },
+                    labels: {
+                        format: '{value}%'
+                    },
+                    // tickPositioner: function () {
+                    //     // var maxDeviation = Math.ceil(Math.max(Math.abs(this.dataMax), Math.abs(this.dataMin)));
+                    //     // var halfMaxDeviation = Math.ceil(maxDeviation / 2);
+
+                    //     // return [-maxDeviation, -halfMaxDeviation, 0, halfMaxDeviation, maxDeviation];
+                    //     return Array.from({length: -Math.floor(this.dataMin) + 2}, (x, i) => i + Math.floor(this.dataMin));
+                    // },
+                },
+
+                xAxis: {
+                    type: 'category',
+                    labels: {
+                        enabled: xAxisLabels
+                    },
+                    title: {
+                        text: "Year Groups",
+                        enabled: yAxisTitle,
+                    }
+                },
+
+                plotOptions: {
+                    series: {
+                        fillColor: {
+                            linearGradient: [0, 0, 0, 300],
+                            stops: [
+                                [1, "rgba(0, 255, 0, 0.3)"]
+                            ]
+                        },
+                        negativeFillColor: {
+                            linearGradient: [0, 0, 0, 300],
+                            stops: [
+                                [1, "rgba(255, 0, 0, 0.3)"]
+                            ]
+                        }
+                    }
+                },
+        
+                series: [{
+                    data: data,
+                    lineWidth: 4,
+                    showInLegend: showLegend,
+                    name: "Pay Gap",
+                    color: 'Green',
+                    threshold: 0,
+                    negativeColor: 'Red',
+                }]
+            })
+        })
+    })
+}
\ No newline at end of file
diff --git a/static/style.css b/static/style.css
index 4e89888..28d53c7 100644
--- a/static/style.css
+++ b/static/style.css
@@ -49,6 +49,31 @@ aside form input[type="submit"] {
   border: 2px solid black;
 }
 
+#filterform h5 {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+label {
+  font-size: x-small;
+}
+
+.collapsable {
+  display: none;
+}
+
+.collapsetoggle {
+  color: black;
+  font-weight: bold;
+  padding-top: 1px;
+  text-decoration: none;
+}
+
+.collapsetoggle#hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
 #main_content {
   padding-left: 2.5%;
   padding-right: 2.5;
@@ -62,23 +87,38 @@ aside form input[type="submit"] {
   list-style-type: none;
   width: 25%;
   display: inline-flex;
-  background-color: pink;
+  /* background-color: pink; */
   min-height: 250px;
   margin-bottom: 7px;
   overflow: hidden;
   flex-direction: column;
   justify-content: space-between;
+  /* border-color: black;
+  border-width: 2px;
+  border-radius: 1;
+  border-style: ridge; */
 }
 
 .chart_container {
   display: flex;
   flex-direction: row-reverse;
 }
+
 .minichart {
   min-height: 220px;
   width: 100%;
   margin: 0.5rem;
-  background-color: red;
+  /* background-color: red; */
+}
+
+#singlechart {
+  /* background-color: pink; */
+  width: 70%;
+  min-height: 70%;
+}
+
+.chart {
+  
 }
 
 .bottom_text {