arbor-dashboard/README.md

A tool to create responsive dashboards with charts

# 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:

```bash
yarn
```

2. Install backend dependencies:
```bash
cd local/backend
yarn
```

3. Install frontend dependencies:
```bash
cd local/Frontend
yarn
```

### Running the Backend

1. Navigate to the backend directory:
```bash
cd local/backend
```

2. Start the backend server:
```bash
node app.js
```

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

### Running the Frontend
1. Navigate to the frontend directory:
```bash
cd local/Frontend
```

2. Start the Frontend
```bash
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](https://arbor-education.slite.com/app/docs/SgIhOMBxZQLGOc#5xRs7JNsgNP0HB)


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:
```bash
rm -rf node_modules
```

### 2. Install dependencies
In each repo, run:
```bash
yarn install
```

### 4. Symlink the arbor-dashboard package
In this project root, run:
```bash
yarn link
```

In fe-library/client, run:
```bash
yarn link arbor-dashboard
```

### 5. Symlink react from fe-library
This is to resolve conflicts in different versions. In fe-library/client, run:
```bash
cd node_modules/react && yarn link && cd ../react-dom && yarn link && cd ..
```

Then in arbor-dashboard, run:
```bash
yarn link react && yarn link react-dom
```

### 6. Build fe-library in watch mode
In fe-library/client run:
```bash
yarn run grunt
```
### 7. Build arbor-dashboard (this package) in watch mode
In this project root, run:
```bash
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.