import * as d3 from "d3"
import * as fs from "fs"
import * as jsdom from "jsdom"
const CANVAS_SIZE = 300
const RADIUS_SCALE = 24
const STROKE = 1
const axes = ["identity", "authentication", "posts", "syndication", "posting UI",
"navigation", "search", "aggregation", "interactivity", "security",
"responses"]
const drawLevel = (level) => {
const results = scores[level - 1]
const radius = RADIUS_SCALE * (level - 1) + (RADIUS_SCALE * 1.5)
const diameter = radius * 2
const g = svg.append('g')
.attr('transform', 'translate(' + CANVAS_SIZE/2 + ',' + CANVAS_SIZE/2 + ')')
const colors = ['#008000', '#ffa500', '#666']
const palette = []
for (let i = 0; i < 10; i++) {
palette[i] = colors[results[i][0]]
}
const color = d3.scaleOrdinal(palette)
const pie = d3.pie()
const arc = d3.arc()
.innerRadius(0)
.outerRadius(radius - STROKE)
const arcs = g.selectAll('arc')
.data(pie([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]))
.enter()
.append('g')
.attr('class', 'arc')
.attr('fill', '#222')
arcs.append('a')
.attr('href', d => { return `/${domain.replace('_', '.')}#${level}-${axes[d.index]}` })
.attr('target', '_top')
.append('path')
.attr('fill', (d, i) => {
return color(i)
})
.attr('d', arc)
}
const domain = process.argv[2]
const scores = JSON.parse(fs.readFileSync(`sites/${domain}/scores.json`));
const dom = new jsdom.JSDOM('<!DOCTYPE html><body></body>')
const body = d3.select(dom.window.document.querySelector('body'))
const svg = body.append('svg')
.attr('width', CANVAS_SIZE)
.attr('height', CANVAS_SIZE)
.attr('xmlns', 'http://www.w3.org/2000/svg')
drawLevel(5)
drawLevel(4)
drawLevel(3)
drawLevel(2)
drawLevel(1)
fs.writeFileSync(`sites/${domain}/scoreboard.svg`, body.html())
