Engineering Report Generator

Version: 1.1.0 Category: Development Last Updated: 2026-01-02

Generate professional engineering analysis reports with interactive visualizations using Plotly and responsive HTML export.

Quick Start

import plotly.express as px import pandas as pd from pathlib import Path from datetime import datetime

Load data

df = pd.read_csv("../data/processed/results.csv")

Create visualization

fig = px.line(df, x="date", y="value", title="Analysis Results")

Generate HTML report

html = f"""<!DOCTYPE html> <html> <head><title>Engineering Report</title></head> <body> <h1>Analysis Report - {datetime.now().strftime('%Y-%m-%d')}</h1> {fig.to_html(full_html=False, include_plotlyjs="cdn")} </body> </html>"""

Path("../reports/analysis.html").write_text(html) print("Report generated: reports/analysis.html")

When to Use

Creating analysis reports with charts and visualizations
Building interactive dashboards from CSV/data sources
Generating technical documentation with plots
Producing client-deliverable HTML reports
Summarizing engineering calculations with graphics

Report Structure

Standard Sections

Header - Title, date, project info, version
Executive Summary - Key findings and metrics at a glance
Methodology - Analysis approach and assumptions
Results - Data tables and interactive visualizations
Discussion - Interpretation of results
Conclusions - Summary and recommendations
Appendix - Supporting data, references

Implementation Pattern

Basic Report Generation

import plotly.express as px import plotly.graph_objects as go from plotly.subplots import make_subplots import pandas as pd from pathlib import Path from datetime import datetime

def generate_report( data_path: str, output_path: str, title: str, sections: dict ) -> str: """ Generate HTML report with interactive visualizations.

Args:
    data_path: Path to CSV data file (relative)
    output_path: Output HTML file path
    title: Report title
    sections: Dict of section content

Returns:
    Path to generated report
"""
# Load data
df = pd.read_csv(data_path)

# Create figures
figures = create_visualizations(df, sections.get('charts', []))

# Build HTML
html = build_html_report(title, sections, figures)

# Save
Path(output_path).parent.mkdir(parents=True, exist_ok=True)
with open(output_path, 'w') as f:
    f.write(html)

return output_path

Visualization Patterns

def create_visualizations(df: pd.DataFrame, chart_configs: list) -> list: """Create Plotly figures from configuration.""" figures = []

for config in chart_configs:
    chart_type = config.get('type', 'line')

    if chart_type == 'line':
        fig = px.line(
            df,
            x=config['x'],
            y=config['y'],
            color=config.get('color'),
            title=config.get('title', '')
        )
    elif chart_type == 'scatter':
        fig = px.scatter(
            df,
            x=config['x'],
            y=config['y'],
            color=config.get('color'),
            size=config.get('size'),
            title=config.get('title', '')
        )
    elif chart_type == 'bar':
        fig = px.bar(
            df,
            x=config['x'],
            y=config['y'],
            color=config.get('color'),
            title=config.get('title', '')
        )
    elif chart_type == 'heatmap':
        fig = px.imshow(
            df.pivot(
                index=config['y'],
                columns=config['x'],
                values=config['values']
            ),
            title=config.get('title', '')
        )
    elif chart_type == 'polar':
        fig = px.line_polar(
            df,
            r=config['r'],
            theta=config['theta'],
            title=config.get('title', '')
        )

    # Apply standard styling
    fig.update_layout(
        template='plotly_white',
        font=dict(size=12),
        margin=dict(l=50, r=50, t=50, b=50)
    )

    figures.append(fig)

return figures

HTML Template

def build_html_report(title: str, sections: dict, figures: list) -> str: """Build complete HTML report."""

# Convert figures to HTML
chart_html = '\n'.join([
    f'&#x3C;div class="chart-container">{fig.to_html(full_html=False, include_plotlyjs="cdn")}&#x3C;/div>'
    for fig in figures
])

