{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tile-map",
  "type": "registry:component",
  "title": "Tile map",
  "description": "Countries as equal tiles, shaded by value. Sample data: parcels delivered in 16 European countries, Germany 12.4K, Netherlands 10.1K.",
  "registryDependencies": [
    "@chartory/core",
    "@chartory/plot-tile-map"
  ],
  "files": [
    {
      "path": "registry/chartory/components/tile-map.tsx",
      "type": "registry:component",
      "target": "components/chartory/tile-map.tsx",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// Tile map (Chartory chart 029): sizes xs | s | m | l, laid out again from the data at each\n// size; collection \"hearth\" (default) or \"signal\" (with @chartory/signal, Code and Complete). Data in the type's shape (default: the sample). Docs:\n// https://usechartory.com/docs/charts/tile-map\nimport { ChartView, type ChartViewProps } from \"@/lib/chartory/charts/chart-view\"\nimport { registerChart } from \"@/lib/chartory/charts/defs\"\nimport { data as sample } from \"@/lib/chartory/charts/types/029-tile-map/data\"\nimport { def } from \"@/lib/chartory/charts/types/029-tile-map/layout\"\n\nregisterChart(def, sample)\n\nexport type TileMapData = typeof sample\nexport type TileMapProps = Omit<ChartViewProps, \"def\" | \"data\" | \"states\"> & {\n  /** the data to draw (default: the sample) */\n  data?: TileMapData\n  /** further data states: the chart morphs to them (update) or ticks through them (live, with interval) */\n  states?: TileMapData[]\n}\n\nexport function TileMap(props: TileMapProps) {\n  return <ChartView def={def} {...props} />\n}\n"
    },
    {
      "path": "registry/chartory/charts/types/029-tile-map/data.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/029-tile-map/data.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 029 Tile map · sample data (Figma chart/029, logistics: parcels delivered by country in October; tile = [code,\n// column, row, ramp step 0–6]).\nimport type { TileMapData } from \"../../plots/tile-map\";\n\nexport const data: TileMapData = {\n  tiles: [\n    [\"IS\", 0, 0, 1], [\"NO\", 3, 0, 2], [\"SE\", 4, 0, 2], [\"FI\", 5, 0, 1], [\"IE\", 0, 1, 2], [\"UK\", 1, 1, 4], [\"DK\", 3, 1, 3], [\"PL\", 5, 1, 3],\n    [\"NL\", 2, 2, 6], [\"DE\", 3, 2, 6], [\"CZ\", 4, 2, 2], [\"BE\", 2, 3, 5], [\"FR\", 1, 3, 4], [\"AT\", 4, 3, 3], [\"ES\", 0, 4, 3], [\"IT\", 3, 4, 3],\n  ],\n  rows: [\n    { label: \"Germany\", tok: \"data/seq-6\", text: \"12.4K\" },\n    { label: \"Netherlands\", tok: \"data/seq-6\", text: \"10.1K\" },\n    { label: \"Belgium\", tok: \"data/seq-5\", text: \"6.8K\" },\n    { label: \"France\", tok: \"data/seq-4\", text: \"5.2K\" },\n  ],\n};\n"
    },
    {
      "path": "registry/chartory/charts/types/029-tile-map/layout.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/029-tile-map/layout.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 029 Tile map (Figma chart/029): C.tileMap; no legend (the side list names the top countries). Radius-bound: XS\n// legend=off keeps the legend-on plot height (flatXs).\nimport type { ChartDef, TooltipSpec } from \"../../core/shell\";\nimport { tileMap } from \"../../plots/tile-map\";\nimport { data } from \"./data\";\n\nconst COUNTRY: Record<string, string> = {\n  IS: \"Iceland\", NO: \"Norway\", SE: \"Sweden\", FI: \"Finland\", IE: \"Ireland\", UK: \"United Kingdom\", DK: \"Denmark\", PL: \"Poland\",\n  NL: \"Netherlands\", DE: \"Germany\", CZ: \"Czechia\", BE: \"Belgium\", FR: \"France\", AT: \"Austria\", ES: \"Spain\", IT: \"Italy\",\n};\n\n/** Tooltip for one tile (group = the tile's index): the country, its parcels when the side list names it (else its\n *  volume step), the step's shade. */\nfunction tipOf(o: typeof data, g: number): TooltipSpec | null {\n  const t = o.tiles[g];\n  if (!t) return null;\n  const [code, , , v] = t, name = COUNTRY[code] ?? code, swatch = v === 0 ? \"data/idle\" : \"data/seq-\" + v;\n  const ri = o.rows.findIndex((r) => r.label === name), row = o.rows[ri];\n  if (row?.text) return { kind: \"cell\", caps: `${name} · ${code}`.toUpperCase(), value: row.text, unit: \"parcels\", swatch, share: `#${ri + 1} BY VOLUME · STEP ${v} OF 6` };\n  return { kind: \"cell\", caps: `${name} · ${code}`.toUpperCase(), value: \"Step \" + v, unit: \"of 6\", swatch, share: `OUTSIDE THE TOP ${o.rows.length}` };\n}\n\nexport const def: ChartDef = {\n  no: 29,\n  slug: \"tile-map\",\n  legend: null,\n  flatXs: true,\n  // update: the next month; the listed leaders move 5–12 % (order kept, one decimal in K) and the smaller countries\n  // step one shade up or down (1–3); the leaders' tiles keep the shade their list swatch shows\n  update: (d, step) => {\n    const o = d as typeof data;\n    const lead = new Set([\"DE\", \"NL\", \"BE\", \"FR\"]);\n    const rows = o.rows.map((r, i) => ({ ...r, text: (parseFloat(r.text!) * (1 + (0.05 + 0.07 * ((i + step) % 3) / 2) * (step % 2 ? 1 : -1))).toFixed(1) + \"K\" }));\n    return {\n      ...o,\n      rows,\n      tiles: o.tiles.map((t, i) => (lead.has(t[0]) || t[3] > 3 ? t : [t[0], t[1], t[2], Math.max(1, Math.min(3, t[3] + Math.round(Math.sin(step * 2.1 + i * 1.7))))] as typeof t)),\n    };\n  },\n  plot: (K, p, w, d) => tileMap(K, p, w, (d as typeof data | undefined) ?? data),\n  tip: (d, g) => tipOf(d as typeof data, g),\n  describe: {\n    title: \"Deliveries by country\",\n    summary: `Parcels delivered in October across ${data.tiles.length} countries, shaded by volume: ${data.rows.map((r) => `${r.label} ${r.text}`).join(\", \")} lead.`,\n    table: {\n      head: [\"Country\", \"Volume step (0–6)\"],\n      rows: [...data.tiles].sort((a, b) => b[3] - a[3]).map((t) => [t[0], t[3]]),\n    },\n  },\n};\n"
    }
  ],
  "categories": [
    "charts",
    "space-and-place"
  ],
  "meta": {
    "access": "free",
    "no": 29,
    "family": "Space and place"
  }
}