<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Portal za oddajanje besedil</title> <link rel="icon" href="/static/favicon.ico" type="image/x-icon" > <link rel="icon" href="static/favicon.svg" sizes="any" type="image/svg+xml"> <link rel="stylesheet" href="{{ROUTE_PREFIX}}/static/css/header.css" type="text/css"> <link rel="stylesheet" href="{{ROUTE_PREFIX}}/static/css/form.css" type="text/css"> <link rel="stylesheet" href="{{ROUTE_PREFIX}}/static/css/simple-grid.css" type="text/css"> <link rel="stylesheet" href="{{ROUTE_PREFIX}}/static/css/contracts.css" type="text/css"> </head> <body> <header> <div class="logo"><a href="{{ROUTE_PREFIX}}/"><img src="{{ROUTE_PREFIX}}/static/image/logo-white.svg"/></a></div> <div class="menu-items"> {% if is_institution_coordinator %} <a href="{{ROUTE_PREFIX}}/manage-institution">Upravljaj z ekipo</a> {% endif %} {% if is_admin %} <a href="{{ROUTE_PREFIX}}/admin">Administracijski meni</a> {% endif %} <a href="https://slovenscina.eu/" target="_blank">Več informacij o sodelovanju</a> <a href="{{ROUTE_PREFIX}}/logout">Odjava</a> </div> </header> <div class="container" style="margin-top:8rem;"> <div class="row"> <div class="col-12"> <h1 class="title">Korpus Šolar</h1> <p class="subtitle"></p> <div class="tab-nav"> <a href="{{ROUTE_PREFIX}}/oddaja">Oddaja besedil</a> <a href="{{ROUTE_PREFIX}}/zgodovina">Zgodovina sodelovanja</a> <a href="{{ROUTE_PREFIX}}/pogodbe" class="active">Ekipa</a> </div> </div> </div> <!--<div class="row"> <div class="col-12"> <h2>Sodelujoči</h2> </div> </div>--> <div class="row"> <div class="col-6"> <h2>Sodelujoči</h2> {% for u in institution_users %} <div class="team-item"> <div class="team-item-name">{{u.name}} <span class="team-item-role">{{role_map[u.id]}}</span></div> </div> {% endfor %} <h2 style="margin-top:2rem">Zgodovina sprememb</h2> {% for item in cooperation_history %} <div class="team-item"> <div class="team-item-name"> {{item.name}} <span class="team-item-role" style="margin-left:0">{{item.timestamp.strftime('%d.%m.%Y')}} postane {% if item.role == "coordinator"%}koordinator/-ka{% elif item.role == "mentor" %}mentor/-ica{% elif item.role == "other" %}druga vloga{% endif %}</span> </div> </div> {% endfor %} </div> <div class="col-6"> <div id="my_dataviz_title"> <h2>Število oddaj na uporabnika</h2> <div id="my_dataviz"></div> </div> <div id="my_dataviz__region_title"> <h2>Število vseh oddaj po regijah</h2> <div id="my_dataviz_region"> </div> <div> <div style="display:inline-block;width:12px;height:12px;background:#006CB7"></div> <p style="display:inline-block">Osnovne šole</p> <div style="margin-left:32px;display:inline-block;width:12px;height:12px;background:#B86D00"></div> <p style="display:inline-block">Srednje šole</p> </div> </div> </div> </div> </div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> </body> <script src="https://d3js.org/d3.v6.js"></script> <style> #my_dataviz .tick line{ visibility:hidden; } #my_dataviz path.domain{ visibility:hidden; } #my_dataviz_region .tick line{ visibility:hidden; } #my_dataviz_region path.domain{ visibility:hidden; } </style> <script> var data; // Parse the Data d3.json("/topuploads-institution/{{institution_id}}").then(function(jsondata) { if(Object.keys(jsondata).length < 1) { document.getElementById("my_dataviz_title").remove(); return; } data = []; console.log(Object.keys(jsondata).length); var margin = {top: 20, right: 0, bottom: 40, left: 0}; var width = document.getElementById("my_dataviz").clientWidth - margin.left - margin.right; var height = Object.keys(jsondata).length * 56; var svg = d3.select("#my_dataviz") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("overflow","visible") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); for(var key in jsondata) { data.push({'name': key, 'value':jsondata[key]}); } console.log(data); // Add X axis var x = d3.scaleLinear() .domain([0,d3.max(data, function (d) { return d.value})]) .range([ 0, width]); svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)/*.ticks(5)*/) .selectAll("text") .style("text-anchor", "center"); // Y axis var y = d3.scaleBand() .range([ 0, data.length*56 ]) .domain(data.map(function(d) { return d.name; })) .padding(0); svg.append("g") .call(d3.axisLeft(y)) .selectAll("text") .style("text-anchor", "start") .style("font-size", "14px") .attr("transform", "translate(8,-36)"); //Bars svg.selectAll("myRect") .data(data) .enter() .append("rect") .attr("x", x(0) ) .attr("y", function(d) { return y(d.name); }) .attr("width", function(d) { return x(d.value); }) .attr("height", 32 ) .attr("fill", "#006CB7"); }) </script> <script> var data; // Parse the Data d3.json("/uploadstats-per-region").then(function(jsondata) { data = []; console.log(Object.keys(jsondata).length); var margin = {top: 20, right: 0, bottom: 40, left: 0}; var width = document.getElementById("my_dataviz_region").clientWidth - margin.left - margin.right; var height = Object.keys(jsondata).length * 56; var svg = d3.select("#my_dataviz_region") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("overflow","visible") .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); for(var key in jsondata) { data.push({'name': key, 'value':jsondata[key]}); } console.log(data); // Add X axis var x = d3.scaleLinear() .domain([0,d3.max(data, function (d) { return Math.max(...d.value)})]) .range([ 0, width]); svg.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .selectAll("text") .style("text-anchor", "center"); // Y axis var y = d3.scaleBand() .range([ 0, data.length*56 ]) .domain(data.map(function(d) { return d.name; })) .padding(0); svg.append("g") .call(d3.axisLeft(y)) .selectAll("text") .style("text-anchor", "start") .style("font-size", "14px") .attr("transform", "translate(8,-36)"); //Bars svg.selectAll("myRect") .data(data) .enter() .append("rect") .attr("x", x(0) ) .attr("y", function(d) { return y(d.name); }) .attr("width", function(d) { return x(d.value[0]); }) .attr("height", 16 ) .attr("fill", "#006CB7"); svg.selectAll("myRect") .data(data) .enter() .append("rect") .attr("x", x(0) ) .attr("y", function(d) { return y(d.name); }) .attr("width", function(d) { return x(d.value[1]); }) .attr("height", 16 ) .attr("transform", "translate(0,16)") .attr("fill", "#B86D00"); }) </script> </html>