SmallMultiples

                    import { CellLabel, SmallMultiples, ShotMap } from "@withqwerty/campos-react";

export function ShotComparison({ teams }) {
  return (
    <SmallMultiples
      items={teams}
      getItemKey={(team) => team.id}
      pitchOrientation="horizontal"
      pitchCrop="full"
      columns={{ minCellWidth: 220 }}
      renderLabel={(team) => (
        <CellLabel title={team.name} eyebrow={team.phase} caption={team.summary} />
      )}
      renderCell={(team, _index, view) => (
        <ShotMap
          shots={team.shots}
          orientation={view.pitchOrientation}
          crop={view.pitchCrop}
          showHeaderStats={false}
          showLegend={false}
          showSizeScale={false}
        />
      )}
    />
  );
}
                  

                    import {
  CellLabel,
  SmallMultiples,
  ShotMap,
  computeSharedPitchScale,
} from "@withqwerty/campos-react";

export function ShotComparison({ teams }) {
  const sharedScale = computeSharedPitchScale(teams, {
    size: (team) => team.shots.map((shot) => shot.xg ?? 0),
  });

  return (
    <SmallMultiples
      items={teams}
      getItemKey={(team) => team.id}
      pitchOrientation="horizontal"
      pitchCrop="full"
      columns={{ minCellWidth: 180 }}
      sharedScale={sharedScale}
      renderLabel={(team) => (
        <CellLabel title={team.name} eyebrow={team.phase} caption={team.summary} />
      )}
      renderCell={(team, _index, view) => (
        <ShotMap
          shots={team.shots}
          orientation={view.pitchOrientation}
          crop={view.pitchCrop}
          sharedScale={view.sharedScale}
          showHeaderStats={false}
          showLegend={false}
          showSizeScale={false}
        />
      )}
    />
  );
}
                  

                    import {
  CellLabel,
  PassMap,
  SmallMultiples,
  computeSharedPitchScale,
} from "@withqwerty/campos-react";

function scalePassWidth(
  value: number,
  domain: readonly [number, number] | undefined,
) {
  if (domain == null || domain[0] === domain[1]) return 0.7;
  const ratio = Math.max(0, Math.min(1, (value - domain[0]) / (domain[1] - domain[0])));
  return 0.35 + ratio * 0.7;
}

export function SharedPassGrid({ teams }) {
  const sharedScale = computeSharedPitchScale(teams, {
    width: (team) => team.passes.map((pass) => pass.length ?? 0),
  });

  return (
    <SmallMultiples
      items={teams}
      getItemKey={(team) => team.id}
      pitchCrop="full"
      sharedScale={sharedScale}
      renderLabel={(team) => (
        <CellLabel title={team.name} caption={team.summary} />
      )}
      renderCell={(team, _index, view) => (
        <PassMap
          passes={team.passes}
          crop={view.pitchCrop}
          sharedScale={view.sharedScale}
          showHeaderStats={false}
          showLegend={false}
          lines={{
            strokeWidth: ({ pass, sharedScale }) =>
              scalePassWidth(pass.length ?? 0, sharedScale?.widthDomain),
          }}
        />
      )}
    />
  );
}
                  

                    import { Heatmap, SmallMultiples } from "@withqwerty/campos-react";

function attackingDirectionFromView(view) {
  return view.pitchOrientation === "vertical" ? "up" : "right";
}

export function ZoneComparison({ teams }) {
  return (
    <SmallMultiples
      items={teams}
      getItemKey={(team) => team.id}
      pitchOrientation="horizontal"
      pitchCrop="full"
      renderCell={(team, _index, view) => {
        const attackingDirection = attackingDirectionFromView(view);

        return (
          <Heatmap
            events={team.passOrigins}
            zonePreset="5x3"
            crop={view.pitchCrop}
            attackingDirection={attackingDirection}
            showScaleBar={false}
          />
        );
      }}
    />
  );
}

// The same mapping pattern works for Territory and PassFlow too.
                  

                    import { SmallMultiples } from "@withqwerty/campos-react";
import { Pitch } from "@withqwerty/campos-stadia";

export function GoalKickLocations({ teams }) {
  return (
    <section>
      <header>
        <h2>Team Goal Kick Locations</h2>
        <p>Ending inside & outside the box</p>
      </header>
      <SmallMultiples
        items={teams}
        columns={5}
        gap={12}
        pitchOrientation="horizontal"
        pitchCrop="full"
        getItemKey={(team) => team.id}
        renderLabel={(team) => (
          <div>
            <strong>{team.name}</strong>
            <span>{team.summary}</span>
          </div>
        )}
        renderCell={(team) => (
          <Pitch crop="full" attackingDirection="right" interactive={false}>
            {({ project }) => (
              <g>
                {team.points.map((point, index) => {
                  const p = project(point.x, point.y);
                  return (
                    <circle
                      key={index}
                      cx={p.x}
                      cy={p.y}
                      r={1.1}
                      fill={point.zone === "inside" ? "#8b5cf6" : "#fb7185"}
                      opacity={0.64}
                    />
                  );
                })}
              </g>
            )}
          </Pitch>
        )}
      />
    </section>
  );
}