{"id":24918,"library":"arbor-dashboard","title":"Arbor Dashboard","description":"Arbor Dashboard v1.60.2 is a React component library for building responsive chart dashboards. It provides pre-built charting components with TypeScript definitions. The package requires React 18.2+ and is published by Arbor Education. Development setup involves a complex symlink workflow for local testing, with multiple manual steps. Key differentiators: opinionated chart components designed for education data visualization, but the tooling and documentation focus heavily on internal Arbor workflows rather than general-purpose usage. Release cadence is not documented; the README suggests it is used internally with a custom build process (webpack, grunt).","status":"active","version":"1.60.2","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/arbor-education/data.responsive_charting_dashboards","tags":["javascript","Dashboard","Reporting","Arbor","Charts","typescript"],"install":[{"cmd":"npm install arbor-dashboard","lang":"bash","label":"npm"},{"cmd":"yarn add arbor-dashboard","lang":"bash","label":"yarn"},{"cmd":"pnpm add arbor-dashboard","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency for rendering components","package":"react","optional":false},{"reason":"peer dependency for DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"ESM-only; no CommonJS export provided.","wrong":"const ArborDashboard = require('arbor-dashboard')","symbol":"default","correct":"import ArborDashboard from 'arbor-dashboard'"},{"note":"Named export; default export is the entire library object.","wrong":"import Chart from 'arbor-dashboard'","symbol":"Chart","correct":"import { Chart } from 'arbor-dashboard'"},{"note":"Named export; not a default export.","wrong":"import Dashboard from 'arbor-dashboard'","symbol":"Dashboard","correct":"import { Dashboard } from 'arbor-dashboard'"}],"quickstart":{"code":"import React from 'react';\nimport ArborDashboard, { Chart, Dashboard } from 'arbor-dashboard';\n\nconst App = () => (\n  <Dashboard>\n    <Chart type=\"bar\" data={[{ label: 'A', value: 10 }]} />\n  </Dashboard>\n);\n\nexport default App;","lang":"typescript","description":"Shows basic usage of Dashboard and Chart components with a bar chart."},"warnings":[{"fix":"Upgrade to React 18.2+ using `npm install react@18 react-dom@18`.","message":"React 18 is required. Older React versions (17 or below) will cause runtime errors.","severity":"breaking","affected_versions":"<18"},{"fix":"Use ESM imports (e.g., import { Chart } from 'arbor-dashboard') or configure your bundler to handle ESM.","message":"The package uses ESM only. Using CommonJS require() will fail with 'ERR_REQUIRE_ESM'.","severity":"breaking","affected_versions":">=1.0"},{"fix":"Ensure only one version of React is available. In linked projects, use `yarn link react` and `yarn link react-dom` from the consumer's node_modules.","message":"Symlink development setup is fragile. Duplicate React instances cause 'Invalid hook call' errors.","severity":"gotcha","affected_versions":">=1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Run `yarn add arbor-dashboard` or follow the symlink steps in the README.","cause":"Package not installed or not linked correctly in local development.","error":"Error: Cannot find module 'arbor-dashboard'"},{"fix":"Run `cd node_modules/react && yarn link && cd ../react-dom && yarn link && cd ..` in the consumer project, then `yarn link react react-dom` in arbor-dashboard.","cause":"Duplicate React instance due to incorrect symlinking.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"fix":"Use ESM import syntax or upgrade your Node.js/loader to support ESM.","cause":"Trying to require an ESM-only module.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module not supported."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}