Refactor core.layouts

[kurkle]

Inspired by #6300, took another look at layouts.

Small changes hidden in a huge refactor :)

• include margins in padding, not just the difference
• consider padding in addition to minimum box sizes after step 4
  • this reduces chart area from sides where there are no boxes and some axis requires padding there
• use minRotation instead of maxRotation in _getLabelSize for vertical time scale.
  • maxRotation defaults to 50, but vertical axis ticks are only rotated to minRotation.
• changed label format for a test block because ff / chrome kept ending up with different ticks.

This might be a bit faster than master, due to using for instead of helpers.each and caching stuff to a "layout box" container.

CodePen

Closes: #6300

[kurkle]

Thanks for the reviews @benmccann!

I did another round around this, largely based on your comments. I also combined some functions, although CC now complains about them. But I don't think splitting to more functions makes it really simpler.

[benmccann]

I think that chartArea is mutated while the rest are read-only constants. What if we take chartArea out of this and pass it separately and then call Object.freeze on params. I think that would help a lot in keeping track of which variables change between function calls.

I also wonder if we need to keep track of chartArea. It seems like there's a lot of complexity in keeping outerDims and chartArea in sync with each other and the boxes at all times. But isn't chartArea.w just outerWidth - outerDims.left - outerDims.right? I think it'd be massively simpler if we just had to worry about keeping outerDims updated. I think we do a pretty good job keeping outerDims.left updated, but there might be a couple places where we skip updating outerDims.right and so we'd have to check that we always keep it updated in order to make that work

[benmccann]

@kurkle I think this is the only comment I had that hasn't been addressed yet. I resolved the rest.

I'd like if we could at least add a comment saying that w and h are the only mutable properties and the rest are read-only or possibly we could go further as I mentioned above

Besides that, this PR looks good to me. Thank you so much for all the work on this. I'm very excited about it!

[kurkle]

I'll take another look at this later, because I feel you are right and this part can be simplified.

[kurkle]

@benmccann comments made me realize this can be done with a round less of updates.
This can probably be re-arranged to be a lot simpler still.

[kurkle]

Noticed that getPixelForTick gets called with -1 in some of tests (when there is no data).
This results in weird coordinates (and thus padding). Updated all implementations to return null if index is out of bounds.

[benmccann]

looks pretty good to me. I'm quite excited about this! just a few minor comments (in addition to a few from the last round that haven't been responded to)

[nagix]

When the x axis is a category scale, and the legend is on the left, the second tick label sometimes disappears.

{
    type: 'line',
    data: {
        labels: ['ABCDEFG', 'ABCDEFG'],
        datasets: [{
            data: [0, 1]
        }]
    },
    options: {
        responsive: false,
        legend: {
            display: true,
            position: 'left'
        }
    }
}

Canvas width: 350px

Canvas width: 400px

Canvas width: 450px

[kurkle]

Thanks @nagix for testing!

Fixed, _autoSkip was still considering paddings, and its none of scales business really.

I think quite a lot of tests should still be written to complete these changes.

[nagix]

The left padding of the legend is inconsistent.

{
    type: 'line',
    data: {
        labels: ['ABCDEFG', 'ABCDEFG', 'ABCDEFG', 'ABCDEFG'],
        datasets: [{
            data: [0, 1, 2, 3]
        }]
    },
    options: {
        responsive: false,
        legend: {
            display: true,
            position: 'left'
        }
    }
}

Canvas width: 500px, height: 150px

Canvas width: 500px, height: 100px

Canvas width: 300px, height: 100px

Canvas width: 300px, height: 80px

[nagix]

Maybe the first and second update calls for y-axis are generating different tick labels...

[kurkle]

Update (fixes wrong padding of legend): removed the margins logic from scales. Its already handled by layout.
Another thing removed is fullWidth, but I'm not sure I get the use case it was made for.

If I these changes broke something, then we are missing tests 😄

[nagix]

The legend is not center-aligned.

{
    type: 'line',
    data: {
        labels: ['ABCDEFG', 'ABCDEFG'],
        datasets: [{
            data: [0, 1]
        }]
    },
    options: {
        responsive: false
    }
}

Canvas width: 200px, height: 100px

Canvas width: 200px, height: 100px

[kurkle]

Thanks again, @nagix! Broke that in previous commit. Fixed now.

[benmccann]

There's one currently failing test

[nagix]

@kurkle Thank you for the fix. One concern about getting rid of margins is that it has been a public property for long time and it might break custom scales that are using it. Is it possible to keep it for backward compatibility?

I also feel that the name scale.padding{Top|Right|Bottom|Left} is confusing because it is actually a margin outside the scale rectangle, not a padding inside. However, they are also public properties, so we shouldn't touch them.