@quantabit/analytics-sdk

QuantaBit Analytics SDK - Event tracking, user behavior analytics, data reports, and operations dashboard

✨ Features

• 📊 Metrics Dashboard - Real-time KPI monitoring and trend charts
• 📈 Trend Analysis - Historical data visualization with customizable date ranges
• 👤 User Analytics - User activity tracking and behavior analysis
• 🔴 Real-time Data - Live metrics with auto-refresh
• 📐 Dimension Analysis - Multi-dimensional data breakdowns
• 📥 Report Export - Export analytics data in various formats
• 🎨 Advanced Components - Data overview, event tables, advanced charts

📦 Installation

npm install @quantabit/analytics-sdk
# or
yarn add @quantabit/analytics-sdk

🚀 Quick Start

1. Using Components

import {
  AnalyticsDashboard,
  MetricsGrid,
  MetricCard,
  TrendChart,
  RealtimeCard,
  DimensionTable,
  DateRangePicker,
  UserActivityCard,
} from '@quantabit/analytics-sdk';
import '@quantabit/analytics-sdk/styles';

// Full analytics dashboard
<AnalyticsDashboard apiUrl="https://api.example.com/v1" />

// Metrics grid
<MetricsGrid
  metrics={['dau', 'revenue', 'orders', 'conversion']}
  dateRange={dateRange}
/>

// Single metric card
<MetricCard
  title="Daily Active Users"
  value={12580}
  change={+15.3}
  trend="up"
/>

// Trend chart
<TrendChart
  metric="revenue"
  dateRange={dateRange}
  granularity="daily"
/>

// Real-time metrics card
<RealtimeCard
  metrics={['online_users', 'active_sessions']}
  refreshInterval={5000}
/>

// Dimension analysis table
<DimensionTable
  metric="revenue"
  dimensions={['channel', 'region', 'device']}
/>

// Date range picker
<DateRangePicker
  value={dateRange}
  onChange={(range) => setDateRange(range)}
  presets={['today', '7d', '30d', '90d']}
/>

// User activity card
<UserActivityCard userId="user_123" />

2. Advanced Components

import {
  DataOverview,
  RealtimePanel,
  EventTable,
} from '@quantabit/analytics-sdk';

// Data overview panel
<DataOverview showTrends showComparison />

// Real-time panel
<RealtimePanel showChart showMetrics />

// Event tracking table
<EventTable
  showFilters
  showExport
  onEventClick={(event) => viewDetail(event)}
/>

3. Using Hooks

import {
  useAnalyticsOverview,
  useMetrics,
  useUserAnalytics,
  useChartData,
  useRealtimeAnalytics,
  useDimensionAnalysis,
  useDateRange,
  useExportReport,
} from "@quantabit/analytics-sdk";

function MyDashboard() {
  const { overview, loading } = useAnalyticsOverview();
  const { metrics, loadMetrics } = useMetrics("revenue", dateRange);
  const { chartData, loadChart } = useChartData("dau", {
    granularity: "daily",
  });
  const { realtimeData } = useRealtimeAnalytics(5000);
  const { dimensions, loadDimensions } = useDimensionAnalysis(
    "revenue",
    "channel",
  );
  const { dateRange, setDateRange, presets } = useDateRange("7d");
  const { exportReport, exporting } = useExportReport();

  return <div>...</div>;
}

📚 Components

| Component | Description | | -------------------- | ------------------------------------ | | AnalyticsDashboard | Complete analytics dashboard | | MetricsGrid | Grid of key metric cards | | MetricCard | Single KPI card with trend indicator | | TrendChart | Time-series trend chart | | RealtimeCard | Live updating metrics display | | DimensionTable | Multi-dimension data breakdown table | | DateRangePicker | Date range selection with presets | | UserActivityCard | Individual user activity summary | | DataOverview | Advanced data overview panel | | RealtimePanel | Advanced real-time monitoring panel | | EventTable | Event tracking table with filters |

📖 Type Definitions

import { MetricType, Granularity, Dimension } from "@quantabit/analytics-sdk";

// Metric types
MetricType.DAU; // Daily active users
MetricType.MAU; // Monthly active users
MetricType.REVENUE; // Revenue
MetricType.ORDERS; // Orders
MetricType.CONVERSION; // Conversion rate

// Granularity
Granularity.HOURLY;
Granularity.DAILY;
Granularity.WEEKLY;
Granularity.MONTHLY;

// Dimensions
Dimension.CHANNEL; // Traffic channel
Dimension.REGION; // Geographic region
Dimension.DEVICE; // Device type
Dimension.PLATFORM; // Platform

📄 License

MIT License

🌐 Brand & Links

• Official Mainnet: QuantaBit Chain
• Developer Platform: Developer Platform
• Open Platform: Open Platform
• Payment Platform: Pay Platform
• Feedback: Feedback