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 26 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.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-date-fns.bundle.min.js
View file
Open in desktop

Large diffs are not rendered by default.

102 changes: 54 additions & 48 deletions pontoon/contributors/static/js/profile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,14 @@ var Pontoon = (function (my) {
pointBackgroundColor:
style.getPropertyValue('--forest-green-1'),
pointHitRadius: 10,
pointRadius: 4,
pointRadius: 3.25,
pointHoverRadius: 6,
pointHoverBackgroundColor:
style.getPropertyValue('--forest-green-1'),
pointHoverBorderColor: style.getPropertyValue('--white-1'),
order: 2,
fill: true,
tension: 0.4,
},
{
type: 'line',
Expand All @@ -82,64 +84,68 @@ var Pontoon = (function (my) {
),
pointHoverBorderColor: style.getPropertyValue('--white-1'),
order: 1,
fill: true,
tension: 0.4,
},
],
},
options: {
legend: {
display: false,
},
tooltips: {
mode: 'index',
intersect: false,
borderColor: style.getPropertyValue('--status-translated'),
borderWidth: 1,
caretPadding: 5,
xPadding: 10,
yPadding: 10,
callbacks: {
label: function (items, chart) {
const label = chart.datasets[items.datasetIndex].label;
const value = nf.format(items.yLabel / 100);

return `${label}: ${value}`;
clip: false,
plugins: {
tooltip: {
mode: 'index',
intersect: false,
borderColor: style.getPropertyValue('--status-translated'),
borderWidth: 1,
caretPadding: 5,
padding: {
x: 10,
y: 10,
},
callbacks: {
labelColor: (context) => {
return Pontoon.insights.setLabelColor(context);
},
Copy link
Collaborator

Choose a reason for hiding this comment

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

You can drop the body braces and the word "return":

Suggested change
labelColor: (context) => {
return Pontoon.insights.setLabelColor(context);
},
labelColor: (context) =>
Pontoon.insights.setLabelColor(context),
},

The same applies for all other calls of this function.

label: function (context) {
const { parsed, chart, datasetIndex } = context;
const label = chart.data.datasets[datasetIndex].label;
const value = nf.format(parsed.y / 100);

return `${label}: ${value}`;
},
},
},
},
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,
},
position: 'right',
ticks: {
maxTicksLimit: 3,
precision: 0,
callback: (value) => nf.format(value / 100),
},
beginAtZero: true,
max: 100,
},
},
},
});
Expand Down
132 changes: 68 additions & 64 deletions pontoon/insights/static/js/insights.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,6 @@ const nf = new Intl.NumberFormat('en', {
style: 'percent',
});

const shortMonthFormat = new Intl.DateTimeFormat('en', {
month: 'short',
});

const longMonthFormat = new Intl.DateTimeFormat('en', {
month: 'long',
year: 'numeric',
Expand Down Expand Up @@ -56,90 +52,98 @@ var Pontoon = (function (my) {
borderWidth: item.name === 'All' ? 3 : 1,
pointBackgroundColor: color,
pointHitRadius: 10,
pointRadius: 4,
pointRadius: 3.25,
mathjazz marked this conversation as resolved.
Show resolved Hide resolved
pointHoverRadius: 6,
pointHoverBackgroundColor: color,
pointHoverBorderColor: style.getPropertyValue('--white-1'),
spanGaps: true,
fill: true,
tension: 0.4,
order: color.length - index,
};
});

const pretranslationQualityChart = new Chart(chart, {
new Chart(chart, {
type: 'bar',
data: {
labels: chart.data('dates'),
datasets: datasets,
},
options: {
legend: {
display: false,
},
legendCallback: Pontoon.insights.customLegend(chart),
tooltips: {
position: 'nearest',
mode: 'index',
intersect: false,
borderColor: style.getPropertyValue('--white-1'),
borderWidth: 1,
caretPadding: 5,
xPadding: 10,
yPadding: 10,
callbacks: {
label: function (items, chart) {
const label = chart.datasets[items.datasetIndex].label;
const value = nf.format(items.yLabel / 100);

return `${label}: ${value}`;
clip: false,
scales: {
x: {
type: 'time',
time: {
unit: 'month',
displayFormats: {
month: 'MMM',
},
tooltipFormat: 'MMMM yyyy',
},
title: function (items) {
const date = parseInt(items[0].label);
const title = longMonthFormat.format(new Date(date));
return `${title}`;
grid: {
display: false,
},
ticks: {
source: 'data',
},
},
},
scales: {
xAxes: [
{
gridLines: {
display: false,
},
ticks: {
source: 'data',
callback: (value) =>
shortMonthFormat.format(new Date(value)),
y: {
grid: {
display: false,
},
position: 'right',
ticks: {
maxTicksLimit: 3,
precision: 0,
callback: function (value) {
return nf.format(value / 100);
},
},
],
yAxes: [
{
gridLines: {
display: false,
beginAtZero: true,
max: 100,
},
},
plugins: {
htmlLegend: {
containerID: chart,
},
legend: {
display: false,
},
tooltip: {
position: 'nearest',
mode: 'index',
intersect: false,
borderColor: style.getPropertyValue('--white-1'),
borderWidth: 1,
caretPadding: 5,
padding: {
x: 10,
y: 10,
},
callbacks: {
labelColor: (context) => {
return Pontoon.insights.setLabelColor(context);
},
position: 'right',
ticks: {
beginAtZero: true,
maxTicksLimit: 3,
max: 100,
precision: 0,
callback: (value) => nf.format(value / 100),
label: function (context) {
const { chart, datasetIndex, parsed } = context;

const label = chart.data.datasets[datasetIndex].label;
const value = nf.format(parsed.y / 100);
return `${label}: ${value}`;
},
title: function (tooltipItems) {
const date = tooltipItems[0].parsed.x;
const title = longMonthFormat.format(new Date(date));
return title;
},
},
],
},
},
},
plugins: [Pontoon.insights.htmlLegendPlugin()],
});

// Render custom legend
const chartId = chart.attr('id');
chart
.parent()
.next('.legend')
.html(pretranslationQualityChart.generateLegend());
Pontoon.insights.attachCustomLegendHandler(
pretranslationQualityChart,
`#${chartId}-legend .label`,
);
},
},
});
Expand Down
Loading
Loading