{"_id":"@alfnajmi__/gantt-chart","name":"@alfnajmi__/gantt-chart","dist-tags":{"latest":"1.4.8"},"versions":{"1.4.8":{"name":"@alfnajmi__/gantt-chart","version":"1.4.8","description":"Embeddable Gantt chart component — Web Component + Vue 3 wrapper","type":"module","main":"dist/gantt-chart.js","module":"dist/gantt-chart.js","exports":{".":{"import":"./dist/gantt-chart.js"},"./element":"./dist/gantt-element.js","./vue":"./dist/gantt-vue.js","./view":"./dist/gantt-view.js","./fields-panel":"./dist/gantt-fields-panel.js","./sidebars":"./dist/gantt-sidebars.js","./style.css":"./dist/style.css"},"scripts":{"dev":"vite","build":"vite build","preview":"vite preview","prepublishOnly":"npm run build"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"repository":{"type":"git","url":"https://devgithub.mcmc.gov.my/mcmc/gantt-app.git","directory":"sdk"},"dependencies":{"dhtmlx-gantt":"^8.0.0"},"devDependencies":{"@vitejs/plugin-vue":"^5.0.0","vite":"^5.4.0","vue":"^3.5.0"},"peerDependencies":{"vue":"^3.4.0"},"peerDependenciesMeta":{"vue":{"optional":true}},"keywords":["gantt","chart","web-component","vue","embed"],"license":"MIT","_id":"@alfnajmi__/gantt-chart@1.4.8","gitHead":"4046f4d118b40c796e12002168fa5d5bc55ea8fb","_nodeVersion":"22.23.2","_npmVersion":"10.9.8","dist":{"integrity":"sha512-fOaE0v5d0G35zPesUFiYtTrDRtLT9Aqi0SAVHROXd+KJK2m9tOE9dthKIMqODcmecQ7DTCp7ZPLOEjAmquMfuQ==","shasum":"a087da042edcb7b807cb3a66c00337f430e15fd4","tarball":"https://registry.npmjs.org/@alfnajmi__/gantt-chart/-/gantt-chart-1.4.8.tgz","fileCount":11,"unpackedSize":124807,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCo7y37j8MYP16lg2l2qcn8yo4pF0+CPsLHg6anYVr1dQIgZFssEpphurvRV8jNGDslORQLGwiQxt+1q3fsGkyjRk4="}]},"_npmUser":{"name":"alfnajmi__","email":"aliffnajmii@gmail.com"},"directories":{},"maintainers":[{"name":"alfnajmi__","email":"aliffnajmii@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gantt-chart_1.4.8_1788766482368_0.22247894227620169"},"_hasShrinkwrap":false}},"time":{"created":"2026-09-07T07:34:42.178Z","1.4.8":"2026-09-07T07:34:42.499Z","modified":"2026-09-07T07:34:42.715Z"},"maintainers":[{"name":"alfnajmi__","email":"aliffnajmii@gmail.com"}],"description":"Embeddable Gantt chart component — Web Component + Vue 3 wrapper","keywords":["gantt","chart","web-component","vue","embed"],"repository":{"type":"git","url":"https://devgithub.mcmc.gov.my/mcmc/gantt-app.git","directory":"sdk"},"license":"MIT","readme":"# @mcmc/gantt-chart SDK\n\nEmbeddable Gantt chart component for any web application. No iframe needed — renders directly in your page's DOM.\n\nPublished to GitHub Packages at `https://devgithub.mcmc.gov.my/_registry/npm/`.\n\n> Documentation last reviewed: 18 August 2026\n>\n> This document is the integration source of truth for SDK consumers.\n\n## Features (v1.3.11)\n\n- Task detail popup on bar click (Task/Project badge, status, dates, assignee, duration)\n- \"View in Plane\" button in popup (links directly to issue/module in Plane)\n- Pastel status-based bar coloring (complete → mint, in progress → blue, planning → lavender, to do → slate)\n- Weekend diagonal striping on day-level scales\n- Plane-style current-time line (solid red with a circular cap) + scale header highlight\n- Row drag-to-reorder with Plane sync\n- Project-type bars for modules/cycles (thin green group bars)\n- Milestone markers\n- Projects are native Plane Modules; Tasks and Milestones are Plane work items\n- Promote a Task into a standalone Module while preserving its direct subtasks\n- Recoverable deletion for Projects, Tasks, and Milestones with a 10-second Undo action\n- Trash drawer with Restore, Delete forever, and automatic 30-day cleanup\n- Adaptive task labels: outside-right when possible, inside long bars or outside-left near viewport edges\n- Floating zoom-in/zoom-out controls for day, week, month, and year scales\n- Roomier two-band timeline headers (64px by default, configurable)\n- Timeline grid and weekend shading continue below the final task\n- Subtle row separators in the task table without lines across the timeline\n- Collapsible task table with remembered visibility\n- Editable mode (drag to resize/move bars, DataProcessor syncs to API)\n\n## Data model and compatibility\n\nThe SDK follows Plane semantics:\n\n| SDK type | Plane entity | Behaviour |\n|----------|--------------|-----------|\n| `project` | Module | Standalone group that can own tasks |\n| `task` | Work item | May have the same start and due date |\n| `milestone` | Work item | Explicit persisted type rendered as a diamond |\n\nDo not infer milestones from date equality. Consumers must preserve the `type`/`gantt_type` supplied by the API; a one-day task and a milestone can both have equal dates.\n\nFor the full management experience—including task-to-module promotion, the protected three-dot delete action, Undo, and the 30-day Trash drawer—use `GanttView`. The bare renderer exposes chart controls but does not add the full toolbar and management panels.\n\n## Quick start (for portal teams)\n\nYou don't need to set up a backend or manage environment variables. The Gantt API is already deployed and connected to Plane. Just install the SDK and point to it:\n\n```vue\n<script setup>\nimport GanttView from '@mcmc/gantt-chart/view'\n</script>\n\n<template>\n  <GanttView\n    project=\"persada\"\n    api-base=\"https://gantt.mcmc.gov.my\"\n    plane-url=\"https://plane-digd.mcmc.gov.my\"\n    workspace-slug=\"disd\"\n    :show-project-selector=\"true\"\n    :editable=\"true\"\n    height=\"80vh\"\n  />\n</template>\n```\n\nThat's it. No `.env` files, no backend setup, no database. The component handles everything.\n\n**What you need from the DISD team:**\n| Info | Example | Who provides it |\n|------|---------|-----------------|\n| Gantt API URL | `https://gantt.mcmc.gov.my` | DISD infra team |\n| Plane URL | `https://plane-digd.mcmc.gov.my` | DISD infra team |\n| Workspace slug | `disd` | Look at your Plane URL |\n| Project ID | UUID from Plane | Or use identifier like `persada` |\n\n## Installation\n\nAdd `.npmrc` to scope `@mcmc` packages to the private registry:\n\n```\n@mcmc:registry=https://devgithub.mcmc.gov.my/_registry/npm/\n//devgithub.mcmc.gov.my/_registry/npm/:_authToken=${NPM_TOKEN}\n```\n\nThen install:\n\n```bash\nnpm install @mcmc/gantt-chart\n```\n\n> **Off the office network / VPN, install fails with `ETIMEDOUT ... devminio.mcmc.gov.my:9000`?**\n> Package metadata resolves fine through `devgithub.mcmc.gov.my` (reachable over 443),\n> but the tarball itself is fetched from a separate internal MinIO host/port that isn't\n> exposed the same way. This is a firewall gap on the registry side, not a problem with\n> your `.npmrc` — see the [persada-web README's troubleshooting\n> section](https://devgithub.mcmc.gov.my/mcmc/persada-web/blob/staging/README.md#troubleshooting-etimedout-connecting-to-devminiomcmcgovmy)\n> for the full writeup and a workaround for updating version pins without tarball\n> access.\n\n## Three ways to use\n\n### Recommended: GanttView (full experience)\n\n```vue\n<script setup>\nimport GanttView from '@mcmc/gantt-chart/view'\n</script>\n\n<template>\n  <GanttView\n    project=\"persada\"\n    api-base=\"https://gantt.mcmc.gov.my\"\n    plane-url=\"https://plane-digd.mcmc.gov.my\"\n    workspace-slug=\"disd\"\n    :show-project-selector=\"true\"\n    :editable=\"true\"\n    height=\"80vh\"\n  />\n</template>\n```\n\nIncludes toolbar, filter, fields panel, edit sidebar, and task popup — zero additional code.\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `project` | string | — | Project UUID or identifier |\n| `apiBase` | string | — | Gantt API base URL |\n| `editable` | boolean | `true` | Allow editing |\n| `scale` | string | `'week'` | Initial zoom |\n| `height` | string | `'100%'` | Container height |\n| `planeUrl` | string | `''` | Plane URL (for \"Open in Plane\") |\n| `workspaceSlug` | string | `''` | Plane workspace slug |\n| `projectId` | string | `''` | Plane project UUID |\n| `showToolbar` | boolean | `true` | Show/hide toolbar |\n| `showFilter` | boolean | `true` | Show/hide filter button |\n| `showFields` | boolean | `true` | Show/hide fields button |\n| `showProjectSelector` | boolean | `false` | Show project dropdown |\n| `showClosed` | boolean | `true` | Initial closed toggle state |\n| `showTaskTable` | boolean | `true` | Initial task-table visibility; the toolbar toggle remembers the user's choice |\n| `showZoomControls` | boolean | `true` | Show floating zoom-in/zoom-out controls |\n| `scaleHeight` | number | `64` | Total height of the timeline scale header |\n\n### Alternative: GanttChart (bare renderer)\n\nFor portals that want full control over the toolbar and surrounding UI:\n\nWhen composing SDK panels around the bare chart, use the SDK sidebar controller so\nFields and Trash remain mutually exclusive:\n\n```vue\n<script setup>\nimport GanttFieldsPanel from '@mcmc/gantt-chart/fields-panel'\nimport { useGanttSidebars } from '@mcmc/gantt-chart/sidebars'\n\nconst {\n  fieldsOpen,\n  trashOpen,\n  openFields,\n  closeFields,\n  openTrash,\n  closeTrash,\n} = useGanttSidebars()\n</script>\n```\n\nOpening either sidebar automatically closes the other. `GanttView` uses this same\ncontroller internally, making the SDK the source of truth for sidebar behavior.\n\n### 1. Web Component (any framework or plain HTML)\n\n```html\n<mcmc-gantt\n  project=\"persada\"\n  api=\"https://gantt.mcmc.gov.my\"\n  plane-url=\"https://plane-digd.mcmc.gov.my\"\n  workspace-slug=\"disd\"\n  project-id=\"48b5e204-6a3d-46bf-84ec-fb603cf8dd35\"\n  editable\n  show-grid=\"true\"\n  show-zoom-controls=\"true\"\n  scale-height=\"64\"\n  height=\"80vh\"\n></mcmc-gantt>\n\n<script src=\"https://gantt.mcmc.gov.my/sdk/gantt-element.js\" type=\"module\"></script>\n```\n\n### 2. Vue 3 Component\n\n```vue\n<script setup>\nimport GanttChart from '@mcmc/gantt-chart/vue'\n</script>\n\n<template>\n  <GanttChart\n    project=\"persada\"\n    api-base=\"https://gantt.mcmc.gov.my\"\n    plane-url=\"https://plane-digd.mcmc.gov.my\"\n    workspace-slug=\"disd\"\n    project-id=\"48b5e204-...\"\n    :editable=\"true\"\n    scale=\"week\"\n    :show-zoom-controls=\"true\"\n    :scale-height=\"64\"\n    height=\"80vh\"\n    @scale-change=\"handleScaleChange\"\n    @task-click=\"handleClick\"\n    @task-change=\"handleChange\"\n  />\n</template>\n```\n\n### 3. Imperative JS API\n\n```js\nimport { mountGantt } from '@mcmc/gantt-chart'\n\nconst gantt = mountGantt({\n  container: document.getElementById('my-gantt'),\n  project: 'persada',\n  apiBase: 'https://gantt.mcmc.gov.my',\n  editable: true,\n  scale: 'week',\n\n  // Plane integration (enables \"View in Plane\" button in popup)\n  planeUrl: 'https://plane-digd.mcmc.gov.my',\n  workspaceSlug: 'disd',\n  projectId: '48b5e204-6a3d-46bf-84ec-fb603cf8dd35',\n\n  // Popup control\n  showPopup: true,  // default: true\n  showGrid: true,   // default: true\n  showZoomControls: true, // default: false in the bare API\n  scaleHeight: 64,\n\n  // Callbacks\n  onTaskClick: (task) => console.log(task),\n  onTaskChange: (task) => console.log('updated', task),\n  onScaleChange: (level) => console.log('scale', level),\n})\n\n// Later:\ngantt.setScale('week')\ngantt.zoomIn()\ngantt.zoomOut()\ngantt.setGridVisible(false)\ngantt.destroy()\n```\n\n## Props / Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| `project` | string | — | Project UUID or identifier (required) |\n| `apiBase` | string | `''` | Gantt API base URL |\n| `editable` | boolean | `false` | Allow drag-to-edit (dates sync back to Plane) |\n| `scale` | string | `'month'` | Initial zoom: `day`, `week`, `month`, `year` |\n| `planeUrl` | string | `''` | Plane instance URL (enables \"View in Plane\" in popup) |\n| `workspaceSlug` | string | `''` | Plane workspace slug |\n| `projectId` | string | `''` | Plane project UUID (for building Plane links) |\n| `showPopup` | boolean | `true` | Show task detail popup on bar click |\n| `showGrid` | boolean | `true` | Show the task table beside the timeline |\n| `showZoomControls` | boolean | `false` | Show floating timeline zoom controls |\n| `scaleHeight` | number | `64` | Total height of the timeline scale header |\n| `onTaskClick` | function | `null` | Callback when task bar is clicked |\n| `onTaskChange` | function | `null` | Callback after task is updated (drag/resize) |\n| `onScaleChange` | function | `null` | Callback after zoom controls change the scale |\n\n## Task Popup\n\nWhen you click a task bar in the timeline, a popup appears showing:\n\n- **Badge**: \"Task\" (blue) or \"Project\" (purple)\n- **Issue ID**: e.g., PERSADA-35\n- **Task name**\n- **Status, Assignee, Priority** (if available)\n- **Start date, Due/Target date, Duration**\n- **\"View in Plane\" button** (opens the issue/module directly in Plane)\n\nThe popup only triggers on timeline bar clicks — clicking the grid (task names, expand/collapse arrows) does not open it.\n\nTo disable the popup: set `showPopup: false`.\n\n## Built-in Styling\n\nThe SDK injects CSS automatically for:\n\n| Visual | Description |\n|--------|-------------|\n| Status bar colors | `complete` = green, `in progress` = blue, `planning` = purple, `to do` = gray |\n| Project bars | Thin green line with project icon |\n| Milestones | Gold diamond |\n| Weekend cells | Diagonal hatch pattern on Saturday/Sunday columns |\n| Today line | Dashed pink border on today's column |\n| Today scale | Pink highlighted date in the timeline header |\n\n## Publishing a new version\n\n```bash\ncd sdk\n# 1. Bump version in package.json\n# 2. Build and publish (prepublishOnly runs build automatically)\nnpm publish\n```\n\nAuthenticate through an environment variable or CI secret; do not commit the token:\n\n```bash\nexport NPM_TOKEN=<package-token>\nnpm config set //devgithub.mcmc.gov.my/_registry/npm/:_authToken \"$NPM_TOKEN\"\n```\n\nPublishing requires `write:packages`; installation only requires `read:packages`.\n\n## How it works\n\n```\nYour Portal                        Gantt API              Plane.so\n┌──────────────────────┐           ┌──────────────┐      ┌──────────┐\n│                      │           │              │      │          │\n│  <mcmc-gantt />      │──fetch───▶│  /api/projects│─────▶│  Issues  │\n│  or <GanttChart />   │           │  /data       │      │  Modules │\n│  or mountGantt()     │◀──json────│  /reorder    │◀─────│  Cycles  │\n│                      │           │              │      │          │\n│  Renders DHTMLX +    │           └──────────────┘      └──────────┘\n│  popup in YOUR DOM   │\n│  (no iframe)         │\n└──────────────────────┘\n```\n","readmeFilename":"README.md","_rev":"1-1ae65f992e5d3625cc6b733b8d078b1e"}