@worktile/gantt 12.0.0 → 12.0.1

package/packages/gantt/src/views/test/view.spec.ts

@@ -0,0 +1,144 @@
+import { GanttDatePoint } from '../../class';
+import { GanttDate } from '../../utils/date';
+
+import { GanttView, GanttViewDate, GanttViewOptions } from '../view';
+import { date, today } from './mock';
+
+class GanttViewMock extends GanttView {
+    constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
+        super(start, end, options);
+    }
+
+    startOf(): GanttDate {
+        return new GanttDate('2020-01-01 00:00:00');
+    }
+
+    endOf(): GanttDate {
+        return new GanttDate('2020-12-31 23:59:59');
+    }
+
+    getPrimaryWidth(): number {
+        return 3640;
+    }
+
+    getDayOccupancyWidth(): number {
+        return 10;
+    }
+
+    getPrimaryDatePoints(): GanttDatePoint[] {
+        return [
+            {
+                text: '2020年',
+                x: 1820,
+                y: 18,
+                start: new GanttDate('2020-01-01 00:00:00')
+            }
+        ];
+    }
+
+    getSecondaryDatePoints(): GanttDatePoint[] {
+        return [
+            {
+                text: 'Q1',
+                x: 455,
+                y: 36,
+                start: new GanttDate('2020-01-01 00:00:00')
+            },
+            {
+                text: 'Q2',
+                x: 1365,
+                y: 36,
+                start: new GanttDate('2020-04-01 00:00:00')
+            },
+            { text: 'Q3', x: 2275, y: 36, start: new GanttDate('2020-07-01 00:00:00') },
+            { text: 'Q4', x: 3185, y: 36, start: new GanttDate('2020-10-01 00:00:00') }
+        ];
+    }
+}
+
+describe('GanttView', () => {
+    let ganttView: GanttView;
+
+    beforeEach(() => {
+        ganttView = new GanttViewMock(date.start, date.end, {
+            cellWidth: 20,
+            start: today.startOfYear().startOfWeek({ weekStartsOn: 1 }),
+            end: today.endOfYear().endOfWeek({ weekStartsOn: 1 })
+        });
+    });
+
+    it(`should has correct view options`, () => {
+        const options = ganttView.options;
+        const cellWidth = options.cellWidth;
+        const start = options.start.getUnixTime();
+        const end = options.end.getUnixTime();
+        const max = options.max.getUnixTime();
+        const min = options.min.getUnixTime();
+
+        expect(cellWidth).toEqual(20);
+        expect(start).toEqual(new GanttDate('2019-12-30 00:00:00').getUnixTime());
+        expect(end).toEqual(new GanttDate('2021-01-03 23:59:59').getUnixTime());
+        expect(max).toEqual(new GanttDate().addYears(1).endOfYear().getUnixTime());
+        expect(min).toEqual(new GanttDate().addYears(-1).startOfYear().getUnixTime());
+    });
+
+    it(`should has correct start and end`, () => {
+        const start = ganttView.start.getUnixTime();
+        const end = ganttView.end.getUnixTime();
+        expect(start).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+        expect(end).toEqual(new GanttDate('2020-12-31 23:59:59').getUnixTime());
+    });
+
+    it(`should add start date`, () => {
+        const newDate = ganttView.addStartDate();
+        if (ganttView.options.min.value > new GanttDate('2020-01-01 00:00:00').value) {
+            expect(newDate).toBe(null);
+        } else {
+            expect(newDate.start.getUnixTime()).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+            expect(newDate.end.getUnixTime()).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+        }
+    });
+
+    it(`should add end date`, () => {
+        const newDate = ganttView.addEndDate();
+        expect(newDate.start.getUnixTime()).toEqual(new GanttDate('2020-12-31 23:59:59').getUnixTime());
+        expect(newDate.end.getUnixTime()).toEqual(new GanttDate('2020-12-31 23:59:59').getUnixTime());
+    });
+
+    it(`should update date`, () => {
+        ganttView.updateDate(new GanttDate('2020-10-01 00:00:00'), new GanttDate('2023-02-01 00:00:00'));
+        expect(ganttView.start.getUnixTime()).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+        expect(ganttView.end.getUnixTime()).toEqual(new GanttDate('2020-12-31 23:59:59').getUnixTime());
+    });
+
+    it(`should get width`, () => {
+        const width = ganttView.getWidth();
+        expect(width).toEqual(80);
+    });
+
+    it(`should get cell width`, () => {
+        const cellWidth = ganttView.getCellWidth();
+        expect(cellWidth).toEqual(20);
+    });
+
+    it(`should get today x point`, () => {
+        const xPoint = ganttView.getTodayXPoint();
+        expect(xPoint).toEqual(null);
+    });
+
+    it(`should get x point by date`, () => {
+        const xPoint = ganttView.getXPointByDate(new GanttDate('2020-02-01 00:00:00'));
+        expect(xPoint).toEqual(310);
+    });
+
+    it(`should get date by x point`, () => {
+        ganttView.getSecondaryDatePoints();
+        const pointDate = ganttView.getDateByXPoint(60);
+        expect(pointDate.getUnixTime()).toEqual(new GanttDate('2020-10-01 00:00:00').getUnixTime());
+    });
+
+    it(`should get date range width`, () => {
+        const width = ganttView.getDateRangeWidth(new GanttDate('2020-03-01 00:00:00'), new GanttDate('2020-05-01 00:00:00'));
+        expect(width).toEqual(610);
+    });
+});

