renderreport 0.2.3

Data-driven report generation with Typst as embedded render engine — no CLI dependency
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

// ImpactGrid Component
// Three-column impact card grid (user / risk / conversion)

#let impact-grid-card(card) = {
  let accent = if card.status == "good"    { color-ok }
    else if card.status == "warn"          { color-warn }
    else if card.status == "bad"           { color-bad }
    else if card.status == "neutral"       { color-text-muted }
    else { color-primary }

  block(
    width: 100%,
    fill: color-surface,
    stroke: (paint: color-border, thickness: component-card-border-width),
    radius: 8pt,
  )[
    // Top accent bar
    #block(
      width: 100%,
      height: 2.5pt,
      fill: accent,
      radius: (top: 8pt),
    )
    #block(inset: (x: spacing-3, y: spacing-2))[
      // Icon + label row
      #stack(
        dir: ltr,
        spacing: 3pt,
        if card.icon != none [
          #text(size: font-size-sm)[#card.icon]
        ],
        label-text(card.label),
      )
      #v(spacing-1)
      #text(size: font-size-sm, weight: "bold", fill: color-text)[#card.headline]
      #if card.body != none and card.body != "" [
        #v(spacing-1)
        #text(size: font-size-xs, fill: color-text-muted)[#card.body]
      ]
    ]
  ]
}

#let impact-grid(data) = {
  block(width: 100%)[
    #if data.title != none [
      #text(weight: "bold", size: font-size-sm, fill: color-text)[#data.title]
      #v(spacing-3)
    ]
    #stack(
      spacing: spacing-3,
      impact-grid-card(data.user),
      impact-grid-card(data.risk),
      impact-grid-card(data.conversion),
    )
  ]
}