@worktile/gantt 11.0.2 → 12.0.1

package/example/src/main.ts

@@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

package/example/src/polyfills.ts

@@ -0,0 +1,63 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js';  // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */

package/example/src/styles.scss

@@ -0,0 +1,56 @@
+/* You can add global styles to this file, and also import other style files */
+
+// docgeni
+
+$primary:#348fe4;
+
+@import '../../packages/gantt/src/styles/index.scss';
+@import '~@docgeni/template/styles/index.scss';
+@import "~ngx-tethys/styles/main.bundle.scss";
+
+.gantt-demo {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background: #eee;
+    padding: 20px;
+
+    .gantt-demo-header {
+        height: 50px;
+        background: #fff;
+        padding: 0px 20px;
+        margin-bottom: 15px;
+        display: flex;
+        align-items: center;
+
+        .header-section {
+            margin-right: 20px;
+
+            &-title {
+                font-weight: bold;
+            }
+        }
+    }
+
+    .gantt-demo-content {
+        flex: 1;
+        height: 1px;
+    }
+}
+
+.gantt-example-content {
+    margin-left: 300px;
+}
+
+.gantt-example-component {
+    display: block;
+    margin: 20px;
+    border: 1px solid #eee;
+    height: calc(100vh - 95px);
+
+    .thy-layout-header {
+        .layout-header-title {
+            display: none;
+        }
+    }
+}

package/example/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ],
+  "exclude": [
+    "src/test.ts",
+    "src/**/*.spec.ts"
+  ]
+}

package/nginx.conf

@@ -0,0 +1,17 @@
+server {
+    listen       8080;
+
+    location / {
+
+      if ($request_filename ~ .*\.(htm|html)$) {
+            add_header Cache-Control no-cache;
+      }
+      try_files $uri $uri/ /index.html;
+      port_in_redirect off;
+      proxy_redirect off;
+      proxy_set_header Host $host;
+      proxy_set_header X-Real-IP $remote_addr;
+      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+      proxy_set_header X-Forwarded-Proto http;
+    }
+}

package/package.json

