Component gallery
Every exhibit on this page is the real <meteo-*> custom element from
@azohra/meteo.station/elements, upgraded in your browser. A synthetic
fleet generated on the spot feeds them. Nothing is fetched, and none of the
exhibits is a screenshot. The sections follow the reference dashboard’s
registry, one section per component family. The toolbar’s unit control
re-labels every printed speed, and Live pauses the republish loop. The
React binding renders byte-identical DOM from the
same feed. Custom elements documents the
attributes and properties each tag below uses.
Two ways in
The same summer-midday points, once as the object windRose() returns and once as the component that draws it: the headless core and the bindings are peers; take either.
Headless: the object
import { windRose, filterByMonth, filterByTimeOfDay, METEOROLOGICAL_SEASON_MONTHS } from "@azohra/meteo.station"; const summer = filterByMonth(history, METEOROLOGICAL_SEASON_MONTHS.summer); const midday = filterByTimeOfDay(summer, 9 * 60, 15 * 60); const rose = windRose(midday, 16);
Headed: the same data, drawn
<meteo-wind-rose id="rose"></meteo-wind-rose> rose.points = midday;The station card
With no children, <meteo-station-card> renders the full card. Give it children to choose the pieces yourself. The second card uses only the chart and summary.
Current conditions
A live instrument beside a dead one; the outage keeps its card and says why, instead of vanishing.
History, graded and plain
The first two panels show the same six hours. One bands the trace by your thresholds, and the other sets thresholds="none" to draw it in the neutral accent. The third panel holds four days of history. window-hours re-slices it to 6, 12, or 24 h, and compare-offset-days overlays an earlier day’s trace on today’s x-axis. Both re-slice the same fetched points in the browser.
With thresholds: 12 · 20 · 28 km/h
Without thresholds
History lab: four days fetched, with window-hours and compare-offset-days
Wind roses
Launch Ridge's 260°–340° launch window is drawn as a ring around the rose. The petals still show the full distribution, and the favorable-share stat reports how much of the wind comes from inside the window as one number.
Launch Ridge: graded, with the launch window ring
Summit Logger: plain
A season, not a window
Fourteen months of history behind one rose and one typical day; All/Month/Season pick what filterByMonth narrows to (a season is just a fixed three-month group), filterByTimeOfDay narrows further; <meteo-daily-pattern> vector-averages the lot into a day.
<meteo-wind-rose>: of the year’s samples
<meteo-daily-pattern>: the whole 14 months, vector-averaged
Climatology: the cube's views
The same fourteen months folded once into a StationClimatology cube: every wedge of <meteo-climatology-rose> stacks by the document's own thresholds, the favorable share and coverage caption sit beneath, and <meteo-climatology-daily-pattern> re-sums the cube — the July filter refetches nothing.
<meteo-climatology-rose>: stacked wedges, judged ring
<meteo-climatology-daily-pattern>: the cube's typical day
Live detail
<meteo-compass-fan> draws every sample of the rolling window as a faint arrow aged by tenth, with the newest as the solid needle; a tight fan means steady direction. <meteo-recent-summaries> panels the source's own 1-minute and 5-minute step blocks. Both are tinted by the launch window's verdict.
<meteo-compass-fan>: the ghost fan
<meteo-recent-summaries>: the step blocks
Trends
Temperature and sea-level pressure over the window; the 20-minute dropout breaks both traces, never interpolated over.
Temperature: Launch Ridge
Pressure: Launch Ridge
Air and precipitation
Every air quantity renders through <meteo-air-matrix> behind a live trigger line; a station gets a column only when it declares the conditions capability.
The fleet, on one table
One row per station, unavailable rows keep their geometry; no attributes at all, the provider supplies everything.
Strips
The table row as a standalone one-liner: <meteo-station-strip>, provider-fed here, and the outage keeps its line at full height.
Primitives
The smallest pieces, one at a time, then composed. Every atom is a plain inline element you can drop into your own markup.
The atoms: the feed’s primary station, one element at a time
<meteo-speed><meteo-gust><meteo-lull><meteo-direction><meteo-temperature><meteo-pressure station-id="valley-tempest"><meteo-updated-at><meteo-band-chip> + labels<meteo-sparkline>Composed: the atoms disappear into your own prose
Right now at Launch Ridge it’s blowing
Right now at {station.name} it's blowing <meteo-speed> from the <meteo-direction>, gusting <meteo-gust>, updated <meteo-updated-at>.Band chips across the fleet: five words over 5 · 12 · 20 · 28 km/h
These chips declare four bounds of their own, overriding the page feed’s 12 · 20 · 28 km/h; thresholds are the consumer’s, per feed or per element.
The bare dial: one 160-unit drawing, any size
Strips with sparklines: the board-row pairing
Freshness: the presenter, all three words
<meteo-freshness-badge> is the presenter for rows you compose yourself; the cards and table judge their own freshness from the feed’s clocks and re-judge between polls.
No provider, explicit props
This instrument renders outside the provider: station, clocks, thresholds, and unit all arrive as props.