gatherer/assets/hour_graph.js: round curves for relevant period
This commit is contained in:
parent
f7ebb08274
commit
470012a005
|
@ -15,14 +15,24 @@
|
||||||
var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="';
|
var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="';
|
||||||
svg += [0, 0, W, H].join(" ");
|
svg += [0, 0, W, H].join(" ");
|
||||||
svg += '" preserveAspectRatio="none" width="100%" height="100%">';
|
svg += '" preserveAspectRatio="none" width="100%" height="100%">';
|
||||||
svg += '<path d="M 0 '+H+' L ';
|
svg += '<path d="M 0 '+H;
|
||||||
svg += hours.map(function(count, j) {
|
var x0 = 0;
|
||||||
|
var y0 = H * (0.05 + 0.95 * (1 - hours[0] / max));
|
||||||
|
svg += ' L 0,' + y0;
|
||||||
|
for(var j = 1; j < hours.length; j++) {
|
||||||
var x = W * j / (hours.length - 1);
|
var x = W * j / (hours.length - 1);
|
||||||
var y = H * (0.05 + 0.95 * (1 - count / max));
|
var y = H * (0.05 + 0.95 * (1 - hours[j] / max));
|
||||||
return [x, y].join(",");
|
if (y < H) {
|
||||||
}).join(" L ");
|
console.log("xy", x, y, ' Q ' + x + ',' + y0 + ' ' + x0 + ',' + y + ' ' + x + ',' + y);
|
||||||
|
}
|
||||||
|
var cx = (x0 + x) / 2;
|
||||||
|
svg += ' C ' + cx + ',' + y0 + ' ' + cx + ',' + y + ' ' + x + ',' + y;
|
||||||
|
x0 = x;
|
||||||
|
y0 = y;
|
||||||
|
}
|
||||||
svg += ' L '+W+','+H+' z" stroke="#5582E0" stroke-width="1.5" stroke-linejoin="round" fill="#5582E0"/>';
|
svg += ' L '+W+','+H+' z" stroke="#5582E0" stroke-width="1.5" stroke-linejoin="round" fill="#5582E0"/>';
|
||||||
svg += '</svg>';
|
svg += '</svg>';
|
||||||
|
console.log(svg)
|
||||||
|
|
||||||
var graphContainer = document.createElement("p");
|
var graphContainer = document.createElement("p");
|
||||||
graphContainer.className = "graph";
|
graphContainer.className = "graph";
|
||||||
|
|
|
@ -1,4 +1,8 @@
|
||||||
use std::{net::SocketAddr, collections::HashMap};
|
use std::{
|
||||||
|
collections::HashMap,
|
||||||
|
ops::Deref,
|
||||||
|
net::SocketAddr,
|
||||||
|
};
|
||||||
use askama::Template;
|
use askama::Template;
|
||||||
use axum::{
|
use axum::{
|
||||||
async_trait,
|
async_trait,
|
||||||
|
|
|
@ -44,12 +44,12 @@
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
{% for ((_until, _period, result), title) in results.iter().zip(["Now", "Today", "This week"]) %}
|
{% for ((_until, period, result), title) in results.iter().zip(["Now", "Today", "This week"]) %}
|
||||||
<article>
|
<article>
|
||||||
<h2>{{ title }}</h2>
|
<h2>{{ title }}</h2>
|
||||||
{% for (score, tag) in result %}
|
{% for (score, tag) in result %}
|
||||||
<section data-images="{{ tag_images.get(tag.name).unwrap() }}">
|
<section data-images="{{ tag_images.get(tag.name).unwrap() }}">
|
||||||
<div class="title" data-hours="{{ tag.hour_scores_data(2 * 24) }}">
|
<div class="title" data-hours="{{ tag.hour_scores_data(4 * period.deref()) }}">
|
||||||
<h3>{{ tag.spelling() }}</h3>
|
<h3>{{ tag.spelling() }}</h3>
|
||||||
<p class="score">{{ format!("{}{:.0}%", if *score > 1. { "+" } else { "" }, 100. * *score - 100.) }}</p>
|
<p class="score">{{ format!("{}{:.0}%", if *score > 1. { "+" } else { "" }, 100. * *score - 100.) }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user