interactive-report-generator
Included with Lifetime
$97 forever
Generate interactive HTML reports with Plotly visualizations from data analysis results. Supports dashboards, charts, and professional styling.
workspace-hub
What this skill does
# Interactive Report Generator
> Create professional, interactive HTML reports with Plotly visualizations.
## Quick Start
```bash
# Generate report from data
/interactive-report-generator --data results.csv --output report.html
# Create dashboard
/interactive-report-generator --type dashboard --config dashboard.yaml
# Generate from analysis results
/interactive-report-generator --source analysis_output/
```
## When to Use
**USE when:**
- Creating analysis reports
- Generating data visualizations
- Building dashboards
- Presenting results to stakeholders
**DON'T USE when:**
- Static images are required
- PDF export is primary format
- Real-time streaming data
## Prerequisites
- Python 3.9+
- plotly>=5.15.0
- pandas>=2.0.0
- Data in CSV/DataFrame format
## Overview
Generates interactive HTML reports compliant with workspace-hub HTML_REPORTING_STANDARDS.md:
1. **Interactive plots only** - No static matplotlib
2. **CSV data import** - Relative paths
3. **Responsive design** - Works on all devices
4. **Professional styling** - Consistent theming
5. **Export options** - PNG, SVG from plots
## Core Templates
### 1. Basic Report Template
```python
"""
ABOUTME: Interactive HTML report generator
ABOUTME: Creates Plotly-based reports from analysis data
"""
import pandas as pd
import plotly.express as px
import plotly.graph_objects as go
from plotly.subplots import make_subplots
from pathlib import Path
from datetime import datetime
from typing import Dict, List, Any, Optional
def generate_report(
data: pd.DataFrame,
output_path: Path,
title: str = "Analysis Report",
config: Optional[Dict[str, Any]] = None
) -> Path:
"""
Generate interactive HTML report from data.
Args:
data: DataFrame with analysis results
output_path: Path to save HTML report
title: Report title
config: Optional configuration dictionary
Returns:
Path to generated report
"""
config = config or {}
# Create HTML structure
html_content = f"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<style>
* {{
margin: 0;
padding: 0;
box-sizing: border-box;
}}
body {{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background-color: #f5f5f5;
color: #333;
line-height: 1.6;
}}
.report-header {{
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
text-align: center;
}}
.report-header h1 {{
font-size: 2.5em;
margin-bottom: 10px;
}}
.report-header .metadata {{
opacity: 0.9;
font-size: 0.9em;
}}
.container {{
max-width: 1400px;
margin: 0 auto;
padding: 20px;
}}
.summary-cards {{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin: 30px 0;
}}
.card {{
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
text-align: center;
}}
.card .label {{
font-size: 0.85em;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}}
.card .value {{
font-size: 2.5em;
font-weight: bold;
color: #667eea;
margin: 10px 0;
}}
.plot-container {{
background: white;
border-radius: 12px;
padding: 25px;
margin: 20px 0;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}}
.plot-container h2 {{
margin-bottom: 20px;
color: #333;
border-bottom: 2px solid #667eea;
padding-bottom: 10px;
}}
.footer {{
text-align: center;
padding: 30px;
color: #666;
font-size: 0.85em;
}}
@media (max-width: 768px) {{
.report-header h1 {{
font-size: 1.8em;
}}
.card .value {{
font-size: 2em;
}}
}}
</style>
</head>
<body>
<div class="report-header">
<h1>{title}</h1>
<div class="metadata">
Generated: {datetime.now().strftime('%Y-%m-%d %H:%M:%S')} |
Records: {len(data):,}
</div>
</div>
<div class="container">
<!-- Summary Cards -->
<div class="summary-cards" id="summary-cards">
<!-- Generated by JavaScript -->
</div>
<!-- Plots -->
<div id="plots-container">
<!-- Generated dynamically -->
</div>
</div>
<div class="footer">
Generated with Interactive Report Generator | workspace-hub
</div>
</body>
</html>
"""
# Write HTML
output_path.parent.mkdir(parents=True, exist_ok=True)
output_path.write_text(html_content)
return output_path
def create_time_series_plot(
data: pd.DataFrame,
x_col: str,
y_cols: List[str],
title: str = "Time Series"
) -> go.Figure:
"""
Create interactive time series plot.
Args:
data: DataFrame with time series data
x_col: Column for x-axis (typically datetime)
y_cols: Columns for y-axis values
title: Plot title
Returns:
Plotly Figure object
"""
fig = go.Figure()
for col in y_cols:
fig.add_trace(go.Scatter(
x=data[x_col],
y=data[col],
mode='lines+markers',
name=col,
hovertemplate='%{x}<br>%{y:.2f}<extra></extra>'
))
fig.update_layout(
title=title,
xaxis_title=x_col,
yaxis_title="Value",
hovermode='x unified',
template='plotly_white',
height=500
)
return fig
def create_distribution_plot(
data: pd.DataFrame,
column: str,
title: str = "Distribution"
) -> go.Figure:
"""
Create interactive histogram/distribution plot.
Args:
data: DataFrame with data
column: Column to plot distribution
title: Plot title
Returns:
Plotly Figure object
"""
fig = px.histogram(
data,
x=column,
title=title,
template='plotly_white',
nbins=50
)
fig.update_layout(
xaxis_title=column,
yaxis_title="Count",
height=400
)
return fig
def create_correlation_heatmap(
data: pd.DataFrame,
columns: Optional[List[str]] = None,
title: str = "Correlation Matrix"
) -> go.Figure:
"""
Create interactive correlation heatmap.
Args:
data: DataFrame with numeric data
columns: Optional list of columns to include
title: Plot title
Returns:
Plotly Figure object
"""
if columns:
corr_data = data[columns].corr()
else:
corr_data = data.select_dtypes(include='number').corr()
fig = px.imshow(
corr_data,
title=title,
template='plotly_white',
color_continuous_scale='RdBu_r',
zmin=-1,
zmax=1
)
fig.update_layout(height=500)
return fig
def create_dashboard(
data: pd.DataFrame,
output_path: Path,
config: Dict[str, Any]
) -> Path:
"""
Create multi-panel dashboard.
Args:
data: DataFrame with analysis data
output_path: Path to save dashboard HTML
config: Dashboard configuration
Returns:
Path to generated dashboard
"""
Related in workspace-hub
data-validation-reporter
IncludedGenerate interactive validation reports with quality scoring, missing data analysis, and type checking. Combines Pandas validation, Plotly visualization, and YAML configuration for comprehensive data quality reporting.
workspace-hub
claude-reflection
IncludedSelf-improvement and learning skill that helps Claude learn from user interactions, corrections, and preferences
workspace-hub
yaml-workflow-executor
IncludedExecute data processing workflows defined in YAML configuration files. Supports data loading, transformation, validation, and reporting pipelines.
workspace-hub
bash-script-framework
IncludedCreate organized bash script structure with color output, menu systems, error handling, and cross-platform support. Standardizes CLI tooling.
workspace-hub
pytest-fixture-generator
IncludedGenerate standardized pytest configuration with fixtures, markers, and coverage settings. Creates conftest.py and pytest.ini for workspace-hub compliant testing.
workspace-hub
agent-os-framework
IncludedGenerate standardized .agent-os directory structure with product documentation, mission, tech-stack, roadmap, and decision records. Enables AI-native workflows.
workspace-hub