Skip to content

Commit

Permalink
Run prettier on JavaScript via pre-commit
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@adamzap
adamzap authored Dec 20, 2024
1 parent a4bb1d7 commit 6dc8f41
Show file tree
Hide file tree
Showing 22 changed files with 913 additions and 861 deletions.
4 changes: 3 additions & 1 deletion .pre-commit-config.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
exclude: '(^djangoproject\/static\/.*$)'
exclude: '^djangoproject\/static\/(css\/|fonts\/|img\/|robots).*$'
default_language_version:
python: python3
repos:
Expand All @@ -19,6 +19,7 @@ repos:
- id: debug-statements
- id: detect-private-key
- id: end-of-file-fixer
exclude: '(^djangoproject\/static\/js\/lib\/.*$)'
exclude_types: [json, sql]
- id: file-contents-sorter
files: ^(requirements/\w*.txt)$
Expand Down Expand Up @@ -46,6 +47,7 @@ repos:
hooks:
- id: prettier
exclude_types: [html, json, scss]
exclude: '(^djangoproject\/static\/js\/lib\/.*$)'
- repo: https://github.com/pycqa/isort
rev: "5.13.2"
hooks:
Expand Down
11 changes: 11 additions & 0 deletions .prettierrc
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"overrides": [
{
"files": "*.js",
"options": {
"tabWidth": 2,
"singleQuote": true
}
}
]
}
157 changes: 84 additions & 73 deletions djangoproject/static/js/dashboard/detail.js
View file
Original file line number Diff line number Diff line change
@@ -1,78 +1,89 @@
define('dashboard/detail', ['jquery', 'jquery.flot', 'dashboard/utils'], function ($, plot, utils) {
$(function () {
var element = $("#graph");
var url = element.data('path') + element.data('metric') + ".json?days=365";
var hover = {
show: function (x, y, message) {
$('<div id="hover">').html(message)
.css({top: y, left: x})
.appendTo('body')
.show();
},
hide: function () {
$("#hover").remove();
}
};
define('dashboard/detail', [
'jquery',
'jquery.flot',
'dashboard/utils',
], function ($, plot, utils) {
$(function () {
var element = $('#graph');
var url = element.data('path') + element.data('metric') + '.json?days=365';
var hover = {
show: function (x, y, message) {
$('<div id="hover">')
.html(message)
.css({ top: y, left: x })
.appendTo('body')
.show();
},
hide: function () {
$('#hover').remove();
},
};

$.getJSON(url, function (response) {
for (var i = 0; i < response.data.length; i++) {
response.data[i][0] = response.data[i][0] * 1000;
}
var options = {
xaxis: {
mode: "time",
tickColor: "rgba(0,0,0,0)",
minTickSize: [1, "day"]
},
yaxis: {min: 0, ticks: 4},
grid: {borderWidth: 0, hoverable: true, color: "#0C3C26"},
colors: ["#0C4B33"]
};
if (response.period == "daily") {
options.bars = {
show: true,
barWidth: 22 * 60 * 60 * 1000,
align: "center"
};
} else if (response.period == 'weekly') {
options.bars = {
show: true,
barWidth: 22 * 60 * 60 * 7 * 1000,
align: "center"
};
}
var plot = $.plot(element, [response.data], options);
$.getJSON(url, function (response) {
for (var i = 0; i < response.data.length; i++) {
response.data[i][0] = response.data[i][0] * 1000;
}
var options = {
xaxis: {
mode: 'time',
tickColor: 'rgba(0,0,0,0)',
minTickSize: [1, 'day'],
},
yaxis: { min: 0, ticks: 4 },
grid: { borderWidth: 0, hoverable: true, color: '#0C3C26' },
colors: ['#0C4B33'],
};
if (response.period == 'daily') {
options.bars = {
show: true,
barWidth: 22 * 60 * 60 * 1000,
align: 'center',
};
} else if (response.period == 'weekly') {
options.bars = {
show: true,
barWidth: 22 * 60 * 60 * 7 * 1000,
align: 'center',
};
}
var plot = $.plot(element, [response.data], options);

var format_message = function (timestamp, measurement) {
var unit = measurement == 1 ? response.unit : response.unit_plural;
return utils.formatTimestamp(timestamp, response.period) + '<br>' + measurement + ' ' + unit;
};
var format_message = function (timestamp, measurement) {
var unit = measurement == 1 ? response.unit : response.unit_plural;
return (
utils.formatTimestamp(timestamp, response.period) +
'<br>' +
measurement +
' ' +
unit
);
};

var previousPoint = null;
element.bind("plothover", function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
hover.hide();
var x, y;
var message = format_message.apply(null, item.datapoint);
if (response.period == 'instant') {
x = item.pageX + 10;
y = item.pageY + 10;
} else {
// I'd like this hover to be centered over the bar. This
// simple math sorta works, but it assumes a *lot* about
// the plot and basically won't scale. Grr.
x = item.pageX - 40;
y = item.pageY - 50;
}
hover.show(x, y, message);
}
} else {
hover.hide();
previousPoint = null;
}
});
});
var previousPoint = null;
element.bind('plothover', function (event, pos, item) {
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
hover.hide();
var x, y;
var message = format_message.apply(null, item.datapoint);
if (response.period == 'instant') {
x = item.pageX + 10;
y = item.pageY + 10;
} else {
// I'd like this hover to be centered over the bar. This
// simple math sorta works, but it assumes a *lot* about
// the plot and basically won't scale. Grr.
x = item.pageX - 40;
y = item.pageY - 50;
}
hover.show(x, y, message);
}
} else {
hover.hide();
previousPoint = null;
}
});
});
});
});
82 changes: 43 additions & 39 deletions djangoproject/static/js/dashboard/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,48 @@
define('dashboard/index', ['jquery', 'jquery.flot', 'dashboard/utils'], function ($, flot, utils) {
$(function () {
$(".metric .sparkline").each(function (index, elem) {
var element = $(elem);
var valueElement = element.parent().find('.value a');
var timestampElement = element.parent().find('.timestamp');
var originalValue = valueElement.html();
var green = '#93D7B7';
define('dashboard/index', [
'jquery',
'jquery.flot',
'dashboard/utils',
], function ($, flot, utils) {
$(function () {
$('.metric .sparkline').each(function (index, elem) {
var element = $(elem);
var valueElement = element.parent().find('.value a');
var timestampElement = element.parent().find('.timestamp');
var originalValue = valueElement.html();
var green = '#93D7B7';

var url = element.data('path') + element.data('metric') + ".json";
$.getJSON(url, function (response) {
response.data = utils.convertSecondsToMilliseconds(response.data);
$.plot(element, [response.data], {
xaxis: {show: false, mode: "time"},
yaxis: {show: false, min: 0},
grid: {borderWidth: 0, hoverable: true},
colors: [green],
bars: {
show: true,
barWidth: (response.period == 'daily' ? 24 * 60 * 60 * 1000 : 24 * 60 * 60 * 7 * 1000),
fillColor: green,
lineWidth: 1,
align: "center"
}
});
var url = element.data('path') + element.data('metric') + '.json';
$.getJSON(url, function (response) {
response.data = utils.convertSecondsToMilliseconds(response.data);
$.plot(element, [response.data], {
xaxis: { show: false, mode: 'time' },
yaxis: { show: false, min: 0 },
grid: { borderWidth: 0, hoverable: true },
colors: [green],
bars: {
show: true,
barWidth:
response.period == 'daily'
? 24 * 60 * 60 * 1000
: 24 * 60 * 60 * 7 * 1000,
fillColor: green,
lineWidth: 1,
align: 'center',
},
});

element.bind('plothover', function (event, pos, item) {
if (item) {
valueElement.html(item.datapoint[1]);
timestampElement.html(
utils.formatTimestamp(
item.datapoint[0],
response.period
)
);
} else {
valueElement.html(originalValue);
timestampElement.html('&nbsp;');
}
});
});
element.bind('plothover', function (event, pos, item) {
if (item) {
valueElement.html(item.datapoint[1]);
timestampElement.html(
utils.formatTimestamp(item.datapoint[0], response.period),
);
} else {
valueElement.html(originalValue);
timestampElement.html('&nbsp;');
}
});
});
});
});
});
50 changes: 27 additions & 23 deletions djangoproject/static/js/dashboard/utils.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
define('dashboard/utils', ['jquery'], function ($) {
return {
formatTimestamp: function formatTimestamp(timestamp, period) {
var d = new Date(timestamp);
if (period == 'instant') {
return $.plot.formatDate(d, "%b %d, %h:%M %p");
} else if (period == 'daily') {
return $.plot.formatDate(d, "%b %d");
} else if (period == 'weekly') {
// A bit more complicated than the above: the timestamp is in the
// middle of the week, so we have to bracket the date. This is
// something of a fudge here, but it works well enough.
var start = new Date(d.getTime() - (3 * 24 * 60 * 60 * 1000));
var end = new Date(d.getTime() + (3 * 24 * 60 * 60 * 1000));
return $.plot.formatDate(start, "%b %d") + ' - ' + $.plot.formatDate(end, "%b %d");
}
},
convertSecondsToMilliseconds: function convertSecondsToMilliseconds(data) {
for (var i = 0; i < data.length; i++) {
data[i][0] = data[i][0] * 1000;
}
return data;
}
};
return {
formatTimestamp: function formatTimestamp(timestamp, period) {
var d = new Date(timestamp);
if (period == 'instant') {
return $.plot.formatDate(d, '%b %d, %h:%M %p');
} else if (period == 'daily') {
return $.plot.formatDate(d, '%b %d');
} else if (period == 'weekly') {
// A bit more complicated than the above: the timestamp is in the
// middle of the week, so we have to bracket the date. This is
// something of a fudge here, but it works well enough.
var start = new Date(d.getTime() - 3 * 24 * 60 * 60 * 1000);
var end = new Date(d.getTime() + 3 * 24 * 60 * 60 * 1000);
return (
$.plot.formatDate(start, '%b %d') +
' - ' +
$.plot.formatDate(end, '%b %d')
);
}
},
convertSecondsToMilliseconds: function convertSecondsToMilliseconds(data) {
for (var i = 0; i < data.length; i++) {
data[i][0] = data[i][0] * 1000;
}
return data;
},
};
});
Loading

0 comments on commit 6dc8f41

Please sign in to comment.