Passer au contenu principal

VenueMap

Implemented

Venue-level sold-inventory floor plan — a static figure/grid of section tiles colored by sold percentage, with a stage block and a four-tier legend. Not a geographic map: distinct from the storefront dashboard's same-named Google-Maps VenueMap wrapper (lat/lng/apiKey). Venue-level overview companion to SeatMap (seat-level statuses). Built-in labels are FR-CA by default (Scène, % vendu, Devant la scène) with a full EN set via the locale prop (Stage, % sold, Front of stage).

Categoryorganisms
Sourcecomponents/organisms/venuemap/VenueMap.tsx
AI HintUse for venue-level sold-inventory overviews (per-section % sold at a glance) on event and admin surfaces. Static display organism — stateless and server-safe (no "use client"); built-in labels localized via locale ('fr' default, 'en'), venueName/sections/stageLabel carry caller-provided strings. For seat-level statuses use SeatMap; tier legend SeatMapLegend; checkout picking SeatPicker. Do NOT pass venue/zoom/apiKey — that is the storefront dashboard Google-Maps wrapper's API.

Plan de salle visuel avec sections colorées selon le pourcentage vendu. Étiquettes intégrées FR-CA par défaut (« Plan de salle — Maison symphonique · Section · % vendu · Devant la scène · Disponible · Bien vendu · Presque complet · Complet »), jeu EN complet via locale='en' (Stage, % sold, Front of stage, Available…Full).

VenueMap

Organism — Event family (Family 2)

Carte de la salle (grid 2 colonnes, 3 à partir de sm:) avec une zone Scène sur la droite et une légende explicite des couleurs. Chaque section porte un aria-label qui annonce le pourcentage vendu. Teintes par palier = paires ADR-027 tint/fg (texte AA ≥ 4,5:1 dans les deux thèmes) — pas d'aplats pleins.

Maison symphonique de Montréal
  • Disponible (< 30 %)
  • Bien vendu (30-69 %)
  • Presque complet (70-94 %)
  • Complet (≥ 95 %)

This component supports light and dark mode.

VenueMap (EN)

Organism — Event family (Family 2)

Variante EN — locale='en' : « Venue map — … », « Stage / Front of stage », « N% sold, capacity … », légende « Available / Selling well / Nearly full / Full ».

Maison symphonique de Montréal
  • Available (< 30%)
  • Selling well (30-69%)
  • Nearly full (70-94%)
  • Full (≥ 95%)

Props

Prop
Type
Default
Description
venueName*
string
—

Nom du lieu.

sections*
VenueSection[]
—

Sections de la salle.

stageLabel
string
« Scène » (fr) / « Stage » (en)

Libellé de la scène — retombe sur le libellé intégré selon la locale.

locale
'fr' | 'en'
fr

Localise les étiquettes intégrées (aria de la figure, gabarits vendu/capacité, scène, légende). 'fr' par défaut (rendu FR historique identique à l'octet près) ; type VenueMapLocale exporté du barrel.

className
string
—

Classes additionnelles sur la figure racine.

Props

Preview

VenueMap

Prop
Type
Required
Default
Description
venueName
string
Required
—

Venue name — rendered as the figcaption and interpolated into the figure aria-label « Plan de salle — {venueName} » (fr) / "Venue map — {venueName}" (en).

sections
VenueSection[]
Required
—

One tile per section. VenueSection = { id, name, soldPct (0-100), capacity? } — soldPct drives the tier color; capacity is appended to the tile aria-label when present.

stageLabel
string
Optional
'Scène' (fr) / 'Stage' (en)

Pre-formatted stage label rendered as the uppercase heading of the stage block (e.g. « Scène — Fond de salle »); falls back to the locale-aware built-in.

locale
'fr' | 'en'
Optional
'fr'

Localizes the built-in labels (figure aria template, sold/capacity templates, stage defaults, legend entries). 'fr' (default) keeps the original FR-CA rendering byte-identical; 'en' renders the English set. VenueMapLocale type exported from the barrel.

className
string
Optional
—

Appended to the root figure element.

Quick use:<VenueMap />

Accessibility

ARIA rolefigure

ARIA

1 rule

WCAG 4.1.2

Root is a <figure aria-label='Plan de salle — {venueName}' (fr) / 'Venue map — {venueName}' (en)> with <figcaption>{venueName}</figcaption>; each section tile carries role='img' with aria-label '{name} — {soldPct}% vendu[, capacité {capacity}]' (fr) / '{soldPct}% sold[, capacity {capacity}]' (en)

a11y

1 rule

WCAG 1.4.1

Sold tiers carry a text legend (fr : Disponible < 30 %, Bien vendu 30-69 %, Presque complet 70-94 %, Complet ≥ 95 % ; en : Available, Selling well, Nearly full, Full) so tiers survive without color vision; legend swatches are aria-hidden

Type

1 rule

NASA Rule 2

soldPct drives the ADR-027 tier: ≥95 error, ≥70 warning (amber family), ≥30 info (teal family — brand teal is not AA-safe as a text background), else success — each rendered as -tint bg + -fg text + -tint-border, fg-on-tint ≥ 4.5:1 in BOTH themes (WCAG AA)

Usage

Import

tsxSnippet
import { VenueMap } from "@epasslive/design-system"

Example 1

tsxSnippet
<VenueMap venueName="Maison symphonique" sections={[{ id: "orch", name: "Orchestre", soldPct: 92, capacity: "1 100 places" }, { id: "balc", name: "Balcon", soldPct: 41 }]} />

Example 2

tsxSnippet
<VenueMap venueName="Hangar 16" sections={sections} stageLabel="Scène — Fond de salle" />

Anti-patterns

— Do not fetch data directly in organisms

— Avoid tight coupling to specific data sources

— Do not pass venue/zoom/apiKey (Google Maps props) — different component, the storefront dashboard wrapper

Design System v4.1.0 | ePassLive