Fix Chart.js test mocks for tree-shaken imports and update documentation

Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>

Author: Copilot

docs/bundle-optimization.md

@@ -2,15 +2,15 @@
 
 ## Overview
 
-This document describes the bundle size optimizations implemented in v0.9.1+ to reduce the JavaScript bundle size from 189KB to 117KB (gzip) for initial page load - a 37.9% reduction that significantly improves performance.
+This document describes the bundle size optimizations implemented in v0.9.1+ to reduce the JavaScript bundle size from 188KB to 117KB (gzip) for initial page load - a 37.9% reduction that significantly improves performance.
 
 ## Optimization Results
 
 ### Before Optimization
-- **Total Initial Load**: 189 KB (gzip)
+- **Total Initial Load**: 188 KB (gzip)
   - React + React DOM: 59.07 KB
   - Vendor (Chart.js): 72.21 KB
-  - Application code: 57.83 KB
+  - Application code: 56.72 KB
 
 ### After Optimization
 - **Total Initial Load**: 117.40 KB (gzip) ✅

src/components/charts/RadarChart.comprehensive.test.tsx

@@ -19,6 +19,10 @@ type ChartMockConstructor = ReturnType<typeof vi.fn> & {
     font: { family: string };
     plugins: { legend: { display: boolean } };
   };
+  overrides: Record<string, any>;
+  registry: {
+    controllers: { items: Record<string, any> };
+  };
 };
 
 const mockChartConstructor = vi.hoisted(() => {
@@ -36,12 +40,24 @@ vi.hoisted(() => {
     font: { family: "Arial" },
     plugins: { legend: { display: false } },
   };
+  // Add overrides for registration check
+  mockChartConstructor.overrides = {};
+  mockChartConstructor.registry = {
+    controllers: { items: {} },
+  };
 });
 
-// Use vi.mock with factory pattern to ensure the mock is hoisted correctly
-vi.mock("chart.js/auto", () => ({
-  __esModule: true,
-  default: mockChartConstructor,
+// Use vi.mock with factory pattern to mock chart.js module
+vi.mock("chart.js", () => ({
+  Chart: mockChartConstructor,
+  RadarController: vi.fn(),
+  RadialLinearScale: vi.fn(),
+  PointElement: vi.fn(),
+  LineElement: vi.fn(),
+  Filler: vi.fn(),
+  Tooltip: vi.fn(),
+  Legend: vi.fn(),
+  CategoryScale: vi.fn(),
 }));
 
 // Import testing utilities and components after mock definitions

src/components/charts/RadarChart.enhanced.test.tsx

@@ -13,6 +13,10 @@ type ChartMockConstructor = ReturnType<typeof vi.fn> & {
     font: { family: string };
     plugins: { legend: { display: boolean } };
   };
+  overrides: Record<string, any>;
+  registry: {
+    controllers: { items: Record<string, any> };
+  };
 };
 
 const mockChartConstructor = vi.hoisted(() => {
@@ -29,12 +33,24 @@ vi.hoisted(() => {
     font: { family: "Arial" },
     plugins: { legend: { display: false } },
   };
+  // Add overrides for registration check
+  mockChartConstructor.overrides = {};
+  mockChartConstructor.registry = {
+    controllers: { items: {} },
+  };
 });
 
-// Apply the mock with the hoisted implementation
-vi.mock("chart.js/auto", () => ({
-  __esModule: true,
-  default: mockChartConstructor,
+// Apply the mock for chart.js module
+vi.mock("chart.js", () => ({
+  Chart: mockChartConstructor,
+  RadarController: vi.fn(),
+  RadialLinearScale: vi.fn(),
+  PointElement: vi.fn(),
+  LineElement: vi.fn(),
+  Filler: vi.fn(),
+  Tooltip: vi.fn(),
+  Legend: vi.fn(),
+  CategoryScale: vi.fn(),
 }));
 
 // Then import all required modules

src/components/charts/RadarChart.extended.test.tsx

@@ -13,6 +13,10 @@ type ChartMockConstructor = ReturnType<typeof vi.fn> & {
     font: { family: string };
     plugins: { legend: { display: boolean } };
   };
+  overrides: Record<string, any>;
+  registry: {
+    controllers: { items: Record<string, any> };
+  };
 };
 
 const mockChartConstructor = vi.hoisted(() => {
@@ -29,12 +33,24 @@ vi.hoisted(() => {
     font: { family: "Arial" },
     plugins: { legend: { display: false } },
   };
+  // Add overrides for registration check
+  mockChartConstructor.overrides = {};
+  mockChartConstructor.registry = {
+    controllers: { items: {} },
+  };
 });
 
-// Apply the mock with the hoisted implementation
-vi.mock("chart.js/auto", () => ({
-  __esModule: true,
-  default: mockChartConstructor,
+// Apply the mock for chart.js module
+vi.mock("chart.js", () => ({
+  Chart: mockChartConstructor,
+  RadarController: vi.fn(),
+  RadialLinearScale: vi.fn(),
+  PointElement: vi.fn(),
+  LineElement: vi.fn(),
+  Filler: vi.fn(),
+  Tooltip: vi.fn(),
+  Legend: vi.fn(),
+  CategoryScale: vi.fn(),
 }));
 
 // Then import all required modules