[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_111":112,"_113":114},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","khxu","name","presentation-survey","path","frontend/components/charts/ResultsView.tsx","project",{"_22":50,"_11":12,"_35":51,"_52":-5,"_53":44,"_54":55,"_56":55,"_57":58,"_59":-5,"_60":61,"_62":63,"_64":34,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/khxu/presentation-survey/code/frontend/components/charts/ResultsView.tsx","extension","id","c1e7ad0b-d62c-459d-bed8-0f00c207dd24","ResultsView.tsx","fileId","31c40978-a8ec-11f1-84e1-1607ee4eb77e","parentId","699da256-cb32-4b3b-8ca7-91299f1d3f3b","branchId","00e09eca-4d1b-4e02-b98f-8565c54b4542","branchVersion",109,"latest",true,"createdAt",["D",1788845258794],"version",4,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type {\n FacetGroup,\n Question,\n ResultsPayload,\n} from \"../../../shared/types.ts\";\nimport {\n ChoiceChart,\n Counter,\n PALETTE,\n RankedChart,\n ScaleChart,\n TextList,\n WordCloudChart,\n} from \"./Charts.tsx\";\nimport { MatrixHeatmap } from \"./MatrixHeatmap.tsx\";\nimport { UpSetChart } from \"./UpSetChart.tsx\";\n\ninterface Props {\n fetcher: (groupBy: string | null) => Promise;\n canFacet: boolean;\n onTotal?: (n: number) => void;\n projectorUrl?: string;\n pollMs?: number;\n}\n\nexport function ResultsView(\n { fetcher, canFacet, onTotal, projectorUrl, pollMs = 3000 }: Props,\n) {\n const [data, setData] = useState(null);\n const [groupBy, setGroupBy] = useState(null);\n const [filter, setFilter] = useState(null); // facet group key to isolate\n const [error, setError] = useState(null);\n const [focus, setFocus] = useState(null); // question id for \"one at a time\" mode\n const [pulse, setPulse] = useState(false);\n const lastTotal = useRef(0);\n\n useEffect(() => {\n let alive = true;\n const load = () =>\n fetcher(groupBy).then((d) => {\n if (!alive) return;\n setData(d);\n setError(null);\n if (d.totalResponses !== lastTotal.current) {\n lastTotal.current = d.totalResponses;\n setPulse(true);\n setTimeout(() => setPulse(false), 700);\n onTotal?.(d.totalResponses);\n }\n }).catch((e) => alive && setError(e.message));\n load();\n const t = setInterval(load, pollMs);\n return () => {\n alive = false;\n clearInterval(t);\n };\n }, [groupBy, pollMs]);\n\n if (error) {\n return (\n

⏳

{error}

\n This page keeps checking — results appear as soon as the presenter\n reveals them.\n

\n );\n }\n if (!data) {\n return

Loading…

;\n }\n\n const { survey } = data;\n const demographics = survey.questions.filter((q) => q.isDemographic);\n const facetQ = groupBy\n ? survey.questions.find((q) => q.id === groupBy)\n : null;\n let groups: FacetGroup[] = data.groups;\n if (filter && groupBy) groups = groups.filter((g) => g.key === filter);\n const shownQuestions = survey.questions.filter((q) =>\n (q.id !== groupBy) && (!focus || q.id === focus)\n );\n const hasHiddenNote = survey.questions.some((q) => q.hidden);\n\n return (\n

\n {/* Toolbar */}\n

\n \n responses\n

\n\n {canFacet && demographics.length > 0 && (\n <>\n \n 🔍 Group by\n (setGroupBy(e.target.value || null), setFilter(null))}\n className=\"border rounded-lg px-2 py-1 text-sm bg-gray-50\"\n >\n \n {demographics.map((q) => (\n \n ))}\n \n \n {facetQ && (\n

\n setFilter(null)}\n className={`px-2 py-1 rounded-full border ${\n !filter\n ? \"bg-indigo-600 text-white border-indigo-600\"\n : \"bg-white\"\n }`}\n >\n all groups\n \n {data.groups.map((g, i) => (\n setFilter(filter === g.key ? null : g.key)}\n className={`px-2 py-1 rounded-full border ${\n filter === g.key ? \"text-white\" : \"bg-white\"\n }`}\n style={filter === g.key\n ? {\n background: PALETTE[i % PALETTE.length],\n borderColor: PALETTE[i % PALETTE.length],\n }\n : {\n borderColor: PALETTE[i % PALETTE.length],\n color: PALETTE[i % PALETTE.length],\n }}\n >\n {g.label} ({g.responseCount})\n \n ))}\n

