From 953dc5ef8652a0b7e8ae2c7db3535f1bd157cdd4 Mon Sep 17 00:00:00 2001 From: jwansek Date: Tue, 16 May 2023 14:11:51 +0100 Subject: Added alt text, docker --- static/scripts.js | 319 ------------------------------------------------------ 1 file changed, 319 deletions(-) delete mode 100644 static/scripts.js (limited to 'static/scripts.js') diff --git a/static/scripts.js b/static/scripts.js deleted file mode 100644 index 9b52215..0000000 --- a/static/scripts.js +++ /dev/null @@ -1,319 +0,0 @@ -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 -- cgit v1.2.3