71 lines
No EOL
2.7 KiB
Markdown
71 lines
No EOL
2.7 KiB
Markdown
> 🏅 ⭐ **Orden — Sokrates’ erstes eigenständiges Werk** · autonom gegründet am 10.07.2026 · siehe [ORIGIN.md](ORIGIN.md)
|
||
|
||
# 📊 piedash — Sentiment & Plattform-Übersicht
|
||
|
||
Ein schlankes, in sich geschlossenes **Single-Page-Dashboard**, das die
|
||
Social-Media-Monitoring-Kennzahlen von **joni** als vier Kreisdiagramme
|
||
visualisiert. Kein Server, kein Build-Step — einfach `index.html` im Browser
|
||
öffnen. ✨
|
||
|
||
## 🔍 Was zeigt das Dashboard?
|
||
|
||
Zwei beobachtete Entitäten im direkten Vergleich:
|
||
|
||
| # | Chart | Inhalt |
|
||
|---|-------|--------|
|
||
| A | **Arena Wien – Sentiment** | Positiv / Neutral / Negativ (380 Beiträge) |
|
||
| B | **Scharmüller – Sentiment** | Positiv / Neutral / Negativ (360 Beiträge, 10 Krisen-Alerts) |
|
||
| C | **Arena Wien – Plattform-Mix** | Verteilung über 9 Plattformen (Forum, Web, Facebook, …) |
|
||
| D | **Scharmüller – Plattform-Mix** | Verteilung über 6 Plattformen |
|
||
|
||
Darunter eine kompakte **Kennzahlen-Tabelle** (Status, Reichweite, 30-Tage-AVE,
|
||
Krisen-Alerts, Top-Plattform) für beide Entitäten nebeneinander.
|
||
|
||
## 🛰️ Datenquelle
|
||
|
||
Die Zahlen stammen aus **joni** — dem Social-Media-Monitoring-System, das
|
||
Beiträge über Foren, Web, Facebook, Bluesky, Reddit, X, YouTube, TikTok und
|
||
Instagram sammelt, klassifiziert und Sentiment- sowie Reichweiten-Kennzahlen
|
||
berechnet. Das Dashboard bildet einen statischen Snapshot dieser Daten ab.
|
||
|
||
## 🧱 Tech-Stack
|
||
|
||
- **HTML5** + **CSS3** (CSS Grid, CSS-Variablen, Dark-Theme)
|
||
- **[Chart.js 4](https://www.chartjs.org/)** via CDN
|
||
- **[chartjs-plugin-datalabels 2](https://chartjs-plugin-datalabels.netlify.app/)** für Prozent-Labels auf den Slices
|
||
- **Zero Build Step** — kein npm, kein Webpack, keine Toolchain
|
||
|
||
## ▶️ Ausführen
|
||
|
||
Es wird **kein Server benötigt**:
|
||
|
||
```bash
|
||
# Repository klonen …
|
||
git clone https://git.peterscharmueller.com/pch/piedash.git
|
||
cd piedash
|
||
|
||
# … und index.html direkt im Browser öffnen
|
||
xdg-open index.html # Linux
|
||
# open index.html # macOS
|
||
# start index.html # Windows
|
||
```
|
||
|
||
Oder die Datei einfach per Doppelklick öffnen. Chart.js und das Datalabels-Plugin
|
||
werden zur Laufzeit vom CDN geladen — dafür wird eine Internetverbindung benötigt.
|
||
|
||
## ✨ Features
|
||
|
||
- 🎨 Professionelles Dark-Theme mit CSS-Variablen
|
||
- 🧩 Sauberes 2×2-Grid-Layout, responsiv (bricht auf schmalen Screens auf eine Spalte um)
|
||
- 🏷️ Prozent-Labels nur auf Slices > 4 % — kleine Segmente bleiben lesbar
|
||
- 🖱️ Interaktive Tooltips mit Absolutwert und Prozentanteil
|
||
- 📱 `responsive: true` — passt sich der Container-Größe an
|
||
|
||
## 📄 Lizenz
|
||
|
||
Veröffentlicht unter der **MIT-Lizenz**. Frei nutzbar, veränderbar und
|
||
verteilbar.
|
||
|
||
```
|
||
MIT License — © 2026 Peter Scharmüller (pch)
|
||
``` |