# analytics-dashboard-skill

> Dashboards de analytics com Recharts, KPIs customizados e filtros de data

- Author: OVT-K
- Repository: OVT-K/antigravity-skill-repo
- Version: 20260127151550
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-06
- Source: https://github.com/OVT-K/antigravity-skill-repo
- Web: https://mule.run/skillshub/@@OVT-K/antigravity-skill-repo~analytics-dashboard-skill:20260127151550

---

---
name: analytics-dashboard-skill
description: Dashboards de analytics com Recharts, KPIs customizados e filtros de data
version: 1.0.0
author: Antigravity AI
tags: [analytics, recharts, dashboard, kpis, charts]
---

# Analytics Dashboard Skill

## Objetivo

Criação de dashboards analíticos com **Recharts**, métricas customizadas (KPIs), filtros de data e export para PNG/CSV.

---

## Stack

```json
{
  "recharts": "^3.6.0",
  "date-fns": "^4.1.0"
}
```

---

## Token Usage Chart

```typescript
import { LineChart, Line, XAxis, YAxis, Tooltip, Legend, ResponsiveContainer } from 'recharts';

export const TokenUsageChart = ({ data }: { data: any[] }) => (
  <ResponsiveContainer width="100%" height={300}>
    <LineChart data={data}>
      <XAxis dataKey="date" stroke="#64748b" />
      <YAxis stroke="#64748b" />
      <Tooltip
        contentStyle={{
          backgroundColor: '#0b0f17',
          border: '1px solid rgba(255,255,255,0.1)',
          borderRadius: '8px'
        }}
      />
      <Legend />
      <Line type="monotone" dataKey="openai" stroke="#10b981" strokeWidth={2} dot={false} />
      <Line type="monotone" dataKey="anthropic" stroke="#3b82f6" strokeWidth={2} dot={false} />
      <Line type="monotone" dataKey="google" stroke="#f59e0b" strokeWidth={2} dot={false} />
    </LineChart>
  </ResponsiveContainer>
);
```

## KPI Cards

```typescript
export const KPICard = ({ title, value, trend, icon }: KPIProps) => (
  <div className="dashboard-card p-6">
    <div className="flex items-center justify-between mb-2">
      <span className="text-xs text-slate-500 uppercase">{title}</span>
      {icon}
    </div>
    <div className="text-3xl font-bold text-white">{value}</div>
    <div className={`text-xs ${trend > 0 ? 'text-emerald-400' : 'text-red-400'}`}>
      {trend > 0 ? '↑' : '↓'} {Math.abs(trend)}% vs last week
    </div>
  </div>
);
```

## Date Range Filter

```typescript
import { useState } from 'react';
import { subDays, format } from 'date-fns';

export const DateRangeFilter = ({ onChange }: { onChange: (range: [Date, Date]) => void }) => {
  const [range, setRange] = useState<[Date, Date]>([subDays(new Date(), 7), new Date()]);

  const presets = [
    { label: 'Last 7 days', days: 7 },
    { label: 'Last 30 days', days: 30 },
    { label: 'Last 90 days', days: 90 }
  ];

  return (
    <div className="flex gap-2">
      {presets.map(preset => (
        <button
          key={preset.label}
          onClick={() => {
            const newRange: [Date, Date] = [subDays(new Date(), preset.days), new Date()];
            setRange(newRange);
            onChange(newRange);
          }}
          className="px-4 py-2 bg-white/5 hover:bg-white/10 rounded-lg text-xs"
        >
          {preset.label}
        </button>
      ))}
    </div>
  );
};
```

---

_Skill criada em 26/01/2026_