The pictures below best explain what I am trying to do:
The top image is what I currently have, but the bottom image is what I would like to have. Therefore, I have two questions:
- How do I add a vertical line on the first textblock in the graduated panel (see right before Feb 16, 2020)?
- How do I indent/pad the text in this same textblock so that it won’t be touching the line that would be added?
Here is my code:
var dateScale =
$(go.Node, "Graduated",
{
background: headerColor,
height: 50,
graduatedTickUnit: cellWidth,
layerName: "Foreground",
isInDocumentBounds: false,
pickable: false
},
// draws the lines separating the dates and days
$(go.Shape,
{
stroke: strokeColor,
geometryString: "M0 0 H" + scaleWidth(canvasWidth)
}
),
$(go.Shape,
{
stroke: strokeColor,
geometryString: "M 0 0 V25", interval: 7
}
),
$(go.Shape,
{
stroke: strokeColor,
geometryString: "M 0 12 V25", interval: 1
}
),
// creates the dates textblock
$(go.TextBlock,
{
interval: interval,
name: "dates",
font: "10pt sans-serif",
stroke: textColor,
height: 25,
width: weekWidth,
verticalAlignment: go.Spot.Center,
alignmentFocus: new go.Spot(0, 0, 0, 25),
graduatedFunction: function(v) {
var d = new Date(Date.parse(startDate));
if (ganttView == "weekly") {
d.setDate(d.getDate() + Math.ceil(v / 25 * 7));
return d.toLocaleDateString("en-US", { month: "2-digit", day: "2-digit"});
} else {
d.setDate(d.getDate() + v / 25);
return d.toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric" });
}
}
}
),
// creates the days textblock
$(go.TextBlock,
{
name: "days",
font: "10pt sans-serif",
stroke: textColor,
height: 25,
width: cellWidth,
verticalAlignment: go.Spot.Center,
alignmentFocus: new go.Spot(0, 0, 0, 0),
textAlign: "center",
graduatedFunction: function(v) {
if (ganttView == "weekly") return "";
var d = new Date(Date.parse(startDate));
d.setDate(d.getDate() + v / 25);
var day = d.toLocaleDateString("en-US", { weekday: "short" });
day = day == "Sun" ? "Su" : (day == "Thu" ? "Th" : d.toLocaleDateString("en-US", { weekday: "narrow" }));
return day;
}
}
),
// creates extra textblock to fill in the missing first day
$(go.TextBlock,
{
interval: interval,
name: "sundays",
font: "10pt sans-serif",
stroke: textColor,
height: 25,
width: cellWidth,
verticalAlignment: go.Spot.Center,
alignmentFocus: new go.Spot(0, 0, 0, 0),
textAlign: "center",
graduatedFunction: function() { return ganttView == "weekly" ? "" : "Su"; }
}
)
)