dishub-analytics.dashboard

A high-performance, standalone analytics dashboard component for React. Visualize your Dishub Analytics data with beautiful charts, real-time monitors, and behavioral heatmaps.

🚀 Features

• Real-time Overview: Monitor active users and current pulse live.
• Conversion Funnels: Track user journey drop-offs and success rates.
• Geographic Insights: Interactive maps showing visitor distribution.
• Technical Breakdown: Browser, Device, and OS metrics.
• Top Pages & Traffic: See where your traffic comes from and where it goes.
• Interactive Heatmaps: Visualize user interaction patterns.
• Customizable Timeframes: 24h, 7d, 30d, or custom ranges.

📦 Installation

npm install dishub-analytics.dashboard

Ensure you have the peer dependencies installed:

npm install react react-dom lucide-react recharts framer-motion

🛠️ Usage

Simply import the AnalyticsDashboard and provide your configuration:

import { AnalyticsDashboard } from 'dishub-analytics.dashboard';

function MyDashboard() {
  const config = {
    apiKey: 'your_api_key',
    endpoint: 'https://dishubanalitics-production.up.railway.app/api/v1',
    realtimeEnabled: true,
    // Pusher configuration for real-time updates
    pusher: {
      key: 'your_pusher_key',
      cluster: 'your_cluster',
      wsHost: 'your_host', // optional
      wsPort: 443,
      forceTLS: true
    }
  };

  return (
    <div className="p-8 bg-slate-50 min-h-screen">
      <AnalyticsDashboard config={config} />
    </div>
  );
}

🎨 Styling

The dashboard uses Tailwind CSS for its internal components. Ensure your project is set up with Tailwind to render the styles correctly.

📄 License

MIT © Dishub