Refactor charts component #295
86
assets/charts/abiturdurchschnitte.js
Normal file
86
assets/charts/abiturdurchschnitte.js
Normal file
@ -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);
|
||||
})();
|
125
assets/charts/schuelerzahlen.js
Normal file
125
assets/charts/schuelerzahlen.js
Normal file
@ -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
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
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>
|
||||
|
14
layouts/shortcodes/chart.html
Normal file
14
layouts/shortcodes/chart.html
Normal file
@ -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",
|
||||
|
Loading…
x
Reference in New Issue
Block a user