A bar chart: the shape of a metrics artifact.
(props: { readonly next: () => number })
| 135 | |
| 136 | /** A bar chart: the shape of a metrics artifact. */ |
| 137 | function BarsFigure(props: { readonly next: () => number }) { |
| 138 | const { next } = props; |
| 139 | const count = between(next, 6, 9); |
| 140 | const span = WIDTH - PAD * 2; |
| 141 | const gap = 6; |
| 142 | const barWidth = (span - gap * (count - 1)) / count; |
| 143 | const floor = HEIGHT - PAD - 14; |
| 144 | const maxHeight = floor - BODY_TOP - 4; |
| 145 | |
| 146 | return ( |
| 147 | <> |
| 148 | {Array.from({ length: count }, (_, index) => { |
| 149 | const height = between(next, Math.round(maxHeight * 0.25), maxHeight); |
| 150 | return ( |
| 151 | <Block |
| 152 | key={index} |
| 153 | x={PAD + index * (barWidth + gap)} |
| 154 | y={floor - height} |
| 155 | width={barWidth} |
| 156 | height={height} |
| 157 | className={index % 3 === 0 ? "fill-muted-foreground/35" : undefined} |
| 158 | /> |
| 159 | ); |
| 160 | })} |
| 161 | <line |
| 162 | x1={PAD} |
| 163 | y1={floor + 5} |
| 164 | x2={WIDTH - PAD} |
| 165 | y2={floor + 5} |
| 166 | className="stroke-border" |
| 167 | strokeWidth={1} |
| 168 | /> |
| 169 | </> |
| 170 | ); |
| 171 | } |
| 172 | |
| 173 | /** A table: the shape of a list or report artifact. */ |
| 174 | function RowsFigure(props: { readonly next: () => number }) { |