@athena-tracker/dashboard-react

Pre-built React dashboard components for ATHENA analytics

Features

• ✅ Complete Dashboard - Drop-in analytics dashboard component
• ✅ Modular Widgets - Use individual widgets or combine them
• ✅ Theming Support - Customize colors, fonts, and styles
• ✅ Real-time Updates - Auto-refresh and WebSocket live streams
• ✅ TypeScript Support - Full type definitions included
• ✅ Zero Config - Works out of the box with sensible defaults

Installation

npm install @athena-tracker/dashboard-react @athena-tracker/react-hooks

Quick Start

Complete Dashboard

import { AthenaDashboard } from '@athena-tracker/dashboard-react';

function App() {
  return (
    <AthenaDashboard
      appId="app_123"
      workspaceToken={process.env.ATHENA_WORKSPACE_JWT}
      theme={{
        primaryColor: '#FF6B35',
        secondaryColor: '#4ECDC4'
      }}
      views={['overview', 'journeys', 'live']}
      refreshInterval={60000}
    />
  );
}

Individual Widgets

import { OverviewWidget, LiveStreamWidget } from '@athena-tracker/dashboard-react';

function CustomDashboard() {
  return (
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>
      <OverviewWidget
        appId="app_123"
        workspaceToken={process.env.ATHENA_WORKSPACE_JWT}
        period="7d"
      />
      <LiveStreamWidget
        appId="app_123"
        workspaceToken={process.env.ATHENA_WORKSPACE_JWT}
      />
    </div>
  );
}

Components

AthenaDashboard

Main dashboard component with tabbed navigation.

<AthenaDashboard
  appId="app_123"
  workspaceToken={token}
  theme={{
    primaryColor: '#3B82F6',
    backgroundColor: '#FFFFFF',
    textColor: '#1F2937',
    borderRadius: '8px'
  }}
  views={['overview', 'journeys', 'friction', 'heatmap', 'predictions', 'live']}
  refreshInterval={60000}
  className="custom-dashboard"
  style={{ maxWidth: '1200px', margin: '0 auto' }}
/>

Props: | Prop | Type | Required | Description | |------|------|----------|-------------| | appId | string | ✅ | ATHENA app ID | | workspaceToken | string | ✅ | JWT workspace token | | apiUrl | string | ❌ | API base URL (default: https://tracker.pascal.cx) | | theme | DashboardTheme | ❌ | Customize colors and styles | | views | DashboardView[] | ❌ | Enabled views (default: all) | | refreshInterval | number | ❌ | Auto-refresh interval in ms | | className | string | ❌ | Additional CSS class | | style | CSSProperties | ❌ | Additional inline styles |

OverviewWidget

Key metrics widget showing sessions, events, and users.

<OverviewWidget
  appId="app_123"
  workspaceToken={token}
  period="7d"
  refreshInterval={30000}
/>

Props: | Prop | Type | Required | Description | |------|------|----------|-------------| | appId | string | ✅ | ATHENA app ID | | workspaceToken | string | ✅ | JWT workspace token | | apiUrl | string | ❌ | API base URL | | period | string | ❌ | '1h' | '24h' | '7d' | '30d' | '90d' (default: '7d') | | theme | DashboardTheme | ❌ | Customize colors | | refreshInterval | number | ❌ | Auto-refresh interval |

JourneysWidget

User flow visualization showing top navigation paths.

<JourneysWidget
  appId="app_123"
  workspaceToken={token}
  period="7d"
/>

LiveStreamWidget

Real-time event stream via WebSocket.

<LiveStreamWidget
  appId="app_123"
  workspaceToken={token}
/>

Theming

Customize the dashboard appearance:

const customTheme = {
  primaryColor: '#FF6B35',       // Primary accent color
  secondaryColor: '#4ECDC4',     // Secondary accent color
  backgroundColor: '#FFFFFF',     // Widget background
  textColor: '#1F2937',          // Text color
  borderColor: '#E5E7EB',        // Border color
  borderRadius: '8px',           // Border radius
  fontFamily: 'Inter, sans-serif' // Font family
};

<AthenaDashboard theme={customTheme} {...otherProps} />

Advanced Usage

Custom Layout

Combine widgets in your own layout:

import { OverviewWidget, JourneysWidget, LiveStreamWidget } from '@athena-tracker/dashboard-react';

function CustomLayout({ appId, workspaceToken }) {
  return (
    <div className="analytics-grid">
      <div className="main-content">
        <OverviewWidget appId={appId} workspaceToken={workspaceToken} period="7d" />
        <JourneysWidget appId={appId} workspaceToken={workspaceToken} period="7d" />
      </div>

      <aside className="sidebar">
        <LiveStreamWidget appId={appId} workspaceToken={workspaceToken} />
      </aside>
    </div>
  );
}

White-Label Integration

Remove branding and customize fully:

<AthenaDashboard
  appId="app_123"
  workspaceToken={token}
  theme={{
    primaryColor: '#YOUR_BRAND_COLOR',
    fontFamily: 'Your Brand Font'
  }}
  className="your-custom-class"
  style={{
    border: 'none',
    boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
  }}
/>

Browser Support

• Chrome/Edge 90+
• Safari 14+
• Firefox 88+
• React 18+

TypeScript Support

Full TypeScript definitions included:

import type { DashboardConfig, DashboardTheme, WidgetProps } from '@athena-tracker/dashboard-react';

License

MIT

Documentation

• Full documentation: https://docs.athena.ai/dashboard-react
• Integration guide: See PARTNER_INTEGRATION_GUIDE.md
• API reference: https://tracker.pascal.cx/docs

Support

• Issues: https://github.com/RubaiyatF/Pascal/issues
• Email: [email protected]