Feature: frappe gantt-update

Widgets/Gantt.php

@@ -29,8 +29,6 @@ class Gantt extends DataTree
 
     private $keepScrollPosition = false;
 
-    private $autoRelayoutOnChange = false;
-
     private $viewModeColumnWidthDay = null;
 
     private $viewModeColumnWidthWeek = null;
@@ -272,31 +270,6 @@ public function setKeepScrollPosition(bool $value): Gantt
         return $this;
     }
 
-    /**
-     * @return bool
-     */
-    public function getAutoRelayoutOnChange() : bool
-    {
-        return $this->autoRelayoutOnChange;
-    }
-
-    /**
-     * Automatically rearrange when dragging/resizing  the taskbars.
-     * It is necessary if multiple bars are at the same row:
-     * 
-     * @uxon-property auto_relayout_on_change
-     * @uxon-type boolean
-     * @uxon-default true
-     * 
-     * @param bool $value
-     * @return $this
-     */
-    public function setAutoRelayoutOnChange(bool $value) : Gantt
-    {
-        $this->autoRelayoutOnChange = $value;
-        return $this;
-    }
-
     /**
      * @return int|null
      */

Widgets/Parts/DataTimeline.php

@@ -5,7 +5,7 @@
 use exface\Core\Interfaces\Widgets\WidgetPartInterface;
 use exface\Core\Widgets\Traits\DataWidgetPartTrait;
 use exface\Core\Exceptions\Widgets\WidgetConfigurationError;
