Visualization

Emituje ClickHouse chart-spec JSON dla wykresów liniowych/słupkowych/kołowych — renderuje się tylko w aplikacji DataStoria

Autor: FrankChen021 · FrankChen021/datastoria

Działa po konfiguracji ★ 5.6/10

Visualization — Emituje ClickHouse chart-spec JSON dla wykresów liniowych/słupkowych/kołowych — renderuje się tylko w aplikacji DataStoria

Co robi ten skill

Przekształca zapytanie SQL ClickHouse w blok JSON `chart-spec`, który wybiera typ wykresu (line, bar, pie, table) najpierw na podstawie jawnych słów kluczowych użytkownika, a następnie kształtu zapytania, oraz ustawia tytuł, szerokość i położenie legendy według stałych reguł. Uruchamia się, gdy użytkownik prosi o wykres, graf, plot, trend lub szereg czasowy danych ClickHouse. Jest to umiejętność wbudowana w interfejs użytkownika DataStoria: obowiązkowy krok `validate_sql` i renderer `chart-spec` znajdują się w tej aplikacji, więc poza DataStoria wyemitowany blok pozostaje nieaktywnym tekstem.

Raport z testu

Sklonowano do tymczasowego HOME i skopiowano katalog umiejętności; frontmatter sparsowany za pomocą PyYAML z obecnymi name+description, a trzy zasoby nazwane w treści (sql-expert/SKILL.md, clickhouse-system-queries/SKILL.md, references/system-query-log.md) zwróciły HTTP 200 — brak curl|sh, brak base64, brak zakodowanych na stałe ścieżek /Users. Napisałem dwa artefakty dla tego samego żądania (dzienne commity z lutego 2021, SQL już dostarczony, "as a line chart"): linia bazowa wyemitowała skrypt ```python matplotlib plus placeholder ```mermaid xychart, podczas gdy uruchomienie zgodne z umiejętnością wyemitowało pojedynczy blok JSON ```chart-spec z type/titleOption/width/legendOption.placement:"none"/datasource.sql. NIE MOGŁEM wykonać obowiązkowego kroku (b) `validate_sql` przepływu pracy — grep umieścił go w src/lib/ai/tools/clickhouse/validate-sql.ts, narzędziu aplikacji DataStoria wymagającym działającego ClickHouse, a grep znalazł `chart-spec` parsowany tylko przez src/components/chat/message/message-markdown.tsx — więc poza tą aplikacją wyjście umiejętności jest nierenderowanym blokiem kodu, a porównanie nie jest rzeczywistym pomiarem możliwości. Ocenione frazy wyzwalające: "Show me a line chart of query duration over the last 24h from system.query_log" (załadować, poprawnie), "Visualize the top 10 tables by disk usage as a bar chart" (załadować, poprawnie), "Give me a pie chart of ClickHouse queries by user" (załadować, poprawnie), "Explain why my ClickHouse merge is slow" (pominąć, poprawnie), "Plot my CSV sales data as a bar chart with matplotlib" (załadowałbym — opis mówi tylko "charts, graphs, plots" bez kwalifikatora ClickHouse, więc daje fałszywe pozytywy dla ogólnego tworzenia wykresów) = 4/5.

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

Instalacja

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.

Komendy i przykładowe prompty

/visualizationEmituje ClickHouse chart-spec JSON dla wykresów liniowych/słupkowych/kołowych — renderuje się tylko w aplikacji DataStoria

Skille uruchamiają się na zwykłe polecenia — bez komend do zapamiętania. Po instalacji aktywują go prompty takie jak te (po angielsku):

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

Pełny raport →