formatDate = d3.utcFormat("%b %d, %Y")

us = await d3.json("assets/us-census-counties.topojson")
counties = topojson.feature(us, us.objects.counties)
states = topojson.mesh(us, us.objects.states, (a, b) => a !== b)

data = FileAttachment("assets/fsa-normal-grazing-period-simple.csv").csv({typed: true})

romaO = FileAttachment("assets/colors.json").json()
color = d3.scaleSequential()
  .domain([1, 366])
  .interpolator(t => romaO[Math.floor(t * (romaO.length - 1))])

filtered = data.filter(d => d.year === year && d.type === type)

countiesFiltered = {
  const rowById = Object.fromEntries(
    filtered.map(d => [String(d.id).padStart(5, "0"), d])
  );

  return {
    type: "FeatureCollection",
    features: counties.features.map(f => {
      const row = rowById[String(f.id)];
      return {
        ...f,
        properties: {
          id: f.id,
          ...f.properties,
          ...(row ?? {}),
          value: row ? row[variable] : null
        }
      };
    })
  };
}

// Reactive card dimensions — uses #map (created by Quarto from label: map) to find the card body
cardSize = Generators.observe(notify => {
  let ro;
  const check = setInterval(() => {
    const cardBody = document.querySelector('#map')?.closest('.card-body');
    if (cardBody) {
      clearInterval(check);
      ro = new ResizeObserver(([entry]) => {
        const { width, height } = entry.contentRect;
        if (width > 0 && height > 0) notify({ width, height });
      });
      ro.observe(cardBody);
    }
  }, 50);
  return () => {
    clearInterval(check);
    if (ro) ro.disconnect();
  };
})