Visualization
Genereert ClickHouse chart-spec JSON voor lijn/staaf/cirkel — rendert alleen binnen de DataStoria app
Werkt met setup
Wat het doet
Zet een ClickHouse SQL query om in een `chart-spec` JSON-blok dat het grafiektype (line, bar, pie, table) kiest op basis van expliciete gebruikerszoekwoorden eerst en de queryvorm daarna, en stelt titel, breedte en legenda plaatsing in volgens vaste regels. Activeert wanneer de gebruiker vraagt om een grafiek, plot, trend of tijdreeks van ClickHouse-gegevens. Het is een in-app skill voor de DataStoria web UI: de verplichte `validate_sql` stap en de `chart-spec` renderer bevinden zich beide in die app, dus buiten DataStoria blijft het gegenereerde blok inerte tekst.
Testrapport
Gekloond naar een tijdelijke HOME en de skill-map gekopieerd; frontmatter geparset via PyYAML met name+description aanwezig, en de drie resources die de body noemt (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md) retourneerden allemaal HTTP 200 — geen curl|sh, geen base64, geen hardcoded /Users paden. Ik schreef twee artefacten voor hetzelfde verzoek (dagelijkse commits Feb 2021, SQL reeds geleverd, "as a line chart"): de baseline genereerde een ```python matplotlib script plus een placeholder ```mermaid xychart, terwijl de skill-gevolgde uitvoering een enkel ```chart-spec JSON-blok genereerde met type/titleOption/width/legendOption.placement:"none"/datasource.sql. Ik kon de verplichte stap (b) `validate_sql` van de workflow NIET uitvoeren — grep plaatste het in src/lib/ai/tools/clickhouse/validate-sql.ts, een DataStoria app tool die een live ClickHouse nodig heeft, en grep vond `chart-spec` alleen geparset door src/components/chat/message/message-markdown.tsx — dus buiten die app is de output van de skill een niet-gerenderd codeblok en is de vergelijking geen echte capaciteitsmeting. Trigger formuleringen beoordeeld: "Show me a line chart of query duration over the last 24h from system.query_log" (laden, correct), "Visualize the top 10 tables by disk usage as a bar chart" (laden, correct), "Give me a pie chart of ClickHouse queries by user" (laden, correct), "Explain why my ClickHouse merge is slow" (overslaan, correct), "Plot my CSV sales data as a bar chart with matplotlib" (Ik zou het laden — de beschrijving zegt alleen "charts, graphs, plots" zonder ClickHouse kwalificatie, dus het geeft vals-positieven op generieke grafieken) = 4/5.
Getest op: 2026-07-31 · Claude Code 2.x (agent harness)
Installatie
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.
Commando's en voorbeeldprompts
/visualizationGenereert ClickHouse chart-spec JSON voor lijn/staaf/cirkel — rendert alleen binnen de DataStoria app
Skills reageren op gewone verzoeken — geen commando's om te onthouden. Na installatie activeren prompts zoals deze de skill (in het Engels):
Chart this data as a time seriesCreate a bar chart of quarterly revenueTurn this dataset into a pie chart