const data = [
    {
        id: '0.0',
        parent: '',
        name: 'toutes'
    },
    {
        id: 'future',
        parent: '0.0',
        name: 'prévues',
        value: 357
    },

    {
        id: 'past',
        parent: '0.0',
        name: 'finies',
        value: 1148
    },
    {
        id: '1.3',
        parent: 'future',
        name: 'NEXT',
        value: 12
    },
    {
        id: '1.1',
        parent: 'future',
        name: 'SOMEDAY',
        value: 313
    },
    {
        id: '1.2',
        parent: 'past',
        name: 'DONE',
        value: 1110
    },
    {
        id: '1.4',
        parent: 'past',
        name: 'CANCELLED',
        value: 12
    },
    {
        id: '1.5',
        parent: 'future',
        name: 'WAITING',
        value: 0
    },
    {
        id: '1.6',
        parent: 'future',
        name: 'TODO',
        value: 44
    }
];


Highcharts.chart('container', {

    chart: {
        height: '100%'
    },

    // Let the center circle be transparent
    colors: ['transparent'].concat(Highcharts.getOptions().colors),

    title: {
        text: 'Tâches par état en 2023'
    },

    subtitle: {
        text: 'Source cipherbliss.com'
    },

    series: [{
        type: 'sunburst',
        data: data,
        name: 'Root',
        allowDrillToNode: true,
        cursor: 'pointer',
        dataLabels: {
            format: '{point.name}',
            filter: {
                property: 'innerArcLength',
                operator: '>',
                value: 16
            },
            rotationMode: 'circular'
        },
        levels: [{
            level: 1,
            levelIsConstant: false,
            dataLabels: {
                filter: {
                    property: 'outerArcLength',
                    operator: '>',
                    value: 64
                }
            }
        },
            {
                level: 2,
                colorByPoint: true
            },
            {
                level: 3,
                colorVariation: {
                    key: 'brightness',
                    to: -0.5
                }
            }, {
                level: 4,
                colorVariation: {
                    key: 'brightness',
                    to: 0.5
                }
            }
        ]

    }],

    tooltip: {
        headerFormat: '',
        pointFormat: 'The population of <b>{point.name}</b> is <b>{point.value}</b>'
    }
});