nuxt-ui-basekit 0.1.0

package/app/components/charts/BaseKitChartColumns.vue

@@ -0,0 +1,319 @@
+<script setup lang="ts">
+/**
+ * Gestapelte Säulen über einer Zeitachse — „was ist je Tag entstanden".
+ *
+ * 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.
+ *
+ * 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.
+ *
+ * Höchstens fünf Reihen — siehe `useChartPalette`.
+ */
+import { computed, ref } from 'vue'
+import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
+import { useChartWidth } from '../../composables/useChartWidth'
+
+interface ColumnSeries {
+  key: string
+  label: string
+  points: number[]
+}
+
+const props = withDefaults(defineProps<{
+  /** Beschriftung je Säule, z. B. ISO-Tage. */
+  categories: string[]
+  series: ColumnSeries[]
+  height?: number
+  /** Achsenbeschriftung (kurz) aus einer Kategorie. */
+  formatCategory?: (value: string) => string
+  /** Ausführliche Fassung für den Tooltip. */
+  formatCategoryLong?: (value: string) => string
+  ariaLabel?: string
+}>(), {
+  height: 200,
+  formatCategory: (value: string) => value,
+  formatCategoryLong: undefined,
+  ariaLabel: undefined,
+})
+
+const { number } = useChartFormat()
+const { el, width } = useChartWidth()
+
+const PADDING = { top: 10, right: 8, bottom: 22, left: 40 }
+const MAX_COLUMN = 14
+const GAP = 2
+
+const active = ref<number | null>(null)
+
+const plot = computed(() => {
+  const innerWidth = Math.max(60, width.value - PADDING.left - PADDING.right)
+  const innerHeight = Math.max(40, props.height - PADDING.top - PADDING.bottom)
+  const count = Math.max(1, props.categories.length)
+  const band = innerWidth / count
+  return {
+    innerWidth,
+    innerHeight,
+    band,
+    columnWidth: Math.max(2, Math.min(MAX_COLUMN, band - 3)),
+    baseline: PADDING.top + innerHeight,
+  }
+})
+
+/** Tagessummen — sie bestimmen die Skala und stehen im Tooltip. */
+const totals = computed(() =>
+  props.categories.map((_, index) =>
+    props.series.reduce((sum, s) => sum + (s.points[index] ?? 0), 0),
+  ),
+)
+
+/**
+ * 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.
+ */
+const scaleMax = computed(() => {
+  const peak = Math.max(0, ...totals.value)
+  if (peak === 0) return 1
+  const magnitude = 10 ** Math.floor(Math.log10(peak))
+  for (const step of [1, 2, 2.5, 5, 10]) {
+    const candidate = step * magnitude
+    if (candidate >= peak) return candidate
+  }
+  return 10 * magnitude
+})
+
+const ticks = computed(() => {
+  const max = scaleMax.value
+  return [0, max / 2, max].map(value => ({
+    value,
+    y: plot.value.baseline - (value / max) * plot.value.innerHeight,
+    label: number(Math.round(value)),
+  }))
+})
+
+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. */
+function cappedPath(x: number, y: number, w: number, h: number): string {
+  const r = Math.min(4, w / 2, h)
+  if (h <= 0) return ''
+  return [
+    `M ${x} ${y + h}`,
+    `L ${x} ${y + r}`,
+    `Q ${x} ${y} ${x + r} ${y}`,
+    `L ${x + w - r} ${y}`,
+    `Q ${x + w} ${y} ${x + w} ${y + r}`,
+    `L ${x + w} ${y + h}`,
+    'Z',
+  ].join(' ')
+}
+
+interface Segment {
+  key: string
+  path: string
+  color: string
+}
+
+const columns = computed(() => {
+  const { innerHeight, baseline, columnWidth } = plot.value
+  const max = scaleMax.value
+
+  return props.categories.map((category, index) => {
+    const segments: Segment[] = []
+    let stacked = 0
+
+    // Von unten nach oben stapeln; die oberste Reihe bekommt die Kappe.
+    const present = props.series
+      .map((s, order) => ({ s, order, value: s.points[index] ?? 0 }))
+      .filter(entry => entry.value > 0)
+
+    present.forEach((entry, position) => {
+      const bottom = baseline - (stacked / max) * innerHeight
+      stacked += entry.value
+      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.
+      const height = Math.max(0, bottom - top - (isTop ? 0 : GAP))
+      if (height <= 0) return
+
+      segments.push({
+        key: entry.s.key,
+        color: baseKitChartColor(entry.order),
+        path: isTop
+          ? cappedPath(columnX(index), top, columnWidth, height)
+          : `M ${columnX(index)} ${top} h ${columnWidth} v ${height} h ${-columnWidth} Z`,
+      })
+    })
+
+    return { category, index, segments, total: totals.value[index] ?? 0 }
+  })
+})
+
+/**
+ * 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.
+ */
+const axisLabels = computed(() => {
+  const perLabel = 56
+  const every = Math.max(1, Math.ceil(perLabel / Math.max(1, plot.value.band)))
+
+  return props.categories
+    .map((category, index) => ({ category, index }))
+    .filter(entry => entry.index % every === 0)
+    .map(entry => ({
+      category: entry.category,
+      x: PADDING.left + plot.value.band * (entry.index + 0.5),
+      text: props.formatCategory(entry.category),
+    }))
+})
+
+const tooltip = computed(() => {
+  if (active.value === null) return null
+  const index = active.value
+  const long = props.formatCategoryLong ?? props.formatCategory
+
+  return {
+    index,
+    title: long(props.categories[index] ?? ''),
+    total: totals.value[index] ?? 0,
+    rows: props.series
+      .map((s, order) => ({
+        key: s.key,
+        label: s.label,
+        color: baseKitChartColor(order),
+        value: s.points[index] ?? 0,
+      }))
+      .filter(row => row.value > 0),
+    // Am Rand kippt der Kasten nach innen, statt aus der Karte zu laufen.
+    anchor: PADDING.left + plot.value.band * (index + 0.5),
+  }
+})
+
+function readout(index: number): string {
+  const long = props.formatCategoryLong ?? props.formatCategory
+  const parts = props.series
+    .map(s => `${s.label}: ${number(s.points[index] ?? 0)}`)
+    .join(', ')
+  return `${long(props.categories[index] ?? '')} — ${parts}`
+}
+</script>
+
+<template>
+  <div ref="el" class="relative w-full">
+    <svg
+      :width="width"
+      :height="props.height"
+      :viewBox="`0 0 ${width} ${props.height}`"
+      role="group"
+      :aria-label="props.ariaLabel"
+      class="block max-w-full overflow-visible"
+    >
+      <!-- Gitter: durchgezogene Haarlinien, eine Stufe von der Fläche weg. -->
+      <g>
+        <line
+          v-for="tick in ticks"
+          :key="`grid-${tick.value}`"
+          :x1="PADDING.left"
+          :x2="width - PADDING.right"
+          :y1="tick.y"
+          :y2="tick.y"
+          :stroke="tick.value === 0 ? 'var(--basekit-chart-axis)' : 'var(--basekit-chart-grid)'"
+          stroke-width="1"
+          shape-rendering="crispEdges"
+        />
+        <text
+          v-for="tick in ticks"
+          :key="`tick-${tick.value}`"
+          :x="PADDING.left - 8"
+          :y="tick.y + 3"
+          text-anchor="end"
+          fill="currentColor"
+          class="text-dimmed text-[10px] tabular-nums"
+        >{{ tick.label }}</text>
+      </g>
+
+      <!-- Datenmarken -->
+      <g
+        v-for="column in columns"
+        :key="column.category"
+      >
+        <path
+          v-for="segment in column.segments"
+          :key="segment.key"
+          :d="segment.path"
+          :fill="segment.color"
+          :opacity="active === null || active === column.index ? 1 : 0.45"
+          class="transition-opacity"
+        />
+      </g>
+
+      <!-- Trefferflächen: über die volle Höhe und über die ganze Bandbreite,
+           damit niemand eine 14 px schmale Säule treffen muss. -->
+      <g>
+        <rect
+          v-for="column in columns"
+          :key="`hit-${column.category}`"
+          :x="PADDING.left + plot.band * column.index"
+          :y="PADDING.top"
+          :width="plot.band"
+          :height="plot.innerHeight"
+          fill="transparent"
+          tabindex="0"
+          role="button"
+          :aria-label="readout(column.index)"
+          class="cursor-default outline-none"
+          @pointerenter="active = column.index"
+          @pointerleave="active = null"
+          @focus="active = column.index"
+          @blur="active = null"
+        />
+      </g>
+
+      <!-- Achsenbeschriftung -->
+      <text
+        v-for="label in axisLabels"
+        :key="`label-${label.category}`"
+        :x="label.x"
+        :y="props.height - 6"
+        text-anchor="middle"
+        fill="currentColor"
+        class="text-dimmed text-[10px]"
+      >{{ label.text }}</text>
+    </svg>
+
+    <!-- Tooltip: Wert führt, Reihenname folgt. -->
+    <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"
+      :style="{ left: `${Math.min(Math.max(tooltip.anchor, 90), width - 90)}px` }"
+    >
+      <p class="mb-1 text-[11px] font-medium text-muted">
+        {{ tooltip.title }}
+      </p>
+      <ul class="space-y-0.5">
+        <li
+          v-for="row in tooltip.rows"
+          :key="row.key"
+          class="flex items-center gap-2 text-xs"
+        >
+          <span class="h-0.5 w-3 shrink-0 rounded-full" :style="{ backgroundColor: row.color }" />
+          <span class="font-semibold tabular-nums text-highlighted">{{ number(row.value) }}</span>
+          <span class="truncate text-muted">{{ row.label }}</span>
+        </li>
+        <li v-if="!tooltip.rows.length" class="text-xs text-muted">
+          {{ number(0) }}
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>

