Update echarts to v6 (#1517)

Author: SvMak

package-lock.json

@@ -25,7 +25,7 @@
     "clsx": "^2.1.1",
     "dayjs": "^1.11.18",
     "docusaurus-plugin-sass": "^0.2.6",
-    "echarts": "^5.6.0",
+    "echarts": "^6.0.0",
     "embla-carousel-auto-scroll": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "fetch-jsonp": "^1.3.0",
@@ -57,5 +57,10 @@
   },
   "engines": {
     "node": ">=20.0"
+  },
+  "overrides": {
+    "@kbox-labs/react-echarts": {
+      "echarts": "$echarts"
+    }
   }
 }

package.json

@@ -1,5 +1,34 @@
+import type { SeriesOption } from 'echarts';
 import type { ModuleDownloadsChart } from '@site/src/types/marketplace';
-import { EChart } from '@kbox-labs/react-echarts';
+import { useMemo } from 'react';
+import { EChart, EChartProps } from '@kbox-labs/react-echarts';
+
+const eChartStaticProps: EChartProps = {
+  renderer: 'svg',
+  style: {
+    height: '300px',
+    width: '100%',
+  },
+  grid: {
+    left: 40,
+    top: 40,
+    right: 0,
+    bottom: 40,
+  },
+  xAxis: {
+    type: 'category',
+    axisLabel: {
+      color: '#fff',
+    },
+    boundaryGap: false,
+  },
+  yAxis: {
+    type: 'value',
+    axisLabel: {
+      color: '#fff',
+    },
+  },
+};
 
 type Props = {
   downloads: ModuleDownloadsChart[];
@@ -8,42 +37,22 @@ type Props = {
 export default function MarketplaceDetailsChart({ downloads }: Props) {
   if (!downloads.length) return null;
 
-  return (
-    <EChart
-      renderer={'svg'}
-      style={{
-        height: '300px',
-        width: '100%',
-      }}
-      grid={{
-        left: 40,
-        top: 40,
-        right: 0,
-        bottom: 40,
-      }}
-      xAxis={{
-        type: 'category',
-        boundaryGap: false,
-      }}
-      yAxis={{
-        type: 'value',
-      }}
-      textStyle={{
-        color: '#fff',
-      }}
-      series={[
-        {
-          type: 'line',
-          data: downloads,
-          lineStyle: {
-            color: 'var(--ifm-color-primary-darkest)',
-          },
-          areaStyle: {
-            color: 'var(--ifm-color-primary-darkest)',
-          },
-          silent: true,
+  const eChartSeries: SeriesOption[] = useMemo(
+    () => [
+      {
+        type: 'line',
+        data: downloads,
+        lineStyle: {
+          color: 'var(--ifm-color-primary-darkest)',
         },
-      ]}
-    />
+        areaStyle: {
+          color: 'var(--ifm-color-primary-darkest)',
+        },
+        silent: true,
+      },
+    ],
+    [],
   );
+
+  return <EChart {...eChartStaticProps} series={eChartSeries} />;
 }