Milestone 4 & 5: Chart Component + 53-Control Feature Audit

.ai-team/agents/beast/history.md

@@ -30,3 +30,23 @@
 - **Sprint 3 docs delivered:** DetailsView and PasswordRecovery documentation created with full structure (features, Web Forms syntax, Blazor syntax, HTML output, migration notes, examples, See Also). Added to mkdocs.yml nav (alphabetical) and linked in README.md.
 
 📌 Team update (2026-02-12): Sprint 3 gate review — DetailsView and PasswordRecovery APPROVED. Action item: fix DetailsView docs to replace `DataSource=` with `Items=` in Blazor code samples. — decided by Forge
+
+ Team update (2026-02-12): Milestone 4 planned  Chart component with Chart.js via JS interop. 8 work items, design review required before implementation.  decided by Forge + Squad
+
+- **Chart doc is first JS interop component:** The Chart component is unique in the library — it's the first to use JavaScript interop (Chart.js via ES module import). The doc template needed a new "HTML Output Exception" admonition pattern to explain why `<canvas>` replaces `<img>`. This pattern should be reused for any future components that deviate from identical HTML output.
+- **DeferredControls.md updated for partial implementation:** Chart moved from fully-deferred to partially-implemented. The DeferredControls page now has a dual role: documenting controls not implemented at all (Substitution, Xml) AND documenting unsupported sub-features of implemented controls (27 unsupported chart types). This "partially implemented" pattern may apply to future controls.
+- **Child component docs pattern:** Chart introduces a multi-component documentation pattern (Chart, ChartSeries, ChartArea, ChartLegend, ChartTitle) with separate parameter tables for each. This nested-component doc approach should be used for any future components with required child components.
+- **Chart Type Gallery added:** Added a "Chart Type Gallery" section to `docs/DataControls/Chart.md` between "Chart Palettes" and "Web Forms Features NOT Supported". Contains 8 subsections (Column, Line, Bar, Pie, Doughnut, Area, Scatter, Stacked Column) each with a screenshot, `SeriesChartType` enum value, and 1-2 sentence usage guidance. Includes `!!! warning` admonitions on Pie and Doughnut for the Phase 1 palette limitation (single series color instead of per-segment colors).
+- **Chart image path convention:** Chart screenshots live at `docs/images/chart/chart-{type}.png` (lowercase, hyphenated). Referenced from Chart.md using relative paths: `../images/chart/chart-{type}.png`. This `docs/images/{component}/` pattern should be used for any future component screenshots.
+- **AccessKey and ToolTip missing across all WebControl-based components:** Neither `BaseWebFormsComponent` nor `BaseStyledComponent` defines `AccessKey` or `ToolTip` parameters. Every control inheriting from WebControl in Web Forms has these, so they are universally 🔴 Missing. Adding them to `BaseStyledComponent` would fix all styled controls in one shot.
+- **Label uses wrong base class for style support:** `Label` inherits `BaseWebFormsComponent` (no style) instead of `BaseStyledComponent`. Web Forms `Label` inherits from `WebControl` and supports all style properties (CssClass, BackColor, Font, etc.). This is the biggest gap for Label — 11 style properties are missing.
+- **ListControl-derived components share common gaps:** ListBox, RadioButtonList (and CheckBoxList, DropDownList) all have the same missing properties: `AppendDataBoundItems`, `DataTextFormatString`, `CausesValidation`, `ValidationGroup`, and `TextChanged` event. These could be fixed once in a shared base.
+- **Literal/Localize/PlaceHolder/View/MultiView are near-complete:** Controls inheriting from `Control` (not `WebControl`) have no style properties by design. The Blazor implementations are essentially feature-complete — matching all relevant properties and events.
+- **Substitution and Xml are permanently deferral candidates:** Both controls are tightly coupled to server-side ASP.NET infrastructure (output caching and XSLT transformation respectively). Neither concept maps to Blazor's component model. Recommend documenting migration alternatives rather than implementing.
+- **Style property computed but not directly settable:** Across all `BaseStyledComponent`-derived controls, the `Style` property is computed from BackColor/ForeColor/Font/etc. via `IStyle.ToStyle()`. Web Forms allowed direct `Style["property"] = "value"` assignment. This pattern difference is consistent but worth noting in migration guides.
+- **Panel is the most feature-complete styled control:** Panel implements 6 out of 7 specific Web Forms properties (only BackImageUrl missing). Combined with full BaseStyledComponent inheritance, it has the highest coverage of any editor control.
+
+
+ Team update (2026-02-23): AccessKey/ToolTip must be added to BaseStyledComponent  decided by Beast, Cyclops
+ Team update (2026-02-23): Chart implementation architecture consolidated (10 decisions)  decided by Cyclops, Forge
+ Team update (2026-02-23): DetailsView/PasswordRecovery branch (sprint3) must be merged forward  decided by Forge

