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

``bash
npm install dishub-analytics.dashboard
`

Ensure you have the peer dependencies installed:

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

🛠️ Usage

Simply import the AnalyticsDashboard and provide your configuration:

`tsx
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 (



);
}
``

🎨 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