check-chart-preview

name	check-chart-preview
description	Check chart or multidim preview on the staging server using a browser. Use when user wants to visually verify a chart renders correctly on staging, take a screenshot of a chart, or QA a chart/mdim preview.
metadata	{"internal":true}

Check Chart/Mdim Preview on Staging

Visually verify that a chart or multidimensional indicator page renders correctly on the staging server.

Prerequisites

• The agent-browser skill must be available (for browser automation)
• A staging server must be running for the current git branch (check via curl -s -o /dev/null -w "%{http_code}" http://<container>/)
• The chart/mdim must have been pushed to staging already (either via etlr --watch in VSCode or manually)

Getting the Staging URL

Option 1: Helper script (recommended)

.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py <slug-or-path>

Accepts chart slugs, mdim slugs, or file paths:

# Chart slug (most common)
.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py life-expectancy

# Mdim slug
.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py energy/latest/energy_prices#energy_prices

# Export multidim file path
.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py etl/steps/export/multidim/energy/latest/energy_prices.config.yml

# Chart file path
.venv/bin/python .claude/skills/check-chart-preview/get_staging_url.py etl/steps/graph/covid/latest/covid-cases.chart.yml

Option 2: Construct manually

1. Get the git branch: git branch --show-current
2. Compute container name: replace /._ with - in branch name, strip any staging-site- prefix, prepend staging-site-, truncate the normalized part to 28 chars, strip trailing -
3. Determine chart type and URL:

File type	URL pattern
.chart.yml (simple, no # in slug)	http://<container>/grapher/<slug>
.chart.yml (mdim, # in slug)	http://<container>/admin/grapher/<catalogPath>
export/multidim/*.config.yml or *.py	http://<container>/admin/grapher/<namespace>/<version>/<shortName>%23<shortName>

For .chart.yml: the slug is in the YAML slug: field. For mdim slugs containing #, the catalogPath inserts the version from the file path.

For export multidim: derive from path etl/steps/export/multidim/<namespace>/<version>/<shortName>.* → catalogPath is <namespace>/<version>/<shortName>#<shortName>.

Checking the Preview

Use the agent-browser skill to:

1. Navigate to the staging URL
2. Wait for the chart to render (look for the Grapher SVG or iframe content to load)
3. Verify:
   • No error banner or "Chart not found" message
   • Chart title is visible
   • Data points / map regions are rendered (not an empty chart)
   • For mdim: dimension dropdowns are present and functional
4. Take a screenshot and save to ai/ directory

Quick PNG check (non-mdim charts only)

For simple (non-mdim) charts, you can fetch a PNG directly without a browser:

curl -o ai/chart_preview.png "http://<container>/grapher/<slug>.png?nocache"

Add &tab=map or &tab=chart to control which tab is shown. This does NOT work for mdim charts.

Pushing to Staging First

If the chart hasn't been pushed yet:

# For graph step charts
.venv/bin/etlr graph://<namespace>/<version>/<slug> --graph --graph-push --private

# For export multidim
.venv/bin/etlr export://multidim/<namespace>/<version>/<shortName> --export --private