Skip to content
Open
Show file tree
Hide file tree
Changes from 5 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
688 changes: 454 additions & 234 deletions package-lock.json

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -52,14 +52,14 @@
"select2": "4.0.13"
},
"devDependencies": {
"autoprefixer": "^10.5.0",
"eslint": "^10.5.0",
"autoprefixer": "^10.5.4",
"eslint": "^10.7.0",
"eslint-plugin-compat": "^7.0.2",
"globals": "^17.6.0",
"postcss": "^8.5.15",
"globals": "^17.7.0",
"postcss": "^8.5.19",
"postcss-cli": "^11.0.1",
"prettier": "^3.8.4",
"xo": "^3.0.2"
"prettier": "^3.9.5",
"xo": "^4.0.0"
},
"browserslist": [
">= 0.5%",
Expand Down
80 changes: 40 additions & 40 deletions scripts/js/charts.js
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ globalThis.THEME_COLORS = [

globalThis.htmlLegendPlugin = {
id: "htmlLegend",
afterUpdate(chart, args, options) {
afterUpdate(chart, arguments_, options) {
// Use the built-in legendItems generator
const items = chart.options.plugins.legend.labels.generateLabels(chart);

Expand All @@ -39,9 +39,9 @@ globalThis.htmlLegendPlugin = {
options.lastLegendItems &&
items.length === options.lastLegendItems.length &&
items.every(
(item, i) =>
item.text === options.lastLegendItems[i].text &&
item.hidden === options.lastLegendItems[i].hidden
(item, index) =>
item.text === options.lastLegendItems[index].text &&
item.hidden === options.lastLegendItems[index].hidden
);

if (isLegendUnchanged) {
Expand Down Expand Up @@ -144,40 +144,40 @@ globalThis.htmlLegendPlugin = {
globalThis.customTooltips = context => {
const tooltip = context.tooltip;
const canvasId = context.chart.canvas.id;
const tooltipEl = getOrCreateTooltipElement(canvasId, tooltip.options, context);
const tooltipElement = getOrCreateTooltipElement(canvasId, tooltip.options, context);

// Hide if no tooltip
if (tooltip.opacity === 0) {
tooltipEl.style.opacity = 0;
tooltipElement.style.opacity = 0;
return;
}

// Set caret position
setTooltipCaretPosition(tooltipEl, tooltip);
setTooltipCaretPosition(tooltipElement, tooltip);

// Set tooltip content
if (tooltip.body) {
setTooltipContent(tooltipEl, tooltip);
setTooltipContent(tooltipElement, tooltip);
}

// Position tooltip
positionTooltip(tooltipEl, tooltip, context);
positionTooltip(tooltipElement, tooltip, context);

// Make tooltip visible
tooltipEl.style.opacity = 1;
tooltipElement.style.opacity = 1;
};

function getOrCreateTooltipElement(canvasId, options, context) {
let tooltipEl = document.getElementById(`${canvasId}-customTooltip`);
if (tooltipEl) {
return tooltipEl;
let tooltipElement = document.getElementById(`${canvasId}-customTooltip`);
if (tooltipElement) {
return tooltipElement;
}

// Create Tooltip Element once per chart
tooltipEl = document.createElement("div");
tooltipEl.id = `${canvasId}-customTooltip`;
tooltipEl.className = "chartjs-tooltip";
tooltipEl.innerHTML = '<div class="arrow"></div> <table></table>';
tooltipElement = document.createElement("div");
tooltipElement.id = `${canvasId}-customTooltip`;
tooltipElement.className = "chartjs-tooltip";
tooltipElement.innerHTML = '<div class="arrow"></div> <table></table>';

// Avoid browser's font-zoom since we know that <body>'s
// font-size was set to 14px by Bootstrap's CSS
Expand All @@ -187,7 +187,7 @@ function getOrCreateTooltipElement(canvasId, options, context) {
const fontZoom = Number.parseFloat(getComputedStyle(document.body).fontSize) / 14;

// Set styles and font
tooltipEl.style.cssText = `
tooltipElement.style.cssText = `
padding: ${options.padding}px ${options.padding}px;
border-radius: ${options.cornerRadius}px;
font: ${options.bodyFont.string};
Expand All @@ -197,18 +197,18 @@ function getOrCreateTooltipElement(canvasId, options, context) {
`;

// Append Tooltip next to canvas-containing box
tooltipEl.ancestor = context.chart.canvas.closest(".box[id]").parentNode;
tooltipEl.ancestor.append(tooltipEl);
tooltipElement.ancestor = context.chart.canvas.closest(".box[id]").parentNode;
tooltipElement.ancestor.append(tooltipElement);

return tooltipEl;
return tooltipElement;
}

function setTooltipCaretPosition(tooltipEl, tooltip) {
tooltipEl.classList.remove("left", "right", "center", "top", "bottom");
tooltipEl.classList.add(tooltip.xAlign, tooltip.yAlign);
function setTooltipCaretPosition(tooltipElement, tooltip) {
tooltipElement.classList.remove("left", "right", "center", "top", "bottom");
tooltipElement.classList.add(tooltip.xAlign, tooltip.yAlign);
}

function setTooltipContent(tooltipEl, tooltip) {
function setTooltipContent(tooltipElement, tooltip) {
const bodyLines = tooltip.body.map(bodyItem => bodyItem.lines);
if (bodyLines.length === 0) {
return;
Expand All @@ -226,18 +226,18 @@ function setTooltipContent(tooltipEl, tooltip) {
const devicePixel = (1 / window.devicePixelRatio).toFixed(1);
let printed = 0;

for (const [i, body] of bodyLines.entries()) {
const labelColors = tooltip.labelColors[i];
for (const [index, body] of bodyLines.entries()) {
const labelColors = tooltip.labelColors[index];
const style =
`background-color: ${labelColors.backgroundColor}; ` +
`outline: 1px solid ${labelColors.backgroundColor}; ` +
`border: ${devicePixel}px solid #fff`;
const span = `<span class="chartjs-tooltip-key" style="${style}"></span>`;

const num = body[0].split(": ");
const number_ = body[0].split(": ");
// Do not display entries with value of 0 in bar chart,
// but pass through entries with "0.0%" (in pie charts)
if (num[1] !== "0") {
if (number_[1] !== "0") {
tooltipHtml += `<tr><td>${span}${body}</td></tr>`;
printed++;
}
Expand All @@ -249,21 +249,21 @@ function setTooltipContent(tooltipEl, tooltip) {

tooltipHtml += "</tbody>";

const tableRoot = tooltipEl.querySelector("table");
const tableRoot = tooltipElement.querySelector("table");
tableRoot.innerHTML = tooltipHtml;
}

function positionTooltip(tooltipEl, tooltip, context) {
if (tooltip.opacity === 0 || tooltipEl.style.opacity === 0) {
function positionTooltip(tooltipElement, tooltip, context) {
if (tooltip.opacity === 0 || tooltipElement.style.opacity === 0) {
return;
}

const canvasPos = context.chart.canvas.getBoundingClientRect();
const boxPos = tooltipEl.ancestor.getBoundingClientRect();
const boxPos = tooltipElement.ancestor.getBoundingClientRect();
const offsetX = canvasPos.left - boxPos.left;
const offsetY = canvasPos.top - boxPos.top;
const tooltipWidth = tooltipEl.offsetWidth;
const tooltipHeight = tooltipEl.offsetHeight;
const tooltipWidth = tooltipElement.offsetWidth;
const tooltipHeight = tooltipElement.offsetHeight;
const { caretX, caretY } = tooltip;
const { caretPadding } = tooltip.options;
const arrowMinIndent = 2 * tooltip.options.cornerRadius;
Expand Down Expand Up @@ -323,7 +323,7 @@ function positionTooltip(tooltipEl, tooltip, context) {

// Adjust X position if tooltip is centered inside ancestor
if (document.documentElement.clientWidth <= 2 * tooltip.width && tooltip.xAlign === "center") {
tooltipX = (tooltipEl.ancestor.offsetWidth - tooltipWidth) / 2;
tooltipX = (tooltipElement.ancestor.offsetWidth - tooltipWidth) / 2;
tooltipX = Math.max(tooltipX, offsetX + caretX - arrowMinIndent); // Prevent left overflow
tooltipX = Math.min(tooltipX, offsetX + caretX - tooltipWidth + arrowMinIndent); // Prevent right overflow
arrowX = offsetX + caretX - tooltipX;
Expand Down Expand Up @@ -367,11 +367,11 @@ function positionTooltip(tooltipEl, tooltip, context) {
}

// Position tooltip and display
tooltipEl.style.top = `${tooltipY.toFixed(1)}px`;
tooltipEl.style.left = `${tooltipX.toFixed(1)}px`;
tooltipElement.style.top = `${tooltipY.toFixed(1)}px`;
tooltipElement.style.left = `${tooltipX.toFixed(1)}px`;

// Set arrow position
const arrowEl = tooltipEl.querySelector(".arrow");
const arrowElement = tooltipElement.querySelector(".arrow");
let arrowLeftPosition = "";

if (arrowX !== undefined) {
Expand All @@ -381,7 +381,7 @@ function positionTooltip(tooltipEl, tooltip, context) {
arrowLeftPosition = `${arrowXpercent}%`;
}

arrowEl.style.left = arrowLeftPosition;
arrowElement.style.left = arrowLeftPosition;
}

globalThis.doughnutTooltip = tooltipLabel => {
Expand Down
Loading
Loading