2024-12-09 19:14:21 +01:00
|
|
|
!!! 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.
|
2025-06-12 10:44:21 +00:00
|
|
|
* 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
|
2025-06-12 11:00:33 +00:00
|
|
|
- Responsive with ResizeObserver (debounced to prevent flicker)
|
|
|
|
|
- Fixed: Chart now properly respects container boundaries on initial render
|
|
|
|
|
- Overflow prevention with proper CSS containment
|
2025-06-12 11:09:14 +00:00
|
|
|
- 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
|
2025-06-16 14:37:09 +00:00
|
|
|
- Demo uses global reference to access chart element (window.__demoChartElement)
|
2025-06-12 10:44:21 +00:00
|
|
|
|
|
|
|
|
### 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`)
|
2025-06-16 14:37:09 +00:00
|
|
|
- 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
|