.ai-team/agents/colossus/history.md

@@ -27,6 +27,30 @@
 
 📌 Team update (2026-02-12): Sprint 3 gate review — DetailsView and PasswordRecovery APPROVED. 50/53 components (94%). Library effectively feature-complete. — decided by Forge
 
+ Team update (2026-02-12): Milestone 4 planned  Chart component with Chart.js via JS interop. 8 work items, design review required before implementation.  decided by Forge + Squad
+
+## Learnings
+
+### 2026-02-12: Milestone 4 — Chart integration tests (WI-7)
+
+- Added 8 Chart smoke tests as a dedicated `ChartControl_Loads_AndRendersContent` Theory in `ControlSampleTests.cs`
+  - Follows the Menu pattern: separate Theory with its own verify method (`VerifyChartPageLoads`) that tolerates JS interop console errors but checks for page errors
+  - Routes: `/ControlSamples/Chart`, `Chart/Line`, `Chart/Bar`, `Chart/Pie`, `Chart/Area`, `Chart/Doughnut`, `Chart/Scatter`, `Chart/StackedColumn`
+- Added 4 interactive tests in `InteractiveComponentTests.cs`:
+  - `Chart_DefaultPage_RendersCanvas` — verifies `<canvas>` on Column (default) page
+  - `Chart_LinePage_RendersCanvas` — verifies `<canvas>` on Line page
+  - `Chart_PiePage_RendersCanvas` — verifies `<canvas>` on Pie page
+  - `Chart_AllTypes_RenderCanvas` — Theory test covering all 8 routes for `<canvas>` element
+- All 19 Chart tests pass (8 smoke + 3 individual canvas + 8 theory canvas)
+- Used `WaitUntilState.DOMContentLoaded` instead of `NetworkIdle` for Chart tests — Chart.js JS interop can keep network busy
+- Key learnings:
+  - Chart component renders `<div>` wrapping a `<canvas>` element (in `Chart.razor`), so `<canvas>` is always in the DOM even before Chart.js initializes
+  - Chart pages use JS interop (`ChartJsInterop.cs`) — console errors are expected if Chart.js CDN/bundle isn't fully loaded; page errors are not
+  - Pre-existing test suite has 97 failures on non-Chart tests due to ASP.NET structured log console errors (`[timestamp] Error:`) being caught by `Assert.Empty(consoleErrors)` — these are unrelated to Chart work
+
+
+ Team update (2026-02-23): DetailsView/PasswordRecovery branch (sprint3) must be merged forward  decided by Forge
+ Team update (2026-02-23): AccessKey/ToolTip must be added to BaseStyledComponent  decided by Beast, Cyclops
 ## 2026-02-12: Boy Scout rule — fixed 7 pre-existing integration test failures
 
 Fixed all 7 failing integration tests. 111/111 passing after fixes.
@@ -101,3 +125,20 @@ Fixed all 7 failing integration tests. 111/111 passing after fixes.
   - DataBinder sample uses `OnAfterRender(firstRender)` to call `DataBind()` on 4 Repeater instances — data only appears after first render, but NetworkIdle wait handles this.
   - ViewState sample button text "Click Me (ViewState)" distinguishes it from the "Click Me (Property)" button in section 3. Used `GetByRole(AriaRole.Button, new() { Name = "Click Me (ViewState)" })` for precise targeting.
   - Both pages include `<pre><code>` blocks with sample code — assertions use `page.ContentAsync()` for text presence rather than strict locators to avoid matching code samples vs rendered content where appropriate.
