practice TrendIndicator.tsx

0% Statements 0/80
0% Branches 0/1
0% Functions 0/1
0% Lines 0/80
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  'use client'

import { css } from '../../../styled-system/css'

export interface TrendIndicatorProps {
  /** Current accuracy (0-1) */
  current: number
  /** Previous accuracy (0-1), null if no previous session */
  previous: number | null
  /** Label text (default: "from last session") */
  label?: string
  /** Dark mode */
  isDark: boolean
}

/**
 * TrendIndicator - Shows comparison to previous session
 *
 * Displays:
 * - ↑ 5% (green) when improved
 * - ↓ 3% (red) when declined
 * - → Same (gray) when within 1%
 * - Nothing when previous is null
 */
export function TrendIndicator({
  current,
  previous,
  label = 'from last session',
  isDark,
}: TrendIndicatorProps) {
  if (previous === null) return null

  const delta = current - previous
  const deltaPercent = Math.abs(Math.round(delta * 100))

  // Within 1% is considered "same"
  const isImproved = delta > 0.01
  const isDeclined = delta < -0.01
  const isSame = !isImproved && !isDeclined

  if (isSame) {
    return (
      <div
        data-element="trend-indicator"
        data-trend="same"
        className={css({
          display: 'flex',
          alignItems: 'center',
          gap: '0.25rem',
          fontSize: '0.875rem',
          color: isDark ? 'gray.400' : 'gray.500',
        })}
      >
        <span>→</span>
        <span>Same as last session</span>
      </div>
    )
  }

  return (
    <div
      data-element="trend-indicator"
      data-trend={isImproved ? 'improved' : 'declined'}
      className={css({
        display: 'flex',
        alignItems: 'center',
        gap: '0.25rem',
        fontSize: '0.875rem',
        color: isImproved ? (isDark ? 'green.400' : 'green.600') : isDark ? 'red.400' : 'red.600',
      })}
    >
      <span>{isImproved ? '↑' : '↓'}</span>
      <span>
        {deltaPercent}% {label}
      </span>
    </div>
  )
}

export default TrendIndicator