Skip to content

Commit b9d42b5

Browse files
committedFeb 8, 2024
feat: add justified columns example
1 parent b87e13c commit b9d42b5

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed
 

‎examples/justified_columns.ts

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
// import stringWidth from 'string-width'
2+
import { TERMINAL_SIZE, justify, wrap } from '../src/helpers.js'
3+
4+
const metrics = [
5+
{
6+
title: 'First contentful paint',
7+
timing: '2.7s',
8+
},
9+
{
10+
title: 'Largest contentful pain',
11+
timing: '3.2s',
12+
},
13+
{
14+
title: 'Speed index',
15+
timing: '2.7s',
16+
},
17+
{
18+
title: 'Initial server response was short',
19+
timing: 'Root document took 20ms',
20+
},
21+
]
22+
23+
function renderList() {
24+
const titles = metrics.map(({ title }) => title)
25+
const timings = metrics.map(({ timing }) => timing)
26+
27+
/**
28+
* Uncomment the following line if you do not want
29+
* to trim the timing column.
30+
*/
31+
// const largestTiming = Math.max(...timings.map((timing) => stringWidth(timing)))
32+
const largestTiming = 10
33+
34+
const justifiedTitles = justify(titles, {
35+
maxWidth: TERMINAL_SIZE - largestTiming,
36+
align: 'left',
37+
})
38+
const justifiedTimings = wrap(justify(timings, { maxWidth: largestTiming }), {
39+
startColumn: TERMINAL_SIZE - largestTiming,
40+
endColumn: TERMINAL_SIZE,
41+
trimStart: true,
42+
})
43+
44+
justifiedTitles.forEach((title, index) => {
45+
console.log(`${title}${justifiedTimings[index]}`)
46+
})
47+
}
48+
49+
renderList()

0 commit comments

Comments
 (0)
Please sign in to comment.