Api documentation

Hi
I’ve been experimenting with the Gantt chart and am very impressed with how it looks and feels.
I’m looking at integrating this component in a Java (Vaadin) setup.

For this I will have to mimick the javascript API’s.

Sadly the only API reference I find is on the website in combination with the sources on github. Trying to turn this into a java API is a LOT of work.

Do you have, or are you planning to release a more structured form of documentation? Perhaps in the form of an OpenApi specification? This would allow me to generate config, template, … classes with their respective default values automatically.

I think this could be beneficial for anyone wanting to integrate it.

Hello Tom,
Thank you for the positive feedback.

DHTMLX Gantt is a Javascript library. You can only run it inside the browser. So, you need to return an HTML page and add Gantt there.
The only thing you need to do is to integrate Gantt with the server-side part. The following article explains how it can be done:
https://docs.dhtmlx.com/gantt/desktop__server_side.html

We don’t have any guides or demos for Vaadin, but here is a demo for the Spring framework:
https://files.dhtmlx.com/30d/e91d39e67e5136cc1671999d439c2465/Spring+Gantt_demo.zip

I typed that very long text and only afterwards wondered.

“Maybe they have typescript bindings”

So I’m now looking at those.

Hi @ramil Thanks for the reply

Yes, I’m fully aware of how it works. I already have the component running inside a Vaadin-based application. I made it confusing by mentioning open API, so you thought I was referring to rest operations. I was actually only referring to the model structure.

Let me try to rephrase.

I’m not using Vaadin itself, but jmix, a RAD platform for java applications (that internally uses Vaadin). They have a section on the integration of Javascript-based components.

Integrating JavaScript Library :: Jmix Documentation

I did this and effectively have the component working in my application. All is good here.

Now, I want to configure this component from within Java. I do this by creating a big Configuration class that reflects the Javascript configuration object.

This class will look familiar to you

public class GanttConfigDto {
    Layout layout = Layout.builder().build();
    Links links = Links.builder().build();
    Types types = Types.builder().build();
    boolean auto_types = false;
    String duration_unit = "day";
    boolean work_time = false;
    boolean correct_work_time = false;
    ...
}

My first attempt at creating this class was by looking at Properties Gantt Docs and building that class by manually adding each property, one by one. This would mean a LOT of work.

In my second attempt, I opened the component without any modification. I dumped the structure using console.log(gantt.config) in the browser developer console. The result was a huge json. I then asked Copilot to reverse engineer this JSON and create java from it. This turned out to work pretty well. Wherever it sees a complex JSON object it created a class and added the properties.

This second approach is a huge timesaver. The java code I pasted above is the result. As you can see it created classes for Layout, Links, Types, …

But it is not ideal. Certain information is still missing.
E.g. in the Javascript Scales class https://docs.dhtmlx.com/gantt/api__gantt_scales_config.html
There is the unit field.

That JSON with the default values that I used only contains the default value “day”
There is no mention of the other values “minute”, “hour”, “week”, “quarter”, “month”, “year” so the assumption was made that it was a string.
So now I could yet again go over all the properties and manually change them.

The unit would become an enum instead of a string, and the enum values would become the different units.

So what I’m looking for is the contract of the component. A structured document that details the operations and properties. From this document I could generate code for all properties and operations.

It would not just help me. Because it is language agnostic you would be helping anyone that wants to integrate the component in any language.

I mentioned open API because that’s what I typically use between a javascript front-end and java back-end. A better example would have been https://json-schema.org/understanding-json-schema/about

ps. as a new user I am only allowed to have 2 links in my post, so I had to put some of the links as quotes

Hi @Octorilla ,
Gantt is written in plain JavaScript, so unfortunately there’s no built-in strict typing or defined structures right now.

However, you can still check out our type definitions in codebase/dhtmlxgantt.d.ts, which it sounds like you’re already doing.

