Updated range in line chart

thebayesianconspiracy · Jan 1, 2024 · d0dd23f · d0dd23f
1 parent 32f6a8a
commit d0dd23f
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git 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];
-}
diff --git 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
@@ -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 };