feat(admin-portal): add configurable week range selector

[mschilling]

Summary

• Add configurable week range selector (4w / 10w / 26w / 52w) to the trends filter bar
• weekCount converted from static value to signal, pill buttons trigger API reload
• No backend changes — API already supported the weeks query parameter

Test plan

• nx build admin-portal passes
• Week selector pills render in filter bar (right-aligned)
• Selecting a different week range reloads data from API
• Subtitle updates to reflect selected week count
• Active pill highlighted correctly
• Works in light + dark mode

[Copilot]

Pull request overview

Migrates the Admin Portal “Trends” charts from chart.js/ng2-charts to echarts via ngx-echarts, aligning chart rendering with the option-based ECharts API and updating the Trends UI with a week-range selector and redesigned Top Movers.

Changes:

• Replace Chart.js directives/config with ECharts options + NgxEchartsDirective across the three Trends chart components.
• Register a tree-shaken ECharts core bundle in app.config.ts and swap dependencies to echarts + ngx-echarts.
• Add a week-range (4/10/26/52) pill selector to reload Trends data, and redesign Top Movers to a stat-card layout.

Reviewed changes

Copilot reviewed 1 out of 1 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
package.json	Removes chart.js/ng2-charts, adds echarts/ngx-echarts.
package-lock.json	Lockfile updates for the charting dependency swap.
apps/frontend/admin-portal/src/app/app.config.ts	Registers ECharts modules and provides provideEchartsCore.
apps/frontend/admin-portal/src/app/pages/trends/chart-theme.utils.ts	Replaces Chart.js defaults with shared ECharts default options and CSS-var theming helpers.
apps/frontend/admin-portal/src/app/pages/trends/xp-trends-chart.component.ts	Rewrites XP Trends chart rendering to ECharts options.
apps/frontend/admin-portal/src/app/pages/trends/rank-chart.component.ts	Rewrites Rank Movement chart rendering to ECharts options.
apps/frontend/admin-portal/src/app/pages/trends/activity-breakdown-chart.component.ts	Rewrites Activity Breakdown chart rendering to ECharts stacked bar options.
apps/frontend/admin-portal/src/app/pages/trends/top-movers.component.ts	Redesigns Top Movers presentation and adds computed helpers for newcomer display.
apps/frontend/admin-portal/src/app/pages/trends/trends.component.ts	Adds week selector UI + signal-based week count; reloads trends based on selection.

Comments suppressed due to low confidence (1)

apps/frontend/admin-portal/src/app/pages/trends/trends.component.ts:213

• With the new week-range selector, loadTrends() can be triggered repeatedly in quick succession. As written, each call subscribe()s without cancelling prior requests, so slower responses can arrive out of order and overwrite newer results (and flip isLoading unexpectedly). Consider tracking and unsubscribing the previous subscription (unsubscribing cancels HttpClient requests), or refactoring to a single stream driven by weekCount using switchMap/takeUntilDestroyed so only the latest request updates state.

  selectWeeks(weeks: number): void {
    if (weeks !== this.weekCount()) {
      this.weekCount.set(weeks);
      this.loadTrends();
    }
  }

  loadTrends(): void {
    this.isLoading.set(true);
    this.error.set(null);

    this.#trendsService.getTrends(this.weekCount()).subscribe({
      next: (data) => {
        this.trendsData.set(data);
        this.isLoading.set(false);
      },
      error: (err) => {
        this.error.set('Failed to load trends data. Please try again.');
        this.isLoading.set(false);
        console.error('Failed to load trends:', err);
      },
    });
  }

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.