Skip to the content
Perron
GitHub

Patterns

The contract

Pieces of a Mylder screen, built only from Perron components.

A pattern takes Mylder's own data, such as a disruption or a vehicle's trip, and lays out components for it. It never reaches past them to Base UI, so every pattern keeps their keyboard, their words in four languages and both themes.

On the map screen

Disruptions
DelaysAffected lines
  • F

Signal fault at Danshøj

Trains between Flintholm and Ny Ellebjerg run slower than planned.
Vehicles in service
  1. 210
  2. 140
  3. 100
  4. 90
  5. 120
  6. 380
  7. 820
  8. 1 240
  9. 1 260
  10. 1 100
  11. 940
  12. 960
  13. 980
  14. 990
  15. 1 020
  16. 1 180
  17. 1 250
  18. 1 260
  19. 1 120
  20. 860
  21. 640
  22. 520
  23. 420
  24. 300
Scale
  1. 1 DisruptionCard, and DayProfileChart in a DataStatePanel, in the overview sheet
  2. 2 DetailPanel, with DetailHeader and StopTimeline
  3. 3 ScaleBar beside MapControls
  4. 4 KioskBar across the top, in kiosk mode

Stable 14

DepartureRow

One departure from a stop, as one row of the stop's list of departures: the line's badge and where it goes, how fresh the vehicle's data is, and how soon it leaves, with its timetabled time, or the expected time with the timetabled one struck through beside it, and how late it runs, or, for a line that runs to an interval, how often it runs. A cancelled departure stays in the list, marked "Cancelled", and a train's platform or track can join the row's second line.

LineBadge · Delay · VehicleDot
  1. Svanemøllen PassedOn time
  2. Nordhavn Passed 1 min early
  3. ØsterportNext stop 2 min late
  4. Nørreport 3 min late

StopTimeline

The stops of one vehicle's trip, in order, on a rail in its line's colour: each stop's name, its time, the time real-time data expects there and how late the vehicle runs there, with the stops already passed set back and the next stop marked, as in a vehicle's detail panel. A cancelled call stays in the list, marked "Cancelled".

StationIcon · Delay
Vehicles in service
  1. 210
  2. 140
  3. 100
  4. 90
  5. 120
  6. 380
  7. 820
  8. 1 240
  9. 1 260
  10. 1 100
  11. 940
  12. 960
  13. 980
  14. 990
  15. 1 020
  16. 1 180
  17. 1 250
  18. 1 260
  19. 1 120
  20. 860
  21. 640
  22. 520
  23. 420
  24. 300

DayProfileChart

How one count moves across a day, such as the vehicles in service each hour from midnight to midnight: one line in the chart colour, the area under it, a 24-hour time axis, and a value tip that gives the time and the count under the pointer or the keys.

No components; chart tokens only

In design 0

    Use a pattern

    Patterns have their own entry point. Pass Mylder's data; the pattern brings the words for the kind of disruption from the reader's language.

    import { DisruptionCard } from '@mylder/perron/patterns'

<DisruptionCard
  severity="delay"
  lines={[{ line: 'f', name: 'F' }]}
  title="Signal fault at Danshøj"
>
  Trains between Flintholm and Ny Ellebjerg run slower than planned.
</DisruptionCard>