nuxt-ui-basekit 0.1.1 → 0.2.1

package/app/components/charts/BaseKitChartColumns.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 /**
- * Gestapelte Säulen über einer Zeitachse — „was ist je Tag entstanden".
+ * Stacked columns over a time axis — what accrued per day.
  *
- * Warum gestapelt und nicht mehrere Linien: die Frage ist Anteil am Ganzen,
- * nicht Verlauf einzelner Reihen. Und warum Säulen und keine Fläche: Tageswerte
- * sind gezählte Ereignisse, keine stetige Größe — eine Fläche würde zwischen
- * zwei Tagen interpolieren und behaupten, dass um 12 Uhr nachts etwas
- * halb passiert ist.
+ * Stacked rather than several lines because the question is share of the
+ * whole, not the course of individual series. Columns rather than an area
+ * because daily values are counted events, not a continuous quantity: an area
+ * would interpolate between two days and claim something half-happened at
+ * midnight.
  *
- * Trennung zwischen den Segmenten passiert über eine 2-px-Lücke in der
- * Kartenfarbe, nicht über einen Rahmen: ein Rahmen ist Tinte, die keine Daten
- * trägt, und bei dünnen Segmenten überdeckt er den Wert.
+ * Segments are separated by a 2px gap in the card colour rather than a border.
+ * A border is ink that carries no data, and on thin segments it covers the
+ * value.
  *
- * Höchstens fünf Reihen — siehe `useChartPalette`.
+ * Five series at most — see `useChartPalette`.
  */
 import { computed, ref } from 'vue'
 import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
@@ -25,13 +25,13 @@ interface ColumnSeries {
 }
 
 const props = withDefaults(defineProps<{
-  /** Beschriftung je Säule, z. B. ISO-Tage. */
+  /** Label per column, ISO dates for instance. */
   categories: string[]
   series: ColumnSeries[]
   height?: number
-  /** Achsenbeschriftung (kurz) aus einer Kategorie. */
+  /** Short axis label derived from a category. */
   formatCategory?: (value: string) => string
-  /** Ausführliche Fassung für den Tooltip. */
+  /** The long form, for the tooltip. */
   formatCategoryLong?: (value: string) => string
   ariaLabel?: string
 }>(), {
@@ -64,7 +64,7 @@ const plot = computed(() => {
   }
 })
 
-/** Tagessummen — sie bestimmen die Skala und stehen im Tooltip. */
+/** Daily totals — they set the scale and appear in the tooltip. */
 const totals = computed(() =>
   props.categories.map((_, index) =>
     props.series.reduce((sum, s) => sum + (s.points[index] ?? 0), 0),
@@ -72,9 +72,8 @@ const totals = computed(() =>
 )
 
 /**
- * Obere Achsengrenze auf eine runde Zahl aufgerundet. Ohne das steht die
- * Beschriftung auf krummen Werten wie 37, und die Gitterlinien tragen keine
- * ablesbare Auskunft mehr.
+ * Upper axis bound, rounded up to something even. Without it the labels sit on
+ * awkward values like 37 and the grid lines stop telling anyone anything.
  */
 const scaleMax = computed(() => {
   const peak = Math.max(0, ...totals.value)
@@ -100,7 +99,7 @@ function columnX(index: number): number {
   return PADDING.left + plot.value.band * (index + 0.5) - plot.value.columnWidth / 2
 }
 
-/** Runde Kappe nur oben — unten sitzt die Säule auf der Grundlinie auf. */
+/** Rounded cap on top only — the column sits flat on the baseline. */
 function cappedPath(x: number, y: number, w: number, h: number): string {
   const r = Math.min(4, w / 2, h)
   if (h <= 0) return ''
@@ -129,7 +128,7 @@ const columns = computed(() => {
     const segments: Segment[] = []
     let stacked = 0
 
-    // Von unten nach oben stapeln; die oberste Reihe bekommt die Kappe.
+    // Stack bottom to top; the topmost series gets the cap.
     const present = props.series
       .map((s, order) => ({ s, order, value: s.points[index] ?? 0 }))
       .filter(entry => entry.value > 0)
@@ -140,8 +139,8 @@ const columns = computed(() => {
       const top = baseline - (stacked / max) * innerHeight
 
       const isTop = position === present.length - 1
-      // Lücke nach oben, außer beim obersten Segment — dort säße sie
-      // zwischen Säule und Luft und würde die Säule nur kürzen.
+      // A gap above, except on the topmost segment — there it would sit
+      // between the column and thin air and merely shorten it.
       const height = Math.max(0, bottom - top - (isTop ? 0 : GAP))
       if (height <= 0) return
 
@@ -159,9 +158,9 @@ const columns = computed(() => {
 })
 
 /**
- * Beschriftung ausdünnen, bis sie nicht mehr kollidiert — und zwar durch
- * Weglassen, nicht durch Verstecken: ein ausgeblendeter Text bleibt im
- * Baum stehen und wird von Screenreadern trotzdem vorgelesen.
+ * Thin the labels out until they stop colliding — by leaving them out, not by
+ * hiding them: hidden text stays in the tree and screen readers read it
+ * anyway.
  */
 const axisLabels = computed(() => {
   const perLabel = 56
@@ -194,7 +193,7 @@ const tooltip = computed(() => {
         value: s.points[index] ?? 0,
       }))
       .filter(row => row.value > 0),
-    // Am Rand kippt der Kasten nach innen, statt aus der Karte zu laufen.
+    // Near the edge the box flips inward instead of running off the card.
     anchor: PADDING.left + plot.value.band * (index + 0.5),
   }
 })
@@ -218,7 +217,7 @@ function readout(index: number): string {
       :aria-label="props.ariaLabel"
       class="block max-w-full overflow-visible"
     >
-      <!-- Gitter: durchgezogene Haarlinien, eine Stufe von der Fläche weg. -->
+      <!-- Grid: solid hairlines, one step away from the surface. -->
       <g>
         <line
           v-for="tick in ticks"
@@ -242,7 +241,7 @@ function readout(index: number): string {
         >{{ tick.label }}</text>
       </g>
 
-      <!-- Datenmarken -->
+      <!-- Data marks -->
       <g
         v-for="column in columns"
         :key="column.category"
@@ -257,8 +256,8 @@ function readout(index: number): string {
         />
       </g>
 
-      <!-- Trefferflächen: über die volle Höhe und über die ganze Bandbreite,
-           damit niemand eine 14 px schmale Säule treffen muss. -->
+      <!-- Hit areas: full height and the whole band, so nobody has to hit a
+           14px column. -->
       <g>
         <rect
           v-for="column in columns"
@@ -279,7 +278,7 @@ function readout(index: number): string {
         />
       </g>
 
-      <!-- Achsenbeschriftung -->
+      <!-- Axis labels -->
       <text
         v-for="label in axisLabels"
         :key="`label-${label.category}`"
@@ -291,7 +290,7 @@ function readout(index: number): string {
       >{{ label.text }}</text>
     </svg>
 
-    <!-- Tooltip: Wert führt, Reihenname folgt. -->
+    <!-- Tooltip: the value leads, the series name follows. -->
     <div
       v-if="tooltip"
       class="pointer-events-none absolute top-0 z-10 min-w-40 -translate-x-1/2 rounded-md border border-default bg-default p-2 shadow-lg"

package/app/components/charts/BaseKitChartDonut.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 /**
- * Ring für Teil-vom-Ganzen bei wenigen Klassen.
+ * A ring for part-of-whole across a few classes.
  *
- * Bewusst eng eingesetzt: ein Ring beantwortet „wie verteilt sich das grob",
- * nicht „welcher von zweien ist größer". Sobald zwei Segmente nahe beieinander
- * liegen, ist ein Balken die ehrlichere Form. Höchstens vier Segmente, sonst
- * verlieren die kleinen ihre Beschriftung.
+ * Deliberately narrow in scope: a ring answers "roughly how does this split",
+ * not "which of these two is bigger". As soon as two segments sit close
+ * together, a bar is the more honest shape. Four segments at most, otherwise
+ * the small ones lose their labels.
  *
- * In der Mitte steht die Summe — das ist die Zahl, die zuerst gesucht wird,
- * und sie füllt den Platz, den ein Ring ohnehin frei lässt.
+ * The total goes in the middle — it is the number people look for first, and
+ * it fills the space a ring leaves empty anyway.
  */
 import { computed, ref } from 'vue'
 import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
@@ -21,7 +21,7 @@ interface DonutSlice {
 
 const props = withDefaults(defineProps<{
   slices: DonutSlice[]
-  /** Beschriftung unter der Summe in der Mitte. */
+  /** Label below the total in the centre. */
   centerLabel?: string
   size?: number
   ariaLabel?: string
@@ -34,7 +34,7 @@ const props = withDefaults(defineProps<{
 const { number, percent } = useChartFormat()
 
 const THICKNESS = 18
-/** Lücke zwischen den Segmenten, in Grad — das Gegenstück zur 2-px-Lücke. */
+/** Gap between segments, in degrees — the counterpart to the 2px gap. */
 const GAP_DEGREES = 2
 
 const active = ref<string | null>(null)
@@ -61,8 +61,8 @@ const arcs = computed(() => {
       const start = cursor
       cursor += sweep
 
-      // Ein Segment, das den ganzen Kreis füllt, hätte identischen Start- und
-      // Endpunkt — der Bogen verschwände. Dann zeichnen wir den vollen Ring.
+      // A segment filling the whole circle would have identical start and end
+      // points and the arc would vanish. Draw the full ring instead.
       const full = sweep >= 359.9
       const gap = full ? 0 : Math.min(GAP_DEGREES, sweep / 3)
       const from = start + gap / 2
@@ -95,10 +95,10 @@ const legend = computed(() =>
 </script>
 
 <template>
-  <!-- Legende unter dem Ring, nicht daneben: die Karte steht auf der
-       Übersicht in einer schmalen Spalte, und nebeneinander blieb für die
-       Beschriftungen so wenig übrig, dass „Ausgeschieden" auf ein „A"
-       zusammenschrumpfte. Untereinander hat jede Zeile die volle Breite. -->
+  <!-- Legend below the ring, not beside it: the card often sits in a narrow
+       column, and side by side so little was left for the labels that a word
+       like "Discontinued" shrank to a "D". Stacked, every row has the full
+       width. -->
   <div class="flex flex-col items-center gap-5">
     <svg
       :width="props.size"
@@ -108,8 +108,8 @@ const legend = computed(() =>
       :aria-label="props.ariaLabel"
       class="shrink-0"
     >
-      <!-- Leerer Ring, wenn nichts da ist: die Form bleibt erkennbar, statt
-           dass die Karte auf eine leere Fläche zusammenfällt. -->
+      <!-- An empty ring when there is nothing: the shape stays recognisable
+           instead of the card collapsing into a blank area. -->
       <circle
         v-if="!arcs.length"
         :cx="center"
@@ -156,7 +156,7 @@ const legend = computed(() =>
       >{{ props.centerLabel }}</text>
     </svg>
 
-    <!-- Legende trägt die Identität, nicht die Farbe allein. -->
+    <!-- The legend carries the identity, not the colour alone. -->
     <ul class="w-full space-y-1.5">
       <li
         v-for="entry in legend"

package/app/components/charts/BaseKitChartFigure.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 /**
- * Rahmen für ein Diagramm: Karte, Titel, Legende und der Umschalter auf die
- * Tabellenansicht.
+ * The frame around a chart: card, title, legend, and the switch to the table
+ * view.
  *
- * Der Umschalter ist keine Zugabe. Ein Diagramm codiert Werte über Farbe und
- * Länge; wer davon nichts hat — Farbfehlsichtigkeit, Screenreader, Ausdruck —
- * braucht dieselben Zahlen in lesbarer Form. Deshalb bringt jede Karte hier
- * ihre Tabelle mit, und deshalb ist der Umschalter sichtbar und nicht in einem
- * Menü versteckt.
+ * That switch is not a nicety. A chart encodes values through colour and
+ * length; anyone who gets nothing out of that — a colour vision deficiency, a
+ * screen reader, a printout — needs the same numbers in readable form. Which
+ * is why every card here brings its table along, and why the switch is visible
+ * rather than buried in a menu.
  */
 import { computed, ref } from 'vue'
 import { useBaseKitLabels } from '../../composables/useBaseKit'
@@ -15,11 +15,11 @@ import { useBaseKitLabels } from '../../composables/useBaseKit'
 const props = withDefaults(defineProps<{
   title: string
   subtitle?: string
-  /** Wohin die Karte führt. Ohne Ziel bleibt der Titel ein Titel. */
+  /** Where the card leads. Without a target the title stays a title. */
   href?: string
-  /** Diagramm ausgrauen, während im Hintergrund nachgeladen wird. */
+  /** Grey the chart out while something reloads in the background. */
   stale?: boolean
-  /** Ohne Tabellen-Slot entfällt der Umschalter. */
+  /** Without a table slot the switch disappears. */
   tableAvailable?: boolean
 }>(), {
   subtitle: undefined,

package/app/components/charts/BaseKitChartMeter.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 /**
- * Ein Verhältnis gegen eine bekannte Grenze — „so viele von so vielen".
+ * A ratio against a known limit — this many of that many.
  *
- * Ein Meter setzt voraus, dass es ein Ganzes gibt. Wo keins existiert (Bytes
- * ohne Kontingent, Anzahl ohne Obergrenze), gehört die Zahl in eine Kachel und
- * nicht hierher; ein voller Balken behauptete sonst eine erreichte Grenze.
+ * A meter presupposes that a whole exists. Where none does — bytes without a
+ * quota, a count without a ceiling — the number belongs in a tile and not
+ * here; a full bar would otherwise claim a limit had been reached.
  */
 import { computed } from 'vue'
 import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'

package/app/composables/useBaseKit.ts

@@ -1,55 +1,54 @@
 import { computed, inject, type ComputedRef, type InjectionKey } from 'vue'
 
 /**
- * Der einzige Draht zwischen den BaseKit-Komponenten und der Anwendung,
- * die sie einsetzt.
+ * The only wire between the BaseKit components and the application using them.
  *
- * Die Komponenten sollen in jedem Nuxt-Projekt laufen. Sie dürfen deshalb
- * weder `vue-i18n` aufrufen noch Übersetzungsschlüssel kennen: `t('common.search')`
- * gibt es nur in der einen Anwendung, die diesen Schlüssel führt, und ein
- * Paket, das solche Schlüssel voraussetzt, ist keins.
+ * The components are meant to run in any Nuxt project. That rules out calling
+ * `vue-i18n` and it rules out knowing translation keys: `t('common.search')`
+ * exists only in the one application that carries that key, and a package
+ * which presupposes such keys is not a package.
  *
- * Stattdessen reicht die Anwendung Sprache und Beschriftungen einmal herein —
- * in einem Plugin, das die Werte aus ihrer eigenen Quelle zieht:
+ * Instead the application hands language and labels in once, from a plugin
+ * that pulls the values out of its own source:
  *
  *   // plugins/basekit.ts
  *   export default defineNuxtPlugin((nuxtApp) => {
  *     const config = computed(() => ({
  *       locale: 'de-DE',
- *       labels: { ...BASEKIT_DEFAULTS.labels, search: 'Suchen' },
+ *       labels: { ...BASEKIT_DEFAULTS.labels, search: 'Suchen', cancel: 'Abbrechen' },
  *     }))
  *     nuxtApp.vueApp.provide(baseKitKey, config)
  *   })
  *
- * Wer nichts bereitstellt, bekommt die Voreinstellungen unten. Wichtig, wenn
- * die Werte aus einer i18n-Bibliothek kommen: `useI18n()` verlangt einen
- * Komponenten-Setup-Kontext und wirft im Plugin. Die Instanz gehört über
- * `nuxtApp.$i18n` geholt, und zwar erst beim Lesen des `computed`.
+ * Provide nothing and the defaults below apply. One thing worth knowing when
+ * the values come from an i18n library: `useI18n()` requires a component setup
+ * context and throws inside a plugin. Take the instance from `nuxtApp.$i18n`,
+ * and only when the `computed` is read.
  *
- * Über `provide`/`inject`, nicht über `useNuxtApp()`: so laufen die
- * Komponenten auch in einem Vitest-Mount ohne Nuxt-Kontext, und unter SSR
- * teilen sich zwei Anfragen nichts.
+ * Over `provide`/`inject` rather than `useNuxtApp()`: that way the components
+ * also run in a Vitest mount without a Nuxt context, and two requests share
+ * nothing under SSR.
  *
- * Einzelne Beschriftungen bleiben weiterhin als Prop überschreibbar — hier
- * steht nur, was ohne Zutun herauskommt.
+ * Individual labels stay overridable as props — what follows only decides what
+ * comes out when nothing is passed.
  */
 export interface BaseKitLabels {
-  /** Suchfeld über Listen und Auswahl-Dialogen. */
+  /** Search field above lists and pickers. */
   search: string
-  /** Filter-Eintrag „ohne Einschränkung". */
+  /** Filter entry for "no restriction". */
   all: string
   select: string
   change: string
   edit: string
   cancel: string
   confirm: string
-  /** Überschrift der Rückfrage, wenn der Aufrufer keine mitgibt. */
+  /** Heading of the confirmation when the caller passes none. */
   confirmTitle: string
-  /** Text der Rückfrage, wenn der Aufrufer keinen mitgibt. */
+  /** Body of the confirmation when the caller passes none. */
   confirmBody: string
-  /** Leere Liste — es gibt noch nichts. */
+  /** Empty list — nothing exists yet. */
   empty: string
-  /** Leere Liste — die Suche greift, findet aber nichts. */
+  /** Empty list — the search ran and found nothing. */
   noResults: string
   noResultsHint: string
   back: string
@@ -58,15 +57,15 @@ export interface BaseKitLabels {
   perPage: string
   iconChoose: string
   iconEmpty: string
-  /** Auswahl aufheben — im Symbolwähler die leere Wahl. */
+  /** Clearing the choice — the empty option in the icon picker. */
   iconClear: string
   chartAsTable: string
   chartAsChart: string
-  /** „1–25 von 300" — als Funktion, weil die Zahlen mitten im Satz stehen. */
+  /** "1–25 of 300" — a function, because the numbers sit inside the sentence. */
   paginationRange: (range: { from: number, to: number, total: number }) => string
   /**
-   * Werkzeugleiste des Markdown-Editors. Eigene Gruppe, weil die Begriffe nur
-   * dort vorkommen und die obere Ebene sonst zur Hälfte aus ihnen bestünde.
+   * Toolbar of the Markdown editor. Its own group, because the terms occur
+   * nowhere else and the top level would otherwise be half made of them.
    */
   markdown: {
     bold: string
@@ -78,60 +77,61 @@ export interface BaseKitLabels {
     quote: string
     code: string
     link: string
-    /** Abfrage beim Setzen eines Links. */
+    /** Prompt shown when setting a link. */
     linkPrompt: string
   }
 }
 
 export interface BaseKitConfig {
   /**
-   * BCP-47-Kennung für `Intl` — steuert Tausendertrennung, Prozent- und
-   * Datumsformate in den Diagrammen.
+   * BCP-47 tag for `Intl` — drives thousands separators, percentages and date
+   * formats in the charts.
    */
   locale: string
   labels: BaseKitLabels
 }
 
 /**
- * Voreinstellung: deutsch. Alle Projekte im Haus sind es, und eine Anwendung
- * mit mehreren Sprachen überschreibt die Tabelle ohnehin komplett.
+ * Defaults: English. The package cannot know what language the application
+ * runs in, and English is the one that shuts out the fewest readers. Anything
+ * else is handed in through the plugin above.
  */
 export const BASEKIT_DEFAULTS: BaseKitConfig = {
-  locale: 'de-DE',
+  locale: 'en-US',
   labels: {
-    search: 'Suchen',
-    all: 'Alle',
-    select: 'Auswählen',
-    change: 'Ändern',
-    edit: 'Bearbeiten',
-    cancel: 'Abbrechen',
-    confirm: 'Bestätigen',
-    confirmTitle: 'Sind Sie sicher?',
-    confirmBody: 'Diese Aktion lässt sich nicht rückgängig machen.',
-    empty: 'Noch nichts vorhanden',
-    noResults: 'Keine Treffer',
-    noResultsHint: 'Andere Schreibweise oder weniger Filter probieren.',
-    back: 'Zurück zur Übersicht',
-    view: 'Ansehen',
-    upload: 'Datei wählen',
-    perPage: 'pro Seite',
-    iconChoose: 'Symbol wählen',
-    iconEmpty: 'Kein Symbol gefunden',
-    iconClear: 'Kein Symbol',
-    chartAsTable: 'Als Tabelle',
-    chartAsChart: 'Als Diagramm',
-    paginationRange: ({ from, to, total }) => `${from}–${to} von ${total}`,
+    search: 'Search',
+    all: 'All',
+    select: 'Select',
+    change: 'Change',
+    edit: 'Edit',
+    cancel: 'Cancel',
+    confirm: 'Confirm',
+    confirmTitle: 'Are you sure?',
+    confirmBody: 'This action cannot be undone.',
+    empty: 'Nothing here yet',
+    noResults: 'No matches',
+    noResultsHint: 'Try a different spelling or fewer filters.',
+    back: 'Back to overview',
+    view: 'View',
+    upload: 'Choose file',
+    perPage: 'per page',
+    iconChoose: 'Choose icon',
+    iconEmpty: 'No icon found',
+    iconClear: 'No icon',
+    chartAsTable: 'As table',
+    chartAsChart: 'As chart',
+    paginationRange: ({ from, to, total }) => `${from}–${to} of ${total}`,
     markdown: {
-      bold: 'Fett',
-      italic: 'Kursiv',
-      h2: 'Überschrift 2',
-      h3: 'Überschrift 3',
-      bullet: 'Liste',
-      ordered: 'Nummerierte Liste',
-      quote: 'Zitat',
+      bold: 'Bold',
+      italic: 'Italic',
+      h2: 'Heading 2',
+      h3: 'Heading 3',
+      bullet: 'Bullet list',
+      ordered: 'Numbered list',
+      quote: 'Quote',
       code: 'Code',
       link: 'Link',
-      linkPrompt: 'Link-URL',
+      linkPrompt: 'Link URL',
     },
   },
 }
@@ -139,16 +139,16 @@ export const BASEKIT_DEFAULTS: BaseKitConfig = {
 export const baseKitKey: InjectionKey<ComputedRef<BaseKitConfig>> = Symbol('basekit')
 
 /**
- * Konfiguration für eine BaseKit-Komponente. Ohne bereitgestellten Wert
- * greifen die Voreinstellungen — die Komponente rendert dann auf Deutsch,
- * statt leere Beschriftungen zu zeigen.
+ * Configuration for a BaseKit component. With nothing provided the defaults
+ * apply — the component then renders in English instead of showing empty
+ * labels.
  */
 export function useBaseKit(): ComputedRef<BaseKitConfig> {
   const provided = inject(baseKitKey, null)
   return provided ?? computed(() => BASEKIT_DEFAULTS)
 }
 
-/** Kurzform für den häufigen Fall, dass nur die Beschriftungen gebraucht werden. */
+/** Short form for the common case of only needing the labels. */
 export function useBaseKitLabels(): ComputedRef<BaseKitLabels> {
   const config = useBaseKit()
   return computed(() => config.value.labels)

package/app/composables/useChartPalette.ts

@@ -2,17 +2,17 @@ import { computed } from 'vue'
 import { useBaseKit } from './useBaseKit'
 
 /**
- * Reihenfarben und Zahlenformate für die `BaseKitChart*`-Komponenten.
+ * Series colours and number formats for the `BaseKitChart*` components.
  *
- * Die Farben stehen als CSS-Variablen in `main.css` und sind als **Satz**
- * geprüft — Reihenfolge inklusive. Deshalb gibt es hier nur einen Zugriff per
- * Index und keine Erzeugung: eine sechste Farbe wäre unter einer
- * Farbfehlsichtigkeit von einer der fünf nicht mehr zu unterscheiden.
- * Wer mehr Reihen hat, fasst zusammen.
+ * The colours live as CSS variables in `app/assets/css/basekit.css` and are
+ * validated as a **set**, order included. That is why there is lookup by index
+ * here and no generation: a sixth colour would be indistinguishable from one
+ * of the five under a colour vision deficiency. More series than that means
+ * grouping them.
  */
 export const BASEKIT_CHART_SLOTS = 5
 
-/** Farbe für Reihe `index` (0-basiert). Ab Slot 6 die zurückgenommene Graustufe. */
+/** Colour for series `index`, zero-based. From slot 6 on, the muted grey. */
 export function baseKitChartColor(index: number): string {
   return index < BASEKIT_CHART_SLOTS
     ? `var(--basekit-chart-${index + 1})`
@@ -33,7 +33,7 @@ export function useChartFormat(): {
     return new Intl.NumberFormat(locale.value).format(value)
   }
 
-  /** Für Werte an Marken und in Kacheln: 12.400 → 12,4 Tsd. */
+  /** For values on ticks and in tiles: 12,400 becomes 12.4K. */
   function compact(value: number): string {
     return value < 10000
       ? number(value)
@@ -41,9 +41,9 @@ export function useChartFormat(): {
   }
 
   /**
-   * Anteil in Prozent. Abgerundet, solange nicht alles erreicht ist — sonst
-   * würde 9.999 von 10.000 als „100 %" durchgehen und die eine fehlende
-   * Übersetzung wäre weggerundet.
+   * A share in percent, rounded down as long as the whole has not been
+   * reached — otherwise 9,999 out of 10,000 would pass as "100%" and the one
+   * missing item would be rounded out of sight.
    */
   function percent(value: number, total: number): string {
     if (total <= 0) return '—'
@@ -61,8 +61,8 @@ export function useChartFormat(): {
   }
 
   /**
-   * Dezimalpräfixe (kB, MB, GB) — nicht KiB/MiB. Speicheranbieter rechnen so
-   * ab, und die Zahl soll zu der auf der Rechnung passen.
+   * Decimal prefixes (kB, MB, GB), not KiB/MiB. Storage is billed that way,
+   * and the number here should match the one on the invoice.
    */
   function bytes(value: number): string {
     const units = ['B', 'kB', 'MB', 'GB', 'TB']
@@ -76,7 +76,7 @@ export function useChartFormat(): {
     return `${new Intl.NumberFormat(locale.value, { maximumFractionDigits: digits }).format(size)} ${units[unit]}`
   }
 
-  /** Laufzeit als „14 h 20 min", unter einer Stunde nur Minuten. */
+  /** Runtime as "14 h 20 min"; below an hour, minutes only. */
   function duration(seconds: number): string {
     const total = Math.max(0, Math.round(seconds / 60))
     const hours = Math.floor(total / 60)