docs: improve gantt examples (#503)

worktile · Jan 16, 2025 · 69856fb · 69856fb
1 parent 028a49c
commit 69856fb
Show file tree

Hide file tree

Showing 18 changed files with 219 additions and 99 deletions.
diff --git a/docs/en-us/guides/configuration/global.md b/docs/en-us/guides/configuration/global.md
@@ -14,15 +14,12 @@ import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
     {
       provide: GANTT_GLOBAL_CONFIG,
       useValue: {
+        locale: 'zh-hans',
         dateFormat: {
-          ...
-        },
-        linkOptions: {
-          ...
-        },
-        styleOptions: {
-          ...
-        },
+           timeZone: 'Asia/Shanghai',
+           weekStartsOn: 1
+        }
+        ...
       }
     },
     ...
@@ -41,6 +38,7 @@ export class AppModule {
 export interface GanttGlobalConfig {
   locale: GanttI18nLocale; // i18n locale  zh-hans, zh-hant ,en-us, de-de, ja-jp, ru-ru
   dateOptions: {
+    timeZone: string, // set custom time zone, default is system's time zone
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 // set the week start value, the default is 1
   };
   linkOptions: {

diff --git a/docs/en-us/guides/configuration/i18n.md b/docs/en-us/guides/configuration/i18n.md
@@ -81,3 +81,31 @@ export class AppModule {
 }
 
 ```
+
+### Configuring TimeZone
+
+`ngx-gantt` defaults to using the system timezone, but users can set a custom timezone through the global configuration `GANTT_GLOBAL_CONFIG` by specifying dateOptions.timeZone.
+
+```javascript
+import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
+
+@NgModule({
+  ...
+  providers: [
+    {
+      provide: GANTT_GLOBAL_CONFIG,
+      useValue: {
+          dateOptions: {
+             timeZone: 'Asia/Shanghai'
+          }
+      }
+    },
+    ...
+  ]
+  ...
+})
+export class AppModule {
+
+}
+
+```
diff --git a/docs/zh-cn/guides/configuration/global.md b/docs/zh-cn/guides/configuration/global.md
@@ -15,15 +15,12 @@ import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
     {
       provide: GANTT_GLOBAL_CONFIG,
       useValue: {
+        locale: 'zh-hans',
         dateFormat: {
-          ...
-        },
-        linkOptions: {
-          ...
-        },
-        styleOptions: {
-          ...
-        },
+           timeZone: 'Asia/Shanghai',
+           weekStartsOn: 1
+        }
+        ...
       }
     },
     ...
@@ -36,12 +33,13 @@ export class AppModule {
 
 ```
 
-`GANTT_GLOBAL_CONFIG` 格式如下：
+`GANTT_GLOBAL_CONFIG` 参数说明：
 
 ```javascript
 export interface GanttGlobalConfig {
   locale: GanttI18nLocale; // 默认 locale 可选语言：zh-hans, zh-hant ,en-us, de-de, ja-jp, ru-ru
   dateOptions: {
+    timeZone: string, // 设置自定义时区，默认为系统默认时区
     weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6 // 设置 week 起始值，默认为 1
   };
   linkOptions: {

diff --git a/docs/zh-cn/guides/configuration/i18n.md b/docs/zh-cn/guides/configuration/i18n.md
@@ -81,4 +81,33 @@ export class AppModule {
 
 }
 
+```
+
+### 时区
+
+`ngx-gantt` 默认使用系统时区，使用者可通过全局配置 `GANTT_GLOBAL_CONFIG` 中的 `dateOptions.timeZone` 来设置自定义时区
+
+```javascript
+import { GANTT_GLOBAL_CONFIG } from 'ngx-gantt';
+
+@NgModule({
+  ...
+  providers: [
+    {
+      provide: GANTT_GLOBAL_CONFIG,
+      useValue: {
+          dateOptions: {
+             timeZone: 'Asia/Shanghai'
+          }
+      }
+    },
+    ...
+  ]
+  ...
+})
+export class AppModule {
+
+}
+
+
 ```
diff --git a/example/src/app/app.module.ts b/example/src/app/app.module.ts
@@ -6,17 +6,17 @@ import { ThyCheckboxModule } from 'ngx-tethys/checkbox';
 import { ThySwitchModule } from 'ngx-tethys/switch';
 import { ThyNotifyModule } from 'ngx-tethys/notify';
 import { ThyDatePickerModule } from 'ngx-tethys/date-picker';
-import { NgModule } from '@angular/core';
+import { inject, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { GANTT_GLOBAL_CONFIG, GANTT_I18N_LOCALE_TOKEN, GanttViewType, NgxGanttModule } from 'ngx-gantt';
+import { GANTT_GLOBAL_CONFIG, GanttI18nLocale, NgxGanttModule } from 'ngx-gantt';
 import { AppComponent } from './app.component';
 import { AppGanttExampleComponent } from './gantt/gantt.component';
 import { AppRoutingModule } from './app-routing.module';
 import { CommonModule } from '@angular/common';
 import { AppGanttAdvancedExampleComponent } from './gantt-advanced/gantt-advanced.component';
 import { AppGanttRangeExampleComponent } from './gantt-range/gantt-range.component';
 import { DOCGENI_SITE_PROVIDERS } from './content/index';
-import { DocgeniTemplateModule } from '@docgeni/template';
+import { DocgeniTemplateModule, GlobalContext } from '@docgeni/template';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppGanttFlatComponent } from './gantt-advanced/component/flat.component';
@@ -25,7 +25,6 @@ import { AppExampleComponentsComponent } from './components/components.component
 import { AppGanttGroupsExampleComponent } from './gantt-groups/gantt-groups.component';
 import { AppGanttCustomViewExampleComponent } from './gantt-custom-view/gantt.component';
 import { AppGanttVirtualScrollExampleComponent } from './gantt-virtual-scroll/gantt.component';
-import { ko } from 'date-fns/locale';
 
 @NgModule({
     declarations: [
@@ -56,7 +55,18 @@ import { ko } from 'date-fns/locale';
         ThyDatePickerModule,
         ...EXAMPLE_MODULES
     ],
-    providers: [...DOCGENI_SITE_PROVIDERS],
+    providers: [
+        ...DOCGENI_SITE_PROVIDERS,
+        {
+            provide: GANTT_GLOBAL_CONFIG,
+            useFactory: () => {
+                const docgeniGlobalContext = inject(GlobalContext);
+                return {
+                    locale: docgeniGlobalContext.locale === 'en-us' ? GanttI18nLocale.enUs : GanttI18nLocale.zhHans
+                };
+            }
+        }
+    ],
     bootstrap: [AppComponent]
 })
 export class AppModule {

diff --git a/example/src/app/gantt-custom-view/gantt.component.html b/example/src/app/gantt-custom-view/gantt.component.html
@@ -28,7 +28,7 @@
       (linkDragEnded)="linkDragEnded($event)"
     >
       <ngx-gantt-table>
-        <ngx-gantt-column name="标题" width="300px">
+        <ngx-gantt-column name="Title" width="300px">
           <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
         </ngx-gantt-column>
       </ngx-gantt-table>

diff --git a/example/src/app/gantt-groups/gantt-groups.component.html b/example/src/app/gantt-groups/gantt-groups.component.html
@@ -27,15 +27,15 @@
       [childrenResolve]="childrenResolve"
     >
       <ngx-gantt-table [draggable]="true">
-        <ngx-gantt-column name="标题" width="180px">
+        <ngx-gantt-column name="Title" width="180px">
           <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
         </ngx-gantt-column>
-        <ngx-gantt-column name="开始时间" width="140px">
+        <ngx-gantt-column name="Start Time" width="140px">
           <ng-template #cell let-item="item">
             {{ item.start * 1000 | date : 'yyyy-MM-dd' }}
           </ng-template>
         </ngx-gantt-column>
-        <ngx-gantt-column name="截止时间" width="140px">
+        <ngx-gantt-column name="End Time" width="140px">
           <ng-template #cell let-item="item">
             {{ item.end * 1000 | date : 'yyyy-MM-dd' }}
           </ng-template>

diff --git a/example/src/app/gantt-range/gantt-range.component.html b/example/src/app/gantt-range/gantt-range.component.html
@@ -45,20 +45,20 @@
     (loadOnScroll)="loadOnScroll($event)"
   >
     <ngx-gantt-table>
-      <ngx-gantt-column name="标题">
+      <ngx-gantt-column name="Title">
         <ng-template #cell let-item="item">
           {{ item.title }}
         </ng-template>
       </ngx-gantt-column>
       <ngx-gantt-column>
-        <ng-template #header> <span style="font-weight: bold;">开始时间</span> </ng-template>
+        <ng-template #header> <span style="font-weight: bold">Start Time</span> </ng-template>
         <ng-template #cell let-item="item">
-          {{ item.start * 1000 | date: 'yyyy-MM-dd' }}
+          {{ item.start * 1000 | date : 'yyyy-MM-dd' }}
         </ng-template>
       </ngx-gantt-column>
-      <ngx-gantt-column name="截止时间">
+      <ngx-gantt-column name="End Time">
         <ng-template #cell let-item="item">
-          {{ item.end * 1000 | date: 'yyyy-MM-dd' }}
+          {{ item.end * 1000 | date : 'yyyy-MM-dd' }}
         </ng-template>
       </ngx-gantt-column>
     </ngx-gantt-table>

diff --git a/example/src/app/gantt-virtual-scroll/gantt.component.html b/example/src/app/gantt-virtual-scroll/gantt.component.html
@@ -21,15 +21,15 @@
         (dragStarted)="onDragStarted($event)"
         (dragEnded)="onDragEnded($event)"
       >
-        <ngx-gantt-column name="标题" width="180px">
+        <ngx-gantt-column name="Title" width="180px">
           <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
         </ngx-gantt-column>
-        <ngx-gantt-column name="开始时间" [class.start-time]="true" [width]="140">
+        <ngx-gantt-column name="Start Time" [class.start-time]="true" [width]="140">
           <ng-template #cell let-item="item">
             {{ item.start * 1000 | date : 'yyyy-MM-dd' }}
           </ng-template>
         </ngx-gantt-column>
-        <ngx-gantt-column name="截止时间">
+        <ngx-gantt-column name="End Time">
           <ng-template #cell let-item="item">
             {{ item.end * 1000 | date : 'yyyy-MM-dd' }}
           </ng-template>

diff --git a/example/src/app/gantt/gantt.component.html b/example/src/app/gantt/gantt.component.html
@@ -1,16 +1,10 @@
 <thy-layout>
   <thy-header class="header-with-baseline">
     <ng-template #headerContent>
-      <thy-button-group thySize="sm" thyType="outline-default">
-        <button thyButton *ngFor="let view of views" [class.active]="view.value === selectedViewType" (click)="selectView(view.value)">
-          {{ view.name }}
-        </button>
-      </thy-button-group>
+      <thy-button thyType="primary" thySize="sm" (click)="scrollToToday()">今天</thy-button>
       &nbsp; &nbsp; &nbsp;
       <thy-button thyType="primary" thySize="sm" (click)="refresh()">刷新</thy-button>
       &nbsp; &nbsp; &nbsp;
-      <thy-button thyType="primary" thySize="sm" (click)="scrollToToday()">今天</thy-button>
-      &nbsp; &nbsp; &nbsp;
       <thy-button thyType="primary" thySize="sm" (click)="print('gantt-example')"> ↓ 导出为图片 </thy-button>
       &nbsp; &nbsp; &nbsp;
       <span>工具栏：</span>
@@ -55,17 +49,17 @@
         (dragStarted)="onDragStarted($event)"
         (dragEnded)="onDragEnded($event)"
       >
-        <ngx-gantt-column name="标题" width="160px" [showExpandIcon]="true">
+        <ngx-gantt-column name="Title" width="160px" [showExpandIcon]="true">
           <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
         </ngx-gantt-column>
-        <ngx-gantt-column name="开始时间" width="200px">
+        <ngx-gantt-column name="Start Time" width="200px">
           <ng-template #cell let-item="item">
-            {{ item.start * 1000 | date : 'yyyy-MM-dd HH:mm' }}
+            {{ item.start * 1000 | dateFormat : 'yyyy-MM-dd HH:mm' }}
           </ng-template>
         </ngx-gantt-column>
-        <ngx-gantt-column name="截止时间" width="200px">
+        <ngx-gantt-column name="End Time" width="200px">
           <ng-template #cell let-item="item">
-            {{ item.end * 1000 | date : 'yyyy-MM-dd HH:mm' }}
+            {{ item.end * 1000 | dateFormat : 'yyyy-MM-dd HH:mm' }}
           </ng-template>
         </ngx-gantt-column>
       </ngx-gantt-table>

diff --git a/example/src/app/gantt/gantt.component.ts b/example/src/app/gantt/gantt.component.ts
@@ -30,32 +30,16 @@ import { random, randomItems } from '../helper';
     providers: [GanttPrintService]
 })
 export class AppGanttExampleComponent implements OnInit, AfterViewInit {
-    views = [
-        {
-            name: '小时',
-            value: GanttViewType.hour
-        },
-        {
-            name: '日',
-            value: GanttViewType.day
-        },
-        {
-            name: '周',
-            value: GanttViewType.week
-        },
-        {
-            name: '月',
-            value: GanttViewType.month
-        },
-        {
-            name: '季',
-            value: GanttViewType.quarter
-        },
-        {
-            name: '年',
-            value: GanttViewType.year
-        }
-    ];
+    toolbarOptions: GanttToolbarOptions = {
+        viewTypes: [
+            GanttViewType.hour,
+            GanttViewType.day,
+            GanttViewType.week,
+            GanttViewType.month,
+            GanttViewType.quarter,
+            GanttViewType.year
+        ]
+    };
 
     viewType: GanttViewType = GanttViewType.month;
 
@@ -101,10 +85,6 @@ export class AppGanttExampleComponent implements OnInit, AfterViewInit {
         { id: '0000029', title: 'Task 29', start: 1618053197, end: 1619176397 }
     ];
 
-    toolbarOptions: GanttToolbarOptions = {
-        viewTypes: [GanttViewType.day, GanttViewType.month, GanttViewType.year]
-    };
-
     baselineItems: GanttBaselineItem[] = [];
 
     options = {