QML создание типов

Давно программируя на Qt мне стало интересно разобраться с Qml. Одним из первых вопросов встал вопрос создания типов элементов. Пишу напоминалку.
В этом примере, я буду использовать в качестве типа круговую диаграмму, инструкцию по созданию которой я нашел тут.

Результат выполнения программы

По шагам:
1. Добавляем в проект новый файл qml.
2. Пишем в созданный файл код, описывающий элемент интерфейса.
Для добавления свойств в тип объекта используется синтаксис (БНФ расширенная):
property <type> <name>[: <default value>]
Для добавления сигналов:
signal <name> [(<arguments>)]
arguments => <type> <name>[,<arguments>]

Canvas {
    id:canvas

    //Property adding
    property ListModel model: ListModel{}

    smooth: true
    onPaint: {
        var ctx = canvas.getContext("2d")
        ctx.clearRect(0, 0, width, height)
        var centerX = width / 2
        var centerY = height / 2
        var radius = 0.9 * Math.min(width, height) / 2
        var startAngle = 0.0
        var endAngle = 0.0
        var angleFactor = 2 * Math.PI / modelSum()
        ctx.lineWidth = 0
        ctx.strokeStyle = Qt.lighter("#000000")
        for (var index = 0; index < model.count; index++) {
            startAngle = endAngle
            endAngle = startAngle + model.get(index).value * angleFactor
            ctx.fillStyle = model.get(index).color
            ctx.beginPath()
            ctx.moveTo(centerX, centerY)
            ctx.arc(centerX, centerY, radius, startAngle, endAngle, false)
            ctx.lineTo(centerX, centerY)
            ctx.fill()
            ctx.stroke()
        }
    }
    function modelSum() {
        var modelSum = 0
        for (var index = 0; index < model.count; index++) {
            modelSum += model.get(index).value
        }
        return modelSum
    }
}

3. Можем создавать элементы этого типа в main.qml

Rectangle {
    width: 360
    height: 360
    color: "#BBBBBB"
    id: root

    ListModel {
        id:listModel
        ListElement { label:"Scientific Research";
        value:21; color:"#777777" }
        ListElement { label:"Engineering & Design";
        value:18; color:"#6666FF" }
        ListElement { label:"Automotive";
        value:14; color:"#66FF66" }
    }

    Chart {
        model:ListModel {
                    ListElement { label:"Scientific Research";
                    value:21; color:"#777777" }
                    ListElement { label:"Engineering & Design";
                    value:18; color:"#666666" }
                    ListElement { label:"Automotive";
                    value:14; color:"#66FF66" }
        }

        id:testChart
        width:100
        height:100
    }

    Chart {
        id:testChart1
        model:listModel
        width:100
        height:100
        x:100
    }

}