Skip to content

Commit

Permalink
Upgraded Chart.js to version 4.4.2 (#3233)
Browse files Browse the repository at this point in the history 
* Upgraded Chart.js to v4.4.2

* Got chart legends to appear again, with incorrect CSS

* Fixed major chart legend styling issues

* Added cubic interpolation and gradients back

* Removed chart variable assignments that caused linting errors

* Changed to local import for Chart.js, Moment.js, and Chart-adapter-Moment.js

* Loaded Chart.js through Django pipeline instead of base.html

* Fixed major styling bugs for locale/insights charts

* Fixed linting issue in insights_tab

* Fixed major styling issues for insights charts

* Fixed linting errors

* Fixed profile chart styling, clipping issues for all graphs

* Fixed formatting issue in Profile.js

* Fixed styling issues for tooltips on all charts

* Fixed tooltip label styling, disabled graphs bug

* fixed rander issue for insights and date formatting

* linting fixes

* Refactored HTML Legend logic

* linting fixes

* fixed display bug for insights charts

* Changed moment.js to date-fns.js

* Fixed tooltip import for date-fns and alt-click legned bug

* Improved line visibility on insights chart, standardized thousands seperator for all locales

* Implemented review comments, refactored labelColor for tooltips

* Refactored logic for changing tooltip label colors

* Refactored htmlLegendPlugin logic for better code readability

* Simplified anonymous function calls for setLabelColor

---------

Co-authored-by: Harmit Goswami <hgoswami@LH7VKLQY46.local>
Co-authored-by: Harmit Goswami <hgoswami@MacBook-Pro.local>
  • Loading branch information
@harmitgoswami
3 people committed May 30, 2024
1 parent a3e5252 commit d9679bb
Show file tree
Hide file tree
Showing 8 changed files with 688 additions and 21,382 deletions.
20,776 changes: 0 additions & 20,776 deletions pontoon/base/static/js/lib/Chart.bundle.js
View file

This file was deleted.

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

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

Large diffs are not rendered by default.

101 changes: 53 additions & 48 deletions pontoon/contributors/static/js/profile.js
View file
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,67 @@ 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) =>
Pontoon.insights.setLabelColor(context),
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
131 changes: 67 additions & 64 deletions pontoon/insights/static/js/insights.js
View file
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,97 @@ var Pontoon = (function (my) {
borderWidth: item.name === 'All' ? 3 : 1,
pointBackgroundColor: color,
pointHitRadius: 10,
pointRadius: 4,
pointRadius: 3.25,
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',
},
grid: {
display: false,
},
title: function (items) {
const date = parseInt(items[0].label);
const title = longMonthFormat.format(new Date(date));
return `${title}`;
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) =>
Pontoon.insights.setLabelColor(context),
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}`;
},
position: 'right',
ticks: {
beginAtZero: true,
maxTicksLimit: 3,
max: 100,
precision: 0,
callback: (value) => nf.format(value / 100),
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

0 comments on commit d9679bb

Please sign in to comment.