initial line chart setup with d3 help

web/pages/components/viewer-info.tsx

@@ -1,4 +1,6 @@
 import React, { useState, useEffect } from 'react';
+import {timeFormat} from 'd3-time-format';
+import { LineChart, XAxis, YAxis, Line, Tooltip } from 'recharts';
 import { VIEWERS_OVER_TIME, fetchData } from '../utils/apis';
 
 
@@ -10,13 +12,10 @@ export default function ViewersOverTime() {
   const getInfo = async () => {
     try {
       const result = await fetchData(VIEWERS_OVER_TIME);
-      console.log("viewers result", result)
-
       setViewerInfo(result);
 
     } catch (error) {
       console.log("==== error", error)
-      // setViewerInfo({ ...viewerInfo, message: error.message });
     }
   };
   
@@ -32,19 +31,25 @@ export default function ViewersOverTime() {
     }
   }, []);
 
+  const timeFormatter = (tick) => {return timeFormat('%H:%M:%S')(new Date(tick));};
+
 
-  const formattedData = viewerInfo.map(viewer => ({
-    x: (new Date(viewer.time)).toLocaleTimeString(),
-    y: viewer.value,
-  }));
 
   return (
-    <div>
+    <div style={{backgroundColor: '#333'}}>
       <h2>Viewers over time</h2>
       <p>Time on X axis, # Viewer on Y</p>
       <div style={{border: '1px solid red', height: '300px', width: '100%', overflow:'auto'}}>
-        {JSON.stringify(formattedData)}
+        {JSON.stringify(viewerInfo)}
       </div>
+
+      <LineChart width={800} height={400} data={viewerInfo}>
+        <XAxis dataKey="time" tickFormatter={timeFormatter}/>
+        <YAxis dataKey="value"/>
+        <Tooltip cursor={{ stroke: 'red', strokeWidth: 2 }} />
+        <Line type="monotone" dataKey="value" stroke="#ff84d8" dot={{ stroke: 'red', strokeWidth: 2 }} />
+      </LineChart>
+
     </div>
   );
 }