angular-gantt-chart
Version:
This library can be used in Angular 2 application for creating responsive gantt chart. The chart component consists of inline SVG. The component accepts input data from child component using input decorator of Angular 2.
307 lines • 13.3 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var rxjs_1 = require("rxjs");
var GanttChartComponent = (function () {
function GanttChartComponent() {
var _this = this;
this.defaultData = {
"date": "2017-02-09",
"taskArray": [
{
"task": "Breakfast",
"startTime": "8:30am",
"endTime": "11:00am"
},
]
};
this.lineColor = "#808080"; //for setting color of line
this.labelColor = "";
this.rectColor = "#87ceeb"; //for setting color of rectangle in SVG
this.mFlag = 0; //Neutralizing the mobile factors in desktop
this.dFlag = 1; //Neutralizing the dekstop factors in mobile
this.startPos = 200; //Start Poation of rectange and grid
this.xAxisGap = 40; //gap between grid Lines
this.rectHeight = 35; //gap between two rectangle
this.ylabelAdjust = 15;
this.labelHeight = 35;
this.mobileRect = 0;
this.fontSize = "16px";
this.truncateLength = 10;
this.areaFacor = 11;
rxjs_1.Observable.fromEvent(window, 'resize')
.debounceTime(100)
.subscribe(function (event) {
_this.reRender(event);
});
}
/**
* Represents a function to change viewBox propery of svg in mobile and dekstop
*/
GanttChartComponent.prototype.reRender = function (event) {
var WindowWidth = event.currentTarget.innerWidth;
if (WindowWidth < 767) {
this.startPos = 10;
this.rectHeight = 70;
this.viewHeight = this.finalTask.length * this.rectHeight + 20;
this.viewBox = "0 0 600 " + this.viewHeight;
this.labelHeight = 20;
this.ylabelAdjust = -10;
this.mobileRect = 30;
this.fontSize = "20px";
this.dFlag = 0;
this.mFlag = 1;
this.areaFacor = 11;
}
else {
this.startPos = 200;
this.viewHeight = this.finalTask.length * 35 + 20;
this.viewBox = "0 0 800 " + this.viewHeight;
this.labelHeight = 35;
this.mobileRect = 0;
this.rectHeight = 35;
this.fontSize = "16px";
this.dFlag = 1;
this.mFlag = 0;
this.areaFacor = 11;
this.ylabelAdjust = 15;
}
if (WindowWidth < 450) {
this.fontSize = "28px";
this.areaFacor = 15;
}
};
GanttChartComponent.prototype.ngOnInit = function () {
this.makeGanttChart(this.chartData, this.chartOptions);
var WindowWidth = window.innerWidth;
if (WindowWidth < 767) {
this.startPos = 10;
this.rectHeight = 70;
this.viewHeight = this.finalTask.length * this.rectHeight + 20;
this.viewBox = "0 0 600 " + this.viewHeight;
this.labelHeight = 20;
this.dFlag = 0;
this.mFlag = 1;
this.mobileRect = 30;
this.fontSize = "20px";
this.areaFacor = 11;
this.ylabelAdjust = -10;
}
else {
this.viewHeight = this.finalTask.length * 35 + 20;
this.viewBox = "0 0 800 " + this.viewHeight;
}
if (WindowWidth < 450) {
this.fontSize = "28px";
this.areaFacor = 15;
}
};
/**
* Represents a function to convert 12 hour format timing to 24 hour format
*/
GanttChartComponent.prototype.convertTo24Hour = function (time) {
var hours = parseInt(time.substr(0, 2));
if (time.indexOf('am') != -1 && hours == 12) {
time = time.replace('12', '0');
}
if (time.indexOf('am') != -1 && hours < 10) {
time = time.replace(time, '0' + time);
}
if (time.indexOf('pm') != -1 && hours < 12) {
time = time.replace(hours, (hours + 12));
}
return time.replace(/(am|pm)/, '');
};
GanttChartComponent.prototype.findmaxTime = function (max, endTime) {
var time = endTime.split(":");
var HH = Number(time[0]);
var MM = Number(time[1]);
var time2 = HH + MM / 60;
if (max < time2) {
max = time2;
return max;
}
else {
return max;
}
};
GanttChartComponent.prototype.findminTime = function (min, endTime) {
var time = endTime.split(":");
var HH = Number(time[0]);
var MM = Number(time[1]);
var time2 = HH + MM / 60;
if (min > time2) {
min = time2;
return min;
}
else {
return min;
}
};
GanttChartComponent.prototype.findNumberOfTicks = function (min, max) {
var maxInterval = Math.ceil(max - min);
if (maxInterval < 5) {
var ticks = {
"noOfTicks": maxInterval * 4,
"tickWidth": 0.25
};
return ticks;
}
else if (maxInterval >= 5 && maxInterval <= 8) {
var ticks = {
"noOfTicks": maxInterval * 2,
"tickWidth": 0.5
};
return ticks;
}
else if (maxInterval > 16) {
var ticks = {
"noOfTicks": Math.ceil(maxInterval / 2),
"tickWidth": 2
};
return ticks;
}
else {
var ticks = {
"noOfTicks": maxInterval,
"tickWidth": 1
};
return ticks;
}
};
GanttChartComponent.prototype.makeGanttChart = function (ganttChartData, options) {
if (options.rectColor !== undefined)
this.rectColor = options.rectColor;
if (options.lineColor !== undefined) {
this.lineColor = options.lineColor;
}
if (options.labelColor !== undefined) {
this.labelColor = options.labelColor;
}
if (ganttChartData.taskArray === undefined || ganttChartData.taskArray.length === 0)
this.convertTimeScaleToSpace(this.defaultData);
else
this.convertTimeScaleToSpace(ganttChartData);
};
GanttChartComponent.prototype.convertTimeScaleToSpace = function (ganttChartData) {
var taskArray = [];
var taskarray2 = [];
var displayInterval = [];
var min = 23, max = 0;
var ticksObject;
var count = 0;
var hour;
var minute;
taskArray = ganttChartData.taskArray;
for (var _i = 0, taskArray_1 = taskArray; _i < taskArray_1.length; _i++) {
var task = taskArray_1[_i];
var taskObject = {};
var startTime24HourFormat = this.convertTo24Hour(task.startTime);
var endTime24HourFormat = this.convertTo24Hour(task.endTime);
var startTime = startTime24HourFormat.split(":");
var startPoint = Number(startTime[0]) + Number(startTime[1]) / 60;
var endTime = endTime24HourFormat.split(":");
var endPoint = Number(endTime[0]) + Number(endTime[1]) / 60;
var width = endPoint - startPoint;
taskObject = {
"taskLabel": task.task,
"startPoint": startPoint,
"width": width,
};
taskarray2.push(taskObject);
max = this.findmaxTime(max, endTime24HourFormat);
min = this.findminTime(min, startTime24HourFormat);
count++;
}
ticksObject = this.findNumberOfTicks(min, max);
for (var i = 0; i < count; i++) {
taskarray2[i].startPoint = taskarray2[i].startPoint - min;
}
this.finalTask = taskarray2;
/*X Axis Interval Display */
hour = Math.floor(min);
minute = (min - hour) * 60;
if (hour > 12) {
hour = hour - 12;
}
if (minute === 0) {
displayInterval.push(hour);
}
else {
displayInterval.push(hour + ":" + minute);
}
for (var i = 0; i < Number(ticksObject.noOfTicks); i++) {
if (Number(ticksObject.tickWidth) === 0.25) {
this.span = 4;
minute = minute + 15;
if (minute === 60) {
hour = hour + 1;
minute = 0;
}
}
else if (Number(ticksObject.tickWidth) == 0.50) {
this.span = 2;
minute = minute + 30;
if (minute == 60) {
hour = hour + 1;
minute = 0;
}
}
else if (Number(ticksObject.tickWidth) === 1) {
this.span = 1;
hour = hour + 1;
}
else if (Number(ticksObject.tickWidth) == 2) {
this.span = 0.5;
hour = hour + 2;
}
if (hour > 12) {
hour = hour - 12;
}
if (minute === 0) {
if (hour === 12) {
displayInterval.push(hour + "P");
}
else
displayInterval.push(hour);
}
else {
if (hour === 12 && minute === 0) {
displayInterval.push(hour + "P");
}
else
displayInterval.push(hour + ":" + minute);
}
}
this.finalInterval = displayInterval;
this.heightSpan = this.finalTask.length;
};
return GanttChartComponent;
}());
__decorate([
core_1.Input('chartOptions'),
__metadata("design:type", Object)
], GanttChartComponent.prototype, "chartOptions", void 0);
__decorate([
core_1.Input('chartData'),
__metadata("design:type", Object)
], GanttChartComponent.prototype, "chartData", void 0);
GanttChartComponent = __decorate([
core_1.Component({
selector: '[GanttChart]',
template: "\n <div class=\"date\">{{chartData.date|date:'mediumDate'}}</div>\n <div class=\"container\">\n <svg [attr.viewBox]=\"viewBox\" preserveAspectRatio=\"xMaxYMin meet\" xmlns=\"http://www.w3.org/2008/svg\" version=\"1.1\">\n <!--grid Lines-->\n <line *ngFor=\"let no of finalInterval; let i = index\" y1=\"0\" [attr.x2]=\"i*xAxisGap+startPos\" [attr.x1]=\"i*xAxisGap+startPos\" [attr.y2]=\"heightSpan*rectHeight\" [attr.stroke]=\"lineColor\" stroke-width=\"1\" />\n <!--X axis ticks-->\n <text class=\"tick\" [attr.fill]=\"labelColor\" *ngFor=\"let no of finalInterval; let i = index\" [attr.x]=\"i*xAxisGap+startPos-5\" [attr.y]=\"heightSpan*rectHeight+20\" [attr.font-size]=\"fontSize\">{{no}} </text>\n <!--Session labels-->\n <text *ngFor=\"let spec of finalTask; let i = index\" [attr.x]=\"spec.startPoint*xAxisGap*mFlag+startPos*mFlag\" [attr.y]=\"i*rectHeight+mobileRect+ylabelAdjust\" [attr.font-size]=\"fontSize\" [attr.fill]=\"labelColor\">\n {{spec.taskLabel | truncate:(spec.width*xAxisGap*span)/areaFacor*mFlag+dFlag*20}}\n <title>{{spec.taskLabel}}</title>\n </text>\n <rect *ngFor=\"let spec of finalTask; let i = index\" [attr.x]=\"spec.startPoint*xAxisGap+startPos\" [attr.y]=\"i*rectHeight+mobileRect\" [attr.fill]=\"rectColor\" [attr.width]=\"spec.width*xAxisGap*span\" height=\"30\">\n <animate attributeName=\"width\" from=\"0\" [attr.to]=\"spec.width*xAxisGap*span\" dur=\"1s\" fill=\"freeze\" />\n </rect>\n </svg>\n </div>\n ",
styles: ["\n .container{\n width:96%;\n margin:0 auto;\n padding: 10px;\n border:1px solid black;\n }\n .date{\n font-size: 24px;\n padding:10px;\n margin-left:8px;\n }\n @media screen and (max-width: 767px) {\n .tick:nth-child(odd){\n display:none;\n }\n }\n "]
}),
__metadata("design:paramtypes", [])
], GanttChartComponent);
exports.GanttChartComponent = GanttChartComponent;
//# sourceMappingURL=gantt-chart.component.js.map