Analyse: Zeitraum = abgeschlossene Tage, "Heute bisher" getrennt, Feinschliff
Final-Review-Fixwelle der Cockpit-Übersicht:
- F1 Collector: Der Zeitraum sind die range Kalendertage bis gestern (Berliner Tag),
der Vorzeitraum die range Tage davor; heute steht getrennt in today { day, pv, visitors,
contacts }. Kein Einbruch mehr am rechten Rand von Diagramm und Mini-Verläufen,
kein falsches "x % weniger" tagsüber. Portal: weekdayStats bekommt die ganze Reihe
(completedDays entfällt), "Vergleich ab" = firstDay + 2 x range, Kopfzeile
"Analyse aktiv · Heute bisher: N Aufrufe · Stand: HH:MM Uhr" (alter Collector ohne today
bleibt ohne "Heute bisher").
- F2 "direkt kontaktiert" zählt nur Telefon, E-Mail und WhatsApp (auch im Vorzeitraum),
Links nach außen nicht.
- F3 Mini-Verlauf "Ø Zeit pro Seite": Tage ohne Messung sind Lücken statt 0-Tälern.
- F4 Fehlerfarbe beim Ausschalten rot, --an-faint auf 55 %, Achsenschrift per
Container-Abfragen auf 11-12 px (y-Rand wächst mit der Stellenzahl, x-Beschriftungen mit
Mindestabstand), Ranglisten-Anteile an allen Seitenaufrufen, Tippflächen bis 880 px
mindestens 40 px hoch.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ClaudeandClaude Opus 5.5 committed
1 parent
eadb768d1a
commit
0db59d38e9
11 files changed
+376
-135
No files matched your search
+46
-21
@@ -2,7 +2,7 @@
|
||||
Jeder Wert aus Daten (Pfade, Hosts, Projektnamen, Tage, Links) laeuft durch esc(). Texte: Spec 2.1-2.4.
|
||||
|
||||
Vertrag fuer analyse.js und analyse.css (Praefix an-, Zustaende als Klasse "on" oder Attribut):
|
||||
Kopf .an-top > .an-site[data-state=on|warn|off] (.an-status-dot, .an-site-name | select#an-project.an-pick, .an-status) + .an-seg[role=group] button[data-range=7|30|90][aria-pressed] (.on)
|
||||
Kopf .an-top > .an-site[data-state=on|warn|off] (.an-status-dot, .an-site-name | select#an-project.an-pick, .an-status "Analyse aktiv · Heute bisher: N Aufrufe · Stand: HH:MM Uhr") + .an-seg[role=group] button[data-range=7|30|90][aria-pressed] (.on)
|
||||
Reiter .an-tabs[role=tablist] > button.an-tabbtn[role=tab][data-tab=uebersicht|heatmap|einstellungen][aria-selected] (.on), aria-controls="an-stage"
|
||||
Wurzel .an-ov (Raster, Abstand 14 px) enthaelt: .an-sum, .an-kpis, .an-row2, 2x .an-pair, .an-credit
|
||||
Wichtigste .an-sum > h3.an-eyebrow, p.an-lead (darin <b>), ul.an-points > li > span.an-point-ico (svg.an-ico) + span; Leerzustand: .an-sum.an-sum-empty
|
||||
@@ -50,19 +50,24 @@ const rateDe = (n) => n.toLocaleString('de-DE', { minimumFractionDigits: 1, maxi
|
||||
|
||||
const STATE_TEXT = { disabled: 'Analyse ist abgeschaltet', unknown: 'Status gerade nicht abrufbar' }
|
||||
|
||||
// Statuszeile: aktiv (mit Stand), Dev-Modus (gelb) oder, bei Websites ohne Messung, der tatsaechliche Zustand
|
||||
function statusOf(project, devMode, stamp) {
|
||||
// Statuszeile: aktiv (mit "Heute bisher" aus stats.today und Stand), Dev-Modus (gelb) oder, bei Websites ohne Messung, der tatsaechliche Zustand
|
||||
function statusOf(project, devMode, stamp, today) {
|
||||
if (devMode) return { s: 'warn', text: 'Im Dev-Modus wird nicht gemessen.' }
|
||||
const a = project?.analyse
|
||||
const state = typeof a?.state === 'string' ? a.state : 'active'
|
||||
if (state === 'active') return { s: 'on', text: `Analyse aktiv${stamp ? ` · Stand: heute, ${stamp} Uhr` : ''}` }
|
||||
if (state === 'active') {
|
||||
const pv = isNum(today?.pv) ? today.pv : null // alter Collector ohne today: kein "Heute bisher"
|
||||
// jeder Teil bricht nur als Ganzes in die naechste Zeile (kein "Stand:" allein am Zeilenende)
|
||||
const parts = ['Analyse aktiv', pv === null ? '' : `Heute bisher: ${fmtNum(pv)} ${pv === 1 ? 'Aufruf' : 'Aufrufe'}`, stamp ? `Stand: ${stamp} Uhr` : '']
|
||||
return { s: 'on', text: parts.filter(Boolean).map((t) => `<span class="an-st">${t}</span>`).join(' · ') }
|
||||
}
|
||||
return { s: 'off', text: Object.hasOwn(STATE_TEXT, state) ? STATE_TEXT[state] : a.eligible === false ? 'Analyse nicht verfügbar' : 'Analyse ist noch ausgeschaltet' }
|
||||
}
|
||||
|
||||
/** Kopfleiste. usable: Websites mit Analyse (Auswahlfeld erst ab 2), stamp: Uhrzeit "19:42" des Ladens. */
|
||||
export function headerHtml({ project, usable, range, showRange, devMode, stamp } = {}) {
|
||||
/** Kopfleiste. usable: Websites mit Analyse (Auswahlfeld erst ab 2), stamp: Uhrzeit "19:42" des Ladens, today: stats.today (heute bisher). */
|
||||
export function headerHtml({ project, usable, range, showRange, devMode, stamp, today } = {}) {
|
||||
const sites = list(usable)
|
||||
const st = statusOf(project, devMode, stamp ? esc(stamp) : '')
|
||||
const st = statusOf(project, devMode, stamp ? esc(stamp) : '', today)
|
||||
const current = RANGES.includes(Number(range)) ? Number(range) : 30
|
||||
const name = sites.length > 1
|
||||
? `<select id="an-project" class="an-pick" aria-label="Website wählen">${sites.map((p) => `<option value="${esc(p.projectId)}"${p.projectId === project?.projectId ? ' selected' : ''}>${esc(p.projectName)}</option>`).join('')}</select>`
|
||||
@@ -92,19 +97,33 @@ export function summaryHtml(stats) {
|
||||
return `<section class="an-sum">${head}<p class="an-lead">${s.lead}</p>${points}</section>`
|
||||
}
|
||||
|
||||
/** Mini-Verlauf (Flaeche + Linie, ohne Achsen) aus Zahlen; unter 2 Werten nichts. */
|
||||
/** Mini-Verlauf (Flaeche + Linie, ohne Achsen) aus Zahlen; null/undefined ist eine Luecke (Tag ohne Messung): die Linie bricht dort ab, es wird nie als 0 gezeichnet. Unter 2 Werten nichts. */
|
||||
export function sparkHtml(values) {
|
||||
const v = list(values).map(num)
|
||||
if (v.length < 2) return ''
|
||||
const max = Math.max(1, ...v) * 1.1
|
||||
const path = v.map((y, i) => `${i ? 'L' : 'M'}${round((200 * i) / (v.length - 1))} ${round(36 - (32 * y) / max)}`).join(' ')
|
||||
return `<svg class="an-spark" viewBox="0 0 200 38" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path class="an-spark-area" d="${path} L200 38 L0 38 Z"/><path class="an-spark-line" d="${path}" fill="none" vector-effect="non-scaling-stroke"/></svg>`
|
||||
const v = list(values).map((x) => (x === null || x === undefined ? null : num(x)))
|
||||
if (v.length < 2 || v.filter((x) => x !== null).length < 2) return ''
|
||||
const max = Math.max(1, ...v.filter((x) => x !== null)) * 1.1
|
||||
const x = (i) => round((200 * i) / (v.length - 1))
|
||||
const pt = (y, i) => `${x(i)} ${round(36 - (32 * y) / max)}`
|
||||
// zusammenhaengende Abschnitte ohne Luecke: [[wert, index], ...]
|
||||
const runs = []
|
||||
v.forEach((y, i) => {
|
||||
if (y === null) runs.push(null)
|
||||
else if (runs.length && runs[runs.length - 1]) runs[runs.length - 1].push([y, i])
|
||||
else runs.push([[y, i]])
|
||||
})
|
||||
const parts = runs.filter(Boolean)
|
||||
const seg = (r) => r.map(([y, i], k) => `${k ? 'L' : 'M'}${pt(y, i)}`).join(' ')
|
||||
// ein einzelner Tag zwischen Luecken wird ein Punkt (Strich der Laenge 0, runde Linienenden)
|
||||
const line = parts.map((r) => (r.length === 1 ? `${seg(r)} L${pt(...r[0])}` : seg(r))).join(' ')
|
||||
const area = parts.filter((r) => r.length > 1).map((r) => `${seg(r)} L${x(r[r.length - 1][1])} 38 L${x(r[0][1])} 38 Z`).join(' ')
|
||||
return `<svg class="an-spark" viewBox="0 0 200 38" preserveAspectRatio="none" aria-hidden="true" focusable="false"><path class="an-spark-area" d="${area}"/><path class="an-spark-line" d="${line}" fill="none" vector-effect="non-scaling-stroke"/></svg>`
|
||||
}
|
||||
|
||||
// Tageswerte einer Reihe: fehlende Werte 0; Reihe ohne das Feld (alter Collector) => null
|
||||
const trend = (series, key) => {
|
||||
// Tageswerte einer Reihe: fehlende Werte 0; Reihe ohne das Feld (alter Collector) => null.
|
||||
// gaps: Tage ohne Wert bleiben null (Luecke im Verlauf), z.B. die Zeit pro Seite an Tagen ohne Zustimmung
|
||||
const trend = (series, key, gaps = false) => {
|
||||
const rows = list(series)
|
||||
return rows.some((d) => Object.hasOwn(d ?? {}, key)) ? rows.map((d) => num(d?.[key])) : null
|
||||
return rows.some((d) => Object.hasOwn(d ?? {}, key)) ? rows.map((d) => (gaps && !isNum(d?.[key]) ? null : num(d?.[key]))) : null
|
||||
}
|
||||
|
||||
export function kpisHtml(stats) {
|
||||
@@ -120,7 +139,7 @@ export function kpisHtml(stats) {
|
||||
const field = { pv: 'pv', visitors: 'visitors', contacts: 'contacts', time: 'avgSec' }
|
||||
const tile = (k) => {
|
||||
const foot = k.d ? `${chip(k.d)}<span class="an-vs">vs. ${esc(k.vs)}</span>` : !cmp.ok && cmp.from ? `<span class="an-vs">Vergleich ab ${esc(cmp.from)}</span>` : ''
|
||||
return `<div class="an-card an-kpi" data-kpi="${k.key}"><span class="an-k">${k.label}${k.star ? '<span class="an-star">*</span>' : ''}</span><b class="an-v">${esc(k.value)}</b>${k.sub ? `<small class="an-sub">${esc(k.sub)}</small>` : ''}<div class="an-cmp">${foot}</div>${sparkHtml(trend(stats?.series, field[k.key]))}</div>`
|
||||
return `<div class="an-card an-kpi" data-kpi="${k.key}"><span class="an-k">${k.label}${k.star ? '<span class="an-star">*</span>' : ''}</span><b class="an-v">${esc(k.value)}</b>${k.sub ? `<small class="an-sub">${esc(k.sub)}</small>` : ''}<div class="an-cmp">${foot}</div>${sparkHtml(trend(stats?.series, field[k.key], k.key === 'time'))}</div>`
|
||||
}
|
||||
return `<div class="an-kpis">${tiles.map(tile).join('')}</div>`
|
||||
}
|
||||
@@ -139,7 +158,11 @@ export function chartHtml(stats) {
|
||||
const cmp = compareFrom(stats)
|
||||
const head = (legend) => `<div class="an-head"><h3>Seitenaufrufe pro Tag</h3>${legend}</div>`
|
||||
if (!series.length) return `<section class="an-card an-chartbox">${head('')}<p class="an-empty">Noch keine Daten.</p></section>`
|
||||
const m = chartModel(series, { height: 300, pad: { l: 40, r: 24, t: 12, b: 28 }, compare: cmp.ok ? stats.previous.series : undefined })
|
||||
// Schrift der Achsen in viewBox-Einheiten: bis ca. 24 auf dem schmalsten Handy (analyse.css). Der linke Rand haelt die breiteste
|
||||
// y-Beschriftung (Ziffern ca. 0,6 x 24 breit), die x-Beschriftungen halten 100 Einheiten Abstand (eine Datumsbeschriftung ist bei Schrift 28 ca. 92 breit)
|
||||
const opts = { height: 300, maxLabels: 5, labelGap: 100, compare: cmp.ok ? stats.previous.series : undefined }
|
||||
const padL = Math.max(40, Math.round(6 + String(chartModel(series, opts).top).length * 14.4))
|
||||
const m = chartModel(series, { ...opts, pad: { l: padL, r: 24, t: 12, b: 40 } })
|
||||
const hasPrev = Boolean(m.prevLine)
|
||||
const days = Number(stats?.range) || series.length
|
||||
const total = m.points.reduce((sum, p) => sum + p.pv, 0)
|
||||
@@ -147,8 +170,8 @@ export function chartHtml(stats) {
|
||||
const legend = `<div class="an-legend"><span class="an-leg"><i class="an-leg-line"></i>${days} Tage</span>${hasPrev ? '<span class="an-leg"><i class="an-leg-line an-leg-prev"></i>Zeitraum davor</span>' : ''}</div>`
|
||||
const dots = m.points.map((p, i) => `<circle class="an-dot" data-i="${i}" cx="${p.x}" cy="${p.y}" r="3" data-day="${esc(p.day)}" data-pv="${p.pv}"${p.prev === null ? '' : ` data-prev="${p.prev}"`}/>`).join('')
|
||||
return `<section class="an-card an-chartbox">${head(legend)}<div class="an-chartwrap"><svg class="an-chart" viewBox="0 0 ${m.width} ${m.height}" role="img" aria-labelledby="an-chart-title"><title id="an-chart-title">${esc(title)}</title>`
|
||||
+ m.yTicks.map((k) => `<line class="an-grid" x1="${m.pad.l}" x2="${m.width - m.pad.r}" y1="${k.y}" y2="${k.y}"/><text class="an-axis" x="${m.pad.l - 6}" y="${k.y + 4}" text-anchor="end">${esc(k.label)}</text>`).join('')
|
||||
+ m.xLabels.map((l) => `<text class="an-axis" x="${l.x}" y="${m.height - 8}" text-anchor="middle">${esc(l.label)}</text>`).join('')
|
||||
+ m.yTicks.map((k) => `<line class="an-grid" x1="${m.pad.l}" x2="${m.width - m.pad.r}" y1="${k.y}" y2="${k.y}"/><text class="an-axis" x="${m.pad.l - 6}" y="${k.y}" dy="0.35em" text-anchor="end">${esc(k.label)}</text>`).join('')
|
||||
+ m.xLabels.map((l) => `<text class="an-axis" x="${l.x}" y="${m.height - 9}" text-anchor="middle">${esc(l.label)}</text>`).join('')
|
||||
+ `<path class="an-area" d="${m.area}"/>${hasPrev ? `<path class="an-prev" d="${m.prevLine}"/>` : ''}<path class="an-line" d="${m.line}"/>${dots}</svg><div class="an-tip" hidden></div></div></section>`
|
||||
}
|
||||
|
||||
@@ -196,7 +219,9 @@ export function rankCardHtml(card, stats, { tab, expanded } = {}) {
|
||||
const def = CARDS[card]
|
||||
const active = def.tabs.some(([k]) => k === tab) ? tab : def.tabs[0][0]
|
||||
const items = list(stats?.[active])
|
||||
const sum = items.reduce((a, r) => a + num(r?.count), 0)
|
||||
const listSum = items.reduce((a, r) => a + num(r?.count), 0)
|
||||
// Anteil an allen Seitenaufrufen (die Liste zeigt hoechstens 20 Eintraege); Herkunft kennt nur die Summe der Liste (Besucher ohne Zustimmung haben keine)
|
||||
const sum = active === 'refs' ? listSum : Math.max(listSum, num(stats?.totals?.pv))
|
||||
const share = (c) => {
|
||||
const pct = sum > 0 ? (c / sum) * 100 : 0
|
||||
return pct > 0 && pct < 0.5 ? '< 1 %' : `${Math.round(pct)} %`
|
||||
|
||||
+18
-21
@@ -55,8 +55,8 @@ export function shortDay(day) {
|
||||
return m ? `${m[2]}.${m[1]}.` : String(day || '')
|
||||
}
|
||||
|
||||
/** Koordinaten fuer das Liniendiagramm. series: [{day, pv}] => Punkte, Achsenbeschriftung, Pfad. Mit compare ([{pv}], Zeitraum davor) gemeinsame Skala und gestrichelte Vergleichslinie (nach Tagesindex ausgerichtet). */
|
||||
export function chartModel(series, { width = 640, height = 240, pad = { l: 40, r: 12, t: 12, b: 28 }, maxLabels = 6, compare } = {}) {
|
||||
/** Koordinaten fuer das Liniendiagramm. series: [{day, pv}] => Punkte, Achsenbeschriftung, Pfad. Mit compare ([{pv}], Zeitraum davor) gemeinsame Skala und gestrichelte Vergleichslinie (nach Tagesindex ausgerichtet). labelGap: Mindestabstand (Einheiten) zwischen der letzten und der vorletzten Beschriftung der x-Achse. */
|
||||
export function chartModel(series, { width = 640, height = 240, pad = { l: 40, r: 12, t: 12, b: 28 }, maxLabels = 6, labelGap = 36, compare } = {}) {
|
||||
const data = Array.isArray(series) ? series : []
|
||||
const before = Array.isArray(compare) ? compare : []
|
||||
const prevOf = (i) => {
|
||||
@@ -70,7 +70,7 @@ export function chartModel(series, { width = 640, height = 240, pad = { l: 40, r
|
||||
const y = (v) => pad.t + innerH - (innerH * v) / top
|
||||
const points = data.map((d, i) => ({ x: round(x(i)), y: round(y(Number(d.pv) || 0)), day: d.day, pv: Number(d.pv) || 0, prev: prevOf(i) }))
|
||||
const step = Math.max(1, Math.ceil(data.length / maxLabels))
|
||||
const xLabels = points.filter((_, i) => i % step === 0 || i === data.length - 1).filter((_, i, a) => i === a.length - 1 || a[a.length - 1].x - a[i].x > 36).map((p) => ({ x: p.x, label: shortDay(p.day) }))
|
||||
const xLabels = points.filter((_, i) => i % step === 0 || i === data.length - 1).filter((_, i, a) => i === a.length - 1 || a[a.length - 1].x - a[i].x > labelGap).map((p) => ({ x: p.x, label: shortDay(p.day) }))
|
||||
const yTicks = [0, 0.5, 1].map((f) => ({ y: round(y(top * f)), label: String(Math.round(top * f)) }))
|
||||
const line = points.map((p, i) => `${i ? 'L' : 'M'}${p.x} ${p.y}`).join(' ')
|
||||
const baseY = round(pad.t + innerH)
|
||||
@@ -165,13 +165,14 @@ export function periodLabel(from, to) {
|
||||
return a && b ? `${a.d}. ${MONTHS[a.m - 1]} – ${b.d}. ${MONTHS[b.m - 1]}` : ''
|
||||
}
|
||||
|
||||
/** Vergleich moeglich, wenn der Vorzeitraum vollstaendig ist und mindestens 20 Aufrufe hat. Sonst from = "TT.MM." ab dem der Vergleich geht (nur bei Vorzeitraum, der noch nicht voll ist). */
|
||||
/** Vergleich moeglich, wenn der Vorzeitraum vollstaendig ist und mindestens 20 Aufrufe hat. Sonst from = "TT.MM." ab dem der Vergleich geht (nur bei Vorzeitraum, der noch nicht voll ist).
|
||||
Der Zeitraum endet gestern: der Vorzeitraum beginnt heute - 2 x range, also ist er ab firstDay + 2 x range voll. */
|
||||
export function compareFrom(stats) {
|
||||
const prev = stats?.previous
|
||||
if (prev?.complete && Number(prev.totals?.pv) >= 20) return { ok: true, from: '' }
|
||||
const range = Number(stats?.range)
|
||||
if (prev && !prev.complete && stats.firstDay && range > 0) {
|
||||
const from = addDays(stats.firstDay, 2 * range - 1)
|
||||
const from = addDays(stats.firstDay, 2 * range)
|
||||
return { ok: false, from: from ? shortDay(from) : '' }
|
||||
}
|
||||
return { ok: false, from: '' }
|
||||
@@ -232,7 +233,7 @@ export function refName(host) {
|
||||
return hit ? hit[1] : h
|
||||
}
|
||||
|
||||
/** Staerkster Wochentag und Spitzentag ueber die Tage ab firstDay ('' = alle). null bei weniger als 7 Tagen. */
|
||||
/** Staerkster Wochentag und Spitzentag ueber die (abgeschlossenen) Tage der Reihe ab firstDay ('' = alle). null bei weniger als 7 Tagen. */
|
||||
export function weekdayStats(series, firstDay) {
|
||||
const rows = (Array.isArray(series) ? series : [])
|
||||
.filter((d) => parseDay(d?.day) && (!firstDay || d.day >= firstDay))
|
||||
@@ -255,7 +256,8 @@ export function weekdayStats(series, firstDay) {
|
||||
return { best, avg, peak }
|
||||
}
|
||||
|
||||
const CONTACT_WAYS = { tel: 'per Telefon', mail: 'per E-Mail', wa: 'per WhatsApp', out: 'über einen Link nach außen' }
|
||||
// Direkte Kontaktwege; Klicks auf Links nach außen ('out') sind kein Kontakt zu dir und zählen im Satz nicht mit
|
||||
const CONTACT_WAYS = { tel: 'per Telefon', mail: 'per E-Mail', wa: 'per WhatsApp' }
|
||||
const DEVICE_WORDS = { m: 'vom Handy', d: 'vom Computer' }
|
||||
|
||||
// Satz ueber dem Hinweis-Block; nur hier steht fett (<b>), alle Zahlen sind fmtNum
|
||||
@@ -280,17 +282,19 @@ function leadOf(stats, cmp) {
|
||||
}
|
||||
|
||||
function contactItem(stats, cmp) {
|
||||
const total = Number(stats.totals.contacts) || 0
|
||||
if (!Array.isArray(stats.contacts)) return null // Collector ohne Kontaktliste: nichts behaupten
|
||||
const direct = (rows) => (Array.isArray(rows) ? rows : []).filter((c) => Object.hasOwn(CONTACT_WAYS, c?.key) && c.count > 0)
|
||||
const sum = (rows) => rows.reduce((a, c) => a + c.count, 0)
|
||||
const cur = direct(stats.contacts)
|
||||
const total = sum(cur)
|
||||
if (total < 1) {
|
||||
return Number(stats.totals.visitors) >= 30
|
||||
? 'Von den Besuchern mit Zustimmung hat noch niemand über die Website angerufen oder geschrieben.'
|
||||
: null
|
||||
}
|
||||
const main = (Array.isArray(stats.contacts) ? stats.contacts : [])
|
||||
.filter((c) => CONTACT_WAYS[c.key] && c.count > 0)
|
||||
.reduce((m, c) => (!m || c.count > m.count ? c : m), null)
|
||||
let text = `${fmtNum(total)}-mal hat dich jemand direkt kontaktiert${main ? `, meist ${CONTACT_WAYS[main.key]} (${fmtNum(main.count)})` : ''}.`
|
||||
const before = cmp.ok ? Number(stats.previous.totals.contacts) : 0
|
||||
const main = cur.reduce((m, c) => (!m || c.count > m.count ? c : m), null)
|
||||
let text = `${fmtNum(total)}-mal hat dich jemand direkt kontaktiert, meist ${CONTACT_WAYS[main.key]} (${fmtNum(main.count)}).`
|
||||
const before = cmp.ok ? sum(direct(stats.previous.contacts)) : 0
|
||||
if (before >= 1) {
|
||||
const diff = total - before
|
||||
text += diff === 0 ? ' Genauso oft wie zuvor.' : ` Das sind ${fmtNum(Math.abs(diff))} ${diff > 0 ? 'mehr' : 'weniger'} als zuvor.`
|
||||
@@ -298,16 +302,9 @@ function contactItem(stats, cmp) {
|
||||
return text
|
||||
}
|
||||
|
||||
// Der letzte Tag der Reihe ist heute und noch nicht zu Ende: er zaehlt beim Wochentag-Hinweis nicht mit
|
||||
function completedDays(stats) {
|
||||
const series = Array.isArray(stats.series) ? stats.series : []
|
||||
const last = series[series.length - 1]
|
||||
return last && (!stats.to || last.day === stats.to) ? series.slice(0, -1) : series
|
||||
}
|
||||
|
||||
function dayItem(stats) {
|
||||
if (!(Number(stats.totals.pv) >= 70)) return null
|
||||
const w = weekdayStats(completedDays(stats), stats.firstDay || '')
|
||||
const w = weekdayStats(stats.series, stats.firstDay || '')
|
||||
if (!w) return null
|
||||
const parts = []
|
||||
if (w.best) parts.push(`${w.best.name} ist im Schnitt dein stärkster Tag.`)
|
||||
|
||||
+20
-4
@@ -5,7 +5,7 @@
|
||||
--an-fg: #fff;
|
||||
--an-fg2: rgba(255, 255, 255, 0.78);
|
||||
--an-muted: rgba(255, 255, 255, 0.58);
|
||||
--an-faint: rgba(255, 255, 255, 0.4);
|
||||
--an-faint: rgba(255, 255, 255, 0.55); /* >= 4,5:1 auf der Karte (gemessen ca. 6,2:1) */
|
||||
--an-line: rgba(255, 255, 255, 0.09);
|
||||
--an-line2: rgba(255, 255, 255, 0.18);
|
||||
--an-card: rgba(14, 16, 20, 0.92);
|
||||
@@ -38,6 +38,7 @@
|
||||
.an-status-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--an-dot); box-shadow: 0 0 0 4px var(--an-dot-soft); }
|
||||
.an-site-name { display: block; font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.an-status { display: block; margin-top: 2px; font-size: 12px; color: var(--an-muted); }
|
||||
.an-st { white-space: nowrap; }
|
||||
.an-pick {
|
||||
display: block; max-width: 100%; padding: 2px 24px 2px 0; border: 0; border-radius: 6px; cursor: pointer; text-overflow: ellipsis;
|
||||
-webkit-appearance: none; appearance: none; color: var(--an-fg); font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.3;
|
||||
@@ -107,10 +108,21 @@
|
||||
.an-leg { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
|
||||
.an-leg-line { display: inline-block; width: 18px; height: 0; border-top: 3px solid var(--an-acc); border-radius: 2px; }
|
||||
.an-leg-prev { border-top: 2px dashed var(--an-prev); }
|
||||
.an-chartwrap { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-height: 0; }
|
||||
.an-chartwrap { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-height: 0; container-type: inline-size; }
|
||||
.an-chart { display: block; width: 100%; height: auto; max-height: 100%; overflow: visible; touch-action: pan-y; }
|
||||
.an-grid { stroke: var(--an-line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
|
||||
/* Achsenschrift in viewBox-Einheiten (viewBox 640 breit, die Zeichnung skaliert mit der Kartenbreite). Je nach Breite der Zeichnung
|
||||
so gewaehlt, dass sie immer ca. 11-12 px gross erscheint (gemessen: 320 px Handy bis 1920 px Desktop); Grundwert fuer Browser ohne Container-Abfragen. */
|
||||
.an-axis { fill: var(--an-muted); font-size: 13px; }
|
||||
@container (max-width: 279px) { .an-axis { font-size: 28px; } }
|
||||
@container (min-width: 280px) and (max-width: 329px) { .an-axis { font-size: 24px; } }
|
||||
@container (min-width: 330px) and (max-width: 379px) { .an-axis { font-size: 21px; } }
|
||||
@container (min-width: 380px) and (max-width: 439px) { .an-axis { font-size: 18px; } }
|
||||
@container (min-width: 440px) and (max-width: 499px) { .an-axis { font-size: 16px; } }
|
||||
@container (min-width: 500px) and (max-width: 559px) { .an-axis { font-size: 14px; } }
|
||||
@container (min-width: 560px) and (max-width: 629px) { .an-axis { font-size: 12.5px; } }
|
||||
@container (min-width: 630px) and (max-width: 699px) { .an-axis { font-size: 11px; } }
|
||||
@container (min-width: 700px) { .an-axis { font-size: 10px; } }
|
||||
.an-area { fill: var(--an-acc); opacity: 0.12; stroke: none; }
|
||||
.an-prev { fill: none; stroke: var(--an-prev); stroke-width: 2px; stroke-dasharray: 5 5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
|
||||
.an-line { fill: none; stroke: var(--an-acc); stroke-width: 2.4px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
|
||||
@@ -196,6 +208,7 @@
|
||||
.an-ghost:hover { background: rgba(255, 255, 255, 0.07); }
|
||||
.an-danger { color: #fca5a5; }
|
||||
.an .error { margin: 0 0 12px; text-align: left; }
|
||||
#an-off p.error { color: #fca5a5; }
|
||||
|
||||
/* ------------------------------------------- Einschalten und andere Zustaende --- */
|
||||
.an-state p, .an-panel p { margin: 0 0 12px; line-height: 1.55; color: var(--an-fg2); }
|
||||
@@ -258,8 +271,12 @@
|
||||
@media (max-width: 880px) {
|
||||
.an-top { padding: 14px; }
|
||||
.an-seg { display: flex; width: 100%; }
|
||||
.an-seg button { flex: 1 1 0; padding: 9px 8px; }
|
||||
.an-seg button { flex: 1 1 0; padding: 9px 8px; min-height: 40px; }
|
||||
.an-tabs { gap: 20px; margin: 14px 2px; }
|
||||
/* Tippflaechen mindestens 40 px hoch */
|
||||
.an-tabbtn { min-height: 40px; padding-top: 8px; }
|
||||
.an-ltab, .an-more, .an-btn { min-height: 40px; }
|
||||
.an-ltab { display: inline-flex; align-items: center; padding: 6px 14px; }
|
||||
.an-card { padding: 16px; }
|
||||
.an-kpi { padding: 14px 14px 10px; }
|
||||
.an-v { font-size: 26px; }
|
||||
@@ -267,7 +284,6 @@
|
||||
.an-sum { padding: 18px 16px; }
|
||||
.an-lead { font-size: 19px; }
|
||||
.an-sum-empty .an-lead { font-size: 16px; }
|
||||
.an-axis { font-size: 17px; }
|
||||
.an-heat-bar label { max-width: none; }
|
||||
.an-bn { display: block; margin: 12px 0; padding: 16px; }
|
||||
.an-bn-row { flex-direction: column; margin-top: 12px; }
|
||||
|
||||
+4
-4
@@ -48,10 +48,10 @@ export async function initAnalyse(root, { projectId } = {}) {
|
||||
else renderAnalyseActivation(stage, project, reload)
|
||||
}
|
||||
|
||||
// Kopfleiste (analyse-cards.js); Zeitraum nur in der Uebersicht, "Stand" = Uhrzeit des letzten Ladens
|
||||
function headHtml(project, usable, { showRange, stamp = '' } = {}) {
|
||||
// Kopfleiste (analyse-cards.js); Zeitraum nur in der Uebersicht, "Stand" = Uhrzeit des letzten Ladens, today = "Heute bisher" aus der Statistik
|
||||
function headHtml(project, usable, { showRange, stamp = '', today } = {}) {
|
||||
const a = analyseOf(project)
|
||||
return headerHtml({ project, usable, range: RANGES.includes(analyseSel.range) ? analyseSel.range : 30, showRange, devMode: a.state === 'active' && Boolean(a.devMode), stamp })
|
||||
return headerHtml({ project, usable, range: RANGES.includes(analyseSel.range) ? analyseSel.range : 30, showRange, devMode: a.state === 'active' && Boolean(a.devMode), stamp, today })
|
||||
}
|
||||
|
||||
function bannerPreview(color) {
|
||||
@@ -182,7 +182,7 @@ function mountCockpit({ an, stage, project, usable, reload }) {
|
||||
const bar = an.querySelector('.an-top')
|
||||
if (!bar) return
|
||||
const focused = bar.contains(document.activeElement) ? document.activeElement.dataset.range : ''
|
||||
bar.outerHTML = headHtml(project, usable, { showRange: tabNow() === 'uebersicht', stamp: state.stamp })
|
||||
bar.outerHTML = headHtml(project, usable, { showRange: tabNow() === 'uebersicht', stamp: state.stamp, today: state.stats?.today })
|
||||
if (focused) an.querySelector(`.an-seg [data-range="${focused}"]`)?.focus()
|
||||
}
|
||||
// Reiterknoepfe in place umschalten (Fokus bleibt), nur der gewaehlte ist per Tab erreichbar, die anderen per Pfeiltaste
|
||||
|
||||
Reference in new issue
Block a user