Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Run prettier on JavaScript via pre-commit #1838

Merged
merged 2 commits into from
Dec 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion .pre-commit-config.yaml
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:
Copy link
Member Author

@adamzap adamzap Dec 20, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This makes pre-commit only run on the js directory in static. In a series of future PRs I'd like to remove this exclude line and fix all of the warnings generated by the other directories.

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]
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't need to modify minified JavaScript files to add a newline at the end.

- 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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We don't want to run the formatter on minified JavaScript files.

rev: "5.13.2"
hooks:
Expand Down
11 changes: 11 additions & 0 deletions .prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"overrides": [
{
"files": "*.js",
"options": {
"tabWidth": 2,
"singleQuote": true
}
Comment on lines +5 to +8
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These options are my personal preference. Let me know if this should be modified.

https://prettier.io/docs/en/options

}
]
}
157 changes: 84 additions & 73 deletions djangoproject/static/js/dashboard/detail.js
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
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
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
Loading