Correctly uses colours to represent the agents in the donut chart

resources/views/scripts/simple-donut-script.blade.php

@@ -21,8 +21,9 @@ class SimpleDonut {
             .style('border-radius', '4px')
             .style('color', '#fff')
             .text('a simple tooltip');
-        
-        const color = d3.scaleOrdinal(d3.schemePuBu[9]);
+    
+        var domain_max = data.length - 1;
+        const color = d3.scaleSequential(d3.interpolateBlues).domain([0, domain_max]);
         
         const r = Math.min(width, height) / 2;
         const arc = d3.arc()
@@ -41,7 +42,7 @@ class SimpleDonut {
         	.append('path')
         	.attr('class', 'chart-arc')
         	.attr('d', arc)
-        	.style('fill', d => color(d.data.label))
+        	.style('fill', d => color(data.indexOf(d.data)))
         	.on('mouseover', function(event, d, i) {
                 tooltip
                     .html('<div>Agent: ' + d.data.label + '</div><div>Value: ' + d.data.value + '</div>')