diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/scripts.js | 145 | ||||
| -rw-r--r-- | static/style.css | 44 |
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 { |