@@ -1,20 +1,116 @@
 {
   "name": "@worktile/gantt",
-  "version": "11.0.2",
-  "schematics": "./schematics/collection.json",
-  "peerDependencies": {
-    "@angular/common": "^11.0.0",
-    "@angular/core": "^11.0.0"
-  },
-  "main": "bundles/worktile-gantt.umd.js",
-  "module": "fesm2015/worktile-gantt.js",
-  "es2015": "fesm2015/worktile-gantt.js",
-  "esm2015": "esm2015/worktile-gantt.js",
-  "fesm2015": "fesm2015/worktile-gantt.js",
-  "typings": "worktile-gantt.d.ts",
-  "metadata": "worktile-gantt.metadata.json",
-  "sideEffects": false,
+  "version": "12.0.1",
+  "description": "A modern and powerful gantt chart component for Angular",
+  "keywords": [
+    "gantt",
+    "angular gantt",
+    "ngx gantt"
+  ],
+  "scripts": {
+    "ng": "ng",
+    "start": "docgeni serve",
+    "build:docs": "docgeni build",
+    "build": "npm run build:lib && npm run build:lib:scss",
+    "build:lib": "ng build gantt --configuration production",
+    "build:lib:scss": "scss-bundle -c scss-bundle.config.json",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "release": "standard-version",
+    "pub-only": "cd dist/gantt && npm publish --access=public",
+    "pub": "npm run build && npm run pub-only",
+    "report-coverage": "cat ./coverage/gantt/lcov.info | coveralls",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --pkg ./packages/gantt/package.json",
+    "contributors:init": "all-contributors init",
+    "contributors:add": "all-contributors add",
+    "contributors:generate": "all-contributors generate"
+  },
   "dependencies": {
-    "tslib": "^2.0.0"
-  }
-}
+    "@angular/animations": "~12.1.2",
+    "@angular/cdk": "~11.2.12",
+    "@angular/common": "~12.1.2",
+    "@angular/compiler": "~12.1.2",
+    "@angular/core": "~12.1.2",
+    "@angular/forms": "~12.1.2",
+    "@angular/platform-browser": "~12.1.2",
+    "@angular/platform-browser-dynamic": "~12.1.2",
+    "@angular/router": "~12.1.2",
+    "@types/es6-promise": "^3.3.0",
+    "date-fns": "^2.14.0",
+    "html2canvas": "1.0.0-rc.7",
+    "ngx-tethys": "^11.0.4",
+    "rxjs": "~6.6.3",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~12.1.2",
+    "@angular/cli": "~12.1.2",
+    "@angular/compiler-cli": "~12.1.2",
+    "@angular/language-service": "~12.1.2",
+    "@commitlint/cli": "^7.5.2",
+    "@commitlint/config-conventional": "^7.5.0",
+    "@docgeni/cli": "1.0.7",
+    "@docgeni/template": "1.0.7",
+    "@types/jasmine": "~3.6.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "concurrently": "^5.2.0",
+    "conventional-changelog-cli": "^2.0.12",
+    "coveralls": "^3.0.6",
+    "fs-extra": "^9.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~6.3.4",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "all-contributors-cli": "^6.6.0",
+    "ng-packagr": "^12.1.2",
+    "path": "^0.12.7",
+    "pretty-quick": "^1.10.0",
+    "protractor": "~7.0.0",
+    "scss-bundle": "^3.1.2",
+    "standard-version": "^8.0.1",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.3",
+    "typescript": "~4.3.5"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
+      "pre-commit": "pretty-quick --staged"
+    }
+  },
+  "standard-version": {
+    "bumpFiles": [
+      "package.json",
+      "package-lock.json",
+      "packages/gantt/package.json"
+    ],
+    "header": "Changelog\nAll notable changes to ngx-gantt will be documented in this file.\n",
+    "tagPrefix": "",
+    "skip": {
+      "tag": true,
+      "commit": true
+    }
+  },
+  "main": ".docgenirc.js",
+  "directories": {
+    "doc": "docs",
+    "example": "example"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/worktile/ngx-gantt.git"
+  },
+  "author": "walkerkay001",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/worktile/ngx-gantt/issues"
+  },
+  "homepage": "https://github.com/worktile/ngx-gantt#readme"
+}

package/packages/gantt/README.md

@@ -0,0 +1,24 @@
+# Gantt
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.14.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project gantt` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project gantt`.
+> Note: Don't forget to add `--project gantt` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build gantt` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build gantt`, go to the dist folder `cd dist/gantt` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test gantt` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).

package/packages/gantt/karma.conf.js

@@ -0,0 +1,46 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+    config.set({
+        basePath: '',
+        frameworks: ['jasmine', '@angular-devkit/build-angular'],
+        plugins: [
+            require('karma-jasmine'),
+            require('karma-chrome-launcher'),
+            require('karma-jasmine-html-reporter'),
+            require('karma-coverage'),
+            require('@angular-devkit/build-angular/plugins/karma')
+        ],
+        client: {
+            jasmine: {
+                // you can add configuration options for Jasmine here
+                // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+                // for example, you can disable the random execution with `random: false`
+                // or set a specific seed with `seed: 4321`
+                random: false
+            },
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
+        },
+        coverageReporter: {
+            dir: require('path').join(__dirname, '../../coverage/gantt'),
+            subdir: '.',
+            fixWebpackSourcePaths: true,
+            reporters: [{ type: 'html' }, { type: 'lcovonly' }, { type: 'text-summary' }]
+        },
+        reporters: ['progress', 'kjhtml'],
+        port: 9876,
+        colors: true,
+        logLevel: config.LOG_INFO,
+        autoWatch: true,
+        browsers: ['Chrome'],
+        singleRun: false,
+        restartOnFileChange: true,
+        customLaunchers: {
+            ChromeHeadlessCI: {
+                base: 'ChromeHeadless',
+                flags: ['--no-sandbox']
+            }
+        }
+    });
+};

