Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add custom border-radius setting, add baseClass setting #20

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add custom border-radius setting, add baseClass setting #20

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
93a0942
add custom border-radius setting, add baseClass setting
sedenardi Aug 16, 2016
0883571
allow custom key function
sedenardi Aug 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
91 changes: 59 additions & 32 deletions gantt-chart-d3.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,15 @@
d3.gantt = function() {
var FIT_TIME_DOMAIN_MODE = "fit";
var FIXED_TIME_DOMAIN_MODE = "fixed";

var margin = {
top : 20,
right : 40,
bottom : 20,
left : 150
};
var radius = 5;
var baseClass = '';
var selector = 'body';
var timeDomainStart = d3.time.day.offset(new Date(),-3);
var timeDomainEnd = d3.time.hour.offset(new Date(),+3);
Expand All @@ -35,7 +37,7 @@ d3.gantt = function() {
var x = d3.time.scale().domain([ timeDomainStart, timeDomainEnd ]).range([ 0, width ]).clamp(true);

var y = d3.scale.ordinal().domain(taskTypes).rangeRoundBands([ 0, height - margin.top - margin.bottom ], .1);

var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format(tickFormat)).tickSubdivide(true)
.tickSize(8).tickPadding(8);

Expand Down Expand Up @@ -67,12 +69,12 @@ d3.gantt = function() {

yAxis = d3.svg.axis().scale(y).orient("left").tickSize(0);
};

function gantt(tasks) {

initTimeDomain(tasks);
initAxis();

var svg = d3.select(selector)
.append("svg")
.attr("class", "chart")
Expand All @@ -83,74 +85,78 @@ d3.gantt = function() {
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
svg.selectAll(".chart")

var selectors = svg.selectAll(".chart")
.data(tasks, keyFunction).enter()
.append("rect")
.attr("rx", 5)
.attr("ry", 5)
.attr("class", function(d){
.attr("rx", radius)
.attr("ry", radius)
.attr("class", function(d){
if(taskStatus[d.status] == null){ return "bar";}
return taskStatus[d.status];
})
})
.attr("y", 0)
.attr("transform", rectTransform)
.attr("height", function(d) { return y.rangeBand(); })
.attr("width", function(d) {
return Math.max(1,(x(d.endDate) - x(d.startDate)));
.attr("width", function(d) {
return Math.max(1,(x(d.endDate) - x(d.startDate)));
});



if (baseClass) { selectors.classed(baseClass, true); }

svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, " + (height - margin.top - margin.bottom) + ")")
.transition()
.call(xAxis);

svg.append("g").attr("class", "y axis").transition().call(yAxis);

return gantt;

};

gantt.redraw = function(tasks) {

initTimeDomain(tasks);
initAxis();

var svg = d3.select(".chart");

var ganttChartGroup = svg.select(".gantt-chart");
var rect = ganttChartGroup.selectAll("rect").data(tasks, keyFunction);
rect.enter()

var newSelectors = rect.enter()
.insert("rect",":first-child")
.attr("rx", 5)
.attr("ry", 5)
.attr("class", function(d){
.attr("rx", radius)
.attr("ry", radius)
.attr("class", function(d){
if(taskStatus[d.status] == null){ return "bar";}
return taskStatus[d.status];
})
})
.transition()
.attr("y", 0)
.attr("transform", rectTransform)
.attr("height", function(d) { return y.rangeBand(); })
.attr("width", function(d) {
return Math.max(1,(x(d.endDate) - x(d.startDate)));
.attr("width", function(d) {
return Math.max(1,(x(d.endDate) - x(d.startDate)));
});

if (baseClass) { selectors.classed(baseClass, true); }


rect.transition()
.attr("transform", rectTransform)
.attr("height", function(d) { return y.rangeBand(); })
.attr("width", function(d) {
return Math.max(1,(x(d.endDate) - x(d.startDate)));
.attr("width", function(d) {
return Math.max(1,(x(d.endDate) - x(d.startDate)));
});

rect.exit().remove();

svg.select(".x").transition().call(xAxis);
svg.select(".y").transition().call(yAxis);

return gantt;
};

Expand Down Expand Up @@ -187,7 +193,7 @@ d3.gantt = function() {
taskTypes = value;
return gantt;
};

gantt.taskStatus = function(value) {
if (!arguments.length)
return taskStatus;
Expand Down Expand Up @@ -223,5 +229,26 @@ d3.gantt = function() {
return gantt;
};

gantt.radius = function(value) {
if (!arguments.length)
return radius;
radius = value;
return gantt;
};

gantt.baseClass = function(value) {
if (!arguments.length)
return baseClass;
baseClass = value;
return gantt;
};

gantt.keyFunction = function(value) {
if (!arguments.length)
return keyFunction
keyFunction = value;
return gantt;
}

return gantt;
};