Visualization

Genererar ClickHouse chart-spec JSON för linje/stapel/cirkeldiagram — renderas endast i DataStoria-appen

av FrankChen021 · FrankChen021/datastoria

Fungerar med konfiguration ★ 5.6/10

Visualization — Genererar ClickHouse chart-spec JSON för linje/stapel/cirkeldiagram — renderas endast i DataStoria-appen

Vad den gör

Omvandlar en ClickHouse SQL-fråga till ett `chart-spec` JSON-block som väljer diagramtyp (line, bar, pie, table) först från explicita användarnyckelord och sedan från frågans form, och sätter titel, bredd och legendplacering enligt fasta regler. Utlöses när användaren ber om ett diagram, en graf, en plot, en trend eller en tidsserie av ClickHouse-data. Det är en in-app färdighet för DataStoria webb-UI: det obligatoriska `validate_sql`-steget och `chart-spec`-renderaren finns båda i den appen, så utanför DataStoria förblir det genererade blocket inert text.

Testrapport

Klonade till en tillfällig HOME och kopierade färdighetskatalogen; frontmatter tolkades via PyYAML med name+description närvarande, och de tre resurserna som kroppen nämner (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md) returnerade alla HTTP 200 — inga curl|sh, inga base64, inga hårdkodade /Users-sökvägar. Jag skrev två artefakter för samma förfrågan (dagliga commits februari 2021, SQL redan tillhandahållen, "as a line chart"): baseline genererade ett ```python matplotlib-skript plus en platshållare ```mermaid xychart, medan färdighetsföljd körning genererade ett enda ```chart-spec JSON-block med type/titleOption/width/legendOption.placement:"none"/datasource.sql. Jag kunde INTE utföra arbetsflödets obligatoriska steg (b) `validate_sql` — grep placerade det i src/lib/ai/tools/clickhouse/validate-sql.ts, ett DataStoria-appverktyg som behövde en live ClickHouse, och grep hittade `chart-spec` tolkad endast av src/components/chat/message/message-markdown.tsx — så utanför den appen är färdighetens utdata en orenderad kodruta och jämförelsen är inte en verklig kapacitetsmätning. Utlösningsfraser bedömda: "Show me a line chart of query duration over the last 24h from system.query_log" (ladda, korrekt), "Visualize the top 10 tables by disk usage as a bar chart" (ladda, korrekt), "Give me a pie chart of ClickHouse queries by user" (ladda, korrekt), "Explain why my ClickHouse merge is slow" (hoppa över, korrekt), "Plot my CSV sales data as a bar chart with matplotlib" (jag skulle ladda den — beskrivningen säger bara "charts, graphs, plots" utan ClickHouse-kvalificering, så den ger falska positiva på generisk diagramframställning) = 4/5.

Testad: 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.

Kommandon och exempelprompter

/visualizationGenererar ClickHouse chart-spec JSON för linje/stapel/cirkeldiagram — renderas endast i DataStoria-appen

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →