Skip to content

Commit

Permalink
Upgrade JS and CSS packages
Browse files Browse the repository at this point in the history 
bootstrap to 4.6.2
jquery to 3.7.0
jquery-ui to 1.13.2
d3 to v7
moment.js to 2.29.4

Some d3 changes were required:
1. The global d3.event was replaced by events passed into each handler.
   See https://observablehq.com/@d3/d3v6-migration-guide#event_brush.
2. Item 1 had an effect related to the brush and zoom handlers. See the
   comment added in the code and this issue:
   d3/d3-zoom#222.

One Bootstrap change was required: button styling changed and the
buttons had no background color. Added the btn-light class to the
buttons.
  • Loading branch information
@mtraver
mtraver committed Jul 10, 2023
1 parent 0334b5d commit 17bb468
Show file tree
Hide file tree
Showing 2 changed files with 33 additions and 25 deletions.
27 changes: 19 additions & 8 deletions web/static/js/plot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,13 @@ function makePlot(selector, data, metric, name, unit, startDate, endDate) {
z.domain(data.map(function(c) { return c.id; }));
}

// This tracks whether we're currently executing a zoom or brush handler in
// order to short-circuit brush events triggered by zooms and zoom events
// triggered by brushes. This used to be done via d3.event.sourceEvent.type,
// but since the global d3.event was removed the sourceEvent field is no use.
// See this issue for more info: https://github.com/d3/d3-zoom/issues/222
let zoombrush = 0;

var brush = d3.brushX()
.extent([[0, 0], [width, height2]])
.on("brush end", brushed);
Expand Down Expand Up @@ -231,13 +238,14 @@ function makePlot(selector, data, metric, name, unit, startDate, endDate) {
focus.select(".axis--y").call(yAxis);
}

function brushed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") {
// Ignore brush-by-zoom
function brushed(event) {
// Ignore brush-by-zoom
if (zoombrush) {
return;
}
zoombrush = 1;

var s = d3.event.selection || x2.range();
var s = event.selection || x2.range();
x.domain(s.map(x2.invert, x2));
focus.selectAll(".line")
.attr("d", function(d) { return line(d.values); });
Expand All @@ -247,21 +255,24 @@ function makePlot(selector, data, metric, name, unit, startDate, endDate) {
d3.zoomIdentity.scale(width / (s[1] - s[0])).translate(-s[0], 0));

updateYAxis();
zoombrush = 0;
}

function zoomed() {
if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") {
// Ignore zoom-by-brush
function zoomed(event) {
// Ignore zoom-by-brush
if (zoombrush) {
return;
}
zoombrush = 1;

var t = d3.event.transform;
var t = event.transform;
x.domain(t.rescaleX(x2).domain());
focus.selectAll(".line")
.attr("d", function(d) { return line(d.values); });
focus.select(".axis--x").call(xAxis);
context.select(".brush").call(brush.move, x.range().map(t.invertX, t));

updateYAxis();
zoombrush = 0;
}
}
31 changes: 14 additions & 17 deletions web/templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N"
crossorigin="anonymous">
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">

<link rel="stylesheet" href="/static/css/style.css">

Expand Down Expand Up @@ -161,7 +161,7 @@
</div>

<div class="col-md mb-3">
<button type="submit" class="btn btn-sm">Go!</button>
<button type="submit" class="btn btn-light btn-sm">Go!</button>
</div>
</div>
</form>
Expand All @@ -185,7 +185,7 @@
</div>

<div class="col-md mb-3">
<button type="submit" class="btn btn-sm">Go!</button>
<button type="submit" class="btn btn-light btn-sm">Go!</button>
</div>
</div>
</form>
Expand Down Expand Up @@ -223,7 +223,7 @@
</div>

<div class="col-md mb-3">
<button type="submit" class="btn btn-sm">Go!</button>
<button type="submit" class="btn btn-light btn-sm">Go!</button>
</div>
</div>
</form>
Expand All @@ -234,23 +234,20 @@
</body>

<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
src="https://code.jquery.com/jquery-3.7.0.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"></script>
<script
src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"
integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0="
crossorigin="anonymous"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"
crossorigin="anonymous"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>

<script src="/static/js/legend.js"></script>
<script src="/static/js/plot.js"></script>
Expand Down

0 comments on commit 17bb468

Please sign in to comment.