140 lines
5.4 KiB
HTML
140 lines
5.4 KiB
HTML
{% load static %}
|
|
{% load i18n %}
|
|
{% load l10n %}
|
|
{% load humanize %}
|
|
{% load mastodon %}
|
|
{% load thumb %}
|
|
{% load collection %}
|
|
{% load user_actions %}
|
|
{% get_current_language as LANGUAGE_CODE %}
|
|
<!DOCTYPE html>
|
|
<html lang="{{ LANGUAGE_CODE }}" class="classic-page">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>{{ site_name }} - {{ identity.display_name }} - {{ year }} {% trans "annual summary" %}</title>
|
|
{% include "common_libs.html" %}
|
|
{% comment %} <script src="{{ cdn_url }}/npm/rough-viz@2.0.5/dist/roughviz.umd.min.js"></script> {% endcomment %}
|
|
<script src="{% static 'js/roughviz.umd.js' %}"></script>
|
|
<script src="{{ cdn_url }}/npm/save-svg-as-png@1.4.17/lib/saveSvgAsPng.min.js"></script>
|
|
<style>
|
|
.yAxisviz0, .rough-yAxisviz0 {
|
|
display: none;
|
|
}
|
|
.xAxisviz0 {
|
|
{% comment %} opacity: 0.3; {% endcomment %}
|
|
}
|
|
</style>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Borel&family=Bruno+Ace&family=Caveat&family=Coming+Soon&family=Covered+By+Your+Grace&family=Fondamento&family=Indie+Flower&family=Neucha&family=VT323&display=swap"
|
|
rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
{% include "_header.html" %}
|
|
<main>
|
|
<div class="grid__main">
|
|
<span class="action">
|
|
<span>
|
|
<a onclick="restyle()" title="{% trans 'another style' %}"><i class="fa-solid fa-shuffle"></i></a>
|
|
</span>
|
|
<span>
|
|
<a hx-get="{% url 'journal:wrapped_share' year %}"
|
|
hx-target="body"
|
|
hx-swap="beforeend"
|
|
title="{% trans 'share' %}"><i class="fa-solid fa-share-from-square"></i></a>
|
|
</span>
|
|
<span>
|
|
<a onclick="saveSvgAsPng($('#viz0').children('svg')[0], '{{ year }}-wrapped.png');"
|
|
title="{% trans 'download' %}"><i class="fa-solid fa-download"></i></a>
|
|
</span>
|
|
</span>
|
|
<h5>{{ year }} {% trans "annual summary" %}</h5>
|
|
<div id="viz0" style="max-width: 100%; aspect-ratio: 1 / 1;"></div>
|
|
{{ by_cat|json_script:"cat-data" }}
|
|
{{ monthly|json_script:"mon-data" }}
|
|
{{ data|json_script:"data" }}
|
|
<script>
|
|
fontFamily = "Neucha, cursive";
|
|
var cats = JSON.parse(document.getElementById('cat-data').textContent);
|
|
var data = JSON.parse(document.getElementById('data').textContent);
|
|
var opts = {
|
|
title: "@{{ identity.user.mastodon.handle | default:identity.full_handle }} - {{ year }}",
|
|
element: '#viz0',
|
|
font: 1,
|
|
data: data,
|
|
labels: "Month",
|
|
highlight: "#666",
|
|
stackColorMapping: {
|
|
'📚': '#B4D2A5',
|
|
'🎬': '#7CBDFE',
|
|
'📺': '#FED37C',
|
|
'💿': '#FEA36D',
|
|
'🎮': '#C5A290',
|
|
'🎙️': '#9D6AB0',
|
|
'🎭': '#FE7C7C',
|
|
'x': '#FDDB23',
|
|
},
|
|
roughness: 1,
|
|
fillStyle: 'solid',
|
|
margin: { top: 80, left: 20, right: 20, bottom: 80 },
|
|
stroke: 1,
|
|
padding: 0.2,
|
|
color: 'red',
|
|
strokeWidth: 1,
|
|
axisStrokeWidth: 1,
|
|
innerStrokeWidth: 1,
|
|
fillWeight: 1,
|
|
axisRoughness: 1,
|
|
yLabel:"",
|
|
};
|
|
var viz0 = new roughViz.StackedBar(opts);
|
|
viz0.setTitle = function(title) {
|
|
$('#viz0').children('svg').css("background-color", "#fbfcfc").css("border-radius", "1rem");
|
|
|
|
viz0.svg.append("text")
|
|
.attr("x", viz0.width / 2)
|
|
.attr("y", 0 - viz0.margin.top / 2)
|
|
.attr("class", "title")
|
|
.attr("text-anchor", "middle")
|
|
.style("font-size", 20)
|
|
.style("font-weight", "bold")
|
|
.style("font-family", fontFamily)
|
|
.style("color", "#666")
|
|
.text(title);
|
|
|
|
viz0.svg.append("text")
|
|
.attr("x", viz0.width / 2)
|
|
.attr("y", viz0.height + viz0.margin.top -30)
|
|
.attr("class", "title")
|
|
.attr("text-anchor", "middle")
|
|
.style("font-size", 20)
|
|
.style("font-family", fontFamily)
|
|
.style("color", "#000")
|
|
.text(cats);
|
|
|
|
viz0.svg.append("text")
|
|
.attr("x", viz0.width)
|
|
.attr("y", viz0.height + viz0.margin.top -10)
|
|
.attr("class", "title")
|
|
.attr("text-anchor", "end")
|
|
.style("font-size", 10)
|
|
.style("font-family", fontFamily)
|
|
.style("color", "#666")
|
|
.text("{{ identity.profile_uri }}");
|
|
};
|
|
viz0.boundRedraw();
|
|
function restyle() {
|
|
var font = ["Neucha", "Borel", "Bruno Ace", "Caveat", "Coming Soon", "Covered By Your Grace", "Fondamento", "Indie Flower", "VT323"][Math.floor(Math.random() * 9)];
|
|
fontFamily = font + ", cursive";
|
|
opts.roughness = Math.random()*4;
|
|
opts.fillStyle = ["hachure", "solid", "zigzag", "cross-hatch", "dashed", "zigzag-line"][Math.floor(Math.random() * 6)];
|
|
viz0.redraw(opts);
|
|
}
|
|
</script>
|
|
</div>
|
|
{% include "_sidebar.html" with show_profile=1 %}
|
|
</main>
|
|
{% include "_footer.html" %}
|
|
</body>
|
|
</html>
|