Update d3 to v4 and migrated the prometheus dashboard

2 files changed, 26 insertions, 26 deletions

diff --git a/app/assets/javascripts/monitoring/utils/date_time_formatters.js b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
index ad07a8465e2..111b5f3b6f1 100644
--- a/app/assets/javascripts/monitoring/utils/date_time_formatters.js
+++ b/app/assets/javascripts/monitoring/utils/date_time_formatters.js
@@ -1,17 +1,8 @@
-import d3 from 'd3';
+import {
+  timeFormat as d3TimeFormat,
+  bisector } from 'd3';
 
-export const dateFormat = d3.time.format('%b %-d, %Y');
-export const dateFormatWithName = d3.time.format('%a, %b %-d');
-export const timeFormat = d3.time.format('%-I:%M%p');
-export const bisectDate = d3.bisector(d => d.time).left;
-
-export const timeScaleFormat = d3.time.format.multi([
-  ['.%L', d => d.getMilliseconds()],
-  [':%S', d => d.getSeconds()],
-  ['%-I:%M', d => d.getMinutes()],
-  ['%-I %p', d => d.getHours()],
-  ['%a %-d', d => d.getDay() && d.getDate() !== 1],
-  ['%b %-d', d => d.getDate() !== 1],
-  ['%B', d => d.getMonth()],
-  ['%Y', () => true],
-]);
+export const dateFormat = d3TimeFormat('%b %-d, %Y');
+export const timeFormat = d3TimeFormat('%-I:%M%p');
+export const dateFormatWithName = d3TimeFormat('%a, %b %-d');
+export const bisectDate = bisector(d => d.time).left;
diff --git a/app/assets/javascripts/monitoring/utils/multiple_time_series.js b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
index d21a265bd43..ab0e8d5f366 100644
--- a/app/assets/javascripts/monitoring/utils/multiple_time_series.js
+++ b/app/assets/javascripts/monitoring/utils/multiple_time_series.js
@@ -1,4 +1,13 @@
-import d3 from 'd3';
+import {
+  scaleLinear as d3ScaleLinear,
+  scaleTime as d3ScaleTime,
+  line as d3Line,
+  area as d3Area,
+  extent as d3Extent,
+  max as d3Max,
+  timeMinute as d3TimeMinute,
+  curveLinear as d3CurveLinear,
+} from 'd3';
 import _ from 'underscore';
 
 const defaultColorPalette = {
@@ -38,27 +47,27 @@ function queryTimeSeries(query, graphWidth, graphHeight, graphHeightOffset, xDom
     let lineColor = '';
     let areaColor = '';
 
-    const timeSeriesScaleX = d3.time.scale()
+    const timeSeriesScaleX = d3ScaleTime()
       .range([0, graphWidth - 70]);
 
-    const timeSeriesScaleY = d3.scale.linear()
+    const timeSeriesScaleY = d3ScaleLinear()
       .range([graphHeight - graphHeightOffset, 0]);
 
     timeSeriesScaleX.domain(xDom);
-    timeSeriesScaleX.ticks(d3.time.minute, 60);
+    timeSeriesScaleX.ticks(d3TimeMinute, 60);
     timeSeriesScaleY.domain(yDom);
 
     const defined = d => !isNaN(d.value) && d.value != null;
 
-    const lineFunction = d3.svg.line()
+    const lineFunction = d3Line()
       .defined(defined)
-      .interpolate('linear')
+      .curve(d3CurveLinear) // d3 v4 uses curbe instead of interpolate
       .x(d => timeSeriesScaleX(d.time))
       .y(d => timeSeriesScaleY(d.value));
 
-    const areaFunction = d3.svg.area()
+    const areaFunction = d3Area()
       .defined(defined)
-      .interpolate('linear')
+      .curve(d3CurveLinear)
       .x(d => timeSeriesScaleX(d.time))
       .y0(graphHeight - graphHeightOffset)
       .y1(d => timeSeriesScaleY(d.value));
@@ -97,8 +106,8 @@ export default function createTimeSeries(queries, graphWidth, graphHeight, graph
     query.result.reduce((allResults, result) => allResults.concat(result.values), []),
   ), []);
 
-  const xDom = d3.extent(allValues, d => d.time);
-  const yDom = [0, d3.max(allValues.map(d => d.value))];
+  const xDom = d3Extent(allValues, d => d.time);
+  const yDom = [0, d3Max(allValues.map(d => d.value))];
 
   return queries.reduce((series, query, index) => {
     const lineStyle = defaultStyleOrder[index % defaultStyleOrder.length];