Data

GridRaster

One row per weekday, one column per hour; cells 16 px, 2 px gap, radius 2 pxEine Zeile pro Wochentag, eine Spalte pro Stunde; Zellen 16 px, 2 px Abstand, Radius 2 px

ScaleSkala

Five steps from the app primary palette, light to dark (heat-1 to heat-5); in dark mode low values stay close to the backgroundFünf Stufen aus der Primary-Palette der App, von hell nach dunkel (heat-1 bis heat-5); im Dark Mode bleiben niedrige Werte nah am Hintergrund

No dataKeine Daten

heat-empty (secondary-100); never the lightest step, so zero and missing stay apartheat-empty (secondary-100); nie die hellste Stufe, damit null und fehlend unterscheidbar bleiben

EmptyLeer

Nothing in the whole time frame: only a 1 px line frame (radius 16 px) in the size of the heatmap with the empty state (calendar icon, “No data for this time frame”, one line of help); no cells, axes or legendNichts im ganzen Zeitraum: nur ein 1-px-Rahmen (Radius 16 px) in der Größe der Heatmap mit dem leeren Zustand (Kalender-Icon, „No data for this time frame“, eine Zeile Hilfe); keine Zellen, Achsen oder Legende

Axis labelsAchsenbeschriftung

12 px Geist Light, text-muted; hours every 6 h12 px Geist Light, text-muted; Stunden alle 6 h

LegendLegende

Scale bar with minimum and maximum, plus the no-data swatchSkalenleiste mit Minimum und Maximum, dazu das Feld für keine Daten

HoverHover

2 px secondary-900 outline on the cell and a tooltip with day, hour and value2 px Kontur in secondary-900 um die Zelle und ein Tooltip mit Tag, Stunde und Wert

KeyboardTastatur

One tab stop for the grid; arrow keys, Home and End move between cells, the tooltip follows the focusEin Tab-Stopp für das Raster; Pfeiltasten, Pos1 und Ende wechseln die Zelle, der Tooltip folgt dem Fokus

AccessibilityBarrierefreiheit

Every cell has an aria-label with day, hour and value; color is never the only carrierJede Zelle hat ein aria-label mit Tag, Stunde und Wert; Farbe ist nie der einzige Träger der Information

UseVerwendung

One value per day over a month or a year, e.g. the busy hours of a vehicle; for hours within the week use the HeatmapEin Wert pro Tag über einen Monat oder ein Jahr, z. B. die Busy-Stunden eines Fahrzeugs; für Stunden innerhalb der Woche die Heatmap verwenden

Month viewMonatsansicht

Calendar grid Mon to Sun, one row per week; day cells 32 px with the day number in 12 px tabular figures, radius 8 px, 2 px gap; secondary-900 numbers on the three light steps, secondary-000 on the dark onesKalenderraster Mo bis So, eine Zeile pro Woche; Tageszellen 32 px mit der Tageszahl in 12 px Tabellenziffern, Radius 8 px, 2 px Abstand; secondary-900-Zahlen auf den drei hellen Stufen, secondary-000 auf den dunklen

Year viewJahresansicht

One column per week, one row per weekday, cells 16 px like the Heatmap; month names above the week where the month starts, Mon, Wed, Fri, Sun in front; scrolls sideways when the box is too narrowEine Spalte pro Woche, eine Zeile pro Wochentag, Zellen 16 px wie bei der Heatmap; Monatsnamen über der Woche, in der der Monat beginnt, Mon, Wed, Fri, Sun davor; scrollt seitlich, wenn die Box zu schmal ist

RangeZeitraum

Year view either for the calendar year (range="year", default) or rolling: range="last-12-months" shows the weeks from the day after the same date one year ago up to today, or from and to (yyyy-mm-dd) for any span; the first week starts on its weekday, month names above the week where the month starts and the first month above the first week; the header shows the spanJahresansicht entweder für das Kalenderjahr (range="year", Standard) oder rollierend: range="last-12-months" zeigt die Wochen vom Tag nach demselben Datum vor einem Jahr bis heute, oder from und to (yyyy-mm-dd) für jeden Zeitraum; die erste Woche beginnt an ihrem Wochentag, Monatsnamen über der Woche, in der der Monat beginnt, und der erste Monat über der ersten Woche; der Kopf zeigt den Zeitraum

