chore(apps/analytics): make sure that analytics pages do not break for empty courses

apps/frontend-manage/src/components/analytics/activity/DailyActivityPlot.tsx

@@ -1,5 +1,5 @@
 import { WeekdayActivityAnalytics } from '@klicker-uzh/graphql/dist/ops'
-import { H2 } from '@uzh-bf/design-system'
+import { H2, UserNotification } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import {
   Bar,
@@ -49,34 +49,50 @@ function DailyActivityPlot({
     },
   ]
 
+  const noActivity =
+    activeDays.monday === 0 &&
+    activeDays.tuesday === 0 &&
+    activeDays.wednesday === 0 &&
+    activeDays.thursday === 0 &&
+    activeDays.friday === 0 &&
+    activeDays.saturday === 0 &&
+    activeDays.sunday === 0
+
   return (
     <div className="border-uzh-grey-80 rounded-xl border border-solid p-3">
       <H2>{t('manage.analytics.dailyActivity')}</H2>
-      <ResponsiveContainer width="100%" height={300}>
-        <BarChart layout="vertical" data={barChartData}>
-          <XAxis
-            type="number"
-            tickFormatter={(value) => `${value.toFixed(0)}%`}
-            label={{
-              value: t('manage.analytics.percentageOfStudents'),
-              dy: 12,
-            }}
-            height={40}
-          />
-          <YAxis type="category" dataKey="weekday" width={80} />
-          <Tooltip
-            formatter={(value) => [
-              `${(value as number).toFixed(2)} %`,
-              t('manage.analytics.activeStudents'),
-            ]}
-            contentStyle={{
-              borderRadius: '8px',
-              padding: '8px',
-            }}
-          />
-          <Bar dataKey="value" fill="#8884d8" />
-        </BarChart>
-      </ResponsiveContainer>
+      {!noActivity ? (
+        <ResponsiveContainer width="100%" height={300}>
+          <BarChart layout="vertical" data={barChartData}>
+            <XAxis
+              type="number"
+              tickFormatter={(value) => `${value.toFixed(0)}%`}
+              label={{
+                value: t('manage.analytics.percentageOfStudents'),
+                dy: 12,
+              }}
+              height={40}
+            />
+            <YAxis type="category" dataKey="weekday" width={80} />
+            <Tooltip
+              formatter={(value) => [
+                `${(value as number).toFixed(2)} %`,
+                t('manage.analytics.activeStudents'),
+              ]}
+              contentStyle={{
+                borderRadius: '8px',
+                padding: '8px',
+              }}
+            />
+            <Bar dataKey="value" fill="#8884d8" />
+          </BarChart>
+        </ResponsiveContainer>
+      ) : (
+        <UserNotification
+          message={t('manage.analytics.noActivityDistributionData')}
+          type="info"
+        />
+      )}
     </div>
   )
 }

apps/frontend-manage/src/components/analytics/activity/DailyActivityTimeSeries.tsx

@@ -1,5 +1,5 @@
 import { ParticipantActivityTimestamp } from '@klicker-uzh/graphql/dist/ops'
-import { H2 } from '@uzh-bf/design-system'
+import { H2, UserNotification } from '@uzh-bf/design-system'
 import { useTranslations } from 'next-intl'
 import ActivityTimeSeriesPlot from './ActivityTimeSeriesPlot'
 
@@ -15,24 +15,31 @@ function DailyActivityTimeSeries({
   return (
     <div className="border-uzh-grey-80 rounded-xl border border-solid p-3">
       <H2>{t('manage.analytics.dailyStudentActivity')}</H2>
-      <div className="flex w-full flex-col gap-3 lg:flex-row">
-        <ActivityTimeSeriesPlot
-          activityData={activity.map((item) => {
-            const date = new Date(item.date)
-            return {
-              date: date
-                .toLocaleDateString('en-GB', {
-                  day: '2-digit',
-                  month: '2-digit',
-                  year: 'numeric',
-                })
-                .replace(/\//g, '-'),
-              activeParticipants:
-                (item.activeParticipants / courseParticipants) * 100,
-            }
-          })}
+      {activity.length > 0 ? (
+        <div className="flex w-full flex-col gap-3 lg:flex-row">
+          <ActivityTimeSeriesPlot
+            activityData={activity.map((item) => {
+              const date = new Date(item.date)
+              return {
+                date: date
+                  .toLocaleDateString('en-GB', {
+                    day: '2-digit',
+                    month: '2-digit',
+                    year: 'numeric',
+                  })
+                  .replace(/\//g, '-'),
+                activeParticipants:
+                  (item.activeParticipants / courseParticipants) * 100,
+              }
+            })}
+          />
+        </div>
+      ) : (
+        <UserNotification
+          message={t('manage.analytics.noDailyActivityData')}
+          type="info"
         />
-      </div>
+      )}
     </div>
   )
 }