Code and data for arewedecentralizedyet.online and related projects
Move more into the details dropdown, still needs styling work
+111
-63
+36
-9
www/css/index.css
+36
-9
www/css/index.css
···
73
73
margin-bottom: 4px;
74
74
}
75
75
76
-
.contributors-row {
76
+
.contributors-icon {
77
+
width: 14px;
78
+
height: 14px;
79
+
}
80
+
81
+
.contributors-lists {
77
82
display: grid;
78
-
grid-template-columns: 1fr auto 18px;
79
-
align-items: center;
80
83
gap: 8px;
81
-
padding: 2px 0;
84
+
}
85
+
86
+
.contributors-subtitle {
87
+
text-align: left;
88
+
font-size: 0.9em;
89
+
margin: 4px 0 2px;
82
90
}
83
91
84
-
.contributors-icon {
85
-
width: 14px;
86
-
height: 14px;
92
+
.contributors-table {
93
+
width: 100%;
94
+
border-collapse: collapse;
95
+
table-layout: fixed;
87
96
}
88
97
89
-
.contributors-value {
98
+
.contributors-host {
90
99
text-align: left;
91
100
color: #f7f9fb;
92
101
white-space: nowrap;
···
95
104
}
96
105
97
106
.contributors-delta {
98
-
color: #909296;
107
+
color: #b0b2b6;
99
108
font-size: 0.9em;
100
109
text-align: right;
110
+
padding-left: 8px;
101
111
white-space: nowrap;
112
+
}
113
+
114
+
.contributors-users {
115
+
color: #b0b2b6;
116
+
font-size: 0.9em;
117
+
text-align: right;
118
+
padding-left: 8px;
119
+
white-space: nowrap;
120
+
}
121
+
122
+
.contributors-table td.contributors-host {
123
+
text-align: left;
124
+
}
125
+
126
+
.contributors-table td.contributors-delta,
127
+
.contributors-table td.contributors-users {
128
+
text-align: right;
102
129
}
103
130
104
131
div.rating {
+75
-54
www/index.html
+75
-54
www/index.html
···
90
90
<div id="gageFedi" class="gage"></div>
91
91
<div class="shannon" data-trend="weekly_shannon">
92
92
<div class="index">Shannon Index: <span data-field="shannon"></span></div>
93
-
<div class="trend">Trend (week): <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
94
93
<div class="icon"><img data-trend-icon> <span data-trend-text></span></div>
95
94
<details class="contributors-mini">
96
-
<summary>Top contributors to trend</summary>
97
-
<div class="contributors-row">
98
-
<span class="contributors-value" data-trend-biggest-d></span>
99
-
<span class="contributors-delta" data-trend-biggest-delta-d></span>
100
-
<img class="contributors-icon" src="img/increase.svg" alt="Decentralizer">
101
-
</div>
102
-
<div class="contributors-row">
103
-
<span class="contributors-value" data-trend-biggest-c></span>
104
-
<span class="contributors-delta" data-trend-biggest-delta-c></span>
105
-
<img class="contributors-icon" src="img/decrease.svg" alt="Centralizer">
95
+
<summary>Details</summary>
96
+
<div class="trend">Trend (week): <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
97
+
<div class="contributors-lists">
98
+
<div class="contributors-list">
99
+
<div class="contributors-subtitle">Top decentralizers</div>
100
+
<table class="contributors-table" data-trend-list="increase">
101
+
<tbody></tbody>
102
+
</table>
103
+
</div>
106
104
</div>
107
105
</details>
108
106
</div>
···
122
120
<div id="gageAtmosphere" class="gage"></div>
123
121
<div class="shannon" data-trend="weekly_shannon">
124
122
<div class="index">Shannon Index: <span data-field="shannon"></span></div>
125
-
<div class="trend">Trend (week): <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
126
123
<div class="icon"><img data-trend-icon> <span data-trend-text></span></div>
127
124
<details class="contributors-mini">
128
-
<summary>Top contributors to trend</summary>
129
-
<div class="contributors-row">
130
-
<span class="contributors-value" data-trend-biggest-d></span>
131
-
<span class="contributors-delta" data-trend-biggest-delta-d></span>
132
-
<img class="contributors-icon" src="img/increase.svg" alt="Decentralizer">
133
-
</div>
134
-
<div class="contributors-row">
135
-
<span class="contributors-value" data-trend-biggest-c></span>
136
-
<span class="contributors-delta" data-trend-biggest-delta-c></span>
137
-
<img class="contributors-icon" src="img/decrease.svg" alt="Centralizer">
125
+
<summary>Details</summary>
126
+
<div class="trend">Trend (week): <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
127
+
<div class="contributors-lists">
128
+
<div class="contributors-list">
129
+
<div class="contributors-subtitle">Top decentralizers</div>
130
+
<table class="contributors-table" data-trend-list="increase">
131
+
<tbody></tbody>
132
+
</table>
133
+
</div>
138
134
</div>
139
135
</details>
140
136
</div>
···
203
199
<div id="gageGit" class="gage"></div>
204
200
<div class="shannon" data-trend="weekly_shannon">
205
201
<div class="index">Shannon Index: <span data-field="shannon"></span></div>
206
-
<div class="trend">Trend (week): <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
207
202
<div class="icon"><img data-trend-icon> <span data-trend-text></span></div>
208
203
<details class="contributors-mini">
209
-
<summary>Top contributors to trend</summary>
210
-
<div class="contributors-row">
211
-
<span class="contributors-value" data-trend-biggest-d></span>
212
-
<span class="contributors-delta" data-trend-biggest-delta-d></span>
213
-
<img class="contributors-icon" src="img/increase.svg" alt="Decentralizer">
214
-
</div>
215
-
<div class="contributors-row">
216
-
<span class="contributors-value" data-trend-biggest-c></span>
217
-
<span class="contributors-delta" data-trend-biggest-delta-c></span>
218
-
<img class="contributors-icon" src="img/decrease.svg" alt="Centralizer">
204
+
<summary>Details</summary>
205
+
<div class="trend">Trend (week): <span data-trend-value></span> (<span data-trend-pct></span>%)</div>
206
+
<div class="contributors-lists">
207
+
<div class="contributors-list">
208
+
<div class="contributors-subtitle">Top decentralizers</div>
209
+
<table class="contributors-table" data-trend-list="increase">
210
+
<tbody></tbody>
211
+
</table>
212
+
</div>
219
213
</div>
220
214
</details>
221
215
</div>
···
463
457
return (value >= 0 ? "+" : "") + fixed;
464
458
}
465
459
460
+
function formatSignedInt(value) {
461
+
const rounded = Math.round(Math.abs(value));
462
+
const formatted = addCommas(rounded);
463
+
return (value >= 0 ? "+" : "-") + formatted;
464
+
}
465
+
466
466
const shannon_trend_threshold = 1.0;
467
467
function trend_icon(value) {
468
468
if (value >= shannon_trend_threshold) {
···
530
530
const trendPct = trendValue * 100 / data[section].shannon;
531
531
const valueEl = el.querySelector('[data-trend-value]');
532
532
const pctEl = el.querySelector('[data-trend-pct]');
533
-
const dEl = el.querySelector('[data-trend-biggest-d]');
534
-
const cEl = el.querySelector('[data-trend-biggest-c]');
535
-
const dDeltaEl = el.querySelector('[data-trend-biggest-delta-d]');
536
-
const cDeltaEl = el.querySelector('[data-trend-biggest-delta-c]');
533
+
const increaseListEl = el.querySelector('[data-trend-list="increase"]');
537
534
const iconEl = el.querySelector('[data-trend-icon]');
538
535
const textEl = el.querySelector('[data-trend-text]');
539
536
if (valueEl) {
···
548
545
if (textEl) {
549
546
textEl.textContent = trend_text(trendPct);
550
547
}
551
-
console.log(dEl);
552
-
if (dEl) {
553
-
dEl.textContent = data?.trends?.[section]?.[period]?.shannon_contrib?.increase?.host;
554
-
}
555
-
if (cEl) {
556
-
cEl.textContent = data?.trends?.[section]?.[period]?.shannon_contrib?.decrease?.host;
557
-
}
558
-
if (dDeltaEl) {
559
-
const dChange = data?.trends?.[section]?.[period]?.shannon_contrib?.increase?.change;
560
-
if (dChange !== undefined && dChange !== null) {
561
-
dDeltaEl.textContent = formatSignedFloat(dChange, 4);
548
+
const shannonContrib = data?.trends?.[section]?.[period]?.shannon_contrib;
549
+
const increaseItems = Array.isArray(shannonContrib?.increase)
550
+
? shannonContrib.increase
551
+
: shannonContrib?.increase ? [shannonContrib.increase] : [];
552
+
const renderContribList = (listEl, items) => {
553
+
if (!listEl) {
554
+
return;
562
555
}
563
-
}
564
-
if (cDeltaEl) {
565
-
const cChange = data?.trends?.[section]?.[period]?.shannon_contrib?.decrease?.change;
566
-
if (cChange !== undefined && cChange !== null) {
567
-
cDeltaEl.textContent = formatSignedFloat(cChange, 4);
556
+
const tbody = listEl.tagName === "TABLE" ? listEl.querySelector("tbody") : listEl;
557
+
if (!tbody) {
558
+
return;
568
559
}
569
-
}
560
+
tbody.innerHTML = "";
561
+
items.forEach(item => {
562
+
if (!item || !item.host) {
563
+
return;
564
+
}
565
+
const row = document.createElement("tr");
566
+
row.className = "contributors-row";
567
+
568
+
const hostCell = document.createElement("td");
569
+
hostCell.className = "contributors-host";
570
+
hostCell.textContent = item.host;
571
+
hostCell.title = item.host;
572
+
573
+
const deltaCell = document.createElement("td");
574
+
deltaCell.className = "contributors-delta";
575
+
if (item.change !== undefined && item.change !== null) {
576
+
deltaCell.textContent = formatSignedFloat(item.change, 4);
577
+
}
578
+
579
+
const usersCell = document.createElement("td");
580
+
usersCell.className = "contributors-users";
581
+
if (item.user_change !== undefined && item.user_change !== null) {
582
+
usersCell.textContent = `${formatSignedInt(item.user_change)} users`;
583
+
}
584
+
585
+
row.append(hostCell, deltaCell, usersCell);
586
+
tbody.appendChild(row);
587
+
});
588
+
};
589
+
590
+
renderContribList(increaseListEl, increaseItems);
570
591
});
571
592
572
593
document.querySelectorAll('.details-tabs').forEach(group => {