dishub-analytics.dashboard 1.0.0

package/README.md

@@ -0,0 +1,63 @@
+# 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 (
+    <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](https://dishub.city)

package/dist/Dashboard.d.ts

@@ -0,0 +1,7 @@
+import { DashboardConfig } from './types';
+
+export interface AnalyticsDashboardProps {
+    config: DashboardConfig;
+    className?: string;
+}
+export declare function AnalyticsDashboard({ config, className }: AnalyticsDashboardProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ConversionFunnel.d.ts

@@ -0,0 +1,7 @@
+import { FunnelData } from '../types';
+
+interface ConversionFunnelProps {
+    funnel: FunnelData;
+}
+export declare function ConversionFunnel({ funnel }: ConversionFunnelProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/GeoDistribution.d.ts

@@ -0,0 +1,13 @@
+interface GeoDistributionProps {
+    geo: Array<{
+        country: string;
+        countryCode?: string;
+        count: number;
+    }>;
+    cities: Array<{
+        city: string;
+        count: number;
+    }>;
+}
+export declare function GeoDistribution({ geo, cities }: GeoDistributionProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/HeatmapVisualizer.d.ts

@@ -0,0 +1,6 @@
+interface HeatmapVisualizerProps {
+    path: string;
+    tenantUrl: string;
+}
+export declare function HeatmapVisualizer({ path, tenantUrl }: HeatmapVisualizerProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RealtimeMonitor.d.ts

@@ -0,0 +1,7 @@
+import { AnalyticsStats } from '../types';
+
+interface RealtimeMonitorProps {
+    stats: AnalyticsStats | null;
+}
+export declare function RealtimeMonitor({ stats }: RealtimeMonitorProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RecentEvents.d.ts

@@ -0,0 +1,3 @@
+export declare function RecentEvents({ events }: {
+    events: any[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/RecentVisitors.d.ts

@@ -0,0 +1,5 @@
+interface RecentVisitorsProps {
+    sessions: any[];
+}
+export declare function RecentVisitors({ sessions }: RecentVisitorsProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SessionTimeline.d.ts

@@ -0,0 +1,5 @@
+interface SessionTimelineProps {
+    session: any;
+}
+export declare function SessionTimeline({ session }: SessionTimelineProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/StatCard.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+
+interface StatCardProps {
+    label: string;
+    value: string | number;
+    icon: React.ReactNode;
+    color: 'blue' | 'purple' | 'green' | 'orange' | 'red';
+    pulse?: boolean;
+}
+export declare function StatCard({ label, value, icon, color, pulse }: StatCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TopPages.d.ts

@@ -0,0 +1,9 @@
+interface TopPagesProps {
+    pages: Array<{
+        path: string;
+        count: number;
+    }>;
+    totalViews: number;
+}
+export declare function TopPages({ pages, totalViews }: TopPagesProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/TrafficSources.d.ts

@@ -0,0 +1,12 @@
+interface TrafficSourcesProps {
+    sources: Array<{
+        source: string;
+        count: number;
+    }>;
+    referrers: Array<{
+        url: string;
+        count: number;
+    }>;
+}
+export declare function TrafficSources({ sources, referrers }: TrafficSourcesProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/hooks/useAnalyticsData.d.ts

@@ -0,0 +1,12 @@
+import { AnalyticsStats, FunnelData, DashboardConfig } from '../types';
+
+export declare function useAnalyticsData(config: DashboardConfig, timeframe: string, segment: string, trafficType: string, customRange?: {
+    start: string;
+    end: string;
+}): {
+    stats: AnalyticsStats | null;
+    funnel: FunnelData | null;
+    loading: boolean;
+    error: string | null;
+    refresh: () => Promise<void>;
+};

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export * from './types';
+export * from './Dashboard';
+export * from './utils';
+export * from './hooks/useAnalyticsData';
+export * from './components/StatCard';
+export * from './components/RealtimeMonitor';
+export * from './components/TopPages';
+export * from './components/GeoDistribution';
+export * from './components/TrafficSources';
+export * from './components/RecentVisitors';
+export * from './components/SessionTimeline';
+export * from './components/ConversionFunnel';
+export * from './components/HeatmapVisualizer';