Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

DEV: updates chart.js to 3.5.1 (#14107)

This commit is contained in:
Joffrey JAFFEUX 2021-08-23 13:49:49 +02:00 committed by GitHub
parent cb59681d86
commit d7c185bf3d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 160 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/assets/javascripts/admin/addon/components/admin-graph.js
View File

@ -27,14 +27,16 @@ export default Component.extend({
data: data, data: data,
options: { options: {
responsive: true, responsive: true,
tooltips: { plugins: {
callbacks: { tooltip: {
title: (context) => callbacks: {
moment(context[0].xLabel, "YYYY-MM-DD").format("LL"), title: (context) =>
moment(context[0].label, "YYYY-MM-DD").format("LL"),
},
}, },
}, },
scales: { scales: {
yAxes: [ y: [
{ {
display: true, display: true,
ticks: { ticks: {

25
app/assets/javascripts/admin/addon/components/admin-report-chart.js
View File

@ -112,14 +112,16 @@ export default Component.extend({
type: "line", type: "line",
data, data,
options: { options: {
tooltips: { plugins: {
callbacks: { tooltip: {
title: (tooltipItem) => callbacks: {
moment(tooltipItem[0].xLabel, "YYYY-MM-DD").format("LL"), title: (tooltipItem) =>
moment(tooltipItem[0].label, "YYYY-MM-DD").format("LL"),
},
},
legend: {
display: false,
}, },
},
legend: {
display: false,
}, },
responsive: true, responsive: true,
maintainAspectRatio: false, maintainAspectRatio: false,
@ -136,15 +138,10 @@ export default Component.extend({
}, },
}, },
scales: { scales: {
yAxes: [ y: [
{ {
display: true, display: true,
ticks: { ticks: {
userCallback: (label) => {
if (Math.floor(label) === label) {
return label;
}
},
callback: (label) => number(label), callback: (label) => number(label),
sampleSize: 5, sampleSize: 5,
maxRotation: 25, maxRotation: 25,
@ -152,7 +149,7 @@ export default Component.extend({
}, },
}, },
], ],
xAxes: [ x: [
{ {
display: true, display: true,
gridLines: { display: false }, gridLines: { display: false },

37
app/assets/javascripts/admin/addon/components/admin-report-stacked-chart.js
View File

@ -89,21 +89,24 @@ export default Component.extend({
animation: { animation: {
duration: 0, duration: 0,
}, },
tooltips: { plugins: {
mode: "index", tooltip: {
intersect: false, mode: "index",
callbacks: { intersect: false,
beforeFooter: (tooltipItem) => { callbacks: {
let total = 0; beforeFooter: (tooltipItem) => {
tooltipItem.forEach( let total = 0;
(item) => (total += parseInt(item.yLabel || 0, 10)) tooltipItem.forEach(
); (item) => (total += parseInt(item.parsed.y || 0, 10))
return `= ${total}`; );
return `= ${total}`;
},
title: (tooltipItem) =>
moment(tooltipItem[0].label, "YYYY-MM-DD").format("LL"),
}, },
title: (tooltipItem) =>
moment(tooltipItem[0].xLabel, "YYYY-MM-DD").format("LL"),
}, },
}, },
layout: { layout: {
padding: { padding: {
left: 0, left: 0,
@ -113,16 +116,11 @@ export default Component.extend({
}, },
}, },
scales: { scales: {
yAxes: [ y: [
{ {
stacked: true, stacked: true,
display: true, display: true,
ticks: { ticks: {
userCallback: (label) => {
if (Math.floor(label) === label) {
return label;
}
},
callback: (label) => number(label), callback: (label) => number(label),
sampleSize: 5, sampleSize: 5,
maxRotation: 25, maxRotation: 25,
@ -130,8 +128,7 @@ export default Component.extend({
}, },
}, },
], ],
x: [
xAxes: [
{ {
display: true, display: true,
gridLines: { display: false }, gridLines: { display: false },

4
app/assets/javascripts/discourse/app/lib/public-js-versions.js
View File

@ -4,9 +4,9 @@
export const PUBLIC_JS_VERSIONS = { export const PUBLIC_JS_VERSIONS = {
"ace/ace.js": "ace.js/1.4.12/ace.js", "ace/ace.js": "ace.js/1.4.12/ace.js",
"jsoneditor.js": "@json-editor/json-editor/2.5.2/jsoneditor.js", "jsoneditor.js": "@json-editor/json-editor/2.5.2/jsoneditor.js",
"Chart.min.js": "chart.js/2.9.4/Chart.min.js", "Chart.min.js": "chart.js/3.5.1/Chart.min.js",
"chartjs-plugin-datalabels.min.js": "chartjs-plugin-datalabels.min.js":
"chartjs-plugin-datalabels/0.7.0/chartjs-plugin-datalabels.min.js", "chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js",
"diffhtml.min.js": "diffhtml/1.0.0-beta.18/diffhtml.min.js", "diffhtml.min.js": "diffhtml/1.0.0-beta.18/diffhtml.min.js",
"jquery.magnific-popup.min.js": "jquery.magnific-popup.min.js":
"magnific-popup/1.1.0/jquery.magnific-popup.min.js", "magnific-popup/1.1.0/jquery.magnific-popup.min.js",

2
app/assets/javascripts/discourse/tests/acceptance/admin-search-log-term-test.js
View File

@ -9,7 +9,7 @@ acceptance("Admin - Search Log Term", function (needs) {
await visit("/admin/logs/search_logs/term?term=ruby"); await visit("/admin/logs/search_logs/term?term=ruby");
assert.ok(exists(".search-logs-filter"), "has the search type filter"); assert.ok(exists(".search-logs-filter"), "has the search type filter");
assert.ok(exists("canvas.chartjs-render-monitor"), "has graph canvas"); assert.ok(exists("canvas"), "has graph canvas");
assert.ok(exists("div.header-search-results"), "has header search results"); assert.ok(exists("div.header-search-results"), "has header search results");
}); });
}); });

4
package.json
View File

@ -19,8 +19,8 @@
"blueimp-file-upload": "10.13.0", "blueimp-file-upload": "10.13.0",
"bootbox": "3.2.0", "bootbox": "3.2.0",
"bootstrap": "v3.4.1", "bootstrap": "v3.4.1",
"chart.js": "2.9.4", "chart.js": "3.5.1",
"chartjs-plugin-datalabels": "^0.7.0", "chartjs-plugin-datalabels": "^2.0.0",
"diffhtml": "^1.0.0-beta.18", "diffhtml": "^1.0.0-beta.18",
"eslint-config-discourse": "^1.1.8", "eslint-config-discourse": "^1.1.8",
"handlebars": "^4.7.7", "handlebars": "^4.7.7",

14
plugins/poll/assets/javascripts/components/poll-breakdown-chart.js.es6
View File

@ -5,6 +5,7 @@ import discourseComputed from "discourse-common/utils/decorators";
import { getColors } from "discourse/plugins/poll/lib/chart-colors"; import { getColors } from "discourse/plugins/poll/lib/chart-colors";
import { htmlSafe } from "@ember/template"; import { htmlSafe } from "@ember/template";
import { mapBy } from "@ember/object/computed"; import { mapBy } from "@ember/object/computed";
import { next } from "@ember/runloop";
export default Component.extend({ export default Component.extend({
// Arguments: // Arguments:
@ -92,6 +93,7 @@ export default Component.extend({
}, },
options: { options: {
plugins: { plugins: {
tooltip: false,
datalabels: { datalabels: {
color: "#333", color: "#333",
backgroundColor: "rgba(255, 255, 255, 0.5)", backgroundColor: "rgba(255, 255, 255, 0.5)",
@ -122,10 +124,14 @@ export default Component.extend({
responsive: true, responsive: true,
aspectRatio: 1.1, aspectRatio: 1.1,
animation: { duration: 0 }, animation: { duration: 0 },
tooltips: false,
// wrapping setHighlightedOption in next block as hover can create many events
// prevents two sets to happen in the same computation
onHover: (event, activeElements) => { onHover: (event, activeElements) => {
if (!activeElements.length) { if (!activeElements.length) {
this.setHighlightedOption(null); next(() => {
this.setHighlightedOption(null);
});
return; return;
} }
@ -137,7 +143,9 @@ export default Component.extend({
// Clear the array to avoid issues in Chart.js // Clear the array to avoid issues in Chart.js
activeElements.length = 0; activeElements.length = 0;
this.setHighlightedOption(Number(optionIndex)); next(() => {
this.setHighlightedOption(Number(optionIndex));
});
}, },
}, },
}; };

1
plugins/poll/assets/javascripts/controllers/poll-breakdown.js.es6
View File

@ -47,7 +47,6 @@ export default Controller.extend(ModalFunctionality, {
loadScript("/javascripts/Chart.min.js") loadScript("/javascripts/Chart.min.js")
.then(() => loadScript("/javascripts/chartjs-plugin-datalabels.min.js")) .then(() => loadScript("/javascripts/chartjs-plugin-datalabels.min.js"))
.then(() => { .then(() => {
window.Chart.plugins.unregister(window.ChartDataLabels);
this.fetchGroupedPollData(); this.fetchGroupedPollData();
}); });
}, },

82
plugins/poll/assets/javascripts/widgets/discourse-poll.js.es6
View File

@ -465,17 +465,19 @@ createWidget("discourse-poll-pie-canvas", {
loadScript("/javascripts/Chart.min.js").then(() => { loadScript("/javascripts/Chart.min.js").then(() => {
const data = attrs.poll.options.mapBy("votes"); const data = attrs.poll.options.mapBy("votes");
const labels = attrs.poll.options.mapBy("html"); const labels = attrs.poll.options.mapBy("html");
const config = pieChartConfig(data, labels); const config = pieChartConfig(data, labels, {
legendContainerId: `poll-results-legend-${attrs.id}`,
});
const el = document.getElementById(`poll-results-chart-${attrs.id}`); const el = document.getElementById(`poll-results-chart-${attrs.id}`);
// eslint-disable-next-line this._chart = new Chart(el.getContext("2d"), config);
let chart = new Chart(el.getContext("2d"), config);
document.getElementById(
`poll-results-legend-${attrs.id}`
).innerHTML = chart.generateLegend();
}); });
}, },
willRerenderWidget() {
this._chart?.destroy();
},
buildAttributes(attrs) { buildAttributes(attrs) {
return { return {
id: `poll-results-chart-${attrs.id}`, id: `poll-results-chart-${attrs.id}`,
@ -497,15 +499,54 @@ createWidget("discourse-poll-pie-chart", {
const chart = this.attach("discourse-poll-pie-canvas", attrs); const chart = this.attach("discourse-poll-pie-canvas", attrs);
contents.push(chart); contents.push(chart);
contents.push(h(`div#poll-results-legend-${attrs.id}.pie-chart-legends`)); contents.push(h(`ul#poll-results-legend-${attrs.id}.pie-chart-legends`));
return contents; return contents;
}, },
}); });
const htmlLegendPlugin = {
id: "htmlLegend",
afterUpdate(chart, args, options) {
const ul = document.getElementById(options.containerID);
ul.innerHTML = "";
const items = chart.options.plugins.legend.labels.generateLabels(chart);
items.forEach((item) => {
const li = document.createElement("li");
li.classList.add("legend");
li.onclick = () => {
chart.toggleDataVisibility(item.index);
chart.update();
};
const boxSpan = document.createElement("span");
boxSpan.classList.add("swatch");
boxSpan.style.background = item.fillStyle;
const textContainer = document.createElement("span");
textContainer.style.color = item.fontColor;
textContainer.innerHTML = item.text;
if (!chart.getDataVisibility(item.index)) {
li.style.opacity = 0.2;
} else {
li.style.opacity = 1.0;
}
li.appendChild(boxSpan);
li.appendChild(textContainer);
ul.appendChild(li);
});
},
};
function pieChartConfig(data, labels, opts = {}) { function pieChartConfig(data, labels, opts = {}) {
const aspectRatio = "aspectRatio" in opts ? opts.aspectRatio : 2.2; const aspectRatio = "aspectRatio" in opts ? opts.aspectRatio : 2.2;
const strippedLabels = labels.map((l) => stripHtml(l)); const strippedLabels = labels.map((l) => stripHtml(l));
return { return {
type: PIE_CHART_TYPE, type: PIE_CHART_TYPE,
data: { data: {
@ -517,18 +558,29 @@ function pieChartConfig(data, labels, opts = {}) {
], ],
labels: strippedLabels, labels: strippedLabels,
}, },
plugins: [htmlLegendPlugin],
options: { options: {
responsive: true, responsive: true,
aspectRatio, aspectRatio,
animation: { duration: 0 }, animation: { duration: 0 },
legend: { display: false }, plugins: {
legendCallback: function (chart) { legend: {
let legends = ""; labels: {
for (let i = 0; i < labels.length; i++) { generateLabels: function (chart) {
legends += `<div class="legend"><span class="swatch" style="background-color: return labels.map((text, index) => {
${chart.data.datasets[0].backgroundColor[i]}"></span>${labels[i]}</div>`; return {
} fillStyle: getColors(data.length)[index],
return legends; text,
index,
};
});
},
},
display: false,
},
htmlLegend: {
containerID: opts?.legendContainerId,
},
}, },
}, },
}; };

16
plugins/poll/assets/stylesheets/common/poll.scss
View File

@ -130,18 +130,24 @@ div.poll {
} }
.pie-chart-legends { .pie-chart-legends {
display: flex;
justify-content: center;
text-align: center; text-align: center;
margin-top: 0.5em; margin-top: 0.5em;
.legend { .legend {
display: inline-block; align-items: center;
margin: 4px 0 4px 14px; cursor: pointer;
display: flex;
flex-direction: row;
margin-left: 1em;
font-size: var(--font-down-0);
.swatch { .swatch {
margin-right: 0.5em;
display: inline-block; display: inline-block;
width: 24px; height: 16px;
height: 12px; width: 16px;
margin-right: 4px;
} }
} }
} }

7
public/javascripts/chart.js/2.9.3/Chart.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
public/javascripts/chart.js/2.9.4/Chart.min.js vendored
View File

File diff suppressed because one or more lines are too long

13
public/javascripts/chart.js/3.5.1/Chart.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

7
public/javascripts/chartjs-plugin-datalabels/0.7.0/chartjs-plugin-datalabels.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
public/javascripts/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

40
yarn.lock
View File

@ -1063,33 +1063,15 @@ chardet@^0.7.0:
resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
chart.js@2.9.4: chart.js@3.5.1:
version "2.9.4" version "3.5.1"
resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-2.9.4.tgz#0827f9563faffb2dc5c06562f8eb10337d5b9684" resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.5.1.tgz#73e24d23a4134a70ccdb5e79a917f156b6f3644a"
integrity sha512-B07aAzxcrikjAPyV+01j7BmOpxtQETxTSlQ26BEYJ+3iUkbNKaOJ/nDbT6JjyqYxseM0ON12COHYdU2cTIjC7A== integrity sha512-m5kzt72I1WQ9LILwQC4syla/LD/N413RYv2Dx2nnTkRS9iv/ey1xLTt0DnPc/eWV4zI+BgEgDYBIzbQhZHc/PQ==
dependencies:
chartjs-color "^2.1.0"
moment "^2.10.2"
chartjs-color-string@^0.6.0: chartjs-plugin-datalabels@^2.0.0:
version "0.6.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/chartjs-color-string/-/chartjs-color-string-0.6.0.tgz#1df096621c0e70720a64f4135ea171d051402f71" resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.0.0.tgz#caacefb26803d968785071eab012dde8746c5939"
integrity sha512-TIB5OKn1hPJvO7JcteW4WY/63v6KwEdt6udfnDE9iCAZgy+V4SrbSxoIbTw/xkUIapjEI4ExGtD0+6D3KyFd7A== integrity sha512-WBsWihphzM0Y8fmQVm89+iy99mmgejmj5/jcsYqwxSioLRL/zqJ4Scv/eXq5ZqvG3TpojlGzZLeaOaSvDm7fwA==
dependencies:
color-name "^1.0.0"
chartjs-color@^2.1.0:
version "2.4.1"
resolved "https://registry.yarnpkg.com/chartjs-color/-/chartjs-color-2.4.1.tgz#6118bba202fe1ea79dd7f7c0f9da93467296c3b0"
integrity sha512-haqOg1+Yebys/Ts/9bLo/BqUcONQOdr/hoEr2LLTRl6C5LXctUdHxsCYfvQVg5JIxITrfCNUDr4ntqmQk9+/0w==
dependencies:
chartjs-color-string "^0.6.0"
color-convert "^1.9.3"
chartjs-plugin-datalabels@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-0.7.0.tgz#f72e44edb2db45ef68913e9320bcc50398a205e6"
integrity sha512-PKVUX14nYhH0wcdCpgOoC39Gbzvn6cZ7O9n+bwc02yKD9FTnJ7/TSrBcfebmolFZp1Rcicr9xbT0a5HUbigS7g==
chrome-launcher@^0.12.0: chrome-launcher@^0.12.0:
version "0.12.0" version "0.12.0"
@ -1188,7 +1170,7 @@ collection-visit@^1.0.0:
map-visit "^1.0.0" map-visit "^1.0.0"
object-visit "^1.0.0" object-visit "^1.0.0"
color-convert@^1.9.0, color-convert@^1.9.3: color-convert@^1.9.0:
version "1.9.3" version "1.9.3"
resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@ -1207,7 +1189,7 @@ color-name@1.1.3:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=
color-name@^1.0.0, color-name@~1.1.4: color-name@~1.1.4:
version "1.1.4" version "1.1.4"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
@ -3144,7 +3126,7 @@ moment@2.29.1:
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.1.tgz#b2be769fa31940be9eeea6469c075e35006fa3d3"
integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ== integrity sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==
"moment@>= 2.9.0", moment@^2.10.2: "moment@>= 2.9.0":
version "2.29.0" version "2.29.0"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.0.tgz#fcbef955844d91deb55438613ddcec56e86a3425" resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.0.tgz#fcbef955844d91deb55438613ddcec56e86a3425"
integrity sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA== integrity sha512-z6IJ5HXYiuxvFTI6eiQ9dm77uE0gyy1yXNApVHqTcnIKfY9tIwEjlzsZ6u1LQXvVgKeTnv9Xm7NDvJ7lso3MtA==