Nuanced Pterodactyl Monk

    v-radar

    1.1.1 • Public • Published

    V-Radar

    global

    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:

    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
            }
        }
    }

    Install

    npm i v-radar

    DownloadsWeekly Downloads

    17

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • ngdo-pro