gcg/gcg-website
gcg/gcg-website
1
1
Fork 0
Code Issues 6 Pull Requests Actions Projects 2 Wiki Activity

Refactor charts component (#295)
All checks were successful
Website Prod/Test / Produktivumgebung (push) Successful in 12s
Details
Website Prod/Test / Testumgebung (push) Successful in 8s
Details
Website Pull Request / Pull-Request-Testbuild (pull_request) Successful in 24s
Details

Browse Source 
Reviewed-on: #295
This commit is contained in:
Denys Konovalov
2024-09-19 20:26:42 +02:00
parent c3dbecca67
commit aa7c6de313
14 changed files with 458 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
assets/charts/abiturdurchschnitte.js Normal file
View 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);
})();

128
assets/charts/abiturdurchschnitte.json Normal file
View File

@ -0,0 +1,128 @@
{
"abiturdurchschnitte": [
{
"jahr": 1992,
"schnitt": 1.4
},
{
"jahr": 1993,
"schnitt": 1.5
},
{
"jahr": 1994,
"schnitt": 1.5
},
{
"jahr": 1995,
"schnitt": 1.7
},
{
"jahr": 1996,
"schnitt": 1.7
},
{
"jahr": 1997,
"schnitt": 1.7
},
{
"jahr": 1998,
"schnitt": 2
},
{
"jahr": 2000,
"schnitt": 2.1
},
{
"jahr": 2002,
"schnitt": 1.9
},
{
"jahr": 2003,
"schnitt": 1.8
},
{
"jahr": 2004,
"schnitt": 1.9
},
{
"jahr": 2005,
"schnitt": 1.8
},
{
"jahr": 2006,
"schnitt": 1.7
},
{
"jahr": 2007,
"schnitt": 1.8
},
{
"jahr": 2008,
"schnitt": 1.9
},
{
"jahr": 2009,
"schnitt": 1.7
},
{
"jahr": 2010,
"schnitt": 1.9
},
{
"jahr": 2011,
"schnitt": 2.25
},
{
"jahr": 2012,
"schnitt": 2.09
},
{
"jahr": 2013,
"schnitt": 1.96
},
{
"jahr": 2014,
"schnitt": 1.9
},
{
"jahr": 2015,
"schnitt": 2.02
},
{
"jahr": 2016,
"schnitt": 2
},
{
"jahr": 2017,
"schnitt": 1.91
},
{
"jahr": 2018,
"schnitt": 1.9
},
{
"jahr": 2019,
"schnitt": 1.8
},
{
"jahr": 2020,
"schnitt": 1.9
},
{
"jahr": 2021,
"schnitt": 1.81
},
{
"jahr": 2022,
"schnitt": 1.74
},
{
"jahr": 2023,
"schnitt": 1.9
},
{
"jahr": 2024,
"schnitt": 1.65
}
]
}

125
assets/charts/schuelerzahlen.js Normal file
View 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);
})();

184
assets/charts/schuelerzahlen.json Normal file
View File

@ -0,0 +1,184 @@
{
"schuelerzahlen": [
{
"year": 1988,
"all": 54,
"girls": 11
},
{
"year": 1989,
"all": 101,
"girls": 14
},
{
"year": 1990,
"all": 173,
"girls": 36
},
{
"year": 1991,
"all": 340,
"girls": 70
},
{
"year": 1992,
"all": 397,
"girls": 99
},
{
"year": 1992,
"all": 446,
"girls": 122
},
{
"year": 1994,
"all": 501,
"girls": 133
},
{
"year": 1995,
"all": 523,
"girls": 149
},
{
"year": 1996,
"all": 555,
"girls": 162
},
{
"year": 1997,
"all": 551,
"girls": 163
},
{
"year": 1998,
"all": 526,
"girls": 152
},
{
"year": 1999,
"all": 581,
"girls": 177
},
{
"year": 2000,
"all": 540,
"girls": 168
},
{
"year": 2001,
"all": 595,
"girls": 179
},
{
"year": 2002,
"all": 587,
"girls": 176
},
{
"year": 2003,
"all": 605,
"girls": 186
},
{
"year": 2004,
"all": 618,
"girls": 183
},
{
"year": 2005,
"all": 604,
"girls": 182
},
{
"year": 2006,
"all": 594,
"girls": 175
},
{
"year": 2007,
"all": 519,
"girls": 139
},
{
"year": 2008,
"all": 509,
"girls": 136
},
{
"year": 2009,
"all": 513,
"girls": 135
},
{
"year": 2010,
"all": 509,
"girls": 137
},
{
"year": 2011,
"all": 514,
"girls": 139
},
{
"year": 2012,
"all": 504,
"girls": 132
},
{
"year": 2013,
"all": 524,
"girls": 127
},
{
"year": 2014,
"all": 536,
"girls": 137
},
{
"year": 2015,
"all": 525,
"girls": 139
},
{
"year": 2016,
"all": 527,
"girls": 138
},
{
"year": 2017,
"all": 522,
"girls": 135
},
{
"year": 2018,
"all": 531,
"girls": 138
},
{
"year": 2019,
"all": 537,
"girls": 141
},
{
"year": 2020,
"all": 535,
"girls": 150
},
{
"year": 2021,
"all": 531,
"girls": 145
},
{
"year": 2022,
"all": 535,
"girls": 137
},
{
"year": 2023,
"all": 534,
"girls": 141
}
]
}