ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Avoid innerHTML for lovely-chart text (#6958)

Browse Source
This commit is contained in:
Alexander Zinchuk 2026-06-01 01:15:27 +02:00
parent fcf7b45a6f
commit 1c9d35c634
4 changed files with 54 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/lovely-chart/Header.js
View File

@ -18,7 +18,7 @@ export function createHeader(container, title, zoomOutLabel = 'Zoom out', zoomOu
return; return;
} }
_captionElement.innerHTML = caption; _captionElement.textContent = caption;
} }
function zoom(caption) { function zoom(caption) {
@ -40,7 +40,7 @@ export function createHeader(container, title, zoomOutLabel = 'Zoom out', zoomOu
_titleElement = createElement(); _titleElement = createElement();
_titleElement.className = 'lovely-chart--header-title'; _titleElement.className = 'lovely-chart--header-title';
_titleElement.innerHTML = title; _titleElement.textContent = title;
_element.appendChild(_titleElement); _element.appendChild(_titleElement);
_captionElement = createElement(); _captionElement = createElement();

10
src/lib/lovely-chart/Tools.js
View File

@ -38,7 +38,15 @@ export function createTools(container, data, filterCallback) {
control.dataset.key = key; control.dataset.key = key;
const darkContent = isColorCloseToWhite(data.colors[key]) ? ' lovely-chart--dark-content' : ''; const darkContent = isColorCloseToWhite(data.colors[key]) ? ' lovely-chart--dark-content' : '';
control.className = `lovely-chart--button lovely-chart--color-${data.colors[key].slice(1)} lovely-chart--state-checked${darkContent}`; control.className = `lovely-chart--button lovely-chart--color-${data.colors[key].slice(1)} lovely-chart--state-checked${darkContent}`;
control.innerHTML = `<span class="lovely-chart--button-check"></span><span class="lovely-chart--button-label">${name}</span>`;
const check = createElement('span');
check.className = 'lovely-chart--button-check';
control.appendChild(check);
const label = createElement('span');
label.className = 'lovely-chart--button-label';
label.textContent = name;
control.appendChild(label);
control.addEventListener('click', (e) => { control.addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();

54
src/lib/lovely-chart/Tooltip.js
View File

@ -324,10 +324,14 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
} }
const currentTitle = titleContainer.querySelector(':not(.lovely-chart--state-hidden)'); const currentTitle = titleContainer.querySelector(':not(.lovely-chart--state-hidden)');
if (!titleContainer.innerHTML || !currentTitle) { if (!titleContainer.textContent || !currentTitle) {
titleContainer.innerHTML = `<span>${title}</span>`; titleContainer.textContent = '';
const newTitle = createElement('span');
newTitle.textContent = title;
titleContainer.appendChild(newTitle);
} else { } else {
currentTitle.innerHTML = title; currentTitle.textContent = title;
} }
} }
} }
@ -340,7 +344,16 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
newDataSet.className = 'lovely-chart--tooltip-dataset'; newDataSet.className = 'lovely-chart--tooltip-dataset';
newDataSet.setAttribute('data-present', 'true'); newDataSet.setAttribute('data-present', 'true');
newDataSet.setAttribute('data-name', name); newDataSet.setAttribute('data-name', name);
newDataSet.innerHTML = `<span class="lovely-chart--dataset-title">${name}</span><span class="${className}">${_formatValue(value)}</span>`; const titleElement = createElement('span');
titleElement.className = 'lovely-chart--dataset-title';
titleElement.textContent = name;
newDataSet.appendChild(titleElement);
const valueElement = createElement('span');
valueElement.className = className;
valueElement.textContent = _formatValue(value);
newDataSet.appendChild(valueElement);
_renderPercentageValue(newDataSet, value, totalValue); _renderPercentageValue(newDataSet, value, totalValue);
const totalText = dataSetContainer.querySelector(`[data-total="true"]`); const totalText = dataSetContainer.querySelector(`[data-total="true"]`);
@ -357,7 +370,7 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
const valueElement = currentDataSet.querySelector(`.lovely-chart--tooltip-dataset-value`); const valueElement = currentDataSet.querySelector(`.lovely-chart--tooltip-dataset-value`);
if (valueElement) { if (valueElement) {
valueElement.innerHTML = _formatValue(value); valueElement.textContent = _formatValue(value);
} }
_renderPercentageValue(currentDataSet, value, totalValue); _renderPercentageValue(currentDataSet, value, totalValue);
@ -383,10 +396,10 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
if (!percentageElement) { if (!percentageElement) {
const newPercentageTitle = createElement('span'); const newPercentageTitle = createElement('span');
newPercentageTitle.className = 'lovely-chart--percentage-title lovely-chart--position-left'; newPercentageTitle.className = 'lovely-chart--percentage-title lovely-chart--position-left';
newPercentageTitle.innerHTML = `${percentageValue}%`; newPercentageTitle.textContent = `${percentageValue}%`;
dataSet.prepend(newPercentageTitle); dataSet.prepend(newPercentageTitle);
} else { } else {
percentageElement.innerHTML = `${percentageValue}%`; percentageElement.textContent = `${percentageValue}%`;
} }
} }
@ -412,7 +425,8 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
const finalStatistics = data.isPie ? limitedStatistics.filter(({ value }, index) => _isPieSectorSelected(statistics, value, totalValue, index, pointerVector)) : limitedStatistics; const finalStatistics = data.isPie ? limitedStatistics.filter(({ value }, index) => _isPieSectorSelected(statistics, value, totalValue, index, pointerVector)) : limitedStatistics;
finalStatistics.forEach((statItem) => { finalStatistics.forEach((statItem) => {
const currentDataSet = dataSetContainer.querySelector(`[data-name="${statItem.name}"]`); const currentDataSet = Array.from(dataSetContainer.children)
.find((element) => element.dataset.name === statItem.name);
if (!currentDataSet) { if (!currentDataSet) {
_insertNewDataSet(dataSetContainer, statItem, totalValue); _insertNewDataSet(dataSetContainer, statItem, totalValue);
@ -453,13 +467,21 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
newTotalText.className = 'lovely-chart--tooltip-dataset lovely-chart--tooltip-dataset-total'; newTotalText.className = 'lovely-chart--tooltip-dataset lovely-chart--tooltip-dataset-total';
newTotalText.setAttribute('data-present', 'true'); newTotalText.setAttribute('data-present', 'true');
newTotalText.setAttribute('data-total', 'true'); newTotalText.setAttribute('data-total', 'true');
newTotalText.innerHTML = `<span>Total</span><span class="${className}">${totalValue}</span>`; const titleElement = createElement('span');
titleElement.textContent = 'Total';
newTotalText.appendChild(titleElement);
const valueElement = createElement('span');
valueElement.className = className;
valueElement.textContent = totalValue;
newTotalText.appendChild(valueElement);
dataSetContainer.appendChild(newTotalText); dataSetContainer.appendChild(newTotalText);
} else { } else {
totalText.setAttribute('data-present', 'true'); totalText.setAttribute('data-present', 'true');
const valueElement = totalText.querySelector(`.lovely-chart--tooltip-dataset-value:not(.lovely-chart--state-hidden)`); const valueElement = totalText.querySelector(`.lovely-chart--tooltip-dataset-value:not(.lovely-chart--state-hidden)`);
valueElement.innerHTML = totalValue; valueElement.textContent = totalValue;
} }
} }
@ -475,13 +497,21 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
newTotalText.className = 'lovely-chart--tooltip-dataset lovely-chart--tooltip-dataset-total'; newTotalText.className = 'lovely-chart--tooltip-dataset lovely-chart--tooltip-dataset-total';
newTotalText.setAttribute('data-present', 'true'); newTotalText.setAttribute('data-present', 'true');
newTotalText.setAttribute('data-total', 'true'); newTotalText.setAttribute('data-total', 'true');
newTotalText.innerHTML = `<span>${label}</span><span class="${className}">${prefix}${secondaryValue}${suffix}</span>`; const titleElement = createElement('span');
titleElement.textContent = label;
newTotalText.appendChild(titleElement);
const valueElement = createElement('span');
valueElement.className = className;
valueElement.textContent = `${prefix}${secondaryValue}${suffix}`;
newTotalText.appendChild(valueElement);
dataSetContainer.appendChild(newTotalText); dataSetContainer.appendChild(newTotalText);
} else { } else {
totalText.setAttribute('data-present', 'true'); totalText.setAttribute('data-present', 'true');
const valueElement = totalText.querySelector(`.lovely-chart--tooltip-dataset-value:not(.lovely-chart--state-hidden)`); const valueElement = totalText.querySelector(`.lovely-chart--tooltip-dataset-value:not(.lovely-chart--state-hidden)`);
valueElement.innerHTML = `${prefix}${secondaryValue}${suffix}`; valueElement.textContent = `${prefix}${secondaryValue}${suffix}`;
} }
} }

2
src/lib/lovely-chart/toggleText.js
View File

@ -6,7 +6,7 @@ export function toggleText(element, newText, className = '', inverse = false) {
const newElement = createElement(element.tagName); const newElement = createElement(element.tagName);
newElement.className = `${className} lovely-chart--transition lovely-chart--position-${inverse ? 'top' : 'bottom'} lovely-chart--state-hidden`; newElement.className = `${className} lovely-chart--transition lovely-chart--position-${inverse ? 'top' : 'bottom'} lovely-chart--state-hidden`;
newElement.innerHTML = newText; newElement.textContent = newText;
const selector = className.length ? `.${className.split(' ').join('.')}` : ''; const selector = className.length ? `.${className.split(' ').join('.')}` : '';
const oldElements = container.querySelectorAll(`${selector}.lovely-chart--state-hidden`); const oldElements = container.querySelectorAll(`${selector}.lovely-chart--state-hidden`);