{"_id":"@apptimus-ui/draggable-dashboard","_rev":"2-1c35a80c26cfa6442a7c68341ebee06f","name":"@apptimus-ui/draggable-dashboard","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"@apptimus-ui/draggable-dashboard","version":"1.0.0","keywords":["react","components","ui","draggable","dashboard"],"author":{"name":"Apptimus"},"_id":"@apptimus-ui/draggable-dashboard@1.0.0","maintainers":[{"name":"apptimus-ui","email":"apptimus.ui@gmail.com"}],"dist":{"shasum":"32ea48951bad48280581e7eceefe1f9a39b091d2","tarball":"https://registry.npmjs.org/@apptimus-ui/draggable-dashboard/-/draggable-dashboard-1.0.0.tgz","fileCount":8,"integrity":"sha512-mG3FJc6HzDTjJd1LKXTLxQ0K54KXlJxfBHn8YUzL9cozoq9IQ1AlvmD4OgHKThdD0Os1pIP1NxOU0wMYm8zWMw==","signatures":[{"sig":"MEYCIQDzVM0q7S7uyry46PKO3EMG7r2MdcBFA8NS0kGE0XWs+wIhAOJbtXI/RJJWB3+f7HP/yPxAgmzT6UHul0VaBewy9Vh9","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":52992},"main":"dist/index.js","module":"dist/index.js","gitHead":"bdd544ced0f86eba445a4b6891fbb43a2f2a20e7","private":false,"scripts":{"test":"react-scripts test","build":"set NODE_ENV=production && babel src/lib --out-dir dist --copy-files","eject":"react-scripts eject","start":"react-scripts start"},"typings":"dist/index.d.ts","_npmUser":{"name":"apptimus-ui","email":"apptimus.ui@gmail.com"},"overrides":{"postcss":"^8.4.31","nth-check":"^2.1.1"},"_npmVersion":"11.6.2","description":"A draggable dashboard component library","directories":{},"_nodeVersion":"24.11.1","browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"dependencies":{"prop-types":"^15.8.1","@apptimus-ui/theme":"*"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"react":"^18.2.0","core-js":"^3.17.5","react-dom":"^18.2.0","@babel/cli":"^7.22.10","apexcharts":"^3.41.0","web-vitals":"^2.1.4","@babel/core":"^7.22.10","react-scripts":"5.0.1","react-apexcharts":"1.4.1","@babel/preset-env":"^7.22.10","@apptimus-ui/modal":"file:../modal","@apptimus-ui/theme":"file:../theme","@babel/preset-react":"^7.22.5","@testing-library/react":"^13.4.0","@testing-library/jest-dom":"^5.17.0","@testing-library/user-event":"^13.5.0"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/draggable-dashboard_1.0.0_1770279672365_0.8166388706172025","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@apptimus-ui/draggable-dashboard","version":"1.2.0","private":false,"description":"A draggable dashboard component library","author":{"name":"Apptimus"},"keywords":["react","components","ui","draggable","dashboard"],"main":"dist/index.js","module":"dist/index.js","typings":"dist/index.d.ts","dependencies":{"@apptimus-ui/theme":"*","prop-types":"^15.8.1"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"react-apexcharts":"1.4.1","apexcharts":"^3.41.0","@apptimus-ui/modal":"file:../modal","@apptimus-ui/theme":"file:../theme","@babel/cli":"^7.22.10","@babel/core":"^7.22.10","@babel/preset-env":"^7.22.10","@babel/preset-react":"^7.22.5","@testing-library/jest-dom":"^5.17.0","@testing-library/react":"^13.4.0","@testing-library/user-event":"^13.5.0","core-js":"^3.17.5","react":"^18.2.0","react-dom":"^18.2.0","react-scripts":"5.0.1","web-vitals":"^2.1.4"},"overrides":{"nth-check":"^2.1.1","postcss":"^8.4.31"},"scripts":{"start":"react-scripts start","build":"set NODE_ENV=production && babel src/lib --out-dir dist --copy-files","test":"react-scripts test","eject":"react-scripts eject"},"eslintConfig":{"extends":["react-app","react-app/jest"]},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"publishConfig":{"access":"public"},"gitHead":"01458ae8f3faf8fdd794ad82a48e4678a9510214","_id":"@apptimus-ui/draggable-dashboard@1.2.0","_nodeVersion":"24.11.1","_npmVersion":"11.6.2","dist":{"integrity":"sha512-KH3yrxFxBhPssX1FGrGHyAjJQFQj2xXeMGLCVMoxCL2wGvBmQ/zHAcq06WFEnCfYpBizTTYOVdD1aRLvpZ/nsg==","shasum":"5795dbb46d05ce69d74f82518f136f2b794a5395","tarball":"https://registry.npmjs.org/@apptimus-ui/draggable-dashboard/-/draggable-dashboard-1.2.0.tgz","fileCount":8,"unpackedSize":53593,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCrHeBT11RXPIrwQXOG9vRXrbOjYoGqzzRYy7VoRdb0vwIhANbDYOVsyBYUcJBRvk81qfUUbC6f5tpCNVTjeFWhVi6u"}]},"_npmUser":{"name":"apptimus-ui","email":"apptimus.ui@gmail.com"},"directories":{},"maintainers":[{"name":"apptimus-ui","email":"apptimus.ui@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/draggable-dashboard_1.2.0_1776838422592_0.8228963675305767"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-05T08:21:12.253Z","modified":"2026-04-22T06:13:42.864Z","1.0.0":"2026-02-05T08:21:12.524Z","1.2.0":"2026-04-22T06:13:42.757Z"},"author":{"name":"Apptimus"},"keywords":["react","components","ui","draggable","dashboard"],"description":"A draggable dashboard component library","maintainers":[{"name":"apptimus-ui","email":"apptimus.ui@gmail.com"}],"readme":"# 📊 Test Draggable Dashboard\r\n\r\nA fully responsive, highly customizable, grid-based dashboard component for React. It features drag-and-drop tile management, resizable widgets, dynamic theming, and comprehensive layout controls.\r\n\r\n![License](https://img.shields.io/npm/l/@apptimus-ui/draggable-dashboard)\r\n![Version](https://img.shields.io/npm/v/@apptimus-ui/draggable-dashboard)\r\n\r\n## 🚀 Features\r\n\r\n- **Drag & Drop Layout**: Intuitively arrange tiles on a customizable grid.\r\n- **Resizable Tiles**: Resize widgets using corner handles with auto-repacking.\r\n- **Responsive Design**: Automatically switches to a mobile-friendly read-only view on smaller screens (<768px).\r\n- **Theme Support**: Built-in Light and Dark modes, plus full overriding capabilities for every color.\r\n- **Configurable Grid**: Custom columns, rows, gaps, and unit sizes.\r\n- **Extensible Rendering**: Pass custom render functions for different tile types (Charts, Tables, Images, etc.).\r\n- **Built-In Layouts**: One-click alignment tools (Row, Column, Free).\r\n- **Touch Support**: Smooth interactions on touch devices.\r\n\r\n## 📦 Installation\r\n\r\n```bash\r\nnpm install @apptimus-ui/draggable-dashboard\r\n# or\r\nyarn add @apptimus-ui/draggable-dashboard\r\n```\r\n\r\n## 🛠️ Quick Start\r\n\r\n```jsx\r\nimport React, { useState } from 'react';\r\nimport { DraggableDashboard } from '@apptimus-ui/draggable-dashboard';\r\nimport '@apptimus-ui/draggable-dashboard/dist/DraggableDashboard.css'; // Don't forget CSS!\r\n\r\nconst App = () => {\r\n  const [tiles, setTiles] = useState([\r\n    { id: '1', x: 0, y: 0, w: 4, h: 4, title: 'Sales Report', type: 'CHART' },\r\n    { id: '2', x: 4, y: 0, w: 4, h: 4, title: 'User Stats', type: 'NUMBER', numberValue: 1250 },\r\n  ]);\r\n\r\n  return (\r\n    <div style={{ height: '100vh' }}>\r\n      <DraggableDashboard\r\n        tiles={tiles}\r\n        setTiles={setTiles}\r\n        dashboardId=\"my-main-dashboard\"\r\n        editMode={true}\r\n        theme=\"light\"\r\n        gridCols={12}\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default App;\r\n```\r\n\r\n## ⚙️ Props API\r\n\r\n### Core Props\r\n\r\n| Prop | Type | Required | Description |\r\n|------|------|----------|-------------|\r\n| `tiles` | `Array` | **Yes** | Array of tile objects to display. |\r\n| `setTiles` | `Func` | **Yes** | State setter for updating tiles. |\r\n| `editMode` | `Boolean` | No | Toggles drag/resize capability and edit controls. |\r\n| `dashboardId` | `String` | No | Identifier used for persistence callbacks. |\r\n| `onEditModeChange`| `Func` | No | Callback when edit mode button is clicked. |\r\n\r\n### Grid Configuration\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `gridCols` | `Number` | `12` | Total number of columns in the grid. |\r\n| `gridRows` | `Number` | `12` | Total number of rows in the grid. |\r\n| `gridGap` | `Number` | `10` | Gap between tiles in pixels. |\r\n| `minUnits` | `Number` | `1` | Minimum width/height in grid units for resizing. |\r\n| `maxUnits` | `Number` | `12` | Maximum width/height in grid units for resizing. |\r\n| `initialTileW` | `Number` | `minUnits` | Default width for new tiles. |\r\n| `initialTileH` | `Number` | `minUnits` | Default height for new tiles. |\r\n\r\n### Render Props\r\n\r\nCustom render functions allow you to control exactly how content is displayed within a tile.\r\n\r\n| Prop | Signature | Description |\r\n|------|-----------|-------------|\r\n| `renderTileContent` | `(tile) => Node` | Generic override for tile content. |\r\n| `renderChart` | `({ reportId, chartConfigId }) => Node` | Renders content for `type: \"CHART\"`. |\r\n| `renderTable` | `({ reportId }) => Node` | Renders content for `type: \"TABLE\"`. |\r\n| `renderImage` | `({ imageUrl, title }) => Node` | Renders content for `type: \"IMAGE\"`. |\r\n| `renderNumber` | `({ value, title }) => Node` | Renders content for `type: \"NUMBER\"`. |\r\n\r\n### Event Handlers\r\n\r\n| Prop | Description |\r\n|------|-------------|\r\n| `onTilesReload` | Called when tiles are added or deleted, useful for refreshing external data. |\r\n| `onDeleteTile` | Async callback triggered before a tile is removed. Return `{ is_success: true }` to proceed. |\r\n| `onSetPositions` | Called after drag/resize ends. Args: `dashboardId`, `positionMap`. |\r\n| `onRemoveTilePosition` | Called after a tile is deleted to clean up saved positions. |\r\n\r\n### Component Overrides\r\n\r\n| Prop | Description |\r\n|------|-------------|\r\n| `AddTileModal` | Component to display when \"Add Tile\" is clicked. Receives `onSave`. |\r\n| `DeleteTileModal` | Component to display for delete confirmation. |\r\n| `AddTileButton` | Component to replace the default \"Add Tile\" button in empty state. |\r\n| `SVG` | Generic Icon component. Used for icons like trash, edit, etc. |\r\n| `EditModeOnIcon` | Component to replace the \"active\" edit mode icon. |\r\n| `EditModeOffIcon` | Component to replace the \"inactive\" edit mode icon. |\r\n\r\n### Theme & Styling\r\n\r\nYou can use the `theme` prop (`'light'` | `'dark'`) or override specific colors.\r\n\r\n| Prop | Default (Light) | Default (Dark) | Description |\r\n|------|-----------------|----------------|-------------|\r\n| `dashboardBg` | `#f8f9fa` | `#1a1a1a` | Background color of the entire dashboard area. |\r\n| `tileBg` | `#ffffff` | `#2d2d2d` | Background color of individual tiles. |\r\n| `tileBorderColor` | `transparent` | `#404040` | Border color for tiles. |\r\n| `tileShadow` | `0 4px 6px...` | `0 4px 6px...` | Box shadow for tiles. |\r\n| `tileText` | `#333333` | `#ffffff` | Main text color in tiles. |\r\n| `tileTitle` | `#111111` | `#eeeeee` | Title text color in tiles. |\r\n| `gridCellBg` | `transparent` | `transparent` | Background of grid cells (visible in edit mode). |\r\n| `gridCellBorder` | `#e0e0e0` | `#333333` | Border of grid cells. |\r\n| `resizeHandleBg` | `#cccccc` | `#666666` | Color of the resize handle (bottom-right). |\r\n| `floatingOffsetBottom`| `20` | `20` | Bottom offset for floating controls (px). |\r\n| `floatingOffsetRight` | `20` | `20` | Right offset for floating controls (px). |\r\n| `tileBorderRadius` | `8` | `8` | Border radius for tiles (px or string). |\r\n\r\n## 🕹️ Methods (Ref)\r\n\r\nThe component forwards a ref that exposes helper methods:\r\n\r\n```javascript\r\nconst dashboardRef = useRef();\r\n\r\n// ...\r\n<DraggableDashboard ref={dashboardRef} ... />\r\n\r\n// Open the Add Tile Modal programmatically\r\ndashboardRef.current.openAddTileModal();\r\n```\r\n\r\n## 🧩 Tile Object Structure\r\n\r\n```javascript\r\n{\r\n  id: \"unique_id\",\r\n  title: \"My Widget\",\r\n  x: 0,             // Grid column (0-indexed)\r\n  y: 0,             // Grid row (0-indexed)\r\n  w: 4,             // Width in units\r\n  h: 4,             // Height in units\r\n  type: \"CHART\",    // 'TABLE', 'IMAGE', 'NUMBER', 'visualization', or custom\r\n  // ... other properties specific to your render functions (e.g., reportId, imageUrl)\r\n}\r\n```\r\n\r\n## 📄 License\r\n\r\nMIT © [Piragash]\r\n","readmeFilename":"README.md"}