Skip to content

Commit 6dc8f41

Browse files
adamzapadamzap
authored
Run prettier on JavaScript via pre-commit
This patch removes the global `djangoproject/static/*` exclude rule in `.pre-commit-config.yaml` to enable `prettier` to run on this project's JavaScript files. The `djangoproject/static/js/lib/` directory is now excluded in the `prettier` hook because there is no value in reformatting a minified JavaScript file. I also added a `.prettierrc` file to the root of the project to control JavaScript formatting. Refs #1827
1 parent a4bb1d7 commit 6dc8f41

22 files changed

+913
-861
lines changed

‎.pre-commit-config.yaml

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
exclude: '(^djangoproject\/static\/.*$)'
1+
exclude: '^djangoproject\/static\/(css\/|fonts\/|img\/|robots).*$'
22
default_language_version:
33
python: python3
44
repos:
@@ -19,6 +19,7 @@ repos:
1919
- id: debug-statements
2020
- id: detect-private-key
2121
- id: end-of-file-fixer
22+
exclude: '(^djangoproject\/static\/js\/lib\/.*$)'
2223
exclude_types: [json, sql]
2324
- id: file-contents-sorter
2425
files: ^(requirements/\w*.txt)$
@@ -46,6 +47,7 @@ repos:
4647
hooks:
4748
- id: prettier
4849
exclude_types: [html, json, scss]
50+
exclude: '(^djangoproject\/static\/js\/lib\/.*$)'
4951
- repo: https://github.com/pycqa/isort
5052
rev: "5.13.2"
5153
hooks:

‎.prettierrc

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
{
2+
"overrides": [
3+
{
4+
"files": "*.js",
5+
"options": {
6+
"tabWidth": 2,
7+
"singleQuote": true
8+
}
9+
}
10+
]
11+
}

‎djangoproject/static/js/dashboard/detail.js

