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.

Sign up for GitHub

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

Upgraded Chart.js to version 4.4.2 #3233

Merged
merged 27 commits into from
May 30, 2024
Merged

Upgraded Chart.js to version 4.4.2 #3233

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
ffeef9f
Upgraded Chart.js to v4.4.2
May 15, 2024
35a348c
Got chart legends to appear again, with incorrect CSS
May 15, 2024
e940f2d
Fixed major chart legend styling issues
May 16, 2024
5309640
Added cubic interpolation and gradients back
May 16, 2024
e90421c
Removed chart variable assignments that caused linting errors
May 17, 2024
f4eeb50
Changed to local import for Chart.js, Moment.js, and Chart-adapter-Mo…
May 17, 2024
5a56023
Loaded Chart.js through Django pipeline instead of base.html
May 21, 2024
0932ef6
Fixed major styling bugs for locale/insights charts
May 22, 2024
ceda07e
Fixed linting issue in insights_tab
May 22, 2024
5bdec21
Fixed major styling issues for insights charts
May 22, 2024
11c7506
Fixed linting errors
May 22, 2024
3eda4ce
Fixed profile chart styling, clipping issues for all graphs
May 22, 2024
3b599c4
Fixed formatting issue in Profile.js
May 22, 2024
291e68f
Fixed styling issues for tooltips on all charts
May 22, 2024
e30ae90
Fixed tooltip label styling, disabled graphs bug
May 23, 2024
5c62ae6
fixed rander issue for insights and date formatting
May 27, 2024
60b514a
linting fixes
May 27, 2024
5aa5780
Refactored HTML Legend logic
May 28, 2024
43d8f17
linting fixes
May 28, 2024
ba5081a
fixed display bug for insights charts
May 28, 2024
483d471
Changed moment.js to date-fns.js
May 28, 2024
ab0f3f9
Fixed tooltip import for date-fns and alt-click legned bug
May 28, 2024
4df1662
Improved line visibility on insights chart, standardized thousands se…
May 29, 2024
811a555
Implemented review comments, refactored labelColor for tooltips
May 30, 2024
3ee556b
Refactored logic for changing tooltip label colors
May 30, 2024
ddbf226
Refactored htmlLegendPlugin logic for better code readability
May 30, 2024
3729a90
Simplified anonymous function calls for setLabelColor
May 30, 2024
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
20,776 changes: 0 additions & 20,776 deletions pontoon/base/static/js/lib/Chart.bundle.js
View file
Open in desktop

This file was deleted.

1 change: 1 addition & 0 deletions pontoon/base/static/js/lib/chart.umd.js.map
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions pontoon/base/static/js/lib/chart.umd.min.js
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 7 additions & 0 deletions pontoon/base/static/js/lib/chartjs-adapter-moment.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 15 additions & 0 deletions pontoon/base/static/js/lib/moment.min.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 6 additions & 0 deletions pontoon/base/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@
{% endblock %}
{% endblock %}

<!-- Import Chart.js and Moment.js from static files -->
<script language="javascript" type="text/javascript" src="{{ static('js/lib/chart.umd.min.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ static('js/lib/moment.min.js') }}"></script>
<script language="javascript" type="text/javascript" src="{{ static('js/lib/chartjs-adapter-moment.min.js') }}"></script>
Copy link
Collaborator

@mathjazz mathjazz May 20, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This will load all these libs on most of the views, even when they aren't needed.

We should load them, like other static files, through Django pipeline in settings, and only in the views where Chart.js was previously used.

Also, seems like pontoon/base/static/js/lib/chart.umd.js.map is not used?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

You're right, I was getting a console error when I didn't include this file through base.html, but now that I've shifted over to local imports it seems this file isn't necessary.



{% include "tracker.html" %}
</head>