html = f'''&#x3C;!DOCTYPE html>

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{title}</title> <style> :root {{ --primary-color: #2c3e50; --secondary-color: #3498db; --background-color: #f5f6fa; --card-background: #ffffff; --text-color: #2c3e50; }}

    body {{
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
        background-color: var(--background-color);
        color: var(--text-color);
        line-height: 1.6;
    }}

    .report-header {{
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        color: white;
        padding: 40px;
        border-radius: 10px;
        margin-bottom: 30px;
    }}

    .report-header h1 {{
        margin: 0 0 10px 0;
        font-size: 2em;
    }}

    .section {{
        background: var(--card-background);
        padding: 30px;
        border-radius: 10px;
        margin-bottom: 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }}

    .section h2 {{
        color: var(--primary-color);
        border-bottom: 2px solid var(--secondary-color);
        padding-bottom: 10px;
        margin-top: 0;
    }}

    .chart-container {{
        margin: 20px 0;
    }}

    .summary-grid {{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
        margin: 20px 0;
    }}

    .metric-card {{
        background: var(--background-color);
        padding: 20px;
        border-radius: 8px;
        text-align: center;
    }}

    .metric-value {{
        font-size: 2em;
        font-weight: bold;
        color: var(--secondary-color);
    }}

    .metric-label {{
        font-size: 0.9em;
        color: #666;
    }}

    table {{
        width: 100%;
        border-collapse: collapse;
        margin: 20px 0;
    }}

    th, td {{
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }}

    th {{
        background: var(--primary-color);
        color: white;
    }}

    @media (max-width: 768px) {{
        body {{ padding: 10px; }}
        .report-header {{ padding: 20px; }}
        .section {{ padding: 15px; }}
    }}
&#x3C;/style>

</head> <body> <div class="report-header"> <h1>{title}</h1> <div class="report-meta"> <span>Generated: {datetime.now().strftime('%Y-%m-%d %H:%M')}</span> {f'<span> | Project: {sections.get("project", "")}</span>' if sections.get("project") else ''} </div> </div>

{f'&#x3C;div class="section">&#x3C;h2>Executive Summary&#x3C;/h2>{sections.get("summary", "")}&#x3C;/div>' if sections.get("summary") else ''}

{f'&#x3C;div class="section">&#x3C;h2>Methodology&#x3C;/h2>{sections.get("methodology", "")}&#x3C;/div>' if sections.get("methodology") else ''}

&#x3C;div class="section">
    &#x3C;h2>Results&#x3C;/h2>
    {chart_html}
    {sections.get("results", "")}
&#x3C;/div>

{f'&#x3C;div class="section">&#x3C;h2>Discussion&#x3C;/h2>{sections.get("discussion", "")}&#x3C;/div>' if sections.get("discussion") else ''}

{f'&#x3C;div class="section">&#x3C;h2>Conclusions&#x3C;/h2>{sections.get("conclusions", "")}&#x3C;/div>' if sections.get("conclusions") else ''}

{f'&#x3C;div class="section">&#x3C;h2>Appendix&#x3C;/h2>{sections.get("appendix", "")}&#x3C;/div>' if sections.get("appendix") else ''}

&#x3C;footer style="text-align: center; padding: 20px; color: #666; font-size: 0.9em;">
    Report generated using Engineering Report Generator
&#x3C;/footer>

</body> </html>'''

return html

Usage Examples

Example 1: Production Analysis Report

Configuration

report_config = { 'title': 'Monthly Production Analysis', 'project': 'Field A Development', 'summary': ''' <div class="summary-grid"> <div class="metric-card"> <div class="metric-value">125,000</div> <div class="metric-label">Total Oil (bbl)</div> </div> <div class="metric-card"> <div class="metric-value">98.5%</div> <div class="metric-label">Uptime</div> </div> </div> ''', 'charts': [ {'type': 'line', 'x': 'date', 'y': 'production', 'title': 'Daily Production'}, {'type': 'bar', 'x': 'well', 'y': 'cumulative', 'title': 'Well Performance'} ] }

Generate

generate_report( data_path='../data/processed/production.csv', output_path='../reports/production_report.html', **report_config )

Example 2: Structural Analysis Report

report_config = { 'title': 'Structural Analysis Results', 'methodology': '<p>Analysis performed per DNV-RP-C201 using finite element method.</p>', 'charts': [ {'type': 'heatmap', 'x': 'x_coord', 'y': 'y_coord', 'values': 'stress', 'title': 'Stress Distribution'}, {'type': 'scatter', 'x': 'load', 'y': 'displacement', 'title': 'Load-Displacement Curve'} ], 'conclusions': '<p>All structural elements satisfy design criteria with safety factor > 1.5</p>' }

