V-Radar

This is a Vue component, you can create a radar diagramm with it. Right now, it only takes percentage statistics, as its scale is from 0 to 100.

How to install it:

npm install v-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:

Note that the list is not part of this package.

template:

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

Minimum script required:

import Radar from '../node_modules/v-radar/Radar.vue';

export default {
    name: 'app',
    components: {
      vRadar: Radar
    },
    data () {
        return {
            radar: {}, // empty object is the minimum required
            scale: {}, // empty object is the minimum required
            statistics: { // You must provide at least 3 statistics
                wins: 54,
                losses: 21,
                draws: 25,
            },
            color: 'rgba(200, 0, 0, .5)' // color of the stat polygon, you can use any valid css color
        }
    }
}

Full data available:

import Radar from '../node_modules/v-radar/Radar.vue';

export default {
    name: 'app',
    components: {
      vRadar: Radar
    },
    data () {
        return {
            radar: {
                size: '400px', // this is the size of the diagramm
                structure: { // the structure that will contain the diagramm
                    external: { // the outer polygon of the structure, those are the defaults values
                        strokeColor: '#777',
                        strokeWidth: '4px',
                        radius: 400, // this should be less than 600 to fit the viewbox
                    },
                    internals: { // the inners polygons, one every 10% of the scale
                        strokeColor: '#DDD',
                        strokeWidth: '2px',
                    },
                    average: { // a polygon marking the average (50%) of the scale
                        strokeColor: '#DDD',
                        strokeWidth: '2px',
                        fillColor: 'rgba(0, 0, 0, .1)',
                    }
                },
                lines: { // the lines going from center to each summit of the polygon
                    strokeColor: '#777',
                    strokeWidth: '2px',
                }
            },
            scale: { // You can define the scales of each stats here, the name must be the same, default value is 100 (percentage)
                wins: 100,
                losses: 100,
                draws: 100,
            },
            statistics: { // You must provide at least 3 statistics
                wins: 54,
                losses: 21,
                draws: 25,
            },
            color: 'rgba(200, 0, 0, .5)' // the color of the stat polygon
        }
    }
}