shadcn.io is not affiliated with official shadcn/ui
Film Director Filmography Profile Block for Vue
A film director profile as a filmography on a year axis: eight films as pickable bars of box office on a fixed axis with a star over award winners, a genre filter that dims the other films, and rows for the picked film's budget, earnings, awards and collaborators.
Installation
Overview
Put a director's films on a year axis, with this film director filmography profile for Vue with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the director: initials, name, role and place, and a badge that counts the films and the awards, worked out from the data. A Toggle Group (All, Drama, Thriller, Comedy, Documentary) narrows the chart by dimming the other films, not by removing them, so the axis and the panel never move. The chart is eight bars, one per film in release order, drawn in CSS on a fixed axis from zero to twenty-five million: each bar is a radio you can pick with a click or the arrow keys, its box office printed above it and its year under it, and a film that won something wears a star. The film you pick fills the rows under the chart: its length, budget, box office and how many times the budget it earned (worked out), its awards at invented festivals and its three collaborators. It's built from Toggle Group, Badge, Avatar and Guides with CSS only, so the chart ports to every target as it is. The director, the films, the festivals and the money are invented. For a film-credits database, a director's own site or any profile with a career on a time axis.
FAQ
How do I fill it with my own films?
Edit FILMS in the Ark file: each film has a title, a year, a genre, its length in minutes, its budget and box office in tenths of a million (42 is $4.2M), its awards as text and its crew as [role, name] pairs. The axis top is rounded up from the biggest box office, the bar heights, the counts in the person badge and the "earned back" multiple are worked out from the data. A film with no awards simply has an empty list.
Why is the chart drawn in CSS and not with a chart library?
The bars are a few spans on a fixed axis with the same numbers printed in text, so the chart needs no chart code, ports to every framework unchanged, and every bar can be a real radio with a spoken name ("Night Ledger, 2017, box office $14.0M, 1 award"). Nothing is hidden behind a hover: the figure is above each bar and the film's details are in the rows below it.
What does the genre filter do to the bars?
It dims the films of other genres to a faint tint and takes them out of the tab order; it never removes them, so the axis, the bars and the height of the panel stay exactly where they were. The status line says how many films are lit ("2 of 8 films lit, the rest dimmed."). If the film you had picked is dimmed by the new filter, the first film that is lit is picked instead.
How do I use the chart with a keyboard or a screen reader?
The bars are native radios in one group named "Films by box office, in release order", so Tab enters at the picked film and the arrow keys move to the next and previous lit film, picking each. Dimmed films are disabled and are skipped. The star is decoration repeated in each bar's name as the number of awards, and the figures above the bars are hidden from screen readers because the names already say them.
Is it accessible, and what about right-to-left?
The chart's axis and bars always run left to right (they are a time axis), and the numbers inside them keep their order; everything around the chart follows the page's direction, with names isolated. The picked bar is full weight and the others a mid tint, and the picked year is bold, so no meaning rests on shade alone. The status line is a polite live region present from the start and the entrance is a CSS fade that stops under reduced motion.
What stays local, and how do I wire it to real data?
Everything is typed sample data: picking a film or a genre only changes the page and the status line, and the awards, festivals and collaborators are invented. To wire it up, pass your films into FILMS (a server component can do it), keep the helpers that scale the bars and sum the awards, and add links from the collaborators to their own pages in your app.