Finished statistics

assets/js/chart.js

@@ -58,7 +58,7 @@ async function loadCSVFromURL(url) {
   }
 }
 
-function chart(csvFile, element) {
+function chart(csvFile, element, options) {
   if (element.startsWith('#')) {
     element = element.substring(1);
   }
@@ -77,7 +77,7 @@ function chart(csvFile, element) {
     const seriesData = [];
     let colorIndex = 0;
     const blogs = new Set(Object.keys(data).map((key) => { return Object.keys(data[key])[0] }));
-    //WTF for in won't work with Sets and only itereates over array index, JS is stupid as shit
+    //WTF: `for in` won't work with Sets and only itereates over array index, JS is stupid as shit
     for (const blog of [...blogs]) {
       seriesData.push({
         name: blog,
@@ -94,41 +94,55 @@ function chart(csvFile, element) {
       colorIndex++;
     }
 
-    var option = {
+    var chartOptions = {
       color: colors,
       legend: {
-        type: 'scroll',
-        orient: 'horizontal',
-        right: 10,
-        left: 10,
-        top: 10,
+        right: '15%',
+        left: '15%',
+        top: 5,
         data: seriesData.map(series => series.name)
       },
       tooltip: {
         trigger: 'item',
         formatter: '{a} <br/>{b}: <b>{c}</b>'
       },
       grid: {
-        left: 0,
+        left: 56,
         right: 0,
-        top: 0
+        top: 20,
+        bottom: '10%'
       },
       xAxis: {
         type: 'category',
         data: xAxisData,
-        label: "Date"
+        label: "Date",
+        axisLabel: {
+          formatter: value => {
+            return new Date('2001-4').toLocaleString('default', { year: "numeric", month: "short"});
+          },
+          align: 'center'
+        }
       },
       yAxis: {
         type: 'value',
+        width: 54,
         label: "Posts",
-        scale: true
+        scale: true,
+        axisLabel: {
+          formatter: '{value} Posts',
+          align: 'center'
+        }
       },
       series: seriesData,
       dataZoom: []
     };
 
+    if (options !== undefined && options != null) {
+      chartOptions = {...chartOptions, ...options};
+    }
+
     var chart = echarts.init(container, null, { renderer: "svg", width: width, height: height});
-    chart.setOption(option);
+    chart.setOption(chartOptions);
   });
 }
 

assets/scss/base.scss

@@ -864,5 +864,7 @@ p.small {
 }
 
 .archive-statistics {
-    display: none;
+    @media (max-width: 36em) {
+        display: none;
+    }
 }

content/archive/_index.en.md

@@ -10,5 +10,5 @@ outputs:
 This page chronologically lists all contributions from the Projektemacher.org blogs.
 
 {{< details summary="Statistical analysis" class="archive-statistics" >}}
-  {{< chart csv="statistics.csv" >}}
+  {{< chart csv="statistics.csv" opts=`{"textStyle": { "fontFamily": "Lato, Helvetica, sans-serif" }}` >}}
 {{< /details >}}

content/archive/_index.md

@@ -10,5 +10,5 @@ outputs:
 Diese Seite listet chronologisch alle Beiträge der Projektemacher.org Blogs.
 
 {{< details summary="Statistische Auswertung" class="archive-statistics" >}}
-  {{< chart csv="statistics.csv" >}}
+  {{< chart csv="statistics.csv" opts=`{"textStyle": { "fontFamily": "Lato, Helvetica, sans-serif" }}` >}}
 {{< /details >}}

layouts/shortcodes/chart.html

@@ -1,6 +1,7 @@
 {{- $ctx := .Page -}}
 
 {{- $csv := "" -}}
+{{- $opts := "null" -}}
 {{- with .Get "csv" -}}
   {{- $csv = . -}}
   {{/*
@@ -10,6 +11,10 @@
   */}}
 {{- end -}}
 
+{{- with .Get "opts" -}}
+  {{- $opts = . -}}
+{{- end -}}
+
 {{- if eq $csv "" -}}
   {{- errorf "[shortcodes/chart.html] No CSV file given for %s" $ctx.RelPermalink -}}
 {{- end -}}
@@ -19,7 +24,7 @@
 <div id="{{ $id }}" class="chart">
 </div>
 <script type="text/javascript">
-  window.chart("{{ $csv }}", "#{{ $id | safeJS }}")
+  window.chart("{{ $csv }}", "#{{ $id | safeJS }}", {{ $opts | safeJS }})
 </script>
 
 {{- define "partials/shortcodes/chart-metadata.html" -}}

package.json

@@ -11,6 +11,7 @@
     "echarts-stat": "^1.2.0",
     "fuse.js": "^7.0.0",
     "jquery": "^3.7.1",
+    "luxon": "^3.5.0",
     "normalize.css": "^8.0.1",
     "ol": "^9.0.0",
     "popper.js": "^1.16.1"