Expand Down
56 changes: 26 additions & 30 deletions pontoon/contributors/static/js/profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,39 +107,35 @@ var Pontoon = (function (my) {
},
},
scales: {
xAxes: [
{
type: 'time',
time: {
displayFormats: {
month: 'MMM',
},
tooltipFormat: 'MMMM YYYY',
},
gridLines: {
display: false,
},
offset: true,
ticks: {
source: 'data',
x: {
type: 'time',
time: {
displayFormats: {
month: 'MMM',
},
tooltipFormat: 'MMMM YYYY',
},
],
yAxes: [
{
gridLines: {
display: false,
},
position: 'right',
ticks: {
beginAtZero: true,
maxTicksLimit: 3,
max: 100,
precision: 0,
callback: (value) => nf.format(value / 100),
},
grid: {
display: false,
},
offset: true,
ticks: {
source: 'data',
},
],
},
y: {
grid: {
display: false,
},
ticks: {
beginAtZero: true,
maxTicksLimit: 3,
precision: 2,
callback: (value) => nf.format(value),
Copy link
Collaborator

Choose a reason for hiding this comment

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

Why the change in the precision and the callback settings?

There are a few things that don't work as expected in the new Profile chart:

  1. The curve doesn't have a background.
  2. The Y scale data is off.
  3. The tooltip: items overlap, the data format is off and there is no border.
  4. The chart is cut-off at the top.
  5. Can we keep the line curved?
before after

},
position: 'right',
max: 100,
},
},
},
});
Expand Down
45 changes: 22 additions & 23 deletions pontoon/insights/static/js/insights.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,33 +99,32 @@ var Pontoon = (function (my) {
},
},
scales: {
xAxes: [
{
gridLines: {
display: false,
},
ticks: {
source: 'data',
callback: (value) =>
shortMonthFormat.format(new Date(value)),
},
x: {
grid: {
display: false,
},
],
yAxes: [
{
gridLines: {
display: false,
ticks: {
source: 'data',
callback: function (value) {
return shortMonthFormat.format(new Date(value));
},
position: 'right',
ticks: {
beginAtZero: true,
maxTicksLimit: 3,
max: 100,
precision: 0,
callback: (value) => nf.format(value / 100),
},
},
y: {
grid: {
display: false,
},
position: 'right',
ticks: {
maxTicksLimit: 3,
precision: 0,
callback: function (value) {
return nf.format(value / 100);
},
},
],
beginAtZero: true,
max: 100,
},
},
},
});
Expand Down
28 changes: 7 additions & 21 deletions pontoon/insights/static/js/insights_charts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,27 +36,13 @@ var Pontoon = (function (my) {
});

// Set up default Chart.js configuration
Chart.defaults.global.defaultFontColor =
style.getPropertyValue('--light-grey-7');
Chart.defaults.global.defaultFontFamily = 'Open Sans';
Chart.defaults.global.defaultFontStyle = '100';
Chart.defaults.global.datasets.bar.barPercentage = 0.7;
Chart.defaults.global.datasets.bar.categoryPercentage = 0.7;
},
// Legend configuration doesn't allow for enough flexibility,
// so we build our own legend
// eslint-disable-next-line no-unused-vars
customLegend: (chart) => (chart) => {
harmitgoswami marked this conversation as resolved.
Show resolved Hide resolved
const labels = chart.data.datasets
.map((dataset) => {
const disabled = dataset.hidden ? 'disabled' : '';
const color = dataset.borderColor || dataset.backgroundColor;

return `<li class="${disabled}"><i class="icon" style="background-color:${color}"></i><span class="label">${dataset.label}</span></li>`;
})
.join('');

return `<ul>${labels}</ul>`;
Chart.defaults.color = style.getPropertyValue('--light-grey-7');
Chart.defaults.borderColor = style.getPropertyValue('--dark-grey-1');
Chart.defaults.font.family = 'Open Sans';
Chart.defaults.font.weight = '100'; // Chart.js uses 'weight' instead of 'style' for font
mathjazz marked this conversation as resolved.
Show resolved Hide resolved
Chart.defaults.plugins.legend.display = false;
Chart.defaults.datasets.bar.barPercentage = 0.7;
Chart.defaults.datasets.bar.categoryPercentage = 0.7;
},
// Custom legend item event handler
attachCustomLegendHandler: function (chart, selector) {
Expand Down
Loading
Loading