shadcn.io is not affiliated with official shadcn/ui
Traffic With A Compare Line Blogger Profile Block for React
A blogger profile that draws 12 months of pageviews as an area chart with a 6 or 12 month range, derived growth on the range before, and top articles that overlay their own monthly line and say their share of the best month.
Installation
Overview
Show a writer's audience as something to read, with this blogger traffic profile for React with Base UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the writer: initials, name, role, her blog and a badge with her subscribers. Three figures follow, all worked out from a typed series of 24 months: the pageviews in the range, the growth on the range before it, with an arrow and the size of the move, and the best month. A pair of Toggle Group buttons picks the last 6 or 12 months and the area chart redraws. The chart is hand-drawn paths in foreground greys, hidden from assistive technology, with a sentence under it and a list of the figures in words for screen readers. Her five top articles are ruled rows with their views in the range and their share of all pageviews, and pressing one overlays that article's own monthly line, dashed, and says what share of its best month it was. A polite line says what changed. It's built from Toggle Group, Badge, Avatar and Guides, with a CSS entrance only. The blog and every figure are invented samples. For a media-kit page, a writer's dashboard or any profile that shows audience.
FAQ
How do I fill it with my own traffic?
Edit SITE (pageviews for each month, oldest first, 24 of them so every range has a month before it), FIRST_MONTH and FIRST_YEAR for the first of them, and ARTICLES, each with its last 12 monthly pageviews. The growth, the totals, the best month, each article's share and the sentence under the chart are all worked out from those numbers. TOP is the top of the scale; set it to a round number above your best month.
How is the growth worked out?
It is the pageviews in the last 6 or 12 months divided by the pageviews in the same number of months before them, minus one. So the 12-month growth compares the last year with the one before it, which is why the series has 24 months. It is shown as an arrow and a percentage, never a green or red tone.
What stays local, and how do I make it real?
All of it: the figures are typed examples and nothing is fetched. In your own app load the monthly pageviews from your analytics and keep the helpers, which only need a list of months. Say where the numbers come from and how fresh they are, as the header does for the sample.
Is the chart accessible?
The drawing is hidden from assistive technology. In its place the figure has a sentence ("Pageviews run from 41.8K to 63.7K a month, best in Sep") and a list with every month's figure, including the picked article's, in words. The range buttons are a named group that follows the arrow keys, the articles are pressed buttons, and the status line is a polite live region present from the start. The chart keeps its months in the same order in a right-to-left page.
Related
- Pro
A creator profile with four follower tiles and nine drawn video thumbnails that a group of three buttons ranks by views, engagement or watch time, each with its number, its metric and a badge on the top one.
- Pro
A social media manager profile as a weekly content queue: one tab for each account, seven day columns of scheduled posts with derived counts and a Gap word on empty days, and a popover on each post with a Move to day select that moves it and says so.
- Pro
A brand ambassador profile as a media kit you can take: audience bars by age and region that add up to 100, three past partners with their reach and rates, a discount code with a real Copy button, and a download of a plain-text kit written from the same numbers.
- Pro
Dual Series Area Chart Stats
Area and lineHome-solar generation against use over one day: two overlapping areas in two weights, the surplus hours hatched, a legend and a band of three totals under the chart.
- Pro
Pinned Posts Blog
Reading toolsThree pin slots in a tinted band above a list of posts: a pin toggle on each row fills the first empty slot, an empty slot reads Pin a post, and the band counts pinned posts.
- Pro
Animator Frame Scrubber Profile
Visual portfoliosAn animator profile as a frame scrubber: a drawn stage worked out from the frame number, a slider through 96 frames at 24 a second with the timecode and shot name, shots as buttons that jump to their first frame, and the credits.