package/app/components/charts/BaseKitChartDonut.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+/**
+ * Ring für Teil-vom-Ganzen bei wenigen Klassen.
+ *
+ * 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.
+ *
+ * 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.
+ */
+import { computed, ref } from 'vue'
+import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
+
+interface DonutSlice {
+  key: string
+  label: string
+  value: number
+}
+
+const props = withDefaults(defineProps<{
+  slices: DonutSlice[]
+  /** Beschriftung unter der Summe in der Mitte. */
+  centerLabel?: string
+  size?: number
+  ariaLabel?: string
+}>(), {
+  centerLabel: undefined,
+  size: 168,
+  ariaLabel: undefined,
+})
+
+const { number, percent } = useChartFormat()
+
+const THICKNESS = 18
+/** Lücke zwischen den Segmenten, in Grad — das Gegenstück zur 2-px-Lücke. */
+const GAP_DEGREES = 2
+
+const active = ref<string | null>(null)
+
+const total = computed(() => props.slices.reduce((sum, slice) => sum + slice.value, 0))
+
+const radius = computed(() => props.size / 2 - THICKNESS / 2 - 2)
+const center = computed(() => props.size / 2)
+
+function pointOnCircle(angle: number, r: number): [number, number] {
+  const radians = ((angle - 90) * Math.PI) / 180
+  return [center.value + r * Math.cos(radians), center.value + r * Math.sin(radians)]
+}
+
+const arcs = computed(() => {
+  if (total.value <= 0) return []
+
+  let cursor = 0
+  return props.slices
+    .map((slice, order) => ({ slice, order }))
+    .filter(entry => entry.slice.value > 0)
+    .map(({ slice, order }) => {
+      const sweep = (slice.value / total.value) * 360
+      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.
+      const full = sweep >= 359.9
+      const gap = full ? 0 : Math.min(GAP_DEGREES, sweep / 3)
+      const from = start + gap / 2
+      const to = start + sweep - gap / 2
+
+      const [x1, y1] = pointOnCircle(from, radius.value)
+      const [x2, y2] = pointOnCircle(to, radius.value)
+      const largeArc = to - from > 180 ? 1 : 0
+
+      return {
+        key: slice.key,
+        label: slice.label,
+        value: slice.value,
+        color: baseKitChartColor(order),
+        path: full
+          ? `M ${center.value} ${center.value - radius.value} `
+            + `a ${radius.value} ${radius.value} 0 1 1 -0.01 0`
+          : `M ${x1} ${y1} A ${radius.value} ${radius.value} 0 ${largeArc} 1 ${x2} ${y2}`,
+      }
+    })
+})
+
+const legend = computed(() =>
+  props.slices.map((slice, order) => ({
+    ...slice,
+    color: baseKitChartColor(order),
+    share: percent(slice.value, total.value),
+  })),
+)
+</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. -->
+  <div class="flex flex-col items-center gap-5">
+    <svg
+      :width="props.size"
+      :height="props.size"
+      :viewBox="`0 0 ${props.size} ${props.size}`"
+      role="group"
+      :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. -->
+      <circle
+        v-if="!arcs.length"
+        :cx="center"
+        :cy="center"
+        :r="radius"
+        fill="none"
+        stroke="var(--basekit-chart-grid)"
+        :stroke-width="THICKNESS"
+      />
+
+      <path
+        v-for="arc in arcs"
+        :key="arc.key"
+        :d="arc.path"
+        fill="none"
+        :stroke="arc.color"
+        :stroke-width="THICKNESS"
+        stroke-linecap="butt"
+        :opacity="active === null || active === arc.key ? 1 : 0.4"
+        class="transition-opacity"
+        tabindex="0"
+        role="button"
+        :aria-label="`${arc.label}: ${number(arc.value)}`"
+        @pointerenter="active = arc.key"
+        @pointerleave="active = null"
+        @focus="active = arc.key"
+        @blur="active = null"
+      />
+
+      <text
+        :x="center"
+        :y="center - 2"
+        text-anchor="middle"
+        fill="currentColor"
+        class="text-highlighted text-2xl font-semibold"
+      >{{ number(total) }}</text>
+      <text
+        v-if="props.centerLabel"
+        :x="center"
+        :y="center + 16"
+        text-anchor="middle"
+        fill="currentColor"
+        class="text-dimmed text-[11px]"
+      >{{ props.centerLabel }}</text>
+    </svg>
+
+    <!-- Legende trägt die Identität, nicht die Farbe allein. -->
+    <ul class="w-full space-y-1.5">
+      <li
+        v-for="entry in legend"
+        :key="entry.key"
+        class="flex items-center gap-2 text-sm"
+        @pointerenter="active = entry.key"
+        @pointerleave="active = null"
+      >
+        <span class="size-2.5 shrink-0 rounded-sm" :style="{ backgroundColor: entry.color }" />
+        <span class="truncate text-muted">{{ entry.label }}</span>
+        <span class="ml-auto shrink-0 font-medium tabular-nums text-highlighted">{{ number(entry.value) }}</span>
+        <span class="w-12 shrink-0 text-right text-xs tabular-nums text-dimmed">{{ entry.share }}</span>
+      </li>
+    </ul>
+  </div>
+</template>

