Visualization

Emette JSON chart-spec ClickHouse per linea/barra/torta — renderizza solo all'interno dell'app DataStoria

di FrankChen021 · FrankChen021/datastoria

Richiede configurazione ★ 5.6/10

Visualization — Emette JSON chart-spec ClickHouse per linea/barra/torta — renderizza solo all'interno dell'app DataStoria

Cosa fa

Trasforma una query SQL ClickHouse in un blocco JSON `chart-spec` che seleziona il tipo di grafico (linea, barra, torta, tabella) prima dalle parole chiave esplicite dell'utente e poi dalla forma della query, e imposta titolo, larghezza e posizionamento della legenda tramite regole fisse. Si attiva quando l'utente chiede un grafico, un plot, un trend o una serie temporale di dati ClickHouse. È una skill in-app per l'interfaccia utente web DataStoria: il passo obbligatorio `validate_sql` e il renderer `chart-spec` risiedono entrambi in quell'app, quindi al di fuori di DataStoria il blocco emesso rimane testo inerte.

Rapporto di test

Clonato in una HOME temporanea e copiata la directory della skill; il frontmatter è stato analizzato tramite PyYAML con name+description presenti, e le tre risorse nominate nel corpo (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md) hanno tutte restituito HTTP 200 — nessun curl|sh, nessun base64, nessun percorso /Users hardcoded. Ho scritto due artefatti per la stessa richiesta (commit giornalieri Feb 2021, SQL già fornito, "as a line chart"): la baseline ha emesso uno script ```python matplotlib più un segnaposto ```mermaid xychart, mentre l'esecuzione seguita dalla skill ha emesso un singolo blocco JSON ```chart-spec con type/titleOption/width/legendOption.placement:"none"/datasource.sql. NON ho potuto eseguire il passo obbligatorio (b) `validate_sql` del workflow — grep lo ha trovato in src/lib/ai/tools/clickhouse/validate-sql.ts, uno strumento dell'app DataStoria che richiede un ClickHouse attivo, e grep ha trovato `chart-spec` analizzato solo da src/components/chat/message/message-markdown.tsx — quindi al di fuori di quell'app l'output della skill è un blocco di codice non renderizzato e il confronto non è una vera misurazione delle capacità. Frasi trigger giudicate: "Show me a line chart of query duration over the last 24h from system.query_log" (carica, corretto), "Visualize the top 10 tables by disk usage as a bar chart" (carica, corretto), "Give me a pie chart of ClickHouse queries by user" (carica, corretto), "Explain why my ClickHouse merge is slow" (salta, corretto), "Plot my CSV sales data as a bar chart with matplotlib" (lo caricherei — la descrizione dice solo "charts, graphs, plots" senza qualificatore ClickHouse, quindi produce falsi positivi sulla creazione di grafici generici) = 4/5.

Testato il: 2026-07-31 · Claude Code 2.x (agent harness)

Installazione

git clone --depth 1 https://github.com/FrankChen021/datastoria.git /tmp/visualization-src
mkdir -p ~/.claude/skills
cp -R /tmp/visualization-src/resources/skills/visualization ~/.claude/skills/visualization
cp -R /tmp/visualization-src/resources/skills/sql-expert ~/.claude/skills/sql-expert
cp -R /tmp/visualization-src/resources/skills/clickhouse-system-queries ~/.claude/skills/clickhouse-system-queries
# The last two copies are NOT optional: the visualization body orders the agent to load
# `sql-expert` before generating SQL, and `clickhouse-system-queries` for system.query_log work.
# HOST DEPENDENCY — this is a DataStoria in-app skill, not a standalone Claude Code skill.
# Step (b) of the workflow is a mandatory `validate_sql` tool call; that tool is defined in
# src/lib/ai/tools/clickhouse/validate-sql.ts and needs a live ClickHouse connection.
# The `chart-spec` fenced block it outputs is parsed only by
# src/components/chat/message/message-markdown.tsx. In a plain Claude Code terminal the block
# renders as inert text and no chart is drawn.
# To get the intended behaviour, run DataStoria itself (npm install && npm run dev in
# /tmp/visualization-src) and configure a ClickHouse connection plus an AI model.

Comandi e prompt di esempio

/visualizationEmette JSON chart-spec ClickHouse per linea/barra/torta — renderizza solo all'interno dell'app DataStoria

Gli skill si attivano con richieste in linguaggio naturale, senza comandi da ricordare. Dopo l'installazione, prompt come questi lo attivano (in inglese):

Chart this data as a time series
Create a bar chart of quarterly revenue
Turn this dataset into a pie chart

Rapporto completo →