Refactor charts component #295

Merged
Denys Konovalov merged 2 commits from refactor-charts into main 2024-09-19 20:26:43 +02:00
14 changed files with 458 additions and 594 deletions

@ -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);
})();

@ -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);
})();

123
assets/js/echarts-locale.js Normal file

@ -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: ".",
},
},
},
});

@ -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);

11
assets/jsconfig.json Normal file

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

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

@ -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" >}}

@ -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" >}}

@ -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>

@ -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>

@ -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 }}

@ -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",