Commit 3347e985 authored by Jan Dillenberger's avatar Jan Dillenberger

Style Radarchart

parent 20f3ce97
Pipeline #22068 failed with stage
......@@ -20,16 +20,16 @@
}
.red_bulb.traffic_light__bulb--active {
background-color: red;
background-color: hsl(0, 100%, 50%);
}
.yellow_bulb.traffic_light__bulb--active {
background-color: yellow;
background-color: hsl(51, 100%, 50%);
}
.green_bulb.traffic_light__bulb--active {
background-color: green;
background-color: hsl(120, 91%, 34%);
}
......
......@@ -61,9 +61,12 @@ function drawButtons(htmlElement, response, drawGroupChart, options={}) {
if (!groupNames.includes(group.group)) {
groupNames.push(group.group)
groupButton = document.createElement("button")
groupButton.classList.add('spitze-gs-group-button')
groupButton.innerText = group.group
groupButton.addEventListener("click", () => makeChart(htmlElement, response, group.group, drawGroupChart), false)
groupButton.addEventListener("click", function(){
assignButtonClass(this)
makeChart(htmlElement, response, group.group, drawGroupChart)
}, false)
if (subScale.groupResults.length <= 1) {
groupButton.style.display = "none"
}
......@@ -74,6 +77,17 @@ function drawButtons(htmlElement, response, drawGroupChart, options={}) {
return buttonBox
}
function assignButtonClass(stuff) {
console.log(stuff)
let buttons = document.getElementsByClassName('spitze-gs-group-button')
Array.prototype.forEach.call( buttons, button => {
button.classList.remove('active')
})
stuff.classList.add('active');
}
function hookChart(elementClass, drawGroupChart, options = {}) {
let elements = document.getElementsByClassName(elementClass)
let url, buttonBox, i = 0
......
......@@ -104,7 +104,7 @@ function drawRadarGroupArea(g, params, baseSize, groupName) {
let chartMax = computedData.chartMax
let rScale = computedData.rScale
let entityScoreKey = groupName === 'user' ? 'userScore' : 'average'
let color = groupName === 'user' ? 'green' : 'red'
let color = groupName === 'user' ? 'hsl(210, 87%, 62%)' : 'hsl(24, 100%, 50%)'
let radarLine = d3.lineRadial()
.curve(d3.curveLinearClosed)
......@@ -118,7 +118,7 @@ function drawRadarGroupArea(g, params, baseSize, groupName) {
.attr('class', 'line')
.attr('stroke-width', 1)
.style('fill', color)
.style('opacity', '0.5')
.style('opacity', '0.6')
.style('stroke', 'black')
.style("stroke-opacity", 1)
}
......@@ -129,7 +129,7 @@ function drawRadarGroupPoints(g, params, baseSize, groupName) {
let chartMax = computedData.chartMax
let rScale = computedData.rScale
let entityScoreKey = groupName === 'user' ? 'userScore' : 'average'
let color = groupName === 'user' ? 'green' : 'red'
let color = groupName === 'user' ? 'hsl(210, 87%, 62%)' : 'hsl(24, 100%, 50%)'
let scoreCircleWrapper = g.selectAll('.scoreCircleWrapper')
.data([params])
......@@ -157,7 +157,6 @@ function hookRadarTooltips(g, params, baseSize, groupName) {
let chartMax = computedData.chartMax
let rScale = computedData.rScale
let entityScoreKey = groupName === 'user' ? 'userScore' : 'average'
let color = groupName === 'user' ? 'green' : 'red'
let scoreCircleWrapper = g.selectAll('.tooltipCircleWrapper')
.data([params])
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment