Graduated panels with lines on both panels and padding text

@dustinormond wrote:

The pictures below best explain what I am trying to do:

image1578×1133 83.2 KB

The top image is what I currently have, but the bottom image is what I would like to have. Therefore, I have two questions:

1. How do I add a vertical line on the first textblock in the graduated panel (see right before Feb 16, 2020)?
2. 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"; }
        }
    )
)

Posts: 3

Participants: 2

Read full topic