FlowStar/components/analytics/charts.tsx at main · ghzhost/FlowStar · GitHub

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
'use client'

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { formatTokenAmount } from '@/lib/stream-utils'

interface SeriesPoint {
  label: string
  count: number
}

interface TokenShare {
  symbol: string
  amount: bigint
  count: number
  decimals: number
}

/** Scale factor: pixels per unit count for the bar chart width */
const PIXELS_PER_COUNT = 20

/** Minimum bar width in pixels so very small values are still visible */
const MIN_BAR_WIDTH_PX = 8

interface Props {
  series: SeriesPoint[]
  topTokens: TokenShare[]
  tokenShares: TokenShare[]
  totalVolume: bigint
}

export function AnalyticsCharts({ series, topTokens, tokenShares, totalVolume }: Props) {
  return (
    <>
      <div className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
        <Card>
          <CardHeader>
            <CardTitle>Streams created over time</CardTitle>
            <CardDescription>
              Daily stream creation activity for the selected window.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-3">
              {series.length === 0 ? (
                <p className="text-sm text-muted-foreground">
                  No stream activity yet for this period.
                </p>
              ) : (
                series.map((point) => (
                  <div key={point.label} className="space-y-1">
                    <div className="flex items-center justify-between text-sm">
                      <span>{point.label}</span>
                      <span className="font-medium">{point.count}</span>
                    </div>
                    <div className="h-2 rounded-full bg-muted">
                      <div
                        className="h-2 rounded-full bg-primary"
                        style={{ width: `${Math.min(100, point.count * PIXELS_PER_COUNT)}%` }}
                      />
                    </div>
                  </div>
                ))
              )}
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardHeader>
            <CardTitle>Top tokens by volume</CardTitle>
            <CardDescription>Most-used tokens across created streams.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            {topTokens.length === 0 ? (
              <p className="text-sm text-muted-foreground">No volume data yet.</p>
            ) : (
              topTokens.map((token) => (
                <div
                  key={token.symbol}
                  className="flex items-center justify-between rounded-lg border border-border px-3 py-2"
                >
                  <div>
                    <p className="font-medium">{token.symbol}</p>
                    <p className="text-xs text-muted-foreground">{token.count} streams</p>
                  </div>
                  <Badge variant="secondary">
                    {formatTokenAmount(token.amount, token.decimals)} {token.symbol}
                  </Badge>
                </div>
              ))
            )}
          </CardContent>
        </Card>
      </div>

      <div className="grid gap-6 lg:grid-cols-[1fr_1fr]">
        <Card>
          <CardHeader>
            <CardTitle>Token distribution</CardTitle>
            <CardDescription>Visible token mix across the current dataset.</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            {tokenShares.length === 0 ? (
              <p className="text-sm text-muted-foreground">
                No token distribution data available yet.
              </p>
            ) : (
              tokenShares.map((token) => (
                <div key={token.symbol} className="space-y-1">
                  <div className="flex items-center justify-between text-sm">
                    <span>{token.symbol}</span>
                    <span className="font-medium">
                      {formatTokenAmount(token.amount, token.decimals)}
                    </span>
                  </div>
                  <div className="h-2 rounded-full bg-muted">
                    <div
                      className="h-2 rounded-full bg-secondary"
                      style={{
                        width: `${Math.max(MIN_BAR_WIDTH_PX, (Number(token.amount) / Math.max(1, Number(totalVolume))) * 100) || 0}%`,
                      }}
                    />
                  </div>
                </div>
              ))
            )}
          </CardContent>
        </Card>
      </div>
    </>
  )
}

export function ChartSkeleton() {
  return (
    <div className="space-y-6">
      <div className="grid gap-6 lg:grid-cols-[1.3fr_0.7fr]">
        <div className="h-64 animate-pulse rounded-xl border border-border bg-card/50" />
        <div className="h-64 animate-pulse rounded-xl border border-border bg-card/50" />
      </div>
      <div className="grid gap-6 lg:grid-cols-[1fr_1fr]">
        <div className="h-48 animate-pulse rounded-xl border border-border bg-card/50" />
        <div className="h-48 animate-pulse rounded-xl border border-border bg-card/50" />
      </div>
    </div>
  )
}