YouTubeChannelPage

Code

import { YouTubeChannelPage } from "@fadymondy/nasaq/web";import { useState } from "react";export function Channel({ service, data }: { service: React.ComponentProps<typeof YouTubeChannelPage>["service"]; data?: React.ComponentProps<typeof YouTubeChannelPage>["data"] }) {  const [period, setPeriod] = useState(28);  return <YouTubeChannelPage service={service} data={data} period={period} onPeriodChange={setPeriod} onConnect={async () => {}} onDisconnect={async () => {}} />;}

Marketing · beta

Live examples and controls: YouTubeChannelPage in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/youtube-channel-page.json

The YouTube page shows a channel's performance: MetricTiles for views, watch time, net subscribers and average view duration (they select the chart's metric), a TimeSeriesPanel with previous-period comparison, and tabs for the top videos (a BreakdownTable with watch-time and duration columns), traffic sources and countries. The channel name and subscriber count sit in the subtitle. The name is text; no YouTube logo is drawn unless you pass the official asset.

When to useCopy Anchor Link

• A creator or brand dashboard fed by the YouTube Analytics API.
• Reporting on video performance next to other analytics.

When not to useCopy Anchor Link

• Playing or embedding videos.
• Web traffic: use GoogleAnalyticsPage.

ImportCopy Anchor Link

import { YouTubeChannelPage } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { YouTubeChannelPage } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Channel({ service, data }: { service: React.ComponentProps<typeof YouTubeChannelPage>["service"]; data?: React.ComponentProps<typeof YouTubeChannelPage>["data"] }) {
  const [period, setPeriod] = useState(28);
  return <YouTubeChannelPage service={service} data={data} period={period} onPeriodChange={setPeriod} onConnect={async () => {}} onDisconnect={async () => {}} />;
}

AnatomyCopy Anchor Link

YouTubeChannelPage     AnalyticsPageFrame
  MetricTiles          selectable; drives the chart
  TimeSeriesPanel      views | watch hours | subscribers
  Tabs (underline)     Top videos | Traffic sources | Audience

APICopy Anchor Link

YouTubeChannelPageCopy Anchor Link

YouTubeChannelDataCopy Anchor Link

channel? (name, handle?, subscribers?), summary (views, watchHours, subscribers, avgSeconds; each { value, previous?, trend? }), series (rows of date, views, watchHours, subscribers), previousSeries?, videos ({ id, title, views, previousViews?, watchHours, avgSeconds, href? }), trafficSources and countries.

ExamplesCopy Anchor Link

Connect screen:

import { YouTubeChannelPage } from "@fadymondy/nasaq/web";

export const Connect = () => (
  <YouTubeChannelPage
    service={{ id: "youtube", name: "YouTube", scopes: [{ id: "yt-analytics.readonly", label: "See your YouTube Analytics reports", required: true }], status: "disconnected" }}
    period={28}
    onPeriodChange={() => {}}
    onConnect={async () => {}}
    onDisconnect={async () => {}}
  />
);

AccessibilityCopy Anchor Link

The page has one h1; tabs follow the WAI-ARIA tabs pattern (arrow keys move, the panel is labelled by its tab). Charts and tables carry text alternatives. Disconnect asks for confirmation. Localise every string you override through labels.

RTL & i18nCopy Anchor Link

• The whole page mirrors; charts run right to left.
• URLs, paths and identifiers stay left-to-right inside Arabic text.
• Every figure uses the active locale with Western digits and is bidi-isolated (Num), so +12.4% keeps its order in Arabic.
• Video titles follow their own direction.
• Durations use Arabic unit abbreviations in Arabic.

Styling & tokensCopy Anchor Link

• Colours come from tokens (--primary, --nq-success, --nq-warning, --nq-danger, --nq-tag-*); never pass raw hex.
• Composed from tokens only; extend with className.

Do / Don'tCopy Anchor Link

• Do pass watch time in hours and durations in seconds.
• Don't draw a YouTube logo yourself; use only the official asset.

RelatedCopy Anchor Link

• metric-tiles
• time-series-panel
• breakdown-table
• geo-list
• analytics-connect

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-marketing-pages-youtube--docs