visualize.html

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Studio GR – Risultati</title>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', system-ui, Arial, sans-serif;
      background: #eef0f4;
      color: #222;
      min-height: 100vh;
    }
    .page { max-width: 920px; margin: 0 auto; padding: 24px 16px; }

    .file-bar {
      display: flex; align-items: center; gap: 14px;
      padding: 12px 20px; background: white;
      border-radius: 8px; box-shadow: 0 1px 8px rgba(0,0,0,.07);
      margin-bottom: 16px; flex-wrap: wrap;
    }
    .file-bar span { font-size: 13px; color: #555; }
    .btn {
      padding: 7px 18px; background: #1a237e; color: white;
      border: none; border-radius: 5px; cursor: pointer;
      font-size: 13px; font-weight: 600; letter-spacing: .3px;
    }
    .btn:hover { background: #283593; }
    .msg-ok  { color: #2e7d32; font-size: 12px; }
    .msg-err { color: #c62828; font-size: 12px; }

    .card {
      background: white; border-radius: 10px;
      box-shadow: 0 2px 18px rgba(0,0,0,.09);
      padding: 32px; margin-bottom: 16px;
    }

    /* ── Header ── */
    .header {
      display: flex; justify-content: space-between; align-items: flex-start;
      padding-bottom: 18px; margin-bottom: 24px;
      border-bottom: 3px solid #1a237e;
    }
    .brand       { color: #1a237e; font-size: 26px; font-weight: 800; letter-spacing: 2px; }
    .brand-sub   { color: #777; font-size: 12px; margin-top: 3px; }
    .person-name { font-size: 22px; font-weight: 700; text-align: right; }
    .person-meta { color: #666; font-size: 13px; text-align: right; margin-top: 4px; }

    /* ── Chart wrap ── */
    .chart-wrap { display: flex; justify-content: center; }

    /* ── Legend ── */
    .legend {
      display: flex; justify-content: center; gap: 28px;
      flex-wrap: wrap; margin: 14px 0 22px;
    }
    .legend-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #444; }
    .legend-swatch { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }

    /* ── Score table ── */
    table { width: 100%; border-collapse: collapse; font-size: 13px; }
    th {
      background: #1a237e; color: white;
      padding: 9px 14px; text-align: left; font-weight: 600;
    }
    th:nth-child(3) { text-align: center; }
    td { padding: 8px 14px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
    tr:last-child td { border-bottom: none; }
    tr:hover td { background: #f6f8ff; }
    .badge {
      display: inline-flex; align-items: center; justify-content: center;
      width: 46px; height: 26px; border-radius: 4px;
      font-weight: 700; color: white; font-size: 13px;
    }

    /* ── LMP section ── */
    .lmp-title { font-size: 15px; font-weight: 700; color: #333; margin-bottom: 14px; }
    .lmp-bar   { display: flex; height: 36px; border-radius: 6px; overflow: hidden; margin-bottom: 18px; }
    .lmp-seg   {
      display: flex; align-items: center; justify-content: center;
      font-weight: 700; font-size: 13px; color: white;
    }
    .lmp-cards { display: flex; gap: 16px; }
    .lmp-card  {
      flex: 1; border-radius: 8px; padding: 16px 12px; text-align: center;
      border: 1px solid transparent;
    }
    .lmp-pct { font-size: 34px; font-weight: 800; }
    .lmp-lbl { font-size: 12px; color: #666; margin-top: 4px; }

    @media (max-width: 480px) {
      .lmp-cards { flex-direction: column; }
      .header    { flex-direction: column; gap: 12px; }
      .person-name, .person-meta { text-align: left; }
    }
  </style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useRef, useCallback } = React;

/* ── Default data (LO_result.json) ─────────────────────────── */
const DEFAULT = {
  nominativo: "Luigi Ottoboni",
  data: "22/02/2026",
  scores: {
    SCH: 152, STI: 174, MOT: 148, CDF: 129,
    EFF: 121, EFX: 148, QNR: 135, QLR: 105,
    SVI: 138, PAR: 102
  },
  leadership: 45,
  maturita: 35,
  potenziale_crescita: 20
};

/* ── Characteristics metadata ───────────────────────────────── */
const CHARS = ['SCH','STI','MOT','CDF','EFF','EFX','QNR','QLR','SVI','PAR'];
const NAMES = {
  SCH: 'Schematicità',
  STI: 'Stile di vita',
  MOT: 'Motivazione',
  CDF: 'Capacità di fronteggiare',
  EFF: 'Efficienza',
  EFX: 'Efficacia',
  QNR: 'Quantità responsabilità',
  QLR: 'Qualità responsabilità',
  SVI: 'Spazio vitale',
  PAR: 'Partecipazione'
};

/* ── Color logic (derived from 13 real test cases) ──────────── */
// Red  Out Point  : value < 80
// Blue Stress Zone: 80 ≤ value < SCH
// Green Strength  : value ≥ SCH
// Gray background : 0 → SCH (reference circle)
function segColor(value, sch) {
  if (value < 80)   return '#d32f2f';   // rosso
  if (value < sch)  return '#1565c0';   // blu
  return '#2e7d32';                     // verde
}
function segStatus(value, sch) {
  if (value < 80)   return 'Out Point';
  if (value < sch)  return 'Stress Zone';
  return 'Strength Point';
}

/* ── SVG polar chart helpers ────────────────────────────────── */
// viewBox 700×700, center (350,350), max score radius 190px
const CX = 350, CY = 350, MAX_R = 190, MAX_SCORE = 200;
const LABEL_R = 243; // radius for outer labels
const GAP_DEG = 1.5; // gap between adjacent slices

function scoreR(v) { return Math.max(0, (v / MAX_SCORE) * MAX_R); }

function pt(radius, angleDeg) {
  const rad = ((angleDeg - 90) * Math.PI) / 180;
  return [CX + radius * Math.cos(rad), CY + radius * Math.sin(rad)];
}

// SVG path for one slice (sector from center to arc)
function slicePath(score, centerDeg) {
  const r = scoreR(score);
  if (r < 1) return `M${CX},${CY}`;
  const a1 = centerDeg - 18 + GAP_DEG;
  const a2 = centerDeg + 18 - GAP_DEG;
  const [x1, y1] = pt(r, a1);
  const [x2, y2] = pt(r, a2);
  // sector always < 180°, large-arc-flag = 0
  return `M${CX},${CY} L${x1.toFixed(1)},${y1.toFixed(1)} A${r.toFixed(1)},${r.toFixed(1)},0,0,1,${x2.toFixed(1)},${y2.toFixed(1)} Z`;
}

/* ── PolarChart component ───────────────────────────────────── */
function PolarChart({ scores }) {
  const sch    = scores.SCH;
  const schR   = scoreR(sch);
  const redR   = scoreR(80);

  return (
    <svg viewBox="0 0 700 700" style={{ width: '100%', maxWidth: 680 }}>

      {/* Outer background circle */}
      <circle cx={CX} cy={CY} r={MAX_R} fill="#f5f5f5" stroke="#e0e0e0" strokeWidth="0.5"/>

      {/* Threshold at 80 – subtle dashed red ring */}
      <circle cx={CX} cy={CY} r={redR}
        fill="none" stroke="#d32f2f" strokeWidth="0.8"
        strokeDasharray="3,6" opacity="0.45"/>

      {/* SCH gray reference area (0 → SCH) */}
      <circle cx={CX} cy={CY} r={schR} fill="#c0c0c0" opacity="0.38"/>

      {/* Colored slices for all 10 characteristics */}
      {CHARS.map((c, i) => (
        <path
          key={c}
          d={slicePath(scores[c], i * 36)}
          fill={segColor(scores[c], sch)}
          opacity="0.9"
        />
      ))}

      {/* White divider lines between slices */}
      {CHARS.map((_, i) => {
        const [x, y] = pt(MAX_R, i * 36 - 18);
        return (
          <line key={i}
            x1={CX} y1={CY} x2={x.toFixed(1)} y2={y.toFixed(1)}
            stroke="white" strokeWidth="2"/>
        );
      })}

      {/* SCH reference circle — drawn as a circle (dark dashed) */}
      <circle cx={CX} cy={CY} r={schR}
        fill="none" stroke="#333" strokeWidth="1.8"
        strokeDasharray="7,4"/>

      {/* Outer border */}
      <circle cx={CX} cy={CY} r={MAX_R} fill="none" stroke="#aaa" strokeWidth="0.8"/>

      {/* Center dot */}
      <circle cx={CX} cy={CY} r={3} fill="#666"/>

      {/* Labels: code + score around the chart */}
      {CHARS.map((c, i) => {
        const deg   = i * 36;
        const [lx, ly] = pt(LABEL_R, deg);
        const score = scores[c];
        const col   = segColor(score, sch);

        // Horizontal anchor based on x-position relative to center
        const anchor = lx > CX + 15 ? 'start' : lx < CX - 15 ? 'end' : 'middle';

        // Push label further from center on upper/lower extremes
        let baseY = ly;
        if (ly < CY - 15) baseY = ly - 10;
        else if (ly > CY + 15) baseY = ly + 4;

        return (
          <g key={c}>
            <text x={lx} y={baseY}
              textAnchor={anchor} fontSize="12" fontWeight="700" fill="#333">
              {c}
            </text>
            <text x={lx} y={baseY + 17}
              textAnchor={anchor} fontSize="15" fontWeight="800" fill={col}>
              {score}
            </text>
          </g>
        );
      })}
    </svg>
  );
}

/* ── Score table ────────────────────────────────────────────── */
function ScoreTable({ scores }) {
  const sch = scores.SCH;
  return (
    <table>
      <thead>
        <tr>
          <th>Cod.</th>
          <th>Caratteristica</th>
          <th style={{ textAlign: 'center' }}>Punteggio</th>
          <th>Stato</th>
        </tr>
      </thead>
      <tbody>
        {CHARS.map(c => {
          const v   = scores[c];
          const col = segColor(v, sch);
          return (
            <tr key={c}>
              <td><strong>{c}</strong></td>
              <td>{NAMES[c]}</td>
              <td style={{ textAlign: 'center' }}>
                <span className="badge" style={{ background: col }}>{v}</span>
              </td>
              <td style={{ color: col, fontWeight: 600 }}>{segStatus(v, sch)}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

/* ── Leadership · Maturità · Potenziale section ─────────────── */
function LMPSection({ leadership, maturita, potenziale }) {
  const items = [
    { label: 'Leadership',           value: leadership,  color: '#1565c0' },
    { label: 'Maturità',             value: maturita,    color: '#6a1b9a' },
    { label: 'Potenziale di crescita', value: potenziale, color: '#2e7d32' },
  ];
  return (
    <div>
      <div className="lmp-title">Leadership · Maturità · Potenziale di crescita</div>
      {/* Stacked bar */}
      <div className="lmp-bar">
        {items.map(({ label, value, color }) => (
          <div key={label} className="lmp-seg"
            style={{ flexBasis: `${value}%`, background: color }}>
            {value >= 10 ? `${value}%` : ''}
          </div>
        ))}
      </div>
      {/* Cards */}
      <div className="lmp-cards">
        {items.map(({ label, value, color }) => (
          <div key={label} className="lmp-card"
            style={{ background: `${color}18`, borderColor: `${color}55` }}>
            <div className="lmp-pct" style={{ color }}>{value}%</div>
            <div className="lmp-lbl">{label}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ── App ────────────────────────────────────────────────────── */
function App() {
  const [data, setData] = useState(DEFAULT);
  const [msg, setMsg]   = useState(null);
  const inputRef        = useRef();

  const handleFile = useCallback(e => {
    const file = e.target.files[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = ev => {
      try {
        setData(JSON.parse(ev.target.result));
        setMsg({ ok: true, text: `✓ Caricato: ${file.name}` });
      } catch (err) {
        setMsg({ ok: false, text: `Errore JSON: ${err.message}` });
      }
    };
    reader.readAsText(file);
  }, []);

  const meta = [data.azienda, data.mansione, data.data,
                data.eta ? `${data.eta} anni` : null]
    .filter(Boolean).join(' · ');

  return (
    <div className="page">

      {/* File loader */}
      <div className="file-bar">
        <span>Carica un file di risultati JSON:</span>
        <button className="btn" onClick={() => inputRef.current.click()}>
          Carica JSON
        </button>
        <input ref={inputRef} type="file" accept=".json"
          style={{ display: 'none' }} onChange={handleFile}/>
        {msg && <span className={msg.ok ? 'msg-ok' : 'msg-err'}>{msg.text}</span>}
      </div>

      <div className="card">

        {/* Header */}
        <div className="header">
          <div>
            <div className="brand">STUDIO GR</div>
            <div className="brand-sub">Sistema di Analisi e Comunicazione</div>
          </div>
          <div>
            <div className="person-name">{data.nominativo}</div>
            {meta && <div className="person-meta">{meta}</div>}
          </div>
        </div>

        {/* Polar chart */}
        <div className="chart-wrap">
          <PolarChart scores={data.scores}/>
        </div>

        {/* Legend */}
        <div className="legend">
          {[
            { color: '#d32f2f', label: 'Out Point (< 80)' },
            { color: '#1565c0', label: 'Stress Zone (80 – SCH)' },
            { color: '#2e7d32', label: 'Strength Point (≥ SCH)' },
            { color: '#c0c0c0', label: 'Zona SCH – cerchio di riferimento' },
          ].map(({ color, label }) => (
            <div key={label} className="legend-item">
              <div className="legend-swatch" style={{ background: color }}/>
              {label}
            </div>
          ))}
        </div>

        {/* Score table */}
        <ScoreTable scores={data.scores}/>

        {/* Leadership / Maturità / Potenziale */}
        <div style={{ marginTop: 28 }}>
          <LMPSection
            leadership={data.leadership}
            maturita={data.maturita}
            potenziale={data.potenziale_crescita}
          />
        </div>

      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
</script>
</body>
</html>