React.js vs Old Tools: What Changed for Data Scientists

// A data dashboard in React — the core pattern.
// Everything else is a variation of this.

import { useState, useEffect } from "react";

const API = "http://localhost:8000/api/metrics";

export default function Dashboard() {
  const [metrics, setMetrics] = useState([]);
  const [region, setRegion] = useState("all");
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");

  useEffect(() => {
    async function load() {
      try {
        setLoading(true);
        const url = region === "all"
          ? API
          : `${API}?region=${region}`;
        const res = await fetch(url);
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        setMetrics(await res.json());
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }
    load();
  }, [region]);

  if (loading) return <p>Loading metrics…</p>;
  if (error) return <p className="error">{error}</p>;

  return (
    <div className="dashboard">
      <h1>Metrics Dashboard</h1>

      <RegionFilter value={region} onChange={setRegion} />

      <div className="metric-grid">
        {metrics.map((m) => (
          <MetricCard key={m.id} metric={m} />
        ))}
      </div>
    </div>
  );
}

function MetricCard({ metric }) {
  return (
    <div className="metric-card">
      <div className="label">{metric.label}</div>
      <div className="value">{metric.value}</div>
      <div className="delta">
        {metric.delta_pct >= 0 ? "▲" : "▼"} {Math.abs(metric.delta_pct)}%
      </div>
    </div>
  );
}

// What this shows:
// - State: metrics (data), region (filter), loading, error
// - Effect: refetches whenever region changes
// - Rendering: loading / error / data states
// - Composition: MetricCard is a reusable component
//
// What a data scientist already knows:
// - The data shape (metrics, region, delta)
// - What the filter means
// - What should appear when there's an error
//
// What React adds:
// - A structure for rendering that data interactively
// - A way to keep the UI in sync with state
// - A deployable artefact that anyone can use

// A filter component — the interactive piece data scientists miss
// most from notebooks.

export default function RegionFilter({ value, onChange }) {
  const regions = ["all", "north", "south", "east", "west"];

  return (
    <div className="filter">
      <label htmlFor="region">Region</label>
      <select
        id="region"
        value={value}
        onChange={(e) => onChange(e.target.value)}
      >
        {regions.map((r) => (
          <option key={r} value={r}>
            {r === "all" ? "All regions" : r.charAt(0).toUpperCase() + r.slice(1)}
          </option>
        ))}
      </select>
    </div>
  );
}

// What this shows:
// - A controlled component (value + onChange)
// - The parent owns the state, the child signals changes
// - This is the pattern behind every interactive filter
//
// Why this matters for a DS:
// - It's the "slice the data by X" step from pandas,
//   but the user does it — not you
// - Every notebook filter becomes a dropdown
// - Every hard-coded segment becomes a selector
//
// In a notebook:
//   df[df["region"] == "north"]
//
// In React:
//   The user picks "north" — the app refetches — the UI updates
//
// Same analytical thinking. Different delivery.

// A chart with Recharts — the visualization layer.
// Recharts is the most beginner-friendly chart library
// for data scientists coming from matplotlib.

import {
  LineChart, Line, XAxis, YAxis, Tooltip,
  CartesianGrid, ResponsiveContainer,
} from "recharts";

export default function RevenueChart({ data }) {
  return (
    <ResponsiveContainer width="100%" height={300}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="month" />
        <YAxis />
        <Tooltip />
        <Line
          type="monotone"
          dataKey="revenue"
          stroke="#0B6E75"
          strokeWidth={2}
          dot={{ r: 3 }}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

// Compare to matplotlib:
//
//   plt.plot(df["month"], df["revenue"])
//   plt.xlabel("Month")
//   plt.ylabel("Revenue")
//   plt.show()
//
// Same intent. Different output:
// - matplotlib: a PNG you paste into a deck
// - Recharts: a live chart that updates when the data changes
//
// The chart library is not the point. The point is that
// data scientists already know HOW to visualize. React just
// gives them a delivery surface that connects to real users.
//
// What you learn in an afternoon:
// - A data prop (the array)
// - A chart type (Line, Bar, Area)
// - A data key (which field to plot)
//
// That's it. Everything else is tweaking.