package/packages/gantt/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/gantt",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/packages/gantt/ng-package.prod.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/gantt",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/packages/gantt/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "@worktile/gantt",
+  "version": "12.0.1",
+  "schematics": "./schematics/collection.json",
+  "scripts": {
+    "build": "../../node_modules/.bin/tsc -p tsconfig.schematics.json",
+    "copy:schemas": "cp --parents schematics/*/schema.json ../../dist/gantt/",
+    "copy:files": "cp --parents -p schematics/*/files/** ../../dist/gantt/",
+    "copy:collection": "cp schematics/collection.json ../../dist/gantt/schematics/collection.json",
+    "postbuild": "npm run copy:schemas && npm run copy:files && npm run copy:collection"
+  },
+  "peerDependencies": {
+    "@angular/common": "^12.0.0",
+    "@angular/core": "^12.0.0"
+  }
+}

package/packages/gantt/src/class/date-point.ts

@@ -0,0 +1,14 @@
+import { GanttDate } from '../utils/date';
+
+export class GanttDatePoint {
+    constructor(
+        public start: GanttDate,
+        public text: string,
+        public x: number,
+        public y: number,
+        public additions?: {
+            isWeekend: boolean;
+            isToday: boolean;
+        }
+    ) {}
+}

package/{class/event.d.ts → packages/gantt/src/class/event.ts}

@@ -1,26 +1,32 @@
 import { QueryList } from '@angular/core';
 import { NgxGanttTableColumnComponent } from '../table/gantt-column.component';
 import { GanttItem } from './item';
