Skip to content
cccskills
FreePublished on 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.

The English summary is being prepared. Showing the original description.

datopian/portaljs
See how to install

Files included (2)

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

SKILL.md (original)

Review the instructions the agent will receive before you install.

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).
  • UI strings: any text it adds to JSX renders through t() (lib/i18n.ts), with the keys added to locales/en.json and every other locales/*.json; npm run i18n:check passes.
  • 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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

arcgis-to-portaljs

Free

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.

The English summary is being prepared. Showing the original description.

datopian/portaljs2.4KUpdated Oct 21, 2026

portaljs-add-dataset

Free

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.

The English summary is being prepared. Showing the original description.

datopian/portaljs2.4KUpdated Oct 21, 2026

portaljs-add-dcat

Free

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.

The English summary is being prepared. Showing the original description.

datopian/portaljs2.4KUpdated Oct 21, 2026

portaljs-add-geo

Free

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.

The English summary is being prepared. Showing the original description.

datopian/portaljs2.4KUpdated Oct 21, 2026

portaljs-add-map

Free

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.

The English summary is being prepared. Showing the original description.

datopian/portaljs2.4KUpdated Oct 21, 2026

portaljs-add-resource

Free

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.

The English summary is being prepared. Showing the original description.

datopian/portaljs2.4KUpdated Oct 21, 2026

See all skills by datopian

Report a problem with this skill