const attributes = [{
        "label": "Radius",
        "attr": "r",
        "min": 0,
        "max": 100,
        "value": 75,
        "step": 1
    },
    {
        "label": "x-Axis Coordinate",
        "attr": "cx",
        "min": 100,
        "max": 400,
        "value": 250,
        "step": 1
    },
    {
        "label": "y-Axis Coordinate",
        "attr": "cy",
        "min": 100,
        "max": 200,
        "value": 150,
        "step": 1
    },
    {
        "label": "Stroke",
        "attr": "stroke",
        "value": "black"
    },
    {
        "label": "Fill",
        "attr": "fill",
        "value": "steelblue"
    },
    {
        "label": "Opacity",
        "attr": "opacity",
        "min": 0,
        "max": 1,
        "value": 0.7,
        "step": 0.01
    },
    {
        "label": "Fill Opacity",
        "attr": "fillOpacity",
        "min": 0,
        "max": 1,
        "value": 0.7,
        "step": 0.01
    },
    {
        "label": "Stroke Opacity",
        "attr": "strokeOpacity",
        "min": 0,
        "max": 1,
        "value": 0.7,
        "step": 0.01
    },
    {
        "label": "Stroke Width",
        "attr": "strokeWidth",
        "min": 0,
        "max": 5,
        "value": 3,
        "step": 0.01
    },
    {
        "label": "Stroke Dasharray",
        "attr": "strokeDasharray",
        "min": 0,
        "max": 50,
        "value": 0,
        "step": 0.01
    }
];

Vue.component('svg-circle', {
    template: '#svg-circle',
    props: ['attributes'],
    computed: {
        properties: function () {
            var newObj = {};
            attributes.forEach(function (d) {
                newObj[d.attr] = d.value;
            });
            return newObj;
        }
    }

});

new Vue({
    el: '#chart',
    data: function () {
        return {
            attributes: attributes
        };
    }
});