Example 3: Multi-Panel Dashboard

from plotly.subplots import make_subplots

def create_dashboard(df: pd.DataFrame, output_path: str): """Create multi-panel analysis dashboard.""" fig = make_subplots( rows=2, cols=2, subplot_titles=('Trend', 'Distribution', 'Comparison', 'Correlation') )

# Add traces to each panel
fig.add_trace(go.Scatter(x=df['date'], y=df['value'], mode='lines'), row=1, col=1)
fig.add_trace(go.Histogram(x=df['value']), row=1, col=2)
fig.add_trace(go.Bar(x=df['category'], y=df['count']), row=2, col=1)
fig.add_trace(go.Scatter(x=df['x'], y=df['y'], mode='markers'), row=2, col=2)

fig.update_layout(height=800, title_text="Analysis Dashboard")
fig.write_html(output_path)

return output_path

Best Practices

Use relative paths from report location for data
Include interactive plots only (Plotly, Bokeh, Altair)
Apply consistent color schemes across charts
Add clear axis labels and titles
Include hover data for detailed values
Make reports responsive (mobile-friendly)

Don't

Export static matplotlib PNG/SVG images
Use absolute file paths
Create overly complex visualizations
Skip executive summaries
Ignore accessibility (color contrast)

Data Input

Use relative paths from report location
CSV files with clear column headers
Data pre-processed and validated

HTML Output

Self-contained files (CDN for Plotly)
Responsive design (mobile-friendly)
Print-friendly styling
Accessible color contrast

File Organization

project/ data/ raw/ # Original data processed/ # Analysis-ready CSV reports/ analysis.html # Generated reports scripts/ generate_report.py

Error Handling

Common Errors

Error Cause Solution

FileNotFoundError

Data file missing Verify data path is correct

KeyError

Column not in DataFrame Check column names match config

ValueError

Data type mismatch Convert types before plotting

Empty figure

No data after filtering Validate data before visualization

Error Template

def safe_generate_report(data_path: str, output_path: str, config: dict) -> dict: """Generate report with error handling.""" try: # Validate data exists if not Path(data_path).exists(): return {'status': 'error', 'message': f'Data file not found: {data_path}'}

    # Load and validate
    df = pd.read_csv(data_path)
    if df.empty:
        return {'status': 'error', 'message': 'Data file is empty'}

    # Generate report
    output = generate_report(data_path, output_path, **config)
    return {'status': 'success', 'output': output}

except Exception as e:
    return {'status': 'error', 'message': str(e)}

Execution Checklist

Data file exists and is not empty
Column names match chart configuration
Output directory exists or is created
All charts have titles and labels
Report includes executive summary
Plotly CDN included for interactivity
Responsive design tested on mobile
Color contrast meets accessibility standards
Report file size is reasonable (<10MB)

Metrics

Metric Target Description

Generation Time <5s Report creation speed

File Size <10MB HTML report size

Load Time <3s Browser render time

Chart Count 1-10 Optimal visualization count

Mobile Score

90 Lighthouse mobile score

Integration

With YAML Workflow

task: generate_report input: data_path: data/processed/results.csv output: report_path: reports/analysis.html config: title: "Analysis Report" charts: - type: line x: time y: value

With Data Pipeline

Pipeline output -> Report input

pipeline_results = process_data(raw_data) pipeline_results.to_csv('data/processed/results.csv')

generate_report( data_path='data/processed/results.csv', output_path='reports/analysis.html', title='Pipeline Results' )

Related Skills

xlsx - Excel data handling
pdf - PDF report generation
data-pipeline-processor - Data preparation
yaml-workflow-executor - Workflow automation

Version History

1.1.0 (2026-01-02): Upgraded to SKILL_TEMPLATE_v2 format with Quick Start, Error Handling, Metrics, Execution Checklist, additional examples
1.0.0 (2024-10-15): Initial release with Plotly visualizations, HTML templates, responsive design

engineering-report-generator

Safety Notice

Copy this and send it to your AI assistant to learn

Load data

Create visualization

Generate HTML report

Configuration

Generate

Pipeline output -> Report input

Source Transparency

Related Skills

echarts

pandoc

mkdocs

gis