Fix chartjs warnings

Signed-off-by: Taylor Smock <[email protected]>
hotosm · Jul 10, 2023 · d77c69c · d77c69c
1 parent 966e141
commit d77c69c
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 19 deletions.
diff --git a/frontend/src/components/projectDetail/timeline.js b/frontend/src/components/projectDetail/timeline.js
@@ -5,19 +5,29 @@ import {
   PointElement,
   LinearScale,
   CategoryScale,
-  TimeScale,
+  TimeSeriesScale,
   Legend,
   Tooltip,
 } from 'chart.js';
 import { Line } from 'react-chartjs-2';
+import 'chartjs-adapter-date-fns';
 import { useIntl } from 'react-intl';
 
 import messages from './messages';
 import { formatTimelineData, formatTimelineTooltip } from '../../utils/formatChartJSData';
 import { CHART_COLOURS } from '../../config';
 import { useTimeDiff } from '../../hooks/UseTimeDiff';
+import { xAxis } from '../teamsAndOrgs/tasksStatsChart';
 
-ChartJS.register(LineElement, PointElement, LinearScale, CategoryScale, TimeScale, Legend, Tooltip);
+ChartJS.register(
+  LineElement,
+  PointElement,
+  LinearScale,
+  CategoryScale,
+  TimeSeriesScale,
+  Legend,
+  Tooltip,
+);
 
 export default function ProjectTimeline({ tasksByDay }: Object) {
   const intl = useIntl();
@@ -41,7 +51,10 @@ export default function ProjectTimeline({ tasksByDay }: Object) {
             callbacks: { label: (context) => formatTimelineTooltip(context, true) },
           },
         },
-        scales: { xAxes: [{ type: 'time', time: { unit: unit } }] },
+        scales: {
+          y: { ticks: { beginAtZero: true } },
+          x: { ...xAxis(unit) },
+        },
       }}
     />
   );

diff --git a/frontend/src/components/projectStats/contributorsStats.js b/frontend/src/components/projectStats/contributorsStats.js
@@ -1,5 +1,15 @@
 import React from 'react';
 import { Doughnut, Bar } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  ArcElement,
+  BarElement,
+  CategoryScale,
+  Legend,
+  LinearScale,
+  Title,
+  Tooltip,
+} from 'chart.js';
 import { FormattedMessage, useIntl } from 'react-intl';
 
 import messages from './messages';
@@ -10,6 +20,7 @@ import { useContributorStats } from '../../hooks/UseContributorStats';
 import { StatsCardContent } from '../statsCard';
 
 export default function ContributorsStats({ contributors }) {
+  ChartJS.register(BarElement, CategoryScale, Legend, LinearScale, Title, Tooltip, ArcElement);
   const intl = useIntl();
   const stats = useContributorStats(contributors.userContributions);
   const getUserLevelLabel = (level) => intl.formatMessage(userMessages[`mapperLevel${level}`]);

diff --git a/frontend/src/components/teamsAndOrgs/tasksStatsChart.js b/frontend/src/components/teamsAndOrgs/tasksStatsChart.js
@@ -6,7 +6,7 @@ import {
   BarElement,
   Tooltip,
   Legend,
-  TimeScale,
+  TimeSeriesScale,
 } from 'chart.js';
 import { Bar } from 'react-chartjs-2';
 import 'chartjs-adapter-date-fns';
@@ -16,8 +16,31 @@ import messages from '../projectDetail/messages';
 import { CHART_COLOURS } from '../../config';
 import { useTimeDiff } from '../../hooks/UseTimeDiff';
 import { formatTasksStatsData, formatTimelineTooltip } from '../../utils/formatChartJSData';
+import { enUS } from 'date-fns/locale';
+import { formatISO } from 'date-fns';
 
-ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend, TimeScale);
+ChartJS.register(CategoryScale, LinearScale, BarElement, Tooltip, Legend, TimeSeriesScale);
+
+/**
+ * x axis configuration common between this and {@link ../projectDetail/timeline.js}
+ * @param unit The base unit for the axis
+ * @typedef {import('chart.js').ScaleOptionsByType} ScaleOptionsByType
+ * @returns {ScaleOptionsByType} The options to use for x axis configuration
+ */
+export function xAxis(unit) {
+  return {
+    type: 'timeseries',
+    adapters: { date: { locale: enUS } },
+    time: {
+      unit: unit,
+      tooltipFormat: enUS.formatLong.date,
+    },
+    ticks: {
+      source: 'labels',
+      callback: (value, index, ticks) => formatISO(ticks[index].value, { representation: 'date' }),
+    },
+  };
+}
 
 const TasksStatsChart = ({ stats }) => {
   const intl = useIntl();
@@ -39,21 +62,16 @@ const TasksStatsChart = ({ stats }) => {
       },
     },
     scales: {
-      yAxes: [
-        {
-          stacked: true,
-          ticks: {
-            beginAtZero: true,
-          },
+      y: {
+        stacked: true,
+        ticks: {
+          beginAtZero: true,
         },
-      ],
-      xAxes: [
-        {
-          stacked: true,
-          type: 'time',
-          time: { unit: unit },
-        },
-      ],
+      },
+      x: {
+        stacked: true,
+        ...xAxis(unit),
+      },
     },
   };
   return (