Change data range for line viz to dates

thebayesianconspiracy · Jul 23, 2023 · bdc8c31 · bdc8c31
1 parent 99d7c74
commit bdc8c31
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/viz/frontend/src/components/LineChartViz.tsx b/viz/frontend/src/components/LineChartViz.tsx
@@ -52,6 +52,8 @@ class LineChartViz extends React.Component<IProps, IState> {
     const negativeColorDark = "#340909";
 
     const colourDark = this.isPositive ? positiveColorDark : negativeColorDark;
+    let lastDayForViz = getLastDateToBeShownInViz(new Date());
+    let startDayForViz = getStartDateToBeShownInViz(new Date());
 
     const line = d3
       .line<{ date: Date; value: number }>()
@@ -84,12 +86,11 @@ class LineChartViz extends React.Component<IProps, IState> {
         d3.extent(chartData.getData(), (d) => new Date(d.date)) as [Date, Date]
       );
 
-      let lastDayForViz = getLastDateToBeShownInViz(new Date());
-      let startDayForViz = getStartDateToBeShownInViz(new Date());
-      const dateFormat = "%d-%m";
+     const dateFormat = "%d-%m";
       const formatDate = (domainValue: Date | d3.NumberValue, index: number) =>
         timeFormat(dateFormat)(domainValue as Date);
 
+      chartData.setData(chartData.getData().filter(d => d.date >= startDayForViz && d.date <= lastDayForViz));
       x.domain([startDayForViz, lastDayForViz]);
       svg
         .append("g")

diff --git a/viz/frontend/src/models/date_data.ts b/viz/frontend/src/models/date_data.ts
@@ -87,6 +87,11 @@ class ArrayDateData {
     return this.data;
   }
 
+  // set data
+  setData(data: Array<DateData>) {
+      this.data = data;
+  }
+
   getValueInWeekOfDate(d: Date): { date: Date | null; value: number | null } {
     const targetWeekStart = this.getWeekStart(d);