Those definitions are produced from the same tools we use for our documentation. If you look at the source for our API docs - for example, https://github.com/DHTMLX/gantt-docs/blob/master/data/api/gantt_addlink.md you’ll see type information there as well. Our current process involves extracting basic information from the source code, generating APIs from that, and then marking types by hand. So at the moment, the TypeScript definitions remain the best source for details on Gantt’s types and interfaces.

We do plan to migrate the codebase to TypeScript, which will let us generate APIs in more formats. But unfortunately, there is no completion date for that in sight.

As for generating Java classes from a .d.ts file- you could try using ChatGPT to convert the file, but given the size of the and of interfaces classes, I’d expect ChatGPT to skip or alter something.

A more reliable approach is to parse the .d.ts file using the TypeScript compiler and obtain an AST (Abstract Syntax Tree). From there, you can programmatically traverse interfaces, properties, and so on, and generate the corresponding Java classes and properties.

You can either use the TS compiler directly or use a library that simplifies working with it. After quick search I think https://ts-morph.com/ (github: ts-morph/packages/ts-morph at latest · dsherret/ts-morph · GitHub ) might be exactly what you need. As an example, if you open ts-ast-viewer.com and paste the contents of dhtmlxgantt.d.ts into the top-left pane, you’ll see a tree representing all interfaces and members - which means you’ll be able to access all this info from code and generate custom classes from this definitions.

Hi @Aliaksandr. Thanks for the info.

The ChatGPT trick I used was a quick win on the JSON I extracted from the sample.
There are a couple of typescript to Java converters out there. Output quality varies. Union types, of course, don’t translate well to a fully statically typed language.

I’m now extracting more JSON objects from the samples. I created unit tests that deserialize those to my DTO types and then manually fix them where necessary. This ensures I can support those use cases and also serves as a safeguard for future implementations.

For now, I will take a combination of approaches.

ChatGPT might not be the best tool for this case. It is good at other things, more or less. :grin:


Make a cartoon featuring dynamically typed languages as the devil and statically typed languages as the hero.

1 Like

Hello Tom,
I would like to add that Gantt configuration is not only the gantt.config object. It is also the configuration of templates, extensions and added event handlers:
https://docs.dhtmlx.com/gantt/api__refs__gantt_templates.html

https://docs.dhtmlx.com/gantt/api__refs__gantt_events.html

https://docs.dhtmlx.com/gantt/api__gantt_ext_other.html

And in some cases, it also the use of methods:
https://docs.dhtmlx.com/gantt/api__refs__gantt_methods.html

For example, the addTaskLayer method allows you to add any HTML elements in the timeline. When it is added, custom elements are displayed until you reinitialize Gantt (to always see them, you need to add the code inside the onGanttReady event handler). So, while this method doesn’t change the configuration, it can affect how Gantt works.

I don’t recommend configuring Gantt from Java at the initial step. It is better to add the Javascript code, and only after that, you can use Java to control Gantt.
The documentation has the code examples, and you can check the official samples and examples of the implementation:
https://docs.dhtmlx.com/gantt/samples/

DHTMLX - Gantt. Initialization.

This can help you to configure Gantt faster as you just need to copy the relevant code to your application. Also, there are more chances you will use a better approach. For example, you mentioned the gantt.config.scales parameter and the unit property. This allows creating the configuration of different scales. If you only need a single scale configuration, I doubt you really need to forward that information to Java. But if you want to have different scale configurations and switch between them, it is better to use the Zoom extension:
https://docs.dhtmlx.com/gantt/desktop__zoom.html

And here, you can forward the methods and properties that Gantt expects.
Here is an example:
https://docs.dhtmlx.com/gantt/samples/?sample='03_scales/05_dynamic_scales.html'&filter=''

Also, it is possible to add custom properties to various parts of Gantt. For example, you can create custom time units, so the duration_unit and scale unit will have a different value.
Here is an example:

The typings file has most of the types, but it doesn’t cover everything you can have in Gantt.