48fbeb397d
fix(dees-chart-area): improve real-time updates and chart element handling fix(dees-chart-log): refactor demo to store log element reference chore: update dependencies in package.json and pnpm-lock.yaml
61 lines
2.3 KiB
Markdown
61 lines
2.3 KiB
Markdown
!!! 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 |