{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dot-strip",
  "type": "registry:component",
  "title": "Dot strip",
  "description": "The full range per item, on one scale. Sample data: payout times for six rails, instant card 0.1 to 0.4 days, cheque 4.0 to 7.5 days.",
  "registryDependencies": [
    "@chartory/core",
    "@chartory/plot-strips"
  ],
  "files": [
    {
      "path": "registry/chartory/components/dot-strip.tsx",
      "type": "registry:component",
      "target": "components/chartory/dot-strip.tsx",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// Dot strip (Chartory chart 033): 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/dot-strip\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/033-dot-strip/data\"\nimport { def } from \"@/lib/chartory/charts/types/033-dot-strip/layout\"\n\nregisterChart(def, sample)\n\nexport type DotStripData = typeof sample\nexport type DotStripProps = Omit<ChartViewProps, \"def\" | \"data\" | \"states\"> & {\n  /** the data to draw (default: the sample) */\n  data?: DotStripData\n  /** further data states: the chart morphs to them (update) or ticks through them (live, with interval) */\n  states?: DotStripData[]\n}\n\nexport function DotStrip(props: DotStripProps) {\n  return <ChartView def={def} {...props} />\n}\n"
    },
    {
      "path": "registry/chartory/charts/types/033-dot-strip/data.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/033-dot-strip/data.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 033 Dot strip · sample data (Figma chart/033, fintech: payout time in days per rail over the last 30 days; seeded\n// sample, expanded from the Figma definition: per rail the fastest and slowest payout, then 7 more, each with a size).\nimport type { StripsData } from \"../../plots/strips\";\n\nexport const data: StripsData = {\n  min: 0,\n  max: 8,\n  ticks: [[0, \"0\"], [2, \"2 D\"], [4, \"4 D\"], [6, \"6 D\"], [8, \"8 D\"]],\n  fmt: (v) => v.toFixed(1),\n  rows: [\n    { label: \"Instant card\", pts: [[0.1, 8], [0.4, 12], [0.17609393814396765, 8], [0.12460785187995428, 14], [0.287145200272624, 12], [0.34616433468003033, 16], [0.13366088817532218, 14], [0.16888528180722395, 8], [0.23093075013297182, 8]] },\n    { label: \"SEPA\", pts: [[0.8, 12], [1.6, 14], [1.2371702285656567, 12], [1.169470785357743, 8], [0.8921539899390909, 8], [1.254388166058058, 8], [1.549903281009711, 12], [0.8291350834207307, 8], [1.543906676370607, 12]] },\n    { label: \"ACH\", pts: [[1.2, 10], [2.6, 12], [2.154652116333438, 12], [2.0696649049733136, 10], [2.578898107064375, 14], [1.9386379228619104, 10], [1.581260929806745, 8], [2.081131847613087, 16], [1.8563367644587236, 10]] },\n    { label: \"Wire\", pts: [[0.5, 16], [1.4, 14], [1.3206077040269073, 10], [1.226319011359624, 14], [1.2872436474018, 10], [1.1234917187706994, 10], [0.6091912995135371, 8], [1.2187199741689114, 14], [0.9646368621683852, 16]] },\n    { label: \"Cross-border\", pts: [[2.2, 8], [4.8, 14], [3.8706012389020072, 8], [3.5385528786753087, 14], [2.30347455521276, 16], [3.148888536146324, 16], [4.721178478990299, 12], [4.626225955703401, 14], [4.7675811637042, 12]] },\n    { label: \"Cheque\", pts: [[4, 8], [7.5, 16], [6.084643393561544, 12], [5.672502029301833, 10], [4.680040415693093, 12], [5.2529700332102225, 14], [6.120595905287469, 8], [5.874458155070645, 8], [5.593661023813142, 14]] },\n  ],\n};\n"
    },
    {
      "path": "registry/chartory/charts/types/033-dot-strip/layout.ts",
      "type": "registry:lib",
      "target": "lib/chartory/charts/types/033-dot-strip/layout.ts",
      "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 033 Dot strip (Figma chart/033): C.strips; no legend (rails are labelled).\nimport type { ChartDef, TooltipSpec } from \"../../core/shell\";\nimport { strips } from \"../../plots/strips\";\nimport { data } from \"./data\";\n\nconst range = (r: (typeof data.rows)[number]) => { const v = r.pts.map((q) => q[0]); return [Math.min(...v), Math.max(...v)] as const; };\nconst first = data.rows[0], last = data.rows[data.rows.length - 1];\n\n/** Tooltip for one rail (group = the rail's range and payouts): slowest, median and fastest payout. */\nfunction tipOf(o: typeof data, g: number): TooltipSpec | null {\n  const r = o.rows[g];\n  if (!r) return null;\n  const v = r.pts.map((q) => q[0]).sort((a, b) => a - b), m = v.length >> 1;\n  const med = v.length % 2 ? v[m] : (v[m - 1] + v[m]) / 2, days = (x: number) => o.fmt(x) + \" days\";\n  return {\n    kind: \"range\", caps: `${r.label.toUpperCase()} · ${v.length} PAYOUTS`,\n    rows: [{ label: \"Slowest\", value: days(v[v.length - 1]), swatch: \"data/primary\" }, { label: \"Median\", value: days(med), swatch: \"data/primary\" }, { label: \"Fastest\", value: days(v[0]), swatch: \"data/primary\" }],\n  };\n}\n\nexport const def: ChartDef = {\n  no: 33,\n  slug: \"dot-strip\",\n  legend: null,\n  // update: the next 30 days; each rail speeds up or slows down by 5–15 % as a whole, each payout a little more on\n  // top, inside the axis (0–8 days); dot sizes stay, the low / high labels follow the new range\n  update: (d, step) => {\n    const o = d as typeof data;\n    return {\n      ...o,\n      rows: o.rows.map((r, ri) => {\n        const k = 1 + 0.1 * Math.sin(step * 1.8 + ri * 1.1) + 0.05 * Math.sign(Math.sin(step * 1.8 + ri * 1.1));\n        return { ...r, pts: r.pts.map(([v, s], i) => [Math.max(o.min + 0.05, Math.min(o.max - 0.3, v * k * (1 + 0.06 * Math.sin(step * 2.9 + i * 1.7)))), s] as [number, number]) };\n      }),\n    };\n  },\n  plot: (K, p, w, d) => strips(K, p, w, (d as typeof data | undefined) ?? data),\n  tip: (d, g) => tipOf(d as typeof data, g),\n  describe: {\n    title: \"Payout time by rail\",\n    summary: `Payout time in days for ${data.rows.length} rails over the last 30 days: ${first.label} pays out in ${data.fmt(range(first)[0])} to ${data.fmt(range(first)[1])} days, ${last.label} in ${data.fmt(range(last)[0])} to ${data.fmt(range(last)[1])} days.`,\n    table: { head: [\"Rail\", \"Fastest (days)\", \"Slowest (days)\", \"Sample payouts\"], rows: data.rows.map((r) => [r.label, data.fmt(range(r)[0]), data.fmt(range(r)[1]), r.pts.length]) },\n  },\n};\n"
    }
  ],
  "categories": [
    "charts",
    "distribution"
  ],
  "meta": {
    "access": "free",
    "no": 33,
    "family": "Distribution"
  }
}