fix: fix build

package.json

@@ -20,10 +20,12 @@
     "clsx": "^2.0.0",
     "lucide-react": "^0.321.0",
     "next": "^14.0.4",
+    "plotly.js": "^2.31.1",
     "plotly.js-dist-min": "^2.31.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.12.0",
+    "react-plotly.js": "^2.6.0",
     "tailwind-merge": "^2.1.0",
     "zod": "^3.22.4"
   },
@@ -34,7 +36,9 @@
     "@tailwindcss/forms": "^0.5.7",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
+    "@types/plotly.js-dist-min": "^2.3.4",
     "@types/react": "^18.2.45",
+    "@types/react-plotly.js": "^2.6.3",
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",

src/app/dashboard/page.tsx

@@ -42,6 +42,7 @@ const IntroSection = () => {
   );
 };
 
+
 const GlobalTrendSection = () => {
   return (
     <section className="grid grid-rows-[1fr, auto, 1fr] px-6 lg:px-12 py-3 lg:py-7"></section>

src/components/DashboardChart.tsx

@@ -1,23 +1,21 @@
-import Plotly from "plotly.js-dist-min";
-import React, { useEffect } from "react";
+import { Data } from "plotly.js-dist-min";
+import React from "react";
+import Plot from 'react-plotly.js';
 
 const DashboardChart = ({
   data,
   layout,
   id,
 }: {
-  data: object[] | undefined;
-  layout: object | undefined;
-  id: string | undefined;
+  data: Data[];
+  layout: object;
+  id: string;
 }) => {
-  useEffect(() => {
-    Plotly.newPlot(id, data, layout, {
-      responsive: true,
-      displayModeBar: false,
-    });
-  }, [data, layout, id]);
-
-  return <div id={id} />;
+  return <Plot
+    divId={id}
+    data={data}
+    layout={layout}
+  />
 };
 
 export default DashboardChart;

src/components/DashboardSection.tsx

@@ -1,11 +1,10 @@
 import clsx from "clsx";
-import dynamic from "next/dynamic";
 import React, { useEffect, useState } from "react";
 import { ReactNode } from "react";
+import dynamic from "next/dynamic";
 
 import { fetchData } from "@/pages/api/chart";
-
-const DashboardChart = dynamic(() => import("./DashboardChart"), {
+const DashboardChart = dynamic(() => import("@/components/DashboardChart"), {
   ssr: false,
 });
 
@@ -21,7 +20,7 @@ const DashboardSection = ({
   textOrder?: string | undefined;
   title?: string | undefined;
   content?: string | undefined;
-  id?: string;
+  id: string;
   cta?: ReactNode | undefined;
 }) => {
   const [chartData, setChartData] = useState({
@@ -38,6 +37,10 @@ const DashboardSection = ({
     fetchGraphData();
   }, [chartData, id]);
 
+  if(!chartData || !id) {
+    return <></>
+  }
+
   return (
     <div className="h-full items-center">
       <div className="text-2xl font-semibold">{title}</div>

src/pages/api/chart.ts

@@ -1,13 +1,14 @@
 export const fetchData = async (chartType: string) => {
   const dataUrl = process.env.NEXT_PUBLIC_PINKBOMBS_DATA_URL;
   const apiKey = process.env.NEXT_PUBLIC_PINKBOMBS_DATA_API_KEY;
+
   try {
     const response = await fetch(`${dataUrl}/${chartType}`, {
       method: "GET",
       headers: {
         "X-API-Key": apiKey,
         accept: "application/json",
-      },
+      } as HeadersInit,
     });
     if (response.ok) {
       const data = await response.json();