Visualization

Emite JSON chart-spec de ClickHouse para líneas/barras/tartas — se renderiza solo dentro de la aplicación DataStoria

Por FrankChen021 · FrankChen021/datastoria

Funciona con configuración ★ 5.6/10

Visualization — Emite JSON chart-spec de ClickHouse para líneas/barras/tartas — se renderiza solo dentro de la aplicación DataStoria

Qué hace

Convierte una consulta SQL de ClickHouse en un bloque JSON `chart-spec` que selecciona el tipo de gráfico (line, bar, pie, table) primero a partir de palabras clave explícitas del usuario y segundo a partir de la forma de la consulta, y establece el título, el ancho y la ubicación de la leyenda mediante reglas fijas. Se activa cuando el usuario solicita un chart, graph, plot, trend o timeseries de datos de ClickHouse. Es una habilidad dentro de la aplicación para la interfaz de usuario web de DataStoria: el paso obligatorio `validate_sql` y el renderizador `chart-spec` residen en esa aplicación, por lo que fuera de DataStoria el bloque emitido permanece como texto inerte.

Informe de la prueba

Clonado en un HOME temporal y copiado el directorio de la habilidad; el frontmatter se analizó a través de PyYAML con name+description presentes, y los tres recursos que el cuerpo nombra (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md) devolvieron HTTP 200 — sin curl|sh, sin base64, sin rutas /Users codificadas. Escribí dos artefactos para la misma solicitud (commits diarios de febrero de 2021, SQL ya suministrado, "as a line chart"): la línea base emitió un script ```python matplotlib más un marcador de posición ```mermaid xychart, mientras que la ejecución seguida por la habilidad emitió un único bloque JSON ```chart-spec con type/titleOption/width/legendOption.placement:"none"/datasource.sql. NO pude ejecutar el paso obligatorio del flujo de trabajo (b) `validate_sql` — grep lo encontró en src/lib/ai/tools/clickhouse/validate-sql.ts, una herramienta de la aplicación DataStoria que necesita un ClickHouse en vivo, y grep encontró `chart-spec` analizado solo por src/components/chat/message/message-markdown.tsx — por lo que fuera de esa aplicación la salida de la habilidad es una valla de código sin renderizar y la comparación no es una medida de capacidad real. Frases de activación juzgadas: "Show me a line chart of query duration over the last 24h from system.query_log" (carga, correcto), "Visualize the top 10 tables by disk usage as a bar chart" (carga, correcto), "Give me a pie chart of ClickHouse queries by user" (carga, correcto), "Explain why my ClickHouse merge is slow" (salta, correcto), "Plot my CSV sales data as a bar chart with matplotlib" (lo cargaría — la descripción dice solo "charts, graphs, plots" sin calificador de ClickHouse, por lo que da falsos positivos en gráficos genéricos) = 4/5.

Probado el: 2026-07-31 · Claude Code 2.x (agent harness)

Instalación

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.

Comandos y prompts de ejemplo

/visualizationEmite JSON chart-spec de ClickHouse para líneas/barras/tartas — se renderiza solo dentro de la aplicación DataStoria

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

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

Informe completo →