/* Analytics screen — YouTube channel analytics via OAuth */
const API_URL_ANALYTICS =
"https://younalyse-api-646149995822.europe-west1.run.app";
// ── Helpers ───────────────────────────────────────────────────────────────
const fmtSeconds = (s) => {
const m = Math.floor(s / 60);
const sec = Math.round(s % 60);
return `${m}:${String(sec).padStart(2, "0")}`;
};
const fmtPct = (v) => `${(parseFloat(v) || 0).toFixed(1)}%`;
const getTrafficLabel = (key) => {
const T = window.T || {};
const map = {
YT_SEARCH: T.trafficYTSearch || "YouTube Search",
EXT_URL: T.trafficExternal || "External",
SUBSCRIBER: T.trafficSubscribers || "Subscribers",
RELATED_VIDEO: T.trafficSuggested || "Suggested Videos",
PLAYLIST: T.trafficPlaylist || "Playlist",
NOTIFICATION: T.trafficNotifications || "Notifications",
YT_CHANNEL: T.trafficChannelPage || "Channel Page",
NO_LINK_OTHER: T.trafficOther || "Other",
ANNOTATION: T.trafficAnnotations || "Annotations",
CAMPAIGN_CARD: T.trafficCampaign || "Campaign Card",
END_SCREEN: T.trafficEndScreen || "End Screen",
SHORTS: T.trafficShorts || "YouTube Shorts",
};
return map[key] || key;
};
// ── Subcomponents ─────────────────────────────────────────────────────────
const StatCard = ({ label, value, sub }) => (
{label}
{value}
{sub && (
{sub}
)}
);
const ConnectChannelCard = ({ userId }) => {
const T = window.T || {};
return (
📺
{T.analyticsConnectTitle || "Connect your YouTube channel"}
{T.analyticsConnectHint ||
"Connect your channel via Google OAuth to see real analytics — views, watch time, retention, CTR, and traffic sources."}
{T.analyticsConnectNote ||
"Requires YouTube Analytics read access · Data stays private"}
);
};
// ── Daily Chart с tooltip ─────────────────────────────────────────────────
const DailyChart = ({ data }) => {
const [tooltip, setTooltip] = React.useState(null); // { idx, x }
if (!data?.rows?.length) return null;
const views = data.rows.map((r) => r[1] || 0);
const maxViews = Math.max(...views, 1);
const labels = data.rows.map((r) => r[0]?.slice(5));
return (
{data.rows.map((row, i) => {
const h = Math.max(4, (row[1] / maxViews) * 92);
return (
setTooltip(i)}
onMouseLeave={() => setTooltip(null)}
>
);
})}
{/* Tooltip под баром */}
{tooltip !== null && (
{labels[tooltip]}:{" "}
{window.fmtNum(data.rows[tooltip][1])}
)}
{tooltip === null &&
}
{/* X-axis labels: first, middle, last */}
{labels[0]}
{labels[Math.floor(labels.length / 2)]}
{labels[labels.length - 1]}
);
};
// ── Traffic Sources ────────────────────────────────────────────────────────
const TrafficSourcesTable = ({ data }) => {
const T = window.T || {};
if (!data?.rows?.length)
return (
{T.analyticsNoTraffic || "No traffic data available"}
);
const total = data.rows.reduce((sum, r) => sum + (r[1] || 0), 0);
return (
{data.rows.map((row, i) => {
const source = getTrafficLabel(row[0]);
const views = row[1] || 0;
const pct = total > 0 ? (views / total) * 100 : 0;
return (
{source}
{window.fmtNum(views)}
{pct.toFixed(0)}%
);
})}
{T.analyticsNoAudience || "No audience data available"}
);
const {
countries,
device_types,
viewer_types,
ctr,
impressions,
avg_view_duration,
unique_viewers,
} = data;
return (
{/* Топ стран */}
{countries?.rows?.length > 0 && (
{T.analyticsTopCountries || "Top countries"}
{countries.rows.slice(0, 5).map((row, i) => {
const total = countries.rows.reduce((s, r) => s + (r[1] || 0), 0);
const pct = total > 0 ? (row[1] / total) * 100 : 0;
return (
{row[0]}
{pct.toFixed(0)}%
);
})}
)}
{/* Тип устройства */}
{device_types?.rows?.length > 0 && (
{T.analyticsDeviceTypes || "Device types"}
{device_types.rows.map((row, i) => {
const total = device_types.rows.reduce(
(s, r) => s + (r[1] || 0),
0,
);
const pct = total > 0 ? (row[1] / total) * 100 : 0;
const icons = {
MOBILE: "📱",
DESKTOP: "💻",
TV: "📺",
TABLET: "📱",
GAME_CONSOLE: "🎮",
};
const deviceLabels = {
MOBILE: T.deviceMobile || "Mobile",
DESKTOP: T.deviceDesktop || "Desktop",
TV: T.deviceTV || "TV",
TABLET: T.deviceTablet || "Tablet",
GAME_CONSOLE: T.deviceConsole || "Console",
};
return (
{icons[row[0]] || "📺"}
{deviceLabels[row[0]] || row[0]}
{pct.toFixed(0)}%
);
})}
)}
{/* Новые vs вернувшиеся */}
{viewer_types?.rows?.length > 0 && (
{T.analyticsViewerTypes || "New vs returning"}
{viewer_types.rows.map((row, i) => {
const total = viewer_types.rows.reduce(
(s, r) => s + (r[1] || 0),
0,
);
const pct = total > 0 ? (row[1] / total) * 100 : 0;
// subscribedStatus: SUBSCRIBED = постоянные, NOT_SUBSCRIBED = новые
// YouTube Analytics: SUBSCRIBED = постоянные, UNSUBSCRIBED = новые
const isNew =
row[0] === "UNSUBSCRIBED" ||
row[0] === "NOT_SUBSCRIBED" ||
row[0] === "NEW";
const emoji = isNew ? "✨" : "🔄"; // SUBSCRIBED=returning, UNSUBSCRIBED=new
const label = isNew
? T.analyticsNewViewers || "New"
: T.analyticsReturning || "Returning";
return (
{emoji}
{pct.toFixed(0)}%
{label}
);
})}
)}
{/* CTR */}
{ctr !== undefined && ctr !== null && (
{T.analyticsCTR || "Click-through rate (CTR)"}
= 4
? "var(--good)"
: ctr >= 2
? "var(--warn)"
: "var(--bad)",
}}
>
{fmtPct(ctr)}
{impressions
? `${window.fmtNum(impressions)} ${T.analyticsImpressions || "impressions"}`
: ""}
)}
{/* Уникальные зрители */}
{unique_viewers !== undefined && unique_viewers !== null && (
{T.analyticsUniqueViewers || "Unique viewers"}
{window.fmtNum(unique_viewers)}
)}
{T.analyticsTopVideos || "Top videos"}
{T.analyticsByViews || "by views"} · {T.analyticsLast || "last"}{" "}
{days} {T.analyticsDays || "days"}
|
{T.analyticsColVideo || "Video"}
|
{T.analyticsViews || "Views"} |
{T.analyticsWatchTime || "Watch time"} |
{T.analyticsAvgDuration || "Avg duration"}
|
{T.analyticsRetention || "Retention"} |
Outlier |
{data.rows.map((row, i) => {
const videoId = row[0];
const hasTitle =
typeof row[1] === "string" && isNaN(Number(row[1]));
const title = hasTitle ? row[1] : null;
const views = hasTitle ? row[2] : row[1];
const watchMin = hasTitle ? row[3] : row[2];
const avgDur = hasTitle ? row[4] : row[3];
const retention = hasTitle ? row[5] : row[4];
const outlierScore =
avgViews > 0 ? (views || 0) / avgViews : null;
return (
|
{title || videoId}
{title && (
{videoId}
)}
|
{window.fmtNum(views)} |
{window.fmtNum(Math.round((watchMin || 0) / 60))}h
|
{fmtSeconds(avgDur || 0)} |
{fmtPct(retention || 0)} |
|
);
})}
);
};
// ── Main Analytics Screen ─────────────────────────────────────────────────
const AnalyticsScreen = ({ userId }) => {
const T = window.T || {};
const [channels, setChannels] = React.useState([]);
const [selectedChannel, setSelectedChannel] = React.useState(null);
const [analytics, setAnalytics] = React.useState(null);
const [loading, setLoading] = React.useState(true);
const [analyticsLoading, setAnalyticsLoading] = React.useState(false);
const [days, setDays] = React.useState(28);
const [error, setError] = React.useState(null);
React.useEffect(() => {
if (!userId) return;
setLoading(true);
fetch(`${API_URL_ANALYTICS}/api/analytics/channels?user_id=${userId}`)
.then((r) => r.json())
.then((json) => {
setChannels(json.channels || []);
if (json.channels?.length > 0) setSelectedChannel(json.channels[0]);
setLoading(false);
})
.catch(() => setLoading(false));
}, [userId]);
React.useEffect(() => {
if (!selectedChannel || !userId) return;
setAnalyticsLoading(true);
setAnalytics(null);
setError(null);
fetch(
`${API_URL_ANALYTICS}/api/analytics/channel/${selectedChannel.channel_id}?user_id=${userId}&days=${days}`,
)
.then((r) => {
if (!r.ok) throw new Error(`Error ${r.status}`);
return r.json();
})
.then((json) => {
setAnalytics(json);
setAnalyticsLoading(false);
})
.catch(() => {
setError(
T.analyticsError ||
"Failed to load analytics. Check that YouTube Analytics API is enabled.",
);
setAnalyticsLoading(false);
});
}, [selectedChannel?.channel_id, days, userId]);
const summary = React.useMemo(() => {
if (!analytics?.analytics?.rows?.length) return null;
const rows = analytics.analytics.rows;
return {
views: rows.reduce((s, r) => s + (r[1] || 0), 0),
watchMinutes: rows.reduce((s, r) => s + (r[2] || 0), 0),
avgDuration: rows.reduce((s, r) => s + (r[3] || 0), 0) / rows.length,
avgRetention: rows.reduce((s, r) => s + (r[4] || 0), 0) / rows.length,
subsGained: rows.reduce((s, r) => s + (r[5] || 0), 0),
subsLost: rows.reduce((s, r) => s + (r[6] || 0), 0),
likes: rows.reduce((s, r) => s + (r[7] || 0), 0),
};
}, [analytics]);
if (loading) {
return (
{T.loading || "Loading…"}
);
}
return (
{/* Топбар-контролы: канал + период + добавить */}
{channels.length > 0 && (
{channels.length > 1 && (
)}
{channels.length === 1 && selectedChannel && (
{selectedChannel.channel_thumbnail && (
)}
{selectedChannel.channel_name}
)}
{[7, 28, 90].map((d) => (
))}
)}
{channels.length === 0 &&
}
{channels.length > 0 && (
<>
{analyticsLoading && (
{T.analyticsLoading || "Loading analytics…"}
)}
{error && !analyticsLoading && (
{error}
)}
{analytics && !analyticsLoading && summary && (
<>
{/* ── 1. Все 6 метрик в одну строку ── */}
{/* ── 2. График просмотров — полная ширина ── */}
{T.analyticsViewsPerDay || "Views per day"}
{days} {T.analyticsDays || "days"}
{/* ── 3. Топ видео — полная ширина ── */}
{/* ── 4. Аудитория (слева) + Источники трафика (справа) ── */}
{T.analyticsAudience || "Audience"}
{T.analyticsTrafficSources || "Traffic sources"}
)}
)}