Groundstroke Depth Zones

Preview in your theme

ready · raw landings + wing filter

Groundstroke depth zones

M. Okada · Club league · 6-4, 6-3 def. T. Whelan

52%

beyond the service box

98 of 190 · higher is better

39%

in the middle third

74 of 190 · lower is better

190 groundstrokes landed in · 75% of 253 hit the court (63 netted, long or wide)

0> 0≥ 9.25≥ 18.5≥ 27.75groundstrokesone landing

Depth is measured from the net: the service line at 6.40 m splits the service box from the 5.485 m of court behind it, and the halfway cut at 3.20 m separates short from mid-court. The thirds are cuts of the 8.23 m singles width, so the doubles alleys stay unshaded — a ball there is out in singles. Middle-third balls cross the lowest part of the net (0.914 m at the centre) and leave the opponent standing still, which is why that read wants to be small while the deep read wants to be large.

Groundstroke depth zones: M. Okada, Club league · 6-4, 6-3 def. T. Whelan. The opponent's half seen from behind the hitter, cut into three depth bands — short inside 3.2 metres, mid-court out to the 6.4 metre service line, deep beyond it — across the left, middle and right thirds of the 8.23 metre singles width. 190 groundstrokes landed in, across 9 of 9 zones. 52% landed beyond the service box, higher is better; 39% landed in the middle third, lower is better. 63 more groundstrokes never landed in, so 75% of 253 hit the court. Busiest zone — Deep, left third: 37 groundstrokes, 19% of the 190 that landed in.

All nine zones of the opponent's half, net to baseline, with the groundstrokes that landed in each and its share of the 190 that landed in.
Depth band	Third	groundstrokes	Share
Short — 0 to 3.20 m from the net	left third	3	2%
Short — 0 to 3.20 m from the net	middle third	10	5%
Short — 0 to 3.20 m from the net	right third	3	2%
Mid-court — 3.20 to 6.40 m from the net	left third	19	10%
Mid-court — 3.20 to 6.40 m from the net	middle third	33	17%
Mid-court — 3.20 to 6.40 m from the net	right third	24	13%
Deep — beyond the 6.40 m service line	left third	37	19%
Deep — beyond the 6.40 m service line	middle third	31	16%
Deep — beyond the 6.40 m service line	right third	30	16%

empty

Groundstroke depth zones

M. Okada · Club league · 6-4, 6-3 def. T. Whelan

No groundstrokes plotted yet

Nine zones — short, mid-court and deep across the left, middle and right thirds — fill in as rally balls are logged.

Groundstroke depth zones

M. Okada · Club league · 6-4, 6-3 def. T. Whelan

error

Groundstroke depth zones

M. Okada · Club league · 6-4, 6-3 def. T. Whelan

Couldn't load this depth map

The data source didn't respond.

ready · pre-binned zone rows

Groundstroke depth zones

J. Ferreira · Sunday practice sets · 2 hours

51%

beyond the service box

86 of 167 · higher is better

40%

in the middle third

67 of 167 · lower is better

167 groundstrokes landed in · 75% of 222 hit the court (55 netted, long or wide)

0> 0≥ 9≥ 18≥ 27groundstrokes

Groundstroke depth zones: J. Ferreira, Sunday practice sets · 2 hours. The opponent's half seen from behind the hitter, cut into three depth bands — short inside 3.2 metres, mid-court out to the 6.4 metre service line, deep beyond it — across the left, middle and right thirds of the 8.23 metre singles width. 167 groundstrokes landed in, across 9 of 9 zones. 51% landed beyond the service box, higher is better; 40% landed in the middle third, lower is better. 55 more groundstrokes never landed in, so 75% of 222 hit the court. Busiest zone — Deep, middle third: 36 groundstrokes, 21% of the 167 that landed in.

