Visualization

Udsender ClickHouse chart-spec JSON for line/bar/pie — gengives kun inde i DataStoria-appen

Af FrankChen021 · FrankChen021/datastoria

Virker med opsætning ★ 5.6/10

Visualization — Udsender ClickHouse chart-spec JSON for line/bar/pie — gengives kun inde i DataStoria-appen

Hvad det gør

Omdanner en ClickHouse SQL-forespørgsel til en `chart-spec` JSON-blok, der vælger diagramtype (line, bar, pie, table) ud fra eksplicitte bruger-nøgleord først og forespørgselsform sekundært, og sætter titel, bredde og legend-placering efter faste regler. Udløses, når brugeren beder om et diagram, en graf, et plot, en trend eller en tidsserie af ClickHouse-data. Det er en in-app færdighed for DataStoria web-UI: det obligatoriske `validate_sql`-trin og `chart-spec`-rendereren lever begge i den app, så uden for DataStoria forbliver den udsendte blok inert tekst.

Testrapport

Klonede til en midlertidig HOME og kopierede færdighedsmappen; frontmatter parsed via PyYAML med name+description til stede, og de tre ressourcer, som kroppen navngiver (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md), returnerede alle HTTP 200 — ingen curl|sh, ingen base64, ingen hardkodede /Users-stier. Jeg skrev to artefakter for den samme anmodning (daglige commits februar 2021, SQL allerede leveret, "as a line chart"): baselinen udsendte et ```python matplotlib-script plus en pladsholder ```mermaid xychart, mens den færdighedsfulgte kørsel udsendte en enkelt ```chart-spec JSON-blok med type/titleOption/width/legendOption.placement:"none"/datasource.sql. Jeg kunne IKKE udføre workflowets obligatoriske trin (b) `validate_sql` — grep placerede det i src/lib/ai/tools/clickhouse/validate-sql.ts, et DataStoria app-værktøj, der kræver en live ClickHouse, og grep fandt `chart-spec` parsed kun af src/components/chat/message/message-markdown.tsx — så uden for den app er færdighedens output en urenderet kodehegn, og sammenligningen er ikke en reel kapacitetsmåling. Udløserfraser bedømt: "Show me a line chart of query duration over the last 24h from system.query_log" (indlæs, korrekt), "Visualize the top 10 tables by disk usage as a bar chart" (indlæs, korrekt), "Give me a pie chart of ClickHouse queries by user" (indlæs, korrekt), "Explain why my ClickHouse merge is slow" (spring over, korrekt), "Plot my CSV sales data as a bar chart with matplotlib" (jeg ville indlæse det — beskrivelsen siger kun "charts, graphs, plots" uden ClickHouse-kvalifikation, så det giver falske positiver på generisk diagramvisning) = 4/5.

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

Kommandoer og eksempelprompter

  • /visualizationUdsender ClickHouse chart-spec JSON for line/bar/pie — gengives kun inde i DataStoria-appen

Skills udløses af almindelige forespørgsler — ingen kommandoer at huske. Efter installationen aktiverer prompter som disse skillen (på engelsk):

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