-
+ //TODO: This doc contains future features that are not implemented yet.
 /**
  * DataTimeline configuration for data-widgets like Scheduler or certain Chart types.
  * 
@@ -98,6 +98,8 @@ class DataTimeline implements WidgetPartInterface
     use DataWidgetPartTrait;
 
     const GRANULARITY_DAYS = 'days';
+    const GRANULARITY_QUARTER_DAYS  = 'quarter_days';
+    const GRANULARITY_HALF_DAYS  = 'half_days';
     const GRANULARITY_DAYS_PER_WEEK = 'days_per_week';
     const GRANULARITY_DAYS_PER_MONTH = 'days_per_month';
     const GRANULARITY_HOURS = 'hours';
@@ -110,6 +112,7 @@ class DataTimeline implements WidgetPartInterface
     const INTERVAL_WEEK = 'week';
     const INTERVAL_MONTH = 'month';
     const INTERVAL_YEAR = 'year';
+    const INTERVAL_DECADE = 'decade';
 
     private ?array $views = null;
     private ?UxonObject $viewsUxon = null;
@@ -145,7 +148,7 @@ public function getGranularity(string $default = null) : ?string
      * Initial zoom level: `hours`, `days`, `weeks`, `months`, `years` or `all`
      * 
      * @uxon-property granularity
-     * @uxon-type [hours,days,days_per_week,days_per_month,weeks,months,years,all]
+     * @uxon-type [hours,days,quarter_days,half_day,days_per_week,days_per_month,weeks,months,years,all]
      * @uxon-default hour
      * 
      * @param string $value
@@ -248,25 +251,100 @@ public function getViews() : array
             if ($this->viewsUxon === null) {
                 $translator = $this->getWorkbench()->getCoreApp()->getTranslator();
                 // IDEA get defaults from widget? Different defaults for Gantt and Scheduler?
+                // Info: This defaults are similar to frappe-gantt defaults.
                 $this->views = [
                     new DataTimelineView($this, new UxonObject([
                         'name' => $translator->translate('WIDGET.GANTT_CHARD.VIEW_MODE_DAY'),
-                        'granularity' => DataTimelineView::GRANULARITY_DAYS,
                         'description' => $translator->translate('WIDGET.GANTT_CHARD.VIEW_MODE_DAY_DESCRIPTION'),
-                        'column_width' => 38
+                        'granularity' => DataTimelineView::GRANULARITY_DAYS,
+                        'date_format' => 'yyyy-MM-dd',
+                        'padding' => '7d',
+                        'header_lines' => new UxonObject([
+                            [
+                                'interval' => DataTimeline::INTERVAL_MONTH, 
+                                'date_format' => '', 
+                                'date_format_at_border' => 'MMMM'
+                            ], [
+                                'interval' => DataTimeline::INTERVAL_DAY, 
+                                'date_format' => 'dd',
+                            ]
+                        ]),
+                        'thick_lines' => new UxonObject([[
+                            'interval' => 'week',
+                            'value' => 1
+                        ]])
                     ])),
                     new DataTimelineView($this, new UxonObject([
                         'name' => $translator->translate('WIDGET.GANTT_CHARD.VIEW_MODE_WEEK'),
-                        'granularity' => DataTimelineView::GRANULARITY_WEEKS,
                         'description' => $translator->translate('WIDGET.GANTT_CHARD.VIEW_MODE_WEEK_DESCRIPTION'),
-                        'column_width' => 140
+                        'granularity' => DataTimelineView::GRANULARITY_WEEKS,
+                        'date_format' => 'yyyy-MM-dd',
+                        'column_width' => 140,
+                        'padding' => '1m',
+                        'header_lines' => new UxonObject([
+                            [
+                                'interval' => DataTimeline::INTERVAL_MONTH, 
+                                'date_format' => '', 
+                                'date_format_at_border' => 'MMMM'
+                            ], [
+                                'date_format' => '~weekRange',
+                            ]
+                        ]),
+                        'thick_lines' => new UxonObject([[
+                            'interval' => 'month_range_in_days',
+                            'from' => 1,
+                            'to' => 7
+                        ]])
                     ])),
                     new DataTimelineView($this, new UxonObject([
                         'name' => $translator->translate('WIDGET.GANTT_CHARD.VIEW_MODE_MONTH'),
-                        'granularity' => DataTimelineView::GRANULARITY_MONTHS,
                         'description' => $translator->translate('WIDGET.GANTT_CHARD.VIEW_MODE_MONTH_DESCRIPTION'),
-                        'column_width' => 20
+                        'granularity' => DataTimelineView::GRANULARITY_WEEKS,
+                        'date_format' => 'yyyy-MM-dd',
+                        'column_width' => 35,
+                        'upper_text_frequency' => 4,
+                        'header_lines' => new UxonObject([
+                            [
+                                'interval' => DataTimeline::INTERVAL_MONTH,
+                                'date_format' => '',
+                                'date_format_at_border' => 'MMMM'
+                            ], [
+                                'date_format' => 'w',
+                            ]
+                        ]),
+                        'thick_lines' => new UxonObject([
+                            [
+                                'interval' => DataTimelineThicklines::INTERVAL_MONTH_RANGE_IN_DAYS,
+                                'from' => 1,
+                                'to' => 7,
+                            ]
+                        ])
                     ])),
+                    //TODO: This is the original month view. Currently, month and the year view is not working properly.
+                    // If the user starts no scroll inside the view, the bars will change its position randomly.
+                    // Frappe-gantt authors know about this issue, so it may be fixed in the future. 
+                    // See: https://github.com/frappe/gantt/issues/498
+/*                    new DataTimelineView($this, new UxonObject([ 
+                        'name' => $translator->translate('WIDGET.GANTT_CHARD.VIEW_MODE_MONTH'),
+                        'description' => $translator->translate('WIDGET.GANTT_CHARD.VIEW_MODE_MONTH_DESCRIPTION'),
+                        'granularity' => DataTimelineView::GRANULARITY_MONTHS,
+                        'date_format' => 'yyyy-MM',
+                        'column_width' => 120,
+                        'snap_at' => DataTimelineView::SNAP_AT_WEEKLY,
+                        'header_lines' => new UxonObject([
+                            [
+                                'interval' => DataTimeline::INTERVAL_YEAR,
+                                'date_format_at_border' => 'yyyy'
+                            ], [
+                                'date_format' => 'MMMM',
+                            ]
+                        ]),
+                        'thick_lines' => new UxonObject([
+                            [
+                                'interval' => DataTimelineThicklines::INTERVAL_YEAR_QUARTER,
+                            ]
+                        ])
+                    ])),*/
                 ];
             } else {
                 foreach ($this->viewsUxon as $uxon) {

Widgets/Parts/DataTimelineHeader.php

@@ -9,23 +9,25 @@
 
 /**
  * DataTimelineHeader configuration can set different date formats (ICU) for a DataTimeline header.
+ * The frist element in the header_lines array is rendered at the top, the next below etc.
  * 
  * - `interval` - This sets an interval that covers a specific time period, such as a month.
  * - `date_format` - sets the date format.
  * - `date_format_at_border` - formats the borders of a chosen interval with different date format.
  * 
  * ## Examples
+ * 
+ * In frappe-gantt, to show a timeline with months at the top and days below:
  * ```
  *      "header_lines": [
  *          {
  *              "interval": "month",
  *              "date_format": "",
- *              "date_format_at_border": "MMM"
+ *              "date_format_at_border": "MMMM"
  *          },
  *          {
- *              "interval": "month",
- *              "date_format": "d",
- *              "date_format_at_border": "d MMM"
+ *              "interval": "day",
+ *              "date_format": "dd",
  *          }
  *      ]
  * ```
@@ -72,12 +74,12 @@ public function getInterval(string $default = null) : ?string
     {
         return $this->interval;
     }
-
+    
     /**
      * Sets the interval of the header that is used for the border formats.
      * 
      * @uxon-property interval
-     * @uxon-type [day,month,week,year]
+     * @uxon-type [day,month,week,year,decade]
      * @uxon-default day
      * 
      * @param string $interval
@@ -99,9 +101,22 @@ public function getDateFormat() : ?string
 
     /**
      * Sets the date format of the header. 
-     * Example for 17.12.2025: 'M' -> '12' and 'MMM' -> 'Dez.'.
+     * Example for 08.02.2025: 
+     * - 'd' -> 8,
+     * - 'dd' -> 08, 
+     * - 'ddd' -> 39 (day of the year)
+     * - 'M' -> 2,
+     * - 'MM' -> '02', 
+     * - 'MMM' -> 'Feb.', 
+     * - 'MMMM' -> 'Februar', 
+     * - 'yy' -> 25,
+     * - 'yyyy' -> 2025
      * 
      * Search for "ICU" to learn more about the format settings.
+     * 
+     * Special tokens:
+     * - '~weekRange': shows the week range from Monday to Sunday. Example: 01.03 - 07.03
+     * - '~decade': shows decades. Example: 2020, 2030, ...
      *
      * 
      * @uxon-property date_format
@@ -128,6 +143,8 @@ public function getDateFormatAtBorder() : ?string
      * Sets the border format of an interval. 
      * Example: If Interval == month -> sets the date format only for the column where the month changes.
      * 
+     * For more information, see 'date_format' documentation.
+     * 
      * @uxon-property date_format_at_border
      * @uxon-type string
      * 
@@ -148,8 +165,9 @@ private function formatInterval(string $value) : string
         switch ($value) {
             case 'day': $value = DataTimeline::INTERVAL_DAY; break;
             case 'month': $value = DataTimeline::INTERVAL_MONTH; break;
-            case 'weer':  $value = DataTimeline::INTERVAL_WEEK; break;
+            case 'week':  $value = DataTimeline::INTERVAL_WEEK; break;
             case 'year': $value = DataTimeline::INTERVAL_YEAR; break;
+            case 'decade': $value = DataTimeline::INTERVAL_DECADE; break;
         }
 
         $const = DataTimeline::class . '::INTERVAL_' . strtoupper($value);