Chart Types

\n {CHART_TYPES.map((chart) => (\n

onAddChart(chart.type)}\n style={{\n cursor: 'grab',\n padding: '10px',\n margin: '5px',\n backgroundColor: 'white',\n borderRadius: '5px'\n }}\n >\n {chart.label}\n

\n ))}\n

\n );\n}\n\nfunction ChartCanvas({ charts, onUpdateChart, onDeleteChart }) {\n return (\n

\n {charts.map((chart) => (\n

{chart.type.toUpperCase()} Chart

\n \n

\n onUpdateChart(chart.id, { color: e.target.value })}\n />\n

\n ))}\n

\n );\n}\n\nfunction App() {\n // Defensive programming with fallback state management\n const [hooks, setHooks] = React.useState(null);\n const [charts, setCharts] = React.useState([]);\n const [showDataModal, setShowDataModal] = React.useState(false);\n const [currentChartData, setCurrentChartData] = React.useState(null);\n\n // Load hooks dynamically on component mount\n React.useEffect(() => {\n importReactHooks().then((loadedHooks) => {\n setHooks(loadedHooks);\n }).catch(console.error);\n }, []);\n\n // Defensive chart rendering with error handling\n React.useEffect(() => {\n if (!charts.length) return;\n\n try {\n charts.forEach(chart => {\n if (chart.data) {\n const ctx = document.getElementById(`chart-${chart.id}`);\n if (ctx) {\n // Destroy existing chart if it exists\n const existingChart = (window as any)[`chart_${chart.id}`];\n if (existingChart) {\n existingChart.destroy();\n }\n\n // Create new chart and store reference\n const newChart = new Chart(ctx, {\n type: chart.type,\n data: {\n labels: chart.data.map((_, i) => `Data ${i+1}`),\n datasets: [{\n label: 'Dataset',\n data: chart.data,\n backgroundColor: chart.color,\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false\n }\n });\n\n // Store chart reference to allow future destruction\n (window as any)[`chart_${chart.id}`] = newChart;\n }\n }\n });\n } catch (error) {\n console.error(\"Chart rendering error:\", error);\n }\n }, [charts]);\n\n // Fallback if hooks are not loaded\n if (!hooks) {\n return

;\n }\n\n const addChart = (type) => {\n const newChart = {\n id: Date.now(),\n type,\n data: null,\n color: '#007bff'\n };\n setCharts([...charts, newChart]);\n setCurrentChartData(newChart);\n setShowDataModal(true);\n };\n\n const updateChart = (id, updates) => {\n setCharts(charts.map(chart => \n chart.id === id ? { ...chart, ...updates } : chart\n ));\n };\n\n const deleteChart = (id) => {\n setCharts(charts.filter(chart => chart.id !== id));\n // Cleanup chart reference\n const existingChart = (window as any)[`chart_${id}`];\n if (existingChart) {\n existingChart.destroy();\n delete (window as any)[`chart_${id}`];\n }\n };\n\n const handleDataSubmit = (data) => {\n if (currentChartData) {\n updateChart(currentChartData.id, { data });\n }\n };\n\n return (\n \n

\n \n

📊 Data Analysis Dashboard

\n \n

\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\n\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function server(request: Request): Promise {\n return new Response(`\n \n \n Data Analysis Dashboard\n \n \n \n \n

\n \n \n \n `, {\n headers: { \"content-type\": \"text/html\" }\n });\n}","deleted","label",[98],"permalink","https://www.val.town/x/omar1/data/code/main.tsx","extension","actionData","errors"]