data.responsive_charting_dashboards

An npm package of responsive charting components for data visualisation

Getting Started

Prerequisites

• Node.js
• Yarn package manager

Installation

1. Clone the repository and install dependencies:

yarn

2. Install backend dependencies:

cd local/backend
yarn

3. Install frontend dependencies:

cd local/Frontend
yarn

Running the Backend

1. Navigate to the backend directory:

cd local/backend

2. Start the backend server:

node app.js

4. Verify the backend is running by visiting: http://localhost:3000/

Running the Frontend

1. Navigate to the frontend directory:

cd local/Frontend

2. Start the Frontend

npm run dev

3. The frontend will be available at: http://localhost:5173/

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.