Visualization

Émet du JSON chart-spec ClickHouse pour ligne/barre/secteur — rendu uniquement dans l'application DataStoria

par FrankChen021 · FrankChen021/datastoria

Fonctionne avec configuration ★ 5.6/10

Visualization — Émet du JSON chart-spec ClickHouse pour ligne/barre/secteur — rendu uniquement dans l'application DataStoria

Ce que fait

Transforme une requête SQL ClickHouse en un bloc JSON `chart-spec` qui choisit le type de graphique (line, bar, pie, table) d'abord à partir de mots-clés explicites de l'utilisateur, puis de la forme de la requête, et définit le titre, la largeur et le placement de la légende par des règles fixes. Se déclenche lorsque l'utilisateur demande un graphique, un tracé, une tendance ou une série temporelle de données ClickHouse. C'est une compétence intégrée à l'application pour l'interface utilisateur web DataStoria : l'étape obligatoire `validate_sql` et le moteur de rendu `chart-spec` résident tous deux dans cette application, donc en dehors de DataStoria, le bloc émis reste un texte inerte.

Rapport de test

Cloné dans un HOME temporaire et copié le répertoire de la compétence ; le frontmatter a été analysé via PyYAML avec name+description présents, et les trois ressources nommées dans le corps (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md) ont toutes renvoyé HTTP 200 — pas de curl|sh, pas de base64, pas de chemins /Users codés en dur. J'ai écrit deux artefacts pour la même requête (commits quotidiens février 2021, SQL déjà fourni, "as a line chart") : la base de référence a émis un script ```python matplotlib plus un ```mermaid xychart de remplacement, tandis que l'exécution suivant la compétence a émis un seul bloc JSON ```chart-spec avec type/titleOption/width/legendOption.placement:"none"/datasource.sql. Je n'ai PAS pu exécuter l'étape obligatoire (b) `validate_sql` du workflow — grep l'a placée dans src/lib/ai/tools/clickhouse/validate-sql.ts, un outil de l'application DataStoria nécessitant un ClickHouse en direct, et grep a trouvé `chart-spec` analysé uniquement par src/components/chat/message/message-markdown.tsx — donc en dehors de cette application, la sortie de la compétence est une clôture de code non rendue et la comparaison n'est pas une mesure de capacité réelle. Phrases de déclenchement jugées : "Show me a line chart of query duration over the last 24h from system.query_log" (chargement, correct), "Visualize the top 10 tables by disk usage as a bar chart" (chargement, correct), "Give me a pie chart of ClickHouse queries by user" (chargement, correct), "Explain why my ClickHouse merge is slow" (saut, correct), "Plot my CSV sales data as a bar chart with matplotlib" (je le chargerais — la description ne dit que "charts, graphs, plots" sans qualificatif ClickHouse, donc il y a des faux positifs sur les graphiques génériques) = 4/5.

Testé le: 2026-07-31 · Claude Code 2.x (agent harness)

Installation

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.

Commandes et exemples de prompts

/visualizationÉmet du JSON chart-spec ClickHouse pour ligne/barre/secteur — rendu uniquement dans l'application DataStoria

Les skills se déclenchent sur des demandes en langage courant — aucune commande à retenir. Après installation, des prompts comme ceux-ci l'activent (en anglais) :

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

Rapport complet →