Fund Widget Model (Super Alloc)(UX Notes)

// HTML Sections: [Lines of Codes] //

• Section 1: HTML [25]

• Section 2: CSS [343]

• Section 3: Dataset & Config [217]

• Section 4: Rendering Engine [734]

• Section 5: Interaction Engine [626]

• Section 6: Theme & Animation [347]

• Section 7: API & Initialisation [363]

// TMV / Tar$ Brainstorm Summary //

• Replace Dark/Light with TMV/Tar$

  • TMV = Current Allocation View ("What do I own today?")

  • Tar$ = Funding Gap View ("What should I fund next?")

• TMV Mode remains unchanged

  • Slice size = TMV ÷ Total TMV

  • Labels = Fund + A%

  • Centre details remain as they are today

• Tar$ Mode uses Funding Gap

  • Gap$ = max(0, Tar$ − TC$)

  • Slice size = Gap$ ÷ Total Gap$

  • Funds with larger funding gaps receive larger slices

• Tar$ labels use TG%

  • TG% = (Tar$ − TC$) ÷ Tar$

  • Display as whole numbers only (e.g. 50%, 72%, 24%)

  • Hide TG% on labels when TG% > 75%; show Fund name only (e.g. ANZ, VGS)

• Exception Handling

  • If TC$ ≥ Tar$, treat Gap$ = 0 and TG% = 0%

  • No visual slice in Tar$ mode because no additional funding is required

  • ANZ/VGS naturally become visible in Tar$ mode because they currently have TG% = 100% and large Gap$ values

This seems to be the strongest concept we've landed on so far because it solves the ANZ/VGS visibility issue without introducing fund dropdowns, secondary panels, or changing the existing slice-click interaction.

// HTML Sections Potentially Impacted by TMV/Tar$ Concept (Brainstorm Only) //

• Theme Toggle Section

  • Purpose: Replace the existing Dark / Light selection with TMV / Tar$ portfolio view selection.

  • Impact: Changes the user's analytical view rather than visual theme.

• Fund Label Rendering Section

  • Purpose: Determine what appears on each doughnut slice.

  • Impact:

    • TMV mode → Fund + A%

    • Tar$ mode → Fund + TG% (whole numbers only, subject to suppression rule).

• Centre Fund Details Section

  • Purpose: Continue displaying selected fund information after slice click.

  • Impact: Decide whether A%, TG%, or both are displayed while preserving the existing click-to-view workflow.

• Chart Mode Indicator / Description Area

  • Purpose: Communicate whether the chart is showing Current Allocation (TMV) or Funding Gap (Tar$).

  • Impact: Prevents user confusion when switching between the two views.

• Doughnut Chart Data Source Section

  • Purpose: Determine which metric drives slice sizing.

  • Impact:

    • TMV mode → Slice size based on TMV allocation.

    • Tar$ mode → Slice size based on Gap$ (Tar$ − TC$) after applying exception rules.

✅ Final Status

API & Data

• ✅ API connection working

• ✅ Dynamic Period dropdown working

• ✅ Auto-select latest period

• ✅ SEP26 loading correctly

• ✅ OCT26 loading correctly

Doughnut Rendering

• ✅ Colours render correctly

• ✅ Allocation percentages correct

• ✅ Labels visible

• ✅ Labels crisp

• ✅ Hover glow works

• ✅ Labels remain visible during hover

• ✅ Fund selection works

Centre Details

• ✅ Fund details display correctly

• ✅ TMV displays correctly

• ✅ TC$ displays correctly

• ✅ Tar$ displays correctly

• ✅ A% displays correctly

• ✅ White donut hole retained

Light Theme

• ✅ White background

• ✅ White widget panel

• ✅ Labels visible

• ✅ Period switching works

• ✅ Hover works

• ✅ Selection works

Dark Theme

• ✅ Dark background

• ✅ White widget panel

• ✅ Centre details visible

• ✅ Labels visible

• ✅ Hover works

• ✅ Theme switching works

✅ Root Causes We Solved

Some of the major ones:

• Dynamic dropdown not loading periods

• OCT26 rendering issues

• Zero-allocation fund rendering issues

• Hover layer hiding labels

• Fuzzy labels in Light Theme

• Fund details invisible in Dark Theme

• Theme switching behaviour

• Widget panel colouring

My Assessment:

✅ Light Theme

✅ Dark Theme

✅ SEP26

✅ OCT26

✅ Dynamic data

✅ Interactive behaviour

✅ Responsive fund details