package/packages/gantt/src/views/test/week.spec.ts

@@ -0,0 +1,45 @@
+import { GanttDate } from '../../utils/date';
+import { GanttViewWeek } from '../week';
+import { date, today } from './mock';
+
+describe('GanttViewWeek', () => {
+    let ganttViewWeek: GanttViewWeek;
+
+    beforeEach(() => {
+        ganttViewWeek = new GanttViewWeek(date.start, date.end, {
+            cellWidth: 140,
+            start: today.startOfYear().startOfWeek({ weekStartsOn: 1 }),
+            end: today.endOfYear().endOfWeek({ weekStartsOn: 1 })
+        });
+    });
+
+    it(`should has correct view start`, () => {
+        const startOfWeek = ganttViewWeek.startOf(date.start.date).getUnixTime();
+        expect(startOfWeek).toEqual(new GanttDate('2019-12-30 00:00:00').getUnixTime());
+    });
+
+    it(`should has correct view end`, () => {
+        const endOfWeek = ganttViewWeek.endOf(date.end.date).getUnixTime();
+        expect(endOfWeek).toEqual(new GanttDate('2021-01-03 23:59:59').getUnixTime());
+    });
+
+    it(`should has correct cell width`, () => {
+        const weekCellWidth = ganttViewWeek.getDayOccupancyWidth();
+        expect(weekCellWidth).toEqual(20);
+    });
+
+    it(`should has correct primary width`, () => {
+        const weekPrimaryWidth = ganttViewWeek.getPrimaryWidth();
+        expect(weekPrimaryWidth).toEqual(140);
+    });
+
+    it(`should has correct primary date points`, () => {
+        const weekPoints = ganttViewWeek.getPrimaryDatePoints();
+        expect(weekPoints.length).toBe(54);
+    });
+
+    it(`should has correct secondary date points`, () => {
+        const weekPoints = ganttViewWeek.getSecondaryDatePoints();
+        expect(weekPoints.length).toBe(54);
+    });
+});

package/packages/gantt/src/views/test/year.spec.ts

@@ -0,0 +1,45 @@
+import { GanttViewYear } from '../year';
+import { GanttDate } from '../../utils/date';
+import { date, today } from './mock';
+
+describe('GanttViewYear', () => {
+    let ganttViewYear: GanttViewYear;
+
+    beforeEach(() => {
+        ganttViewYear = new GanttViewYear(date.start, date.end, {
+            cellWidth: 732,
+            start: today.addYears(-1).startOfYear(),
+            end: today.addYears(1).endOfYear()
+        });
+    });
+
+    it(`should has correct view start`, () => {
+        const startOfDay = ganttViewYear.startOf(date.start.date).getUnixTime();
+        expect(startOfDay).toEqual(new GanttDate('2020-01-01 00:00:00').getUnixTime());
+    });
+
+    it(`should has correct view end`, () => {
+        const endOfDay = ganttViewYear.endOf(date.end.date).getUnixTime();
+        expect(endOfDay).toEqual(new GanttDate('2020-12-31 23:59:59').getUnixTime());
+    });
+
+    it(`should has correct cell width`, () => {
+        const yearCellWidth = ganttViewYear.getDayOccupancyWidth(date.start.date);
+        expect(yearCellWidth).toEqual(2);
+    });
+
+    it(`should has correct primary width`, () => {
+        const yearPrimaryWidth = ganttViewYear.getPrimaryWidth();
+        expect(yearPrimaryWidth).toEqual(732);
+    });
+
+    it(`should has correct primary date points`, () => {
+        const yearPoints = ganttViewYear.getPrimaryDatePoints();
+        expect(yearPoints.length).toBe(1);
+    });
+
+    it(`should has correct secondary date points`, () => {
+        const yearPoints = ganttViewYear.getSecondaryDatePoints();
+        expect(yearPoints.length).toBe(1);
+    });
+});

