<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Portal za oddajanje besedil</title> <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 institucijo</a> {% endif %} {% if is_admin %} <a href="{{ROUTE_PREFIX}}/admin">Administracijski meni</a> {% endif %} <a href="https://slovenscina.eu/" target="_blank">Več informacij</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" id="my_dataviz_title"> <div class="col-12"> <h2>Število oddaj na uporabnika</h2> </div> </div> <div class="row"> <div class="col-6"> <div id="my_dataviz"> </div> </div> </div> {% set vars = {'prev_schoolyear': ''} %} {% for item in cooperation_history %} {% if item[0] != vars.prev_schoolyear %} <div class="row"> <div class="col-12"> <h2>Šolsko leto {{item[0]}}</h2> </div> </div> {% if vars.update({'prev_schoolyear': item[0]}) %} {% endif %} {% endif %} {% for entry in item[1] %} <div class="row"> <div class="col-6"> <div class="team-item"> <div class="team-item-name">{{entry.name}} <span class="team-item-role">{%if entry.role == "mentor" %}Mentor/-ica{%elif entry.role == "coordinator" %}Koordinator/-ica{%elif entry.role == "other" %}Druga vloga{%endif%}</span></div> </div> </div> </div> {% endfor %} {% endfor %} </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; } </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)) .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> </html>