ElasticCommerce Analytics Dashboard

A production-style React 18 + Tailwind CSS v4 + D3.js dashboard that communicates directly with a local Elasticsearch instance — no backend, no Express, no Node.js server.

Tech Stack

Tool	Version	Role
React	18	UI
Tailwind CSS	v4 (Vite plugin, zero-config)	Styling
D3.js	v7	All charts
Axios	1.x	HTTP to ES
Vite	5	Build + dev proxy
Elasticsearch	8.x (Docker)	Data store

Quick Start

# 1. Start Elasticsearch
docker run -d --name elasticsearch -p 9200:9200 \
  -e "discovery.type=single-node" \
  -e "xpack.security.enabled=false" \
  elasticsearch:8.13.0

# 2. Generate + load data
node generate_data.js
curl -H "Content-Type: application/x-ndjson" \
  -XPOST "http://localhost:9200/_bulk" \
  --data-binary @bulk_data.ndjson

# 3. Install + run
npm install
npm run dev

See DATA_LOADING_GUIDE.md for full instructions.

Architecture: React → Vite Proxy → Elasticsearch

Browser (React)
    │  axios.post('/es/ecommerce_orders/_search', body)
    ▼
Vite Dev Server
    │  proxy: /es → http://localhost:9200
    ▼
Elasticsearch :9200
    │  returns JSON with hits + aggregations
    ▼
React renders D3 charts

ES Query Types Covered

• match_all, match, multi_match (with fuzziness)
• term, terms, range, exists
• bool — must, filter, should, must_not
• date_histogram, terms agg, range agg
• sum, avg, min, max, cardinality, value_count
• Nested aggregations (sub-aggs inside date_histogram)
• _msearch — batch multiple queries in one request
• highlight, sort, pagination (from/size)

Project Structure

es-dashboard/
├── index.html
├── vite.config.js          ← Tailwind v4 plugin + ES proxy
├── package.json
├── generate_data.js        ← generates bulk_data.ndjson
├── DATA_LOADING_GUIDE.md   ← step-by-step ES setup
└── src/
    ├── main.jsx
    ├── App.jsx              ← dashboard layout + navigation
    ├── index.css            ← @import "tailwindcss" (Tailwind v4!)
    ├── services/
    │   └── elasticsearch.js ← ALL ES queries (15 query types)
    ├── hooks/
    │   └── useElasticsearch.js ← parallel data fetching hook
    ├── utils/
    │   └── format.js
    └── components/
        ├── KPICard.jsx
        ├── Card.jsx
        ├── Skeleton.jsx
        ├── Legend.jsx
        ├── OrderSearch.jsx  ← full-text search UI
        └── charts/
            ├── LineAreaChart.jsx    ← D3 area + line
            ├── DonutChart.jsx       ← D3 donut
            ├── HorizontalBarChart.jsx ← D3 bar
            ├── ScatterPlot.jsx      ← D3 bubble chart
            └── GroupedBarChart.jsx  ← D3 dual-axis