113 lines
3.7 KiB
HTML
113 lines
3.7 KiB
HTML
<!doctype html>
|
|
<title>Welcome To Gavilan College</title>
|
|
{% if name %}
|
|
<h1>iLearn Hits for: {{ name }}</h1>
|
|
<p> <b>canvas id:</b> {{ id }}
|
|
{% else %}
|
|
<h1>Hello, World!</h1>
|
|
{% endif %}
|
|
|
|
<a href="/sd">Shutdown</a>
|
|
<script src='/data/gui/lib/d3.js'></script>
|
|
<script src='/data/gui/lib/lodash.js'></script>
|
|
<script>
|
|
var margin = {top: 20, right: 20, bottom: 70, left: 40},
|
|
|
|
filename= "/data/users/logs/{% if id %}{{ id }}{% else %}241{% endif %}.csv",
|
|
|
|
width = 600 - margin.left - margin.right,
|
|
height = 300 - margin.top - margin.bottom;
|
|
var parseDate = d3.timeParse("%Y-%m-%dT%H:%M:%S%Z") /* 2020-07-13T12:44:54Z,2020-07-13T12:44:54Z */
|
|
var parseDate2 = d3.timeParse("%Y-%m-%d") /* 2020-07-13 */
|
|
|
|
// Parse the date / time
|
|
|
|
var x = d3.scaleTime().range([0, width]);
|
|
var y = d3.scaleLinear().range([height, 0]);
|
|
|
|
var svg = d3.select("body").append("svg")
|
|
.attr("width", width + margin.left + margin.right)
|
|
.attr("height", height + margin.top + margin.bottom)
|
|
.append("g")
|
|
.attr("transform",
|
|
"translate(" + margin.left + "," + margin.top + ")");
|
|
|
|
d3.csv(filename).then(function(data) {
|
|
data.forEach(function(d) {
|
|
d.day = d.created_at.substring(0,10)
|
|
d.date = parseDate(d.created_at);
|
|
d.value = 1;
|
|
});
|
|
|
|
var by_day = d3.nest().key( function(d) { return d.day }).rollup(function(v){return v.length;})
|
|
.entries(data);
|
|
by_day.forEach(function(d) {
|
|
d.key = parseDate2(d.key)
|
|
});
|
|
by_day = by_day.filter(function(d) { return d.key > parseDate2("2020-01-01")} )
|
|
console.log(by_day)
|
|
|
|
// Scale the range of the data
|
|
x.domain(d3.extent(by_day, function(d) { return d.key; }));
|
|
y.domain([0, d3.max(by_day, function(d) { return d.value; })]);
|
|
|
|
// Add the valueline path.
|
|
/*svg.append("path")
|
|
.data([by_day])
|
|
.attr("class", "line")
|
|
.attr("d", valueline);
|
|
*/
|
|
// Add the X Axis
|
|
svg.append("g")
|
|
.attr("class", "axis")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(d3.axisBottom(x)
|
|
.tickFormat(d3.timeFormat("%Y-%m-%d")))
|
|
.selectAll("text")
|
|
.style("text-anchor", "end")
|
|
.attr("dx", "-.8em")
|
|
.attr("dy", ".15em")
|
|
.attr("transform", "rotate(-65)");
|
|
|
|
// Add the Y Axis
|
|
svg.append("g")
|
|
.attr("class", "axis")
|
|
.call(d3.axisLeft(y));
|
|
|
|
/*svg.append("g")
|
|
.attr("class", "x axis")
|
|
.attr("transform", "translate(0," + height + ")")
|
|
.call(xAxis)
|
|
.selectAll("text")
|
|
.style("text-anchor", "end")
|
|
.attr("dx", "-.8em")
|
|
.attr("dy", "-.55em")
|
|
.attr("transform", "rotate(-90)" );
|
|
|
|
svg.append("g")
|
|
.attr("class", "y axis")
|
|
.call(yAxis)
|
|
.append("text")
|
|
.attr("transform", "rotate(-90)")
|
|
.attr("y", 6)
|
|
.attr("dy", ".71em")
|
|
.style("text-anchor", "end")
|
|
.text("Value ($)");
|
|
*/
|
|
svg.selectAll("bar")
|
|
.data(by_day)
|
|
.enter().append("rect")
|
|
.style("fill", "steelblue")
|
|
.attr("x", function(d) { return x(d.key); })
|
|
.attr("width", 10)
|
|
.attr("y", function(d) { return y(d.value); })
|
|
.attr("height", function(d) { console.log(height); console.log(d); console.log(height - y(d.value)); return height - y(d.value); });
|
|
|
|
});
|
|
/*d3.csv("/data/users/logs/241.csv").then(function(data) {
|
|
console.log(data[0]);
|
|
}); */
|
|
|
|
|
|
</script>
|