C3 AI Documentation Home

How to contribute to UiSdlGanttChart

This doc is a guide on how to contribute to the Gantt chart component.

How to make code changes for UiSdlGanttChart

In order to contribute to the Gantt chart component you need to follow these steps:

  1. You need to have the Bryntum source code in your local machine. Ask for the tgz files from an approved contributor and place them in this path: ~/c3/tgz which means, your home directory, a directory called c3 and another directory called tgz. This is required since the npm install process will look there for the tgz files.
  2. Checkout the most recent c3ui branch or create a new branch.
  3. Open VS Code and connect to the remote server.
  4. Connect to your remote server and start your main app. For CL developers, start uiGanttChartReact app.
  5. Bundle your main app from VS Code.
  6. Create a new app from vendorGantt package.
  7. Bundle vendorGantt app from UI CLI: 7.1 Open your terminal and navigate to uiBundler/resource/bundler inside repo/c3ui. 7.2 Run npm install 7.3 Run npm run build 7.4 Register your environment variables: 7.4.1 export C3UI_WD="$HOME/UI/v8/gantt" (or where you want to place your working directory) 7.4.2 export C3UI_REPO="$HOME/c3/c3ui" (or your c3ui repo path) 7.4.3 export C3_AUTH_TOKEN="{your vendorGantt app token}"(You can retrieve this token from visiting <yourInstance>/<env>/vendorgantt/static/console/index.html, and get the c3auth value from cookie). 7.4.4 Run the bundler from the CLI: npm run start -- -e <yourInstance>/<env>/vendorgantt -a $C3UI_REPO/repo/ -T $C3_AUTH_TOKEN -t studio:prod -W $C3UI_WD --logDir $C3UI_WD/logs --setup --watcher --bundler --bundler-port 50288 --mode production --out-dir $C3UI_REPO/repo/c3ui/uiGanttChartReact/ui/content/ --config-names "vendorGantt" This will start a new bundler and the output files will be sent to the main app working directory (your VSCE bundler). Note: This command includes the --mode production flag which will "compile" the files in production mode, making it hard to debug in the browser. If you want to be able to debug the GanttChart.tsx file in the browser you will have to change this flag to --mode development. 7.5 Once vendorGantt successfully bundled from UI CLI, go back to the VScode bundled application and see your UI from there.

Consider that if you want to make changes only to uiGanttChart package files, you don't need to do the vendorGantt app/package setup, you can just change those files and everything should work as expected.

Modifying files in vendorGantt package

There are two main reasons why you might want to modify files:

  1. You want to upgrade the library version
  2. You want to modify the code in GanttChart.tsx react component.

If you want to contribute to that package you need to follow the step listed above. Once you have the changes you need, you have to commit the generated file inside uiGanttChartReact/ui/content/c3/vendorGantt so that the new changes are reflected in the main branch once it's merged.

Was this page helpful?