web/src/lib/components/StatsBar.svelte 2.1 K raw
1
<script>
2
  import { avg } from '../utils';
3
4
  export let digraphs = [];
5
6
  $: avgHT1 = avg(digraphs, (d) => d.holdTime1);
7
  $: avgHT2 = avg(digraphs, (d) => d.holdTime2);
8
  $: avgPP = avg(digraphs, (d) => d.pressPress);
9
  $: avgRR = avg(digraphs, (d) => d.releaseRelease);
10
  $: avgPR = avg(digraphs, (d) => d.pressRelease);
11
  $: avgRP = avg(digraphs, (d) => d.releasePress);
12
</script>
13
14
<div class="stats-bar">
15
  <div class="stat">
16
    <span class="stat-val">{avgHT1}<span class="unit-sm">ms</span></span>
17
    <span class="stat-label">hold time 1</span>
18
  </div>
19
  <div class="stat">
20
    <span class="stat-val">{avgHT2}<span class="unit-sm">ms</span></span>
21
    <span class="stat-label">hold time 2</span>
22
  </div>
23
  <div class="stat">
24
    <span class="stat-val">{avgPP}<span class="unit-sm">ms</span></span>
25
    <span class="stat-label">press-press</span>
26
  </div>
27
  <div class="stat">
28
    <span class="stat-val">{avgRR}<span class="unit-sm">ms</span></span>
29
    <span class="stat-label">release-release</span>
30
  </div>
31
  <div class="stat">
32
    <span class="stat-val">{avgPR}<span class="unit-sm">ms</span></span>
33
    <span class="stat-label">press-release</span>
34
  </div>
35
  <div class="stat">
36
    <span class="stat-val">{avgRP}<span class="unit-sm">ms</span></span>
37
    <span class="stat-label">release-press</span>
38
  </div>
39
</div>
40
41
<style>
42
  .stats-bar {
43
    display: grid;
44
    grid-template-columns: repeat(6, 1fr);
45
    border: 1px solid #333;
46
  }
47
48
  .stat {
49
    display: flex;
50
    flex-direction: column;
51
    align-items: center;
52
    padding: 0.75rem 0.5rem;
53
    border-right: 1px solid #333;
54
  }
55
56
  .stat:last-child {
57
    border-right: none;
58
  }
59
60
  .stat-val {
61
    font-size: 14px;
62
    font-weight: 700;
63
  }
64
65
  .stat-label {
66
    font-size: 10px;
67
    color: #888;
68
    margin-top: 0.15rem;
69
  }
70
71
  .unit-sm {
72
    font-size: 10px;
73
    color: #888;
74
    font-weight: 400;
75
  }
76
77
  @media (max-width: 480px) {
78
    .stats-bar {
79
      grid-template-columns: repeat(3, 1fr);
80
    }
81
82
    .stat:nth-child(3) {
83
      border-right: none;
84
    }
85
86
    .stat:nth-child(1),
87
    .stat:nth-child(2),
88
    .stat:nth-child(3) {
89
      border-bottom: 1px solid #333;
90
    }
91
  }
92
</style>