fix(P4.02): guard chart lifecycle hooks against undefined chartRef and chart [codexPreflight]

Author: cesarnml

src/lib/components/BarChart/BreakdownChart.svelte

@@ -36,6 +36,7 @@
   )
 
   onMount(() => {
+    if (!chartRef) return
     chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
     const handleResize = () => chart.resize()
     window.addEventListener('resize', handleResize, { passive: true })
@@ -52,16 +53,21 @@
     })
 
     return () => {
-      chart.dispose()
+      chart?.dispose()
       window.removeEventListener('resize', handleResize)
     }
   })
 
   afterUpdate(() => {
+    if (!chartRef) return
     tippy(document.querySelectorAll('[data-tippy-content]'), {
       theme: 'light',
       animation: 'scale',
     })
+    if (!chart) {
+      chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
+      chart.on('click', (params) => { goto(Url.ProjectDetail(params.name)) })
+    }
     chart.setOption(option)
   })
 </script>

src/lib/components/BarChart/StackedBarChart.svelte

@@ -27,19 +27,21 @@
   $: option = createStackedBarChartOption(xValues, series)
 
   onMount(() => {
+    if (!chartRef) return
     chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
     const handleResize = () => chart.resize()
     window.addEventListener('resize', handleResize, { passive: true })
     chart.setOption(option)
 
     return () => {
-      chart.dispose()
+      chart?.dispose()
       window.removeEventListener('resize', handleResize)
     }
   })
 
   afterUpdate(() => {
-    chart.dispose()
+    if (!chartRef) return
+    chart?.dispose()
     chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
     chart.setOption(option)
   })

src/lib/components/BarChart/WeekdaysBarChart.svelte

@@ -20,18 +20,21 @@
   $: option = createSimpleBarChartOption(summaries)
 
   onMount(() => {
+    if (!chartRef) return
     chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
     const handleResize = () => chart.resize()
     window.addEventListener('resize', handleResize, { passive: true })
     chart.setOption(option)
 
     return () => {
-      chart.dispose()
+      chart?.dispose()
       window.removeEventListener('resize', handleResize)
     }
   })
 
   afterUpdate(() => {
+    if (!chartRef) return
+    if (!chart) chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
     chart.setOption(option)
   })
 </script>

src/lib/components/GaugeChart/DailyGauge.svelte

@@ -26,18 +26,21 @@
   $: option = createDisciplineGaugeOption(data)
 
   onMount(() => {
+    if (!chartRef) return
     chart = echarts.init(chartRef, 'dark', { renderer: 'canvas' })
     const handleResize = () => chart.resize()
     window.addEventListener('resize', handleResize, { passive: true })
     chart.setOption(option)
 
     return () => {
-      chart.dispose()
+      chart?.dispose()
       window.removeEventListener('resize', handleResize)
     }
   })
 
   afterUpdate(() => {
+    if (!chartRef) return
+    if (!chart) chart = echarts.init(chartRef, 'dark', { renderer: 'canvas' })
     chart.setOption(option)
   })
 

src/lib/components/PieChart/PieChart.svelte

@@ -19,18 +19,21 @@
   $: option = createPieChartOption(data)
 
   onMount(() => {
+    if (!chartRef) return
     chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
     const handleResize = () => chart.resize()
     window.addEventListener('resize', handleResize, { passive: true })
     chart.setOption(option)
 
     return () => {
-      chart.dispose()
+      chart?.dispose()
       window.removeEventListener('resize', handleResize)
     }
   })
 
   afterUpdate(() => {
+    if (!chartRef) return
+    if (!chart) chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
     chart.setOption(option)
   })
 </script>

src/lib/components/TimelineChart/TimelineChart.svelte

@@ -23,18 +23,23 @@
   $: option = createTimelineChartOption(durations, itemType)
 
   onMount(() => {
+    if (!chartRef) return
     chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
     const handleResize = () => chart.resize()
     window.addEventListener('resize', handleResize, { passive: true })
     chart.setOption(option)
 
     return () => {
-      chart.dispose()
+      chart?.dispose()
       window.removeEventListener('resize', handleResize)
     }
   })
 
-  afterUpdate(() => chart.setOption(option))
+  afterUpdate(() => {
+    if (!chartRef) return
+    if (!chart) chart = echarts.init(chartRef, 'dark', { renderer: 'svg' })
+    chart.setOption(option)
+  })
 
   const onUpdate = (e: CustomEvent<SupabaseDuration>) => (durations = e.detail)
 </script>