Update d3 to v4 and migrated the prometheus dashboard
This commit is contained in:
Jose Ivan Vargas
parent
f7a9ced235
commit
36ba5f8272
|
|
@ -1,5 +1,13 @@
|
|||
<script>
|
||||
import d3 from 'd3';
|
||||
import {
|
||||
scaleLinear as d3ScaleLinear,
|
||||
scaleTime as d3ScaleTime,
|
||||
axisLeft as d3AxisLeft,
|
||||
axisBottom as d3AxisBottom,
|
||||
max as d3Max,
|
||||
extent as d3Extent,
|
||||
select as d3Select,
|
||||
} from 'd3';
|
||||
import GraphLegend from './graph/legend.vue';
|
||||
import GraphFlag from './graph/flag.vue';
|
||||
import GraphDeployment from './graph/deployment.vue';
|
||||
|
|
@ -7,7 +15,7 @@
|
|||
import MonitoringMixin from '../mixins/monitoring_mixins';
|
||||
import eventHub from '../event_hub';
|
||||
import measurements from '../utils/measurements';
|
||||
import { timeScaleFormat, bisectDate } from '../utils/date_time_formatters';
|
||||
import { bisectDate } from '../utils/date_time_formatters';
|
||||
import createTimeSeries from '../utils/multiple_time_series';
|
||||
import bp from '../../breakpoints';
|
||||
|
||||
|
|
@ -156,34 +164,30 @@
|
|||
this.baseGraphHeight = this.baseGraphHeight += (this.timeSeries.length - 3) * 20;
|
||||
}
|
||||
|
||||
const axisXScale = d3.time.scale()
|
||||
const axisXScale = d3ScaleTime()
|
||||
.range([0, this.graphWidth - 70]);
|
||||
const axisYScale = d3.scale.linear()
|
||||
const axisYScale = d3ScaleLinear()
|
||||
.range([this.graphHeight - this.graphHeightOffset, 0]);
|
||||
|
||||
const allValues = this.timeSeries.reduce((all, { values }) => all.concat(values), []);
|
||||
axisXScale.domain(d3.extent(allValues, d => d.time));
|
||||
axisYScale.domain([0, d3.max(allValues.map(d => d.value))]);
|
||||
axisXScale.domain(d3Extent(allValues, d => d.time));
|
||||
axisYScale.domain([0, d3Max(allValues.map(d => d.value))]);
|
||||
|
||||
const xAxis = d3.svg.axis()
|
||||
.scale(axisXScale)
|
||||
.ticks(d3.time.minute, 60)
|
||||
.tickFormat(timeScaleFormat)
|
||||
.orient('bottom');
|
||||
const xAxis = d3AxisBottom()
|
||||
.scale(axisXScale);
|
||||
|
||||
const yAxis = d3.svg.axis()
|
||||
const yAxis = d3AxisLeft()
|
||||
.scale(axisYScale)
|
||||
.ticks(measurements.yTicks)
|
||||
.orient('left');
|
||||
.ticks(measurements.yTicks);
|
||||
|
||||
d3.select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
|
||||
d3Select(this.$refs.baseSvg).select('.x-axis').call(xAxis);
|
||||
|
||||
const width = this.graphWidth;
|
||||
d3.select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
|
||||
d3Select(this.$refs.baseSvg).select('.y-axis').call(yAxis)
|
||||
.selectAll('.tick')
|
||||
.each(function createTickLines(d, i) {
|
||||
if (i > 0) {
|
||||
d3.select(this).select('line')
|
||||
d3Select(this).select('line')
|
||||
.attr('x2', width)
|
||||
.attr('class', 'axis-tick');
|
||||
} // Avoid adding the class to the first tick, to prevent coloring
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
"core-js": "^2.4.1",
|
||||
"cropper": "^2.3.0",
|
||||
"css-loader": "^0.28.0",
|
||||
"d3": "^3.5.11",
|
||||
"d3": "^4.12.0",
|
||||
"deckar01-task_list": "^2.0.0",
|
||||
"diff": "^3.4.0",
|
||||
"document-register-element": "1.3.0",
|
||||
|
|
|
|||
228
yarn.lock
228
yarn.lock
|
|
@ -1378,6 +1378,10 @@ combined-stream@^1.0.5, combined-stream@~1.0.5:
|
|||
dependencies:
|
||||
delayed-stream "~1.0.0"
|
||||
|
||||
commander@2:
|
||||
version "2.11.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.11.0.tgz#157152fd1e7a6c8d98a5b715cf376df928004563"
|
||||
|
||||
commander@^2.9.0:
|
||||
version "2.9.0"
|
||||
resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
|
||||
|
|
@ -1704,13 +1708,219 @@ custom-event@~1.0.0:
|
|||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/custom-event/-/custom-event-1.0.1.tgz#5d02a46850adf1b4a317946a3928fccb5bfd0425"
|
||||
|
||||
d3-array@1, d3-array@1.2.1, d3-array@^1.2.0:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-1.2.1.tgz#d1ca33de2f6ac31efadb8e050a021d7e2396d5dc"
|
||||
|
||||
d3-axis@1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-1.0.8.tgz#31a705a0b535e65759de14173a31933137f18efa"
|
||||
|
||||
d3-brush@1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-1.0.4.tgz#00c2f238019f24f6c0a194a26d41a1530ffe7bc4"
|
||||
dependencies:
|
||||
d3-dispatch "1"
|
||||
d3-drag "1"
|
||||
d3-interpolate "1"
|
||||
d3-selection "1"
|
||||
d3-transition "1"
|
||||
|
||||
d3-chord@1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/d3-chord/-/d3-chord-1.0.4.tgz#7dec4f0ba886f713fe111c45f763414f6f74ca2c"
|
||||
dependencies:
|
||||
d3-array "1"
|
||||
d3-path "1"
|
||||
|
||||
d3-collection@1, d3-collection@1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/d3-collection/-/d3-collection-1.0.4.tgz#342dfd12837c90974f33f1cc0a785aea570dcdc2"
|
||||
|
||||
d3-color@1, d3-color@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-1.0.3.tgz#bc7643fca8e53a8347e2fbdaffa236796b58509b"
|
||||
|
||||
d3-dispatch@1, d3-dispatch@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-1.0.3.tgz#46e1491eaa9b58c358fce5be4e8bed626e7871f8"
|
||||
|
||||
d3-drag@1, d3-drag@1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-1.2.1.tgz#df8dd4c502fb490fc7462046a8ad98a5c479282d"
|
||||
dependencies:
|
||||
d3-dispatch "1"
|
||||
d3-selection "1"
|
||||
|
||||
d3-dsv@1, d3-dsv@1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/d3-dsv/-/d3-dsv-1.0.8.tgz#907e240d57b386618dc56468bacfe76bf19764ae"
|
||||
dependencies:
|
||||
commander "2"
|
||||
iconv-lite "0.4"
|
||||
rw "1"
|
||||
|
||||
d3-ease@1, d3-ease@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.3.tgz#68bfbc349338a380c44d8acc4fbc3304aa2d8c0e"
|
||||
|
||||
d3-force@1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-1.1.0.tgz#cebf3c694f1078fcc3d4daf8e567b2fbd70d4ea3"
|
||||
dependencies:
|
||||
d3-collection "1"
|
||||
d3-dispatch "1"
|
||||
d3-quadtree "1"
|
||||
d3-timer "1"
|
||||
|
||||
d3-format@1, d3-format@1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-1.2.1.tgz#4e19ecdb081a341dafaf5f555ee956bcfdbf167f"
|
||||
|
||||
d3-geo@1.9.0:
|
||||
version "1.9.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-geo/-/d3-geo-1.9.0.tgz#15c7d7a8ea9346e59ed150dc7b1f7f95479056e9"
|
||||
dependencies:
|
||||
d3-array "1"
|
||||
|
||||
d3-hierarchy@1.1.5:
|
||||
version "1.1.5"
|
||||
resolved "https://registry.yarnpkg.com/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz#a1c845c42f84a206bcf1c01c01098ea4ddaa7a26"
|
||||
|
||||
d3-interpolate@1, d3-interpolate@1.1.6:
|
||||
version "1.1.6"
|
||||
resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-1.1.6.tgz#2cf395ae2381804df08aa1bf766b7f97b5f68fb6"
|
||||
dependencies:
|
||||
d3-color "1"
|
||||
|
||||
d3-path@1, d3-path@1.0.5:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-1.0.5.tgz#241eb1849bd9e9e8021c0d0a799f8a0e8e441764"
|
||||
|
||||
d3-polygon@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-polygon/-/d3-polygon-1.0.3.tgz#16888e9026460933f2b179652ad378224d382c62"
|
||||
|
||||
d3-quadtree@1, d3-quadtree@1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-1.0.3.tgz#ac7987e3e23fe805a990f28e1b50d38fcb822438"
|
||||
|
||||
d3-queue@3.0.7:
|
||||
version "3.0.7"
|
||||
resolved "https://registry.yarnpkg.com/d3-queue/-/d3-queue-3.0.7.tgz#c93a2e54b417c0959129d7d73f6cf7d4292e7618"
|
||||
|
||||
d3-random@1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-random/-/d3-random-1.1.0.tgz#6642e506c6fa3a648595d2b2469788a8d12529d3"
|
||||
|
||||
d3-request@1.0.6:
|
||||
version "1.0.6"
|
||||
resolved "https://registry.yarnpkg.com/d3-request/-/d3-request-1.0.6.tgz#a1044a9ef4ec28c824171c9379fae6d79474b19f"
|
||||
dependencies:
|
||||
d3-collection "1"
|
||||
d3-dispatch "1"
|
||||
d3-dsv "1"
|
||||
xmlhttprequest "1"
|
||||
|
||||
d3-scale@1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-1.0.7.tgz#fa90324b3ea8a776422bd0472afab0b252a0945d"
|
||||
dependencies:
|
||||
d3-array "^1.2.0"
|
||||
d3-collection "1"
|
||||
d3-color "1"
|
||||
d3-format "1"
|
||||
d3-interpolate "1"
|
||||
d3-time "1"
|
||||
d3-time-format "2"
|
||||
|
||||
d3-selection@1, d3-selection@1.2.0, d3-selection@^1.1.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-1.2.0.tgz#1b8ec1c7cedadfb691f2ba20a4a3cfbeb71bbc88"
|
||||
|
||||
d3-shape@1.2.0:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-1.2.0.tgz#45d01538f064bafd05ea3d6d2cb748fd8c41f777"
|
||||
dependencies:
|
||||
d3-path "1"
|
||||
|
||||
d3-time-format@2, d3-time-format@2.1.1:
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-2.1.1.tgz#85b7cdfbc9ffca187f14d3c456ffda268081bb31"
|
||||
dependencies:
|
||||
d3-time "1"
|
||||
|
||||
d3-time@1, d3-time@1.0.8:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-1.0.8.tgz#dbd2d6007bf416fe67a76d17947b784bffea1e84"
|
||||
|
||||
d3-timer@1, d3-timer@1.0.7:
|
||||
version "1.0.7"
|
||||
resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.7.tgz#df9650ca587f6c96607ff4e60cc38229e8dd8531"
|
||||
|
||||
d3-transition@1, d3-transition@1.1.1:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-1.1.1.tgz#d8ef89c3b848735b060e54a39b32aaebaa421039"
|
||||
dependencies:
|
||||
d3-color "1"
|
||||
d3-dispatch "1"
|
||||
d3-ease "1"
|
||||
d3-interpolate "1"
|
||||
d3-selection "^1.1.0"
|
||||
d3-timer "1"
|
||||
|
||||
d3-voronoi@1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/d3-voronoi/-/d3-voronoi-1.1.2.tgz#1687667e8f13a2d158c80c1480c5a29cb0d8973c"
|
||||
|
||||
d3-zoom@1.7.1:
|
||||
version "1.7.1"
|
||||
resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-1.7.1.tgz#02f43b3c3e2db54f364582d7e4a236ccc5506b63"
|
||||
dependencies:
|
||||
d3-dispatch "1"
|
||||
d3-drag "1"
|
||||
d3-interpolate "1"
|
||||
d3-selection "1"
|
||||
d3-transition "1"
|
||||
|
||||
d3@3.5.17:
|
||||
version "3.5.17"
|
||||
resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.17.tgz#bc46748004378b21a360c9fc7cf5231790762fb8"
|
||||
|
||||
d3@^3.5.11:
|
||||
version "3.5.11"
|
||||
resolved "https://registry.yarnpkg.com/d3/-/d3-3.5.11.tgz#d130750eed0554db70e8432102f920a12407b69c"
|
||||
d3@^4.12.0:
|
||||
version "4.12.0"
|
||||
resolved "https://registry.yarnpkg.com/d3/-/d3-4.12.0.tgz#75eccb39ea40f6018de8cfa2752905bee7daa46f"
|
||||
dependencies:
|
||||
d3-array "1.2.1"
|
||||
d3-axis "1.0.8"
|
||||
d3-brush "1.0.4"
|
||||
d3-chord "1.0.4"
|
||||
d3-collection "1.0.4"
|
||||
d3-color "1.0.3"
|
||||
d3-dispatch "1.0.3"
|
||||
d3-drag "1.2.1"
|
||||
d3-dsv "1.0.8"
|
||||
d3-ease "1.0.3"
|
||||
d3-force "1.1.0"
|
||||
d3-format "1.2.1"
|
||||
d3-geo "1.9.0"
|
||||
d3-hierarchy "1.1.5"
|
||||
d3-interpolate "1.1.6"
|
||||
d3-path "1.0.5"
|
||||
d3-polygon "1.0.3"
|
||||
d3-quadtree "1.0.3"
|
||||
d3-queue "3.0.7"
|
||||
d3-random "1.1.0"
|
||||
d3-request "1.0.6"
|
||||
d3-scale "1.0.7"
|
||||
d3-selection "1.2.0"
|
||||
d3-shape "1.2.0"
|
||||
d3-time "1.0.8"
|
||||
d3-time-format "2.1.1"
|
||||
d3-timer "1.0.7"
|
||||
d3-transition "1.1.1"
|
||||
d3-voronoi "1.1.2"
|
||||
d3-zoom "1.7.1"
|
||||
|
||||
d@1:
|
||||
version "1.0.0"
|
||||
|
|
@ -3132,6 +3342,10 @@ https-browserify@0.0.1:
|
|||
version "0.0.1"
|
||||
resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
|
||||
|
||||
iconv-lite@0.4:
|
||||
version "0.4.19"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
|
||||
|
||||
iconv-lite@0.4.15:
|
||||
version "0.4.15"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.15.tgz#fe265a218ac6a57cfe854927e9d04c19825eddeb"
|
||||
|
|
@ -5522,6 +5736,10 @@ run-async@^0.1.0:
|
|||
dependencies:
|
||||
once "^1.3.0"
|
||||
|
||||
rw@1:
|
||||
version "1.3.3"
|
||||
resolved "https://registry.yarnpkg.com/rw/-/rw-1.3.3.tgz#3f862dfa91ab766b14885ef4d01124bfda074fb4"
|
||||
|
||||
rx-lite@^3.1.2:
|
||||
version "3.1.2"
|
||||
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-3.1.2.tgz#19ce502ca572665f3b647b10939f97fd1615f102"
|
||||
|
|
@ -6671,6 +6889,10 @@ xmlhttprequest-ssl@1.5.3:
|
|||
version "1.5.3"
|
||||
resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.3.tgz#185a888c04eca46c3e4070d99f7b49de3528992d"
|
||||
|
||||
xmlhttprequest@1:
|
||||
version "1.8.0"
|
||||
resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc"
|
||||
|
||||
xtend@^4.0.0:
|
||||
version "4.0.1"
|
||||
resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
|
||||
|
|
|
|||
Loading…
Reference in New Issue