aboutsummaryrefslogtreecommitdiffstats
path: root/src/static/scripts.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/static/scripts.js')
-rw-r--r--src/static/scripts.js319
1 files changed, 319 insertions, 0 deletions
diff --git a/src/static/scripts.js b/src/static/scripts.js
new file mode 100644
index 0000000..9b52215
--- /dev/null
+++ b/src/static/scripts.js
@@ -0,0 +1,319 @@
+function collapseTogglePress(elem, a_elem, num_hidden) {
+ if (getComputedStyle(document.getElementById(elem)).display === "none") {
+ document.getElementById(elem).style.display = "block";
+ document.getElementById(a_elem).innerText = `Hide ${num_hidden} filters`
+ } else {
+ document.getElementById(elem).style.display = "none";
+ document.getElementById(a_elem).innerText =`Un-hide ${num_hidden} hidden filters`
+ }
+}
+
+const PLOT_FUNC_MAPPINGS = {
+ "years": draw_plot_years,
+ "sic_sec": draw_plot_sic_sections,
+ "heatmap": draw_heatmap
+}
+
+$(document).ready(function() {
+ const filterform = document.getElementById("filterform");
+ if (filterform !== null) {
+ filterform.action = window.location.pathname + "/apply_click";
+ }
+
+ const slider = document.getElementById("yearslider");
+ if (slider !== null) {
+ slider.onchange = function() {
+ fetch("/api/getyears").then(resp => {
+ resp.json().then(years => {
+ document.getElementById("slider_val").innerHTML = "Year range: " + years[Number(this.value) - 1];
+ });
+ });
+ }
+ }
+
+ 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 (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"]);
+ filters = element["filters"];
+ // console.log(element);
+ }
+ });
+
+ PLOT_FUNC_MAPPINGS[theIdSplit[theIdSplit.length - 1]](theId, filters);
+ }
+ })
+ })
+});
+
+function form_api_url(containerName, filters) {
+ // 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)) {
+
+ // if (typeof value === 'object' && value !== null) {
+ // if ("default" in value) {
+ // // console.log(filterName, value["default"]);
+ // url.searchParams.append(filterName, value["default"]);
+ // }
+ // }
+ // }
+ console.log("fetching ", url.toString());
+ 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: false,
+ name: "Pay Gap",
+ color: 'Green',
+ threshold: 0,
+ negativeColor: 'Red',
+ }]
+ })
+ })
+ })
+}
+
+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
+ },
+
+ plotOptions: {
+ bar: {
+ dataLabels: {
+ align: "center"
+ }
+ }
+ },
+
+ xAxis: {
+ categories: categories,
+ labels: {
+ enabled: xAxisLabels
+ },
+ title: {
+ text: 'SIC Section',
+ enabled: yAxisTitle
+ },
+ type: 'category'
+ },
+
+ yAxis: {
+ title: {
+ text: 'Median Pay',
+ enabled: yAxisTitle
+ },
+ labels: {
+ format: '{value}%'
+ },
+ plotLines: [{
+ value: 0,
+ width: 2,
+ color: 'black',
+ zIndex: 10
+ }]
+ },
+
+ series: [{
+ data: pays,
+ showInLegend: false,
+ negativeColor: 'Red',
+ color: 'Green',
+ name: 'Pay Gap'
+ }]
+ })
+ })
+ })
+}
+
+function draw_heatmap(containerName, filters) {
+ fetch(form_api_url(containerName, filters)).then(resp => {
+
+ const isPreview = (containerName.substring(1, 6) === "chart");
+
+ resp.json().then(data => {
+
+ var data2 = [];
+ data.forEach(row => {
+ data2.push([row[0], row[2]]);
+ });
+ console.log(data2);
+
+ $.getJSON("/static/ukcounties.json", function(geojson) {
+
+ console.log(geojson);
+
+ Highcharts.mapChart(containerName, {
+ chart: {
+ map: geojson
+ },
+
+ title: {
+ text: null
+ },
+
+ accessibility: {
+ typeDescription: 'Map of the United Kingdom.'
+ },
+
+ mapNavigation: {
+ enabled: isPreview,
+ buttonOptions: {
+ verticalAlign: 'bottom'
+ }
+ },
+
+ legend: {
+ enabled: isPreview,
+ layout: 'vertical',
+ align: 'right',
+ verticalAlign: 'middle',
+ itemMarginTop: 10,
+ itemMarginBottom: 10
+ },
+
+ colorAxis: {
+ stops: [
+ [0, '#c4463a'],
+ [0.5, '#e6ffee'],
+ [0.9, '#009933']
+ ],
+ min: -15
+ },
+
+ series: [{
+ data: data2,
+ keys: ['name', 'value'],
+ joinBy: 'name',
+ name: 'Pay Gap',
+ color: 'Green',
+ tooltip: {
+ valueSuffix: '%'
+ }
+ }]
+ });
+ });
+ });
+ })
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.25.1) at 2025-04-27 22:42:30 +0000