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:
Minimum script required:
; name: 'app' components: vRadar: Radar { 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:
; name: 'app' components: vRadar: Radar { 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 }