Cost Comparison Widget
Component Detail
User Interface
low complexity
frontend
3
Dependencies
0
Dependents
0
Entities
0
Integrations
Description
Two-column comparison widget presenting current-state costs versus Meander subscription costs over a 12-month horizon. Supports toggling between a simplified total-savings view and an expanded line-item breakdown, with accessible tabular fallback for all chart data.
cost-comparison-widget
Responsibilities
- Render side-by-side cost breakdown (manual/fragmented tooling vs Meander)
- Toggle between simplified summary view and detailed line-item view on user interaction
- Display bar chart visualization using Recharts for visual cost comparison
- Provide accessible data table as WCAG 2.2 AA compliant alternative to chart
- Accept calculator inputs from Impact Calculator and subscription tier selection
Interfaces
render(calculatorInputs: CalculatorInputs, tier: PricingTier): void
toggleView(mode: 'summary' | 'detailed'): void
getAccessibleTableData(): CostComparisonRow[]
Relationships
Dependencies (3)
Components this component depends on