diff --git a/main.html b/main.html index beb8b84..6cabc1c 100644 --- a/main.html +++ b/main.html @@ -170,38 +170,85 @@ data.set("dynamic drawing", 3); // dynamic drawing data.set("translatability", 2); // translatability - function loadNewRadarChart(chartId, data, videotitle) { + function loadNewRadarChart(chartId, data, videotitle, score) { // let removalIndex = chartId.data.datasets.indexOf(ds1); //Locate index of ds1 let removalIndex = 0; if(removalIndex >= 0) { //make sure this element exists in the array chartId.data.datasets.splice(removalIndex, 1); } + let taxLevel = "G"; + + let colorArray = [ + "#f8cc1b90", + "#fa7a4890", + "#31195590", + "#84a2cd90", + "#bed05790", + "#4777cd90", + "#ffa5c890"]; + let firstValueZero = 10; + + function changeColorsGrey(item, index, arr){ + if (index >= firstValueZero) { + arr[index] = "#AAAAAA33"; + } + console.log(arr); + } + + if (data.get("instructional principle") == 0) { + firstValueZero = 0; + colorArray.forEach(changeColorsGrey); + taxLevel = "0"; + } + else if (data.get("visibility") == 0) { + firstValueZero = 1; + colorArray.forEach(changeColorsGrey); + taxLevel = "A"; + } + else if (data.get("segmentation") == 0) { + firstValueZero = 2; + colorArray.forEach(changeColorsGrey); + taxLevel = "B"; + } + else if (data.get("activity") == 0) { + firstValueZero = 3; + colorArray.forEach(changeColorsGrey); + taxLevel = "C"; + } + else if (data.get("interactivity") == 0) { + firstValueZero = 4; + colorArray.forEach(changeColorsGrey); + taxLevel = "D"; + } + else if (data.get("dynamic drawing") == 0) { + firstValueZero = 5; + colorArray.forEach(changeColorsGrey); + taxLevel = "E"; + } + else if (data.get("translatability") == 0) { + firstValueZero = 6; + colorArray.forEach(changeColorsGrey); + taxLevel = "F"; + } + else { + firstValueZero = 10; + colorArray.forEach(changeColorsGrey); + taxLevel = "G"; + } + // chartId.data.labels.push(Array.from(data.keys())); chartId.data.datasets =[{ label: videotitle, data: Array.from(data.values()), - backgroundColor: [ - "#f8cc1b90", - "#fa7a4890", - "#31195590", - "#84a2cd90", - "#bed05790", - "#4777cd90", - "#ffa5c890"], - pointBackgroundColor: [ - "#f8cc1b90", - "#fa7a4890", - "#31195590", - "#84a2cd90", - "#bed05790", - "#4777cd90", - "#ffa5c890"], + backgroundColor: colorArray, + pointBackgroundColor: colorArray, borderColor: ['black'], borderWidth: 1, pointRadius: 6, }]; - chartId.options.plugins.title.text = videotitle; + chartId.options.plugins.title.text = videotitle + ", Taxonomy Level: " + taxLevel + + ", Score: " + score; chartId.update(); }; @@ -210,6 +257,9 @@ console.log("Hi!"); + + + let nameValue = document.getElementById("videoname").value; console.log(nameValue); @@ -228,11 +278,13 @@ data_tra = parseInt(document.getElementById("tra_sel").value); data.set("translatability", data_tra); + let score = 0; + score = data_ins + data_vis + data_seg + data_act + data_int + data_int + data_dyn + data_tra; console.log(data); - loadNewRadarChart(chartHandleId, data, nameValue); + loadNewRadarChart(chartHandleId, data, nameValue, score); }