package/app/components/charts/BaseKitChartFigure.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+/**
+ * Rahmen für ein Diagramm: Karte, Titel, Legende und der Umschalter auf die
+ * Tabellenansicht.
+ *
+ * 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.
+ */
+import { computed, ref } from 'vue'
+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. */
+  href?: string
+  /** Diagramm ausgrauen, während im Hintergrund nachgeladen wird. */
+  stale?: boolean
+  /** Ohne Tabellen-Slot entfällt der Umschalter. */
+  tableAvailable?: boolean
+}>(), {
+  subtitle: undefined,
+  href: undefined,
+  stale: false,
+  tableAvailable: true,
+})
+
+const labels = useBaseKitLabels()
+const showTable = ref(false)
+
+const toggleLabel = computed(() =>
+  showTable.value ? labels.value.chartAsChart : labels.value.chartAsTable,
+)
+const toggleIcon = computed(() =>
+  showTable.value ? 'i-lucide-chart-column' : 'i-lucide-table',
+)
+</script>
+
+<template>
+  <UCard :ui="{ body: 'space-y-4' }">
+    <div class="flex items-start justify-between gap-3">
+      <div class="min-w-0">
+        <component
+          :is="props.href ? 'NuxtLink' : 'h2'"
+          :to="props.href"
+          class="text-sm font-semibold text-highlighted"
+          :class="props.href ? 'group inline-flex items-center gap-1 hover:text-primary' : 'block'"
+        >
+          {{ props.title }}
+          <UIcon
+            v-if="props.href"
+            name="i-lucide-arrow-right"
+            class="size-3.5 opacity-0 transition-opacity group-hover:opacity-100"
+          />
+        </component>
+        <p v-if="props.subtitle" class="mt-0.5 text-xs text-muted">
+          {{ props.subtitle }}
+        </p>
+      </div>
+
+      <UButton
+        v-if="props.tableAvailable"
+        :icon="toggleIcon"
+        :aria-label="toggleLabel"
+        :title="toggleLabel"
+        color="neutral"
+        variant="ghost"
+        size="xs"
+        @click="showTable = !showTable"
+      />
+    </div>
+
+    <div :class="props.stale ? 'opacity-60 transition-opacity' : 'transition-opacity'">
+      <div v-show="!showTable">
+        <slot />
+      </div>
+      <div v-if="props.tableAvailable" v-show="showTable" class="overflow-x-auto">
+        <slot name="table" />
+      </div>
+    </div>
+
+    <slot name="footer" />
+  </UCard>
+</template>

