ClickGems: Enables server-side rendering

src/components/Charts/Bar.jsx

@@ -1,13 +1,19 @@
 'use client';
 import React, { useRef, useState } from 'react';
-import ReactECharts from 'echarts-for-react';
 import isEqual from 'lodash/isEqual';
 import Loading from '../Loading';
 import Link from 'next/link';
 import {
   ArrowTopRightOnSquareIcon,
 } from '@heroicons/react/20/solid';
 import CopyDropdown from '../CopyDropdown';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function Bar({ data, stack, onSelect, link, metabaseLink }) {
   const [loading, setLoading] = useState(true);
@@ -115,7 +121,8 @@ export default function Bar({ data, stack, onSelect, link, metabaseLink }) {
   };
 
   const onMouseOver = () => {
-    const echartsInstance = chartRef.current.getEchartsInstance();
+    const echartsInstance = chartRef.current?.getEchartsInstance();
+    if (!echartsInstance) return;
     echartsInstance.dispatchAction({
       type: 'takeGlobalCursor',
       key: 'brush',
@@ -127,7 +134,8 @@ export default function Bar({ data, stack, onSelect, link, metabaseLink }) {
 
   const onBrushEnd = (params) => {
     if (params.areas.length > 0) {
-      const echartsInstance = chartRef.current.getEchartsInstance();
+      const echartsInstance = chartRef.current?.getEchartsInstance();
+      if (!echartsInstance) return;
       let start = echartsInstance.convertFromPixel(
         { xAxisIndex: 0 },
         params.areas[0].range[0]

src/components/Charts/CountryMap.jsx

@@ -1,5 +1,4 @@
 'use client';
-import ReactECharts from 'echarts-for-react';
 import 'echarts-countries-js/echarts-countries-js/world';
 import isEqual from 'lodash/isEqual';
 import Loading from '../Loading';
@@ -9,6 +8,13 @@ import {
   ArrowTopRightOnSquareIcon,
 } from '@heroicons/react/20/solid';
 import CopyDropdown from '../CopyDropdown';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function CountryMap({ data, selected, onClick, link, metabaseLink }) {
   const [loading, setLoading] = useState(true);

src/components/Charts/Gauge.jsx

@@ -1,8 +1,14 @@
 'use client'
 import React, { useState } from 'react'
-import ReactECharts from 'echarts-for-react';
 import isEqual from 'lodash/isEqual'
 import Loading from '../Loading'
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function Gauge({ data }) {
   const [loading, setLoading] = useState(true)

src/components/Charts/HeatMap.jsx

@@ -1,14 +1,20 @@
 'use client';
 import React, { useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
-import ReactECharts from 'echarts-for-react';
 import styles from './styles.module.css';
 import Loading from '../Loading';
 import Link from 'next/link';
 import {
   ArrowTopRightOnSquareIcon,
 } from '@heroicons/react/20/solid';
 import CopyDropdown from '../CopyDropdown';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function HeatMap({ data, title, subtitle, onClick, link, metabaseLink }) {
   const chartRef = useRef();
@@ -96,7 +102,8 @@ export default function HeatMap({ data, title, subtitle, onClick, link, metabase
       },
       extraCssText: 'visibility: hidden;padding:0px;',
       position: (point, params, dom, rect, size) => {
-        const echartsInstance = chartRef.current.getEchartsInstance();
+        const echartsInstance = chartRef.current?.getEchartsInstance();
+        if (!echartsInstance) return;
         const pos = echartsInstance.convertToPixel({ seriesIndex: 0 }, [
           params.value[0],
           params.value[1]

src/components/Charts/HorizontalBar.jsx

@@ -1,7 +1,6 @@
 'use client';
 import React, { useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
-import ReactECharts from 'echarts-for-react';
 import styles from './styles.module.css';
 import { formatNumber, toValidStyleName } from '@/utils/utils';
 import Loading from '../Loading';
@@ -10,6 +9,13 @@ import {
   ArrowTopRightOnSquareIcon,
 } from '@heroicons/react/20/solid';
 import CopyDropdown from '../CopyDropdown';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function HorizontalBar({
   data,
@@ -170,7 +176,8 @@ export default function HorizontalBar({
   };
 
   const onMouseOver = () => {
-    const echartsInstance = chartRef.current.getEchartsInstance();
+    const echartsInstance = chartRef.current?.getEchartsInstance();
+    if (!echartsInstance) return;
   };
 
   const onChartReady = (echarts) => {

src/components/Charts/Line.jsx

@@ -1,23 +1,29 @@
 'use client';
 import React, { useRef, useState } from 'react';
 import isEqual from 'lodash/isEqual';
-import ReactECharts from 'echarts-for-react';
-
 import styles from './styles.module.css';
 import Loading from '../Loading';
 import Link from 'next/link';
 import {
   ArrowTopRightOnSquareIcon,
 } from '@heroicons/react/20/solid';
 import CopyDropdown from '../CopyDropdown';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function Line({ data, onSelect, onClear, link, metabaseLink }) {
   const [loading, setLoading] = useState(true);
 
   const chartRef = useRef();
   const xAxis = data.map((p) => p.x);
   const onMouseOver = () => {
-    const echartsInstance = chartRef.current.getEchartsInstance();
+    const echartsInstance = chartRef.current?.getEchartsInstance();
+    if (!echartsInstance) return;
     const newOptions = echartsInstance.getOption();
     newOptions.series[0].lineStyle.opacity = 1;
     newOptions.series[0].lineStyle.shadowColor = '#FAFF69';
@@ -111,7 +117,8 @@ export default function Line({ data, onSelect, onClear, link, metabaseLink }) {
       },
       extraCssText: 'visibility: hidden;padding:0px;',
       position: (point, params, dom, rect, size) => {
-        const echartsInstance = chartRef.current.getEchartsInstance();
+        const echartsInstance = chartRef.current?.getEchartsInstance();
+        if (!echartsInstance) return;
         const pos = echartsInstance.convertToPixel({ seriesIndex: 0 }, [
           params[0].axisValue,
           params[0].value
@@ -132,13 +139,15 @@ export default function Line({ data, onSelect, onClear, link, metabaseLink }) {
   }
 
   const onMouseOut = () => {
-    const echartsInstance = chartRef.current.getEchartsInstance();
+    const echartsInstance = chartRef.current?.getEchartsInstance();
+    if (!echartsInstance) return;
     echartsInstance.setOption(options);
   };
 
   const onBrushEnd = (params) => {
     if (params.areas.length > 0) {
-      const echartsInstance = chartRef.current.getEchartsInstance();
+      const echartsInstance = chartRef.current?.getEchartsInstance();
+      if (!echartsInstance) return;
       let start = echartsInstance.convertFromPixel(
         { xAxisIndex: 0 },
         params.areas[0].range[0]

src/components/Charts/MultiLine.jsx

@@ -1,13 +1,19 @@
 'use client';
 import React, { useRef, useState } from 'react';
-import ReactECharts from 'echarts-for-react';
 import isEqual from 'lodash/isEqual';
 import Loading from '../Loading';
 import Link from 'next/link';
 import {
   ArrowTopRightOnSquareIcon,
 } from '@heroicons/react/20/solid';
 import CopyDropdown from '../CopyDropdown';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function MultiLine({ data, stack, fill, onSelect, link, metabaseLink }) {
   const [loading, setLoading] = useState(true);
@@ -117,7 +123,8 @@ export default function MultiLine({ data, stack, fill, onSelect, link, metabaseL
   };
 
   const onMouseOver = () => {
-    const echartsInstance = chartRef.current.getEchartsInstance();
+    const echartsInstance = chartRef.current?.getEchartsInstance();
+    if (!echartsInstance) return;
     echartsInstance.dispatchAction({
       type: 'takeGlobalCursor',
       key: 'brush',
@@ -129,7 +136,8 @@ export default function MultiLine({ data, stack, fill, onSelect, link, metabaseL
 
   const onBrushEnd = (params) => {
     if (params.areas.length > 0) {
-      const echartsInstance = chartRef.current.getEchartsInstance();
+      const echartsInstance = chartRef.current?.getEchartsInstance();
+      if (!echartsInstance) return;
       let start = echartsInstance.convertFromPixel(
         { xAxisIndex: 0 },
         params.areas[0].range[0]

src/components/Charts/Pie.jsx

@@ -1,4 +1,3 @@
-import ReactECharts from 'echarts-for-react';
 import Loading from '../Loading';
 import isEqual from 'lodash/isEqual';
 import { useState } from 'react';
@@ -7,6 +6,13 @@ import {
   ArrowTopRightOnSquareIcon,
 } from '@heroicons/react/20/solid';
 import CopyDropdown from '../CopyDropdown';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function Pie({ data, onClick, link, metabaseLink }) {
   const [loading, setLoading] = useState(true);

src/components/Charts/PunchCard.jsx

@@ -1,13 +1,19 @@
 'use client';
 import React, { useState } from 'react';
-import ReactECharts from 'echarts-for-react';
 import isEqual from 'lodash/isEqual';
 import Loading from '../Loading';
 import Link from 'next/link';
 import {
   ArrowTopRightOnSquareIcon,
 } from '@heroicons/react/20/solid';
 import CopyDropdown from '../CopyDropdown';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function PunchCard({
   data,

src/components/Charts/Radar.jsx

@@ -1,12 +1,18 @@
 'use client';
-import ReactECharts from 'echarts-for-react';
 import isEqual from 'lodash/isEqual';
 import Loading from '../Loading';
 import { useState } from 'react';
 import Link from 'next/link';
 import {
   ArrowTopRightOnSquareIcon,
 } from '@heroicons/react/20/solid';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function Radar({ data, onClick, link }) {
   const [loading, setLoading] = useState(true);

src/components/Charts/Spark.jsx

@@ -1,12 +1,18 @@
 'use client';
 import React, { useRef, useState } from 'react';
-import ReactECharts from 'echarts-for-react';
 import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import isEqual from 'lodash/isEqual';
 import Image from 'next/image';
 import CopyDropdown from '../CopyDropdown';
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function Spark({ name, data, link, metabaseLink, type='bar' }) {
   const chartRef = useRef();
@@ -20,7 +26,8 @@ export default function Spark({ name, data, link, metabaseLink, type='bar' }) {
   };
 
   const onMouseOver = () => {
-    const echartsInstance = chartRef.current.getEchartsInstance();
+    const echartsInstance = chartRef.current?.getEchartsInstance();
+    if (!echartsInstance) return;
     const newOptions = echartsInstance.getOption();
     newOptions.series[0].lineStyle.opacity = 0.8;
     newOptions.series[0].lineStyle.shadowColor = '#262626';
@@ -59,8 +66,6 @@ export default function Spark({ name, data, link, metabaseLink, type='bar' }) {
       top: '10px'
     },
     xAxis: {
-      type: 'category',
-      data: data.map((p) => p.x),
       show: true,
       type: 'category',
       data: xAxis,
@@ -116,7 +121,8 @@ export default function Spark({ name, data, link, metabaseLink, type='bar' }) {
   };
 
   const onMouseOut = () => {
-    const echartsInstance = chartRef.current.getEchartsInstance();
+    const echartsInstance = chartRef.current?.getEchartsInstance();
+    if (!echartsInstance) return;
     echartsInstance.setOption(options);
     setSelected(false);
   };

src/components/Charts/treemap.js

@@ -1,6 +1,12 @@
 'use client'
 import React, { useRef } from 'react'
-import ReactECharts from 'echarts-for-react'
+import dynamic from 'next/dynamic'
+
+// ECharts depends on browser APIs (window/document), so it breaks during Next.js SSR.
+// We load it dynamically on the client only.
+const ReactECharts = dynamic(() => import('echarts-for-react'), {
+  ssr: false,
+})
 
 export default function TreeMap ({data, onSelect}) {