Transformer Monitoring Dashboard

A modern web application for monitoring transformer health and voltage metrics, built with Vue 3, TypeScript, and Tailwind CSS, containerized with Docker for easy deployment.

Features

• 📊 Interactive voltage charts with zoom/pan functionality
• 🔍 Filter and sort transformer data
• 📱 Responsive design for all devices
• 🎨 Modern UI with Tailwind CSS
• 🏗️ Type-safe development with TypeScript
• 🐳 Containerized with Docker for easy deployment
• 🔄 Development server with hot-reload
• 🚀 Production-optimized build with Nginx

Prerequisites

• Docker 20.10+ and Docker Compose 2.0+
• Node.js 18+ and Yarn (optional, for local development without Docker)

Quick Start with Docker

Development Mode

For local development with hot-reload:

docker-compose up --build dev

The development server will be available at http://localhost:3000

Production Build

To build and run the production-optimized version:

docker-compose up --build production

The production build will be available at http://localhost:8080

Local Development (without Docker)

1. Install dependencies:

   yarn install

2. Start development server:

   yarn dev

3. Open http://localhost:5173 in your browser.

Building for Production

To build the application for production:

yarn build

The production-ready files will be in the dist directory.

Docker Configuration

The project includes the following Docker-related files:

• Dockerfile - Multi-stage build for development and production
• docker-compose.yml - Defines development and production services
• nginx.conf - Nginx configuration for production

Development Container

The development container provides:

• Hot-reloading
• Source code mounting
• Development server on port 3000

Production Container

The production container includes:

• Multi-stage build for optimized image size
• Nginx web server
• Gzip compression
• Asset caching

Project Structure

src/
  ├── assets/                 # Static assets and data
  ├── components/             # Vue components
  │   ├── TransformerViewer.vue  # Main view component
  │   └── VoltageChart.vue    # Interactive chart component
  ├── composables/            # Composable functions
  │   ├── useTransformer.ts   # Data fetching and processing
  │   └── useLocalStorage.ts  # Local storage utilities
  ├── types/                  # TypeScript type definitions
  ├── App.vue                 # Root component
  └── main.ts                 # Application entry point
## Environment Variables

The following environment variables can be configured:

- `VITE_API_BASE_URL` - Base URL for API requests (default: '' for local development)
- `VITE_APP_TITLE` - Application title (default: 'Transformer Monitor')

## Available Scripts

- `yarn dev` - Start development server
- `yarn build` - Build for production
- `yarn preview` - Preview production build locally
- `yarn lint` - Lint code with ESLint
- `yarn format` - Format code with Prettier

## Deployment

### Docker Hub

To deploy to Docker Hub:

1. Build the image:
   ```bash
   docker build -t yourusername/transformer-monitor .

2. Push to Docker Hub:

   docker push yourusername/transformer-monitor

Kubernetes

For Kubernetes deployment, you can use the following example manifest:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: transformer-monitor
spec:
  replicas: 3
  selector:
    matchLabels:
      app: transformer-monitor
  template:
    metadata:
      labels:
        app: transformer-monitor
    spec:
      containers:
      - name: web
        image: yourusername/transformer-monitor:latest
        ports:
        - containerPort: 80
        resources:
          limits:
            cpu: "1"
            memory: "512Mi"
---
apiVersion: v1
kind: Service
metadata:
  name: transformer-monitor
spec:
  selector:
    app: transformer-monitor
  ports:
  - port: 80
    targetPort: 80
  type: LoadBalancer

Monitoring and Logging

The production container includes basic health checks and logging configuration. You can monitor the application using:

docker logs <container_id>

License

MIT ├── nginx.conf # Nginx configuration ├── package.json # Project dependencies and scripts ├── postcss.config.js # PostCSS configuration ├── README.md # This file ├── tailwind.config.js # Tailwind CSS configuration ├── tsconfig.json # TypeScript configuration └── vitest.config.ts # Vitest configuration

## Testing

### Unit Tests with Vitest

Run unit tests with the following commands:

```bash
# Run unit tests
yarn test

# Run in watch mode
yarn test:watch

# Run with UI
yarn test:ui

# Generate coverage report
yarn test:coverage

End-to-End Tests with Cypress

Run E2E tests with the following commands:

# Run E2E tests in headless mode
yarn test:e2e

# Open Cypress Test Runner
yarn test:e2e:open

# Run specific test file
yarn cypress run --spec "cypress/e2e/app.cy.ts"

Code Quality

# Lint code
yarn lint

# Format code
yarn format

# Check TypeScript types
yarn type-check

Customizing Tailwind CSS

Edit the tailwind.config.js file to customize your Tailwind CSS configuration:

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}