\n \n \n \n

\n )\n}\n\nfunction FarcasterStats({ dbKey, title, xProp, yProp }) {\n const { data, isLoading } = useQuery({\n queryKey: ['farcaster-stats', dbKey],\n queryFn: () => fetchFarcasterStats(dbKey),\n refetchInterval: 60 * 1000, // 1 minute\n })\n\n const image = useChartImageUrl({ data, title, xProp, yProp })\n console.log('Farcaster stats image:', data, image)\n\n if (isLoading) return \n if (!data) return null\n\n return (\n

{title}

\n $\"Farcaster$ \n

\n )\n}\n\nasync function fetchFarcasterStats(dbKey: string) {\n const { data, error } = await supabase.from('farcaster_stats').select('*').eq('key', dbKey).single()\n if (error) throw error\n const json = JSON.parse(data?.value)\n return json?.slice(0, 241)\n}\n\n//////////\n\nexport function useChartImageUrl({ data, title, xProp, yProp, type = 'bar' }) {\n return useMemo(() => {\n return getChartImageUrl({ data, title, xProp, yProp, type })\n }, [data])\n}\n\nfunction getChartImageUrl({ data, title, xProp, yProp, type = 'bar' }) {\n if (!data) return null\n const data_ = data?.slice().reverse()\n // const color = 'rgba(54, 162, 235, 1)'\n const color = '#7c65c1'\n const chartData = {\n labels: data_.map((item: any) => item[xProp]?.slice(5, 10)),\n datasets: [\n {\n label: title,\n data: data_?.map((item: any) => item[yProp]),\n backgroundColor: type == 'line' ? 'transparent' : color,\n borderColor: color,\n },\n ],\n }\n const chart = {\n type: type,\n data: chartData,\n options: chartOptions,\n }\n\n return `https://quickchart.io/chart?w=500&h=350&c=${encodeURIComponent(JSON.stringify(chart))}`\n}\n\nconst gridLineColor = 'rgba(130, 130, 130, 0.2)'\n\nconst chartOptions = {\n maintainAspectRatio: false,\n animation: false,\n legend: {\n display: false,\n // labels: {\n // boxWidth: 20,\n // fontColor: '#888',\n // },\n },\n elements: {\n point: {\n radius: 0, // Set pointRadius globally for all datasets\n },\n },\n scales: {\n yAxes: [\n {\n stacked: true,\n ticks: {\n beginAtZero: true,\n fontColor: '#888',\n },\n gridLines: {\n color: gridLineColor,\n zeroLineColor: gridLineColor,\n },\n },\n ],\n xAxes: [\n {\n stacked: true,\n ticks: {\n fontColor: '#888',\n },\n gridLines: {\n display: false,\n color: gridLineColor,\n zeroLineColor: gridLineColor,\n },\n },\n ],\n },\n}\n","deleted","label",[170,171,152],"frontend","screens","permalink","https://www.val.town/x/moe/gif-fc/code/frontend/screens/StatsScreen.tsx","extension","actionData","errors"]