ScaleSkala

The five Heatmap steps heat-1 to heat-5 and heat-empty for no data, measured against the highest day of the year, so month and year view look the sameDie fünf Heatmap-Stufen heat-1 bis heat-5 und heat-empty für keine Daten, gemessen am höchsten Tag des Jahres, damit Monats- und Jahresansicht gleich aussehen

Later daysSpätere Tage

Days after today stay without fill, month view shows the number in text-mutedTage nach heute bleiben ohne Füllung, die Monatsansicht zeigt die Zahl in text-muted

HeaderKopfzeile

Month and year 14 px Medium with previous / next month (dark tertiary) in the month view; segmented control Month | Year at the endMonat und Jahr 14 px Medium mit vorigem / nächstem Monat (Dark Tertiary) in der Monatsansicht; Segmented Control Month | Year am Ende

LegendLegende

Heatmap legend below: scale bar from 0 to the highest value and the no-data swatchHeatmap-Legende darunter: Skala von 0 bis zum höchsten Wert und das Feld für keine Daten

HoverHover

2 px secondary-900 outline and a tooltip with weekday, date and value2 px secondary-900-Umriss und ein Tooltip mit Wochentag, Datum und Wert

KeyboardTastatur

One tab stop for the grid; arrow keys move by day and week, Home and End to the first and last day shownEin Tab-Stopp für das Raster; Pfeiltasten springen um einen Tag und eine Woche, Pos1 und Ende zum ersten und letzten gezeigten Tag

EmptyLeer

No value in the whole year: line frame with the empty state “No data for this time frame”, no legendKein Wert im ganzen Jahr: Linienrahmen mit dem Empty State „No data for this time frame“, keine Legende

LookAussehen

LibraryBibliothek

Chart.js 4 on a canvas; every color, size and font is read from the tokens at runtime and redrawn when light / dark or the app changesChart.js 4 auf einem Canvas; jede Farbe, Größe und Schrift wird zur Laufzeit aus den Tokens gelesen und bei Hell / Dunkel oder App-Wechsel neu gezeichnet

ColorsFarben

Series take the Chart colors in their order (chart-01, chart-02 …, WidgetColors in the apps); vehicle states always take their state colors; never the app colorReihen nehmen die Chart-Farben in ihrer Reihenfolge (chart-01, chart-02 …, WidgetColors in den Apps); Fahrzeugzustände immer ihre Zustandsfarben; nie die App-Farbe

LinesLinien

Lines never use light palette colors (chart-02 …); take the next strong colorLinien nutzen nie helle Palettenfarben (chart-02 …); sie nehmen die nächste kräftige Farbe

AxesAchsen

Labels 12 px Geist Light, text-muted, 8 px from the plot; x axis line in the line color, no vertical grid; no y axis line, horizontal grid lines in the line color, at most 5 steps, starting at 0Beschriftung 12 px Geist Light, text-muted, 8 px vom Diagramm; x-Achsenlinie in der Linienfarbe, kein senkrechtes Raster; keine y-Achsenlinie, waagrechte Rasterlinien in der Linienfarbe, höchstens 5 Stufen, ab 0

SizesGrößen

Plot at least 240 px high and as wide as its box; donut 160 px; extra space goes to the width, never below the minimum heightDiagramm mindestens 240 px hoch und so breit wie seine Box; Donut 160 px; zusätzlicher Platz geht in die Breite, nie unter die Mindesthöhe

Legend and tooltipLegende und Tooltip

LegendLegende

Above the plot, aligned to the start (donut: next to the ring); 32 px items with 40 px hit area, 8 px dot, 12 px text, hover primary-200Über dem Diagramm, am Anfang ausgerichtet (Donut: neben dem Ring); 32-px-Einträge mit 40 px Trefferfläche, 8-px-Punkt, 12 px Text, Hover primary-200

