本文へ移動
cccskills
無料GitHub で公開

portaljs-add-chart

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.

datopian/portaljs
インストール方法を見る

含まれるファイル（2）

  • SKILL.md4.1 KB
  • references/reference.md2.2 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

PortalJS — Add Chart

Overview

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.

Prerequisites

  • A scaffolded PortalJS portal (see portaljs-new-portal).
  • The target dataset already registered in datasets.json (see portaljs-add-dataset).
  • components/ui/parseCsv.ts present (ships with the template).
  • Node 18+ and npm available in the portal directory.

Instructions

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:

  1. Gather input — dataset slug, X column, Y column(s), chart type (default line), portal directory. If any is missing, interview the user; never dead-end on a missing value.
  2. Resolve the dataset from datasets.json (namespace, file, format).
  3. Validate that the X and every Y column exist in the data file's header; warn on non-numeric Y columns (values are coerced with Number()).
  4. Install the chart library: npm install recharts@^2.15.0.
  5. Write components/Chart.tsx (idempotent — do not overwrite a customized component).
  6. Render <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.
  7. Verify with npx tsc --noEmit.
  8. Report the component, route, and dependency added.

Output

  • Created: components/Chart.tsx (recharts wrapper, if absent).
  • Modified: pages/[owner]/[slug].tsx (import + gated <Chart /> in Views); package.json (recharts@^2.15.0).
  • Verified: npx tsc --noEmit passes.
  • Result: the chart renders at /@<namespace>/<slug> under a "Views" heading.

Error Handling

SymptomCauseFix
Missing dataset/columnsSlug or column not in manifest/headerList available slugs/headers and re-prompt; do not error out.
Gaps in the chartNon-numeric cells coerced to NaNClean the source data or pick a numeric Y column.
tsc failureBad column prop or import pathFix the first reported error before reporting success.
Sluggish renderOver ~2,000 SVG pointsPre-aggregate the series (e.g. yearly buckets).

Examples

Example 1 — Single line series

/portaljs-add-chart co2-emissions x=year y=emissions type=line

Example 2 — Multi-series bar chart

/portaljs-add-chart trade x=year y=imports,exports type=bar

Example 3 — Pie chart of a categorical breakdown

/portaljs-add-chart budget x=department y=amount type=pie

Resources

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

arcgis-to-portaljs

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3622026年10月8日 更新

portaljs-add-dataset

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3622026年10月8日 更新

portaljs-add-dcat

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3622026年10月8日 更新

portaljs-add-geo

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3622026年10月8日 更新

portaljs-add-map

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3622026年10月8日 更新

portaljs-add-resource

無料

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.

日本語の概要は準備中です。原文の説明を表示しています。

datopian/portaljs2,3622026年10月8日 更新

datopian のスキルをすべて見る

このスキルの問題を報告する