Merge pull request #56 from mlakatkou/GS-3271

[update] multiple-gantts article

Author: AlexKlimenkov

docs/guides/multiple-gantts.md

@@ -9,11 +9,11 @@ sidebar_label: "Multiple Charts on a Page"
 This functionality is available in the Gantt PRO version under the Commercial (since October 6, 2021), Enterprise and Ultimate licenses
 :::
 
-Basically, dhtmlxGantt is a static object and the default instance of it continually exists on the page. You may access it via the global **gantt** object at any time. But you can also create a new gantt object if needed.
+Basically, DHTMLX Gantt is a static object and the default instance of it continually exists on the page. You may access it via the global `gantt` object at any time. But you can also create a new gantt object if needed.
 
 ## Gantt Instance Configuration
 
-To create a new instance of dhtmlxGantt, use the **Gantt.getGanttInstance()** method:
+To create a new instance of DHTMLX Gantt, use the `Gantt.getGanttInstance()` method:
 
 ~~~js
 // beware, "Gantt" in the command goes with the capital letter
@@ -23,8 +23,8 @@ const ganttChart = Gantt.getGanttInstance();
 The method can take a configuration object as a parameter:
 
 ~~~js
-const gantt = Gantt.getGanttInstance({
-    plugins:{
+const ganttInstance = Gantt.getGanttInstance({
+    plugins: {
         auto_scheduling: true,
     },
     container: "gantt_here",
@@ -35,27 +35,27 @@ const gantt = Gantt.getGanttInstance({
         auto_scheduling: true,
         auto_scheduling_strict: true,
         auto_scheduling_initial: true,
-        start_date: new Date(2020, 0, 1),
-        end_date: new Date(2021, 0, 1),
+        start_date: new Date(2027, 0, 1),
+        end_date: new Date(2028, 0, 1),
     },
     calendars: [
         {
-            id:"global",
+            id: "global",
             worktime: {
                 hours: ["8:00-17:00"],
-                days: [ 0, 1, 1, 1, 1, 0 ,0],
+                days: [0, 1, 1, 1, 1, 0, 0],
                 customWeeks: {
                     lastMonthOfYear: {
-                        from: new Date(2020, 11, 1),// December 1st, 2020
-                        to: new Date(2021, 0, 1),// January 1st 00:00, 2021,
+                        from: new Date(2027, 11, 1),
+                        to: new Date(2028, 0, 1),
                         hours: ["9:00-13:00"],
-                        days: [ 0, 1, 1, 1, 1, 1, 0]
+                        days: [0, 1, 1, 1, 1, 1, 0]
                     },
-                    firstMonthOfNextYear:{
-                        from: new Date(2021, 0, 1),// January 1st, 2021
-                        to: new Date(2021, 1, 1),// Feb 1st 00:00, 2021,
+                    firstMonthOfNextYear: {
+                        from: new Date(2028, 0, 1),
+                        to: new Date(2028, 1, 1),
                         hours: ["14:00-16:00"],
-                        days: [ 1, 1, 1, 1, 1, 0, 1]
+                        days: [1, 1, 1, 1, 1, 0, 1]
                     }
                 }
             }
@@ -64,17 +64,12 @@ const gantt = Gantt.getGanttInstance({
     data: {
         tasks: [
             { id: 11, text: "Project #1", type: "project", "open": true, "parent": 0 },
-            { id: 1, start_date: "05-04-2020", text: "1", duration: 1, parent: "11", 
-            type: "task" },
-            { id: 2, start_date: "05-04-2020", text: "2", duration: 3, parent: "11", 
-            type: "task" },
-            { id: 3, start_date: "05-04-2020", text: "3", duration: 3, parent: "11", 
-            type: "task" },
-            { id: 4, start_date: "05-04-2020", text: "4", duration: 3, parent: "11", 
-            type: "task" },
-            { id: 5, start_date: "05-04-2020", text: "5", duration: 1, parent: "11", 
-            type: "task" }
-        ], 
+            { id: 1, text: "1", start_date: "2027-04-05", duration: 1, parent: "11" },
+            { id: 2, text: "2", start_date: "2027-04-05", duration: 3, parent: "11" },
+            { id: 3, text: "3", start_date: "2027-04-05", duration: 3, parent: "11" },
+            { id: 4, text: "4", start_date: "2027-04-05", duration: 3, parent: "11" },
+            { id: 5, text: "5", start_date: "2027-04-05", duration: 1, parent: "11" }
+        ],
         links: [
             { source: "1", target: "2", type: "0", id: 1 },
             { source: "1", target: "3", type: "0", id: 2 },
@@ -91,115 +86,122 @@ As a result, you will get an initialized Gantt chart with the specified settings
 
 The config object can contain the following properties:
 
-- **container** - (*string|HTMLElement*) an HTML container (or its id) that the Gantt chart will be displayed in. If not specified, Gantt will be initialized without a container.
-- **config** - (*object*) an object with configuration settings of the Gantt chart
-- **calendars** - (*array*) an array of worktime calendars to be loaded into the gantt. Calendars must be specified in the format supported by the [gantt.addCalendar](api/method/addcalendar.md) method. 
-- **templates** - (*object*) an object with templates 
-- **events** - (*object*) an object with event handlers. 
+- `container` - (*string|HTMLElement*) an HTML container or its ID where the Gantt chart will be displayed. If not specified, Gantt will be initialized without a container.
+- `config` - (*object*) an object with Gantt chart configuration settings
+- `calendars` - (*array*) an array of worktime calendars to be loaded into the gantt instance. Calendars must be specified in the format supported by the [`gantt.addCalendar()`](api/method/addcalendar.md) method
+- `templates` - (*object*) an object with templates
+- `events` - (*object*) an object with event handlers
 
-
-You need to use the following format while specifying event handlers for a new instance of Gantt:
+You need to use the following format while specifying event handlers for a new Gantt instance:
 
 ~~~js
-const gantt = Gantt.getGanttInstance({
-     events: {
-          onTaskCreated: function(task){
-               task.owner = null;
-               return true;
-          },
-          onTaskClick: function(id){
-               alert(gantt.getTask(id).text);
-               return true;
-          }
-     }
-})
+const ganttInstance = Gantt.getGanttInstance({
+    events: {
+        onTaskCreated: (task) => {
+            task.owner = null;
+            return true;
+        },
+        onTaskClick: (taskId) => {
+            alert(ganttInstance.getTask(taskId).text);
+            return true;
+        }
+    }
+});
 ~~~
 
-- **data** - (*object|string*) an object with data to load or the URL to load data from
-- **plugins** - (*object*) extensions that need to be activated
-- **locale** - (*string|object*) a two-letter language code or an object of the locale that needs to be activated
+- `data` - (*object|string*) an object with data to load or the URL to load data from
+- `plugins` - (*object*) extensions that need to be activated
+- `locale` - (*string|object*) a two-letter language code or an object of the locale that needs to be activated
 
-**Note**, that calling the **Gantt.getGanttInstance()** method without parameters will return the gantt object with default configuration settings.
-Therefore, you will need to configure your new instance, initialize it and populate with data, as usual.
+Note that calling the `Gantt.getGanttInstance()` method without parameters will return a gantt object with the default configuration settings.
+Therefore, you will need to configure your new instance, initialize it, and populate it with data, as usual.
 
-Let's take a simple example: 2 Gantt charts, one under another: 
+Let's take a simple example: two Gantt charts, one under another:
 
 ~~~js
-window.addEventListener("DOMContentLoaded", function(){
-    var gantt1 = Gantt.getGanttInstance();
-    gantt1.init("gantt_here");
-    gantt1.parse(tasksA);
-
-    var gantt2 = Gantt.getGanttInstance();
-    gantt2.init("gantt_here_2");
-    gantt2.parse(tasksB);
+window.addEventListener("DOMContentLoaded", () => {
+    const firstGantt = Gantt.getGanttInstance();
+    firstGantt.init("gantt_here");
+    firstGantt.parse(tasksA);
+
+    const secondGantt = Gantt.getGanttInstance();
+    secondGantt.init("gantt_here_2");
+    secondGantt.parse(tasksB);
 });
+~~~
 
+~~~html
 <body>
-<div id="gantt_here" style="width:100%; height: 50%;"></div>
-<div id="gantt_here_2" style="width:100%; height: 50%;"></div>
+    <div id="gantt_here" style="width: 100%; height: 50%;"></div>
+    <div id="gantt_here_2" style="width: 100%; height: 50%;"></div>
 </body>
 ~~~
 
-## Integration with dhtmlxLayout
+## Integration with DHTMLX Layout
 
-A good way to place multiple Gantt charts on the page is using [dhtmlxLayout](https://docs.dhtmlx.com/layout__index.html). 
-It not only provides a beautiful frame, but also ensures correct interacting with other elements on the page and acting according to the page size changes. 
+A good way to place multiple Gantt charts on the page is using [DHTMLX Layout](https://docs.dhtmlx.com/suite/layout/).
+It not only provides a convenient layout frame, but also ensures correct interaction with other elements on the page and responds to page size changes.
 
 :::note
-Note that dhtmlxLayout is a separate product, not a part of the dhtmlxGantt library. If you would like to use dhtmlxLayout in your application, you should purchase the license. 
-Please [check the licensing options](https://dhtmlx.com/docs/products/dhtmlxLayout/#editions-licenses).
+Note that DHTMLX Layout is a separate product, not a part of the DHTMLX Gantt library. If you would like to use DHTMLX Layout in your application, you should purchase the license.
+Please [check the licensing options](https://dhtmlx.com/docs/products/licenses.shtml).
 :::
 
-**To attach a dhtmlxGantt instance to a layout cell**, use the **attachGantt()**  method.
-  
-**Note**, attaching dhtmlxGantt to a cell automatically initializes it. So, configure dhtmlxGantt instance before placing it into the layout.
+A DHTMLX Gantt instance can be placed into a layout cell by defining a container in the cell and initializing Gantt in it.
 
 ~~~js
-function init() {
-    var dhxLayout = new dhtmlXLayoutObject(document.body, "2U");
-
-    gantt1 = Gantt.getGanttInstance();
-    gantt1.config.min_column_width = 50;
-    gantt1.config.scale_height = 90;
-    dhxLayout.cells("a").attachGantt(null, null, gantt); /*!*/
-    gantt1.parse(tasksA);
-        
-    gantt2 = Gantt.getGanttInstance();
-    gantt2.config.date_grid = "%Y-%m-%d %H:%i";
-    gantt2.config.xml_date = "%Y-%m-%d %H:%i:%s";
-    dhxLayout.cells("b").attachGantt(null, null, gantt2);/*!*/
-    gantt2.parse(tasksB);
-}
+new dhx.Layout("layout_container", {
+    rows: [
+        {
+            id: "top",
+            height: "50%",
+            html: '<div id="gantt_here" style="width: 100%; height: 100%;"></div>'
+        },
+        {
+            id: "bottom",
+            height: "50%",
+            html: '<div id="gantt_here_2" style="width: 100%; height: 100%;"></div>'
+        }
+    ]
+});
+
+const firstGantt = Gantt.getGanttInstance();
+firstGantt.init("gantt_here");
+firstGantt.parse(tasksA);
+
+const secondGantt = Gantt.getGanttInstance();
+secondGantt.init("gantt_here_2");
+secondGantt.parse(tasksB);
 ~~~
 
 ## Destructor of Gantt and DataProcessor instances {#destructorofganttanddataprocessorinstances}
 
-Starting from version 5.1, the dhtmlxGantt object has a [destructor](api/method/destructor.md) that can be used to dispose unnecessary instances of the Gantt.
+Starting from version 5.1, the DHTMLX Gantt object has a [`destructor()`](api/method/destructor.md) method that can be used to dispose unnecessary Gantt instances.
 
-The destructor of the gantt instance can be used as follows:
+The `destructor()` method of a gantt instance can be used as follows:
 
 ~~~js
-var gantt = Gantt.getGanttInstance();
-gantt.destructor();
+const ganttInstance = Gantt.getGanttInstance();
+ganttInstance.destructor();
 ~~~
 
-The destructor will implement the following tasks:
+The destructor will perform the following tasks:
 
 - clear the data loaded into a gantt instance
-- destroy the dataProcessor (if it is attached to the gantt) 
+- destroy the data processor if it is attached to the gantt
 - detach the gantt from DOM
-- detach all DOM events attached via the [gantt.event()](api/method/event.md) method
+- detach all DOM events attached via the [`gantt.event()`](api/method/event.md) method
 
-Note, that the destructor won't destroy the data stores created by the [gantt.createDatastore()](api/method/createdatastore.md) method. 
+Note that the destructor will not destroy the data stores created by the [`gantt.createDatastore()`](api/method/createdatastore.md) method.
 You have to destroy them manually, like this:
 
 ~~~js
 // creating a datastore
-var resourcesStore = gantt.createDatastore({
-    name:"resource",
-    initItem: function(item){
-        item.id = item.key || gantt.uid();
+const ganttInstance = Gantt.getGanttInstance();
+const resourcesStore = ganttInstance.createDatastore({
+    name: "resource",
+    initItem: (item) => {
+        item.id = item.key || ganttInstance.uid();
         return item;
     }
 });
@@ -212,36 +214,40 @@ resourcesStore.destructor();
 
 Here is an example of using the destructor to dispose a gantt instance while using the Angular framework:
 
-~~~js
-@Component({selector: 'app-gantt', template: `...`})
-class MyGanttComponent implements OnDestroy {
-  ngOnInit() {
-     this.$gantt = Gantt.getGanttInstance();
-
-     // configure and init
-  }
-  
-  ngOnDestroy() {
-     this.$gantt.destructor();
-     this.$gantt = null;
-  }
+~~~ts
+@Component({ template: '...' })
+class MyGanttComponent implements OnInit, OnDestroy {
+    private ganttInstance;
+
+    ngOnInit() {
+        this.ganttInstance = Gantt.getGanttInstance();
+
+        // configure and init
+    }
+
+    ngOnDestroy() {
+        if (this.ganttInstance) {
+            this.ganttInstance.destructor();
+        }
+    }
 }
 ~~~
 
 ### Detaching the dataProcessor
 
-Calling the destructor of data processor will clear the dataprocessor instance and detach it from the gantt. For example:
+Calling the destructor of a data processor will clear the data processor instance and detach it from the gantt. For example:
 
 ~~~js
-var gantt = Gantt.getGanttInstance();
-var dp = new gantt.dataProcessor("url");
-dp.init(gantt);
+const ganttInstance = Gantt.getGanttInstance();
+const dataProcessor = ganttInstance.createDataProcessor({
+    url: "url",
+    mode: "REST"
+});
 
 // destroys data processor and detaches it from the gantt
-dp.destructor();
+dataProcessor.destructor();
 ~~~
 
 :::note
-If you use a package that does not allow creating multiple instances of the gantt object (GPL or Commercial editions), calling the gantt destructor will make the gantt inaccessible until page reload.
+If you use a package that does not allow creating multiple instances of the gantt object (GPL or Commercial editions), calling the gantt destructor will make the gantt inaccessible until the page is reloaded.
 :::
-