Refactor charts component (#295)

Reviewed-on: #295

assets/charts/abiturdurchschnitte.js

@@ -0,0 +1,86 @@
+import * as json from "./abiturdurchschnitte.json";
+
+(() => {
+  const data = json.abiturdurchschnitte;
+  var dom = document.getElementById("chart-container");
+  // @ts-ignore
+  var chart = echarts.init(dom, null, {
+    renderer: "canvas",
+    useDirtyRect: false,
+    locale: "DE",
+  });
+  const option = {
+    title: {
+      text: "Abiturdurchschnitte",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    xAxis: {
+      data: data.map((item) => item["jahr"]),
+    },
+    yAxis: {
+      min: 1.0,
+      inverse: true,
+    },
+    toolbox: {
+      right: 10,
+      feature: {
+        dataZoom: {
+          yAxisIndex: "none",
+        },
+        restore: {},
+        saveAsImage: {},
+      },
+    },
+    dataZoom: [
+      {
+        startValue: "1992",
+      },
+      {
+        type: "inside",
+      },
+    ],
+    visualMap: {
+      top: 50,
+      right: 10,
+      precision: 1,
+      pieces: [
+        {
+          gt: 1.0,
+          lte: 1.5,
+          color: "#06511c",
+        },
+        {
+          gt: 1.5,
+          lte: 2.0,
+          color: "#0b9834",
+        },
+        {
+          gt: 2.0,
+          lte: 2.5,
+          color: "#10df4c",
+        },
+      ],
+      outOfRange: {
+        color: "#999",
+      },
+    },
+    series: {
+      name: "Abiturdurchschnitt",
+      type: "line",
+      data: data.map((item) => item["schnitt"]),
+      markLine: {
+        silent: true,
+        lineStyle: {
+          color: "#333",
+        },
+        data: [1.25, 1.5, 1.75, 2.0, 2.25].map(n => ({ yAxis: n })),
+      },
+    },
+  };
+  if (option && typeof option === "object") {
+    chart.setOption(option);
+  }
+  window.addEventListener("resize", chart.resize);
+})();

assets/charts/schuelerzahlen.js

@@ -0,0 +1,125 @@
+import * as json from "./schuelerzahlen.json";
+
+(() => {
+  const data = json.schuelerzahlen;
+  var dom = document.getElementById("chart-container");
+  // @ts-ignore
+  var chart = echarts.init(dom, null, {
+    renderer: "canvas",
+    useDirtyRect: false,
+    locale: "DE",
+  });
+  const option = {
+    title: {
+      text: "Schülerzahlen",
+    },
+    tooltip: {
+      trigger: "axis",
+      axisPointer: {
+        type: "shadow",
+      },
+      formatter: (params) => {
+        var lines = params.map(
+          (p) => `<b>${p.seriesName}:</b> ${p.value}${p.seriesName == "Anteil Mädchen" ? "%" : ""}`
+        );
+        return lines.join("<br>");
+      },
+    },
+    xAxis: {
+      data: data.map((item) => item["year"]),
+    },
+    yAxis: [
+      {
+        min: 0,
+        inverse: false,
+      },
+      {
+        min: 0,
+        max: 100,
+        axisLabel: {
+          formatter: "{value}%",
+        },
+      },
+    ],
+    toolbox: {
+      right: 10,
+      feature: {
+        dataZoom: {
+          yAxisIndex: "none",
+        },
+        restore: {},
+        saveAsImage: {},
+      },
+    },
+    dataZoom: [
+      {
+        startValue: "1988",
+      },
+      {
+        type: "inside",
+      },
+    ],
+    series: [
+      {
+        name: "Jungen",
+        type: "bar",
+        stack: "total",
+        color: "#7099dc",
+        data: data.map((item) => item["all"] - item["girls"]),
+        markLine: {
+          silent: true,
+          lineStyle: {
+            color: "#333",
+          },
+          data: [100, 300, 500].map((n) => ({ yAxis: n })),
+        },
+      },
+      {
+        name: "Mädchen",
+        type: "bar",
+        color: "#ff6a6a",
+        stack: "total",
+        data: data.map((item) => item["girls"]),
+        markLine: {
+          silent: true,
+          lineStyle: {
+            color: "#333",
+          },
+          data: [100, 300, 500].map((n) => ({ yAxis: n })),
+        },
+      },
+      {
+        name: "Insgesamt",
+        color: "#98e17f",
+        type: "line",
+        data: data.map((item) => item["all"]),
+        lineStyle: {
+          normal: {
+            width: 0,
+          },
+        },
+        symbolSize: 0,
+        markLine: {
+          silent: true,
+          lineStyle: {
+            color: "#333",
+          },
+          data: [100, 300, 500].map((n) => ({ yAxis: n })),
+        },
+      },
+      {
+        name: "Anteil Mädchen",
+        type: "line",
+        color: "#4b4b4b",
+        yAxisIndex: 1,
+        data: data.map((item) => ((item["girls"] / item["all"]) * 100).toFixed(2)),
+      },
+    ],
+  };
+
+  if (option && typeof option === "object") {
+    chart.setOption(option);
+  }
+
+  window.addEventListener("resize", chart.resize);
+})();

assets/js/echarts-locale.js

@@ -0,0 +1,123 @@
+// @ts-ignore
+echarts.registerLocale("DE", {
+  time: {
+    month: [
+      "Januar",
+      "Februar",
+      "März",
+      "April",
+      "Mai",
+      "Juni",
+      "Juli",
+      "August",
+      "September",
+      "Oktober",
+      "November",
+      "Dezember",
+    ],
+    monthAbbr: ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dez"],
+    dayOfWeek: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"],
+    dayOfWeekAbbr: ["So", "Mo", "Di", "Mi", "Do", "Fr", "Sa"],
+  },
+  legend: {
+    selector: {
+      all: "Alle",
+      inverse: "Invertiert",
+    },
+  },
+  toolbox: {
+    brush: {
+      title: {
+        rect: "Box Auswahl",
+        polygon: "Lasso Auswahl",
+        lineX: "Horizontale Auswahl",
+        lineY: "Vertikale Auswahl",
+        keep: "Bereich Auswahl",
+        clear: "Auswahl zurücksetzen",
+      },
+    },
+    dataView: {
+      title: "Daten Ansicht",
+      lang: ["Daten Ansicht", "Schließen", "Aktualisieren"],
+    },
+    dataZoom: {
+      title: {
+        zoom: "Zoom",
+        back: "Zoom zurücksetzen",
+      },
+    },
+    magicType: {
+      title: {
+        line: "Zu Liniendiagramm wechseln",
+        bar: "Zu Balkendiagramm wechseln",
+        stack: "Stapel",
+        tiled: "Kachel",
+      },
+    },
+    restore: {
+      title: "Wiederherstellen",
+    },
+    saveAsImage: {
+      title: "Als Bild speichern",
+      lang: ["Rechtsklick zum Speichern des Bildes"],
+    },
+  },
+  series: {
+    typeNames: {
+      pie: "Tortendiagramm",
+      bar: "Balkendiagramm",
+      line: "Liniendiagramm",
+      scatter: "Streudiagramm",
+      effectScatter: "Welligkeits-Streudiagramm",
+      radar: "Radar-Karte",
+      tree: "Baum",
+      treemap: "Baumkarte",
+      boxplot: "Boxplot",
+      candlestick: "Kerzenständer",
+      k: "K Liniendiagramm",
+      heatmap: "Heatmap",
+      map: "Karte",
+      parallel: "Parallele Koordinatenkarte",
+      lines: "Liniendiagramm",
+      graph: "Beziehungsgrafik",
+      sankey: "Sankey-Diagramm",
+      funnel: "Trichterdiagramm",
+      gauge: "Meßanzeige",
+      pictorialBar: "Bildlicher Balken",
+      themeRiver: "Thematische Flusskarte",
+      sunburst: "Sonnenausbruch",
+    },
+  },
+  aria: {
+    general: {
+      withTitle: 'Dies ist ein Diagramm über "{title}"',
+      withoutTitle: "Dies ist ein Diagramm",
+    },
+    series: {
+      single: {
+        prefix: "",
+        withName: " mit Typ {seriesType} namens {seriesName}.",
+        withoutName: " mit Typ {seriesType}.",
+      },
+      multiple: {
+        prefix: ". Es besteht aus {seriesCount} Serienzählung.",
+        withName: " Die Serie {seriesId} ist ein {seriesType} welcher {seriesName} darstellt.",
+        withoutName: " Die {seriesId}-Reihe ist ein {seriesType}.",
+        separator: {
+          middle: "",
+          end: "",
+        },
+      },
+    },
+    data: {
+      allData: "Die Daten sind wie folgt: ",
+      partialData: "Die ersten {displayCnt} Elemente sind: ",
+      withName: "die Daten für {name} sind {value}",
+      withoutName: "{value}",
+      separator: {
+        middle: ",",
+        end: ".",
+      },
+    },
+  },
+});

assets/js/script.js

@@ -1,33 +1,33 @@
 (($) => {
-  'use strict';
+  "use strict";
 
   // adapt header to height
-  function adaptHeight () {
-    var height = $('.top-header').innerHeight();
-    if ($('header').offset().top > 10) {
-      $('.top-header').addClass('hide');
-      $('.navigation').addClass('nav-bg');
-      $('.navigation').css('margin-top','-'+height+'px');
+  function adaptHeight() {
+    var height = $(".top-header").innerHeight();
+    if ($("header").offset().top > 10) {
+      $(".top-header").addClass("hide");
+      $(".navigation").addClass("nav-bg");
+      $(".navigation").css("margin-top", "-" + height + "px");
     } else {
-      $('.top-header').removeClass('hide');
-      if ( !$('#top-banner').length) {
-        $('.navigation').removeClass('nav-bg');
+      $(".top-header").removeClass("hide");
+      if (!$("#top-banner").length) {
+        $(".navigation").removeClass("nav-bg");
       }
-      $('.navigation').css('margin-top','-'+0+'px');
+      $(".navigation").css("margin-top", "-" + 0 + "px");
     }
   }
 
   // load scripts
-  $(window).on('load', function() {
-    $('.preloader').fadeOut(100);
+  $(window).on("load", function () {
+    $(".preloader").fadeOut(100);
     adaptHeight();
-    if ($('#top-banner').length) {
-      $('.navigation').addClass('nav-bg');
-      $('.hero-section').addClass('hs-banner');
-      $('.page-title-section').addClass('pts-banner');
+    if ($("#top-banner").length) {
+      $(".navigation").addClass("nav-bg");
+      $(".hero-section").addClass("hs-banner");
+      $(".page-title-section").addClass("pts-banner");
     } else {
-      $('.hero-section').removeClass('hs-banner');
-      $('.page-title-section').removeClass('pts-banner');
+      $(".hero-section").removeClass("hs-banner");
+      $(".page-title-section").removeClass("pts-banner");
     }
   });
 
@@ -35,105 +35,121 @@
   $(window).scroll(adaptHeight);
 
   // hero slider
-  $('.hero-slider').slick({
+  $(".hero-slider").slick({
     autoplay: true,
     autoplaySpeed: 5000,
     pauseOnFocus: false,
     pauseOnHover: true,
     infinite: true,
     arrows: true,
-    prevArrow: '<button type=\'button\' class=\'prevArrow\'><svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-left" class="arrowIcon" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg></button>',
-    nextArrow: '<button type=\'button\' class=\'nextArrow\'><svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-left" class="arrowIcon" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg></button>',
-    dots: true
+    prevArrow:
+      '<button type=\'button\' class=\'prevArrow\'><svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-left" class="arrowIcon" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg></button>',
+    nextArrow:
+      '<button type=\'button\' class=\'nextArrow\'><svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-left" class="arrowIcon" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg></button>',
+    dots: true,
   });
 
   // venobox popup
-  $(document).ready(function() {
+  $(document).ready(function () {
+    // @ts-ignore
     new VenoBox({
-      selector: '.vb-video',
-      spinner: 'grid'
+      selector: ".vb-video",
+      spinner: "grid",
     });
+    // @ts-ignore
     new VenoBox({
-      selector: '.vb-gallery',
+      selector: ".vb-gallery",
       numeration: true,
       infinigall: true,
       share: true,
-      shareStyle: 'block',
-      spinner: 'grid',
+      shareStyle: "block",
+      spinner: "grid",
       fitView: true,
       navTouch: true,
     });
   });
 
   // filter
-  $(document).ready(function() {
-    if ($('.filter-container').length != 0) {
-      const shuffleInstance = new Shuffle($('.filter-container'), {
-        itemSelector: '.filter-item',
-        sizer: '.filter-sizer',
-        delimiter: ',',
-        isCentered: true
+  $(document).ready(function () {
+    if ($(".filter-container").length != 0) {
+      // @ts-ignore
+      const shuffleInstance = new Shuffle($(".filter-container"), {
+        itemSelector: ".filter-item",
+        sizer: ".filter-sizer",
+        delimiter: ",",
+        isCentered: true,
       });
-      $('.filter-controls li').on('click', function() {
-        $('.filter-controls li').removeClass('active');
-        $(this).addClass('active');
-        shuffleInstance.filter($(this).data('filter'))
+      $(".filter-controls li").on("click", function () {
+        $(".filter-controls li").removeClass("active");
+        $(this).addClass("active");
+        shuffleInstance.filter($(this).data("filter"));
       });
     }
   });
 
   // counter
-  $(window).on('scroll', function() {
-    var oTop;
-    if ($('.count').length !== 0) {
-      oTop = $('.count').offset().top - window.innerHeight;
+  $(window).on("scroll", function () {
+    var oTop = 0;
+    if ($(".count").length !== 0) {
+      oTop = $(".count").offset().top - window.innerHeight;
     }
     if ($(window).scrollTop() > oTop) {
-      $('.count').each(function() {
-        var $this = $(this), countTo = $this.attr('data-count');
+      $(".count").each(function () {
+        var $this = $(this),
+          countTo = $this.attr("data-count");
         $({ countNum: $this.text() }).animate(
           { countNum: countTo },
           {
             duration: 1000,
-            easing: 'swing',
-            step: function() { return $this.text(Math.floor(this.countNum)) },
-            complete: function() { return $this.text(this.countNum) },
-          });
+            easing: "swing",
+            step: function () {
+              return $this.text(Math.floor(this.countNum));
+            },
+            complete: function () {
+              return $this.text(this.countNum);
+            },
+          }
+        );
       });
     }
   });
 
-  $(window).on('DOMContentLoaded', function() {
-    if (window.PagefindUI != undefined) {
-      new window.PagefindUI({
-        element: "#search",
-        translations: {
-          placeholder: "Suchen...",
-          zero_results: "Leider konnten keine Ergebnisse zu [SEARCH_TERM] gefunden werden",
-          clear_search: "Löschen"
-        }
-      });
+  $(window).on("DOMContentLoaded", function () {
+    // @ts-ignore
+    new PagefindUI({
+      element: "#search",
+      translations: {
+        placeholder: "Suchen...",
+        zero_results: "Leider konnten keine Ergebnisse zu [SEARCH_TERM] gefunden werden",
+        clear_search: "Löschen",
+      },
+    });
 
-      $('#pagefind-search').on('shown.bs.modal', function() {
-        $('.pagefind-ui__search-input').focus();
-      });
-    }
+    $("#pagefind-search").on("shown.bs.modal", function () {
+      $(".pagefind-ui__search-input").focus();
+    });
   });
 
   // enable matomo analytics
-  var _paq = window._paq = window._paq || [];
+  // @ts-ignore
+  var _paq = (window._paq = window._paq || []);
   _paq.push(["setDoNotTrack", true]);
   _paq.push(["disableCookies"]);
-  _paq.push(['trackPageView']);
-  _paq.push(['enableLinkTracking']);
-  (function() {
-    var u="https://analytics.cantorgymnasium.de/";
-    _paq.push(['setTrackerUrl', u+'matomo.php']);
-    _paq.push(['setSiteId', '1']);
-    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
-    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
+  _paq.push(["trackPageView"]);
+  _paq.push(["enableLinkTracking"]);
+  (function () {
+    var u = "https://analytics.cantorgymnasium.de/";
+    _paq.push(["setTrackerUrl", u + "matomo.php"]);
+    _paq.push(["setSiteId", "1"]);
+    var d = document,
+      g = d.createElement("script"),
+      s = d.getElementsByTagName("script")[0];
+    g.async = true;
+    g.src = u + "matomo.js";
+    s.parentNode.insertBefore(g, s);
   })();
 
+  // @ts-ignore
   new LazyLoad();
-  
+  // @ts-ignore
 })(jQuery);

assets/jsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "checkJs": true,
+    "resolveJsonModule": true,
+    "lib": ["ES2015", "DOM"],
+    "baseUrl": ".",
+    "paths": {
+      "*": ["*"]
+    }
+  }
+}

config.yml

@@ -287,3 +287,5 @@ privacy:
 module:
   imports:
     - path: github.com/hugomods/icons/vendors/mdi
+build:
+  noJSConfigInAssets: true

content/chronikseiten/abiturdurchschnitte.md

@@ -11,233 +11,4 @@ aliases:
   - /schulchronik/pages/abiturdurchschnitte
 ---
 
-<script src="https://assets.cantorgymnasium.de/echarts/v5/echarts.min.js"></script>
-<div id="chart-container"></div>
-<script>
-  var dom = document.getElementById("chart-container");
-  echarts.registerLocale("DE", {
-    time: {
-        month: [
-            'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
-            'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
-        ],
-        monthAbbr: [
-            'Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun',
-            'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'
-        ],
-        dayOfWeek: [
-            'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'
-        ],
-        dayOfWeekAbbr: [
-            'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'
-        ]
-    },
-    legend: {
-        selector: {
-            all: 'Alle',
-            inverse: 'Invertiert'
-        }
-    },
-    toolbox: {
-        brush: {
-            title: {
-                rect: 'Box Auswahl',
-                polygon: 'Lasso Auswahl',
-                lineX: 'Horizontale Auswahl',
-                lineY: 'Vertikale Auswahl',
-                keep: 'Bereich Auswahl',
-                clear: 'Auswahl zurücksetzen'
-            }
-        },
-        dataView: {
-            title: 'Daten Ansicht',
-            lang: ['Daten Ansicht', 'Schließen', 'Aktualisieren']
-        },
-        dataZoom: {
-            title: {
-                zoom: 'Zoom',
-                back: 'Zoom zurücksetzen'
-            }
-        },
-        magicType: {
-            title: {
-                line: 'Zu Liniendiagramm wechseln',
-                bar: 'Zu Balkendiagramm wechseln',
-                stack: 'Stapel',
-                tiled: 'Kachel'
-            }
-        },
-        restore: {
-            title: 'Wiederherstellen'
-        },
-        saveAsImage: {
-            title: 'Als Bild speichern',
-            lang: ['Rechtsklick zum Speichern des Bildes']
-        }
-    },
-    series: {
-        typeNames: {
-            pie: 'Tortendiagramm',
-            bar: 'Balkendiagramm',
-            line: 'Liniendiagramm',
-            scatter: 'Streudiagramm',
-            effectScatter: 'Welligkeits-Streudiagramm',
-            radar: 'Radar-Karte',
-            tree: 'Baum',
-            treemap: 'Baumkarte',
-            boxplot: 'Boxplot',
-            candlestick: 'Kerzenständer',
-            k: 'K Liniendiagramm',
-            heatmap: 'Heatmap',
-            map: 'Karte',
-            parallel: 'Parallele Koordinatenkarte',
-            lines: 'Liniendiagramm',
-            graph: 'Beziehungsgrafik',
-            sankey: 'Sankey-Diagramm',
-            funnel: 'Trichterdiagramm',
-            gauge: 'Meßanzeige',
-            pictorialBar: 'Bildlicher Balken',
-            themeRiver: 'Thematische Flusskarte',
-            sunburst: 'Sonnenausbruch'
-        }
-    },
-    aria: {
-        general: {
-            withTitle: 'Dies ist ein Diagramm über "{title}"',
-            withoutTitle: 'Dies ist ein Diagramm'
-        },
-        series: {
-            single: {
-                prefix: '',
-                withName: ' mit Typ {seriesType} namens {seriesName}.',
-                withoutName: ' mit Typ {seriesType}.'
-            },
-            multiple: {
-                prefix: '. Es besteht aus {seriesCount} Serienzählung.',
-                withName: ' Die Serie {seriesId} ist ein {seriesType} welcher {seriesName} darstellt.',
-                withoutName: ' Die {seriesId}-Reihe ist ein {seriesType}.',
-                separator: {
-                    middle: '',
-                    end: ''
-                }
-            }
-        },
-        data: {
-            allData: 'Die Daten sind wie folgt: ',
-            partialData: 'Die ersten {displayCnt} Elemente sind: ',
-            withName: 'die Daten für {name} sind {value}',
-            withoutName: '{value}',
-            separator: {
-                middle: ',',
-                end: '.'
-            }
-        }
-    }
-});
-  var chart = echarts.init(dom, null, {
-    renderer: "canvas",
-    useDirtyRect: false,
-    locale: "DE"
-  });
-  var option;
-  jQuery.get("/data/abiturdurchschnitte.json",
-    function (data) {
-      chart.setOption(
-        (option = {
-          title: {
-            text: "Abiturdurchschnitte",
-          },
-          tooltip: {
-            trigger: "axis"
-          },
-          xAxis: {
-            data: data['abiturdurchschnitte'].map(function (item) {
-              return item['jahr'];
-            })
-          },
-          yAxis: {
-            min: 1.0,
-            inverse: true
-          },
-          toolbox: {
-            right: 10,
-            feature: {
-              dataZoom: {
-                yAxisIndex: "none"
-              },
-              restore: {},
-              saveAsImage: {}
-            }
-          },
-          dataZoom: [
-            {
-              startValue: "1992"
-            },
-            {
-              type: "inside"
-            }
-          ],
-          visualMap: {
-            top: 50,
-            right: 10,
-            precision: 1,
-            pieces: [
-              {
-                gt: 1.0,
-                lte: 1.5,
-                color: "#06511c",
-              },
-              {
-                gt: 1.5,
-                lte: 2.0,
-                color: "#0b9834"
-              },
-              {
-                gt: 2.0,
-                lte: 2.5,
-                color: "#10df4c"
-              }
-            ],
-            outOfRange: {
-              color: "#999"
-            }
-          },
-          series: {
-            name: "Abiturdurchschnitt",
-            type: "line",
-            data: data['abiturdurchschnitte'].map(function (item) {
-              return item['schnitt'];
-            }),
-            markLine: {
-              silent: true,
-              lineStyle: {
-                color: "#333"
-              },
-              data: [
-                {
-                  yAxis: 1.25
-                },
-                {
-                  yAxis: 1.5
-                },
-                {
-                  yAxis: 1.75
-                },
-                {
-                  yAxis: 2.0
-                },
-                {
-                  yAxis: 2.25
-                }
-              ]
-            }
-          }
-        })
-      );
-    }
-  );
-  if (option && typeof option === "object") {
-    chart.setOption(option);
-  }
-  window.addEventListener("resize", chart.resize);
-</script>
+{{< chart id="abiturdurchschnitte" >}}

content/chronikseiten/schuelerzahlen.md

@@ -5,289 +5,5 @@ type: pages
 aliases:
   - /schulchronik/pages/schülerzahlen
 ---
-<script src="https://assets.cantorgymnasium.de/echarts/v5/echarts.min.js"></script>
 
-<div id="chart-container"></div>
-<script>
-  var dom = document.getElementById("chart-container");
-  echarts.registerLocale("DE", {
-    time: {
-        month: [
-            'Januar', 'Februar', 'März', 'April', 'Mai', 'Juni',
-            'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'
-        ],
-        monthAbbr: [
-            'Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun',
-            'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'
-        ],
-        dayOfWeek: [
-            'Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'
-        ],
-        dayOfWeekAbbr: [
-            'So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa'
-        ]
-    },
-    legend: {
-        selector: {
-            all: 'Alle',
-            inverse: 'Invertiert'
-        }
-    },
-    toolbox: {
-        brush: {
-            title: {
-                rect: 'Box Auswahl',
-                polygon: 'Lasso Auswahl',
-                lineX: 'Horizontale Auswahl',
-                lineY: 'Vertikale Auswahl',
-                keep: 'Bereich Auswahl',
-                clear: 'Auswahl zurücksetzen'
-            }
-        },
-        dataView: {
-            title: 'Daten Ansicht',
-            lang: ['Daten Ansicht', 'Schließen', 'Aktualisieren']
-        },
-        dataZoom: {
-            title: {
-                zoom: 'Zoom',
-                back: 'Zoom zurücksetzen'
-            }
-        },
-        magicType: {
-            title: {
-                line: 'Zu Liniendiagramm wechseln',
-                bar: 'Zu Balkendiagramm wechseln',
-                stack: 'Stapel',
-                tiled: 'Kachel'
-            }
-        },
-        restore: {
-            title: 'Wiederherstellen'
-        },
-        saveAsImage: {
-            title: 'Als Bild speichern',
-            lang: ['Rechtsklick zum Speichern des Bildes']
-        }
-    },
-    series: {
-        typeNames: {
-            pie: 'Tortendiagramm',
-            bar: 'Balkendiagramm',
-            line: 'Liniendiagramm',
-            scatter: 'Streudiagramm',
-            effectScatter: 'Welligkeits-Streudiagramm',
-            radar: 'Radar-Karte',
-            tree: 'Baum',
-            treemap: 'Baumkarte',
-            boxplot: 'Boxplot',
-            candlestick: 'Kerzenständer',
-            k: 'K Liniendiagramm',
-            heatmap: 'Heatmap',
-            map: 'Karte',
-            parallel: 'Parallele Koordinatenkarte',
-            lines: 'Liniendiagramm',
-            graph: 'Beziehungsgrafik',
-            sankey: 'Sankey-Diagramm',
-            funnel: 'Trichterdiagramm',
-            gauge: 'Meßanzeige',
-            pictorialBar: 'Bildlicher Balken',
-            themeRiver: 'Thematische Flusskarte',
-            sunburst: 'Sonnenausbruch'
-        }
-    },
-    aria: {
-        general: {
-            withTitle: 'Dies ist ein Diagramm über "{title}"',
-            withoutTitle: 'Dies ist ein Diagramm'
-        },
-        series: {
-            single: {
-                prefix: '',
-                withName: ' mit Typ {seriesType} namens {seriesName}.',
-                withoutName: ' mit Typ {seriesType}.'
-            },
-            multiple: {
-                prefix: '. Es besteht aus {seriesCount} Serienzählung.',
-                withName: ' Die Serie {seriesId} ist ein {seriesType} welcher {seriesName} darstellt.',
-                withoutName: ' Die {seriesId}-Reihe ist ein {seriesType}.',
-                separator: {
-                    middle: '',
-                    end: ''
-                }
-            }
-        },
-        data: {
-            allData: 'Die Daten sind wie folgt: ',
-            partialData: 'Die ersten {displayCnt} Elemente sind: ',
-            withName: 'die Daten für {name} sind {value}',
-            withoutName: '{value}',
-            separator: {
-                middle: ',',
-                end: '.'
-            }
-        }
-    }
-});
-  var chart = echarts.init(dom, null, {
-    renderer: "canvas",
-    useDirtyRect: false,
-    locale: "DE"
-  });
-  var option;
-  jQuery.get("/data/schuelerzahlen.json",
-    function (data) {
-      chart.setOption(
-        (option = {
-          title: {
-            text: "Schülerzahlen",
-          },
-          tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-              // Use axis to trigger tooltip
-              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
-            },
-            formatter: function (params, ticket, callback) {
-              var output = "";
-              params.forEach(function(param) {
-                output = output + "<b>" + param.seriesName + ":</b> " + param.value + (param.seriesName == "Anteil Mädchen" ? "%" : "") + "<br>";
-              });
-              return output;
-            }
-          },
-          xAxis: {
-            data: data['schuelerzahlen'].map(function (item) {
-              return item['year'];
-            })
-          },
-          yAxis: [{
-            min: 0,
-            inverse: false
-          }, {
-            min: 0,
-            max: 100,
-            axisLabel: {
-              formatter: '{value}%'
-            }
-          }],
-          toolbox: {
-            right: 10,
-            feature: {
-              dataZoom: {
-                yAxisIndex: "none"
-              },
-              restore: {},
-              saveAsImage: {}
-            }
-          },
-          dataZoom: [
-            {
-              startValue: "1988"
-            },
-            {
-              type: "inside"
-            }
-          ],
-          series: [{
-            name: "Jungen",
-            type: "bar",
-            stack: "total",
-            color: "#7099dc",
-            data: data['schuelerzahlen'].map(function (item) {
-              return item['all'] - item['girls'];
-            }),
-            markLine: {
-              silent: true,
-              lineStyle: {
-                color: "#333"
-              },
-              data: [
-                {
-                  yAxis: 100
-                },
-                {
-                  yAxis: 300
-                },
-                {
-                  yAxis: 500
-                }
-              ]
-            },
-          },
-          {
-            name: "Mädchen",
-            type: "bar",
-            color: "#ff6a6a",
-            stack: "total",
-            data: data['schuelerzahlen'].map(function (item) {
-              return item['girls'];
-            }),
-            markLine: {
-              silent: true,
-              lineStyle: {
-                color: "#333"
-              },
-              data: [
-                {
-                  yAxis: 100
-                },
-                {
-                  yAxis: 300
-                },
-                {
-                  yAxis: 500
-                }
-              ]
-            }
-          },
-          {
-            name: "Insgesamt",
-            color: "#98e17f",
-            type: "line",
-            data: data['schuelerzahlen'].map(function (item) {
-              return item['all'];
-            }),
-            lineStyle: {
-              normal: {
-                width: 0,
-              }
-            },
-            symbolSize: 0,
-            markLine: {
-              silent: true,
-              lineStyle: {
-                color: "#333"
-              },
-              data: [
-                {
-                  yAxis: 100
-                },
-                {
-                  yAxis: 300
-                },
-                {
-                  yAxis: 500
-                }
-              ],
-            }
-          },
-          {
-            name: "Anteil Mädchen",
-            type: "line",
-            color: "#4b4b4b",
-            yAxisIndex: 1,
-            data: data['schuelerzahlen'].map(function (item) {
-              return (item['girls']/item['all']*100).toFixed(2);;
-            }),
-          }
-          ]
-        })
-      );
-    }
-  );
-  if (option && typeof option === "object") {
-    chart.setOption(option);
-  }
-  window.addEventListener("resize", chart.resize);
-</script>
+{{< chart id="schuelerzahlen" >}}

layouts/kontakt/list.html

@@ -57,7 +57,7 @@
     var marker = L.marker([51.473361, 11.965619]).addTo(map);
 
     map.on('click', (e) => {
-        marker.bindPopup('Georg-Cantor-Gymnasium<br>Torstraße 13<br>06110 Halle (Saale)<br><b><a href="https://www.qwant.com/maps/place/osm:way:54033279@Georg-Cantor-Gymnasium">Route</a>').openPopup();
+        marker.bindPopup('Georg-Cantor-Gymnasium<br>Torstraße 13<br>06110 Halle (Saale)<br><b><a href="https://maps.app.goo.gl/T4ZroWsAdoXM3xdn7">Route</a>').openPopup();
     });
   </script>
 </div>

layouts/schulchronik/single.html

@@ -27,7 +27,7 @@
       <div class="card d-flex flex-row flex-wrap-reverse">
         <div class="flex-grow card-body min-w-0">
           <a href="{{ .Permalink }}"><h3 class="card-title">{{ .Title }}</h3></a>
-          {{ range (resources.Get "data/abiturdurchschnitte.json" | transform.Unmarshal).abiturdurchschnitte  }}
+          {{ range (resources.Get "charts/abiturdurchschnitte.json" | transform.Unmarshal).abiturdurchschnitte  }}
             {{ if eq (string .jahr) $.Title }}<a href="/chronikseiten/abiturdurchschnitte" class="h4 card-text">Abiturdurchschnitt: {{ .schnitt }}</a>{{ end }}
           {{ end }}
         </div>

layouts/shortcodes/chart.html

@@ -0,0 +1,14 @@
+{{ with .Get "id" }}
+  {{ $chartId := . }}
+  <script src="https://assets.cantorgymnasium.de/echarts/v5/echarts.min.js"></script>
+
+  {{ with resources.Get "js/echarts-locale.js" | resources.Minify }}
+    <script src="{{ .Permalink }}"></script>
+  {{ end }}
+
+  <div id="chart-container"></div>
+
+  {{ with resources.Get (print "charts/" $chartId ".js") | js.Build | resources.Minify }}
+    <script src="{{ .Permalink }}"></script>
+  {{ end }}
+{{ end }}

static/admin/config/collections/stats.js

@@ -12,7 +12,7 @@ const StatsCollection = {
     {
       name: "abiturdurchschnitte",
       label: "Abiturdurchschnitte",
-      file: "assets/data/abiturdurchschnitte.json",
+      file: "assets/charts/abiturdurchschnitte.json",
       fields: [
         {
           name: "abiturdurchschnitte",
@@ -43,7 +43,7 @@ const StatsCollection = {
     {
       name: "schuelerzahlen",
       label: "Schülerzahlen",
-      file: "assets/data/schuelerzahlen.json",
+      file: "assets/charts/schuelerzahlen.json",
       fields: [
         {
           name: "schuelerzahlen",