Gantt Chart

This is one of the operating modes of the table component. 


To display the Gantt diagram by day or hour, do the following: 

1. Create a table with the columns id (PK, string),name,and desc. These will be Gantt lines 
   (i.e. for each of these elements, the event feed will be loaded by date). 

2. In the third select in GetItems, specify the output type viewType= "gantt" 
   

   select 'gantt' viewType, 'days' ganttScale, 'financeItemInfo' ganttItemForm, 'Description of operation details' ganttItemFormTitle, 'Finance by date' Title

3. In the fourth select, we output data for Gantt elements in GetItems (instead of footer data). 

   select top 60 (select name from fin_financeCategories where id = categoryID) as  itemID,
          -- 'itemID' must match winth the ID of the item from the second select
          created [from], -- start and end date of the Gantt element
          dateadd(hour, 0.5, created) [to],
          'Х' [label], -- placemark on the chart
          convert(nvarchar, created, 104) + ' : ' +  isnull((select name
                                                             from fin_financeCategories
                                                             where id = categoryID),
                                                             'Without categories')
          + ' : ' + try_cast(sum as nvarchar) [desc], -- hint when hovering over an element
          'text-warning' customClass, --css class for styling an element on a diagram
          cast(id  as nvarchar) dataObj-- ID of the element to display the modal form
   from fin_finances
   where isnull(isDeleted,0)=0
     and (isnull(@filterCategoryID,0)=0 or @filterCategoryID = categoryID)
     and created > dateadd(month, -3, getdate())

4. Additionally the following parameters can be configured in the 3 select query: 

1. ganttScale - default format days, hours, weeks и т.д.

2. ganttNavigate - how the diagram navigation will be displayed - scroll, buttons

3. ganttItemForm-form code. If specified, when clicking on a chart element in the modal window, the 
   form will be called(the form with the specified code will need to be implemented separately, Itemid=dataObj is passed to it from the 4 select query). 

4. ganttItemFormTitle - title of the form dialog box

 Note on Gantt diagrams: 

• Paging for the chart is set equal to paging for the table's settings. 

• Gantt elements take at least 1 hour in the grid. If you had an event from 14: 02 to 15: 02, it will take 2 cells - 14 and 15. 
  Therefore, it is better to make events 1 minute long.

• Elements can fit on top of each other, so it's better to group events by the hour in the day + show the number in the header. 
  and in the modal window (form), click to show the elements that correspond to the cell. 

• Desc for categories should be set to some value, and should not be left empty. 

• If you need to color elements, use the customClass parameter - set bootstrap classes: bg-warning