[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68e7afc134fc81919efec54c47f748fb","versionInt","title","Кругосветка Тагира","type","code/react","content","import React, { useEffect, useMemo, useState } from \"react\";\nimport {\n ResponsiveContainer,\n BarChart,\n Bar,\n XAxis,\n YAxis,\n Tooltip,\n CartesianGrid,\n ReferenceArea,\n ReferenceLine,\n} from \"recharts\";\n\nconst SHEET_ID = \"1LlJE6eGv60LGafMc7JaMOOO_5hcI_oAJq8ca-VsmHyA\";\nconst SHEET_NAME = \"Общие траты\";\nconst CSV_URL = `https://docs.google.com/spreadsheets/d/${SHEET_ID}/gviz/tq?tqx=out:csv&sheet=${encodeURIComponent(SHEET_NAME)}`;\n\nfunction parseRubleNumber(raw) {\n if (raw == null) return null;\n const cleaned = String(raw).replace(/[^0-9,\\.\\-]/g, \"\").replace(/\\s+/g, \"\");\n if (cleaned.includes(\",\") && cleaned.includes(\".\")) return Number(cleaned.replace(/,/g, \"\"));\n if (cleaned.includes(\",\")) return Number(cleaned.replace(/\\./g, \"\").replace(\",\", \".\"));\n return Number(cleaned);\n}\nfunction ruMonthShort(date) {\n return date.toLocaleDateString(\"ru-RU\", { month: \"short\" }).replace(\".\", \"\");\n}\nfunction roundNice(value) {\n if (value <= 0) return 0;\n const magnitude = Math.pow(10, Math.floor(Math.log10(value)) - 1);\n const normalized = value / magnitude;\n const rounded = Math.ceil(normalized / 2) * 2;\n return rounded * magnitude;\n}\n\nexport default function BarChartFromSheet() {\n const [rows, setRows] = useState([]);\n const [error, setError] = useState(\"\");\n const [loading, setLoading] = useState(true);\n\n useEffect(() => {\n let alive = true;\n (async () => {\n try {\n const res = await fetch(CSV_URL);\n const text = await res.text();\n const lines = text.split(/\\r?\\n/).filter(Boolean);\n const header = lines[0].split(\",\").map((h) => h.replace(/^\\\"|\\\"$/g, \"\").trim());\n const dateIdx = header.findIndex((h) => /Дата/i.test(h));\n const todayIdx = header.findIndex((h) => /Сегодня/i.test(h));\n const countryIdx = header.findIndex((h) => /Страна/i.test(h));\n const parsed = [];\n for (let i = 1; i < lines.length; i++) {\n const cols = lines[i].split(\",\").map((c) => c.replace(/^\\\"|\\\"$/g, \"\").trim());\n const d = new Date(cols[dateIdx]);\n const v = parseRubleNumber(cols[todayIdx]);\n if (!isNaN(d) && !isNaN(v)) parsed.push({ ts: d.getTime(), date: d, value: v, country: cols[countryIdx] || \"\" });\n }\n parsed.sort((a, b) => a.ts - b.ts);\n if (alive) setRows(parsed);\n } catch (e) {\n if (alive) setError(e.message);\n } finally {\n if (alive) setLoading(false);\n }\n })();\n return () => (alive = false);\n }, []);\n\n const domainX = useMemo(() => {\n if (!rows.length) return [0, 1];\n const pad = 86400000;\n return [rows[0].ts - pad, rows[rows.length - 1].ts + pad];\n }, [rows]);\n\n const fixedMaxY = useMemo(() => {\n if (!rows.length) return 1;\n const maxVal = rows.reduce((m, r) => (r.value > m ? r.value : m), 0);\n return roundNice(maxVal);\n }, [rows]);\n\n const yAxisWidth = 56;\n const yTickMargin = 6;\n const textFont = 12;\n\n const xTicks = useMemo(() => {\n if (!rows.length) return [];\n const N = Math.min(6, rows.length);\n const step = Math.floor(rows.length / (N - 1));\n return rows.filter((_, i) => i % step === 0).map((r) => r.ts);\n }, [rows]);\n\n const firstMonthTick = useMemo(() => {\n const map = new Map();\n for (const ts of xTicks) {\n const d = new Date(ts);\n const key = `${d.getFullYear()}-${d.getMonth()}`;\n if (!map.has(key)) map.set(key, ts);\n }\n return map;\n }, [xTicks]);\n\n const CustomMonthTick = ({ x, y, payload }) => {\n const ts = payload.value;\n const d = new Date(ts);\n const key = `${d.getFullYear()}-${d.getMonth()}`;\n const isFirst = firstMonthTick.get(key) === ts;\n const day = d.getDate();\n const month = ruMonthShort(d);\n return (\n \n {day}\n {isFirst && {month}}\n \n );\n };\n\n const dayMs = 24 * 60 * 60 * 1000;\n const countryBands = useMemo(() => {\n if (!rows.length) return [];\n const bands = [];\n let start = 0;\n let cur = rows[0].country || \"\";\n for (let i = 1; i < rows.length; i++) {\n const c = rows[i].country || \"\";\n if (c !== cur) {\n bands.push({ x1: rows[start].ts - dayMs * 0.5, x2: rows[i - 1].ts + dayMs * 0.5, country: cur });\n start = i; cur = c;\n }\n }\n bands.push({ x1: rows[start].ts - dayMs * 0.5, x2: rows[rows.length - 1].ts + dayMs * 0.5, country: cur });\n return bands.map((b, i) => ({ ...b, shaded: i % 2 === 1 }));\n }, [rows]);\n\n const CustomTooltip = ({ active, payload }) => {\n if (!active || !payload || !payload.length) return null;\n const p = payload[0];\n const d = new Date(p.payload.ts);\n const day = d.toLocaleDateString('ru-RU', { day: '2-digit', month: 'long', year: 'numeric' });\n return (\n

{day}

Сегодня: {p.value.toLocaleString('ru-RU')} ₽

\n );\n };\n\n if (loading) return

Загрузка…

;\n if (error) return

Ошибка: {error}

;\n\n return (\n

Стоимость жизни в кругосветке без билетов

Сумма на двоих в сутки, тыс. ₽

\n\n

\n \n \n\n {countryBands.map((b, i) => (\n b.shaded ? (\n \n ) : null\n ))}\n\n {countryBands.map((b, i) => (\n (b.x2 - b.x1) >= 3 * dayMs ? (\n \n ) : null\n ))}\n\n \n \n\n }\n />\n (\n \n {(payload.value / 1000).toLocaleString('ru-RU')}\n \n )}\n tickMargin={yTickMargin}\n />\n } cursor={{ fill: 'transparent' }} />\n \n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","17025515103182303961","traceTime",1777662551476]