ToggleUmschalter

Clicking a legend item hides or shows its series; a hidden series shows an empty dot and crossed-out text, the axes rescaleKlick auf einen Legendeneintrag blendet seine Reihe aus oder ein; eine ausgeblendete Reihe zeigt einen leeren Punkt und durchgestrichenen Text, die Achsen passen sich an

TooltipTooltip

The guide Tooltip: secondary-900 surface, secondary-000 text, radius 8 px, 4 / 8 px padding, 12 px; title in Medium, one row per series with dot, name and value; 8 px above the highest point, beside the column when there is no room above, always inside the chartDer Tooltip des Guides: Fläche secondary-900, Text secondary-000, Radius 8 px, Innenabstand 4 / 8 px, 12 px; Titel in Medium, eine Zeile pro Reihe mit Punkt, Name und Wert; 8 px über dem höchsten Punkt, neben der Spalte, wenn oben kein Platz ist, immer innerhalb des Diagramms

InteractionInteraktion

Hover or touch shows the tooltip for the whole column, all visible series at that point; donut: the hovered sliceHover oder Berührung zeigt den Tooltip für die ganze Spalte, alle sichtbaren Reihen an dieser Stelle; Donut: das berührte Segment

Formats and statesFormate und Zustände

NumbersZahlen

en-US with thousands separator, at most one decimal, unit after a space (1,240 orders · 82 % · 3.5 h)en-US mit Tausendertrennzeichen, höchstens eine Nachkommastelle, Einheit nach einem Leerzeichen (1,240 orders · 82 % · 3.5 h)

Dates and timesDatum und Uhrzeit

In the user format: axis short without the year (11-05), tooltip the full date (Thu 2026-11-05), hours 09:00Im Format des Nutzers: Achse kurz ohne Jahr (11-05), Tooltip das volle Datum (Thu 2026-11-05), Stunden 09:00

EmptyLeer

Guide EmptyState “No data for this time frame” in the chart box, same height, no legendEmptyState des Guides „No data for this time frame“ in der Diagrammbox, gleiche Höhe, ohne Legende

LoadingLaden

Guide Skeleton block in the chart box, same height, no legendSkeleton-Block des Guides in der Diagrammbox, gleiche Höhe, ohne Legende

ResponsiveResponsiv

Redraws on resize; x labels are skipped so they never overlap or rotate; the donut legend wraps below the ring in narrow boxesZeichnet bei Größenänderung neu; x-Beschriftungen werden ausgelassen, damit sie sich nie überlappen oder drehen; die Donut-Legende rutscht in schmalen Boxen unter den Ring

MotionBewegung

Short grow-in of 300 ms; none with reduced motion and when the theme changesKurzes Einwachsen mit 300 ms; keines bei reduzierter Bewegung und beim Theme-Wechsel

AccessibilityBarrierefreiheit

The canvas has role img and an aria-label with title and time frame; legend items are buttons with aria-pressed; tooltip and legend name every series, so color is never the only carrierDas Canvas hat role img und ein aria-label mit Titel und Zeitraum; Legendeneinträge sind Buttons mit aria-pressed; Tooltip und Legende nennen jede Reihe, Farbe ist also nie der einzige Träger

UseVerwendung

One chart on a dashboard or in a page: the guide Box with the chart, its title and its actionsEin Diagramm auf einem Dashboard oder einer Seite: die Guide-Box mit dem Diagramm, seinem Titel und seinen Aktionen

FrameRahmen

Guide Box: surface, 1 px line, radius 16 px, 16 px padding, 16 px between header, chart and the updates line; fills its grid cellGuide-Box: Surface, 1-px-Linie, Radius 16 px, 16 px Innenabstand, 16 px zwischen Kopf, Diagramm und Update-Zeile; füllt ihre Rasterzelle

HeaderKopfzeile