package/packages/gantt/src/views/view.ts

@@ -0,0 +1,186 @@
+import { GanttDate, differenceInDays, GanttDateUtil } from '../utils/date';
+import { GanttDatePoint } from '../class/date-point';
+import { BehaviorSubject } from 'rxjs';
+
+export const primaryDatePointTop = 18;
+
+export const secondaryDatePointTop = 36;
+
+export interface GanttViewDate {
+    date: GanttDate;
+    isCustom?: boolean;
+}
+
+export interface GanttViewOptions {
+    start?: GanttDate;
+    end?: GanttDate;
+    min?: GanttDate;
+    max?: GanttDate;
+    cellWidth?: number;
+    addAmount?: number;
+    addUnit?: GanttDateUtil;
+}
+
+const viewOptions: GanttViewOptions = {
+    min: new GanttDate().addYears(-1).startOfYear(),
+    max: new GanttDate().addYears(1).endOfYear()
+};
+
+export abstract class GanttView {
+    start$: BehaviorSubject<GanttDate>;
+
+    end$: BehaviorSubject<GanttDate>;
+
+    get start() {
+        return this.start$.getValue();
+    }
+
+    get end() {
+        return this.end$.getValue();
+    }
+
+    primaryDatePoints: GanttDatePoint[];
+
+    secondaryDatePoints: GanttDatePoint[];
+
+    width: number;
+
+    cellWidth: number;
+
+    primaryWidth: number;
+
+    showTimeline = true;
+
+    showWeekBackdrop: boolean;
+
+    options: GanttViewOptions;
+
+    constructor(start: GanttViewDate, end: GanttViewDate, options: GanttViewOptions) {
+        this.options = Object.assign({}, viewOptions, options);
+        const startDate = start.isCustom
+            ? this.startOf(start.date)
+            : this.startOf(start.date.value < this.options.start.value ? start.date : this.options.start);
+        const endDate = end.isCustom
+            ? this.endOf(end.date)
+            : this.endOf(end.date.value > this.options.end.value ? end.date : this.options.end);
+        this.start$ = new BehaviorSubject<GanttDate>(startDate);
+        this.end$ = new BehaviorSubject<GanttDate>(endDate);
+        this.initialize();
+    }
+
+    abstract startOf(date: GanttDate): GanttDate;
+
+    abstract endOf(date: GanttDate): GanttDate;
+
+    // 获取一级时间网格合并后的宽度
+    abstract getPrimaryWidth(): number;
+
+    // 获取当前视图下每一天占用的宽度
+    abstract getDayOccupancyWidth(date: GanttDate): number;
+
+    // 获取一级时间点（坐标，显示名称）
+    abstract getPrimaryDatePoints(): GanttDatePoint[];
+
+    // 获取二级时间点（坐标，显示名称）
+    abstract getSecondaryDatePoints(): GanttDatePoint[];
+
+    protected getDateIntervalWidth(start: GanttDate, end: GanttDate) {
+        let result = 0;
+        const days = differenceInDays(end.value, start.value);
+        for (let i = 0; i < Math.abs(days); i++) {
+            result += this.getDayOccupancyWidth(start.addDays(i));
+        }
+        result = days >= 0 ? result : -result;
+        return Number(result.toFixed(3));
+    }
+
+    protected initialize() {
+        this.primaryDatePoints = this.getPrimaryDatePoints();
+        this.secondaryDatePoints = this.getSecondaryDatePoints();
+        this.width = this.getWidth();
+        this.cellWidth = this.getCellWidth();
+        this.primaryWidth = this.getPrimaryWidth();
+    }
+
+    addStartDate() {
+        const start = this.startOf(this.start.add(this.options.addAmount * -1, this.options.addUnit));
+        if (start.value >= this.options.min.value) {
+            const origin = this.start;
+            this.start$.next(start);
+            this.initialize();
+            return { start: this.start, end: origin };
+        }
+        return null;
+    }
+
+    addEndDate() {
+        const end = this.endOf(this.end.add(this.options.addAmount, this.options.addUnit));
+        if (end.value <= this.options.max.value) {
+            const origin = this.end;
+            this.end$.next(end);
+            this.initialize();
+            return { start: origin, end: this.end };
+        }
+        return null;
+    }
+
+    updateDate(start: GanttDate, end: GanttDate) {
+        start = this.startOf(start);
+        end = this.endOf(end);
+        if (start.value < this.start.value) {
+            this.start$.next(start);
+        }
+        if (end.value > this.end.value) {
+            this.end$.next(end);
+        }
+        this.initialize();
+    }
+
+    // 获取View的宽度
+    getWidth() {
+        return this.getCellWidth() * this.secondaryDatePoints.length;
+    }
+
+    // 获取单个网格的宽度
+    getCellWidth() {
+        return this.options.cellWidth;
+    }
+
+    // 获取当前时间的X坐标
+    getTodayXPoint(): number {
+        const toady = new GanttDate().startOfDay();
+        if (toady.value > this.start.value && toady.value < this.end.value) {
+            const x = this.getXPointByDate(toady) + this.getDayOccupancyWidth(toady) / 2;
+            return x;
+        } else {
+            return null;
+        }
+    }
+
+    // 获取指定时间的X坐标
+    getXPointByDate(date: GanttDate) {
+        return this.getDateIntervalWidth(this.start, date);
+    }
+
+    // 根据X坐标获取对应时间
+    getDateByXPoint(x: number) {
+        const indexOfSecondaryDate = Math.floor(x / this.getCellWidth());
+        const matchDate = this.secondaryDatePoints[indexOfSecondaryDate];
+        const dayWidth = this.getDayOccupancyWidth(matchDate?.start);
+        if (dayWidth === this.getCellWidth()) {
+            return matchDate?.start;
+        } else {
+            const day = Math.floor((x % this.getCellWidth()) / dayWidth) + 1;
+            if (this.getCellWidth() / dayWidth === 7) {
+                return matchDate?.start.addDays(day);
+            }
+            return matchDate?.start.setDate(day);
+        }
+    }
+
+    // 获取指定时间范围的宽度
+    getDateRangeWidth(start: GanttDate, end: GanttDate) {
+        // addSeconds(1) 是因为计算相差天会以一个整天来计算 end时间一般是59分59秒不是一个整天，所以需要加1
+        return this.getDateIntervalWidth(start, end.addSeconds(1));
+    }
+}

