# Offline Usage Configuration

## Overview
The application has been configured to work completely offline without any CDN dependencies.

## Changes Made

### 1. Chart.js Libraries Migration
**Before (CDN Dependencies):**
- Chart.js loaded from `https://cdn.jsdelivr.net/npm/chart.js@3.9.1`
- Luxon from `https://cdn.jsdelivr.net/npm/luxon@2`
- Chart.js adapter from `https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon@1.3.1`
- Zoom plugin from `https://unpkg.com/chartjs-plugin-zoom@1.2.1`
- Streaming plugin from `https://cdn.jsdelivr.net/npm/chartjs-plugin-streaming@2.0.0`

**After (NPM Dependencies):**
All Chart.js libraries are now installed as npm packages and bundled with the application:
```json
"chart.js": "^3.9.1",
"chartjs-adapter-luxon": "^1.3.1", 
"chartjs-plugin-streaming": "^2.0.0",
"chartjs-plugin-zoom": "^1.2.1",
"luxon": "^2.5.2"
```

### 2. Chart.js Setup Module
Created `frontend/src/utils/chartSetup.js` that:
- Imports all Chart.js components as ES modules
- Registers all required plugins (zoom, streaming, time scales)
- Makes Chart.js available globally for existing components
- Provides console confirmation of successful setup

### 3. Application Entry Point
Modified `frontend/src/main.jsx` to import the Chart.js setup before rendering the application.

### 4. Updated HTML Template
Removed all CDN script tags from `frontend/index.html`.

## Verification

### Build Verification
The application builds successfully without any external dependencies:
```bash
cd frontend
npm run build
```

### Development Server
The development server runs without internet connection:
```bash
cd frontend  
npm run dev
```

### Runtime Verification
- No network requests to external CDNs
- All Chart.js functionality preserved (zooming, streaming, real-time plots)
- Completely self-contained in bundled JavaScript

## Backend Offline Compliance

The Python backend already uses only local dependencies:
- Flask for web server
- python-snap7 for PLC communication  
- Local file-based configuration
- No external API calls or services

## Deployment for Offline Use

### Frontend Production Build
```bash
cd frontend
npm run build
```
The `dist/` folder contains all necessary files with no external dependencies.

### Complete Offline Package
The entire application (backend + frontend) can be deployed on systems without internet access:

1. **Python Requirements**: Install from `requirements.txt`
2. **Frontend**: Use built files from `dist/` folder
3. **PLC Communication**: Requires `snap7.dll` in system PATH
4. **Configuration**: All JSON-based, stored locally

## Chart.js Feature Compatibility

All existing Chart.js features remain functional:
- ✅ Real-time streaming plots
- ✅ Zoom and pan functionality  
- ✅ Time-based X-axis with Luxon adapter
- ✅ Multiple dataset support
- ✅ Dynamic color assignment
- ✅ Plot session management
- ✅ CSV data export integration

## Technical Notes

### Global vs ES Module Access
The setup maintains backward compatibility by making Chart.js available both ways:
- **Global**: `window.Chart` (for existing components)
- **ES Module**: `import ChartJS from './utils/chartSetup.js'` (for new components)

### Bundle Size Impact
The Chart.js libraries add approximately ~400KB to the bundle (gzipped), which is acceptable for offline industrial applications.

### Browser Compatibility
All dependencies support modern browsers without requiring polyfills for the target deployment environment.