Widget header: title 14 px Medium, subtitle (time frame · granularity) 12 px muted, optional info icon with tooltip, the dark tertiary inset button “Chart actions” at the endWidget-Kopf: Titel 14 px Medium, Untertitel (Zeitraum · Granularität) 12 px gedämpft, optional Info-Icon mit Tooltip, am Ende der dunkle Tertiary-Inset-Button „Chart actions“

MenuMenü

Edit chart · Move to another board · Duplicate chart · Export PNG · Export CSV · Delete chart; Delete asks in a small confirm modal, Move opens a modal with the target boardEdit chart · Move to another board · Duplicate chart · Export PNG · Export CSV · Delete chart; Löschen fragt in einem kleinen Bestätigungs-Modal nach, Verschieben öffnet ein Modal mit dem Ziel-Board

View optionsAnsichtsoptionen

On productivity and stacked charts the menu adds the checkable rows View: Individually / Stacked / Total and Unit: Percent / Time before Delete chart, one checked per group; a choice redraws the chart at onceBei Produktivitäts- und gestapelten Diagrammen ergänzt das Menü vor Delete chart die abhakbaren Zeilen View: Individually / Stacked / Total und Unit: Percent / Time, je Gruppe eine ausgewählt; eine Wahl zeichnet das Diagramm sofort neu

BodyInhalt

The guide Chart, Heatmap, Metric tiles or Key/value table; full width, the box grows with itDas Guide-Diagramm, Heatmap, Metric-Kacheln oder Key/Value-Tabelle; volle Breite, die Box wächst mit

PLC/Core updatesPLC/Core-Updates

Optional line below the chart: PLC icon 16 px, then the updates in the time frame with name and date, 12 px mutedOptionale Zeile unter dem Diagramm: PLC-Icon 16 px, dann die Updates im Zeitraum mit Name und Datum, 12 px gedämpft

No dataKeine Daten

Guide EmptyState (compact) “No data for this time frame” instead of the body when the filter leaves nothingGuide-EmptyState (kompakt) „No data for this time frame“ statt des Inhalts, wenn der Filter nichts übrig lässt

One vehicleEin Fahrzeug

Charts that only work for one vehicle show “To display this widget, please select only one vehicle.” while more are selectedDiagramme, die nur für ein Fahrzeug funktionieren, zeigen „To display this widget, please select only one vehicle.“, solange mehrere ausgewählt sind

ExportExportieren

PNG: title and chart as an image; CSV: the chart data as shownPNG: Titel und Diagramm als Bild; CSV: die Diagrammdaten wie angezeigt

UseVerwendung

Time series: orders per hour, orders per dayZeitreihen: Aufträge pro Stunde, Aufträge pro Tag

LineLinie

2 px, straight segments, no points; hover shows a 4 px point with surface fill and a ring in the series color2 px, gerade Abschnitte, keine Punkte; Hover zeigt einen 4-px-Punkt mit Surface-Füllung und einem Ring in der Reihenfarbe

AreaFläche

Only for a single series: chart-01 line with chart-area below (chart-01 at 20 %)Nur bei einer einzigen Reihe: Linie chart-01 mit chart-area darunter (chart-01 mit 20 %)

GapsLücken

Missing values leave a gap, never a drop to zeroFehlende Werte lassen eine Lücke, nie einen Absturz auf null

UseVerwendung

Compare categories (orders per vehicle) or parts of a whole per day (time per state)Kategorien vergleichen (Aufträge pro Fahrzeug) oder Teile eines Ganzen pro Tag (Zeit pro Zustand)

BarsBalken

At most 24 px wide, 70 % of the slot, radius 2 px at the top, starting at 0Höchstens 24 px breit, 70 % des Platzes, oben Radius 2 px, ab 0

StackedGestapelt

Vehicle states in their fixed order from Busy at the bottom to Offline on top, state colors, no radius and no gaps; the tooltip lists every state of the dayFahrzeugzustände in ihrer festen Reihenfolge von Busy unten bis Offline oben, Zustandsfarben, ohne Radius und ohne Abstände; der Tooltip listet jeden Zustand des Tages