package/app/components/charts/BaseKitChartMeter.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/**
+ * Ein Verhältnis gegen eine bekannte Grenze — „so viele von so vielen".
+ *
+ * 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.
+ */
+import { computed } from 'vue'
+import { baseKitChartColor, useChartFormat } from '../../composables/useChartPalette'
+
+const props = withDefaults(defineProps<{
+  value: number
+  total: number
+  label?: string
+  hint?: string
+}>(), {
+  label: undefined,
+  hint: undefined,
+})
+
+const { number, percent } = useChartFormat()
+
+const ratio = computed(() => (props.total <= 0 ? 0 : Math.min(1, props.value / props.total)))
+const color = baseKitChartColor(0)
+</script>
+
+<template>
+  <div class="space-y-2">
+    <div class="flex items-baseline justify-between gap-3">
+      <p class="text-2xl font-semibold text-highlighted">
+        {{ number(props.value) }}<span class="text-base font-normal text-muted"> / {{ number(props.total) }}</span>
+      </p>
+      <p class="text-sm tabular-nums text-muted">
+        {{ percent(props.value, props.total) }}
+      </p>
+    </div>
+
+    <div
+      class="h-2.5 w-full overflow-hidden rounded-full bg-elevated"
+      role="meter"
+      :aria-valuenow="props.value"
+      :aria-valuemin="0"
+      :aria-valuemax="props.total"
+      :aria-label="props.label"
+    >
+      <div
+        class="h-full rounded-full"
+        :style="{ width: `${ratio * 100}%`, backgroundColor: color }"
+      />
+    </div>
+
+    <p v-if="props.hint" class="text-xs text-dimmed">
+      {{ props.hint }}
+    </p>
+  </div>
+</template>