-export declare class GanttDragEvent<T = unknown> {
+
+export class GanttDragEvent<T = unknown> {
     item: GanttItem<T>;
 }
-export declare class GanttTableEvent {
+
+export class GanttTableEvent {
     columns: QueryList<NgxGanttTableColumnComponent>;
 }
-export declare class GanttLinkDragEvent<T = unknown> {
+
+export class GanttLinkDragEvent<T = unknown> {
     source: GanttItem<T>;
     target?: GanttItem<T>;
 }
-export declare class GanttLoadOnScrollEvent {
+
+export class GanttLoadOnScrollEvent {
     start: number;
     end: number;
 }
-export declare class GanttLineClickEvent<T = unknown> {
+
+export class GanttLineClickEvent<T = unknown> {
     event: MouseEvent;
     source: GanttItem<T>;
     target: GanttItem<T>;
 }
-export declare class GanttBarClickEvent<T = unknown> {
+
+export class GanttBarClickEvent<T = unknown> {
     event: Event;
     item: GanttItem<T>;
 }

package/packages/gantt/src/class/group.ts

@@ -0,0 +1,36 @@
+import { GanttItemInternal } from './item';
+
+export interface GanttGroup<T = unknown> {
+    id: string;
+    title: string;
+    expanded?: boolean;
+    origin?: T;
+    class?: string;
+}
+
+export class GanttGroupInternal {
+    id: string;
+    title: string;
+    origin: GanttGroup;
+    items: GanttItemInternal[];
+    mergedItems: GanttItemInternal[][];
+    expanded?: boolean;
+    refs?: {
+        height?: number;
+    } = {};
+    class?: string;
+    constructor(group: GanttGroup) {
+        this.id = group.id;
+        this.origin = group;
+        this.title = group.title;
+        this.expanded = group.expanded === undefined ? true : group.expanded;
+        this.items = [];
+        this.mergedItems = [[]];
+        this.class = group.class || '';
+    }
+
+    setExpand(expanded: boolean) {
+        this.expanded = expanded;
+        this.origin.expanded = expanded;
+    }
+}

package/packages/gantt/src/class/item.ts

@@ -0,0 +1,129 @@
+import { GanttDate } from '../utils/date';
+import { BehaviorSubject } from 'rxjs';
+import { GanttViewType } from './view-type';
+
+interface GanttItemRefs {
+    width: number;
+    x: number;
+    y: number;
+}
+
+export enum GanttItemType {
+    bar = 'bar',
+    range = 'range',
+    custom = 'custom'
+}
+
+export interface GanttItem<T = unknown> {
+    id: string;
+    title: string;
+    start?: number;
+    end?: number;
+    group_id?: string;
+    links?: string[];
+    draggable?: boolean;
+    linkable?: boolean;
+    expandable?: boolean;
+    expanded?: boolean;
+    children?: GanttItem[];
+    color?: string;
+    barStyle?: Partial<CSSStyleDeclaration>;
+    origin?: T;
+    type?: GanttItemType;
+    progress?: number;
+}
+
+export class GanttItemInternal {
+    id: string;
+    title: string;
+    start: GanttDate;
+    end: GanttDate;
+    links: string[];
+    color?: string;
+    barStyle?: Partial<CSSStyleDeclaration>;
+    draggable?: boolean;
+    linkable?: boolean;
+    origin: GanttItem;
+    expandable?: boolean;
+    expanded?: boolean;
+    loading: boolean;
+    children: GanttItemInternal[];
+    type?: GanttItemType;
+    progress?: number;
+    viewType?: GanttViewType;
+
+    get refs() {
+        return this.refs$.getValue();
+    }
+
+    refs$ = new BehaviorSubject<{ width: number; x?: number; y?: number }>(null);
+
+    constructor(item: GanttItem, options?: { viewType: GanttViewType }) {
+        this.origin = item;
+        this.id = this.origin.id;
+        this.links = this.origin.links || [];
+        this.color = this.origin.color;
+        this.barStyle = this.origin.barStyle;
+        this.linkable = this.origin.linkable === undefined ? true : this.origin.linkable;
+        this.draggable = this.origin.draggable === undefined ? true : this.origin.draggable;
+        this.expandable = this.origin.expandable || (this.origin.children || []).length > 0;
+        this.expanded = this.origin.expanded === undefined ? false : this.origin.expanded;
+        this.start = item.start ? new GanttDate(item.start) : null;
+        this.end = item.end ? new GanttDate(item.end) : null;
+        this.viewType = options && options.viewType ? options.viewType : GanttViewType.month;
+        this.children = (item.children || []).map((subItem) => {
+            return new GanttItemInternal(subItem, { viewType: this.viewType });
+        });
+        this.type = this.origin.type || GanttItemType.bar;
+        this.progress = this.origin.progress;
+        // fill one month when start or end is null
+        this.fillItemStartOrEnd(item);
+    }
+
+    fillItemStartOrEnd(item: GanttItem) {
+        let addInterval: number;
+        switch (this.viewType) {
+            case GanttViewType.day:
+            case GanttViewType.week:
+                addInterval = 0;
+                break;
+            default:
+                addInterval = 30;
+                break;
+        }
+        if (item.start && !item.end) {
+            this.end = new GanttDate(item.start).addDays(addInterval).endOfDay();
+        }
+        if (!item.start && item.end) {
+            this.start = new GanttDate(item.end).addDays(-addInterval).startOfDay();
+        }
+    }
+
+    updateRefs(refs: GanttItemRefs) {
+        this.refs$.next(refs);
+    }
+
+    updateDate(start: GanttDate, end: GanttDate) {
+        this.start = start.startOfDay();
+        this.end = end.endOfDay();
+        this.origin.start = this.start.getUnixTime();
+        this.origin.end = this.end.getUnixTime();
+    }
+
+    addChildren(items: GanttItem[]) {
+        this.origin.children = items;
+        this.children = (items || []).map((subItem) => {
+            return new GanttItemInternal(subItem, { viewType: this.viewType });
+        });
+    }
+
+    setExpand(expanded: boolean) {
+        this.expanded = expanded;
+        this.origin.expanded = expanded;
+    }
+
+    addLink(linkId: string) {
+        this.links = [...this.links, linkId];
+        this.origin.links = this.links;
+    }
+}

package/packages/gantt/src/class/test/group.spec.ts

@@ -0,0 +1,21 @@
+import { GanttDate } from '../../utils/date';
+import { GanttGroup, GanttGroupInternal } from '../group';
+
+const group: GanttGroup = {
+    id: '00001',
+    title: 'Project 1',
+    class: 'test'
+};
+
+describe('GanttGroupInternal', () => {
+    let ganttGroupInternal: GanttGroupInternal;
+
+    beforeEach(() => {
+        ganttGroupInternal = new GanttGroupInternal(group);
+    });
+
+    it(`should set expand`, () => {
+        ganttGroupInternal.setExpand(true);
+        expect(ganttGroupInternal.expanded).toBe(true);
+    });
+});