UseVerwendung

Shares of one total, at most 6 slices; the rest goes to OtherAnteile an einer Summe, höchstens 6 Segmente; der Rest geht in Other

RingRing

160 px, 70 % cutout, 2 px surface gaps between slices; the hovered slice moves out 4 px160 px, 70 % Aussparung, 2 px Surface-Abstand zwischen den Segmenten; das berührte Segment rückt 4 px nach außen

OrderReihenfolge

Largest slice first, clockwise from the top, Chart colors in their orderGrößtes Segment zuerst, im Uhrzeigersinn von oben, Chart-Farben in ihrer Reihenfolge

CenterMitte

Total of the visible slices in 20 px Medium, the unit below in 12 px text-mutedSumme der sichtbaren Segmente in 20 px Medium, die Einheit darunter in 12 px text-muted

LegendLegende

Next to the ring, one 32 px row per slice: dot, name, value and share (412 · 33 %); a hidden slice drops out of the total and the sharesNeben dem Ring, eine 32-px-Zeile pro Segment: Punkt, Name, Wert und Anteil (412 · 33 %); ein ausgeblendetes Segment fällt aus Summe und Anteilen

UseVerwendung

Two related measures with different units over the same time frame; never more than one lineZwei zusammengehörige Kennzahlen mit verschiedenen Einheiten über denselben Zeitraum; nie mehr als eine Linie

BarsBalken

The main value (orders) as bars on the left axisDer Hauptwert (Aufträge) als Balken an der linken Achse

LineLinie

The rate (productivity) as a line on the right axis from 0 to 100 %, drawn above the barsDie Rate (Produktivität) als Linie an der rechten Achse von 0 bis 100 %, über den Balken gezeichnet

AxesAchsen

The right axis labels carry the unit; only the left axis draws grid linesDie Beschriftung der rechten Achse trägt die Einheit; nur die linke Achse zeichnet Rasterlinien

UseVerwendung

How a time or a fleet splits into vehicle states: one total, every state its shareWie sich eine Zeit oder eine Flotte auf Fahrzeugzustände verteilt: eine Summe, jeder Zustand sein Anteil

BarLeiste

16 px high (8 px small), full width, radius 2 px at both ends, no gaps; one segment per state, as wide as its share16 px hoch (klein 8 px), volle Breite, Radius 2 px an beiden Enden, keine Lücken; ein Segment pro Zustand, so breit wie sein Anteil

ColorsFarben

Always the vehicle state colors (state-busy …); error state-error, no data state-no-data, the rest of today state-later; never the app colorImmer die Fahrzeugzustandsfarben (state-busy …); Fehler state-error, keine Daten state-no-data, der Rest des Tages state-later; nie die App-Farbe

HoverHover

2 px secondary-900 outline on the segment and a tooltip with state, share and time (Busy · 65 % · 5.2 h)2 px secondary-900 Kontur am Segment und ein Tooltip mit Zustand, Anteil und Zeit (Busy · 65 % · 5.2 h)

LegendLegende

Below the bar, one 32 px button per state with dot, name and share, 40 px hit area, hover primary-200Unter der Leiste ein 32-px-Button pro Zustand mit Punkt, Name und Anteil, 40 px Trefferfläche, Hover primary-200

HighlightHervorhebung

Clicking a legend item highlights its state: the item is chosen (primary-100, primary-400 ring), the other segments fade to 25 %; clicking it again shows allKlick auf einen Legendeneintrag hebt seinen Zustand hervor: der Eintrag ist gewählt (primary-100, primary-400 Ring), die anderen Segmente blassen auf 25 % ab; erneuter Klick zeigt alle

EmptyLeer

Nothing to split: the bar stays as one state-no-data track, no legendNichts zu verteilen: die Leiste bleibt eine state-no-data Spur, keine Legende

AccessibilityBarrierefreiheit

The bar is an image whose label lists every state with its share; the legend repeats the shares, so color is never the only carrierDie Leiste ist ein Bild, dessen Label jeden Zustand mit Anteil nennt; die Legende wiederholt die Anteile, Farbe trägt nie allein