+### 2026-02-12: Enhanced Chart visual appearance tests
+
+- Added 5 stronger Chart tests in `InteractiveComponentTests.cs` to verify chart appearance:
+  - `Chart_RendersCanvas_WithDimensions` — verifies canvas has non-zero width/height via BoundingBox
+  - `Chart_AllTypes_HaveExpectedContainerDimensions` — Theory test verifying all 8 chart types have container dimensions matching ChartWidth/ChartHeight parameters (600x400 for most, 500x400 for Pie/Doughnut)
+  - `Chart_ChartJsLibrary_IsInitialized` — verifies Chart.js global is loaded and has at least one chart instance via `Chart.instances`
+  - `Chart_Line_MultipleSeries_RenderMultipleDatasets` — verifies Line chart's 2 series (NY/LA temps) produce 2 datasets via `Chart.instances[0].data.datasets.length`
+  - `Chart_AllTypes_CanvasHasRenderingContext` — Theory test verifying all 8 chart types have a 2D rendering context
+- Total Chart tests: 38 (8 smoke + 11 basic canvas + 19 enhanced visual)
+- Build: 0 errors, 0 warnings
+- Test patterns:
+  - Use `LocatorWaitForOptions { State = WaitForSelectorState.Visible }` instead of `Expect()` (class doesn't inherit from `PageTest`)
+  - Use `page.EvaluateAsync<T>` to query Chart.js internals (`Chart.instances`, dataset counts, etc.)
+  - Use `BoundingBoxAsync()` to verify element dimensions
+  - Allow ±10px tolerance on dimension checks for border/padding differences
+
+

.ai-team/agents/cyclops/history.md

@@ -44,4 +44,37 @@
 📌 Team update (2026-02-11): Sprint 3 scope: DetailsView + PasswordRecovery. Chart/Substitution/Xml deferred. 48/53 → target 50/53. — decided by Forge
 📌 Team update (2026-02-11): Colossus added as dedicated integration test engineer. Rogue retains bUnit unit tests. — decided by Jeffrey T. Fritz
 📌 Team update (2026-02-12): Sprint 3 gate review — DetailsView and PasswordRecovery APPROVED. 50/53 components (94%). — decided by Forge
+
+ Team update (2026-02-12): Milestone 4 planned  Chart component with Chart.js via JS interop. 8 work items, design review required before implementation.  decided by Forge + Squad
+
+- **Chart component architecture (WI-1/2/3):** Chart inherits `BaseStyledComponent`. Uses CascadingValue `"ParentChart"` for child registration (ChartSeries, ChartArea, ChartLegend, ChartTitle). JS interop via ES module `chart-interop.js` with lazy loading in `ChartJsInterop.cs`. `ChartConfigBuilder` is a pure static class converting component model → Chart.js JSON config, testable without browser.
+- **Chart file paths:**
+  - Enums: `Enums/SeriesChartType.cs` (35 values), `Enums/ChartPalette.cs`, `Enums/Docking.cs`, `Enums/ChartDashStyle.cs`
+  - POCOs: `Axis.cs`, `DataPoint.cs`
+  - JS: `wwwroot/js/chart.min.js` (PLACEHOLDER), `wwwroot/js/chart-interop.js`
+  - C# interop: `ChartJsInterop.cs`
+  - Config builder: `ChartConfigBuilder.cs` (+ config snapshot classes)
+  - Components: `Chart.razor`/`.cs`, `ChartSeries.razor`/`.cs`, `ChartArea.razor`/`.cs`, `ChartLegend.razor`/`.cs`, `ChartTitle.razor`/`.cs`
+- **Chart type mapping:** Web Forms `SeriesChartType.Point` maps to Chart.js `"scatter"`. Web Forms has no explicit "Scatter" enum value — `Point=0` is the equivalent. 8 types supported in Phase 1; unsupported throw `NotSupportedException`.
+- **JS interop pattern for Chart:** Uses `IJSRuntime` directly (not the shared `BlazorWebFormsJsInterop` service) because Chart.js interop is chart-specific, not page-level. `ChartJsInterop` lazily imports the ES module and exposes `CreateChartAsync`, `UpdateChartAsync`, `DestroyChartAsync`.
+- **BaseStyledComponent already has Width/Height as Unit type:** Chart adds `ChartWidth`/`ChartHeight` as string parameters for CSS dimension styling on the wrapper div, avoiding conflict with the base class Unit properties.
+- **Instance-based canvas IDs:** Uses `Guid.NewGuid()` (truncated to 8 chars) for canvas element IDs, consistent with the ImageMap pattern that avoids static counters.
+- **Feature audit — Editor Controls A–I (13 controls):** Created audit docs in `planning-docs/` comparing Web Forms API vs Blazor implementation for AdRotator, BulletedList, Button, Calendar, CheckBox, CheckBoxList, DropDownList, FileUpload, HiddenField, HyperLink, Image, ImageButton, ImageMap.
+- **Common missing property: AccessKey.** Every component that inherits WebControl in Web Forms has AccessKey. Neither `BaseStyledComponent` nor `BaseWebFormsComponent` provides it. This is the single most pervasive gap — affects all 13 audited controls.
+- **ToolTip inconsistently provided.** Some components (Button, FileUpload, Calendar, HyperLink, Image, ImageButton, ImageMap) add ToolTip directly. Others (AdRotator, BulletedList, CheckBox, CheckBoxList, DropDownList) do not. ToolTip should be on the base class.
+- **Image base class mismatch.** `Image` inherits `BaseWebFormsComponent` but Web Forms `Image` inherits `WebControl`. This means Image is missing ALL style properties (CssClass, BackColor, ForeColor, Font, Width, Height, BorderColor, BorderStyle, BorderWidth, Style). ImageMap correctly uses `BaseStyledComponent` per team decision. Image should follow the same pattern.
+- **HyperLink.NavigateUrl naming mismatch.** Web Forms uses `NavigateUrl`; Blazor uses `NavigationUrl`. This breaks migration — developers must rename the attribute.
+- **List controls missing common ListControl properties.** BulletedList, CheckBoxList, and DropDownList all lack DataTextFormatString, AppendDataBoundItems, CausesValidation, and ValidationGroup. These are inherited from ListControl in Web Forms.
+- **Calendar style sub-properties use CSS strings.** All 9 style sub-properties (DayStyle, TitleStyle, etc.) are implemented as CSS class strings instead of `TableItemStyle` objects. Functional but not API-compatible.
+- **HiddenField correctly uses BaseWebFormsComponent.** Matches Web Forms where HiddenField inherits Control (not WebControl), so no style properties needed.
+- **ChartSeries data binding fix:** `ToConfig()` now checks for `Items` + `YValueMembers` and extracts `DataPoint` objects via reflection. Uses `XValueMember` for X axis values and comma-separated `YValueMembers` for Y values. Falls back to manual `Points` collection when `Items` is null or `YValueMembers` is empty. Handles type conversion via `TryConvertToDouble()` for common numeric types.
+
+
+ Team update (2026-02-23): AccessKey/ToolTip must be added to BaseStyledComponent  decided by Beast, Cyclops
+ Team update (2026-02-23): Label should inherit BaseStyledComponent instead of BaseWebFormsComponent  decided by Beast
+ Team update (2026-02-23): DataBoundComponent style gap  DataBoundStyledComponent<T> recommended  decided by Forge
+ Team update (2026-02-23): Chart implementation architecture consolidated (10 decisions)  decided by Cyclops, Forge
+ Team update (2026-02-23): Validation Display property missing from all validators  migration-blocking  decided by Rogue
+ Team update (2026-02-23): ValidationSummary comma-split bug is data corruption risk  decided by Rogue
+ Team update (2026-02-23): Login controls missing outer WebControl style properties  decided by Rogue
 📌 Team update (2026-02-12): DetailsView auto-generated fields must render <input type="text"> in Edit/Insert mode — decided by Cyclops