\n )}\n \n )}\n\n

\n setFocus(e.target.value || null)}\n className=\"border rounded-lg px-2 py-1 text-sm bg-gray-50 max-w-[220px]\"\n >\n \n {survey.questions.filter((q) => q.id !== groupBy).map((q, i) => (\n \n ))}\n \n {projectorUrl && (\n \n 🖥 projector view\n \n )}\n

\n\n {facetQ && !filter && (\n

\n Grouped by {facetQ.prompt}:{\" \"}\n {data.groups.map((g) => `${g.label} (${g.responseCount})`).join(\n \" · \",\n )}\n

\n )}\n\n {shownQuestions.length === 0 && (\n

No questions to show.

\n )}\n\n

\n {shownQuestions.map((q, i) => (\n \n ))}\n

\n {hasHiddenNote && canFacet && (\n

\n Questions marked 🙈 are hidden from the audience's results view.\n

\n )}\n \n );\n}\n\nfunction QuestionCard(\n { q, index, groups, big }: {\n q: Question;\n index: number;\n groups: FacetGroup[];\n big: boolean;\n },\n) {\n const n = groups.reduce(\n (s, g) =>\n s + (g.aggregates.find((a) => a.questionId === q.id)?.responseCount ?? 0),\n 0,\n );\n return (\n \n

\n \n Q{index + 1}\n \n

\n {q.prompt || \"(untitled)\"}\n

\n \n {q.hidden && \"🙈 \"}\n {q.isDemographic && \"👥 \"}\n {n} answer{n === 1 ? \"\" : \"s\"}\n \n

\n \n \n );\n}\n\nfunction Chart({ q, groups }: { q: Question; groups: FacetGroup[] }) {\n switch (q.type) {\n case \"single_choice\":\n case \"emoji_reaction\":\n return ;\n case \"multi_choice\":\n return ;\n case \"scale\":\n return ;\n case \"ranked_choice\":\n return ;\n case \"word_cloud\":\n return ;\n case \"free_text\":\n return ;\n case \"matrix_2x2\":\n return ;\n }\n}\n\nfunction MultiChoiceChart(\n { q, groups }: { q: Question; groups: FacetGroup[] },\n) {\n const [mode, setMode] = useState<\"intersections\" | \"totals\">(\"intersections\");\n return (\n

\n \n setMode(\"intersections\")}\n className={`px-2.5 py-1 rounded-full border ${\n mode === \"intersections\"\n ? \"bg-indigo-600 text-white border-indigo-600\"\n : \"bg-white\"\n }`}\n >\n Intersections\n \n setMode(\"totals\")}\n className={`px-2.5 py-1 rounded-full border ${\n mode === \"totals\"\n ? \"bg-indigo-600 text-white border-indigo-600\"\n : \"bg-white\"\n }`}\n >\n Option totals\n \n

\n {mode === \"intersections\"\n ? \n : }\n \n );\n}\n","deleted",false,"label",[47,48,49,24],"frontend","components","charts","ae520107-1d25-47b9-ad83-831e36befb67",["D",1788585574393],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Live talk polling: QR join, ranked choice, demographic facets","imageUrl","userId","0198fc74-a2ac-77df-bbdc-e23a8e395bee","pinnedFileId","01a0700e-6ffa-7369-be27-ef5029df6316","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","0198fc74-a2ad-7019-840f-e164a0170dfc","tursoName","ae5201071d2547b9ad83831e36befb67","tursoHostname","ae5201071d2547b9ad83831e36befb67-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789542098478],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_110":106},"org",{"_9":10,"_104":-5,"_105":106,"_60":61,"_107":108,"_109":44},"branch",{"_37":94,"_11":95,"_22":30,"_96":50,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":12,"_103":10},"isOwned",150,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zMjFKVFdGYXdiZmFXS0hOajdwWHNBOUlZUE4ifQ","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_87":-5,"_144":145,"_146":147,"_148":149,"_150":44,"_151":44,"_152":44,"_153":34,"_154":-5,"_155":-7,"_156":-7,"_157":68,"_158":44,"_159":44,"_160":-5,"_161":44,"_162":44,"_163":44,"_164":-5},"ENV",{"_115":116,"_117":118,"_119":95,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141,"_142":143},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]