UseVerwendung

Live overview of a fleet above the vehicle list: how many vehicles are in which state, and a quick filterLive-Überblick einer Flotte über der Fahrzeugliste: wie viele Fahrzeuge in welchem Zustand sind, plus ein schneller Filter

BarLeiste

State bar without legend; segments are vehicle counts, the tooltip says how many of all (Busy · 6 of 16)State bar ohne Legende; Segmente sind Fahrzeuganzahlen, der Tooltip sagt wie viele von allen (Busy · 6 of 16)

Filter chipsFilter-Chips

Below the bar, 8 px apart: one filter Chip per state with dot, count in Medium and name; states without vehicles are left outUnter der Leiste, 8 px Abstand: ein Filter-Chip pro Zustand mit Punkt, Anzahl in Medium und Name; Zustände ohne Fahrzeuge fallen weg

BehaviorVerhalten

One state at a time: a chip filters the list below at once and fades the other segments; clicking it again shows allEin Zustand auf einmal: ein Chip filtert die Liste darunter sofort und blasst die anderen Segmente ab; erneuter Klick zeigt alle

HoverHover

Chip hover primary-200; chips with a longer meaning carry a tooltip (Held up: waiting for a signal or stopped by an obstacle)Chip-Hover primary-200; Chips mit längerer Bedeutung haben einen Tooltip (Held up: wartet auf ein Signal oder von einem Hindernis gestoppt)

ListListe

Filters the Live vehicle list (Tables) by its state column; the table keeps its own filters and searchFiltert die Live vehicle list (Tabellen) über ihre Zustandsspalte; die Tabelle behält ihre eigenen Filter und die Suche

UseVerwendung

One vehicle’s day: 24 hours in vehicle state colors with its failures, on the vehicle page and in reportsDer Tag eines Fahrzeugs: 24 Stunden in Fahrzeugzustandsfarben mit seinen Störungen, auf der Fahrzeugseite und in Berichten

StripStreifen

16 px high, full width, 00:00 to 24:00; segments as long as the time in the state, radius 2 px at both ends16 px hoch, volle Breite, 00:00 bis 24:00; Segmente so lang wie die Zeit im Zustand, Radius 2 px an beiden Enden

Later todaySpäter heute

Time that hasn’t happened yet is state-later (secondary-100)Zeit, die noch nicht vergangen ist, ist state-later (secondary-100)

FailuresStörungen

4 px markers, 24 px high over the strip at the time of the failure, 1 px surface ring; error failure-error, problem failure-problem, warning failure-warning4-px-Marker, 24 px hoch über dem Streifen zur Zeit der Störung, 1 px Surface-Ring; Fehler failure-error, Problem failure-problem, Warnung failure-warning

Hours axisStundenachse

00:00 · 06:00 · 12:00 · 18:00 · 24:00, 12 px muted, tabular figures00:00 · 06:00 · 12:00 · 18:00 · 24:00, 12 px gedämpft, tabellarische Ziffern

HoverHover

Segment or marker gets a 2 px secondary-900 outline and a tooltip: time span, state and minutes, or time and failure codeSegment oder Marker bekommt eine 2 px secondary-900 Kontur und einen Tooltip: Zeitspanne, Zustand und Minuten, oder Zeit und Störungscode

LegendLegende

Static legend below with every state and failure kind that occurs that dayStatische Legende darunter mit jedem Zustand und jeder Störungsart des Tages

No dataKeine Daten

The vehicle sent nothing that day: EmptyState (compact) “No data for this time frame” instead of the stripDas Fahrzeug hat an dem Tag nichts gesendet: EmptyState (kompakt) „No data for this time frame“ statt des Streifens

AccessibilityBarrierefreiheit

The strip is an image labeled with vehicle, day and number of failures; the failures are also listed for screen readersDer Streifen ist ein Bild mit Fahrzeug, Tag und Anzahl der Störungen als Label; die Störungen sind zusätzlich für Screenreader aufgelistet