{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "overlapping-areas", "type": "registry:component", "title": "Overlapping areas", "description": "A few volumes, seen through each other. Sample data: daily spot volume on three venues, Sep 10 to Oct 9.", "registryDependencies": [ "@chartory/core", "@chartory/plot-multi-line" ], "files": [ { "path": "registry/chartory/components/overlapping-areas.tsx", "type": "registry:component", "target": "components/chartory/overlapping-areas.tsx", "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// Overlapping areas (Chartory chart 013): 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/overlapping-areas\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/013-overlapping-areas/data\"\nimport { def } from \"@/lib/chartory/charts/types/013-overlapping-areas/layout\"\n\nregisterChart(def, sample)\n\nexport type OverlappingAreasData = typeof sample\nexport type OverlappingAreasProps = Omit & {\n /** the data to draw (default: the sample) */\n data?: OverlappingAreasData\n /** further data states: the chart morphs to them (update) or ticks through them (live, with interval) */\n states?: OverlappingAreasData[]\n}\n\nexport function OverlappingAreas(props: OverlappingAreasProps) {\n return \n}\n" }, { "path": "registry/chartory/charts/types/013-overlapping-areas/data.ts", "type": "registry:lib", "target": "lib/chartory/charts/types/013-overlapping-areas/data.ts", "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 013 · sample data (Figma chart/013-overlapping-areas, crypto: daily spot volume per venue in $M, Sep 10 → Oct 9; the seeded walk the Figma builder generated).\nimport type { MultiLineData } from \"../../plots/multi-line\";\n\nexport const data: MultiLineData = {\n area: 0.22,\n sw: 1.5,\n min: 0,\n max: 600,\n ticks: [\"600M\", \"400M\", \"200M\", \"0\"],\n xl: { 0: \"SEP 10\", 10: \"SEP 20\", 20: \"SEP 30\", 29: \"OCT 9\" },\n series: [\n { name: \"northgate\", tok: \"data/cat-2\", vals: [383.6, 403.93, 391.64, 396.65, 365.02, 396.26, 372.21, 400.1, 432.36, 469.64, 484.54, 440.97, 434.45, 406.33, 386.69, 350.04, 346.64, 320.9, 339.2, 380.3, 392.9, 374.72, 406.67, 394.59, 389.83, 433.51, 456.14, 433.01, 416.98, 455.32] },\n { name: \"tidepool\", tok: \"data/cat-3\", vals: [273.34, 250.11, 264.17, 248.22, 256.91, 266.17, 294.59, 321.93, 352.79, 333.23, 356.03, 325.75, 308.68, 309.76, 291.13, 324.57, 335.71, 325.56, 343.51, 371.78, 339.19, 360.45, 368.86, 380, 380, 380, 380, 363.88, 357.29, 326.46] },\n { name: \"ardent\", tok: \"data/cat-1\", vals: [118.28, 137.03, 127.7, 138.21, 133.09, 148.4, 142.92, 127.09, 113.6, 90.53, 85.28, 97.57, 94.09, 77.12, 67.07, 66.93, 87.14, 60, 79.65, 108.07, 89.33, 105.79, 113.56, 103.05, 96.12, 122.29, 95.39, 112.46, 93.1, 107.99] },\n ],\n};\n" }, { "path": "registry/chartory/charts/types/013-overlapping-areas/layout.ts", "type": "registry:lib", "target": "lib/chartory/charts/types/013-overlapping-areas/layout.ts", "content": "// SPDX-License-Identifier: MIT · Copyright (c) 2026 BEY AGENCY LTD · Chartory, usechartory.com\n// 013 Overlapping areas (Figma chart/013-overlapping-areas): C.multiLine with translucent areas on volume per venue.\nimport type { ChartDef, TooltipSpec } from \"../../core/shell\";\nimport { multiLine } from \"../../plots/multi-line\";\nimport { data } from \"./data\";\n\n/** Deterministic wave in [-1, 1] per index and update step (no randomness: the same step gives the same period). */\nconst wave = (i: number, step: number, f = 1.7) => Math.sin(step * 2.3 + i * f + 0.5);\nconst clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));\nconst r2 = (v: number) => Math.round(v * 100) / 100;\n\nconst names = [\"Northgate\", \"Tidepool\", \"Ardent DEX\"];\nconst day = (i: number) => (i < 21 ? `Sep ${10 + i}` : `Oct ${i - 20}`);\nconst m = (v: number) => Math.round(v);\n\n/** Hover tooltip: one venue's area over the 30 days (latest day, peak, low). */\nconst tip = (d: unknown, g: number): TooltipSpec => {\n const s = (d as typeof data).series[g], last = s.vals.length - 1;\n return {\n kind: \"range\",\n caps: names[g].toUpperCase() + \" · DAILY VOLUME\",\n rows: [\n { label: day(last), value: \"$\" + m(s.vals[last]) + \"M\", swatch: s.tok },\n { label: \"Peak\", value: \"$\" + m(Math.max(...s.vals)) + \"M\", swatch: s.tok },\n { label: \"Low\", value: \"$\" + m(Math.min(...s.vals)) + \"M\", swatch: s.tok },\n ],\n };\n};\n\nexport const def: ChartDef = {\n no: 13,\n slug: \"overlapping-areas\",\n legend: [[\"data/cat-2\", \"Northgate\"], [\"data/cat-3\", \"Tidepool\"], [\"data/cat-1\", \"Ardent DEX\"]],\n plot: (K, p, w, d) => multiLine(K, p, w, (d as typeof data | undefined) ?? data),\n tip,\n update: (d, step) => {\n const o = d as typeof data;\n // later windows: each venue drifts ±10 % on a slow swell plus ±4 % per day, inside the $600M axis\n return { ...o, series: o.series.map((s, j) => ({ ...s, vals: s.vals.map((v, i) => clamp(r2(v * (1 + 0.1 * Math.sin(i * 0.35 + step * 1.9 + j * 1.9) + 0.04 * wave(i + j * 7, step))), 10, 590)) })) };\n },\n describe: {\n title: \"Volume by venue\",\n summary: `Daily spot volume per venue in $M, Sep 10 to Oct 9; on Oct 9: ${names.map((n, j) => `${n} $${m(data.series[j].vals[29])}M`).join(\", \")}.`,\n table: { head: [\"Day\", ...names.map((n) => n + \" ($M)\")], rows: data.series[0].vals.map((_, i) => [day(i), ...data.series.map((s) => m(s.vals[i]))]) },\n },\n};\n" } ], "categories": [ "charts", "change-over-time" ], "meta": { "access": "free", "no": 13, "family": "Change over time" } }