Updated Features

src/app/components/Charts/LineChart.tsx

@@ -0,0 +1,60 @@
+import { createChart, ColorType } from 'lightweight-charts';
+import React, { useEffect, useRef } from 'react';
+
+interface ChartProps {
+  data: { time: string; value: number }[];
+  colors?: {
+    backgroundColor?: string;
+    lineColor?: string;
+    textColor?: string;
+    areaTopColor?: string;
+    areaBottomColor?: string;
+  };
+}
+
+export const ChartComponent: React.FC<ChartProps> = ({ data, colors = {} }) => {
+  const {
+    backgroundColor = 'white',
+    lineColor = '#2962FF',
+    textColor = 'black',
+    areaTopColor = '#2962FF',
+    areaBottomColor = 'rgba(41, 98, 255, 0.28)',
+  } = colors;
+
+  const chartContainerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (chartContainerRef.current) {
+      const chart = createChart(chartContainerRef.current, {
+        layout: {
+          background: { type: ColorType.Solid, color: backgroundColor },
+          textColor,
+        },
+        width: chartContainerRef.current?.clientWidth || 0,
+        height: 300,
+      });
+
+      const handleResize = () => {
+        if (chartContainerRef.current) {
+          chart.applyOptions({ width: chartContainerRef.current.clientWidth });
+        }
+      };
+
+      chart.timeScale().fitContent();
+
+      const newSeries = chart.addAreaSeries({ lineColor, topColor: areaTopColor, bottomColor: areaBottomColor });
+      newSeries.setData(data);
+
+      window.addEventListener('resize', handleResize);
+
+      return () => {
+        window.removeEventListener('resize', handleResize);
+        chart.remove();
+      };
+    }
+  }, [data, backgroundColor, lineColor, textColor, areaTopColor, areaBottomColor]);
+
+  return (
+    <div ref={chartContainerRef} />
+  );
+};

src/pages/analysis/index.tsx

@@ -0,0 +1,26 @@
+import useSWR from 'swr';
+import axios from 'axios';
+import  {ChartComponent}  from '../../app/components/Charts/LineChart'; // Assuming ChartComponent is in the same file
+
+const fetcher = (url: string) => axios.get(url).then(res => res.data);
+
+function App(props: any) {
+  const { data, error } = useSWR(`/api/historicalData?symbol=NIFTY`, fetcher);
+
+  if (error) return <div>Error loading data</div>;
+  if (!data) return <div>Loading...</div>;
+
+  // Process data into the format required by the chart
+  const chartData = data.map((item: { _id: { year: number, month: number }, data: Array<{ datetime: string, close: number }> }) => {
+    return {
+      time: `${item._id.year}-${item._id.month}`,
+      value: item.data.reduce((acc, curr) => acc + Number(curr.close), 0) / item.data.length // average close value for the month
+    };
+  });
+
+  return (
+    <ChartComponent {...props} data={chartData}></ChartComponent>
+  );
+}
+
+export default App;

src/pages/api/historicalData.ts

@@ -0,0 +1,35 @@
+import { NextApiRequest, NextApiResponse } from 'next';
+import { MongoClient } from 'mongodb';
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+  const { symbol } = req.query;
+
+  if (typeof symbol !== 'string') {
+    res.status(400).json({ error: 'Invalid symbol' });
+    return;
+  }
+
+  const client = new MongoClient('mongodb://thestonepot:5PZAXjH03P4IT7pDuzBn3A7w1mzHwt0nIphn1shsO936Fj60clpMjdFig7BVrCsQabGfOaefWunWACDbuoUNRw%3D%[email protected]:10255/?ssl=true&replicaSet=globaldb&retrywrites=false&maxIdleTimeMS=120000&appName=@thestonepot@');
+  await client.connect();
+  const db = client.db('yourDatabaseName');
+  const collection = db.collection('time_series');
+
+  const historicalData = await collection.aggregate([
+    { $match: { script: symbol } },
+    { $project: { 
+        year: { $year: "$datetime" }, 
+        month: { $month: "$datetime" }, 
+        day: { $dayOfMonth: "$datetime" }, 
+        data: "$$ROOT" 
+    }},
+    { $group: { 
+        _id: { year: "$year", month: "$month" }, 
+        data: { $push: "$data" } 
+    }},
+    { $sort: { "_id.year": 1, "_id.month": 1 } }
+  ]).toArray();
+
+  await client.close();
+
+  res.status(200).json(historicalData);
+}