!!! Please pay attention to the following points when writing the readme: !!! * Give a short rundown of components and a few points abputspecific features on each. * Try to list all components in a summary. * Then list all components with a short description. ## Chart Components ### dees-chart-area - Fully functional area chart component using ApexCharts - Displays time-series data with gradient fills - Responsive with ResizeObserver (debounced to prevent flicker) - Fixed: Chart now properly respects container boundaries on initial render - Overflow prevention with proper CSS containment - Enhanced demo features: - Multiple dataset examples (System Usage, Network Traffic, Sales Analytics) - Real-time data simulation with automatic updates - Dynamic dataset switching - Customizable Y-axis formatters (percentages, currency, units) - Data randomization for testing - Manual data point addition - Properties: - `label`: Chart title - `series`: ApexAxisChartSeries data - `yAxisFormatter`: Custom Y-axis label formatter function - Methods: - `updateSeries()`: Update chart data - `appendData()`: Add new data points to existing series - Demo uses global reference to access chart element (window.__demoChartElement) ### dees-chart-log - Server log viewer component (not a chart despite the name) - Terminal-style interface with monospace font - Supports log levels: debug, info, warn, error, success - Features: - Auto-scroll toggle - Clear logs button - Colored log levels - Timestamp with milliseconds - Source labels for log entries - Maximum 1000 entries (configurable) - Light/dark theme support - Demo includes realistic server log simulation - Note: In demos, buttons use `@clicked` event (not `@click`) - Demo uses global reference to access log element (window.__demoLogElement) ## UI Components ### dees-button-group - Groups multiple buttons together with a unified background - Properties: - `label`: Optional label text displayed before the buttons - `direction`: 'horizontal' | 'vertical' layout - Features: - Light/dark theme support - Flexible layout with proper spacing - Works with all button types (normal, highlighted, success, danger) - Use cases: - View mode selectors - Action grouping - Navigation options - Filter controls ## Form Components ### dees-input-radio - Radio button component with proper group behavior - Properties: - `name`: Group name for mutually exclusive selection - `key`: Unique identifier for the radio option - `value`: Boolean indicating selection state - `label`: Display label - Features: - Automatic group management (radios with same name are mutually exclusive) - Cannot be deselected by clicking (proper radio behavior) - Form integration: Radio groups are collected by name, value is the selected radio's key - Works both inside and outside forms - Supports disabled state - Fixed: Radio buttons now properly deselect others in the group on first click - Note: When using in forms, set both `name` (for grouping) and `key` (for the value)