[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_23":24,"_25":26,"_27":21,"_28":21,"_29":21,"_30":21,"_31":21,"_32":21,"_33":34},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":-7,"_12":13,"_14":15,"_16":17,"_18":19,"_20":21,"_22":21},"sharedTextdocId","68cec7b84cd8819181ff3af26c0e570c","versionInt","title","Interactive Asymmetry — Canvas","type","code/react","content","import React, { useMemo, useRef, useState } from \"react\";\n\n// Helper: clamp\nconst clamp = (v, min = 0, max = 1) => Math.min(max, Math.max(min, v));\n\n// Cycle shape function (0..1 -> 0..1)\n// Smooth single peak: y = sin(pi*x)\nfunction cycleY(x) {\n return Math.sin(Math.PI * clamp(x));\n}\n\n// Color helpers\nfunction lerp(a, b, t) {\n return a + (b - a) * t;\n}\nconst toRGB = (r, g, b) => `rgb(${r}, ${g}, ${b})`;\n// Green → Red along x\nfunction riskColor(x) {\n const r = Math.round(lerp(22, 220, x));\n const g = Math.round(lerp(180, 40, x));\n const b = Math.round(lerp(90, 60, x));\n return toRGB(r, g, b);\n}\n\n// Derived metrics based on x along the cycle\nfunction useMetrics(x) {\n const y = cycleY(x);\n\n const upsideMin = 1.2; // not used but kept for clarity\n const upsideMax = 20;\n const expectedMultiple = lerp(upsideMax, 2, x) * lerp(0.8, 1.0, 1 - y * 0.2);\n\n const drawdownRisk = Math.round(lerp(15, 75, x) + (1 - y) * 10);\n const convexityNeed = Math.round(lerp(10, 90, x));\n\n let stance = \"Набор мейджоров и терпение\";\n if (x > 0.2 && x <= 0.45) stance = \"Дай прибыли течь, частично фиксируй на импульсах\";\n else if (x > 0.45 && x <= 0.75) stance = \"Смещайся по кривой риска, работай с high beta точечно\";\n else if (x > 0.75 && x <= 0.9) stance = \"Время-бокс позиции, продавай вертикаль, кэш — опциональность\";\n else if (x > 0.9) stance = \"Либо жди перезагрузку, либо играй только от выпуклости\";\n\n return { y, expectedMultiple, drawdownRisk, convexityNeed, stance };\n}\n\n// Simple \"Card\" shell using Tailwind classes\nfunction Card({ title, subtitle, children, className = \"\" }) {\n return (\n

\n {(title || subtitle) && (\n

\n {title &&

{title}

}\n {subtitle &&

{subtitle}

}\n

\n )}\n

{children}

\n );\n}\n\nexport default function InteractiveAsymmetry() {\n const [x, setX] = useState(0.15); // 0..1 position along cycle\n const svgRef = useRef(null);\n const { y, expectedMultiple, drawdownRisk, convexityNeed, stance } = useMetrics(x);\n\n // SVG layout\n const width = 960;\n const height = 460;\n const padding = { l: 64, r: 40, t: 36, b: 56 };\n const innerW = width - padding.l - padding.r;\n const innerH = height - padding.t - padding.b;\n\n // Map function coord → pixel coord (y grows upward)\n const X = (v) => padding.l + v * innerW;\n const Y = (v) => padding.t + (1 - v) * innerH;\n\n // Build smooth curve samples for the cycle\n const samples = useMemo(() => {\n const n = 240;\n const pts = [];\n for (let i = 0; i <= n; i++) {\n const t = i / n;\n pts.push([X(t), Y(cycleY(t))]);\n }\n return pts;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [width, height]);\n\n const pathD = useMemo(() => {\n const pts = samples;\n if (!pts.length) return \"\";\n let d = `M ${pts[0][0]} ${pts[0][1]}`;\n for (let i = 1; i < pts.length; i++) {\n const [x1, y1] = pts[i - 1];\n const [x2, y2] = pts[i];\n const mx = (x1 + x2) / 2;\n d += ` Q ${mx} ${y1}, ${x2} ${y2}`; // simple quadratic smoothing\n }\n return d;\n }, [samples]);\n\n // Handle position\n const hx = X(x);\n const hy = Y(y);\n\n const onSVGPointer = (e) => {\n const svg = svgRef.current;\n if (!svg) return;\n const rect = svg.getBoundingClientRect();\n const px = e.clientX - rect.left;\n const nx = clamp((px - padding.l) / innerW);\n setX(nx);\n };\n\n const reset = () => setX(0.15);\n\n return (\n

\n \n

\n Позиция на цикле\n setX(Number(e.target.value) / 100)}\n className=\"w-full mt-2\"\n />\n

\n \n ⟲ Сброс\n \n

\n\n

\n e.buttons === 1 && onSVGPointer(e)}\n >\n {/* Stage bands */}\n \n \n \n \n \n \n \n \n \n\n \n\n {/* Axes */}\n \n \n\n {/* Axis labels */}\n Время цикла →\n Сила тренда ↑\n\n {/* Phase labels */}\n Accumulation\n Markup\n Distribution\n Markdown\n\n {/* Full curve */}\n \n\n {/* Highlight area */}\n px <= hx).map(([px, py]) => `L ${px} ${py}`).join(' ')} L ${hx} ${Y(0)} Z`} fill={`rgba(0,0,0,0.04)`} />\n\n {/* Handle */}\n \n\n {/* Tooltip */}\n \n \n x: {x.toFixed(2)} • y: {y.toFixed(2)}\n Ожидаемый апсайд: ×{expectedMultiple.toFixed(1)}\n Риск просадки: {drawdownRisk}%\n \n \n

\n \n\n

\n \n

Ожидаемая награда

×{expectedMultiple.toFixed(1)}

Риск просадки

{drawdownRisk}%

Необходимая выпуклость

{convexityNeed}%

Подход

{stance}

\n \n\n \n

\n Это интерактивная иллюстрация, а не инвестиционная рекомендация. Модель демонстрирует идею «где живёт асимметрия»: ранние участки цикла обеспечивают лучший мультипликатор при меньшем экзистенциальном риске; ближе к вершине общий даунсайд схлопывается, поэтому оправдывается только стратегия с высокой выпуклостью и жёсткими правилами выхода.\n

\n Метрики аппроксимированы для визуализации: «ожидаемый апсайд», «риск просадки» и «необходимая выпуклость» рассчитаны эвристически от позиции x и формы кривой.\n

\n \n

\n );\n}\n","access","public","isModerationBlocked",false,"isAnonifyApiKeyDetected","dd",{"_35":36,"_37":38},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",34],"traceId","6708947846441175742","traceTime",1776404212402]