Fix: Prevent duplicate percentage values when switching between mobile and desktop in Tech Report

[Copilot]

Problem

When switching between mobile and desktop client views on the Tech Report page, percentage change indicators were being appended instead of replaced. This caused multiple percentage values to accumulate and display together, as shown in the issue screenshots.

For example, switching from mobile to desktop would result in displays like:

• ▼ -2.67% ▲ 5.26% ▼ -2.67% ▲ 5.26% ▼ -2.67% (instead of just the desktop values)

Root Cause

In the updateAppSummary() method in src/js/techreport/timeseries.js, when the client breakdown was changed, new monthchange span elements were being appended to breakdown cards without first removing the existing ones:

// Old code - just appends without cleanup
card.appendChild(monthChange);

This is different from the updateClientSummary() method, which clears the entire container (container.innerHTML = '') before rebuilding, preventing this issue.

Solution

Added cleanup logic to remove any existing .monthchange element before appending the new one:

/* Remove existing monthchange element if present */
const existingChange = card.querySelector('.monthchange');
if(existingChange) {
  existingChange.remove();
}

const monthChange = document.createElement('span');
monthChange.textContent = latestMoMStr;
monthChange.className = `monthchange ${styling?.color} ${styling?.direction}`;
card.appendChild(monthChange);

This ensures that only one percentage change indicator is displayed at a time, regardless of how many times the user switches between mobile and desktop views.

Testing

• ✅ Build passes successfully with webpack
• ✅ Minimal change - only 4 lines added to cleanup existing elements
• ✅ No impact on other functionality

Fixes the issue where percentage values were appended instead of replaced when changing client breakdown state.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Tech Report: Bug - percentage is appended instead of replaced, when changing state between mobile and desktop</issue_title>
<issue_description>go here

change mobile to desktop

you get the change in percentage appended, instead of replacing the previous one..

</issue_description>

<agent_instructions>the issue is about 'client-breakdown' switch not cleaning up properly the values in 'data-summary -> breakdown-item - breakdown-value' component related to a chart</agent_instructions>

Comments on the Issue (you are @copilot in this section)

Fixes #1139

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.