Migrate a complex charts from v4 to v5

[matzeeable]

Hey!

As I know from @hustcc (#5462 (comment)), there is currently no migration guide or codemod to migrate an existing diagram from v4 to v5 and that's ok for me as there are many examples where I can learn from (e.g. area-gradient and webgl for multiple views). I also read the blog posts https://observablehq.com/@antv/g2-introduction and https://observablehq.com/@antv/g2-spec to better understand the differences between both versions. Yesterday, I spent a full day migrating existing charts and migrated 7/8 charts successfully 😎. In our project, we have one complex chart with multiple regions and areas. With the latest v4 version it looks like this:

https://codesandbox.io/p/sandbox/antv-g2-complex-chart-qz8mzx

When I tried to create the first region I already failed as the following code renders a white screen:

const chart = new Chart({
    container: ref.current,
});

chart.options({
    autoFit: true,
    height: 500,
    children: [
        {
            // First view: Net commission
            type: "view",
            region: {
                start: {
                    x: 0,
                    y: 0,
                },
                end: {
                    x: 1,
                    y: 0.55,
                },
            },
            padding: [25, PADDING.right, 60, PADDING.left],
            data: data
                .filter(({ name }) => name === "netCommissionValue")
                .map(({ date, name, value }, i, arr) => ({
                    date,
                    name,
                    value,
                    cumulates:
                        i === 0 ? value : +value + arr.slice(0, i).reduce((p, { value: c }) => p + +c, 0),
                })),
            children: [
                {
                    type: "area",
                    encode: { x: "date", y: "value" },
                    style: { fill: "linear-gradient(-90deg, white 0%, darkgreen 100%)" },
                },
                {
                    type: "line",
                    encode: { x: "date", y: "value" },
                    style: { stroke: "darkgreen", lineWidth: 2 },
                },
            ],
        },
    ],
});

Would someone please have time to help me migrate this complex chart to v5?