data.responsive_charting_dashboards

An npm package of responsive charting components for data visualisation

Getting Started

Prerequisites

• Node.js
• Yarn package manager
• Tilt (for the recommended local setup)

Running locally

Option 1 - Tilt (recommended)

Tilt handles all dependency installation and starts the backend (port 3000) and frontend automatically. Pass a port for the Tilt UI:

tilt up --port 10351

Open http://localhost:5173.

Option 2 - Manual

Install dependencies first:

yarn
cd local/backend && yarn
cd local/Frontend && yarn

Then start the backend and frontend in separate terminals:

# Terminal 1 - backend (port 3000)
cd local/backend && node app.js

# Terminal 2 - frontend (port 5173)
cd local/Frontend && npm run dev

Storybook

The component library is documented and previewed in Storybook.

To start the development server on port 6006:

yarn storybook

To run the story tests:

yarn test:storybook

Developing with SIS

Note: this is only recommended for end to end developing - for general developing of charts in this library use the packaged dev server, usage guide here

To watch for changes in your local version of this project as a dependency in SIS (or another project) instead of the published npm version, do the following. Note it is extremely flaky and to be perfectly honest I've found if any of these steps goes wrong or happens in the wrong order you're best just to restart your laptop (or ideally buy a new one) and start it all again.

Prerequisites

You'll have to have fe-library running in develop mode (or whichever project is consuming this watching for changes. If you're using this in a different project, adapt the commands for fe-library to whichever package manager & transpiler you are using).

1. Clean up node modules (keeping lock files)

In both this project root and fe-library/client, run:

rm -rf node_modules

2. Install dependencies

In each repo, run:

yarn install

4. Symlink the arbor-dashboard package

In this project root, run:

yarn link

In fe-library/client, run:

yarn link arbor-dashboard

5. Symlink react from fe-library

This is to resolve conflicts in different versions. In fe-library/client, run:

cd node_modules/react && yarn link && cd ../react-dom && yarn link && cd ..

Then in arbor-dashboard, run:

yarn link react && yarn link react-dom

6. Build fe-library in watch mode

In fe-library/client run:

yarn run grunt

7. Build arbor-dashboard (this package) in watch mode

In this project root, run:

yarn webpack --watch

8. Reinstall or re-link after any yarn install

If you run yarn install in either repo, you may need to repeat the yarn link steps to restore symlinks.

9. Troubleshooting

• If you see missing files (e.g., RefreshUtils.js), delete node_modules and reinstall.
• If you see the React hooks/dispatcher error, check for duplicate Reacts.
• Only one version should appear, and only in the client’s node_modules.