package/packages/gantt/src/views/week.ts

@@ -0,0 +1,66 @@
+import { GanttDatePoint } from '../class/date-point';
+import { eachWeekOfInterval, GanttDate } from '../utils/date';
+import { GanttView, GanttViewDate, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop } from './view';
+
+const viewOptions: GanttViewOptions = {
+    cellWidth: 280,
+    start: new GanttDate().startOfYear().startOfWeek({ weekStartsOn: 1 }),
+    end: new GanttDate().endOfYear().endOfWeek({ weekStartsOn: 1 }),
+    addAmount: 1,
+    addUnit: 'month'
+};
+
+export class GanttViewWeek extends GanttView {
+    constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
+        super(start, end, Object.assign({}, viewOptions, options));
+    }
+
+    startOf(date: GanttDate) {
+        return date.startOfWeek({ weekStartsOn: 1 });
+    }
+
+    endOf(date: GanttDate) {
+        return date.endOfWeek({ weekStartsOn: 1 });
+    }
+
+    getPrimaryWidth() {
+        return this.getCellWidth();
+    }
+
+    getDayOccupancyWidth(): number {
+        return this.cellWidth / 7;
+    }
+
+    getPrimaryDatePoints(): GanttDatePoint[] {
+        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.addSeconds(1).value }, { weekStartsOn: 1 });
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < weeks.length; i++) {
+            const weekStart = new GanttDate(weeks[i]);
+            const increaseWeek = weekStart.getDaysInMonth() - weekStart.getDate() >= 3 ? 0 : 1;
+            const point = new GanttDatePoint(
+                weekStart,
+                weekStart.addWeeks(increaseWeek).format('yyyy年'),
+                this.getCellWidth() / 2 + i * this.getCellWidth(),
+                primaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+
+    getSecondaryDatePoints(): GanttDatePoint[] {
+        const weeks = eachWeekOfInterval({ start: this.start.value, end: this.end.value });
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < weeks.length; i++) {
+            const start = new GanttDate(weeks[i]);
+            const point = new GanttDatePoint(
+                start,
+                `第${start.format('w')}周`,
+                i * this.getCellWidth() + this.getCellWidth() / 2,
+                secondaryDatePointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+}

package/packages/gantt/src/views/year.ts

@@ -0,0 +1,62 @@
+import { GanttView, GanttViewOptions, primaryDatePointTop, secondaryDatePointTop, GanttViewDate } from './view';
+import { GanttDate } from '../utils/date';
+import { GanttDatePoint } from '../class/date-point';
+import { eachYearOfInterval, differenceInCalendarYears } from 'date-fns';
+
+const viewOptions: GanttViewOptions = {
+    cellWidth: 480,
+    start: new GanttDate().addYears(-2).startOfYear(),
+    end: new GanttDate().addYears(2).endOfYear(),
+    addAmount: 1,
+    addUnit: 'year'
+};
+
+export class GanttViewYear extends GanttView {
+    constructor(start: GanttViewDate, end: GanttViewDate, options?: GanttViewOptions) {
+        super(start, end, Object.assign({}, viewOptions, options));
+    }
+
+    startOf(date: GanttDate) {
+        return date.startOfYear();
+    }
+
+    endOf(date: GanttDate) {
+        return date.endOfYear();
+    }
+
+    getPrimaryWidth() {
+        return this.getCellWidth();
+    }
+
+    getDayOccupancyWidth(date: GanttDate): number {
+        return this.cellWidth / date.getDaysInYear();
+    }
+
+    getPrimaryDatePoints(): GanttDatePoint[] {
+        const years = eachYearOfInterval({ start: this.start.value, end: this.end.value });
+        const points: GanttDatePoint[] = [];
+        for (let i = 0; i < years.length; i++) {
+            const start = new GanttDate(years[i]);
+            const point = new GanttDatePoint(start, ``, this.getCellWidth() / 2 + i * this.getCellWidth(), primaryDatePointTop);
+            points.push(point);
+        }
+        return points;
+    }
+
+    getSecondaryDatePoints(): GanttDatePoint[] {
+        const years = differenceInCalendarYears(this.end.value, this.start.value);
+        const points: GanttDatePoint[] = [];
+        const pointTop = 27;
+        for (let i = 0; i <= years; i++) {
+            const start = this.start.addYears(i);
+            const point = new GanttDatePoint(
+                start,
+                `${start.format('yyyy')}年`,
+                i * this.getCellWidth() + this.getCellWidth() / 2,
+                pointTop
+            );
+            points.push(point);
+        }
+        return points;
+    }
+}

package/packages/gantt/tsconfig.lib.json

@@ -0,0 +1,20 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declarationMap": true,
+    "target": "es2015",
+    "declaration": true,
+    "inlineSources": true,
+    "types": [],
+    "lib": ["dom", "es2018"]
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableResourceInlining": true,
+  },
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
+}

package/packages/gantt/tsconfig.lib.prod.json

@@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}

