{data.name}

Value: {data.value.toLocaleString()}

Percentage: {((data.value / totalValue) * 100).toFixed(1)}%

\n );\n }\n return null;\n }}\n />\n \n {chartData.map((entry, index) => (\n \n ))}\n (\n \n {value.toLocaleString()} ({((value / totalValue) * 100).toFixed(1)}%)\n \n )}\n />\n \n \n \n );\n};\n\nconst BarChartComponent = ({ data }: ChartComponentProps) => {\n if (typeof data !== 'object' || Object.keys(data).length === 0) {\n return

No data available for bar chart

;\n }\n\n const chartData = Object.entries(data)\n .map(([date, views]) => ({ date, views }))\n .sort((a, b) => new Date(a.date) - new Date(b.date));\n\n return (\n \n \n \n \n \n \n \n \n \n new Date(value).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}\n />\n \n {\n if (active && payload && payload.length) {\n return (\n

{new Date(label).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}

Views: {payload[0].value}

\n );\n }\n return null;\n }}\n />\n \n \n \n );\n};\n\nconst PieChartComponent = ({ data }: ChartComponentProps) => {\n const chartData = Object.entries(data)\n .map(([name, value]) => ({ name, value }))\n .sort((a, b) => b.value - a.value);\n\n const totalValue = chartData.reduce((sum, item) => sum + item.value, 0);\n\n return (\n \n \n `${name} ${(percent * 100).toFixed(1)}%`}\n labelLine={{ stroke: '#4b5563', strokeWidth: 1 }}\n >\n {chartData.map((entry, index) => (\n \n ))}\n \n {\n if (active && payload && payload.length) {\n const data = payload[0];\n return (\n

{data.name}

Value: {data.value}

Percentage: {((data.value / totalValue) * 100).toFixed(1)}%

\n );\n }\n return null;\n }}\n />\n \n \n );\n};\n\nconst LocationVerticalBarChart = ({ data }: ChartComponentProps) => {\n const [visibleCountries, setVisibleCountries] = useState(5);\n const initialVisibleCount = 5;\n const sortedData = Object.entries(data)\n .map(([name, value]) => ({ name, value }))\n .sort((a, b) => b.value - a.value);\n\n const totalValue = sortedData.reduce((sum, item) => sum + item.value, 0);\n const chartData = sortedData.slice(0, visibleCountries);\n\n const handleShowMore = () => {\n setVisibleCountries(prev => Math.min(prev + 5, sortedData.length));\n };\n\n const handleShowLess = () => {\n setVisibleCountries(initialVisibleCount);\n };\n\n return (\n <>\n \n \n \n \n {\n if (active && payload && payload.length) {\n const data = payload[0].payload;\n return (\n

{data.name}

Value: {data.value.toLocaleString()}

Percentage: {((data.value / totalValue) * 100).toFixed(1)}%

\n );\n }\n return null;\n }}\n />\n \n {chartData.map((entry, index) => (\n \n ))}\n (\n \n {value.toLocaleString()} ({((value / totalValue) * 100).toFixed(1)}%)\n \n )}\n />\n \n \n \n

\n {visibleCountries < sortedData.length && (\n \n )}\n {visibleCountries > initialVisibleCount && (\n \n )}\n

\n \n );\n};\n\ntype ChartType = 'verticalBar' | 'bar' | 'pie' | 'location';\n\ninterface ChartCardProps {\n title: string;\n data: ChartData;\n type: ChartType;\n}\n\nconst ChartCard = ({ title, data, type }: ChartCardProps) => {\n return (\n \n \n {title}\n \n \n

\n {type === 'verticalBar' ? (\n \n ) : type === 'bar' ? (\n \n ) : type === 'pie' ? (\n \n ) : type === 'location' ? (\n \n ) : (\n

Unsupported chart type: {type}

\n )}\n

\n \n \n );\n};\n\nexport default ChartCard;\n","deleted","label",[178,179,180,160],"frontend","components","charts","permalink","https://www.val.town/x/nbbaier/counterTown/code/frontend/components/charts/ChartCard.tsx","extension","actionData","errors"]