Hyper Vue Gantt

Common errors

• [Vue warn]: Non-function value encountered for slot 'default'. The slot should be an array of VNodes, a render function, or null.

  cause In versions prior to 5.0.1, conditional rendering or incorrect forwarding of slots within `v-for` loops could trigger this Vue warning.
  fix Upgrade to `hy-vue-gantt@5.0.1` or a newer version where slot rendering logic was streamlined and fixed.

• TypeError: Cannot read properties of undefined (reading 'ganttBarConfig')

  cause A `bar` object within a `ChartRow`'s `bars` array is missing the `ganttBarConfig` property, or `ganttBarConfig` itself is missing required sub-properties like `id` or `label`.
  fix Ensure all bar data objects strictly adhere to the `GanttBar` interface, specifically that `ganttBarConfig` is present and correctly structured with `id` and `label`.

• Uncaught SyntaxError: Cannot use import statement outside a module

  cause Attempting to use ES module `import` syntax in an environment configured for CommonJS, without proper transpilation or explicit module declaration.
  fix If in Node.js, ensure your `package.json` has `"type": "module"` or use `.mjs` file extensions. For browser environments, ensure your build tool (Vite, Webpack, Rollup) is configured to handle ES Modules and transpile if targeting older browsers.

• [Vue warn]: Failed to resolve component: g-gantt-chart

  cause The `GGanttChart` component was not properly registered or imported. This often happens if `app.use(hyvuegantt)` is omitted or if components are not locally imported in a `script setup` context.
  fix Verify that `app.use(hyvuegantt)` is called in your main application entry file (e.g., `main.ts`). If using components without global registration, ensure you `import { GGanttChart, GGanttRow } from 'hy-vue-gantt'` and register them in your component.

• Error: Peer dependency "@fortawesome/vue-fontawesome" is not installed.

  cause Hyper Vue Gantt lists several peer dependencies that must be explicitly installed by the consumer project, but one or more are missing.
  fix Install all peer dependencies listed in the `dependencies` section using your package manager (e.g., `npm install @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome dayjs vue`).

Warnings

• breaking Version 5.0.0 introduced breaking changes primarily due to dependency upgrades to their latest major versions. This may require manual updates to your project's dependencies and potentially code adjustments if any of the underlying libraries changed their APIs.
  Fix: Carefully review the changelogs of all peer dependencies (e.g., Vue, Day.js, Font Awesome) and update your project's `package.json` accordingly. Reinstall dependencies and address any compilation or runtime errors.
• gotcha The `baseUnitWidth` prop, which controls the width of each time unit on the chart, is internally constrained to a range between 20 and 50. Values provided outside this range will be clamped, potentially leading to unexpected zoom levels or display behavior.
  Fix: Ensure that any custom `baseUnitWidth` values passed to the `g-gantt-chart` component fall within the acceptable range of 20 to 50.
• gotcha The `xlsx` peer dependency is specified using a direct URL (`https://cdn.sheetjs.com/xlsx-0.20.2/xlsx-0.20.2.tgz`) instead of a standard npm registry version. This can introduce supply chain risks, make builds non-deterministic, or lead to build failures if the URL becomes unavailable or its content changes.
  Fix: While `hy-vue-gantt` relies on this, it's a practice to be aware of. For critical applications, consider mirroring the dependency or consulting the package maintainers for an npm registry-based alternative. Always verify the integrity of directly linked dependencies.
• breaking Hyper Vue Gantt is exclusively built for Vue 3. Using it in a Vue 2 project will lead to incompatibility issues and runtime errors due to differing component APIs, reactivity systems, and lifecycle hooks.
  Fix: Ensure your project utilizes Vue 3. If you are on Vue 2, you will need to either migrate your application to Vue 3 or find a Gantt chart library that supports Vue 2.

Install

• npm install hy-vue-gantt npm
• yarn add hy-vue-gantt yarn
• pnpm add hy-vue-gantt pnpm

Imports

• hyvuegantt
  wrong:

  import { hyvuegantt } from 'hy-vue-gantt'

  correct:

  import hyvuegantt from 'hy-vue-gantt'

  This is the default export used as a Vue plugin via `app.use()` for global component registration.
• GGanttChart
  wrong:

  import GGanttChart from 'hy-vue-gantt'

  correct:

  import { GGanttChart } from 'hy-vue-gantt'

  The main Gantt chart component is a named export. Ensure your build system supports ESM.
• GGanttRow
  wrong:

  import GGanttRow from 'hy-vue-gantt'

  correct:

  import { GGanttRow } from 'hy-vue-gantt'

  Individual row component for the Gantt chart, also a named export.
• ChartRow
  wrong:

  import { ChartRow } from 'hy-vue-gantt'

  correct:

  import type { ChartRow } from 'hy-vue-gantt'

  This is a TypeScript type definition. Always use `import type` to avoid bundling issues and ensure correct type-only imports.

Quickstart

This quickstart demonstrates the basic installation as a Vue plugin, global registration, and the fundamental usage of `GGanttChart` and `GGanttRow` components with reactive data for displaying a simple Gantt chart.

import { createApp, ref } from "vue"
import App from "./App.vue"
import hyvuegantt from "hy-vue-gantt"
import type { ChartRow } from "hy-vue-gantt"

const app = createApp(App)
app.use(hyvuegantt)

app.mount("#app")

// In your App.vue or a component
// <template>
//   <g-gantt-chart
//     :chart-start="chartStart"
//     :chart-end="chartEnd"
//     :precision="precision"
//     :bar-start="barStart"
//     :bar-end="barEnd"
//     color-scheme="vue"
//     grid
//     commands
//   >
//     <g-gantt-row
//       v-for="row in rows"
//       :key="row.id"
//       :label="row.label"
//       :bars="row.bars"
//     />
//   </g-gantt-chart>
// </template>

// <script setup lang="ts">
// const chartStart = ref("2024-01-01")
// const chartEnd = ref("2024-12-31")
// const precision = ref("day")
// const barStart = ref("start")
// const barEnd = ref("end")

// const rows = ref<ChartRow[]>([
//   {
//     id: 1,
//     label: "Design Phase",
//     bars: [
//       {
//         start: "2024-01-05",
//         end: "2024-01-20",
//         ganttBarConfig: {
//           id: "1",
//           label: "UI Design",
//           style: { background: "#42b883" }
//         }
//       }
//     ]
//   }
// ])
// </script>