package/packages/gantt/tsconfig.schematics.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "lib": ["es2018", "dom"],
+    "declaration": true,
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
+    "rootDir": "schematics",
+    "outDir": "../../dist/gantt/schematics",
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "target": "es6",
+    "types": ["jasmine", "node"]
+  },
+  "include": ["schematics/**/*"],
+  "exclude": ["schematics/*/files/**/*"]
+}

package/packages/gantt/tsconfig.spec.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}

package/packages/gantt/tslint.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tslint.json",
+  "rules": {
+    "directive-selector": [
+      true,
+      "attribute",
+      "ngx",
+      "camelCase"
+    ],
+    "component-selector": [
+      true,
+      "element",
+      "ngx",
+      "gantt",
+      "kebab-case"
+    ]
+  }
+}

package/scss-bundle.config.json

@@ -0,0 +1,7 @@
+{
+  "bundlerOptions": {
+    "entryFile": "./packages/gantt/src/styles/index.scss",
+    "rootDir": "./",
+    "outFile": "dist/gantt/main.bundle.scss"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2015",
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"],
+    "paths": {
+      "ngx-gantt": ["packages/gantt/src/public-api.ts"],
+      "ngx-gantt/*": ["packages/gantt/src/*"]
+    }
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "skipLibCheck": true
+  }
+}