[WebUI] Migrate widgets to D3 v4

interface/css/d3evolution.css

@@ -7,10 +7,14 @@
 .d3evolution .y.label {
     font-weight: normal;
 }
-.d3evolution .grid .tick {
+.d3evolution .grid line {
     stroke: lightgrey;
+    stroke-opacity: .7;
     shape-rendering: crispEdges;
 }
+.d3evolution .grid path {
+  stroke-width: 0;
+}
 .d3evolution .axis,
 .d3evolution .legend {
     font-size: 12px;
@@ -19,6 +23,7 @@
 .d3evolution .axis line {
     fill: none;
     stroke: grey;
+    shape-rendering: crispEdges;
 }
 .d3evolution .legend circle {
     stroke-width: 2px;

interface/index.html

@@ -139,18 +139,18 @@
 									<option value="line" selected>Line</option>
 									<option value="area">Stacked area</option>
 								</select>
-								Select <a title="View Mike Bostock's Block." href="https://bl.ocks.org/mbostock/4342190" target="_blank">interpolation mode</a>:
+								Select <a title="&ldquo;Curves&rdquo; section of &ldquo;d3-shape&rdquo; library documentation" href="https://github.com/d3/d3-shape#curves" target="_blank">interpolation mode</a>:
 								<select id="selInterpolate" class="form-control">
-									<option value="linear" selected>linear</option>
-									<option value="step">step</option>
-									<option value="step-before">step-before</option>
-									<option value="step-after">step-after</option>
-									<option value="basis">basis</option>
-									<option value="basis-open">basis-open</option>
-									<option value="bundle">bundle</option>
-									<option value="cardinal">cardinal</option>
-									<option value="cardinal-open">cardinal-open</option>
-									<option value="monotone">monotone</option>
+									<option value="curveLinear" selected>linear</option>
+									<option value="curveStep">step</option>
+									<option value="curveStepBefore">stepBefore</option>
+									<option value="curveStepAfter">stepAfter</option>
+									<option value="curveBasis">basis</option>
+									<option value="curveBasisOpen">basisOpen</option>
+									<option value="curveBundle">bundle</option>
+									<option value="curveCardinal">cardinal</option>
+									<option value="curveCardinalOpen">cardinalOpen</option>
+									<option value="curveMonotoneX">monotoneX</option>
 								</select>
 							</form>
 						</div>

interface/js/main.js

@@ -15,18 +15,22 @@ requirejs.config({
     shim: {
         d3: {exports: 'd3'},
         bootstrap: {exports: 'bootstrap', deps: ['jquery']},
-        d3pie: {exports: 'd3pie', deps: ['d3', 'jquery']},
+        d3pie: {exports: 'd3pie', deps: ['d3.global', 'jquery']},
         d3evolution: {exports: 'D3Evolution', deps: ['d3', 'd3pie', 'jquery']},
         footable: {deps: ['bootstrap', 'jquery']}
     }
 });
 
+define("d3.global", ["d3"], function(_) {
+  d3 = _;
+});
+
 // Load main UI
 require(['domReady'],
 function(domReady) {
     domReady(function () {
-        require(['jquery', 'app/rspamd'],
-            function ($, rspamd) {
+        require(['jquery', 'd3', 'app/rspamd'],
+            function ($, d3, rspamd) {
                 rspamd.setup();
                 rspamd.connect();
             });