Crowmate/Wyview
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat (Worker): add a worker to check and adjust the TikTok graph

Browse Source
This commit is contained in:
Pierre Ryssen
2026-03-13 12:00:00 +01:00
parent 61f426ef3c
commit 4ef8913759
11 changed files with 960 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
components/StatsCharts.tsx
View File

@@ -2,8 +2,6 @@
import { useState, useEffect } from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
@@ -72,8 +70,11 @@ function getDelta(snapshots: Snapshot[], metric: Metric) {
function CustomTooltip({ active, payload, label, period }: any) {
if (!active || !payload?.length) return null;
return (
<div className="bg-[#0f0f13] border border-white/10 rounded-sm px-3 py-2 font-mono text-[10px]">
<div className="text-white/40 mb-1 tracking-widest uppercase">{formatDate(label, period)}</div>
<div className="border rounded-sm px-3 py-2 font-mono text-[10px]"
style={{ background: "var(--surface)", borderColor: "var(--border)" }}>
<div className="mb-1 tracking-widest uppercase" style={{ color: "var(--text-secondary)" }}>
{formatDate(label, period)}
</div>
{payload.map((p: any) => (
<div key={p.dataKey} className="flex items-center gap-2" style={{ color: p.color }}>
<span className="uppercase tracking-widest">{p.name}</span>
@@ -131,15 +132,16 @@ export default function StatsChart({ plan }: StatsChartProps) {
key={p.value}
onClick={() => accessible && setPeriod(p.value)}
disabled={!accessible}
className={`
className={`
relative flex items-center gap-1 px-2.5 py-1 text-[9px] font-mono tracking-widest uppercase rounded-sm transition-all
${active
? "bg-pink-500/15 border border-pink-500/40 text-pink-300"
: accessible
? "border border-transparent text-white/30 hover:text-white/60 hover:border-white/10"
: "border border-transparent text-white/15 cursor-not-allowed"
? "border border-transparent hover:border-white/10"
: "border border-transparent cursor-not-allowed opacity-30"
}
`}
style={!active && accessible ? { color: "var(--text-secondary)" } : undefined}
>
{!accessible && <Lock size={7} className="opacity-50" />}
{p.label}
@@ -156,15 +158,15 @@ export default function StatsChart({ plan }: StatsChartProps) {
key={m.value}
onClick={() => setMetric(m.value)}
className={`flex items-center gap-1.5 text-[9px] font-mono tracking-widest uppercase transition-all pb-0.5 ${
metric === m.value
? "border-b-2"
: "text-white/30 hover:text-white/60"
metric === m.value ? "border-b-2" : ""
}`}
style={metric === m.value ? { color: m.color, borderColor: m.color } : {}}
style={metric === m.value
? { color: m.color, borderColor: m.color }
: { color: "var(--text-secondary)" }}
>
<span
className="w-1.5 h-1.5 rounded-full"
style={{ background: metric === m.value ? m.color : "rgba(255,255,255,0.15)" }}
style={{ background: metric === m.value ? m.color : "var(--border)" }}
/>
{m.label}
</button>
@@ -178,32 +180,33 @@ export default function StatsChart({ plan }: StatsChartProps) {
) : Number(delta.diff) < 0 ? (
<TrendingDown size={11} className="text-red-400" />
) : (
<Minus size={11} className="text-white/30" />
<Minus size={11} style={{ color: "var(--text-secondary)" }} />
)}
<span style={{ color: Number(delta.diff) > 0 ? "#34d399" : Number(delta.diff) < 0 ? "#f87171" : "rgba(255,255,255,0.3)" }}>
<span style={{ color: Number(delta.diff) > 0 ? "#34d399" : Number(delta.diff) < 0 ? "#f87171" : "var(--text-secondary)" }}>
{Number(delta.diff) > 0 ? "+" : ""}{formatValue(delta.diff)}
{delta.pct && ` (${Number(delta.diff) > 0 ? "+" : ""}${delta.pct}%)`}
</span>
<span className="text-white/20 tracking-widest uppercase">sur la période</span>
<span className="tracking-widest uppercase" style={{ color: "var(--text-secondary)" }}>sur la période</span>
</div>
)}
</div>
<div className="px-2 pt-4 pb-2" style={{ height: 240 }}>
{loading ? (
<div className="flex items-center justify-center h-full gap-2 font-mono text-[10px] tracking-widest text-white/20 uppercase">
<span className="animate-pulse">Chargement...</span>
<div className="flex items-center justify-center h-full gap-2 font-mono text-[10px] tracking-widest uppercase animate-pulse"
style={{ color: "var(--text-secondary)" }}>
Chargement...
</div>
) : error ? (
<div className="flex items-center justify-center h-full font-mono text-[10px] tracking-widest text-red-400/50 uppercase">
<div className="flex items-center justify-center h-full font-mono text-[10px] tracking-widest uppercase text-red-400/60">
{error}
</div>
) : snapshots.length < 2 ? (
<div className="flex flex-col items-center justify-center h-full gap-2">
<span className="font-mono text-[10px] tracking-widest text-white/20 uppercase">
<span className="font-mono text-[10px] tracking-widest uppercase" style={{ color: "var(--text-secondary)" }}>
Pas encore assez de données
</span>
<span className="font-mono text-[9px] text-white/10 uppercase tracking-widest">
<span className="font-mono text-[9px] tracking-widest uppercase" style={{ color: "var(--text-secondary)", opacity: 0.4 }}>
Les snapshots s'accumulent toutes les heures
</span>
</div>
@@ -218,27 +221,28 @@ export default function StatsChart({ plan }: StatsChartProps) {
</defs>
<CartesianGrid
strokeDasharray="2 4"
stroke="rgba(255,255,255,0.04)"
stroke="var(--border)"
strokeOpacity={0.5}
vertical={false}
/>
<XAxis
dataKey="date"
tickFormatter={d => formatDate(d, period)}
tick={{ fill: "rgba(255,255,255,0.2)", fontSize: 9, fontFamily: "monospace" }}
tick={{ fill: "var(--text-secondary)", fontSize: 9, fontFamily: "monospace" }}
tickLine={false}
axisLine={false}
interval="preserveStartEnd"
/>
<YAxis
tickFormatter={formatValue}
tick={{ fill: "rgba(255,255,255,0.2)", fontSize: 9, fontFamily: "monospace" }}
tick={{ fill: "var(--text-secondary)", fontSize: 9, fontFamily: "monospace" }}
tickLine={false}
axisLine={false}
width={40}
/>
<Tooltip
content={<CustomTooltip period={period} />}
cursor={{ stroke: "rgba(255,255,255,0.06)", strokeWidth: 1 }}
cursor={{ stroke: "var(--border)", strokeWidth: 1 }}
/>
<Area
type="monotone"