Merge branch leon-redesign

templates/solar-pogodbe.html

@@ -177,8 +177,19 @@
         {% endfor %}
             </div>
         </div>
-    </div>-->
+        <div class="row">
+            <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>
+    </div>-->
 
 
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
@@ -341,7 +352,83 @@
         </div>#}-->
 </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>
-    
+    // set the dimensions and margins of the graph
+
+
+    // append the svg object to the body of the page
+
+    var data;
+    // Parse the Data
+    d3.json("/topuploads-by-user/").then(function(jsondata) {
+        if(Object.keys(jsondata).length < 1) {
+            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>