Skip to content

Commit

Permalink
yea this is good, ship it
Browse files Browse the repository at this point in the history
  • Loading branch information
@hexylena
hexylena committed Dec 19, 2024
1 parent 947e035 commit 4f4f719
Show file tree
Hide file tree
Showing 2 changed files with 260 additions and 23 deletions.
246 changes: 226 additions & 20 deletions _layouts/community.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,32 +10,62 @@ <h1>{{ topic.title }} Community Home</h1>

This is a new, experimental "Community Home" for a given topic. It is intended to highlight community contributions over the years to a topic!

{% assign prio = "news events learning-pathways tutorials slides recordings faqs workflows grants organisations" | split:" " %}
{% assign prio = "news events learning-pathways tutorials slides recordings faqs workflows grants organisations contributors" | split:" " %}
<style>
:root {
{%- for p in prio -%}
--stat-box-color-{{ p }}: hsl({{ forloop.index | times: 40 }}, 100%, 85%);
{%- endfor -%}
}
</style>

{% assign topic_material_by_years = site | list_topic_materials_yearly:topic.name %}
{% assign cumulative_counts_by_years = site | count_topic_materials_yearly:topic.name %}

{% for year in topic_material_by_years %}
<div class="row">
<div class="col-md-2">
<h2>{{ year[0] }}</h2>
<p>New community members!</p>
{% for c in year[1]['contributors'] %}
{% assign cid = c[2].title | regex_replace_once: '@', '' %}
{% include _includes/contributor-badge-inline.html id=cid %}
{% endfor %}
<div class="col-md-6">
<figure>
<canvas id="materials-over-time" height="250"></canvas>
<figcaption>Materials Over Time</figcaption>
</figure>
</div>
<div class="col-md-6">
<figure>
<canvas id="contributors-over-time" height="250"></canvas>
<figcaption>Contributors Over Time</figcaption>
</figure>
</div>
<div class="col-md-6">
<figure>
<canvas id="workflows-over-time" height="250"></canvas>
<figcaption>workflows Over Time</figcaption>
</figure>
</div>
<div class="col-md-6">
<figure>
<canvas id="other-over-time" height="250"></canvas>
<figcaption>Other Contributions Over Time</figcaption>
</figure>
</div>
</div>

{% for year in topic_material_by_years %}
<div class="row">
<div class="col-md-12">
<hgroup>
<h2 class="year">{{ year[0] }} Year in Review</h2>
<p>So many new additions to our community!</p>
</hgroup>
</div>
<div class="col-md-10">
<div class="col-md-4">
<div class="row">
{% for p in prio %}
{% if year[1][p] %}
{% assign group = year[1][p] %}
<div class="col-sm-3 col-md-3">
<div class="stat-box" style="background:hsl({{ forloop.index | times: 40 }}, 100%, 80%)">
<div class="col-sm-3 col-md-6">
<div class="stat-box" style="--stat-box-color: var(--stat-box-color-{{ p }});">
{% assign group_len = group | size %}
<div class="title">
{{ group_len }}
</div>
<div class="title">{{ group_len }}</div>
<div class="subtitle">
{{ p | regex_replace: '-', ' ' | titlecase }}
</div>
Expand All @@ -44,14 +74,15 @@ <h2>{{ year[0] }}</h2>
{% endif %}
{% endfor %}
</div>

</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-12">

{% for p in prio %}
{% if year[1][p] %}
{% assign group = year[1][p] %}

<h3>{{ p | titlecase }}</h3>
<ul>
{% for resource in group %}
Expand All @@ -62,21 +93,196 @@ <h3>{{ p | titlecase }}</h3>
{% endfor %}
</div>
</div>

</div>

</div>
{% endfor %}

<h2>Cumulative Data as CSV</h2>
<pre>
year,{% for point in cumulative_counts_by_years['tutorials'] %}{{ point.x | regex_replace:'-.*', '' }}{%unless forloop.last%},{%endunless%}{% endfor %}
{% for p in prio %}{{ p }},{% for point in cumulative_counts_by_years[p] %}{{ point.y }}{%unless forloop.last%},{%endunless%}{% endfor %}
{% endfor %}

</pre>




<style>
.stat-box {
text-align: center;
border: 1px solid var(--border);
border: 2px solid var(--border);
margin: 0.25em;
padding: 0.5em;
background: var(--stat-box-color);
}

body[data-brightness="dark"] .stat-box {
background: none;
border: 2px solid var(--stat-box-color);
}

figure {
margin: 0.25em;
padding: 0.25em;

figcaption {
text-align: center;
}
}

.stat-box .title {
font-size: 250%;
font-size: 300%;
font-weight: 900;
}
.year {
font-size: 500%;
margin: 0;
padding: 0;
}
</style>

<!-- use chart.js for graphs -->
<script src="{% link assets/js/Chart.bundle.js %}"></script>

<script>
const style = getComputedStyle(document.body);
const totals = {{ cumulative_counts_by_years | jsonify }};

const options = {
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}],
xAxes: [{
type: 'time',
time: {
displayFormats:{month:'YYYY'},
unit: 'year',
distribution: 'linear'
}
}]
},
legend: {
display: true
},
}

function getStyleDarker(type, darker){
if (darker) {
return style.getPropertyValue(`--stat-box-color-${type}`).replaceAll('85%', '50%');
} else {
return style.getPropertyValue(`--stat-box-color-${type}`);
}
}


