Module: ChartVisibility Service

Author: Marcel Nicklaß

ChartVisibilityService

This service manages the visibility of charts with preset support, drag-and-drop functionality and dynamic resizing.

Overview

The ChartVisibilityService manages chart visibility states across different presets, enforces maximum visibility limits and stores configurations in localStorage.

Main functions

• Maximum visible charts: Limit to 4 visible charts at a time
• Preset support**: Multiple chart configurations per preset ID
• Persistent storage: Chart states are stored in localStorage
• Real-time updates**: Instant updates via observables

Chart interface

interface Chart {
 id: string;
 name: string;
 visible: boolean;
}

Drag-and-drop behavior

The service supports drag-and-drop through the chart management system:

• chart reordering: Charts can be rearranged within the dashboard
• Visibility restrictions: 4-chart limit is respected for drag operations
• State saving: Chart positions are automatically saved after drag operations

Drag implementation

// After drag operation
onChartDrop(chartId: string, newPosition: number) {
 this.chartVisibilityService.updateChartPosition(chartId, newPosition);
}

Chart resizing

Responsive behavior

• Grid-based layout: Charts resize themselves based on the number of visible