design.estate/dees-catalog
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a8f0e5659e6a042ea02b05f10707d55cd15e1b5c
dees-catalog/readme.hints.md
Juergen Kunz 48fbeb397d feat(dees-button-group): add new button group component with demo and styling 
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
2025-06-16 14:37:09 +00:00

2.3 KiB
Raw Blame History

!!! 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