new Chart('materials-over-time', {
type: 'line',
data: {
datasets: [
{
data: totals.slides,
label: 'Slides',
borderColor: getStyleDarker("slides", true),
backgroundColor: getStyleDarker("slides", false),
},
{
data: totals.tutorials,
label: 'Tutorials',
borderColor: getStyleDarker("tutorials", true),
backgroundColor: getStyleDarker("tutorials", false),
},
]
},
options: options
});

new Chart('contributors-over-time', {
type: 'line',
data: {
datasets: [
{
data: totals.contributors,
label: 'Contributors',
borderColor: getStyleDarker("contributors", true),
backgroundColor: getStyleDarker("contributors", false),
},
{
data: totals.grants,
label: 'Grants',
borderColor: getStyleDarker("grants", true),
backgroundColor: getStyleDarker("grants", false),
},
{
data: totals.organisations,
label: 'Organisations',
borderColor: getStyleDarker("organisations", true),
backgroundColor: getStyleDarker("organisations", false),
},
]
},
options: options
});

new Chart('workflows-over-time', {
type: 'line',
data: {
datasets: [
{
data: totals.workflows,
label: 'Workflows',
borderColor: getStyleDarker("workflows", true),
backgroundColor: getStyleDarker("workflows", false),
},
]
},
options: options
});

new Chart('other-over-time', {
type: 'line',
data: {
datasets: [
{
data: totals.news,
label: 'news',
borderColor: getStyleDarker("news", true, true),
backgroundColor: getStyleDarker("news", true, false),
backgroundColor: getStyleDarker("news", false),
},
{
data: totals.events,
label: 'events',
borderColor: getStyleDarker("events", true),
backgroundColor: getStyleDarker("events", false),
},
{
data: totals['learning-pathways'],
label: 'learning-pathways',
borderColor: getStyleDarker("learning-pathways", true),
backgroundColor: getStyleDarker("learning-pathways", false),
},
{
data: totals.recordings,
label: 'recordings',
borderColor: getStyleDarker("recordings", true),
backgroundColor: getStyleDarker("recordings", false),
},
{
data: totals.faqs,
label: 'faqs',
borderColor: getStyleDarker("faqs", true),
backgroundColor: getStyleDarker("faqs", false),
},
]
},
options: options
});


</script>
37 changes: 34 additions & 3 deletions _plugins/jekyll-topic-filter.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,13 @@
require './_plugins/util'
require 'securerandom'

class Array
def cumulative_sum
sum = 0
self.map{|x| sum += x}
end
end

module Gtn
# The main GTN module to parse tutorial.md and slides.html and topics into useful lists of things that can be shown on topic pages, i.e. "materials" (a possible combination of tutorial + slides)
#
Expand Down Expand Up @@ -1255,8 +1262,13 @@ def self.list_materials_by_tool(site)
# "slides",
# #<Jekyll::Page @relative_path="topics/single-cell/tutorials/scrna-plates-batches-barcodes/slides.html">,
# ["single-cell"]]]

def self.all_date_sorted_resources(site)
cache.getset('all_date_sorted_resources') do
self._all_date_sorted_resources(site)
end
end

def self._all_date_sorted_resources(site)
events = site.pages.select { |x| x['layout'] == 'event' || x['layout'] == 'event-external' }
materials = list_all_materials(site).reject { |k, _v| k['draft'] }
news = site.posts.select { |x| x['layout'] == 'news' }
Expand Down Expand Up @@ -1542,14 +1554,33 @@ def list_topic_materials_yearly(site, topic_name)
years = flat_mats.map{|x| x['pub_date'].year} + flat_mats.map{|x| x['mod_date'].year}
topic_contribs = identify_contributors({'topic' => {'materials' => flat_mats}}, site)

# Should cache this really.
Gtn::TopicFilter.all_date_sorted_resources(site)
.select{|x| (x[3].include? 'single-cell') || (x[1] == 'contributors' && topic_contribs.include?(x[2].title[1..]))}
.select{|x| (x[3].include? topic_name) || (x[1] == 'contributors' && topic_contribs.include?(x[2].title[1..]))}
.group_by{|x| x[0].year}
.map{|k, v| [k, v.group_by{|z| z[1]}]}
.to_h
end

def count_topic_materials_yearly(site, topic_name)
flat_mats = list_materials_flat(site, topic_name)
years = flat_mats.map{|x| x['pub_date'].year} + flat_mats.map{|x| x['mod_date'].year}
topic_contribs = identify_contributors({'topic' => {'materials' => flat_mats}}, site)

r = Gtn::TopicFilter.all_date_sorted_resources(site)
.select{|x| (x[3].include? topic_name) || (x[1] == 'contributors' && topic_contribs.include?(x[2].title[1..]))}
.map{|x| [x[0].year, x[1]]} # Only need year + type
.group_by{|x| x[1]} # Group by type.
.map{|k, v| [k, v.map{|vv| vv[0]}.tally]}
.to_h

years = (2015..Date.today.year).to_a
# Fill in zeros for missing years
r.map{|k, v| [k, years.map{|y| v[y] || 0}
.cumulative_sum
.map.with_index{|value, i| {"y" => value, "x" => "#{years[i]}-01-01"}}]
}.to_h
end

def list_all_tags(site)
Gtn::TopicFilter.list_all_tags(site)
end
Expand Down

0 comments on commit 4f4f719

Please sign in to comment.