PortalJS Add Chart

Añade un gráfico de recharts, delimitado a un dataset, en la página showcase de PortalJS.

Por datopian · datopian/portaljs

Probado · Funciona ★ 9.6/10

PortalJS Add Chart — Añade un gráfico de recharts, delimitado a un dataset, en la página showcase de PortalJS.

Qué hace

Instala recharts, escribe un componente Chart.tsx reutilizable y lo conecta a la sección Views del showcase de un dataset de PortalJS, delimitado al dataset elegido para que no afecte a otros showcases. Soporta gráficos de línea, barras, área, tarta y dispersión leyendo el mismo CSV/JSON que ya usa la tabla. Se activa al visualizar un dataset ya registrado en datasets.json dentro de un portal PortalJS.

Informe de la prueba

Ejecutamos un pase real de add-chart en un portal PortalJS de prueba: npm install recharts@^2.15.0 funcionó y tsc --noEmit pasó limpio; la skill delimitó correctamente el gráfico a un solo dataset, mientras que un baseline desde cero lo renderizaba en todas las páginas de dataset.

Probado el: 2026-07-10 · Claude Code 2.x (agent harness)

Instalación

git clone https://github.com/datopian/portaljs
cd portaljs
mkdir -p ~/.claude/skills
cp -r skills/portaljs-add-chart ~/.claude/skills/portaljs-add-chart

Comandos y prompts de ejemplo

  • /portaljs-add-chartAñade un gráfico de recharts, delimitado a un dataset, en la página showcase de PortalJS.

Los skills se activan con peticiones en lenguaje natural, sin comandos que memorizar. Tras instalarlo, prompts como estos lo activan (en inglés):

  • Add a bar chart to this PortalJS dataset showcase page
  • Wire a recharts line chart into my dataset's Views section
  • Show this registered CSV dataset as a scatter chart on the portal