菜单
Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal. Installs recharts, writes a reusable Chart component, and renders it in the showcase Views section. Use when visualizing a dataset already registered in datasets.json.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Migrate a whole ArcGIS Hub site into a PortalJS Arc portal end-to-end. Harvests the Hub /data.json (DCAT-US) inventory, exports every FeatureService layer through the ArcGIS REST query API with resultOffset paging, converts each to the serverless dual tier (PMTiles render + GeoParquet query) with tabular items to Parquet, pushes everything to Cloudflare R2 via Git LFS, appends dual-tier datasets.json entries, and writes a source-vs-derived parity report. Use to move a City or sector ArcGIS Hub open-data portal onto PortalJS with no server-side compute.
Auto-ingest a geospatial file (GeoJSON, Shapefile, GeoPackage, KML/KMZ, FlatGeobuf, CSV-with-geometry) into a PortalJS portal on the user's own machine, with no server. Normalizes CRS to EPSG:4326, derives a PMTiles render tier and a GeoParquet query tier, pushes all three artifacts to Cloudflare R2 via Git LFS, and appends one dual-tier datasets.json entry the showcase auto-renders. Use when the source is a vector geo format that needs a map or spatial-query view.
Add a dataset (CSV, TSV, JSON, or GeoJSON) to an existing PortalJS portal. Appends an entry to datasets.json so the catalog and showcase render it automatically; routes the data by source (local file vs remote URL) — R2 via Git LFS by default, remote URLs by passthrough. Use when registering a new dataset in a scaffolded portal.
Make a PortalJS portal harvestable by national/EU/US open-data portals — emit standards-compliant DCAT catalog feeds (DCAT 2/3, DCAT-AP, DCAT-US, national profiles) in JSON-LD, Turtle, and RDF/XML at build, with autodiscovery and per-profile conformance checking. Use when a portal needs to be harvested by data.europa.eu, data.gov, or a national open-data catalog.
Render a GeoJSON dataset on an interactive Leaflet map in the Views section of a dataset's showcase. Installs react-leaflet and a Map component, then renders the map for the chosen dataset. Use when a dataset's data is geographic and a map view is needed alongside the showcase's default metadata and download.
Add another file (resource) to an EXISTING dataset in a PortalJS portal — a data dictionary, methodology, or an additional data file. Turns a single-file dataset into a multi-resource one; the showcase renders a section per resource. Use when a dataset needs a second file, such as a data dictionary, methodology doc, or an additional period's data.
| name | portaljs-add-chart |
| description | Add a chart (line, bar, area, pie, or scatter) to a dataset's showcase in a PortalJS portal. Installs recharts, writes a reusable Chart component, and renders it in the showcase Views section. Use when visualizing a dataset already registered in datasets.json. |
| allowed-tools | Read, Write, Edit, Bash(npm:*), Bash(npx:*) |
| version | 1.0.0 |
| author | Datopian <hello@datopian.com> |
| license | MIT |
| compatibility | Claude Code with PortalJS portals (Next.js 14, React 18, Node 18+). Runs from any project via the plugin, a personal ~/.claude/commands install, or a portaljs clone. |
| tags | ["portaljs","data-portal","chart","recharts","dataviz","nextjs"] |
Add a visualization to a dataset's showcase in a PortalJS portal. The skill installs
recharts (added directly — never @portaljs/components), writes a reusable client-side
Chart component into components/, and renders a <Chart /> into the Views section
of the showcase route pages/[owner]/[slug].tsx for one chosen dataset. The chart reads the
same /public/data/<file> the showcase <Table /> already uses, so no data is duplicated.
Five chart types are supported: line, bar, area, pie, and scatter.
portaljs-new-portal).datasets.json (see portaljs-add-dataset).components/ui/parseCsv.ts present (ships with the template).The canonical, full step-by-step workflow is
.claude/commands/portaljs-add-chart.md —
the single source of truth. Read and follow it when executing. Summary:
line), portal
directory. If any is missing, interview the user; never dead-end on a missing value.datasets.json (namespace, file, format).Number()).npm install recharts@^2.15.0.components/Chart.tsx (idempotent — do not overwrite a customized component).<Chart /> into the Views section, gated on the dataset's (namespace, slug) so
other showcases are unaffected. Extend an existing view-dispatch block, do not overwrite.npx tsc --noEmit.components/Chart.tsx (recharts wrapper, if absent).pages/[owner]/[slug].tsx (import + gated <Chart /> in Views);
package.json (recharts@^2.15.0).npx tsc --noEmit passes./@<namespace>/<slug> under a "Views" heading.| Symptom | Cause | Fix |
|---|---|---|
| Missing dataset/columns | Slug or column not in manifest/header | List available slugs/headers and re-prompt; do not error out. |
| Gaps in the chart | Non-numeric cells coerced to NaN | Clean the source data or pick a numeric Y column. |
tsc failure | Bad column prop or import path | Fix the first reported error before reporting success. |
| Sluggish render | Over ~2,000 SVG points | Pre-aggregate the series (e.g. yearly buckets). |
/portaljs-add-chart co2-emissions x=year y=emissions type=line
/portaljs-add-chart trade x=year y=imports,exports type=bar
/portaljs-add-chart budget x=department y=amount type=pie
.claude/commands/portaljs-add-chart.mdreferences/reference.mdportaljs-add-dataset, portaljs-add-map, portaljs-define-schema