1#!/usr/bin/env python3
2"""
3Chart builder v3: project-based chart generation.
4 
5Each chart project lives in output/chart-html/<project-name>/
6  index.html   — the chart page
7  generate.py  — the generation script (optional, for reproducibility)
8  README.md    — title, description, data sources
9  data.json    — raw data snapshot
10  screenshot.png — exported PNG (via Playwright or button)
11 
12Usage:
13  from skills.chart.scripts.build_chart import (
14      create_project, build_chart, build_chart_custom, save_chart, screenshot_chart
15  )
16 
17  # Create project directory
18  project_dir = create_project('btc-gold-90d')
19 
20  # Build HTML
21  html = build_chart_custom(title='BTC vs Gold', ...)
22  save_chart(html, project_dir=project_dir)
23 
24  # Optional: screenshot for direct image delivery
25  screenshot_chart(project_dir)
26"""
27 
28import os
29import json
30from datetime import datetime
31from pathlib import Path
32 
33SKILL_DIR = os.path.join(os.path.dirname(__file__), '..')
34SCRIPTS_DIR = os.path.join(SKILL_DIR, 'scripts')
35TEMPLATES_DIR = os.path.join(SKILL_DIR, 'templates')
36CHART_HTML_DIR = os.path.join('/data/workspace', 'output', 'chart-html')
37 
38 
39def _read(path):
40    with open(path, 'r') as f:
41        return f.read()
42 
43 
44def get_base_css():
45    return _read(os.path.join(SCRIPTS_DIR, 'base-styles.css'))
46 
47 
48def get_base_js():
49    return _read(os.path.join(SCRIPTS_DIR, 'base-export.js'))
50 
51 
52def create_project(name, description='', data_sources=None):
53    """Create a new chart project directory.
54 
55    Args:
56        name: Project folder name (e.g. 'btc-gold-90d-20250701')
57        description: What this chart shows
58        data_sources: list of data source strings
59 
60    Returns:
61        Absolute path to the project directory
62    """
63    project_dir = os.path.join(CHART_HTML_DIR, name)
64    os.makedirs(project_dir, exist_ok=True)
65 
66    # Write README.md
67    readme = f"# {name}\n\n"
68    readme += f"**Created:** {datetime.now().strftime('%Y-%m-%d %H:%M')}\n\n"
69    if description:
70        readme += f"{description}\n\n"
71    if data_sources:
72        readme += "**Data Sources:**\n"
73        for src in data_sources:
74            readme += f"- {src}\n"
75 
76    readme_path = os.path.join(project_dir, 'README.md')
77    if not os.path.exists(readme_path):
78        with open(readme_path, 'w') as f:
79            f.write(readme)
80 
81    return project_dir
82 
83 
84def build_chart(template_name, title='Chart', subtitle='', replacements=None):
85    """Build chart from a template file.
86 
87    Args:
88        template_name: template filename without .html extension (e.g. 'line', 'bar')
89        title: chart page title
90        subtitle: subtitle text
91        replacements: dict of additional {{KEY}} → value replacements
92 
93    Returns:
94        Complete HTML string
95    """
96    tpl_path = os.path.join(TEMPLATES_DIR, f'{template_name}.html')
97    html = _read(tpl_path)
98 
99    css = get_base_css()
100    js = get_base_js()
101 
102    html = html.replace('{{BASE_STYLES}}', css)
103    html = html.replace('{{BASE_EXPORT_JS}}', js)
104    html = html.replace('{{TITLE}}', title)
105    html = html.replace('{{SUBTITLE}}', subtitle)
106 
107    if replacements:
108        for k, v in replacements.items():
109            html = html.replace(f'{{{{{k}}}}}', v)
110 
111    return html
112 
113 
114def build_chart_custom(title='Chart', subtitle='', body_html='', chart_js='',
115                       extra_css='', kpi_html='', layout='vertical'):
116    """Build a fully custom chart page without using a template.
117 
118    IMPORTANT: chart_js MUST:
119    1. Set window.CHART_INSTANCES = []; at the start
120    2. Push each echarts instance: CHART_INSTANCES.push(chartVar);
121    3. Optionally set window.CHART_LAYOUT = 'grid'; for 2-column export layout
122 
123    Args:
124        title: page title
125        subtitle: subtitle text below title
126        body_html: HTML for chart containers (inside #chart-area)
127        chart_js: JavaScript for chart initialization (must register CHART_INSTANCES)
128        extra_css: additional CSS
129        kpi_html: optional KPI cards HTML (placed above chart-area, not exported)
130        layout: 'vertical' (default) or 'grid' — how charts are merged in export PNG
131 
132    Returns:
133        Complete HTML string
134    """
135    css = get_base_css()
136    js = get_base_js()
137    layout_js = f"window.CHART_LAYOUT = '{layout}';" if layout != 'vertical' else ''
138 
139    return f'''<!DOCTYPE html>
140<html lang="en">
141<head>
142  <meta charset="UTF-8">
143  <meta name="viewport" content="width=device-width, initial-scale=1.0">
144  <title>{title}</title>
145  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
146  <style>
147    {css}
148    {extra_css}
149  </style>
150</head>
151<body>
152  <div class="toolbar">
153    <div>
154      <h1>{title}</h1>
155      <div class="subtitle">{subtitle}</div>
156    </div>
157    <div class="actions">
158      <button onclick="downloadPNG(this)">📥 Download PNG</button>
159      <button onclick="copyToClipboard(this)">📋 Copy Image</button>
160      <button onclick="saveToProject(this)">💾 Save Image</button>
161    </div>
162  </div>
163  {kpi_html}
164  <div id="chart-area">
165    {body_html}
166  </div>
167  <script>
168    {js}
169    {layout_js}
170  </script>
171  <script>
172    {chart_js}
173  </script>
174</body>
175</html>'''
176 
177 
178def save_chart(html, filename='index.html', project_dir=None, output_dir=None):
179    """Save HTML to project directory or a legacy output directory.
180 
181    Args:
182        html: HTML string
183        filename: filename (default 'index.html')
184        project_dir: project directory path (preferred)
185        output_dir: legacy fallback directory
186 
187    Returns:
188        The file path written
189    """
190    if project_dir:
191        target_dir = project_dir
192    elif output_dir:
193        target_dir = output_dir
194    else:
195        target_dir = CHART_HTML_DIR
196 
197    os.makedirs(target_dir, exist_ok=True)
198    path = os.path.join(target_dir, filename)
199    with open(path, 'w') as f:
200        f.write(html)
201    return path
202 
203 
204def save_data(data, project_dir, filename='data.json'):
205    """Save data snapshot to project directory.
206 
207    Args:
208        data: dict or list to serialize as JSON
209        project_dir: project directory path
210        filename: filename (default 'data.json')
211 
212    Returns:
213        The file path written
214    """
215    os.makedirs(project_dir, exist_ok=True)
216    path = os.path.join(project_dir, filename)
217    with open(path, 'w') as f:
218        json.dump(data, f, ensure_ascii=False, indent=2)
219    return path
220 
221 
222def save_generate_script(script_content, project_dir):
223    """Save the generation script for reproducibility.
224 
225    Args:
226        script_content: Python script as string
227        project_dir: project directory path
228 
229    Returns:
230        The file path written
231    """
232    os.makedirs(project_dir, exist_ok=True)
233    path = os.path.join(project_dir, 'generate.py')
234    with open(path, 'w') as f:
235        f.write(script_content)
236    return path
237 
238 
239def screenshot_chart(project_dir, filename='screenshot.png', width=1280, height=720):
240    """Generate PNG via the same merge pipeline as the "Save Image" button.
241 
242    This ensures one-click screenshot output is visually equivalent to saveToProject()
243    in the browser (title included, merged multi-chart layout consistent).
244 
245    Args:
246        project_dir: project directory containing index.html
247        filename: output PNG filename
248        width: viewport width
249        height: viewport height
250 
251    Returns:
252        The screenshot file path, or None if failed
253    """
254    try:
255        from playwright.sync_api import sync_playwright
256    except ImportError:
257        print("[chart] Playwright not available, skipping screenshot")
258        return None
259 
260    html_path = os.path.join(project_dir, 'index.html')
261    if not os.path.exists(html_path):
262        print(f"[chart] No index.html found in {project_dir}")
263        return None
264 
265    out_path = os.path.join(project_dir, filename)
266    file_url = f"file://{os.path.abspath(html_path)}"
267 
268    try:
269        with sync_playwright() as p:
270            browser = p.chromium.launch()
271            page = browser.new_page(viewport={'width': width, 'height': height})
272            page.goto(file_url)
273            page.wait_for_timeout(2200)  # let ECharts render
274 
275            # Reuse front-end merge/export logic for fidelity with save button.
276            data_url = page.evaluate(
277                """
278                async () => {
279                  if (typeof mergeChartsToDataURL === 'function') {
280                    return await mergeChartsToDataURL();
281                  }
282                  throw new Error('mergeChartsToDataURL is not available on page');
283                }
284                """
285            )
286 
287            if not data_url or ',' not in data_url:
288                raise RuntimeError('Invalid data URL returned from page export pipeline')
289 
290            b64 = data_url.split(',', 1)[1]
291            import base64
292            png_bytes = base64.b64decode(b64)
293            with open(out_path, 'wb') as f:
294                f.write(png_bytes)
295 
296            browser.close()
297 
298        print(f"[chart] Screenshot saved: {out_path}")
299        return out_path
300    except Exception as e:
301        print(f"[chart] Screenshot failed: {e}")
302        return None
303 
304 
305if __name__ == '__main__':
306    # Quick test
307    proj = create_project('test-chart')
308    html = build_chart('line', title='Test Chart', subtitle='Testing build v3')
309    path = save_chart(html, project_dir=proj)
310    print(f'Built: {path}')
311