+84-73
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,89 @@
1-
define('dashboard/detail', ['jquery', 'jquery.flot', 'dashboard/utils'], function ($, plot, utils) {
2-
$(function () {
3-
var element = $("#graph");
4-
var url = element.data('path') + element.data('metric') + ".json?days=365";
5-
var hover = {
6-
show: function (x, y, message) {
7-
$('<div id="hover">').html(message)
8-
.css({top: y, left: x})
9-
.appendTo('body')
10-
.show();
11-
},
12-
hide: function () {
13-
$("#hover").remove();
14-
}
15-
};
1+
define('dashboard/detail', [
2+
'jquery',
3+
'jquery.flot',
4+
'dashboard/utils',
5+
], function ($, plot, utils) {
6+
$(function () {
7+
var element = $('#graph');
8+
var url = element.data('path') + element.data('metric') + '.json?days=365';
9+
var hover = {
10+
show: function (x, y, message) {
11+
$('<div id="hover">')
12+
.html(message)
13+
.css({ top: y, left: x })
14+
.appendTo('body')
15+
.show();
16+
},
17+
hide: function () {
18+
$('#hover').remove();
19+
},
20+
};
1621

17-
$.getJSON(url, function (response) {
18-
for (var i = 0; i < response.data.length; i++) {
19-
response.data[i][0] = response.data[i][0] * 1000;
20-
}
21-
var options = {
22-
xaxis: {
23-
mode: "time",
24-
tickColor: "rgba(0,0,0,0)",
25-
minTickSize: [1, "day"]
26-
},
27-
yaxis: {min: 0, ticks: 4},
28-
grid: {borderWidth: 0, hoverable: true, color: "#0C3C26"},
29-
colors: ["#0C4B33"]
30-
};
31-
if (response.period == "daily") {
32-
options.bars = {
33-
show: true,
34-
barWidth: 22 * 60 * 60 * 1000,
35-
align: "center"
36-
};
37-
} else if (response.period == 'weekly') {
38-
options.bars = {
39-
show: true,
40-
barWidth: 22 * 60 * 60 * 7 * 1000,
41-
align: "center"
42-
};
43-
}
44-
var plot = $.plot(element, [response.data], options);
22+
$.getJSON(url, function (response) {
23+
for (var i = 0; i < response.data.length; i++) {
24+
response.data[i][0] = response.data[i][0] * 1000;
25+
}
26+
var options = {
27+
xaxis: {
28+
mode: 'time',
29+
tickColor: 'rgba(0,0,0,0)',
30+
minTickSize: [1, 'day'],
31+
},
32+
yaxis: { min: 0, ticks: 4 },
33+
grid: { borderWidth: 0, hoverable: true, color: '#0C3C26' },
34+
colors: ['#0C4B33'],
35+
};
36+
if (response.period == 'daily') {
37+
options.bars = {
38+
show: true,
39+
barWidth: 22 * 60 * 60 * 1000,
40+
align: 'center',
41+
};
42+
} else if (response.period == 'weekly') {
43+
options.bars = {
44+
show: true,
45+
barWidth: 22 * 60 * 60 * 7 * 1000,
46+
align: 'center',
47+
};
48+
}
49+
var plot = $.plot(element, [response.data], options);
4550

46-
var format_message = function (timestamp, measurement) {
47-
var unit = measurement == 1 ? response.unit : response.unit_plural;
48-
return utils.formatTimestamp(timestamp, response.period) + '<br>' + measurement + ' ' + unit;
49-
};
51+
var format_message = function (timestamp, measurement) {
52+
var unit = measurement == 1 ? response.unit : response.unit_plural;
53+
return (
54+
utils.formatTimestamp(timestamp, response.period) +
55+
'<br>' +
56+
measurement +
57+
' ' +
58+
unit
59+
);
60+
};
5061

51-
var previousPoint = null;
52-
element.bind("plothover", function (event, pos, item) {
53-
if (item) {
54-
if (previousPoint != item.dataIndex) {
55-
previousPoint = item.dataIndex;
56-
hover.hide();
57-
var x, y;
58-
var message = format_message.apply(null, item.datapoint);
59-
if (response.period == 'instant') {
60-
x = item.pageX + 10;
61-
y = item.pageY + 10;
62-
} else {
63-
// I'd like this hover to be centered over the bar. This
64-
// simple math sorta works, but it assumes a *lot* about
65-
// the plot and basically won't scale. Grr.
66-
x = item.pageX - 40;
67-
y = item.pageY - 50;
68-
}
69-
hover.show(x, y, message);
70-
}
71-
} else {
72-
hover.hide();
73-
previousPoint = null;
74-
}
75-
});
76-
});
62+
var previousPoint = null;
63+
element.bind('plothover', function (event, pos, item) {
64+
if (item) {
65+
if (previousPoint != item.dataIndex) {
66+
previousPoint = item.dataIndex;
67+
hover.hide();
68+
var x, y;
69+
var message = format_message.apply(null, item.datapoint);
70+
if (response.period == 'instant') {
71+
x = item.pageX + 10;
72+
y = item.pageY + 10;
73+
} else {
74+
// I'd like this hover to be centered over the bar. This
75+
// simple math sorta works, but it assumes a *lot* about
76+
// the plot and basically won't scale. Grr.
77+
x = item.pageX - 40;
78+
y = item.pageY - 50;
79+
}
80+
hover.show(x, y, message);
81+
}
82+
} else {
83+
hover.hide();
84+
previousPoint = null;
85+
}
86+
});
7787
});
88+
});
7889
});

‎djangoproject/static/js/dashboard/index.js

+43-39
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,48 @@
1-
define('dashboard/index', ['jquery', 'jquery.flot', 'dashboard/utils'], function ($, flot, utils) {
2-
$(function () {
3-
$(".metric .sparkline").each(function (index, elem) {
4-
var element = $(elem);
5-
var valueElement = element.parent().find('.value a');
6-
var timestampElement = element.parent().find('.timestamp');
7-
var originalValue = valueElement.html();
8-
var green = '#93D7B7';
1+
define('dashboard/index', [
2+
'jquery',
3+
'jquery.flot',
4+
'dashboard/utils',
5+
], function ($, flot, utils) {
6+
$(function () {
7+
$('.metric .sparkline').each(function (index, elem) {
8+
var element = $(elem);
9+
var valueElement = element.parent().find('.value a');
10+
var timestampElement = element.parent().find('.timestamp');
11+
var originalValue = valueElement.html();
12+
var green = '#93D7B7';
913

10-
var url = element.data('path') + element.data('metric') + ".json";
11-
$.getJSON(url, function (response) {
12-
response.data = utils.convertSecondsToMilliseconds(response.data);
13-
$.plot(element, [response.data], {
14-
xaxis: {show: false, mode: "time"},
15-
yaxis: {show: false, min: 0},
16-
grid: {borderWidth: 0, hoverable: true},
17-
colors: [green],
18-
bars: {
19-
show: true,
20-
barWidth: (response.period == 'daily' ? 24 * 60 * 60 * 1000 : 24 * 60 * 60 * 7 * 1000),
21-
fillColor: green,
22-
lineWidth: 1,
23-
align: "center"
24-
}
25-
});
14+
var url = element.data('path') + element.data('metric') + '.json';
15+
$.getJSON(url, function (response) {
16+
response.data = utils.convertSecondsToMilliseconds(response.data);
17+
$.plot(element, [response.data], {
18+
xaxis: { show: false, mode: 'time' },
19+
yaxis: { show: false, min: 0 },
20+
grid: { borderWidth: 0, hoverable: true },
21+
colors: [green],
22+
bars: {
23+
show: true,
24+
barWidth:
25+
response.period == 'daily'
26+
? 24 * 60 * 60 * 1000
27+
: 24 * 60 * 60 * 7 * 1000,
28+
fillColor: green,
29+
lineWidth: 1,
30+
align: 'center',
31+
},
32+
});
2633

27-
element.bind('plothover', function (event, pos, item) {
28-
if (item) {
29-
valueElement.html(item.datapoint[1]);
30-
timestampElement.html(
31-
utils.formatTimestamp(
32-
item.datapoint[0],
33-
response.period
34-
)
35-
);
36-
} else {
37-
valueElement.html(originalValue);
38-
timestampElement.html('&nbsp;');
39-
}
40-
});
41-
});
34+
element.bind('plothover', function (event, pos, item) {
35+
if (item) {
36+
valueElement.html(item.datapoint[1]);
37+
timestampElement.html(
38+
utils.formatTimestamp(item.datapoint[0], response.period),
39+
);
40+
} else {
41+
valueElement.html(originalValue);
42+
timestampElement.html('&nbsp;');
43+
}
4244
});
45+
});
4346
});
47+
});
4448
});

‎djangoproject/static/js/dashboard/utils.js

+27-23
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,29 @@
11
define('dashboard/utils', ['jquery'], function ($) {
2-
return {
3-
formatTimestamp: function formatTimestamp(timestamp, period) {
4-
var d = new Date(timestamp);
5-
if (period == 'instant') {
6-
return $.plot.formatDate(d, "%b %d, %h:%M %p");
7-
} else if (period == 'daily') {
8-
return $.plot.formatDate(d, "%b %d");
9-
} else if (period == 'weekly') {
10-
// A bit more complicated than the above: the timestamp is in the
11-
// middle of the week, so we have to bracket the date. This is
12-
// something of a fudge here, but it works well enough.
13-
var start = new Date(d.getTime() - (3 * 24 * 60 * 60 * 1000));
14-
var end = new Date(d.getTime() + (3 * 24 * 60 * 60 * 1000));
15-
return $.plot.formatDate(start, "%b %d") + ' - ' + $.plot.formatDate(end, "%b %d");
16-
}
17-
},
18-
convertSecondsToMilliseconds: function convertSecondsToMilliseconds(data) {
19-
for (var i = 0; i < data.length; i++) {
20-
data[i][0] = data[i][0] * 1000;
21-
}
22-
return data;
23-
}
24-
};
2+
return {
3+
formatTimestamp: function formatTimestamp(timestamp, period) {
4+
var d = new Date(timestamp);
5+
if (period == 'instant') {
6+
return $.plot.formatDate(d, '%b %d, %h:%M %p');
7+
} else if (period == 'daily') {
8+
return $.plot.formatDate(d, '%b %d');
9+
} else if (period == 'weekly') {
10+
// A bit more complicated than the above: the timestamp is in the
11+
// middle of the week, so we have to bracket the date. This is
12+
// something of a fudge here, but it works well enough.
13+
var start = new Date(d.getTime() - 3 * 24 * 60 * 60 * 1000);
14+
var end = new Date(d.getTime() + 3 * 24 * 60 * 60 * 1000);
15+
return (
16+
$.plot.formatDate(start, '%b %d') +
17+
' - ' +
18+
$.plot.formatDate(end, '%b %d')
19+
);
20+
}
21+
},
22+
convertSecondsToMilliseconds: function convertSecondsToMilliseconds(data) {
23+
for (var i = 0; i < data.length; i++) {
24+
data[i][0] = data[i][0] * 1000;
25+
}
26+
return data;
27+
},
28+
};
2529
});

0 commit comments

Comments
 (0)