Standalone analytics dashboard component for Infrabricks Analytics
npm install dishub-analytics.dashboardA high-performance, standalone analytics dashboard component for React. Visualize your Dishub Analytics data with beautiful charts, real-time monitors, and behavioral heatmaps.
- 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.
``bash`
npm install dishub-analytics.dashboard
Ensure you have the peer dependencies installed:
`bash`
npm install react react-dom lucide-react recharts framer-motion
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 (
The dashboard uses Tailwind CSS for its internal components. Ensure your project is set up with Tailwind to render the styles correctly.
MIT © Dishub