{"_id":"@athena-tracker/dashboard-react","_rev":"3-1e141e47458c538b28e7884ebec90924","name":"@athena-tracker/dashboard-react","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@athena-tracker/dashboard-react","version":"1.0.0","keywords":["react","dashboard","analytics","athena","components"],"author":{"name":"Pascal Analytics"},"license":"MIT","_id":"@athena-tracker/dashboard-react@1.0.0","maintainers":[{"name":"athena-rubaiyat","email":"r+2@markopolo.ai"}],"dist":{"shasum":"ddffcceecca37f42f11d8cc8103f74ac52fe6d3c","tarball":"https://registry.npmjs.org/@athena-tracker/dashboard-react/-/dashboard-react-1.0.0.tgz","fileCount":28,"integrity":"sha512-HuBVuKLg09YbZa71q1kIiyTiXaIMJ0PQgyMlXas0xe3lpzCVSP/1wrStWBYvjOS2KDFsti3r//PybLtbWcFEmw==","signatures":[{"sig":"MEQCIH4gjJTFvar3Ex/TPXIK1Zjdd0znqskp/3enAGHHY33aAiACMy2EgeHyUadw/7RMdx/WtYoJJGrlaEs7o1c4QBAuTA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":180544},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","gitHead":"9080f77e9bcc114f8fb1b927f7901610c201fa85","scripts":{"dev":"rollup -c -w","test":"jest","build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"athena-rubaiyat","email":"r+2@markopolo.ai"},"_npmVersion":"10.9.2","description":"Pre-built React dashboard components for ATHENA Analytics","directories":{},"_nodeVersion":"22.14.0","dependencies":{"recharts":"^2.10.4","@athena-tracker/react-hooks":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"tslib":"^2.6.2","rollup":"^4.9.6","typescript":"^5.3.3","@types/react":"^18.2.48","@types/react-dom":"^18.2.18","rollup-plugin-postcss":"^4.0.2","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.6","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":"^17.0.0 || ^18.0.0","react-dom":"^17.0.0 || ^18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dashboard-react_1.0.0_1772131832133_0.39125859752868974","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@athena-tracker/dashboard-react","version":"1.0.1","keywords":["react","dashboard","analytics","athena","charts","widgets","visualization"],"author":{"name":"Pascal Team"},"license":"MIT","_id":"@athena-tracker/dashboard-react@1.0.1","maintainers":[{"name":"athena-rubaiyat","email":"r+2@markopolo.ai"}],"homepage":"https://github.com/RubaiyatF/Pascal#readme","bugs":{"url":"https://github.com/RubaiyatF/Pascal/issues"},"dist":{"shasum":"4f538e833fdb4db8009bb58b4ef4b693b575960a","tarball":"https://registry.npmjs.org/@athena-tracker/dashboard-react/-/dashboard-react-1.0.1.tgz","fileCount":18,"integrity":"sha512-UUsvXUVUJRA8Xw1S6YR6AJ76+oBzCBqsOeNj4cmtKE4X08UBiRUzdv2rZ4RS9oZ1S5p5nTV3vsWcFbRXbOOHJA==","signatures":[{"sig":"MEQCIFEya5OSKZkH9bB/RKnBCm8ElPWS3aY4YBJTG1pmTACKAiBKY5bW51poEcIfzo1KewsvUKu6Z5V7j6qR6Qi8r3seGA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":91014},"main":"dist/index.js","types":"dist/index.d.ts","module":"dist/index.esm.js","engines":{"node":">=16.0.0"},"gitHead":"9080f77e9bcc114f8fb1b927f7901610c201fa85","scripts":{"lint":"eslint src --ext .ts,.tsx","test":"jest --passWithNoTests","build":"rollup -c","test:watch":"jest --watch","build:types":"tsc --declaration --emitDeclarationOnly --outDir dist","prepublishOnly":"npm run build && npm test"},"_npmUser":{"name":"athena-rubaiyat","email":"r+2@markopolo.ai"},"repository":{"url":"git+https://github.com/RubaiyatF/Pascal.git","type":"git","directory":"tracker/packages/dashboard-react"},"_npmVersion":"10.9.2","description":"Pre-built React dashboard components for ATHENA analytics - embed analytics directly in your app","directories":{},"_nodeVersion":"22.14.0","dependencies":{"tslib":"^2.8.1","@athena-tracker/react-hooks":"^1.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","react":"^18.2.0","eslint":"^8.54.0","rollup":"^4.5.0","ts-jest":"^29.1.1","react-dom":"^18.2.0","typescript":"^5.3.2","@babel/core":"^7.23.0","@types/jest":"^29.5.8","@types/react":"^19.0.0","@types/react-dom":"^18.2.0","@babel/preset-env":"^7.23.0","@babel/preset-react":"^7.23.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.7","@babel/preset-typescript":"^7.23.0","@rollup/plugin-typescript":"^11.1.5","@typescript-eslint/parser":"^6.11.0","@rollup/plugin-node-resolve":"^15.2.3","@typescript-eslint/eslint-plugin":"^6.11.0"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"_npmOperationalInternal":{"tmp":"tmp/dashboard-react_1.0.1_1772222581302_0.5195823086264628","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@athena-tracker/dashboard-react","version":"1.0.2","description":"Pre-built React dashboard components for ATHENA analytics - embed analytics directly in your app","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","scripts":{"build":"rollup -c","build:types":"tsc --declaration --emitDeclarationOnly --outDir dist","test":"jest --passWithNoTests","test:watch":"jest --watch","lint":"eslint src --ext .ts,.tsx","prepublishOnly":"npm run build && npm test"},"keywords":["react","dashboard","analytics","athena","charts","widgets","visualization"],"author":{"name":"Pascal Team"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/RubaiyatF/Pascal.git","directory":"tracker/packages/dashboard-react"},"peerDependencies":{"react":">=18.0.0","react-dom":">=18.0.0"},"dependencies":{"@athena-tracker/react-hooks":"^1.0.2","tslib":"^2.8.1"},"devDependencies":{"@babel/core":"^7.23.0","@babel/preset-env":"^7.23.0","@babel/preset-react":"^7.23.0","@babel/preset-typescript":"^7.23.0","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.5","@types/jest":"^29.5.8","@types/react":"^19.0.0","@types/react-dom":"^18.2.0","@typescript-eslint/eslint-plugin":"^6.11.0","@typescript-eslint/parser":"^6.11.0","eslint":"^8.54.0","jest":"^29.7.0","react":"^18.2.0","react-dom":"^18.2.0","rollup":"^4.5.0","ts-jest":"^29.1.1","typescript":"^5.3.2"},"engines":{"node":">=16.0.0"},"_id":"@athena-tracker/dashboard-react@1.0.2","gitHead":"9080f77e9bcc114f8fb1b927f7901610c201fa85","bugs":{"url":"https://github.com/RubaiyatF/Pascal/issues"},"homepage":"https://github.com/RubaiyatF/Pascal#readme","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-ozsQIGjGt+nhgpULhkLaeCbKQx5x2p+aVv5x8GtY4M/PlcCdAwICKxZUifY6+1CeeC8lKsJSjoq/dBK/otyfOg==","shasum":"d106fe08b0d95a2cfe5f204def266343a91ffd01","tarball":"https://registry.npmjs.org/@athena-tracker/dashboard-react/-/dashboard-react-1.0.2.tgz","fileCount":18,"unpackedSize":91014,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICEKK5+51uz6rGaFU9cMXK/DgT8xKDnC+Q0y9NIGJ8JkAiEAt+Ryfjj0ciJqM5OF/HD7M4KXXoGbvY6MVA7MOpBzQE8="}]},"_npmUser":{"name":"athena-rubaiyat","email":"r+2@markopolo.ai"},"directories":{},"maintainers":[{"name":"athena-rubaiyat","email":"r+2@markopolo.ai"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/dashboard-react_1.0.2_1772226793560_0.598745846104966"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-26T18:50:32.042Z","modified":"2026-02-27T21:13:13.866Z","1.0.0":"2026-02-26T18:50:32.293Z","1.0.1":"2026-02-27T20:03:01.500Z","1.0.2":"2026-02-27T21:13:13.739Z"},"bugs":{"url":"https://github.com/RubaiyatF/Pascal/issues"},"author":{"name":"Pascal Team"},"license":"MIT","homepage":"https://github.com/RubaiyatF/Pascal#readme","keywords":["react","dashboard","analytics","athena","charts","widgets","visualization"],"repository":{"type":"git","url":"git+https://github.com/RubaiyatF/Pascal.git","directory":"tracker/packages/dashboard-react"},"description":"Pre-built React dashboard components for ATHENA analytics - embed analytics directly in your app","maintainers":[{"name":"athena-rubaiyat","email":"r+2@markopolo.ai"}],"readme":"# @athena-tracker/dashboard-react\r\n\r\n> Pre-built React dashboard components for ATHENA analytics\r\n\r\n[![npm version](https://img.shields.io/npm/v/@athena-tracker/dashboard-react.svg)](https://www.npmjs.com/package/@athena-tracker/dashboard-react)\r\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\r\n\r\n## Features\r\n\r\n- ✅ **Complete Dashboard** - Drop-in analytics dashboard component\r\n- ✅ **Modular Widgets** - Use individual widgets or combine them\r\n- ✅ **Theming Support** - Customize colors, fonts, and styles\r\n- ✅ **Real-time Updates** - Auto-refresh and WebSocket live streams\r\n- ✅ **TypeScript Support** - Full type definitions included\r\n- ✅ **Zero Config** - Works out of the box with sensible defaults\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @athena-tracker/dashboard-react @athena-tracker/react-hooks\r\n```\r\n\r\n## Quick Start\r\n\r\n### Complete Dashboard\r\n\r\n```tsx\r\nimport { AthenaDashboard } from '@athena-tracker/dashboard-react';\r\n\r\nfunction App() {\r\n  return (\r\n    <AthenaDashboard\r\n      appId=\"app_123\"\r\n      workspaceToken={process.env.ATHENA_WORKSPACE_JWT}\r\n      theme={{\r\n        primaryColor: '#FF6B35',\r\n        secondaryColor: '#4ECDC4'\r\n      }}\r\n      views={['overview', 'journeys', 'live']}\r\n      refreshInterval={60000}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Individual Widgets\r\n\r\n```tsx\r\nimport { OverviewWidget, LiveStreamWidget } from '@athena-tracker/dashboard-react';\r\n\r\nfunction CustomDashboard() {\r\n  return (\r\n    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px' }}>\r\n      <OverviewWidget\r\n        appId=\"app_123\"\r\n        workspaceToken={process.env.ATHENA_WORKSPACE_JWT}\r\n        period=\"7d\"\r\n      />\r\n      <LiveStreamWidget\r\n        appId=\"app_123\"\r\n        workspaceToken={process.env.ATHENA_WORKSPACE_JWT}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n## Components\r\n\r\n### AthenaDashboard\r\n\r\nMain dashboard component with tabbed navigation.\r\n\r\n```tsx\r\n<AthenaDashboard\r\n  appId=\"app_123\"\r\n  workspaceToken={token}\r\n  theme={{\r\n    primaryColor: '#3B82F6',\r\n    backgroundColor: '#FFFFFF',\r\n    textColor: '#1F2937',\r\n    borderRadius: '8px'\r\n  }}\r\n  views={['overview', 'journeys', 'friction', 'heatmap', 'predictions', 'live']}\r\n  refreshInterval={60000}\r\n  className=\"custom-dashboard\"\r\n  style={{ maxWidth: '1200px', margin: '0 auto' }}\r\n/>\r\n```\r\n\r\n**Props:**\r\n| Prop | Type | Required | Description |\r\n|------|------|----------|-------------|\r\n| `appId` | string | ✅ | ATHENA app ID |\r\n| `workspaceToken` | string | ✅ | JWT workspace token |\r\n| `apiUrl` | string | ❌ | API base URL (default: `https://tracker.pascal.cx`) |\r\n| `theme` | DashboardTheme | ❌ | Customize colors and styles |\r\n| `views` | DashboardView[] | ❌ | Enabled views (default: all) |\r\n| `refreshInterval` | number | ❌ | Auto-refresh interval in ms |\r\n| `className` | string | ❌ | Additional CSS class |\r\n| `style` | CSSProperties | ❌ | Additional inline styles |\r\n\r\n---\r\n\r\n### OverviewWidget\r\n\r\nKey metrics widget showing sessions, events, and users.\r\n\r\n```tsx\r\n<OverviewWidget\r\n  appId=\"app_123\"\r\n  workspaceToken={token}\r\n  period=\"7d\"\r\n  refreshInterval={30000}\r\n/>\r\n```\r\n\r\n**Props:**\r\n| Prop | Type | Required | Description |\r\n|------|------|----------|-------------|\r\n| `appId` | string | ✅ | ATHENA app ID |\r\n| `workspaceToken` | string | ✅ | JWT workspace token |\r\n| `apiUrl` | string | ❌ | API base URL |\r\n| `period` | string | ❌ | `'1h'` \\| `'24h'` \\| `'7d'` \\| `'30d'` \\| `'90d'` (default: `'7d'`) |\r\n| `theme` | DashboardTheme | ❌ | Customize colors |\r\n| `refreshInterval` | number | ❌ | Auto-refresh interval |\r\n\r\n---\r\n\r\n### JourneysWidget\r\n\r\nUser flow visualization showing top navigation paths.\r\n\r\n```tsx\r\n<JourneysWidget\r\n  appId=\"app_123\"\r\n  workspaceToken={token}\r\n  period=\"7d\"\r\n/>\r\n```\r\n\r\n---\r\n\r\n### LiveStreamWidget\r\n\r\nReal-time event stream via WebSocket.\r\n\r\n```tsx\r\n<LiveStreamWidget\r\n  appId=\"app_123\"\r\n  workspaceToken={token}\r\n/>\r\n```\r\n\r\n## Theming\r\n\r\nCustomize the dashboard appearance:\r\n\r\n```tsx\r\nconst customTheme = {\r\n  primaryColor: '#FF6B35',       // Primary accent color\r\n  secondaryColor: '#4ECDC4',     // Secondary accent color\r\n  backgroundColor: '#FFFFFF',     // Widget background\r\n  textColor: '#1F2937',          // Text color\r\n  borderColor: '#E5E7EB',        // Border color\r\n  borderRadius: '8px',           // Border radius\r\n  fontFamily: 'Inter, sans-serif' // Font family\r\n};\r\n\r\n<AthenaDashboard theme={customTheme} {...otherProps} />\r\n```\r\n\r\n## Advanced Usage\r\n\r\n### Custom Layout\r\n\r\nCombine widgets in your own layout:\r\n\r\n```tsx\r\nimport { OverviewWidget, JourneysWidget, LiveStreamWidget } from '@athena-tracker/dashboard-react';\r\n\r\nfunction CustomLayout({ appId, workspaceToken }) {\r\n  return (\r\n    <div className=\"analytics-grid\">\r\n      <div className=\"main-content\">\r\n        <OverviewWidget appId={appId} workspaceToken={workspaceToken} period=\"7d\" />\r\n        <JourneysWidget appId={appId} workspaceToken={workspaceToken} period=\"7d\" />\r\n      </div>\r\n\r\n      <aside className=\"sidebar\">\r\n        <LiveStreamWidget appId={appId} workspaceToken={workspaceToken} />\r\n      </aside>\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n### White-Label Integration\r\n\r\nRemove branding and customize fully:\r\n\r\n```tsx\r\n<AthenaDashboard\r\n  appId=\"app_123\"\r\n  workspaceToken={token}\r\n  theme={{\r\n    primaryColor: '#YOUR_BRAND_COLOR',\r\n    fontFamily: 'Your Brand Font'\r\n  }}\r\n  className=\"your-custom-class\"\r\n  style={{\r\n    border: 'none',\r\n    boxShadow: '0 4px 6px rgba(0,0,0,0.1)'\r\n  }}\r\n/>\r\n```\r\n\r\n## Browser Support\r\n\r\n- Chrome/Edge 90+\r\n- Safari 14+\r\n- Firefox 88+\r\n- React 18+\r\n\r\n## TypeScript Support\r\n\r\nFull TypeScript definitions included:\r\n\r\n```typescript\r\nimport type { DashboardConfig, DashboardTheme, WidgetProps } from '@athena-tracker/dashboard-react';\r\n```\r\n\r\n## License\r\n\r\nMIT\r\n\r\n## Documentation\r\n\r\n- Full documentation: https://docs.athena.ai/dashboard-react\r\n- Integration guide: See PARTNER_INTEGRATION_GUIDE.md\r\n- API reference: https://tracker.pascal.cx/docs\r\n\r\n## Support\r\n\r\n- Issues: https://github.com/RubaiyatF/Pascal/issues\r\n- Email: support@pascal.cx\r\n","readmeFilename":"README.md"}