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
- [Tilt](https://tilt.dev) (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:

```bash
tilt up --port 10351
```

Open [http://localhost:5173](http://localhost:5173).

#### Option 2 - Manual

Install dependencies first:

```bash
yarn
cd local/backend && yarn
cd local/Frontend && yarn
```

Then start the backend and frontend in separate terminals:

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

```bash
yarn storybook
```

To run the story tests:

```bash
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](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.