Merge pull request #330 from code4romania/bulk-318/#7-line-graph

fix [#318-#7]: fix dashboard graph not showing entire Y Axis
code4romania · Jul 26, 2024 · a3c8336 · a3c8336
2 parents 926def9 + 4acc9e1
commit a3c8336
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -33,7 +33,7 @@
     "react-select": "^5.8.0",
     "react-select-async-paginate": "0.7.4",
     "react-toastify": "^10.0.5",
-    "recharts": "^2.12.7",
+    "recharts": "^2.13.0-alpha.4",
     "use-query-params": "^2.2.1",
     "yup": "^1.4.0"
   },

diff --git a/frontend/src/components/LineChart.tsx b/frontend/src/components/LineChart.tsx
@@ -11,6 +11,12 @@ import {
 } from 'recharts';
 import { LINE_CHART_OPTIONS } from '../common/constants/line-chart-options';
 
+export interface InitialDataSet {
+  name: string;
+  active: string;
+  archived: string;
+}
+
 export interface DataSet {
   name: string;
   active: number;

diff --git a/frontend/src/services/volunteer/volunteer.api.ts b/frontend/src/services/volunteer/volunteer.api.ts
@@ -8,7 +8,7 @@ import { AgeRangeEnum } from '../../common/enums/age-range.enum';
 import { AxiosResponseHeaders } from 'axios';
 import { formatEndDateISO9075, formatStartDateISO9075 } from '../../common/utils/utils';
 import { IVolunteerStatistics } from '../../common/interfaces/volunteer-statistics.interface';
-import { DataSet } from '../../components/LineChart';
+import { DataSet, InitialDataSet } from '../../components/LineChart';
 import { PieChartOption } from '../../common/constants/pie-chart-options';
 import { LineChartOption } from '../../common/constants/line-chart-options';
 
@@ -127,8 +127,12 @@ export const getVolunteerStatistics = async (): Promise<IVolunteerStatistics> =>
 };
 
 export const getVolunteerLineChart = async (interval: LineChartOption): Promise<DataSet[]> => {
-  return API.get('/dashboard/volunteer-status-timeseries', { params: { interval } }).then(
-    (res) => res.data,
+  return API.get('/dashboard/volunteer-status-timeseries', { params: { interval } }).then((res) =>
+    res.data.map((item: InitialDataSet) => ({
+      ...item,
+      active: Number(item.active),
+      archived: Number(item.archived),
+    })),
   );
 };