vue-radar v0.1.5

V-Radar

This is a Vue component, you can create a radar diagramm with it. Find it on Github !

How to install it:

npm install vue-radar

Import it where you need it and don't forget to add it to your components object.

How to use it:

You need to provide statistics, polycolor, radar and scale data to use the v-radar component.

Example:

template:

<v-radar
    :stats="statistics"
    :polycolor="polycolor"
    :radar="radar"
    :scale="scale">
</v-radar>

Minimum script required:

import Radar from 'vue-radar'

new Vue({
    components: {
        'radar': Radar
    },
    data: {
        radar: {},                          // empty object is mandatory
        scale: {},                          // empty object is mandatory
        stats: [                            // at least 3 stats are required here
            {
                name: 'stat1',              // string
                value: 12,                  // int
            },
            {
                name: 'stat2',  
                value: 77,      
            },
            {
                name: 'stat3',
                value: 44,
            },
        ],
        polycolor: 'rgba(250, 100, 50, .5)' // any css format is usable (hexa, rgb, rgba...)
    },
})

Full data available:

import Radar from 'vue-radar'

new Vue({
    components: {
        'radar': Radar
    },
    data: {
        radar: {
            size: '400',                                // pixel unit
            viewbox: '1000',                            // unit used inside the svg (here 400px = 1000 unités)
            radius: '350',                              // same unit than above (diamètre = 900), keep the radius < (viewbox / 2)
            structure: {
                external: {                             // external stroke of the structure's polygon
                    strokeColor: 'rgba(0, 0, 0, 1)',    // color (any css format is usable (hexa, rgb, rgba...))
                    strokeWidth: '4',                   // pixel unit
                },
                internals: {                            // internals stroke of the structure's polygon (one every 10%)
                    strokeColor: 'rgba(0, 0, 0, .3)',   // color (any css format is usable (hexa, rgb, rgba...))
                    strokeWidth: '1',                   // pixel unit
                },
                average: {                              // average polygon (placed at 50%)
                    strokeColor: 'rgba(0, 0, 0, 1)',    // stroke color (any css format is usable (hexa, rgb, rgba...))
                    strokeWidth: '2',                   // pixel unit
                    fillColor: 'rgba(0, 0, 0, .5)',     // polygon color (any css format is usable (hexa, rgb, rgba...))
                },
            },
            lines: {                                    // lines from center to summits
                strokeColor: 'rgba(0, 0, 0, .3)',       // color (any css format is usable (hexa, rgb, rgba...))
                strokeWidth: '1',                       // pixel unit
            }
        },
        scale: {                                        // scales of corresponding statistic
            stat1: 24,                                  // key must be equal to the corresponding statistic, lowercased and without accents
            stat2: 100,
            stat3: 100,
        },
        stats: [
            {
                name: 'stat1',                          // string
                value: 12,                              // int
                shortName: 'A',                         // The two first letters are used to be display next to their corresponding summits
            },
            {
                name: 'stat2',
                value: 77,
                shortName: 'Super stat'
            },
            {
                name: 'stat3',
                value: 44,
                shortName: 'st'
            },
        ],
        polycolor: 'rgba(250, 100, 50, .5)'             // color (any css format is usable (hexa, rgb, rgba...))
    },
})