All nine zones of the opponent's half, net to baseline, with the groundstrokes that landed in each and its share of the 167 that landed in.
Depth band	Third	groundstrokes	Share
Short — 0 to 3.20 m from the net	left third	10	6%
Short — 0 to 3.20 m from the net	middle third	11	7%
Short — 0 to 3.20 m from the net	right third	10	6%
Mid-court — 3.20 to 6.40 m from the net	left third	17	10%
Mid-court — 3.20 to 6.40 m from the net	middle third	20	12%
Mid-court — 3.20 to 6.40 m from the net	right third	13	8%
Deep — beyond the 6.40 m service line	left third	31	19%
Deep — beyond the 6.40 m service line	middle third	36	21%
Deep — beyond the 6.40 m service line	right third	19	11%

Loading preview…

"use client"

import * as React from "react"

import { cn } from "@/lib/utils"
import {
  TENNIS_ALLEY_M,
  TENNIS_COURT_M,
  TENNIS_DEPTH_CUTS_M,
  TENNIS_LATERAL_CUTS_M,
  tennisDepthBand,
  tennisLateralBand,
  type ChartTennisDepthZonesData,
  type ChartTennisDepthZonesDepth,

Installation

npx shadcn@latest add https://ui.zyeon.ai/r/chart-tennis-depth-zones.json

Prompt

Build a React + TypeScript + Tailwind "ChartTennisDepthZones" card — a
groundstroke landing map over the opponent's half of a tennis court, drawn as
hand-rolled SVG (no chart library), with zod for the contract.

Contract
- One zod schema is the single source of truth:
  { status: "loading" | "empty" | "error" | "ready";
    shots?: { x, y, wing? }[];        // metres: x from the left singles
                                      // sideline, y from the net
    zones?: { depth: "short"|"mid"|"deep";
              lateral: "left"|"middle"|"right";
              count: int >= 0; wing? }[];
    meta: { player; context?; shotLabel?; missed? } }
- Props = z.infer of that schema plus title?, steps?, defaultWing?,
  showWingFilter?, showLandings?, onRetry?, emptyState?, className. No
  hand-written parallel interface. forwardRef + spread the rest onto the root.
- Raw `shots` win over pre-aggregated `zones` when both arrive: the finer form
  is the only one that can also place a dot. Repeated (depth, lateral, wing)
  rows are summed.

Geometry — derive it, never guess pixels
- ITF singles court: 23.77 m long, so one half (net → baseline) is 11.885 m;
  8.23 m wide for singles and 10.97 m for doubles, so each doubles alley is
  (10.97 − 8.23) / 2 = 1.37 m and is out in singles; the service line sits
  6.40 m from the net; net posts stand 0.914 m outside the doubles sidelines.
- Depth bands: short 0 → 3.20 m (the net half of the service box, 6.40 / 2),
  mid-court 3.20 → 6.40 m, deep 6.40 → 11.885 m. They are deliberately unequal
  because the court is — the deep band is the 5.485 m that is actually left
  behind the service line.
- Lateral bands: thirds of the 8.23 m singles width (2.7433 m each), cut over
  the singles court only; the alleys stay unshaded.
- Cuts are upper-inclusive: a ball touching the service line is still inside
  the service box, so exactly 6.40 m reads "mid", never "deep".
- The viewBox is in metres. Every line, band and dot is placed by the same
  metric frame, so the drawing cannot drift from the maths.

Behavior
- Four first-class branches inside one bg-card panel: loading (skeleton that
  keeps the two stat tiles + the court silhouette), empty (faint court + copy),
  error (message + a Try again button only when onRetry exists), ready.
- Ready: a 3 x 3 zone grid shaded by the share of landings, each zone labelled
  with its count and its percentage of the landings that came in. Apportion the
  nine percentages together by largest remainder — floor, then hand the leftover
  points to the largest fractions — so they add to exactly 100 in every filter
  state; rounding each zone on its own prints 101% and reads as a data error.
- Two headline reads above the court, both derived from the same nine counts:
  % beyond the service box = the deep row summed (higher is better);
  % in the middle third = the middle column summed (lower is better). Print
  the numerator and denominator beside each so the base rate is never hidden.
- Wing filter (All / Forehand / Backhand) as a roving-tabindex radiogroup that
  re-derives both headline reads, every zone count and the dots. Render it only
  when both wings carry at least one landing, and fall back to All when the
  requested wing has none — a filter must never strand the reader in a card
  they cannot leave. Landings with no wing are counted under All and reported.
- Raw landings are drawn as dots at their own metres, never at the zone centre,
  and the zone each one is counted in is derived from those same metres.
- Landings outside the singles half court are dropped, counted and reported
  under the chart: clamping a ball that sailed long onto the baseline would
  inflate the very read the card is built on. meta.missed (netted / long /
  wide) is header-only — it has no landing to draw.
- Hover or arrow-key a zone for its exact split; the readout line under the
  court echoes the active zone. Every listener is React-bound; nothing to
  clean up on unmount.

Rendering & styling
- Semantic tokens only: court lines stroke-border, net stroke-muted-foreground,
  zone shading fill var(--chart-1) at stepped opacity (2-6 steps, default 4,
  cut linearly on (0, max]), landing dots var(--chart-2), labels fill-foreground
  / fill-muted-foreground with a var(--card) halo (paintOrder="stroke") so they
  survive the busiest shade. Zero hex / rgb / oklch.
- A zone nothing landed in stays unshaded — a measured 0 is its own mark, not
  the palest shade of "landed there". When every occupied zone holds the same
  count the ladder collapses to a single mid-ramp step.
- Analyst cuts (the lateral thirds, the 3.20 m halfway line) are dashed; real
  court lines are solid — the reader can tell paint from arithmetic.
- svg role="grid" with role="row" / role="gridcell", aria-activedescendant on
  the keyboard cursor, focus-visible outline, plus an sr-only summary and a
  nine-row table. cn() merges className; motion-reduce disables the skeleton
  pulse and the button transitions.

Customization levers
- Depth bands: the two cuts are constants (6.40 m and its half). Split the deep
  band again for a four-band "deep / very deep" read, or move the shallow cut,
  and the zone grid, headline sums and sr-only table follow.
- Lateral bands: thirds of the singles width. Switch to the doubles width (and
  shade the alleys) for a doubles feed by moving the two cut constants.
- Density: drop the per-zone percentage line for a compact card, or drop the
  landing dots (showLandings={false}) when a feed is huge.
- Ramp: steps 2-6 and the OPACITY_MIN / OPACITY_MAX pair; swap var(--chart-1)
  for any chart token, or map each depth band to its own token if depth matters
  more than volume.
- Reads: the two headline tiles are a small array — add a third (share in the
  deep corners, share past 9 m) by summing different slots of the same counts.
- Filter axis: the radiogroup is wing-shaped; the same shape carries spin
  (flat / topspin / slice) or set number when the payload labels shots that way.

Concepts

Court geometry as the coordinate system — the viewBox is metres, not pixels: 11.885 m of half court, a 6.40 m service line, 8.23 m of singles width. Every band edge is arithmetic on those numbers, so the picture and the percentages can never disagree.
Placed by the value that counts it — a landing is drawn at its measured metres and binned from those same metres, so a dot can never sit on the deep side of the service line while being counted as mid-court.
Two reads pointing opposite ways — deep share (higher is better) is the deep row summed; middle-third share (lower is better) is the middle column summed. Both come out of the nine numbers printed on the court, so the headline is auditable by eye.
Filter as re-derivation, not as hiding — switching to Forehand re-runs the whole aggregation: counts, shading, dots and both headline reads. Wings the feed never labelled stay visible under All and are declared, rather than silently vanishing from the denominator.
Out is not deep — a ball past the baseline has no zone, so it is dropped, counted and reported; balls that never landed at all live in meta.missed and only ever appear in the header.
Measured zero vs no data — an unshaded zone means nothing landed there, which is a finding; the empty state is the same court drawn faint, so the card keeps its silhouette while it waits.

Groundstroke Depth Zones

Groundstroke depth zones

Groundstroke depth zones

Groundstroke depth zones

Groundstroke depth zones

Groundstroke depth zones

Installation

Prompt

Concepts

On This Page

Groundstroke depth zones

Groundstroke depth zones

Groundstroke depth zones

Groundstroke depth zones

Groundstroke depth zones