¶ EventsPage User Manual
¶ Overview
The EventsPage is a comprehensive gas event analysis component that provides users with powerful tools to view, analyze, and visualize gas measurement events from various assets. It features three main views: Events List, Graphs, and Reports.
¶ Navigation
The page is accessible through the gas module and displays:
- Navigation breadcrumb with "Back to Analysis" button
- Three main tabs: All Events, Graphs, and Report
- Summary information showing selected measurements and date range
Screenshot placeholder: Main navigation and tab bar
¶ Main Features
¶ 1. All Events View
¶ Summary Dashboard
- Total Events: Displays the total count of events in the selected timeframe
- Assets: Shows the number of unique assets involved
- Measurements: Count of selected measurements
- Days: Duration of the analysis period
Screenshot placeholder: Summary statistics cards showing totals for events, assets, measurements, and days
¶ Events Table
- Search Functionality: Real-time search across event properties
- Sortable Columns:
- Timestamp (date and time of event)
- Measurement (measurement type/interface)
- Asset Name (name of the asset)
- Asset ID (unique asset identifier)
- Interface (gas interface type)
- Actions: View detailed information for each event
- Pagination: 25 events per page with navigation controls
Screenshot placeholder: Events data table with search functionality and sortable columns
¶ Event Details Dialog
When clicking the "view" action on an event:
- Basic Information:
- Timestamp
- Asset name and ID
- Interface name
- Event UID
- Measurement Values:
- Organized by category (general, concentration, pressure and flow, temperature)
- Parameter name, value, unit, and description
- Color-coded values based on magnitude
- Formatted display with appropriate precision
Screenshot placeholder: Modal dialog showing detailed event information and measurement values
¶ 2. Graphs View
¶ Graph Controls (Collapsible Panel)
- Parameter Selection: Choose which measurement parameter to visualize
- Dropdown with all available parameters
- Parameter information shows unit, type, and description
- Filtered by site-specific gas parameters if configured
- Measurement Filtering:
- Multi-select dropdown to filter by specific measurements
- Displays measurement chips
- Defaults to "all measurements" if none selected
- Data Aggregation Modes:
- By Measurements: Shows individual data points from each measurement
- Average: Groups data by date and calculates daily averages
Screenshot placeholder: Collapsible controls panel with parameter selection, measurement filtering, and aggregation options
¶ Graph Display
- Interactive Line Chart:
- Time-series visualization with D3.js
- Zoom and pan functionality
- Dynamic Y-axis scaling with 10% padding
- Color-coded by measurement type
- Reset zoom button available
- Data Table Tab:
- Tabular view of all chart data points
- Search functionality across all columns
- Sortable by time, measurement, and value
- 15 items per page with pagination
Screenshot placeholder: D3.js line chart showing time-series data with zoom controls
Screenshot placeholder: Tabular view of chart data with search and pagination
¶ Export and Save Options
- Generate Graph: Refreshes the visualization with current settings
- Export Graph: Download options for the current graph
- Save Graph: Save as SVG format with timestamped filename
- Save Table: Export data as CSV with parameter name and date
¶ 3. Report View (Coming Soon)
- Placeholder for future reporting functionality
- "Feature soon available" message displayed
¶ Color Coding System
¶ Value-Based Colors
- Red (Error): Values > 1000 (high-priority readings)
- Orange (Warning): Values > 100 (moderate concern)
- Green (Success): Values > 0 (normal readings)
- Grey: Zero or null values
¶ Measurement Colors
Each measurement type is assigned a consistent color from a palette of 6 colors (primary, secondary, success, warning, error, info) based on a hash of the measurement name.
¶ Data Loading States
- Loading Indicators: Progress spinners during data fetch operations
- Empty States: Informative messages when no events are found
- Error Handling: Alert messages for API errors with dismissible notifications
¶ Technical Features
¶ Search and Filtering
- Real-time Search: Filters events by asset name, asset ID, interface name, or description
- Parameter Filtering: Site-specific gas parameter filtering from localStorage settings
- Date Range Context: Maintains selected date range throughout navigation
¶ Data Processing
- Interface Definition Integration: Automatically processes measurement values using interface definitions
- Value Transformation: Handles different data types and units appropriately
- Duplicate Handling: Manages duplicate parameter keys with unique identifiers
¶ Performance Optimization
- Caching: Uses Pinia store for efficient data caching and sharing
- Lazy Loading: Components load data on demand
- Query Parameter Persistence: Maintains state through URL parameters
¶ User Workflow
- Access: Navigate to EventsPage from gas analysis module
- Review Summary: Check the summary dashboard for overview statistics
- Browse Events: Use the events list to examine individual events
- Detailed Analysis: Click on events to view detailed measurement values
- Visualize Trends: Switch to Graphs tab to create time-series visualizations
- Parameter Selection: Choose specific parameters for detailed analysis
- Export Data: Save graphs as SVG or export table data as CSV
- Filter Results: Use measurement filters to focus on specific instruments
¶ Keyboard Navigation
- Standard keyboard navigation supported for all interactive elements
- Tab key navigation through form controls and buttons
- Enter key activation for primary actions
¶ Responsive Design
- Optimized for desktop and tablet viewing
- Collapsible panels for space efficiency
- Mobile-friendly table scrolling and pagination
¶ Integration Points
- Gas Events Store: Centralized state management for events data
- Interface Definition API: Dynamic parameter loading
- Site Settings: Gas parameter filtering configuration
- Internationalization: Multi-language support with vue-i18n