Shellfish Farm Outplant Dashboard

A polished, lightweight, static web dashboard for visualizing mock shellfish farm outplant monitoring data across four years, four sites, and five priming treatments. Built with React + Vite + Recharts and designed to be hosted on GitHub Pages with no backend.

⚠️ All data in this dashboard are simulated for demonstration purposes only. They are generated deterministically in src/data/mockShellfishData.js and do not represent real observations.

Screenshot

Add a screenshot here once deployed, e.g.:

Features

• Filters — by site, treatment, metric, and year.
• Summary cards — mean growth, mean temperature, final survival, best-performing treatment, and highest-survival site (all responsive to the active filters).
• Time-series chart — growth (mm), temperature (°C), or survival (%) over monthly time points; lines split by treatment (single-site view) or by site.
• Treatment comparison — grouped bar chart of final survival or mean growth by treatment within each site.
• Site comparison — bar chart comparing average growth, final survival, or mean temperature across sites.
• Data table — sortable, searchable, paginated view of every underlying record.

Data description

The dataset is a flat array of monthly records spanning Year 1 → Year 4 (calendar years 2021–2024) for every combination of:

Dimension	Values
Sites	Baywater, Sequim Bay, Goose Point, Westcott
Treatments	Control, Heat primed, Freshwater primed, Immune primed, Combined stress primed
Time points	48 monthly observations per site × treatment (4 years × 12 months)

Each record has the columns: date, year, month, quarter, site, treatment, Growth_mm, Temperature_C, Survival_percent.

Simulated patterns (see the comments in the data file for details):

• Growth (shell height, mm) generally increases over time and slows with age.
• Survival (%) generally declines over time, faster during warm periods.
• Temperature (°C) follows a seasonal sine wave (summer peak).
• Site differences: Baywater (warmer, strong growth), Sequim Bay (moderate temperature, stable survival), Goose Point (variable temperature and survival), Westcott (cooler, moderate growth).
• Treatment differences: priming treatments improve survival to varying degrees, with immune- and combined-stress priming trading some growth for the largest survival gains, and heat priming protecting most during warm months.

Run locally

Requires Node.js 18+ and npm.

# 1. Install dependencies
npm install

# 2. Start the dev server (http://localhost:5173/shellfish-farm-dashboard/)
npm run dev

# 3. Build for production (outputs to ./dist)
npm run build

# 4. Preview the production build locally
npm run preview

Deploy to GitHub Pages

This repo is named mock-farm-dashboard, so the base path in vite.config.js is '/mock-farm-dashboard/'. (If you fork or rename the repo, update base to '/your-repo-name/'.)

Recommended: automatic deploy via GitHub Actions

A workflow at .github/workflows/deploy.yml builds the site and publishes it to GitHub Pages on every push to main.

1. In the GitHub repo, go to Settings → Pages and set Source to GitHub Actions.

2. Push to main (or trigger the workflow manually from the Actions tab).

3. The dashboard goes live at:

   https://robertslab.github.io/mock-farm-dashboard/
   

Alternative: manual deploy with the gh-pages package

You can also publish the built dist/ folder to a gh-pages branch:

npm run build
npm run deploy   # runs: gh-pages -d dist

Then set Settings → Pages → Source to the gh-pages branch (root). Use either the Actions workflow or this manual method, not both.

Project structure

shellfish-farm-dashboard/
  README.md
  package.json
  index.html
  vite.config.js
  src/
    main.jsx
    App.jsx
    styles.css
    utils.js
    data/
      mockShellfishData.js
    components/
      Header.jsx
      Filters.jsx
      SummaryCards.jsx
      TimeSeriesChart.jsx
      TreatmentComparisonChart.jsx
      SiteComparisonChart.jsx
      DataTable.jsx

Notes

• No backend, no authentication, and no external data fetching — the dashboard runs entirely from the local mock dataset.
• The data are simulated. Replace the generator in src/data/mockShellfishData.js with your own records (matching the column names) to visualize real data.