From d0dd23f301bddd9a63a51edea69baaf18e9fca3c Mon Sep 17 00:00:00 2001
From: Charu Tak <charu120995@gmail.com>
Date: Mon, 1 Jan 2024 20:03:29 +0530
Subject: [PATCH] Updated range in line chart

---
 viz/frontend/src/components/CalendarViz.tsx  |  9 +--------
 viz/frontend/src/components/LineChartViz.tsx |  7 ++++---
 viz/frontend/src/utils/date.ts               | 10 +++++++++-
 3 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/viz/frontend/src/components/CalendarViz.tsx b/viz/frontend/src/components/CalendarViz.tsx
index df9c93f..0fe8322 100644
--- a/viz/frontend/src/components/CalendarViz.tsx
+++ b/viz/frontend/src/components/CalendarViz.tsx
@@ -3,7 +3,7 @@ import * as d3 from "d3";
 import { Col } from "antd";
 import styles from "../stylesheets.module.scss";
 import { ArrayDateData, RawDateData } from "src/models/date_data";
-import { getDateInString, getLastDateToBeShownInViz, getStartDateToBeShownInViz, weeksToShowInViz } from "src/utils/date";
+import { getDateInString, getLastDateToBeShownInViz, getStartDateToBeShownInViz, weeksToShowInViz, getContinuousDates } from "src/utils/date";
 import {viz_details} from "../models/constants";
 import { tooltipData } from "./Tooltip";
 
@@ -196,10 +196,3 @@ class CalendarViz extends React.Component<IProps, IState> {
 export default CalendarViz;
 
 
-function getContinuousDates() {
-  const startYear = 2022;
-  const endYear = new Date().getFullYear(); // Or any end year you prefer
-  const startDate = new Date(startYear, 0, 1);
-  const endDate = new Date(endYear + 1, 0, 1); // Till the beginning of next year
-  return [startDate, endDate];
-}
\ No newline at end of file
diff --git a/viz/frontend/src/components/LineChartViz.tsx b/viz/frontend/src/components/LineChartViz.tsx
index 06e073b..9a7984d 100644
--- a/viz/frontend/src/components/LineChartViz.tsx
+++ b/viz/frontend/src/components/LineChartViz.tsx
@@ -7,6 +7,7 @@ import {
   getDateInString,
   getLastDateToBeShownInViz,
   getStartDateToBeShownInViz,
+  getContinuousDates
 } from "src/utils/date";
 import { viz_details } from "src/models/constants";
 import { timeDay } from "d3-time";
@@ -54,16 +55,16 @@ class LineChartViz extends React.Component<IProps, IState> {
     const colourDark = this.isPositive ? positiveColorDark : negativeColorDark;
     let lastDayForViz = getLastDateToBeShownInViz(new Date());
     let startDayForViz = getStartDateToBeShownInViz(new Date());
+    const [startDate, endDate] = getContinuousDates();
 
     const line = d3
       .line<{ date: Date; value: number }>()
       .x((d) => x(d.date))
       .y((d) => y(Math.abs(d.value)));
 
-    const svg = d3
-      .select("." + this.name + "12")
+    const svg = d3.select("." + this.name + "12")
       .selectAll("svg")
-      .data(d3.range(2022, 2025))
+      .data([startDate.getFullYear(), endDate.getFullYear()])
       .enter()
       .append("svg")
       .attr("width", width + margin.left + margin.right)
diff --git a/viz/frontend/src/utils/date.ts b/viz/frontend/src/utils/date.ts
index 0acaad5..53a154e 100644
--- a/viz/frontend/src/utils/date.ts
+++ b/viz/frontend/src/utils/date.ts
@@ -23,4 +23,12 @@ function getDateInString(date: Date) {
     return dateString.substring(4, dateString.length);
 }
 
-export { getLastDateToBeShownInViz, getStartDateToBeShownInViz, weeksToShowInViz, getDateInString };
+function getContinuousDates() {
+  const startYear = 2022;
+  const endYear = new Date().getFullYear(); // Or any end year you prefer
+  const startDate = new Date(startYear, 0, 1);
+  const endDate = new Date(endYear + 1, 0, 1); // Till the beginning of next year
+  return [startDate, endDate];
+}
+
+export { getLastDateToBeShownInViz, getStartDateToBeShownInViz, weeksToShowInViz, getDateInString, getContinuousDates };