\n No data available for chart\n

\n );\n }\n\n const maxValue = Math.max(...datasets.flatMap((d) => d.data || []), 1);\n\n const colors = [\n { fill: \"rgba(54, 162, 235, 0.6)\", stroke: \"rgba(54, 162, 235, 1)\" },\n { fill: \"rgba(255, 99, 132, 0.6)\", stroke: \"rgba(255, 99, 132, 1)\" },\n { fill: \"rgba(75, 192, 192, 0.6)\", stroke: \"rgba(75, 192, 192, 1)\" },\n { fill: \"rgba(255, 206, 86, 0.6)\", stroke: \"rgba(255, 206, 86, 1)\" },\n ];\n\n const barWidth = chartWidth / (labels.length * datasets.length + labels.length);\n const stepX = chartWidth / labels.length;\n\n return (\n

\n \n \n \n {[0, 0.25, 0.5, 0.75, 1].map((ratio, i) => {\n const y = chartHeight - ratio * chartHeight;\n const value = Math.round(ratio * maxValue);\n return (\n \n \n \n {value}\n \n \n );\n })}\n\n {datasets.map((dataset: any, datasetIdx: number) => {\n const color = colors[datasetIdx % colors.length];\n\n if (chartType === \"bar\") {\n return (\n \n {dataset.data.map((value: number, idx: number) => {\n const barHeight = (value / maxValue) * chartHeight;\n const x = idx * stepX + datasetIdx * barWidth;\n const y = chartHeight - barHeight;\n\n return (\n \n \n {barHeight > 20 && (\n \n {Math.round(value)}\n \n )}\n \n );\n })}\n \n );\n } else if (chartType === \"line\") {\n const points = dataset.data.map((value: number, idx: number) => {\n const x = idx * stepX + stepX / 2;\n const y = chartHeight - (value / maxValue) * chartHeight;\n return { x, y, value };\n });\n\n const pathData = points\n .map((p, idx) => `${idx === 0 ? \"M\" : \"L\"} ${p.x} ${p.y}`)\n .join(\" \");\n\n return (\n \n \n {points.map((p, idx) => (\n \n ))}\n \n );\n }\n return null;\n })}\n\n {labels.map((label: string, idx: number) => {\n const x = idx * stepX + stepX / 2;\n const truncatedLabel = label.length > 12 ? label.substring(0, 12) + \"...\" : label;\n return (\n \n {truncatedLabel}\n \n );\n })}\n \n\n \n {datasets.map((dataset: any, idx: number) => {\n const color = colors[idx % colors.length];\n return (\n \n \n \n {dataset.label || `Series ${idx + 1}`}\n \n \n );\n })}\n \n \n

\n );\n}\n\n// Separate component for chart rendering to isolate errors\nfunction ChartRenderer({ data, chartType }: { data: any; chartType: ChartType }) {\n const [mounted, setMounted] = useState(false);\n\n useEffect(() => {\n try {\n if (typeof Chart === \"undefined\") {\n throw new Error(\"Chart.js is not loaded\");\n }\n setMounted(true);\n } catch (error) {\n console.error(\"Error checking Chart.js availability:\", error);\n throw error;\n }\n }, []);\n\n if (!mounted) {\n return (\n

Loading chart...

\n );\n }\n\n try {\n const commonOptions = {\n responsive: true,\n maintainAspectRatio: false,\n aspectRatio: 2.5,\n layout: {\n padding: {\n bottom: 40,\n top: 10,\n left: 10,\n right: 10,\n },\n },\n plugins: {\n legend: { position: \"top\" as const },\n title: { display: false },\n tooltip: {\n mode: \"index\" as const,\n intersect: false,\n },\n },\n scales: {\n y: {\n type: \"linear\" as const,\n beginAtZero: true,\n },\n x: {\n type: \"category\" as const,\n ticks: {\n maxRotation: 45,\n minRotation: 45,\n },\n },\n },\n };\n\n if (chartType === \"bar\") {\n return (\n

\n \n

\n );\n } else if (chartType === \"line\") {\n return (\n

\n \n

\n );\n } else {\n return (\n

\n \n

\n );\n }\n } catch (error) {\n console.error(\"Error rendering chart:\", error);\n throw error;\n }\n}\n\n// Error boundary specifically for chart rendering\nclass ChartErrorBoundary extends React.Component<\n { children: React.ReactNode; onError: (error: string) => void },\n { hasError: boolean; error: Error | null }\n> {\n constructor(props: { children: React.ReactNode; onError: (error: string) => void }) {\n super(props);\n this.state = { hasError: false, error: null };\n }\n\n static getDerivedStateFromError(error: Error) {\n return { hasError: true, error };\n }\n\n override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {\n console.error(\"Chart rendering error (caught by boundary):\", error, errorInfo);\n try {\n this.props.onError(error?.message || \"Chart rendering failed\");\n } catch (callbackError) {\n console.error(\"Error in onError callback:\", callbackError);\n }\n }\n\n override render() {\n if (this.state.hasError) {\n return (\n \n

\n Chart Error: {this.state.error?.message || \"Unknown error\"}\n

\n The table view above shows all the same data. Chart rendering may have compatibility\n issues in this environment.\n

\n \n );\n }\n\n try {\n return this.props.children;\n } catch (error) {\n console.error(\"Error in ChartErrorBoundary render:\", error);\n return (\n \n

\n Chart Error: Failed to render chart\n

\n \n );\n }\n }\n}\n\nexport function Charts({ data, selectedPlayers, onPlayerSelect }: ChartsProps) {\n const [showChart, setShowChart] = useState(false);\n const [chartError, setChartError] = useState(null);\n const [chartType, setChartType] = useState(\"bar\");\n const [useChartJS, setUseChartJS] = useState(true);\n const [chartJSAvailable, setChartJSAvailable] = useState(false);\n\n useEffect(() => {\n try {\n if (typeof Chart !== \"undefined\") {\n setChartJSAvailable(true);\n }\n } catch (error) {\n console.warn(\"Chart.js not available, will use fallback:\", error);\n setChartJSAvailable(false);\n setUseChartJS(false);\n }\n }, []);\n\n if (data.length === 0) {\n return (\n

\n Select players from the table below to compare their stats\n

\n );\n }\n\n const displayData =\n selectedPlayers.length > 0\n ? selectedPlayers\n .map((idx) => data[idx])\n .filter(Boolean)\n .slice(0, 10)\n : data.slice(0, 10);\n\n if (displayData.length === 0) {\n return null;\n }\n\n const chartData = {\n labels: displayData.map((p) => p.name || \"Unknown\"),\n datasets: [\n {\n label: \"Points\",\n data: displayData.map((p) => p.score || 0),\n backgroundColor: \"rgba(54, 162, 235, 0.6)\",\n borderColor: \"rgba(54, 162, 235, 1)\",\n borderWidth: 2,\n },\n {\n label: \"Rebounds\",\n data: displayData.map((p) => p.totalRebounds || 0),\n backgroundColor: \"rgba(255, 99, 132, 0.6)\",\n borderColor: \"rgba(255, 99, 132, 1)\",\n borderWidth: 2,\n },\n {\n label: \"Assists\",\n data: displayData.map((p) => p.assistances || 0),\n backgroundColor: \"rgba(75, 192, 192, 0.6)\",\n borderColor: \"rgba(75, 192, 192, 1)\",\n borderWidth: 2,\n },\n {\n label: \"PIR\",\n data: displayData.map((p) => p.valuation || 0),\n backgroundColor: \"rgba(255, 206, 86, 0.6)\",\n borderColor: \"rgba(255, 206, 86, 1)\",\n borderWidth: 2,\n },\n ],\n };\n\n return (\n

\n \n

\n {selectedPlayers.length > 0 ? \"Selected Players Comparison\" : \"Top 10 Players Comparison\"}\n

\n {showChart && (\n setChartType(e.target.value as ChartType)}\n style={{\n padding: \"6px 12px\",\n borderRadius: \"4px\",\n border: \"1px solid #ddd\",\n fontSize: \"14px\",\n backgroundColor: \"white\",\n }}\n >\n \n \n \n )}\n {chartJSAvailable && (\n \n {\n setUseChartJS(e.target.checked);\n setChartError(null);\n }}\n style={{ cursor: \"pointer\" }}\n />\n Use Chart.js\n \n )}\n {\n setShowChart(!showChart);\n setChartError(null);\n }}\n style={{\n padding: \"8px 16px\",\n fontSize: \"14px\",\n backgroundColor: showChart ? \"#dc3545\" : \"#1976d2\",\n color: \"white\",\n border: \"none\",\n borderRadius: \"4px\",\n cursor: \"pointer\",\n fontWeight: \"500\",\n }}\n >\n {showChart ? \"Hide Chart\" : \"Show Chart\"}\n \n

\n Click on players in the table below to add them to the comparison\n

\n\n \n \n \n \n \n \n \n \n \n \n \n \n {displayData.map((p, idx) => (\n \n \n \n \n \n \n \n ))}\n \n

Player	PTS	REB	AST	PIR
{p.name \|\| \"Unknown\"}	{p.score \|\| 0}	{p.totalRebounds \|\| 0}	{p.assistances \|\| 0}	\n {p.valuation \|\| 0}\n

\n \n\n {showChart && (\n

\n {useChartJS && chartJSAvailable ? (\n {\n setChartError(error);\n setUseChartJS(false);\n }}\n >\n {chartError ? (\n \n

\n Chart.js Error: {chartError}\n

\n Falling back to simple SVG chart. The table view above shows all the same data.\n

\n ) : null}\n \n \n ) : (\n

\n \n Using simple SVG chart (Chart.js unavailable or disabled)\n

\n \n

\n )}\n \n )}\n \n );\n}\n","deleted","label",[179,160],"components","permalink","https://www.val.town/x/geordie/euroleague-stats/code/components/Charts.tsx","extension","actionData","errors"]