📄 API Documentation v1

const API_BASE = "https://cloud.quko.es/api/v1";
const PUBLIC_KEY = "YOUR_PUBLIC_KEY";
const SECRET_KEY = "YOUR_SECRET_KEY";

async function fetchResults(page = 1) {
  const res = await fetch(`${API_BASE}/results?page=${page}&per_page=10`, {
    headers: { "Authorization": `Bearer ${PUBLIC_KEY}.${SECRET_KEY}` }
  });
  return res.json();
}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom"></script>

<div style="position:relative;height:50vh;width:100%;margin-top:20px;background-color:white;">
  <canvas id="strokesPlot"></canvas>
</div>

<div id="tabs" style="margin-top:20px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;">
  <button style="background:transparent;color:#FF33FF;border:2px solid #FF33FF;border-radius:5px;padding:5px 10px;" onclick="plotData('filtered_speed')">Velocity</button>
  <button style="background:transparent;color:#33AA00;border:2px solid #33AA00;border-radius:5px;padding:5px 10px;" onclick="plotData('rate')">Stroke Rate</button>
  <button style="background:transparent;color:#FF6633;border:2px solid #FF6633;border-radius:5px;padding:5px 10px;" onclick="plotData('stroke_distance')">Stroke Distance</button>
  <button style="background:transparent;color:#00B3E6;border:2px solid #00B3E6;border-radius:5px;padding:5px 10px;" onclick="plotData('max_accel_x')">Max. Accel.</button>
  <button style="background:transparent;color:#999966;border:2px solid #999966;border-radius:5px;padding:5px 10px;" onclick="plotData('min_accel_x')">Min. Accel.</button>
  <button style="background:transparent;color:#E6B333;border:2px solid #E6B333;border-radius:5px;padding:5px 10px;" onclick="plotData('max_pitch')">Pitch</button>
  <button style="background:transparent;color:#3366E6;border:2px solid #3366E6;border-radius:5px;padding:5px 10px;" onclick="plotData('max_roll')">Roll</button>
</div>

<script>
  const jsonFileUrls = ["/static/json/example1.json"];
  let loadedFiles = [], chartInstance = null;
  const colors = ['#FF6633', '#00B3E6', '#E6B333', '#3366E6', '#999966'];
  const magnitudeLabels = {
    filtered_speed: 'Velocity [m/s]', rate: 'Stroke Rate [spm]',
    stroke_distance: 'Stroke Distance [m]', max_accel_x: 'Max. Accel. [m/s²]',
    min_accel_x: 'Min. Accel. [m/s²]', max_pitch: 'Pitch [º]', max_roll: 'Roll [º]'
  };

  window.onload = async function() {
    loadedFiles = [];
    for (let i = 0; i < jsonFileUrls.length; i++) {
      try {
        const r = await fetch(jsonFileUrls[i]);
        const json = await r.json();
        const displayName = json.data.competition || jsonFileUrls[i].split('/').pop();
        loadedFiles.push({ name: displayName, strokes: json.data.data_strokes.strokes, vesselType: json.data.vessel?.type || 'K', color: colors[i % colors.length] });
      } catch (e) { console.error('Error loading JSON file:', jsonFileUrls[i], e); }
    }
    if (loadedFiles.length > 0) plotData('filtered_speed');
  };

  const mandatoryAssetImg = new Image();
  mandatoryAssetImg.src = "https://dev.quko.es/static/images/logo-large-nobg.png";

  const customPlugin = {
    id: 'dataplugin',
    beforeDraw: (chart) => {
      if (mandatoryAssetImg.complete) {
        const { ctx, chartArea } = chart;
        if (!chartArea) return;
        const imgWidth = 125, imgHeight = 47, margin = 15;
        ctx.save();
        ctx.globalAlpha = 0.85;
        ctx.drawImage(mandatoryAssetImg, chartArea.right - imgWidth - margin, chartArea.bottom - imgHeight - margin, imgWidth, imgHeight);
        ctx.restore();
      } else { mandatoryAssetImg.onload = () => chart.draw(); }
    }
  };

  function plotData(magnitude) {
    if (loadedFiles.length === 0) return alert("No data loaded yet.");
    const ctx = document.getElementById('strokesPlot');
    if (Chart.getChart('strokesPlot')) Chart.getChart('strokesPlot').destroy();
    const datasets = [];
    loadedFiles.forEach(file => {
      const base = { borderColor: file.color, backgroundColor: file.color, showLine: true, pointRadius: 0, pointHitRadius: 10 };
      if (magnitude === 'stroke_distance') {
        if (file.vesselType === 'C') {
          datasets.push({ ...base, label: `${file.name} - Stroke Distance`,
            data: file.strokes.filter(s => s.stroke_distance != null).map(s => ({ x: s.distance, y: s.stroke_distance })) });
        } else {
          datasets.push({ ...base, label: `${file.name} - Left Stroke`,
            data: file.strokes.filter(s => s.left_stroke_distance != null).map(s => ({ x: s.distance, y: s.left_stroke_distance })) });
          datasets.push({ ...base, label: `${file.name} - Right Stroke`, borderDash: [5, 5],
            data: file.strokes.filter(s => s.right_stroke_distance != null).map(s => ({ x: s.distance, y: s.right_stroke_distance })) });
        }
      } else {
        datasets.push({ ...base, label: `${file.name} - ${magnitudeLabels[magnitude] || magnitude.replace(/_/g, ' ')}`,
          data: file.strokes.filter(s => s[magnitude] != null).map(s => ({ x: s.distance, y: s[magnitude] })) });
      }
    });
    chartInstance = new Chart(ctx, {
      type: 'line',
      data: { datasets },
      plugins: [customPlugin],
      options: {
        normalized: true, responsive: true, maintainAspectRatio: false, parsing: false,
        hover: { mode: 'nearest', intersect: true },
        plugins: {
          tooltip: { mode: 'nearest', callbacks: { label: (t) => t.dataset.label + ': ' + t.parsed.y.toFixed(2) + ' @ ' + t.parsed.x.toFixed(2) } },
          legend: { labels: { pointStyle: 'rectRounded', usePointStyle: true, padding: 15 } },
          zoom: { pan: { enabled: true, mode: 'x' }, zoom: { wheel: { enabled: true, speed: 0.05 }, pinch: { enabled: true }, mode: 'x' }, limits: { x: { min: 'original', max: 'original' } } }
        },
        scales: {
          x: { type: 'linear', title: { display: true, text: 'Distance' } },
          y: { title: { display: true, text: magnitudeLabels[magnitude] || magnitude.replace(/_/g, ' ') } }
        }
      }
    });
  }
</script>