# YouTubeChannelPage > A YouTube channel report - views, watch time, subscribers and view duration with comparison, a chart, top videos, traffic sources and countries. Source: https://docs.nasaqui.com/components/youtube-channel-page ## Install ```bash 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 use - A creator or brand dashboard fed by the YouTube Analytics API. - Reporting on video performance next to other analytics. ## When not to use - Playing or embedding videos. - Web traffic: use [`GoogleAnalyticsPage`](https://docs.nasaqui.com/components/google-analytics-page). ## Import ```tsx import { YouTubeChannelPage } from "@fadymondy/nasaq/web"; ``` ## Quick start ```tsx import { YouTubeChannelPage } from "@fadymondy/nasaq/web"; import { useState } from "react"; export function Channel({ service, data }: { service: React.ComponentProps["service"]; data?: React.ComponentProps["data"] }) { const [period, setPeriod] = useState(28); return {}} onDisconnect={async () => {}} />; } ``` ## Anatomy ``` YouTubeChannelPage AnalyticsPageFrame MetricTiles selectable; drives the chart TimeSeriesPanel views | watch hours | subscribers Tabs (underline) Top videos | Traffic sources | Audience ``` ## API ### YouTubeChannelPage | Prop | Type | Default | Description | | --- | --- | --- | --- | | `service` | `IntegrationService` | required | The source and its state; anything but `connected` shows the connect screen. | | `data` | `…Data` | none | The report. While it is undefined the page shows skeletons. | | `period / onPeriodChange` | `number / (n) => void` | required | The reporting period in days (hours for the APM page). | | `loading` | `boolean` | `false` | Skeletons. | | `error / onRetry` | `ReactNode / () => void` | none | Shows an error with a retry button. | | `onRefresh / refreshing / updatedAt` | `() => Promise / boolean / date` | none | Refresh button and the updated time. | | `onConnect / onDisconnect / onSelectAccount` | `async callbacks` | required | OAuth and account picker hooks; the host does the real work. | | `className` | `string` | none | Extra classes on the root. | | `labels / frameLabels` | `Partial<…>` | none | Page strings and the shared header strings. | ### YouTubeChannelData `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`. ## Examples Connect screen: ```tsx import { YouTubeChannelPage } from "@fadymondy/nasaq/web"; export const Connect = () => ( {}} onConnect={async () => {}} onDisconnect={async () => {}} /> ); ``` ## Accessibility 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 & i18n - 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 & tokens - 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't - Do pass watch time in hours and durations in seconds. - Don't draw a YouTube logo yourself; use only the official asset. ## Related - [`metric-tiles`](https://docs.nasaqui.com/components/metric-tiles) - [`time-series-panel`](https://docs.nasaqui.com/components/time-series-panel) - [`breakdown-table`](https://docs.nasaqui.com/components/breakdown-table) - [`geo-list`](https://docs.nasaqui.com/components/geo-list) - [`analytics-connect`](https://docs.nasaqui.com/components/analytics-connect) ## Lab https://docs.nasaqui.com/?path=/docs/components-marketing-pages-youtube--docs ## Code ### React ```tsx import { YouTubeChannelPage } from "@fadymondy/nasaq/web"; import { useState } from "react"; export function Channel({ service, data }: { service: React.ComponentProps["service"]; data?: React.ComponentProps["data"] }) { const [period, setPeriod] = useState(28); return {}} onDisconnect={async () => {}} />; } ``` ### shadcn ```tsx import { YouTubeChannelPage } from "@/components/ui/youtube-channel-page"; import { useState } from "react"; export function Channel({ service, data }: { service: React.ComponentProps["service"]; data?: React.ComponentProps["data"] }) { const [period, setPeriod] = useState(28); return {}} onDisconnect={async () => {}} />; } ``` ### Vue ```vue ``` ### Blade ```blade @php $service = [ 'id' => 'yt', 'name' => 'YouTube', 'scopes' => [['id' => 'youtube.analytics.readonly', 'label' => 'Read channel analytics', 'required' => true]], 'status' => 'connected', 'connectedAs' => 'channel@nasaq.dev', ]; $data = [ 'channel' => ['name' => 'Nasaq Studio', 'handle' => '@nasaq', 'subscribers' => 48200], 'summary' => [ 'views' => ['value' => 128400, 'previous' => 112300, 'trend' => [3900, 4100, 4300, 4200, 4500, 4700]], 'watchHours' => ['value' => 6240, 'previous' => 5810, 'trend' => [190, 200, 205, 210, 215, 220]], 'subscribers' => ['value' => 840, 'previous' => 720, 'trend' => [25, 27, 28, 30, 29, 31]], 'avgSeconds' => ['value' => 174, 'previous' => 160, 'trend' => [160, 165, 168, 170, 172, 174]], ], 'series' => [ ['date' => '2026-09-27', 'views' => 4300, 'watchHours' => 205, 'subscribers' => 28], ['date' => '2026-09-28', 'views' => 4500, 'watchHours' => 215, 'subscribers' => 29], ['date' => '2026-09-29', 'views' => 4700, 'watchHours' => 220, 'subscribers' => 31], ], 'previousSeries' => [ ['date' => '2026-08-30', 'views' => 3800, 'watchHours' => 185, 'subscribers' => 24], ['date' => '2026-08-31', 'views' => 3900, 'watchHours' => 190, 'subscribers' => 25], ['date' => '2026-09-01', 'views' => 4000, 'watchHours' => 195, 'subscribers' => 26], ], 'videos' => [ ['id' => 'v1', 'title' => 'Building an Arabic-first design system', 'views' => 24100, 'previousViews' => 19800, 'watchHours' => 1320, 'avgSeconds' => 312], ['id' => 'v2', 'title' => 'RTL layouts without the pain', 'views' => 18700, 'previousViews' => 18900, 'watchHours' => 940, 'avgSeconds' => 244], ], 'trafficSources' => [ ['id' => 'search', 'label' => 'YouTube search', 'value' => 52000, 'previous' => 46000], ['id' => 'suggested', 'label' => 'Suggested videos', 'value' => 41000, 'previous' => 36000], ], 'countries' => [ ['code' => 'SA', 'value' => 41000, 'previous' => 36500], ['code' => 'EG', 'value' => 29000, 'previous' => 27000], ], ]; @endphp ``` ### HTML + Alpine ```html

YouTube

Nasaq Studio · 48.2K subscribers

Connected Connected to channel@nasaq.dev

Channel performance

Select a tile to chart it
Total 13,500 +15.4%

Top videos

Video Views Change Watch time Avg. duration
Building an Arabic-first design system 24,100 +21.7% 1,320 5m 12s
RTL layouts without the pain 18,700 -1.1% 940 4m 04s
```