spending and revenue tables

This commit is contained in:
itten
2026-08-02 13:09:39 +03:00
parent cdbadd3afb
commit 243fc7d509
4 changed files with 436 additions and 0 deletions
+11
View File
@@ -0,0 +1,11 @@
Команда,Доходы(млн),Затраты(млн),Разница(млн)
«Астон Вилла»,"226,5","105,5",121
«Ньюкасл»,188,"130,5","57,5"
«Спортинг»,"151,35","101,28","50,07"
«Челси»,"132,3","282,7","-150,4"
«Фрайбург»,"87,15",36,"51,15"
«Тоттенхэм»,"81,5",267,"-185,5"
«Брайтон»,"81,2","126,4","-45,2"
«Айнтрахт»,"75,2","21,3","53,9"
«Брюгге»,"69,5","13,45","56,05"
«Ренн»,"68,3","32,3",36
1 Команда Доходы(млн) Затраты(млн) Разница(млн)
2 «Астон Вилла» 226,5 105,5 121
3 «Ньюкасл» 188 130,5 57,5
4 «Спортинг» 151,35 101,28 50,07
5 «Челси» 132,3 282,7 -150,4
6 «Фрайбург» 87,15 36 51,15
7 «Тоттенхэм» 81,5 267 -185,5
8 «Брайтон» 81,2 126,4 -45,2
9 «Айнтрахт» 75,2 21,3 53,9
10 «Брюгге» 69,5 13,45 56,05
11 «Ренн» 68,3 32,3 36
+21
View File
@@ -0,0 +1,21 @@
Команда,Затраты(млн),Доходы(млн),Разница(млн)
«Челси»,"282,7","132,3","-150,4"
«Тоттенхэм»,267,"81,5","-185,5"
«Манчестер Сити»,"175,2","23,17","-152,03"
«Ньюкасл»,"130,5",188,"57,5"
«Брайтон»,"126,4","81,2","-45,2"
«Милан»,"107,35","44,5","-62,85"
«Астон Вилла»,"105,5","226,5",121
«Ливерпуль»,"103,6",0,"-103,6"
«Бавария»,"103,45","34,75","-68,7"
«Атлетико»,102,1,-101
«Барселона»,102,14,-88
«Спортинг»,"101,28","151,35","50,07"
«Ипсвич Таун»,"98,65","8,17","-90,48"
«Манчестер Юнайтед»,"97,3",44,"-53,3"
«Фиорентина»,"90,5","10,55","-79,95"
«Фенербахче»,"81,17",0,"-81,17"
«Арсенал»,80,38,-42
ФК «Париж»,"79,5",0,"-79,5"
«Реал»,75,"7,5","-67,5"
«Аль-Ахли»,"71,26",0,"-71,26"
1 Команда Затраты(млн) Доходы(млн) Разница(млн)
2 «Челси» 282,7 132,3 -150,4
3 «Тоттенхэм» 267 81,5 -185,5
4 «Манчестер Сити» 175,2 23,17 -152,03
5 «Ньюкасл» 130,5 188 57,5
6 «Брайтон» 126,4 81,2 -45,2
7 «Милан» 107,35 44,5 -62,85
8 «Астон Вилла» 105,5 226,5 121
9 «Ливерпуль» 103,6 0 -103,6
10 «Бавария» 103,45 34,75 -68,7
11 «Атлетико» 102 1 -101
12 «Барселона» 102 14 -88
13 «Спортинг» 101,28 151,35 50,07
14 «Ипсвич Таун» 98,65 8,17 -90,48
15 «Манчестер Юнайтед» 97,3 44 -53,3
16 «Фиорентина» 90,5 10,55 -79,95
17 «Фенербахче» 81,17 0 -81,17
18 «Арсенал» 80 38 -42
19 ФК «Париж» 79,5 0 -79,5
20 «Реал» 75 7,5 -67,5
21 «Аль-Ахли» 71,26 0 -71,26
+204
View File
@@ -0,0 +1,204 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920, initial-scale=1">
<title>Top 10 — Revenue</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@font-face { font-family: 'ONY One'; src: local('ONY One Regular'), url('file:///home/itten/.local/share/fonts/ONYOne-Regular.otf') format('opentype'); font-weight: 400; }
@font-face { font-family: 'ONY One'; src: local('ONY One Medium'), url('file:///home/itten/.local/share/fonts/ONYOne-Medium.otf') format('opentype'); font-weight: 500; }
@font-face { font-family: 'ONY One'; src: local('ONY One Bold'), url('file:///home/itten/.local/share/fonts/ONYOne-Bold.otf') format('opentype'); font-weight: 700; }
:root {
--bg: #222524;
--white: #FFFFFF;
--neutral: #919292;
--accent: #91FF55;
--negative: #F8F700;
--row-alt: #2A2D2C;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 1920px;
height: 1080px;
background: var(--bg);
overflow: hidden;
font-family: 'ONY One', 'Arial Narrow', sans-serif;
-webkit-font-smoothing: antialiased;
}
.frame {
position: relative;
width: 1920px;
height: 1080px;
display: flex;
align-items: center;
justify-content: center;
}
.table-wrapper {
width: fit-content;
max-width: 1730px;
position: relative;
margin: 0 auto;
}
.table-title {
font-size: 48px;
font-weight: 700;
text-transform: uppercase;
color: var(--white);
text-align: center;
margin-bottom: 28px;
letter-spacing: 3px;
}
.table-header {
display: grid;
grid-template-columns: 80px auto 80px 160px 160px 160px;
align-items: center;
border-bottom: 3px solid var(--white);
padding-bottom: 16px;
margin-bottom: 8px;
}
.header-cell {
font-size: 28px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
color: var(--neutral);
letter-spacing: 1px;
}
.header-cell.left { text-align: left; }
.header-cell.right { text-align: right; }
.table-row {
display: grid;
grid-template-columns: 80px auto 80px 160px 160px 160px;
align-items: center;
height: 72px;
transition: background 0.2s;
}
.table-row:nth-child(even) {
background: var(--row-alt);
}
.col-rank {
font-size: 32px;
font-weight: 700;
color: var(--neutral);
text-align: center;
}
.col-team {
font-size: 32px;
font-weight: 500;
color: var(--white);
padding-left: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col-val {
font-size: 28px;
font-weight: 500;
color: var(--white);
text-align: right;
padding-right: 24px;
white-space: nowrap;
}
.col-diff {
font-size: 28px;
font-weight: 700;
text-align: right;
padding-right: 24px;
white-space: nowrap;
}
.diff-positive { color: var(--accent); }
.diff-negative { color: var(--negative); }
.diff-zero { color: var(--neutral); }
</style>
</head>
<body>
<div class="frame">
<div class="table-wrapper">
<div class="table-title">Топ-10 команд по доходам</div>
<div class="table-header">
<div class="header-cell"></div>
<div class="header-cell left">Команда</div>
<div></div>
<div class="header-cell right">Доходы</div>
<div class="header-cell right">Затраты</div>
<div class="header-cell right">Разница</div>
</div>
<div id="rows"></div>
</div>
</div>
<script>
var CSV_URL = "top-10-teams-by-revenue.csv";
function parseCSV(text) {
var lines = text.trim().split(/\r?\n/);
var result = [];
for (var i = 1; i < lines.length; i++) {
var line = lines[i].trim();
if (!line) continue;
var fields = [];
var cur = "", inQ = false;
for (var j = 0; j < line.length; j++) {
var ch = line[j];
if (ch === '"') inQ = !inQ;
else if (ch === ',' && !inQ) { fields.push(cur.trim()); cur = ""; }
else cur += ch;
}
fields.push(cur.trim());
if (fields.length >= 4) result.push({
team: fields[0], income: fields[1], spend: fields[2], diff: fields[3]
});
}
return result;
}
function fmt(val) {
return val;
}
function diffClass(val) {
var n = parseFloat(val.replace(",", ".").replace("«", "").replace("»", ""));
if (isNaN(n) || n === 0) return "diff-zero";
return n > 0 ? "diff-positive" : "diff-negative";
}
function buildRow(idx, row) {
return '<div class="table-row">' +
'<div class="col-rank">' + (idx + 1) + '</div>' +
'<div class="col-team">' + row.team + '</div>' +
'<div></div>' +
'<div class="col-val">' + row.income + '</div>' +
'<div class="col-val">' + row.spend + '</div>' +
'<div class="col-diff ' + diffClass(row.diff) + '">' + row.diff + '</div>' +
'</div>';
}
fetch(CSV_URL)
.then(function (r) { return r.text(); })
.then(function (text) {
var data = parseCSV(text);
document.getElementById("rows").innerHTML =
data.map(function (row, i) { return buildRow(i, row); }).join("");
console.log("Loaded " + data.length + " rows");
})
.catch(function (e) { console.error("Failed to load CSV", e); });
</script>
</body>
</html>
+200
View File
@@ -0,0 +1,200 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1920, initial-scale=1">
<title>Top 20 — Spending</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<style>
@font-face { font-family: 'ONY One'; src: local('ONY One Regular'), url('file:///home/itten/.local/share/fonts/ONYOne-Regular.otf') format('opentype'); font-weight: 400; }
@font-face { font-family: 'ONY One'; src: local('ONY One Medium'), url('file:///home/itten/.local/share/fonts/ONYOne-Medium.otf') format('opentype'); font-weight: 500; }
@font-face { font-family: 'ONY One'; src: local('ONY One Bold'), url('file:///home/itten/.local/share/fonts/ONYOne-Bold.otf') format('opentype'); font-weight: 700; }
:root {
--bg: #222524;
--white: #FFFFFF;
--neutral: #919292;
--accent: #91FF55;
--negative: #F8F700;
--row-alt: #2A2D2C;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 1920px;
height: 1080px;
background: var(--bg);
overflow: hidden;
font-family: 'ONY One', 'Arial Narrow', sans-serif;
-webkit-font-smoothing: antialiased;
}
.frame {
position: relative;
width: 1920px;
height: 1080px;
display: flex;
align-items: center;
justify-content: center;
}
.table-wrapper {
width: fit-content;
max-width: 1730px;
position: relative;
margin: 0 auto;
}
.table-title {
font-size: 40px;
font-weight: 700;
text-transform: uppercase;
color: var(--white);
text-align: center;
margin-bottom: 20px;
letter-spacing: 3px;
}
.table-header {
display: grid;
grid-template-columns: 70px auto 80px 150px 150px 150px;
align-items: center;
border-bottom: 3px solid var(--white);
padding-bottom: 12px;
margin-bottom: 6px;
}
.header-cell {
font-size: 24px;
font-weight: 700;
text-transform: uppercase;
text-align: center;
color: var(--neutral);
letter-spacing: 1px;
}
.header-cell.left { text-align: left; }
.header-cell.right { text-align: right; }
.table-row {
display: grid;
grid-template-columns: 70px auto 80px 150px 150px 150px;
align-items: center;
height: 40px;
transition: background 0.2s;
}
.table-row:nth-child(even) {
background: var(--row-alt);
}
.col-rank {
font-size: 24px;
font-weight: 700;
color: var(--neutral);
text-align: center;
}
.col-team {
font-size: 26px;
font-weight: 500;
color: var(--white);
padding-left: 24px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.col-val {
font-size: 24px;
font-weight: 500;
color: var(--white);
text-align: right;
padding-right: 24px;
white-space: nowrap;
}
.col-diff {
font-size: 24px;
font-weight: 700;
text-align: right;
padding-right: 24px;
white-space: nowrap;
}
.diff-positive { color: var(--accent); }
.diff-negative { color: var(--negative); }
.diff-zero { color: var(--neutral); }
</style>
</head>
<body>
<div class="frame">
<div class="table-wrapper">
<div class="table-title">Топ-20 команд по затратам</div>
<div class="table-header">
<div class="header-cell"></div>
<div class="header-cell left">Команда</div>
<div></div>
<div class="header-cell right">Затраты</div>
<div class="header-cell right">Доходы</div>
<div class="header-cell right">Разница</div>
</div>
<div id="rows"></div>
</div>
</div>
<script>
var CSV_URL = "top-20-teams-by-spending.csv";
function parseCSV(text) {
var lines = text.trim().split(/\r?\n/);
var result = [];
for (var i = 1; i < lines.length; i++) {
var line = lines[i].trim();
if (!line) continue;
var fields = [];
var cur = "", inQ = false;
for (var j = 0; j < line.length; j++) {
var ch = line[j];
if (ch === '"') inQ = !inQ;
else if (ch === ',' && !inQ) { fields.push(cur.trim()); cur = ""; }
else cur += ch;
}
fields.push(cur.trim());
if (fields.length >= 4) result.push({
team: fields[0], spend: fields[1], income: fields[2], diff: fields[3]
});
}
return result;
}
function diffClass(val) {
var n = parseFloat(val.replace(",", ".").replace("«", "").replace("»", "").replace("-", ""));
if (isNaN(n) || n === 0) return "diff-zero";
return val.indexOf("-") !== -1 ? "diff-negative" : "diff-positive";
}
function buildRow(idx, row) {
return '<div class="table-row">' +
'<div class="col-rank">' + (idx + 1) + '</div>' +
'<div class="col-team">' + row.team + '</div>' +
'<div></div>' +
'<div class="col-val">' + row.spend + '</div>' +
'<div class="col-val">' + row.income + '</div>' +
'<div class="col-diff ' + diffClass(row.diff) + '">' + row.diff + '</div>' +
'</div>';
}
fetch(CSV_URL)
.then(function (r) { return r.text(); })
.then(function (text) {
var data = parseCSV(text);
document.getElementById("rows").innerHTML =
data.map(function (row, i) { return buildRow(i, row); }).join("");
console.log("Loaded " + data.length + " rows");
})
.catch(function (e) { console.error("Failed to load CSV", e); });
</script>
</body>
</html>