const radar = require('svg-radar-chart')

const chart = radar({
	// columns
	battery: 'Battery Capacity',
	design: 'Design',
	useful: 'Usefulness'
}, [
	// data
	{class: 'iphone', battery: .7, design:  1, useful: .9},
	{class: 'galaxy', battery:  1, design: .6, useful: .8},
	{class: 'nexus',  battery: .8, design: .7, useful: .6}
])

const stringify = require('virtual-dom-stringify')

const svg = `
<svg version="1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
	<style>
		.axis {
			stroke-width: .2;
		}
		.scale {
			stroke-width: .2;
		}
		.shape {
			fill-opacity: .3;
		}
		.shape:hover {
			fill-opacity: .6;
		}
	</style>
	${stringify(chart)}
</svg>
`

process.stdout.write(svg)

document.querySelector('#my-chart').innerHTML = svg

const smoothing = require('svg-radar-chart/smoothing')
radar(columns, data, {
	smoothing: smoothing(.3) // tension of .3
})

const defaults = {
	size: 100, // size of the chart (including captions)
	axes: true, // show axes?
	scales: 3, // show scale circles?
	captions: true, // show captions?
	captionsPosition: 1.2, // where on the axes are the captions?
	smoothing: noSmoothing, // shape smoothing function
	axisProps: () => ({className: 'axis'}),
	scaleProps: () => ({className: 'scale', fill: 'none'}),
	shapeProps: () => ({className: 'shape'}),
	captionProps: () => ({
		className: 'caption',
		textAnchor: 'middle', fontSize: 3,
		fontFamily: 'sans-serif'
	})
}