oxios 1.13.0

Oxios Agent OS — Agent Operating System powered by oxi-sdk
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

import { useTranslation } from 'react-i18next'
import { Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
import { EmptyState } from '@/components/shared/empty-state'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { useCostDaily } from '@/hooks/use-costs'

interface Props {
  days?: number
}

export function CostChart({ days = 30 }: Props) {
  const { t } = useTranslation()
  const { data, isLoading } = useCostDaily(days)

  const items = data?.items ?? []

  return (
    <Card>
      <CardHeader>
        <CardTitle className="text-base">
          {t('cost.dailySpend')} ({days}d)
        </CardTitle>
      </CardHeader>
      <CardContent>
        {isLoading ? (
          <p className="text-sm text-muted-foreground py-4">{t('common.loading')}</p>
        ) : items.length === 0 ? (
          <EmptyState title={t('cost.noData')} />
        ) : (
          <ResponsiveContainer width="100%" height={240}>
            <BarChart data={items}>
              <CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
              <XAxis
                dataKey="date"
                tick={{ fontSize: 10 }}
                tickFormatter={(v: string) => v.slice(5)}
              />
              <YAxis
                tick={{ fontSize: 10 }}
                tickFormatter={(v: number) => `$${v.toFixed(2)}`}
                width={60}
              />
              <Tooltip
                formatter={(value) => [`$${Number(value).toFixed(4)}`, t('cost.spend')]}
                labelStyle={{ fontSize: 12 }}
              />
              <Bar dataKey="cost_usd" fill="hsl(var(--primary))" radius={[4, 4, 0, 0]} />
            </BarChart>
          </ResponsiveContainer>
        )}
      </CardContent>
    </Card>
  )
}