reusable-visualization

仓库创建 2021年3月19日最近提交 6 天前SkillHot 收录 6 天前

▸ 精选理由

将可视化解耦，便于在多查询间重用同一组件契约。

这个 Skill 做什么

构建可复用的图表组件，通过宿主传入数据与配置运行。

把通用图表做成一个能复用的可视化组件，组件不自己去跑查询，而是从宿主应用拿到 rows 和配置来渲染。适合同一个图表会在很多不同查询或仪表盘里重复使用（比如 Lightdash 的 viz 模板）。需要明确声明它要的字段和配置项、走 useVizContext() 合约，能统一管理系列颜色等外观细节。

▸ 展开 SKILL.md 英文原文

Build ONE reusable chart visualization component that receives its data and its settings from the host application instead of fetching them, and declares the fields and config options the host exposes to viewers. Use this whenever a single chart component is reused across many different queries rather than built for one — in Lightdash, the `data_app_viz` app template, also called a "viz". Covers the `useVizContext()` hook, the declaration contract, the config-option vocabulary, and series colours.

数据与抓取可复用图表契约式接口前端可视化通用

6.0k

Stars

750

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/lightdash/lightdash/main/sandboxes/data-apps/template/.claude/skills/reusable-visualization/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/lightdash/lightdash/main/sandboxes/data-apps/template/.claude/skills/reusable-visualization/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# Reusable visualization

This is ONE reusable chart component, not an app. It runs no query and owns no explore.
Lightdash runs the query, then hands the component the result rows plus a mapping from the
field names the component declared to the columns in those rows. The same component is
reused across many different queries — every contract below follows from that: it cannot
hardcode column names, so it declares a field mapping; it cannot hardcode display choices
for queries it has never seen, so it declares config options.

No dashboard, navigation, multiple panels, filters or page chrome. Recharts, echarts, D3 or
plain SVG all work.

Everything the viewer can reach later exists only bec

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有